ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 自定义比对-新增-表格

Browse Source
This commit is contained in:
赵霄
2023-10-26 18:03:18 +08:00
parent e034f3f4cc
commit bf7ee2cfe6
5 changed files with 621 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/documentTool/customComparison/modules/CustomComparisonDrawer.vue
+501 -6
View File
@@ -42,7 +42,10 @@
<div v-show="isStartComparison" class="comparison-box">
<div class="operation-box">
<!--标准列表-->
<a-button type="primary" ghost @click="viewStandardList">{{ $t('docTool.customComparison.standardList') }}</a-button>
<a-button type="primary" ghost @click="viewStandardList">{{
$t('docTool.customComparison.standardList')
}}
</a-button>
<!--对比维护-->
<a-button type="primary" ghost @click="handleComparisonMaintain">
{{ $t('docTool.customComparison.comparisonMaintain') }}
@@ -54,11 +57,60 @@
<!--导出-->
<a-button type="primary" ghost @click="handleExportXls">{{ $t('export') }}</a-button>
<!--对比分析结果-->
<a-button type="primary" ghost>{{ $t('docTool.customComparison.comparativeAnalysisResult') }}</a-button>
<a-button type="primary" ghost @click="handleResult">
{{ $t('docTool.customComparison.comparativeAnalysisResult') }}
</a-button>
</div>
<div>
<a-table>
<a-table :columns="columns"
:dataSource="dataSource"
size="middle"
bordered
:pagination="false"
:scroll="{x: '100%'}">
<!--处理表头可删除-->
<template v-for="(standard, standardIndex) in standardList">
<template v-for="(specialtyItem, specialtyItemIndex) in specialtyItemList">
<template :slot="`specialtyItem${standardIndex}${specialtyItemIndex}`">
<div class="column-cell">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ specialtyItem.proertyVal }}</template>
<div class="column-text">{{ specialtyItem.proertyVal }}</div>
</a-tooltip>
<a-icon type="close" v-show="isEdit" @click="handleDeleteSpecialty(specialtyItem)" />
</div>
</template>
</template>
</template>
<!--对比项单元格-->
<template v-slot:deleteCell="text, record">
<div class="delete-cell">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text }}</template>
<div class="delete-cell-text">{{ text }}</div>
</a-tooltip>
<a-icon type="close" v-show="isEdit" @click="handleDeleteMaintainItem(record)" />
</div>
</template>
<!--单元格点击-->
<template v-slot:cell="text, record">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text }}</template>
<div class="table-text" @click="handleEditCell(text,record)">{{ text }}</div>
</a-tooltip>
</template>
<!--比对分析结果-->
<template v-slot:resultCell="text, record">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text }}</template>
<div class="table-text" :style="{background: record.color}" @click="handleEditCell(text,record)">
{{ text }}
</div>
</a-tooltip>
</template>
</a-table>
</div>
</div>
@@ -70,6 +122,8 @@
<standard-list-drawer ref="standardListDrawer" @delete="handleDeleteStandard" />
<!--对比维护-->
<comparison-maintain-drawer ref="comparisonMaintainDrawer" @ok="reloadTableData" />
<!--单元格数据处理-->
<custom-comparison-cell-drawer ref="cellDrawer" @ok="reloadTableData" />
</a-drawer>
</template>
@@ -78,18 +132,265 @@ import StandardSelection from '../../../../components/selection/StandardSelectio
import { downFile } from '../../../../api/manage'
import StandardListDrawer from './StandardListDrawer'
import ComparisonMaintainDrawer from './ComparisonMaintainDrawer'
import { deleteSpecialtyItem, deleteMaintainItem } from '../../../../api/documentToolApi'
import CustomComparisonCellDrawer from './CustomComparisonCellDrawer'
const ApiData = {
'countryMap': {
'': [
{
'id': 'QTGBP59D7AKHDLD2T4R6',
'country': null,
'standNum': 'GB 11212-121212',
'standName': '1111',
'standId': '63e289e4dda24f90a51e',
'standType': 'INLAND',
'compareBaseId': 'GGCD9DAEY3M7LMRPQ96C',
'createTime': 1698136081000,
'countries': null,
'standState': null,
'standStateShow': null
},
{
'id': 'UWARF4EQJLVNQ9A5J29H',
'country': null,
'standNum': 'GB 9999-2023',
'standName': '商-测试标准',
'standId': 'c427b19d88374476b71e',
'standType': 'INLAND',
'compareBaseId': 'GGCD9DAEY3M7LMRPQ96C',
'createTime': 1698136081000,
'countries': null,
'standState': null,
'standStateShow': null
}
],
'欧盟': [
{
'id': 'XL438X5H5LRUMBE49FF5',
'country': 'EU_C',
'standNum': 'GB 7258-20XX',
'standName': '机动车运行安全条件',
'standId': '738414b579b84093b151',
'standType': 'INLAND',
'compareBaseId': 'GGCD9DAEY3M7LMRPQ96C',
'createTime': 1698284537000,
'countries': null,
'standState': null,
'standStateShow': null
}
],
'中国,欧盟,非洲': [
{
'id': 'VHBUCSFG3BW6RMNUGRA5',
'country': 'EU_C,S9BPTW2EPF,CN',
'standNum': 'GB 15089-2001',
'standName': '机动车辆及其挂车分类',
'standId': '14516a9061b745fbad71',
'standType': 'INLAND',
'compareBaseId': 'GGCD9DAEY3M7LMRPQ96C',
'createTime': 1698285956000,
'countries': null,
'standState': null,
'standStateShow': null
}
]
},
'ranksMap': {
'ITEM': [
{
'id': 'a4363725b24d46e2b985',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '适用范围',
'validFlag': '0',
'creationTime': '2023-10-24',
'modifyTime': '2023-10-26',
'proertyType': 'ITEM',
'natureList': null,
'compareItemList': null,
'color': 'red',
'result': 'sdfd ',
'orderNum': null,
'underOrderNum': null
},
{
'id': '2eb67bc13f294f649e04',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '定义',
'validFlag': '0',
'creationTime': '2023-10-24',
'modifyTime': '2023-10-26',
'proertyType': 'ITEM',
'natureList': null,
'compareItemList': null,
'color': '',
'result': null,
'orderNum': null,
'underOrderNum': null
},
{
'id': '8e29f388af374eaeb607',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '东方红发过火',
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'proertyType': 'ITEM',
'natureList': null,
'compareItemList': null,
'color': '',
'result': null,
'orderNum': null,
'underOrderNum': null
}
],
'NATURE': [
{
'id': 'c918fe1cc95c4d4c9776',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '章节',
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'proertyType': 'NATURE',
'natureList': null,
'compareItemList': null,
'color': '',
'result': null,
'orderNum': null,
'underOrderNum': null
},
{
'id': '58d6c194ecc44c66b0a6',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '法规内容',
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'proertyType': 'NATURE',
'natureList': null,
'compareItemList': null,
'color': '',
'result': null,
'orderNum': null,
'underOrderNum': null
},
{
'id': 'd89f153e6a3e4950b46c',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'proertyVal': '但是丰东股份冻干粉大概',
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'proertyType': 'NATURE',
'natureList': null,
'compareItemList': null,
'color': '',
'result': null,
'orderNum': null,
'underOrderNum': null
}
]
},
'list': [
{
'validFlag': '0',
'creationTime': '2023-10-25',
'modifyTime': '2023-10-25',
'formFile': null,
'id': '3S49DS2MCRW2LLR85ANF',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'sarId': '63e289e4dda24f90a51e',
'natureId': '6fd7471e1f364299b8fc',
'itemId': '2eb67bc13f294f649e04',
'formContent': 'uj',
'sarNumber': 'GB 11212-121212',
'sarRegion': '',
'compareName': null,
'natureName': null,
'formFileList': []
},
{
'validFlag': '0',
'creationTime': '2023-10-24',
'modifyTime': '2023-10-24',
'formFile': null,
'id': '5QZFJA8RJQ67MTXRLGN2',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'sarId': '63e289e4dda24f90a51e',
'natureId': '6fd7471e1f364299b8fc',
'itemId': 'a4363725b24d46e2b985',
'formContent': 'xx',
'sarNumber': 'GB 11212-121212',
'sarRegion': '',
'compareName': null,
'natureName': null,
'formFileList': []
},
{
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'formFile': ',ATT_FILE_10_UJZTNK3EV4YCCFHY3BC8',
'id': 'B2M2LAASEGPP5QRX6PLF',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'sarId': '63e289e4dda24f90a51e',
'natureId': 'f1e39a369b5748e8bd76',
'itemId': 'a4363725b24d46e2b985',
'formContent': null,
'sarNumber': 'GB 11212-121212',
'sarRegion': '',
'compareName': null,
'natureName': null,
'formFileList': [
{
'id': 'ATT_FILE_10_UJZTNK3EV4YCCFHY3BC8',
'fileName': 'UJZTNK3EV4YCCFHY3BC8.png',
'oldFileName': '42391722989afbf0579b0876cad9707.png',
'fileSuffix': 'png',
'filePath': '/69/27/34/',
'validFlag': 0,
'creationTime': 1698284432000,
'modifyTime': 1698284432000,
'tableName': 'ATT_FILE_10',
'resId': null,
'downLoadUrl': null
}
]
},
{
'validFlag': '0',
'creationTime': '2023-10-26',
'modifyTime': '2023-10-26',
'formFile': null,
'id': 'KKESX8FVKZXLRU74YRFG',
'compareId': 'GGCD9DAEY3M7LMRPQ96C',
'sarId': '63e289e4dda24f90a51e',
'natureId': 'c918fe1cc95c4d4c9776',
'itemId': 'a4363725b24d46e2b985',
'formContent': '电饭锅地方会更好v才不会v才能帮你',
'sarNumber': 'GB 11212-121212',
'sarRegion': '',
'compareName': null,
'natureName': null,
'formFileList': []
}
]
}
export default {
name: 'CustomComparisonDrawer',
components: { StandardSelection, StandardListDrawer, ComparisonMaintainDrawer },
components: { StandardSelection, StandardListDrawer, ComparisonMaintainDrawer, CustomComparisonCellDrawer },
data () {
return {
title: '',
confirmLoading: false,
width: 900,
width: 1100,
visible: false,
modal: {},
form: this.$form.createForm(this),
columns: [], // 表头
dataSource: [],
labelCol: {
xs: { span: 24 },
sm: { span: 3 }
@@ -121,12 +422,16 @@ export default {
}
},
isStartComparison: true, // 是否发起比对，为是的时候显示下面的内容
isEdit: false // 是否在编辑状态里
isEdit: true, // 是否在编辑状态里
standardList: [], // 标准的列表
specialtyItemList: [] // 特点的列表（三级表头）
}
},
methods: {
add () {
this.visible = true
this.processData(ApiData)
this.processTableData(ApiData)
},
edit (record) {
this.modal = Object.assign({}, record)
@@ -210,6 +515,142 @@ export default {
*/
handleComparisonMaintain () {
this.$refs.comparisonMaintainDrawer.open()
},
/**
* 处理页面需要用到的数据
* @param result
*/
processData (result) {
this.standardList = Object.values(result.countryMap).reduce((acc, cur) => acc.concat(cur), [])
this.specialtyItemList = result.ranksMap.NATURE || []
},
/**
* 处理表头和表格数据
* @param result
*/
processTableData (result) {
// 处理表头
this.columns = [
{ title: '', width: 100, dataIndex: 'maintainItem', scopedSlots: { customRender: 'deleteCell' } }
]
const countryList = Object.keys(result.countryMap)
// 国家是第一级表头
countryList.forEach(country => {
const countryStandardList = result.countryMap[country]
const obj = { title: country }
// 处理第二级表头
if (countryStandardList && countryStandardList.length > 0) {
const levelTwo = []
countryStandardList.forEach((standard, standardIndex) => {
const objLevelTwo = {
title: standard.standNum,
children: [],
width: this.specialtyItemList.length * 200 || 400
}
// 处理第三级表头
if (this.specialtyItemList && this.specialtyItemList.length > 0) {
this.specialtyItemList.forEach((specialtyItem, specialtyItemIndex) => {
objLevelTwo.children.push({
dataIndex: `${standard.standNum}-${specialtyItem.id}-label`,
slots: { title: 'specialtyItem' + standardIndex + specialtyItemIndex },
width: 200,
scopedSlots: { customRender: 'cell' }
})
})
}
levelTwo.push(objLevelTwo)
})
obj.children = levelTwo
}
this.columns.push(obj)
})
// 处理表格数据
// 把比对项的数据放在里面，对比项取proertyVal为显示字段，其余属性用数据本身的
const maintainItemList = result.ranksMap.ITEM || []
// 有多少对比项决定了有多少行数据
this.dataSource = maintainItemList.map(maintainData => {
// 第一列数据，用对象留存一下
const maintainObj = {
maintainData, // 维护项的数据
maintainItem: maintainData.proertyVal, // 维护项显示字段
color: maintainData.color, // 对比分析结果列的背景颜色
result: maintainData.result // 对比分析结果文本
}
// 按行筛选出符合条件的单元格数据
const listData = result.list.filter(tt => tt.itemId === maintainData.id)
const obj = {}
listData.forEach(item => {
obj[`${item.sarNumber}-${item.natureId}-label`] = item.formContent
obj[`${item.sarNumber}-${item.natureId}`] = item
})
const line = { ...maintainObj, ...obj }
return line
})
},
/**
* 删除特点（三级表头）
* @param id
*/
handleDeleteSpecialty ({ id }) {
this.confirmLoading = true
deleteSpecialtyItem({ id }).then(res => {
if (res.success) {
this.$message.success(res.message)
this.reloadTableData()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
/**
* 删除对比项
* @param record
*/
handleDeleteMaintainItem (record) {
this.confirmLoading = true
const parmas = { id: record.maintainData.id }
deleteMaintainItem(parmas).then(res => {
if (res.success) {
this.$message.success(res.message)
this.reloadTableData()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
/**
* 点击编辑单元格数据
* @param record
*/
handleEditCell (text, record) {
const columnDataIndex = Object.keys(record).find(key => record[key] === text)
let cellData = {}
if (columnDataIndex) {
cellData = record[columnDataIndex.replace('-label', '')]
}
this.$refs.cellDrawer.open(cellData)
},
/**
* 比对分析结果，在末尾加一列，如果已经有了，就隐藏这列
*/
handleResult () {
if (this.columns[this.columns.length - 1].dataIndex === 'color') {
this.columns.splice(this.columns.length - 1, 1)
} else {
this.columns.push({
title: this.$t('docTool.customComparison.comparativeAnalysisResult'),
dataIndex: 'result',
width: 150,
align: 'center',
scopedSlots: { customRender: 'resultCell' }
})
}
}
}
}
@@ -237,4 +678,58 @@ export default {
.custom-drawer-style-scroll {
height: 100%;
}
/deep/ .ant-table-thead > tr > th {
word-break: break-word;
}
/deep/ .ant-table-tbody > tr > td {
padding: 0 !important;
}
.table-text {
height: 45px;
padding: 12px 8px;
}
/deep/ .ant-table-thead > tr > th .ant-table-header-column {
width: 100%;
}
.column-cell {
display: flex;
align-items: center;
.anticon {
margin-left: 8px;
cursor: pointer;
color: @primary-color;
}
}
.column-text {
flex: 1;
width: 0;
}
.delete-cell {
width: 100%;
display: flex;
align-items: center;
padding: 12px 8px;
&-text {
flex: 1;
width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.anticon {
margin-left: 8px;
cursor: pointer;
color: @primary-color;
}
}
</style>