主页面
<template><div class="result-wrapper"><dynamic-table :table-data="tableData" :table-header="tableConfig" :tableTitle="tableTitle" :flowParams="flowParams"></dynamic-table></div> </template><script> import DynamicTable from './components/DynamicTable' import dataInfo from "./data.json"; export default {props: {},components: {DynamicTable},data() {return {tableTitle: '邮政企业三级领导人员2024年7月绩效考核指标得分数据库',tableData: [],tableConfig: []}},computed: {},async created() {},methods: {openFlowPage() {let respData = dataInfo.data;if (respData.evalPerformanceRecordDetailList && respData.evalPerformanceRecordDetailList.length) {let list = JSON.parse(JSON.stringify(respData.evalPerformanceRecordDetailList)) // 表格业务数据let tableData = JSON.parse(JSON.stringify(respData.evalPerformanceRecordDetailList)) // 表格业务数据this.tableData = listthis.tableConfigDeal(list[0].evalFormIndicatorBlocks)this.gettableData(tableData);console.log(this.tableConfig, 'tableConfig')console.log(this.tableData, 'tableData')}},tableDataFormat () {const data = JSON.parse(JSON.stringify([...this.tableData]));data.forEach((item) => {const newArray = [];for (const key in item.value) {// console.log(item.value, 'item.value');// console.log(key, 'key');if (item.value[key]) {delete item.value[key].childrennewArray.push(item.value[key])}}item.newArray = newArraydelete item.value})return data},getForData(array, count) {if (count) {count++} else {count = 1}array.forEach((item) => {item.floor = count;if (item.children && item.children.length) {this.getForData(item.children, count)} else {item.children = [{label: '标杆值',prop: 'benchmarkVal', valueData: item.id,formIndicatorBlockId: item.formIndicatorBlockId},{label: '完成值',prop: 'completionVal',valueData: item.id,formIndicatorBlockId: item.formIndicatorBlockId},{label: '建议得分',prop: 'scoreVal',valueData: item.id,formIndicatorBlockId: item.formIndicatorBlockId,}]}if (item.floor === 2 && item && !this.hasLabelData(item.children, '建议得分合计')) { item.children.push({label: '建议得分合计',prop: 'suggestScoreTotal',valueData: item.id,type: true,formIndicatorBlockId: item.formIndicatorBlockId})if (item.isShowLeaderMarkScore) {item.children.push( { label: '领导评分',prop: 'leaderScore',valueData: item.id,type: false,formIndicatorBlockId: item.formIndicatorBlockId})}}})},getTablejson(array, json, personObj, count) {if (count) {count++} else {count = 1}array.forEach((obj) => {if (obj.hasOwnProperty('suggestScoreTotal')) {json[obj.id] = {...obj,};} obj.floor = count;if (obj.children && obj.children.length) {this.getTablejson(obj.children, json, obj, count)} else {json[obj.id] = {...obj,originDataNoChild: true};}});},gettableData(array) {const tableData = [];array.forEach((item) => {const json = {value: {}};json.id = item.empNumber;json.company = item.company;if (item.evalFormIndicatorBlocks && item.evalFormIndicatorBlocks.length) {item.evalFormIndicatorBlocks.forEach((list) => {this.getTablejson(list.children, json.value, list, 0);})}tableData.push(json);});this.tableData = tableData;},tableConfigDeal(array) {// console.log(array, 'array');this.getForData(array, 0);let tableConfig = [{id: 10,label: '单位',prop: 'company'}]this.tableConfig = tableConfig.concat(array);},hasLabelData (children, key) {let flag = falsefor(let i = 0; i < children.length; i++) {if (children[i].label === key) {flag = truebreak}}return flag}} } </script> <style scoped lang="scss"> ::v-deep .el-table--border th, ::v-deep .el-table__fixed-right-patch {border-bottom: 1px solid #666666; } ::v-deep .el-table--border td, .el-table--border th, ::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {border-right: 1px solid #666666; } ::v-deep .el-table--border, ::v-deep .el-table--group {border: 1px solid #666666; } ::v-deep .el-table--border td, ::v-deep .el-table--border th, ::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {border-right: 1px solid #666666; } ::v-deep .el-table td, ::v-deep .el-table th.is-leaf {border-bottom: 1px solid #666666; } </style>
页面表格表头和表内容数据
{"code": "0","msg": "成功","data": [{"id": "8837445335765553152","empNumber": "LXZT00002","company": "石家庄","evalFormIndicatorBlocks": [{"id": "8837445339947274240","performanceRecordId": "8837445334637285376","sectionType": "quality","children": [{"id": "8837445434885345280","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445339947274240","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "80","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00008","itemLevel": "/战略绩效得分","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": true,"label": "战略绩效得分"}],"score": "80","label": "战略绩效指标"},{"id": "8837445391839203328","performanceRecordId": "8837445334637285376","sectionType": "quantity","children": [{"id": "8837445436214939648","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "6","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革","children": [{"id": "8837445437431287808","parentId": "8837445436214939648","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革/组织管理架构和质量指标体系建设情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "组织管理架构和质量指标体系建设情况"},{"id": "8837445440002396160","parentId": "8837445436214939648","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革/处理中心人均处理效率","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "处理中心人均处理效率"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": false,"label": "“两集中”改革"},{"id": "8837445442326040576","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "7","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴","children": [{"id": "8837445443424948224","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/协同与服务乡村振兴/服务乡村振兴重点指标完成情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "服务乡村振兴重点指标完成情况"},{"id": "8837445445991862272","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴/协同项目重点目标完成情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "协同项目重点目标完成情况"},{"id": "8837445448374226944","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴/营销体系建设落实情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "营销体系建设落实情况"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": true,"isCanLeaderMarkScore": true,"isCanScore": false,"label": "协同与服务乡村振兴"},{"id": "8837445451129884672","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "7","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000016","itemLevel": "/三级物流体系、“网点+站点”","children": [{"id": "8837445452400758784","parentId": "8837445451129884672","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "5","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000015","itemLevel": "/三级物流体系、“网点+站点”/三级物流体系","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "三级物流体系"},{"id": "8837445454976061440","parentId": "8837445451129884672","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000016","itemLevel": "/三级物流体系、“网点+站点”/“网点+站点”","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "“网点+站点”"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": true,"isCanLeaderMarkScore": null,"isCanScore": false,"label": "三级物流体系、“网点+站点”"}],"score": "20","label": "重点任务指标"}]},{"id": "8837445336914792448","empNumber": "LXZT00001","company": "唐山","evalFormIndicatorBlocks": [{"id": "8837445339947274240","performanceRecordId": "8837445334637285376","sectionType": "quality","children": [{"id": "8837445434885345280","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445339947274240","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "80","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00008","itemLevel": "/战略绩效得分","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "战略绩效得分"}],"score": "80","label": "战略绩效指标"},{"id": "8837445391839203328","performanceRecordId": "8837445334637285376","sectionType": "quantity","children": [{"id": "8837445436214939648","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "6","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革","children": [{"id": "8837445437431287808","parentId": "8837445436214939648","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革/组织管理架构和质量指标体系建设情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "组织管理架构和质量指标体系建设情况"},{"id": "8837445440002396160","parentId": "8837445436214939648","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/“两集中”改革/处理中心人均处理效率","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "处理中心人均处理效率"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": false,"label": "“两集中”改革"},{"id": "8837445442326040576","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "7","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴","children": [{"id": "8837445443424948224","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "3","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00006","itemLevel": "/协同与服务乡村振兴/服务乡村振兴重点指标完成情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "服务乡村振兴重点指标完成情况"},{"id": "8837445445991862272","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴/协同项目重点目标完成情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "协同项目重点目标完成情况"},{"id": "8837445448374226944","parentId": "8837445442326040576","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT00007","itemLevel": "/协同与服务乡村振兴/营销体系建设落实情况","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "营销体系建设落实情况"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": false,"label": "协同与服务乡村振兴"},{"id": "8837445451129884672","parentId": null,"performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "7","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000016","itemLevel": "/三级物流体系、“网点+站点”","children": [{"id": "8837445452400758784","parentId": "8837445451129884672","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "5","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000015","itemLevel": "/三级物流体系、“网点+站点”/三级物流体系","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "三级物流体系"},{"id": "8837445454976061440","parentId": "8837445451129884672","performanceRecordId": "8837445334637285376","formIndicatorBlockId": "8837445391839203328","scoreVal": null,"empNumber": "LXZT00001","company": "唐山","benchmarkVal": null,"completionVal": null,"score": "2","suggestScoreTotal": null,"leaderScore": null,"informantNumber": "LXZT000016","itemLevel": "/三级物流体系、“网点+站点”/“网点+站点”","children": null,"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": null,"label": "“网点+站点”"}],"leaderMarkScoreList": null,"isShowLeaderMarkScore": null,"isCanLeaderMarkScore": null,"isCanScore": false,"label": "三级物流体系、“网点+站点”"}],"score": "20","label": "重点任务指标"}]}] }
DynamicTable.vue
n<template><div><el-table :data="tableData" border :height="height"><template v-for="(item) in tableHeader"><table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" :flowParams="flowParams"></table-column><el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column></template></el-table></div></template><script>import TableColumn from './TableColumn'export default {props: {tableTitle: {type: String,require: true},// 表格的数据tableData: {type: Array,required: true},// 多级表头的数据tableHeader: {type: Array,required: true},// 表格的高度height: {type: String,// default: '300'},// 流程数据flowParams: {type: Object,default: ()=>{ return {} } }},data () {return {}},watch: {},components: {TableColumn},methods: {}}</script><style scoped></style>
TableColumn.vue
<template><el-table-column :label="`${coloumnHeader.label}(${coloumnHeader.score}分)`" :prop="coloumnHeader.label" align="center"><template v-for="item in coloumnHeader.children"><tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" :flowParams="flowParams"></tableColumn><el-table-column v-else :key="item.label" :label="item.label" :prop="item.prop" align="center"><template slot-scope="{row}"><template v-if="item.type">{{getScope1(item, row)}}</template><template v-else><!-- isCanLeaderMarkScore为true领导可编辑 isCanScore 固定三项可编辑 已办不可编辑 --><el-input v-model="row.value[item.valueData][item.prop]" @input="handleIpt(row.value, item)" :title="row.value[item.valueData][item.prop]" :disabled="(flowParams && flowParams.isView === 'true') || (item.prop === 'leaderScore' ? !row.value[item.valueData].isCanLeaderMarkScore : !row.value[item.valueData].isCanScore)"></el-input></template></template> </el-table-column></template></el-table-column></template>;<script>export default {name: 'tableColumn',props: {coloumnHeader: {type: Object,required: true},// 流程数据flowParams: {type: Object,default: ()=>{ return {} } }},methods: {handleIpt(value, item) {console.log('进来了。。。')if (item.prop === 'scoreVal' && value[item.valueData].score && value[item.valueData][item.prop]) {value[item.valueData][item.prop] = this.isNumber(value[item.valueData][item.prop])if (Number(value[item.valueData][item.prop]) > Number(value[item.valueData].score)) {this.$message({ type: "onfo", message: `建议得分不能超出设定的分值(${Number(value[item.valueData].score)}分) `});value[item.valueData][item.prop] = ''}}},isNumber(num, decimalPlace) {num = num.replace(/[^\d\.]+/g, "");var len1 = num.substr(0, 1);var len2 = num.substr(1, 1);//如果第一位是0,第二位不是点,就用数字把点替换掉if (num.length > 1 && len1 == 0 && len2 != ".") {num = num.substr(1, 1);}//第一位不能是.if (len1 == ".") {num = "";}//限制只能输入一个小数点if (num.indexOf(".") != -1) {var str_ = num.substr(num.indexOf(".") + 1);if (str_.indexOf(".") != -1) {num = num.substr(0, num.indexOf(".") + str_.indexOf(".") + 1);}}//动态位数num = num.replace(/\.\d{2,}$/,num.substr(num.indexOf("."), decimalPlace + 1));return num;},getScope1(item, row) {let total = 0;if (row.value[item.valueData].children && row.value[item.valueData].children) {row.value[item.valueData].children.forEach((item) => {total = total + Number(row.value[item.id].scoreVal || 0)});} else {total = Number(row.value[item.valueData].scoreVal || 0);}console.log(total, 0)row.value[item.valueData][item.prop] = total.toFixed(2);return total.toFixed(2);}}}</script><style scoped></style>
效果图