Newer
Older
KaiFengPC / src / views / preassess / evaluation / control.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <el-card class="box-card">
  3. <el-table
  4. :data="tableData"
  5. v-loading="loading"
  6. element-loading-text="数据加载中..."
  7. :span-method="objectSpanMethod"
  8. :border="true"
  9. max-height="400px"
  10. >
  11. <el-table-column label="评价类型" prop="evaluationType" width="120" />
  12. <el-table-column label="控制项" prop="controlItem" width="240" />
  13. <el-table-column label="评价标准" prop="evaluationCriterion" />
  14. <el-table-column label="是否达标" prop="status" width="100">
  15. <template #default="{ row }">
  16. <el-switch
  17. v-model="row.status"
  18. active-value="1"
  19. inactive-value="0"
  20. :disabled="row.evaluationOpen === 'false' || opts.type === 'view'"
  21. @change="
  22. val => {
  23. statusChange(val, row);
  24. }
  25. "
  26. />
  27. </template>
  28. </el-table-column>
  29. <el-table-column label="佐证材料" width="200">
  30. <template #default="{ row }">
  31. <upload
  32. :file-list="row.fileSaveRequestList"
  33. :disabled="opts.type === 'view'"
  34. @success="
  35. file => {
  36. uploadSuccess(file, row);
  37. }
  38. "
  39. >
  40. <el-icon :size="20" class="pointer" :class="{ disabled: opts.type === 'view' }"><Upload /></el-icon>
  41. </upload>
  42. <div class="file-list">
  43. <div class="file" v-for="file in row.fileSaveRequestList">
  44. <span class="ellipsis" :title="file.name" :class="{ disabled: opts.type === 'view' }" @click="handlePreview(file)">{{
  45. file.name
  46. }}</span>
  47. <span class="del" @click="removeFile(file, row)" v-if="opts.type !== 'view'">删除</span>
  48. </div>
  49. </div>
  50. </template>
  51. </el-table-column>
  52. </el-table>
  53. </el-card>
  54. </template>
  55.  
  56. <script setup>
  57. import { onMounted } from 'vue';
  58. import { getControlList } from '@/api/preassess/evaluation';
  59. import upload from './upload';
  60. import useTable from './mixins';
  61. const { proxy } = getCurrentInstance();
  62.  
  63. const props = defineProps({
  64. id: {
  65. type: [String, Number],
  66. default: '',
  67. },
  68. opts: {
  69. type: Object,
  70. default: () => {},
  71. },
  72. projectInfo: {
  73. type: Object,
  74. default: () => {},
  75. },
  76. });
  77. const { id, opts, projectInfo } = props;
  78. const { treeData, loading, tableData, getTreeCurRow, setMergeData, handlePreview, uploadSuccess, removeFile } = useTable(
  79. proxy,
  80. opts,
  81. 'evaluationCriterion'
  82. );
  83.  
  84. const getTableList = async () => {
  85. const res = await getControlList(projectInfo.engineeringType);
  86. if (res?.code !== 200) return;
  87. setFields(res.data, '0');
  88. setSort(res.data);
  89. setMergeData(res.data);
  90. treeData.value = res.data;
  91. nextTick(() => {
  92. console.log(treeData.value, tableData.value);
  93. });
  94. };
  95. const getDetail = data => {
  96. setFields(data, '0');
  97. setSort(data);
  98. setMergeData(data);
  99. treeData.value = data;
  100. };
  101.  
  102. const setFields = (data, level) => {
  103. for (const item of data) {
  104. item.level = level;
  105. if (!item.fileSaveRequestList) {
  106. item.fileSaveRequestList = [];
  107. }
  108. switch (level) {
  109. case '0':
  110. item.sort = item.evaluationTypeRank;
  111. break;
  112. case '1':
  113. item.sort = item.controlItemRank;
  114. break;
  115. case '2':
  116. item.sort = item.evaluationCriterionRank;
  117. break;
  118. default:
  119. break;
  120. }
  121. if (item.children) {
  122. setFields(item.children, level * 1 + 1 + '');
  123. }
  124. }
  125. };
  126.  
  127. const setSort = data => {
  128. data.sort((a, b) => {
  129. return b.sort - a.sort;
  130. });
  131. for (const item of data) {
  132. if (item.children) {
  133. setSort(item.children);
  134. }
  135. }
  136. };
  137.  
  138. const statusChange = (val, row) => {
  139. const treeDataCurRow = getTreeCurRow(treeData.value, row);
  140. treeDataCurRow.status = val;
  141. };
  142.  
  143. // 表数据合并
  144. const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  145. if (columnIndex === 0) {
  146. const rowspan = row.length1 - rowIndex === row.sum1 ? row.sum1 : 0;
  147. return {
  148. rowspan,
  149. colspan: 1,
  150. };
  151. } else if (columnIndex === 1) {
  152. const rowspan = row.length2 - rowIndex === row.sum2 ? row.sum2 : 0;
  153. return {
  154. rowspan,
  155. colspan: 1,
  156. };
  157. }
  158. };
  159.  
  160. onMounted(() => {
  161. if (!id) getTableList();
  162. });
  163.  
  164. defineExpose({
  165. treeData,
  166. getDetail,
  167. });
  168. </script>
  169.  
  170. <style lang="scss" scoped>
  171. .pointer {
  172. cursor: pointer;
  173. }
  174. .disabled {
  175. cursor: not-allowed !important;
  176. }
  177. .file-list {
  178. .file {
  179. display: flex;
  180. align-items: center;
  181. }
  182. .del {
  183. flex-shrink: 0;
  184. color: #f56c6c;
  185. cursor: pointer;
  186. margin-left: 10px;
  187. }
  188. .disabled {
  189. cursor: not-allowed !important;
  190. }
  191. }
  192. .ellipsis {
  193. overflow: hidden;
  194. white-space: nowrap;
  195. text-overflow: ellipsis;
  196. cursor: pointer;
  197. }
  198. </style>