Files
laws-sinotruk-client/src/views/documentTool/customComparison/modules/CustomComparisonDrawer.vue
T
2023-12-05 09:29:35 +08:00

740 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<a-drawer
:title="title"
:width="width"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
:maskClosable="false"
class="custom-drawer-style">
<div class="custom-drawer-style-scroll" :class="{'no-btn-body': isDetail}">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!--清单名称-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.listName')">
<a-input :placeholder="$t('pleaseEnter') + $t('docTool.customComparison.listName')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
:disabled="isDetail"
v-decorator="['listName', validatorRules.listName]" />
</a-form-item>
<!--涉及标准-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.referenceStandard')">
<standard-selection :placeholder="$t('pleaseSelect') + $t('docTool.customComparison.referenceStandard')"
v-decorator="['referenceStandard', validatorRules.referenceStandard]"
:disabled="isDetail"
:custom-click-func="handleSelectStandard"
@change="handleStandardChange" />
</a-form-item>
<!--涉及国家-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.countriesInvolved')">
<a-tree-select
v-decorator="['referenceCountry', validatorRules.referenceCountry]"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:tree-data="countryTreeData"
tree-checkable
treeCheckStrictly
:replace-fields="{key: 'value'}"
:label-in-value="false"
disabled
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.countriesInvolved')" />
</a-form-item>
<!--是否公开-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.whetherToMakePublic')">
<j-dict-select-tag v-decorator="['isShow', validatorRules.isShow]"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.whetherToMakePublic')"
type="radio"
:triggerChange="false"
:disabled="isDetail"
dict-code="yn" />
</a-form-item>
<!--在线对比-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('docTool.customComparison.onlineComparison')">
<a-switch v-model="isStartComparison" @change="handleSwitchChange" :disabled="isDetail"/>
</a-form-item>
<div v-show="isStartComparison" class="comparison-box">
<div class="operation-box" v-if="!isDetail">
<!--标准列表-->
<a-button type="primary" ghost @click="viewStandardList">
{{ $t('docTool.customComparison.standardList') }}
</a-button>
<!--对比维护-->
<a-button type="primary" ghost @click="handleComparisonMaintain">
{{ $t('docTool.customComparison.comparisonMaintain') }}
</a-button>
<!--编辑 preservation 点了编辑之后就变成保存了保存成功之后再变成编辑-->
<a-button type="primary" ghost @click="handleChangeEditState">
{{ isEdit ? $t('docTool.customComparison.exitEdit') : $t('edit') }}
</a-button>
<!--导出-->
<a-button type="primary" ghost @click="handleExportXls">{{ $t('export') }}</a-button>
<!--对比分析结果-->
<a-button type="primary" ghost @click="handleResult">
{{ $t('docTool.customComparison.comparativeAnalysisResult') }}
</a-button>
</div>
<div>
<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.cellTitle }}</template>
<div class="column-text">{{ specialtyItem.cellTitle }}</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:resultCell="text, record">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text }}</template>
<div class="table-text" :style="{background: record.colour}" @click="handleEditResult(text,record)">
{{ text }}
</div>
</a-tooltip>
</template>
</a-table>
</div>
</div>
</a-form>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn" v-if="!isDetail">
<a-button @click="handleSaveForm(true)" type="primary" style="margin-bottom: 0;" :loading="confirmLoading">
{{ $t('preservation') }}
</a-button>
<a-button @click="handleCancel" style="margin-bottom: 0;" :loading="confirmLoading">{{ $t('close') }}</a-button>
</div>
<!--标准列表-->
<standard-list-drawer ref="standardListDrawer" @ok="reloadData" />
<!--对比维护-->
<comparison-maintain-drawer ref="comparisonMaintainDrawer" @ok="reloadTableData" />
<!--单元格数据处理-->
<custom-comparison-cell-drawer ref="cellDrawer" @ok="reloadTableData" />
<!--对比分析结果-->
<comparison-result-modal ref="resultModal" @ok="reloadTableHasResult" />
</a-drawer>
</template>
<script>
import StandardSelection from '../../../../components/selection/StandardSelection'
import { downFile } from '../../../../api/manage'
import StandardListDrawer from './StandardListDrawer'
import ComparisonMaintainDrawer from './ComparisonMaintainDrawer'
import {
deleteMaintainItem,
deleteSpecialtyItem,
getFormDataById,
getTableData,
saveFormData,
saveStandard
} from '../../../../api/documentToolApi'
import CustomComparisonCellDrawer from './CustomComparisonCellDrawer'
import { getFormDictTreeList } from '../../../../api/api'
import { YesOrNoEnum } from '../../../../enums/commonEnums'
import ComparisonResultModal from './ComparisonResultModal'
export default {
name: 'CustomComparisonDrawer',
components: {
StandardSelection,
StandardListDrawer,
ComparisonMaintainDrawer,
CustomComparisonCellDrawer,
ComparisonResultModal
},
data () {
return {
title: '',
confirmLoading: false,
width: 1100,
visible: false,
modal: {},
form: this.$form.createForm(this),
columns: [], // 表头
dataSource: [],
labelCol: {
xs: { span: 24 },
sm: { span: 3 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
// 清单名称
listName: {
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('docTool.customComparison.listName') }],
validateTrigger: 'blur'
},
// 涉及标准
referenceStandard: {
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardSelect.standardNumber') }],
validateTrigger: 'change'
},
// 涉及国家
referenceCountry: {
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('docTool.comparison.textStatus') }],
validateTrigger: 'change'
},
// 拆分结果文件
splitFileId: {
rules: [{ required: true, message: this.$t('uploadFile.pleaseUpload') + this.$t('docTool.split.splitResultFile') }],
validateTrigger: 'change'
}
},
isStartComparison: false, // 是否发起比对,为是的时候显示下面的内容
isEdit: false, // 是否在编辑状态里
isDetail: false, // 是否查看
standardList: [], // 标准的列表
specialtyItemList: [], // 特点的列表(三级表头)
isFirstOpenComparison: true, // 第一次打开在线比对
countryTreeData: [], // 涉及国家数据
maintainItemList: [] // 维护项列表
}
},
methods: {
add () {
this.visible = true
this.isStartComparison = false
this.modal.hiddenTable = false
this.$nextTick(() => {
this.form.setFieldsValue(this.modal)
})
this.initDictConfig()
},
edit (id) {
this.visible = true
this.initDictConfig()
this.modal = { id }
this.isFirstOpenComparison = false
this.getFormData()
this.initTableData()
this.dealIsDetail()
},
dealIsDetail () {
this.isDetail = this.title === this.$t('details')
if (this.isDetail) {
this.isStartComparison = true
this.columns.push({
title: this.$t('docTool.customComparison.comparativeAnalysisResult'),
dataIndex: 'compareResult',
width: 150,
align: 'center',
scopedSlots: { customRender: 'resultCell' }
})
}
},
initDictConfig () {
// 涉及国家
getFormDictTreeList({ dictId: '1706192138039345153' }).then(res => {
if (res.success) {
this.countryTreeData = res.result || []
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.form.resetFields()
this.modal = {}
this.isStartComparison = false
this.isEdit = false
this.standardList = []
this.specialtyItemList = []
this.columns = []
this.dataSource = []
},
/**
* 导出
*/
handleExportXls () {
const fileName = this.$t('docTool.customComparison.listDetails')
const fileSuffix = '.zip'
// 加一个大的提示
const modalLoading = this.$info({
title: '提示',
content: <span>正在导出请稍候 <a-spin size="small" /></span>,
keyboard: false
})
// 把知道了这个按钮去掉
this.$nextTick(() => {
document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
})
downFile('/customCompare/lawsCustomCompareInfo/exportExcel', { infoId: this.modal.id }).then((data) => {
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + fileSuffix)
} else {
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + fileSuffix)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
}).finally(() => {
// 销毁这个提示
modalLoading.destroy()
})
},
/**
* 切换编辑状态
*/
handleChangeEditState () {
this.isEdit = !this.isEdit
},
/**
* 查看标准列表
*/
viewStandardList () {
this.$refs.standardListDrawer.open(this.modal.id)
},
/**
* 重新加载表格数据
*/
reloadTableData () {
this.initTableData()
},
/**
* 重新加载所有数据
*/
reloadData () {
this.getFormData()
},
async reloadTableHasResult () {
await this.initTableData()
this.handleResult()
},
/**
* 对比维护
*/
handleComparisonMaintain () {
if (!this.form.getFieldValue('referenceStandard')) {
this.$message.warning(this.$t('pleaseSelectOneStandard'))
return
}
this.$refs.comparisonMaintainDrawer.open(this.modal.id)
},
/**
* 处理页面需要用到的数据
* @param result
*/
processData (result) {
this.standardList = Object.values(result.countryMap || {}).reduce((acc, cur) => acc.concat(cur), [])
this.specialtyItemList = result.ranksMap.特点 || []
},
/**
* 处理表头和表格数据
* @param result
*/
processTableData (result) {
// 处理表头
this.columns = [
{ title: '', width: 100, dataIndex: 'maintainItem', scopedSlots: { customRender: 'deleteCell' } }
]
const countryList = Object.keys(result.countryMap || {})
const _this = this
// 国家是第一级表头
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.standardNumber,
children: [],
width: this.specialtyItemList.length * 200 || 400
}
// 处理第三级表头
if (this.specialtyItemList && this.specialtyItemList.length > 0) {
this.specialtyItemList.forEach((specialtyItem, specialtyItemIndex) => {
objLevelTwo.children.push({
dataIndex: `${standard.id}-${specialtyItem.id}-label`,
slots: { title: 'specialtyItem' + standardIndex + specialtyItemIndex },
width: 200,
customCell (record) {
return {
on: {
click: () => {
_this.handleEditCell(standard, specialtyItem, record)
}
}
}
}
})
})
}
levelTwo.push(objLevelTwo)
})
obj.children = levelTwo
}
this.columns.push(obj)
})
// 处理表格数据
// 把比对项的数据放在里面,对比项取proertyVal为显示字段,其余属性用数据本身的
this.maintainItemList = result.ranksMap.对比项 || []
const maintainItemList = result.ranksMap.对比项 || []
// 有多少对比项决定了有多少行数据
this.dataSource = maintainItemList.map(maintainData => {
// 第一列数据,用对象留存一下
const maintainObj = {
maintainData, // 维护项的数据
maintainItem: maintainData.cellTitle, // 维护项显示字段
colour: maintainData.colour, // 对比分析结果列的背景颜色
compareResult: maintainData.compareResult // 对比分析结果文本
}
// 按行筛选出符合条件的单元格数据
const listData = result.list.filter(tt => tt.compareItemId === maintainData.id)
const obj = {}
listData.forEach(item => {
obj[`${item.standardId}-${item.featureId}-label`] = item.content
obj[`${item.standardId}-${item.featureId}`] = item
})
return { ...maintainObj, ...obj }
})
this.dealIsDetail()
},
/**
* 删除特点(三级表头)
* @param id
*/
handleDeleteSpecialty ({ id }) {
if (this.specialtyItemList.length <= `1`) {
this.$message.warning(this.$t('docTool.customComparison.reserveAnItem'))
return
}
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) {
if (this.maintainItemList.length <= `1`) {
this.$message.warning(this.$t('docTool.customComparison.reserveAnItem'))
return
}
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 standard 标准信息
* @param specialtyItem 特点信息
* @param record 行数据内容,包含对比项数据
*/
handleEditCell (standard, specialtyItem, record) {
console.log(record)
const params = {
compareItemId: record.maintainData.id,
featureId: specialtyItem.id,
infoId: this.modal.id,
standardId: standard.id,
content: (record[`${standard.id}-${specialtyItem.id}`] || {}).content,
id: (record[`${standard.id}-${specialtyItem.id}`] || {}).id,
fileId: (record[`${standard.id}-${specialtyItem.id}`] || {}).fileId
}
this.$refs.cellDrawer.open(params, this.isEdit)
},
/**
* 比对分析结果,在末尾加一列,如果已经有了,就隐藏这列
*/
handleResult () {
if (this.columns && this.columns.length > 0 && this.columns[this.columns.length - 1].dataIndex === 'compareResult') {
this.columns.splice(this.columns.length - 1, 1)
} else {
this.columns.push({
title: this.$t('docTool.customComparison.comparativeAnalysisResult'),
dataIndex: 'compareResult',
width: 150,
align: 'center',
scopedSlots: { customRender: 'resultCell' }
})
}
},
/**
* 保存表单内容
* 清单名称、涉及国家、是否公开三个字段
*/
handleSaveForm (needClose) {
this.form.validateFields((errors, values) => {
if (!errors) {
this.confirmLoading = true
const formData = Object.assign(this.modal, values)
formData.hiddenTable = this.isStartComparison ? YesOrNoEnum.YES.value : YesOrNoEnum.NO.value
saveFormData(formData).then(res => {
if (res.success) {
this.$message.success(res.message)
this.isFirstOpenComparison = false
this.reloadTableData()
this.$emit('ok')
if (needClose) {
this.close()
}
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
/**
* 切换显隐下方表格,如果是首次显示,需要保存form表单
*/
handleSwitchChange () {
if (this.isStartComparison && this.isFirstOpenComparison) {
this.handleSaveForm(false)
}
},
/**
* 获取上方表单数据,修改了标准的信息也需要调用这个方法
*/
getFormData () {
this.confirmLoading = true
getFormDataById({ id: this.modal.id }).then(async res => {
if (res.success) {
this.modal = Object.assign(this.modal, res.result || {})
// 处理关联国家的回显
if (this.modal.referenceCountry) {
const referenceCountryArr = this.modal.referenceCountry.split(',')
this.modal.referenceCountry = referenceCountryArr.map(tt => {
return {
value: tt
}
})
} else {
this.modal.referenceCountry = undefined
}
this.isStartComparison = this.modal.hiddenTable === YesOrNoEnum.YES.value
this.modal.hiddenTable = this.modal.hiddenTable === YesOrNoEnum.YES.value
this.$nextTick(() => {
this.form.setFieldsValue(this.modal)
})
await this.initTableData()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
handleSelectStandard (callback) {
this.form.validateFields(['listName'], (errors, values) => {
if (!errors) {
callback && callback()
}
})
},
/**
* 修改了标准,调用标准检索保存接口,成功后再次获取表单数据和表格数据
* @param value
*/
handleStandardChange (value) {
this.confirmLoading = true
const params = {
lawsCustomCompareInfo: Object.assign(this.modal, this.form.getFieldsValue())
}
params.lawsCustomCompareInfo.hiddenTable = this.isStartComparison ? YesOrNoEnum.YES.value : YesOrNoEnum.NO.value
params.standardNumber = value
saveStandard(params).then(res => {
if (res.success) {
this.$message.success(res.message)
this.modal.id = res.result
this.getFormData()
this.reloadTableData()
this.$emit('ok')
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
/**
* 获取表格数据
*/
initTableData () {
return new Promise(resolve => {
getTableData({ infoId: this.modal.id }).then(res => {
if (res.success) {
// 平铺一些数据
this.processData(res.result || {})
// 把数据处理成表格需要的样子
this.processTableData(res.result || {})
} else {
this.$message.warning(res.message)
}
}).finally(() => {
resolve()
})
})
},
/**
* 编辑对比分析结果
* @param text
* @param record
*/
handleEditResult (text, record) {
const params = {
id: record.maintainData.id,
colour: record.colour,
compareResult: record.compareResult
}
this.$refs.resultModal.open(params)
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.comparison-box {
margin: 0 36px 0 30px;
}
.operation-box {
margin-bottom: 20px;
.ant-btn {
margin-left: 10px;
}
.ant-btn:first-child {
margin-left: 0;
}
}
/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;
}
}
.submit-btn {
float: right;
margin-top: 4px;
}
.no-btn-body {
height: 100%;
}
</style>