Newer
Older
KaiFengPC / src / views / spongePerformance / management / control / index.vue
@鲁yixuan 鲁yixuan on 21 Aug 17 KB updata
  1. <template>
  2. <div class="control" v-loading.fullscreen.lock="loading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.6)">
  3. <el-page-header class="header" @back="goBack(route, '/spongePerformance/management')">
  4. <template #content>
  5. <span class="title">{{ year }}年</span>
  6. </template></el-page-header
  7. >
  8. <div class="body">
  9. <el-form ref="ruleForm" :model="form">
  10. <!-- {{ year }} -->
  11. <el-row :gutter="20">
  12. <el-col :span="4">
  13. <el-form-item label="指标名称:" prop="itemContent">
  14. <el-input style="width: 240px" clearable v-model="form.itemContent" placeholder="请输入指标名称"></el-input>
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="4">
  18. <el-form-item>
  19. <el-button type="primary" icon="Search" @click="getTableData({ configId: controlId })"> 搜索</el-button>
  20. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  21. </el-form-item>
  22. </el-col>
  23. <el-col :span="16">
  24. <el-button
  25. type="primary"
  26. icon="Plus"
  27. style="float: right"
  28. :disabled="type == 'view'"
  29. @click="openDialog({}, '1', 'add', '一级指标')"
  30. >
  31. 新增一级指标
  32. </el-button>
  33. </el-col>
  34. </el-row>
  35. </el-form>
  36. <el-table
  37. default-expand-all
  38. ref="tableRef"
  39. :data="treeData"
  40. :max-height="700"
  41. element-loading-text="数据加载中..."
  42. row-key="id"
  43. v-loading="tableLoading"
  44. :span-method="objectSpanMethod"
  45. >
  46. <el-table-column label="一级指标" prop="itemContent" width="120" show-overflow-tooltip>
  47. <template #default="{ row }">
  48. <span style="float: left" v-html="ShowDae(row.itemLevel == '1' ? row.itemContent : '')"></span>
  49. </template>
  50. </el-table-column>
  51. <el-table-column label="二级指标" prop="itemContent" width="120" show-overflow-tooltip>
  52. <template #default="{ row }">
  53. <span style="float: left" v-html="ShowDae(row.itemLevel == '2' ? row.itemContent : '')"></span>
  54. </template>
  55. </el-table-column>
  56. <el-table-column label="三级指标" prop="itemContent" width="150" show-overflow-tooltip>
  57. <template #default="{ row }">
  58. <span
  59. style="color: #108ee9; float: left"
  60. @click="openDialog(row, row.itemLevel, 'view')"
  61. v-html="ShowDae(row.itemLevel == '3' ? row.itemContent : '')"
  62. ></span>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="目标" prop="itemTarget" width="140px"> </el-table-column>
  66. <el-table-column label="单位" prop="itemUnit" width="120px"> </el-table-column>
  67. <el-table-column label="说明" prop="itemComment" width="110px"> </el-table-column>
  68. <el-table-column label="分值" prop="itemScore" width="90px"> </el-table-column>
  69. <el-table-column label="算法" prop="itemAlgorithm">
  70. <template #default="{ row }">
  71. <span>{{ row.itemAlgorithm === 'auto' ? '自动' : '手动' }}</span>
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="启用时间" prop="enableDatetime" show-overflow-tooltip width="160px" />
  75. <el-table-column label="停用时间" prop="stopDatetime" show-overflow-tooltip width="160px" />
  76. <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
  77. <el-table-column label="修改日期" prop="updateTime" show-overflow-tooltip width="160px" />
  78. <el-table-column label="状态" prop="status" width="90px">
  79. <template #default="{ row }">
  80. <el-switch
  81. v-model="row.status"
  82. active-value="1"
  83. inactive-value="0"
  84. @change="
  85. val => {
  86. statusChange(row, val);
  87. }
  88. "
  89. :disabled="row.statusDisabled || type == 'view'"
  90. />
  91. </template>
  92. </el-table-column>
  93. <el-table-column label="操作" width="280" fixed="right">
  94. <template #default="{ row }">
  95. <el-button
  96. type="primary"
  97. link
  98. v-if="row.itemLevel == '1'"
  99. @click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '二级指标')"
  100. :disabled="type == 'view'"
  101. >新增二级指标</el-button
  102. >
  103. <el-button
  104. type="primary"
  105. link
  106. v-if="row.itemLevel == '2'"
  107. @click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '三级指标')"
  108. :disabled="type == 'view'"
  109. >新增三级指标</el-button
  110. >
  111. <el-button type="primary" link @click="openDialog(row, row.itemLevel, 'view')">查看</el-button>
  112. <el-button type="warning" link @click="openDialog(row, row.itemLevel, 'edit')" :disabled="type == 'view'">修改</el-button>
  113. <el-button type="danger" link @click="delClick(row)" :disabled="type == 'view'">删除</el-button>
  114. </template>
  115. </el-table-column>
  116. </el-table>
  117. </div>
  118. <el-dialog v-model="visible" :close-on-click-modal="false" width="30%" :before-close="close" class="dialog" :title="operateInfo.text">
  119. <el-form
  120. ref="dialogFormRef"
  121. :model="dialogForm"
  122. :rules="dialogFormRules"
  123. :disabled="operateInfo.type == 'view' || type == 'view'"
  124. label-width="auto"
  125. >
  126. <el-row>
  127. <el-col :span="20" :offset="2" v-if="operateInfo.itemLevel == '1'">
  128. <el-form-item label="一级指标:" prop="itemContent">
  129. <el-input v-model="dialogForm.itemContent" placeholder="请输入一级指标" />
  130. </el-form-item>
  131. </el-col>
  132. </el-row>
  133. <el-row :gutter="20" v-if="operateInfo.itemLevel == '2'">
  134. <el-col :span="12">
  135. <el-form-item label="二级指标:" prop="itemContent">
  136. <el-input v-model="dialogForm.itemContent" placeholder="请输入二级指标" />
  137. </el-form-item>
  138. </el-col>
  139. </el-row>
  140. <el-row :gutter="20" v-if="operateInfo.itemLevel == '3'">
  141. <el-col :span="12">
  142. <el-form-item label="三级指标:" prop="itemContent">
  143. <el-input v-model="dialogForm.itemContent" placeholder="请输入三级指标" />
  144. </el-form-item>
  145. </el-col>
  146. <el-col :span="12">
  147. <el-form-item label="分值:" prop="itemScore">
  148. <el-input v-model.number="dialogForm.itemScore" placeholder="请输入分值" />
  149. </el-form-item>
  150. </el-col>
  151. <el-col :span="12">
  152. <el-form-item label="目标:" prop="itemTarget">
  153. <el-input v-model="dialogForm.itemTarget" placeholder="请输入目标" />
  154. </el-form-item>
  155. </el-col>
  156. <el-col :span="12">
  157. <el-form-item label="单位:" prop="itemUnit">
  158. <el-input v-model="dialogForm.itemUnit" placeholder="请输入单位" />
  159. </el-form-item>
  160. </el-col>
  161. <el-col :span="12">
  162. <el-form-item label="说明:" prop="itemComment">
  163. <el-input v-model="dialogForm.itemComment" placeholder="请输入说明" />
  164. </el-form-item>
  165. </el-col>
  166. <el-col :span="12">
  167. <el-form-item label="算法:" prop="itemAlgorithm">
  168. <el-select clearable v-model="dialogForm.itemAlgorithm" placeholder="请选择算法" style="width: 100%" @change="ProjectChange">
  169. <el-option v-for="dict in ProjectListData" :key="dict.value" :label="dict.label" :value="dict.value" />
  170. </el-select>
  171. </el-form-item>
  172. </el-col>
  173. <el-col :span="12">
  174. <el-form-item label="归属部门" prop="deptId">
  175. <el-tree-select
  176. v-model.number="dialogForm.deptId"
  177. :data="deptOptions"
  178. :props="{ value: 'id', label: 'label', children: 'children' }"
  179. value-key="id"
  180. placeholder="请选择归属部门"
  181. check-strictly
  182. />
  183. </el-form-item>
  184. </el-col>
  185. <el-col :span="12">
  186. <el-form-item label="关联菜单:" prop="itemDataType">
  187. <el-select
  188. clearable
  189. v-model="dialogForm.itemDataType"
  190. placeholder="请选关联菜单"
  191. style="width: 100%"
  192. @change="detailDataTypeListChange"
  193. value-key="code"
  194. >
  195. <el-option v-for="i in detailDataTypeList" :key="i.code" :label="i.name" :value="i.code" />
  196. </el-select>
  197. </el-form-item>
  198. </el-col>
  199. <el-col :span="12">
  200. <el-form-item label="关联目标:" prop="itemDataField">
  201. <el-select clearable v-model="dialogForm.itemDataField" placeholder="请选关联目标" style="width: 100%">
  202. <el-option v-for="i in sourceTypeList" :key="i.code" :label="i.name" :value="i.code" />
  203. </el-select>
  204. </el-form-item>
  205. </el-col>
  206. </el-row>
  207. </el-form>
  208. <template #footer v-if="operateInfo.type !== 'view'">
  209. <div class="dialog-footer">
  210. <el-button type="primary" @click="submit(1)">确定</el-button>
  211. <!-- <el-button type="success" @click="submit(2)" v-if="dialogForm.status == '0'">启用</el-button>
  212. <el-button type="danger" @click="submit(3)" v-if="dialogForm.status == '1'">停用</el-button> -->
  213. <el-button @click="close">取消</el-button>
  214. </div>
  215. </template>
  216. </el-dialog>
  217. </div>
  218. </template>
  219. <script setup>
  220. import { ref, nextTick, onMounted, reactive } from 'vue';
  221. import { v4 as uuidv4 } from 'uuid';
  222. import useUserStore from '@/store/modules/user';
  223. import { ElMessage, ElMessageBox } from 'element-plus';
  224. import {
  225. getAssessTargetConfigControllerItem,
  226. assessTargetConfigControllerItemBatchUpdate,
  227. assessTargetConfigOpen,
  228. assessTargetConfigClose,
  229. deleteConfigControllerItem,
  230. detailDataType,
  231. assessTargetConfigEdit,
  232. performanceConfigCopy,
  233. performanceConfigEnable,
  234. performanceConfigEnableAndDisable,
  235. } from '@/api/spongePerformance/management.js';
  236. import { deptTreeSelect } from '@/api/system/user';
  237.  
  238. import useTable from '../mixins';
  239. import upload from '../upload.vue';
  240. const route = useRoute();
  241. const { proxy } = getCurrentInstance();
  242. const { controlId } = route.params;
  243. console.log(controlId, 'controlIdcontrolId');
  244. let { type, status, name, engineeringType, year } = route.query;
  245. const statusText = ref(status == '1' ? '停用' : '启用');
  246. const {
  247. form,
  248. treeData,
  249. visible,
  250. curRow,
  251. operateInfo,
  252. getTreeCurRow,
  253. search,
  254. // resetQuery,
  255. goBack,
  256. // statusChange,
  257. setStatusDisabled,
  258. getSortIsDisabled,
  259. ascHandle,
  260. descHandle,
  261. expand,
  262. } = useTable(proxy, uuidv4);
  263. const submitDate = ref();
  264. const dialogForm = ref({});
  265. const loading = ref(false);
  266. const deptOptions = ref(undefined);
  267. const tableLoading = ref(false);
  268. const ProjectListData = reactive([
  269. { label: '自动', value: 'auto' },
  270. { label: '手填', value: 'manual' },
  271. ]);
  272. const detailDataTypeList = ref([]);
  273. const sourceTypeList = ref([]);
  274. form.configId = controlId;
  275. const dialogFormRules = reactive({
  276. itemContent: [{ required: true, trigger: 'blur', message: '指标不能为空' }],
  277. itemScore: [{ required: true, trigger: 'blur', message: '分值不能为空' }],
  278. itemTarget: [{ required: true, trigger: 'blur', message: '目标不能为空' }],
  279. });
  280. // this.page.searchCode 是指的搜索的关键词
  281. function ShowDae(val) {
  282. if (val.indexOf(form.itemContent) !== -1 && form.itemContent !== '') {
  283. return val.replace(form.itemContent, '<font color="#000" style="background:#ffff00">' + form.itemContent + '</font>');
  284. } else {
  285. return val;
  286. }
  287. }
  288.  
  289. const openDialog = (row, level, type, text = '') => {
  290. if (type != 'add') dialogForm.value = row;
  291. curRow.value = row;
  292. console.log('row', row);
  293. submitDate.value = row;
  294. operateInfo.itemLevel = level;
  295. operateInfo.type = type;
  296. operateInfo.text = (row?.itemContent || '') + text + (type == 'add' ? '新增' : type == 'view' ? '查看' : '编辑');
  297. visible.value = true;
  298. let arr = detailDataTypeList.value.filter(i => {
  299. return i.code == row?.itemDataType;
  300. });
  301. sourceTypeList.value = arr[0]?.childPerformanceConfigDataList;
  302. };
  303. function resetQuery() {
  304. form.itemContent = '';
  305. getTableData(form);
  306. }
  307.  
  308. function getSourceTypeList(x, y) {
  309. let arr = x.filter(i => {
  310. return i.code == y;
  311. });
  312. return arr[0];
  313. }
  314. //确定
  315. const submit = type => {
  316. proxy.$refs.dialogFormRef.validate(async valid => {
  317. if (valid && type == 1) {
  318. const treeDataCurRow = getTreeCurRow(treeData.value, curRow.value);
  319. const row = {
  320. parentId: submitDate.value.id,
  321. configId: controlId,
  322. itemDataType: dialogForm.value.itemDataType?.code,
  323. ...dialogForm.value,
  324. };
  325. if (operateInfo.type == 'add') {
  326. let { data, code } = await assessTargetConfigControllerItemBatchUpdate(row);
  327. getTableData(form);
  328. proxy.$refs.tableRef.toggleRowExpansion(treeDataCurRow, true);
  329. } else if (operateInfo.type == 'edit') {
  330. let { data, code } = await assessTargetConfigEdit(row);
  331. getTableData(form);
  332. }
  333. close();
  334. } else if (valid && type == 2) {
  335. proxy.$modal
  336. .confirm(`是否启用?`)
  337. .then(async () => {
  338. let { data } = await performanceConfigEnable(submitDate.value.id);
  339. getTableData(form);
  340. })
  341. .catch(() => {});
  342. } else {
  343. proxy.$modal
  344. .confirm(`是否停用?`)
  345. .then(async () => {
  346. let { data } = await performanceConfigDisable(submitDate.value.id);
  347. getTableData(form);
  348. })
  349. .catch(() => {});
  350. }
  351. });
  352. };
  353. //删除
  354. const delClick = async ({ id }) => {
  355. proxy.$modal
  356. .confirm(`是否确认删除${id}?`)
  357. .then(async () => {
  358. let { data } = await deleteConfigControllerItem(id);
  359. getTableData(form);
  360. })
  361. .catch(() => {});
  362. };
  363. const getTableData = async p => {
  364. tableLoading.value = true;
  365. const res = await getAssessTargetConfigControllerItem(p);
  366. tableLoading.value = false;
  367. if (res?.code !== 200) return;
  368. treeData.value = res?.data || [];
  369. setFields(treeData.value, '0');
  370. setSort(treeData.value);
  371. setStatusDisabled(treeData.value);
  372. nextTick(() => {
  373. expand();
  374. });
  375. console.log(treeData.value, '111');
  376. };
  377. const setFields = (data, level) => {
  378. for (const item of data) {
  379. item.level = level;
  380. switch (level) {
  381. case '0':
  382. item.sort = item.evaluationTypeRank;
  383. break;
  384. case '1':
  385. item.sort = item.controlItemRank;
  386. break;
  387. case '2':
  388. item.sort = item.evaluationCriterionRank;
  389. break;
  390. default:
  391. break;
  392. }
  393. if (item.children) {
  394. setFields(item.children, level * 1 + 1 + '');
  395. }
  396. }
  397. };
  398. const setSort = data => {
  399. data.sort((a, b) => {
  400. return b.sort - a.sort;
  401. });
  402. for (const item of data) {
  403. if (item.children) {
  404. setSort(item.children);
  405. }
  406. }
  407. };
  408. const setParams = data => {
  409. for (const item of data) {
  410. if (item.level == '0') {
  411. item.evaluationTypeRank = item.sort;
  412. } else if (item.level == '1') {
  413. item.controlItemRank = item.sort;
  414. } else if (item.level == '2') {
  415. item.evaluationCriterionRank = item.sort;
  416. }
  417. if (item.children) {
  418. setParams(item.children);
  419. }
  420. }
  421. };
  422. const statusChange = (v, m) => {
  423. console.log('v', v);
  424. if (v.status == '1') {
  425. statusText.value = '启用';
  426. } else {
  427. statusText.value = '停用';
  428. }
  429. proxy.$modal
  430. .confirm(`是否确认${statusText.value}?`)
  431. .then(async () => {
  432. const { data, code } = await performanceConfigEnableAndDisable(v.id);
  433. getTableData({
  434. configId: controlId,
  435. });
  436. proxy.$modal.msgSuccess('操作成功!');
  437. })
  438. .catch(() => {
  439. getTableData({
  440. configId: controlId,
  441. });
  442. });
  443. };
  444. const detailDataTypeM = async () => {
  445. let { data } = await detailDataType();
  446. detailDataTypeList.value = data;
  447. // detailDataTypeList.value.forEach((i)=>{
  448. // i.label=i.name
  449. // })
  450. // console.log("detailDataTypeList", detailDataTypeList)
  451. };
  452. function detailDataTypeListChange(v) {
  453. let arr = detailDataTypeList.value.filter(i => {
  454. return i.code == v;
  455. });
  456. sourceTypeList.value = arr[0].childPerformanceConfigDataList;
  457. dialogForm.value.itemDataField = '';
  458. }
  459. const close = () => {
  460. visible.value = false;
  461. proxy.$refs.dialogFormRef.resetFields();
  462. getTableData({ configId: controlId });
  463. };
  464. /** 搜索部门下拉树结构 */
  465. function getDeptTree() {
  466. deptTreeSelect().then(response => {
  467. deptOptions.value = response.data;
  468. });
  469. }
  470. //复制
  471. async function copy({ configId, year }) {
  472. let { data, code } = await performanceConfigCopy({ sourceConfigId: configId, targetYear: year });
  473. if (code == 200) getTableData({ configId: controlId });
  474. }
  475. // 表数据合并
  476. const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  477. if (columnIndex === 6) {
  478. if ([2, 3].includes(rowIndex)) {
  479. return {
  480. rowspan: rowIndex === 2 ? 2 : 0,
  481. colspan: 1,
  482. };
  483. } else {
  484. return {
  485. rowspan: 1,
  486. colspan: 1,
  487. };
  488. }
  489. }
  490. };
  491. onMounted(() => {
  492. getTableData({
  493. configId: controlId,
  494. });
  495. getDeptTree();
  496. detailDataTypeM();
  497. });
  498. </script>
  499. <style lang="scss" scoped>
  500. @import './index.scss';
  501. .title {
  502. font-size: 16px;
  503. color: #c6c6c6;
  504. }
  505. </style>