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

<style lang="less" scoped>
.scaleTable {
  min-height: 100px;
  .table_box {
    padding: 0 30px;
  }
  .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: 0;
  }
}
/deep/.el-table th,
.el-table tr {
  height: 50px;
  background: #e3eaf4;
}
/deep/.el-table th {
  padding: 0;
}
.custom_table_header {
  vertical-align: middle;
  &::before {
    content: "*";
    color: red;
    font-size: 12px;
    margin-right: 4px;
  }
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  padding: 18px 0;
  position: static;
}
/deep/ .el-textarea__inner {
  overflow-y: hidden;
}
.cell_center_box {
  /deep/ .el-input__inner {
    // width: 40px;
    text-align: center;
  }
}
/deep/.el-select--mini {
  width: 100%;
}
/deep/ .el-input--mini {
  font-size: 14px;
}
/deep/ .el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
</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="问题内容">
          <template slot="header">
            <div class="custom_table_header">问题内容</div>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].two_content`"
              :rules="rules.issueContent"
            >
              <el-input
                :ref="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].two_content`"
                type="textarea"
                rows="1"
                :autosize="true"
                resize="none"
                v-model="scope.row.two_content"
                clearable
                maxlength="300"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="two_factor"
          label="系数"
          width="90px"
          v-if="tableResultType === 1"
        >
          <template slot-scope="scope">
            <div class="cell_center_box">
              <el-form-item
                :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].two_factor`"
                :rules="rules.issueFactor"
              >
                <el-input
                  type="number"
                  v-model.number="scope.row.two_factor"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="two_constant"
          label="常数"
          width="90px"
          v-if="tableResultType === 1"
        >
          <template slot-scope="scope">
            <div class="cell_center_box">
              <el-form-item
                :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].two_constant`"
                :rules="rules.issueConstant"
              >
                <el-input
                  type="number"
                  v-model.number="scope.row.two_constant"
                  placeholder="请输入"
                  style="text-align: center"
                ></el-input>
              </el-form-item>
            </div>
          </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 ? '200px' : ''"
        >
          <template slot="header">
            <div class="custom_table_header">选项内容</div>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].content`"
              :rules="rules.content"
            >
              <el-input
                :ref="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].content`"
                type="textarea"
                rows="1"
                :autosize="true"
                resize="none"
                v-model="scope.row.content"
                clearable
                maxlength="300"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="编码"
          :width="tableResultType === 2 ? '200px' : ''"
          v-if="tableResultType === 1"
        >
          <template slot-scope="scope">
            <el-form-item
              ><el-select
                clearable
                remote
                filterable
                :remote-method="searchRuleCode"
                @focus="ruleCodeFocus(scope.$index)"
                v-model.trim="scope.row.ruleCode"
              >
                <el-option
                  v-for="item in scope.row.ruleCodeList"
                  :key="item.code"
                  :value="item.code"
                >
                  <span>{{ item.name }}</span>
                  <span>({{ item.code }})</span>
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="分值"
          v-if="tableResultType === 1"
        >
          <template slot="header">
            <div class="custom_table_header">分值</div>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].score`"
              :rules="rules.score"
            >
              <el-input
                type="number"
                maxlength="6"
                v-model.number="scope.row.score"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          label="结果"
          width="200px"
          v-if="tableResultType === 2"
        >
          <template slot="header">
            <div class="custom_table_header">结果</div>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].result`"
              :rules="rules.result"
            >
              <el-input
                :ref="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].result`"
                type="textarea"
                rows="1"
                :autosize="true"
                resize="none"
                v-model="scope.row.result"
                clearable
                maxlength="300"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="pushInfo"
          label="建议"
          v-if="tableResultType === 2"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].pushInfo`"
              :rules="rules.pushInfo"
            >
              <el-input
                :ref="`klScaleParent[${tableIndex}].klScaleSaveGroup[${scope.$index}].pushInfo`"
                type="textarea"
                rows="1"
                :autosize="true"
                resize="none"
                v-model="scope.row.pushInfo"
                clearable
                maxlength="500"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import rules from "./rules";
import api from "@api/knowledgeTree.js";
export default {
  name: "scaleTable",
  data() {
    return {
      tableShow: true,
      rules: rules,
      ruleCodeIndex: null
    };
  },
  methods: {
    resizeTable() {
      setTimeout(() => {
        this.tableData.forEach((item, index) => {
          this.$refs[
            `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].content`
          ] &&
            this.$refs[
              `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].content`
            ].resizeTextarea();
          this.$refs[
            `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].two_content`
          ] &&
            this.$refs[
              `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].two_content`
            ].resizeTextarea();
          this.$refs[
            `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].result`
          ] &&
            this.$refs[
              `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].result`
            ].resizeTextarea();
          this.$refs[
            `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].pushInfo`
          ] &&
            this.$refs[
              `klScaleParent[${this.tableIndex}].klScaleSaveGroup[${index}].pushInfo`
            ].resizeTextarea();
        });
      }, 500);
    },
    ruleCodeFocus(index) {
      this.ruleCodeIndex = index;
    },
    searchRuleCode(val) {
      api
        .searchRuleCode({ name: val === "" ? null : val, type: 1 })
        .then((res) => {
          if (res.data.code == "0") {
            this.$emit(
              "CHANGE_FORM_DATA",
              this.tableIndex,
              this.ruleCodeIndex,
              "ruleCodeList",
              res.data.data
            );
          }
        });
    },
    addGroup() {},
    // 单选、多选
    handleSelectTypeBtn(index, type) {
      this.$emit(
        "CHANGE_FORM_DATA",
        this.tableIndex,
        index,
        "two_selectType",
        type
      );
    },
    // 计算表格选项内容的值
    optionLength(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;

      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.tableShow = false;

      setTimeout(() => {
        this.tableShow = true;
      });
    }
  },
  props: {
    tableData: {
      default: []
    },
    tableIndex: {
      required: true
    },
    tableResultType: {
      required: true,
      default: 2
    }
  }
};
</script>