动态表头

hcong

2024-10-18 e95ca9ef89c79fbff8f0d1394311f5f18d653cdd

 src/views/fysp/evaluation/EvalutationEdit.vue

@@ -1,13 +1,304 @@
<template>
  <FYPageHeader title="评估结果详情"></FYPageHeader>
  <el-row v-for="item in evaluation" :key="item.id"> </el-row>
  <div class="btns">
    <!-- <el-button type="primary" @click="submit" :disabled="!isUpdated">提交</el-button> -->
  </div>
  <div class="fixed-div">
    <span>总分： {{ score }}</span>
  </div>
  <el-table
    class="table-style"
    :data="tableData"
    ref="tableRef"
    :span-method="objectSpanMethod"
    table-layout="fixed"
    :cell-style="cellClassName"
    border
    stripe
  >
    <el-table-column v-slot="scope" prop="one_title" label="一级指标" width="200">
      <!-- <el-checkbox v-model="scope.row.one_select" @change="checked => oneSelectChange(checked, scope.row)">{{ scope.row.one_title }}</el-checkbox> -->
    </el-table-column>
    <el-table-column prop="one_score" label="分值" width="55" />
    <el-table-column prop="one_maxScore" label="最大分值" width="90" />
    <el-table-column v-slot="scope" prop="two_title" label="二级指标" width="200">
      <!-- <el-checkbox v-model="scope.row.two_select" @change="checked => twoSelectChange(checked, scope.row)">{{ scope.row.two_title }}</el-checkbox> -->
    </el-table-column>
    <el-table-column prop="two_score" label="分值" width="55" />
    <el-table-column prop="two_maxScore" label="最大分值" width="90" />
    <el-table-column v-slot="scope" prop="three_title" label="具体问题">
      <el-checkbox
        :disabled="disable"
        v-model="scope.row.three_select"
        @change="(checked) => threeSelectChange(checked, scope.row)"
        >{{ scope.row.three_title }}</el-checkbox
      >
    </el-table-column>
    <el-table-column prop="three_score" label="单项扣分" width="90" />
  </el-table>
</template>

<script>
import evaluateApi from '@/api/fysp/evaluateApi';
import { useFetchData } from '@/composables/fetchData';
import { ElMessage } from 'element-plus';
export default {
  data() {
    return {};
  setup() {
    const { loading, fetchData } = useFetchData();
    return { loading, fetchData };
  },
  methods: {}
  data() {
    return {
      disable: false,
      score: '',
      tableData: [],
      evaluation: [],
      subTaskId: '',
      isUpdated: false
    };
  },
  created() {
    // // watch 路由的参数，以便再次获取数据
    // this.$watch(
    //   () => this.$route.params,
    //   () => {
    //     this.getScore();
    //   },
    //   // 组件创建完后获取数据，
    //   // 此时 data 已经被 observed 了
    //   { immediate: true }
    // );
  },
  computed: {
    // 已被勾选的item
    checkedUpdatedList() {
      var list = [];
      for (let index = 0; index < this.tableData.length; index++) {
        const element = this.tableData[index];
        if (element.three_select) {
          list.push(element.three_id);
        }
      }
      return list;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 每一个单元格的class
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'one_score') {
        if (row.one_score < 0) {
          return { color: 'red' };
        }
      } else if (column.property === 'two_score') {
        if (row.two_score < 0) {
          return { color: 'red' };
        }
      } else if (column.property === 'three_score') {
        if (row.three_score < 0) {
          return { color: 'red' };
        }
      }
      return { color: 'black' };
    },
    /** 提价 */
    submit() {
      this.disable = true;
      evaluateApi
        .updateScore({
          subTaskId: this.subTaskId,
          itemList: this.checkedUpdatedList
        })
        .then((res) => {
          this.disable = false;
          this.score = res.data.score;
          // if (res.success) {
          //   ElMessage({
          //     message: res.message,
          //     type: 'success'
          //   });
          // }else {
          //   ElMessage({
          //     message: res.message,
          //     type: 'error'
          //   });
          // }
        })
        .catch((e) => {
          this.disable = false;
        });
      setTimeout(() => {
        this.getList();
      }, 200);
    },
    /** 通过第三级的id获取上级以及顶级 */
    getSuperObjByThreeId(threeId, list, path = []) {
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
        // 将当前项添加到路径中
        const currentPath = path.concat(item);
        if (item.id === threeId) {
          // 如果找到匹配的 id，返回路径数组
          return currentPath;
        }
        const subList = item.subList;
        if (subList) {
          // 递归查找子列表
          const result = this.getSuperObjByThreeId(threeId, subList, currentPath);
          if (result) {
            return result; // 如果找到匹配的 id，返回结果
          }
        }
      }
      return null; // 如果没有找到匹配的 id，返回 null
    },
    /** 问题选择框 */
    threeSelectChange(isSelect, row) {
      this.isUpdated = true;
      this.submit();
    },
    /** 列合并 */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        // 对 一级指标 列进行合并
        let rowSpan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].one_id === row.one_id) {
            rowSpan++;
          } else {
            break;
          }
        }
        if (rowIndex > 0) {
          if (this.tableData[rowIndex - 1].one_id === row.one_id) {
            return { rowspan: 0, colspan: 0 };
          }
        }
        return { rowspan: rowSpan, colspan: 1 };
      } else if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        // 对 二级指标 列进行合并，确保 一级指标 一样
        let rowSpan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].one_id === row.one_id && this.tableData[i].two_id === row.two_id) {
            rowSpan++;
          } else {
            break;
          }
        }
        if (rowIndex > 0) {
          if (
            this.tableData[rowIndex - 1].one_id === row.one_id &&
            this.tableData[rowIndex - 1].two_id === row.two_id
          ) {
            return { rowspan: 0, colspan: 0 };
          }
        }
        return { rowspan: rowSpan, colspan: 1 };
      }
    },
    /** 对象属性拷贝 */
    deepCopyWithPrefix(obj, target, prefix) {
      // 确保 target 是一个对象
      if (typeof target !== 'object' || target === null) {
        target = {};
      }

      // 遍历对象的所有属性
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 为属性名加上前缀
          const newKey = prefix + key;
          // 如果属性值是对象，则递归复制
          if (typeof obj[key] === 'object' && obj[key] !== null) {
            this.deepCopyWithPrefix(obj[key], (target[newKey] = {}), prefix);
          } else {
            // 否则直接复制属性
            target[newKey] = obj[key];
          }
        }
      }

      return target;
    },
    /** @param data 列表数据 */
    genTableData(data) {
      var result = [];
      if (data) {
        for (let i = 0; i < data.length; i++) {
          const firstLevelItem = data[i];
          var secondLevel = firstLevelItem.subList;
          if (secondLevel) {
            for (let j = 0; j < secondLevel.length; j++) {
              const secondLevelItem = secondLevel[j];
              var thirdLevel = secondLevelItem.subList;
              if (thirdLevel) {
                for (let q = 0; q < thirdLevel.length; q++) {
                  const thirdLevelItem = thirdLevel[q];
                  var item = {};
                  this.deepCopyWithPrefix(firstLevelItem, item, 'one_');
                  this.deepCopyWithPrefix(secondLevelItem, item, 'two_');
                  this.deepCopyWithPrefix(thirdLevelItem, item, 'three_');
                  result.push(item);
                }
              }
            }
          }
        }
      }
      return result;
    },
    getList() {
      this.subTaskId = this.$route.params.subTaskId;
      evaluateApi.fetchItemEvaluation(this.subTaskId).then((res) => {
        this.isUpdated = false;
        this.score = res.data.score;
        this.tableData = this.genTableData(res.data.details);
      });
    },
    onSearch(page, func) {
      evaluateApi.fetchItemEvaluation(this.$route.params.subTaskId).then((res) => {
        if (typeof func === 'function') {
          // 处理数据
          var data = this.genTableData(res.data);

          func({ data: data });
        }
        this.tableData = this.genTableData(res.data);
      });
    }
  }
};
</script>
<style scoped></style>
<style scoped>
.table-style {
  width: 100%;
  padding-bottom: 30px;
}
.btns {
  padding-bottom: 10px;
  padding-right: 30px;
  display: flex;
  flex-direction: row-reverse;
}
/* 改变表格内单元格边框颜色 */
.el-table {
  --el-table-border-color: #000000;
}
.red-cell {
  background-color: red;
}
/* 固定定位的 div */
.fixed-div {
  position: fixed;
  top: 7%; /* 距离顶部 20px */
  right: 20px; /* 距离右侧 20px */
  width: 200px; /* div 的宽度 */
  background-color: #f2f2f2; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  z-index: 1000; /* 确保 div 在页面其他内容之上 */
}
</style>