- <template>
- <el-card class="box-card">
- <el-table
- :data="tableData"
- v-loading="loading"
- element-loading-text="数据加载中..."
- :span-method="objectSpanMethod"
- :border="true"
- max-height="400px"
- >
- <el-table-column label="评价类型" prop="evaluationType" width="120" />
- <el-table-column label="控制项" prop="controlItem" width="240" />
- <el-table-column label="评价标准" prop="evaluationCriterion" />
- <el-table-column label="是否达标" prop="status" width="100">
- <template #default="{ row }">
- <el-switch
- v-model="row.status"
- active-value="1"
- inactive-value="0"
- :disabled="row.evaluationOpen === 'false' || opts.type === 'view'"
- @change="
- val => {
- statusChange(val, row);
- }
- "
- />
- </template>
- </el-table-column>
- <el-table-column label="佐证材料" width="200">
- <template #default="{ row }">
- <upload
- :file-list="row.fileSaveRequestList"
- :disabled="opts.type === 'view'"
- @success="
- file => {
- uploadSuccess(file, row);
- }
- "
- >
- <el-icon :size="20" class="pointer" :class="{ disabled: opts.type === 'view' }"><Upload /></el-icon>
- </upload>
- <div class="file-list">
- <div class="file" v-for="file in row.fileSaveRequestList">
- <span class="ellipsis" :title="file.name" :class="{ disabled: opts.type === 'view' }" @click="handlePreview(file)">{{
- file.name
- }}</span>
- <span class="del" @click="removeFile(file, row)" v-if="opts.type !== 'view'">删除</span>
- </div>
- </div>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
- </template>
-
- <script setup>
- import { onMounted } from 'vue';
- import { getControlList } from '@/api/preassess/evaluation';
- import upload from './upload';
- import useTable from './mixins';
- const { proxy } = getCurrentInstance();
-
- const props = defineProps({
- id: {
- type: [String, Number],
- default: '',
- },
- opts: {
- type: Object,
- default: () => {},
- },
- projectInfo: {
- type: Object,
- default: () => {},
- },
- });
- const { id, opts, projectInfo } = props;
- const { treeData, loading, tableData, getTreeCurRow, setMergeData, handlePreview, uploadSuccess, removeFile } = useTable(
- proxy,
- opts,
- 'evaluationCriterion'
- );
-
- const getTableList = async () => {
- const res = await getControlList(projectInfo.engineeringType);
- if (res?.code !== 200) return;
- setFields(res.data, '0');
- setSort(res.data);
- setMergeData(res.data);
- treeData.value = res.data;
- nextTick(() => {
- console.log(treeData.value, tableData.value);
- });
- };
- const getDetail = data => {
- setFields(data, '0');
- setSort(data);
- setMergeData(data);
- treeData.value = data;
- };
-
- const setFields = (data, level) => {
- for (const item of data) {
- item.level = level;
- if (!item.fileSaveRequestList) {
- item.fileSaveRequestList = [];
- }
- switch (level) {
- case '0':
- item.sort = item.evaluationTypeRank;
- break;
- case '1':
- item.sort = item.controlItemRank;
- break;
- case '2':
- item.sort = item.evaluationCriterionRank;
- break;
- default:
- break;
- }
- if (item.children) {
- setFields(item.children, level * 1 + 1 + '');
- }
- }
- };
-
- const setSort = data => {
- data.sort((a, b) => {
- return b.sort - a.sort;
- });
- for (const item of data) {
- if (item.children) {
- setSort(item.children);
- }
- }
- };
-
- const statusChange = (val, row) => {
- const treeDataCurRow = getTreeCurRow(treeData.value, row);
- treeDataCurRow.status = val;
- };
-
- // 表数据合并
- const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
- if (columnIndex === 0) {
- const rowspan = row.length1 - rowIndex === row.sum1 ? row.sum1 : 0;
- return {
- rowspan,
- colspan: 1,
- };
- } else if (columnIndex === 1) {
- const rowspan = row.length2 - rowIndex === row.sum2 ? row.sum2 : 0;
- return {
- rowspan,
- colspan: 1,
- };
- }
- };
-
- onMounted(() => {
- if (!id) getTableList();
- });
-
- defineExpose({
- treeData,
- getDetail,
- });
- </script>
-
- <style lang="scss" scoped>
- .pointer {
- cursor: pointer;
- }
- .disabled {
- cursor: not-allowed !important;
- }
- .file-list {
- .file {
- display: flex;
- align-items: center;
- }
- .del {
- flex-shrink: 0;
- color: #f56c6c;
- cursor: pointer;
- margin-left: 10px;
- }
- .disabled {
- cursor: not-allowed !important;
- }
- }
- .ellipsis {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- cursor: pointer;
- }
- </style>