platformFront/src/components/knowledgeExtra/AddAssess/scale-table.vue

<style lang="less" scoped>
.scaleTable {
  min-height: 100px;
  .table_box {
    padding: 0 10px;
  }
  .btn_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .btn_div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .table_select_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /deep/ .el-button--text {
      padding: 3px 0;
      margin: 0;
    }
  }
  /deep/.el-input--mini .el-input__inner {
    width: 100%;
  }
  /deep/.el-table th {
    padding: 2px 0;
  }
}
</style>
<template>
  <div class="scaleTable" :id="`scaleTableRef[${tableIndex}]`">
    <div class="table_box">
      <el-table
        v-if="tableShow"
        :data="tableData"
        header-row-class-name="header_row_class_name"
        border
        style="width: 100%; margin: 20px 0"
        :span-method="objectSpanMethod"
        :ref="`scaleTableRef[${tableIndex}]`"
      >
        <el-table-column prop="issueId" label="组" width="70px">
          <template slot-scope="scope">
            <div class="btn_box">
              <div class="btn_div">
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: 1,
                      tableIndex,
                      rowIndex: scope.$index,
                      groupId: scope.row.groupId
                    })
                  "
                  src="../../../images/add-new-rule-sub.png"
                  alt=""
                />
              </div>
              <div
                class="btn_div"
                v-if="imposeRestrictionsRemoveOnGroup(scope.row.groupId)"
              >
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: -1,
                      tableIndex,
                      groupId: scope.row.groupId
                    })
                  "
                  src="../../../images/add-new-rule-del.png"
                  alt=""
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="groupId" label="问题" width="70px">
          <template slot-scope="scope">
            <div class="btn_box">
              <div class="btn_div">
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: 2,
                      tableIndex,
                      rowIndex: scope.$index,
                      groupId: scope.row.groupId,
                      issueId: scope.row.issueId
                    })
                  "
                  src="../../../images/add-new-rule-sub.png"
                  alt=""
                />
              </div>
              <div
                class="btn_div"
                v-if="
                  imposeRestrictionsRemoveOnIssue({
                    groupId: scope.row.groupId,
                    issueId: scope.row.issueId
                  })
                "
              >
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: -2,
                      tableIndex,
                      issueId: scope.row.issueId
                    })
                  "
                  src="../../../images/add-new-rule-del.png"
                  alt=""
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="two_selectType" label="选择" width="70px">
          <template slot-scope="scope">
            <div class="table_select_btn">
              <el-button
                @click="handleSelectTypeBtn(scope.$index, 1)"
                :style="scope.row.two_selectType != 1 ? { color: '#999' } : ''"
                type="text"
                >单选</el-button
              >
              <el-button
                :style="scope.row.two_selectType != 2 ? { color: '#999' } : ''"
                @click="handleSelectTypeBtn(scope.$index, 2)"
                type="text"
                >多选</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="two_content"
          label="问题内容"
          :width="tableResultType === 1 ? '140px' : ''"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.two_content"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="two_factor"
          label="系数"
          width="70px"
          v-if="tableResultType === 2"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.two_factor"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="two_constant"
          label="常数"
          width="70px"
          v-if="tableResultType === 2"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.two_constant"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="issueId" label="选项个数" width="80px">
          <template slot-scope="scope">
            <div>
              {{ optionLength(scope.row.issueId) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="选项" width="70px">
          <template slot-scope="scope">
            <div class="btn_box">
              <div class="btn_div">
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: 3,
                      tableIndex,
                      rowIndex: scope.$index,
                      groupId: scope.row.groupId,
                      issueId: scope.row.issueId
                    })
                  "
                  src="../../../images/add-new-rule-sub.png"
                  alt=""
                />
              </div>
              <div
                class="btn_div"
                v-if="imposeRestrictionsRemoveOnOption(scope.row.issueId)"
              >
                <img
                  @click="
                    $emit('CHANGE_TABLE_ROW', {
                      type: -3,
                      tableIndex,
                      rowIndex: scope.$index
                    })
                  "
                  src="../../../images/add-new-rule-del.png"
                  alt=""
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="选项内容"
          :width="tableResultType === 1 ? '140px' : ''"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.content"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="分值"
          v-if="tableResultType === 2"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.content"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          label="结果"
          width="100px"
          v-if="tableResultType === 1"
        >
          <template slot-scope="scope">
            <el-form-item>
              <el-input
                type="text"
                v-model="scope.row.result"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="pushInfo"
          label="建议"
          v-if="tableResultType === 1"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "scaleTable",
  data() {
    return {
      tableShow: true
    };
  },
  methods: {
    addGroup() {},
    // 单选、多选
    handleSelectTypeBtn(index, type) {
      this.$emit(
        "CHANGE_FORM_DATA",
        this.tableIndex,
        index,
        "two_selectType",
        type
      );
    },
    // 计算表格选项内容的值
    optionLength(val) {
      console.log("console.log();", val);
      if (val || val === 0) {
        const accordWithThis = this.tableData.filter(
          (item) => item.issueId === val
        );
        return accordWithThis.length ? accordWithThis.length : 0;
      }
    },
    // 表格合并单元格逻辑
    getSpanArr(data) {
      this.spanArr = [];
      this.spanArr1 = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          /** *
           * 例子：
           * name:1
           * name:1
           * name:2
           * name:2
           * 最终结果：spanArr = [2,0,2,0]
           */
          this.spanArr.push(1);
          this.pos = 0;
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          if (data[i].groupId === data[i - 1].groupId) {
            // 如果remark相等就累加，并且push 0
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            // 不相等push 1,并且pos 要换成当前下标
            this.spanArr.push(1);
            this.pos = i;
          }

          if (data[i].issueId === data[i - 1].issueId) {
            // 如果remark相等就累加，并且push 0
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            // 不相等push 1,并且pos 要换成当前下标
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (
        column.label == "问题" ||
        column.label == "选择" ||
        column.label == "问题内容" ||
        column.label == "系数" ||
        column.label == "常数" ||
        column.label == "选项个数"
      ) {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 删除组限制：剩余一组时隐藏删除按钮
    imposeRestrictionsRemoveOnGroup(groupId) {
      // 查找有没有其他组存在 如果为0的话则不存在
      const otherGroupLength = this.tableData.filter(
        (item) => item.groupId !== groupId
      ).length;
      return otherGroupLength;
    },
    // 删除问题限制：该组剩余一个问题时隐藏删除按钮
    imposeRestrictionsRemoveOnIssue(val) {
      const { groupId, issueId } = val;
      // 获取该组所有的issus
      const thisGroups = this.tableData.filter(
        (item) => item.groupId === groupId
      );
      // 查找该组有没有其他问题 otherIssueLength为0表示只有当前一个问题存在 所以隐藏删除按钮
      const otherIssueLength = thisGroups.filter(
        (item) => item.issueId !== issueId
      ).length;

      console.log(thisGroups, otherIssueLength);
      if (otherIssueLength) {
        return true;
      }
      return false;
    },
    // 删除选项限制：该问题剩余一个选项时隐藏删除按钮
    imposeRestrictionsRemoveOnOption(issueId) {
      // 查找同组的问题，如果只有一个问题则隐藏删除按钮
      const thisOptionByissueIdLenth = this.tableData.filter(
        (item) => item.issueId === issueId
      ).length;
      if (thisOptionByissueIdLenth > 1) {
        return true;
      }
      return false;
    }
  },
  created() {
    this.getSpanArr(this.tableData);
  },
  watch: {
    tableData: {
      handler() {
        this.getSpanArr(this.tableData);
      },
      deep: true
    },
    tableResultType() {
      // this.$nextTick(() => {
      //   console.log(this.$refs[`scaleTableRef[${this.tableIndex}]`]);
      //   console.log(
      //     document.getElementById(`scaleTableRef[${this.tableIndex}]`).offsetHeight
      //   );
      // });

      // this.$refs[`scaleTableRef[${this.tableIndex}]`].doLayout();
      this.tableShow = false;

      setTimeout(() => {
        // this.$refs[`scaleTableRef[${this.tableIndex}]`].doLayout();
        this.tableShow = true;
      });
    }
  },
  props: {
    tableData: {
      default: []
    },
    tableIndex: {
      required: true
    },
    tableResultType: {
      required: true,
      default: 1
    }
  }
};
</script>