add 自定义比对(未完成)

This commit is contained in:
赵霄
2023-10-25 17:59:31 +08:00
parent 8bd2beb10e
commit 0c53ec6bed
4 changed files with 832 additions and 0 deletions
@@ -0,0 +1,186 @@
<template>
<a-card :bordered="false">
<!--查询-->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<!--清单名称-->
<a-col :md="6" :sm="8">
<a-form-item :label="$t('docTool.customComparison.listName')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
<a-input :placeholder="$t('pleaseEnter') + $t('docTool.customComparison.listName')"
v-model="queryParam.serialNumber"></a-input>
</a-form-item>
</a-col>
<!--标准编号-->
<a-col :md="6" :sm="8">
<a-form-item :label="$t('standardNumber')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
<a-input :placeholder="$t('pleaseEnter') + $t('standardNumber')"
v-model="queryParam.title"></a-input>
</a-form-item>
</a-col>
<!--涉及国家-->
<a-col :md="6" :sm="8">
<a-form-item :label="$t('docTool.customComparison.countriesInvolved')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
<a-tree-select v-model="queryParam.releaseState"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:tree-data="countriesInvolvedOptions"
:label-in-value="false"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.countriesInvolved')" />
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<!--操作人-->
<a-col :md="6" :sm="8">
<a-form-item :label="$t('docTool.customComparison.operator')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
<a-input :placeholder="$t('pleaseEnter') + $t('docTool.customComparison.operator')" v-model="queryParam.title" />
</a-form-item>
</a-col>
<!--是否公开-->
<a-col :md="6" :sm="8">
<a-form-item :label="$t('docTool.customComparison.whetherToMakePublic')" :labelCol="{span: 6}" :wrapperCol="{span: 14}">
<j-dict-select-tag v-model="queryParam.releaseState"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.whetherToMakePublic')"
type="select"
:triggerChange="false"
dict-code="yn" />
</a-form-item>
</a-col>
</template>
<div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
<a @click="handleToggleSearch">
{{ toggleSearchStatus ? $t('putAway') : $t('open') }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
</a>
<a-button type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
<a-button style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
</div>
</a-row>
</a-form>
</div>
<!--操作按钮-->
<div class="table-operator">
<!--新增-->
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
</div>
<div>
<j-table
ref="table"
size="middle"
:columns="columns"
:data-source="dataSource"
rowKey="id"
:can-drag="true"
:loading="loading"
:pagination="ipagination"
:scroll="{x: '100%'}"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:operation-list="operationList"
@change="handleTableChange"
@operationClick="operationClick">
</j-table>
</div>
<custom-comparison-drawer ref="modalForm" @ok="modalFormOk"/>
</a-card>
</template>
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { getFormDictTreeList } from '@api/api'
import CustomComparisonDrawer from './modules/CustomComparisonDrawer'
import JTable from '../../../components/jero/JTable'
export default {
name: 'CustomComparisonList',
components: { JTable, CustomComparisonDrawer },
mixins: [JeroListMixin],
data () {
return {
countriesInvolvedOptions: [], // 涉及国家树形下拉数据
columns: [
// 清单名称
{
title: this.$t('docTool.customComparison.listName'),
width: 200,
dataIndex: 'fileTypeLeft_dictText'
},
// 涉及标准
{
title: this.$t('docTool.customComparison.referenceStandard'),
width: 200,
dataIndex: 'fileTypeLeft_dictText'
},
// 涉及国家
{
title: this.$t('docTool.customComparison.countriesInvolved'),
width: 150,
dataIndex: 'fileTypeLeft_dictText'
},
// 是否公开
{
title: this.$t('docTool.customComparison.whetherToMakePublic'),
width: 100,
dataIndex: 'fileTypeLeft_dictText'
},
// 比对时间
{
title: this.$t('docTool.customComparison.comparisonTime'),
width: 150,
dataIndex: 'fileTypeLeft_dictText'
},
// 操作人
{
title: this.$t('docTool.customComparison.operator'),
width: 150,
dataIndex: 'fileTypeLeft_dictText'
},
// 操作
{
title: this.$t('operation'),
fixed: 'right',
width: 150,
scopedSlots: { customRender: 'action' }
}
],
operationList: [
{ // 查看
text: this.$t('view'),
clickEvent: 'handleDetail'
// has: 'enterpriseStandardLibrary:plan:detail'
},
// 编辑
{
text: this.$t('edit'),
clickEvent: 'edit'
// has: 'documentComparison:edit'
},
{ // 删除
text: this.$t('delete'),
clickEvent: 'handleDelete'
// has: 'enterpriseStandardLibrary:plan:delete'
}
],
url: {
list: ''
},
dataSource: [{ id: '1' }]
}
},
methods: {
initDictConfig () {
// 涉及国家
getFormDictTreeList({ dictId: '1706192138039345153' }).then(res => {
if (res.success) {
this.countriesInvolvedOptions = res.result || []
}
})
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
@@ -0,0 +1,201 @@
<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">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!--特点-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.specialty')">
<div v-for="(item, index) in specialtyList" :key="index" class="form-wrapper">
<a-input v-decorator="[`specialtyList[${index}].proertyVal`]"
@change="e => {e.target.value = (e.target.value + '').trim()}" />
<a-button @click="addSpecialty(index)">{{ $t('newlyAdded') }}</a-button>
<a-button @click="deleteSpecialty(index)" :disabled="specialtyList.length === 1 && index === 0">
{{ $t('delete') }}
</a-button>
</div>
</a-form-item>
<a-divider dashed />
<!--比对项-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.comparisonItem')">
<div v-for="(item, index) in comparisonItemList" :key="index" class="form-wrapper">
<a-input v-decorator="[`comparisonItemList[${index}].proertyVal`]"
@change="e => {e.target.value = (e.target.value + '').trim()}" />
<a-button @click="addComparisonItem(index)">{{ $t('newlyAdded') }}</a-button>
<a-button @click="deleteComparisonItem(index)" :disabled="comparisonItemList.length === 1 && index === 0">
{{ $t('delete') }}
</a-button>
</div>
</a-form-item>
</a-form>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn">
<a-button @click="handleOk" 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>
</a-drawer>
</template>
<script>
export default {
name: 'ComparisonMaintainDrawer',
data () {
return {
title: this.$t('docTool.customComparison.comparisonMaintain'),
confirmLoading: false,
width: 900,
visible: false,
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 2 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 22 }
},
specialtyList: [], // 特点
comparisonItemList: [] // 比对项
}
},
methods: {
open () {
this.visible = true
this.initList()
},
initList () {
// 如果没有数据,就默认给俩
if (this.specialtyList.length === 0) {
this.specialtyList = [
{
proertyVal: '章节'
},
{
proertyVal: '法规内容'
}
]
}
if (this.comparisonItemList.length === 0) {
this.comparisonItemList = [
{
proertyVal: '适用范围'
},
{
proertyVal: '定义'
}
]
}
this.$nextTick(() => {
this.form.setFieldsValue({
specialtyList: this.specialtyList,
comparisonItemList: this.comparisonItemList
})
})
},
handleCancel () {
this.close()
},
close() {
this.visible = false
this.form.resetFields()
},
handleOk () {
this.form.validateFields((errors, values) => {
if (!errors) {
console.log(values)
}
})
},
/**
* 新增特点
*/
addSpecialty (index) {
this.specialtyList.splice(index + 1, 0, {
proertyVal: null
})
const formData = this.form.getFieldValue('specialtyList')
formData.splice(index + 1, 0, {
proertyVal: null
})
this.$nextTick(() => {
this.form.setFieldsValue({ specialtyList: formData })
})
},
/**
* 删除特点
*/
deleteSpecialty (index) {
this.specialtyList.splice(index, 1)
const formData = this.form.getFieldValue('specialtyList')
formData.splice(index, 1)
this.$nextTick(() => {
this.form.setFieldsValue({ specialtyList: formData })
})
},
/**
* 新增比对项
*/
addComparisonItem (index) {
this.comparisonItemList.splice(index + 1, 0, {
proertyVal: null
})
const formData = this.form.getFieldValue('comparisonItemList')
formData.splice(index + 1, 0, {
proertyVal: null
})
this.$nextTick(() => {
this.form.setFieldsValue({ comparisonItemList: formData })
})
},
/**
* 删除比对项
*/
deleteComparisonItem (index) {
this.comparisonItemList.splice(index, 1)
const formData = this.form.getFieldValue('comparisonItemList')
formData.splice(index, 1)
this.$nextTick(() => {
this.form.setFieldsValue({ comparisonItemList: formData })
})
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.ant-form-item {
margin-bottom: 0;
}
.form-wrapper {
display: flex;
margin: 3px 0 20px;
}
.form-wrapper > .ant-input {
flex: 1;
width: 0;
}
.form-wrapper > .ant-btn {
margin-left: 15px;
}
.ant-form-item-children > .form-wrapper:last-child {
margin-bottom: 3px;
}
</style>
@@ -0,0 +1,240 @@
<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">
<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"
v-decorator="['title', validatorRules.title]" />
</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="['serialNumber', validatorRules.serialNumber]" />
</a-form-item>
<!--涉及国家-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$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="['serialNumber', validatorRules.serialNumber]"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.whetherToMakePublic')"
type="radio"
:triggerChange="false"
dict-code="yn" />
</a-form-item>
<!--在线对比-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.customComparison.onlineComparison')">
<a-switch default-checked v-model="isStartComparison" />
</a-form-item>
<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="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>{{ $t('docTool.customComparison.comparativeAnalysisResult') }}</a-button>
</div>
<div>
<a-table>
</a-table>
</div>
</div>
</a-form>
</a-spin>
</div>
<!--标准列表-->
<standard-list-drawer ref="standardListDrawer" @delete="handleDeleteStandard" />
<!--对比维护-->
<comparison-maintain-drawer ref="comparisonMaintainDrawer" @ok="reloadTableData" />
</a-drawer>
</template>
<script>
import StandardSelection from '../../../../components/selection/StandardSelection'
import { downFile } from '../../../../api/manage'
import StandardListDrawer from './StandardListDrawer'
import ComparisonMaintainDrawer from './ComparisonMaintainDrawer'
export default {
name: 'CustomComparisonDrawer',
components: { StandardSelection, StandardListDrawer, ComparisonMaintainDrawer },
data () {
return {
title: '',
confirmLoading: false,
width: 900,
visible: false,
modal: {},
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 3 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
// 清单名称
title: {
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardSelect.standardName') }],
validateTrigger: 'blur'
},
// 涉及标准
serialNumber: {
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardSelect.standardNumber') }],
validateTrigger: 'change'
},
// 文本状态
fileType: {
rules: [{ required: true, 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: true, // 是否发起比对,为是的时候显示下面的内容
isEdit: false // 是否在编辑状态里
}
},
methods: {
add () {
this.visible = true
},
edit (record) {
this.modal = Object.assign({}, record)
},
handleCancel () {
this.close()
},
close () {
this.visible = false
},
/**
* 导出
*/
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(this.url.exportXlsUrl).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 () {
console.log(this.form.getFieldValue('serialNumber'))
this.$refs.standardListDrawer.open()
},
/**
* 删除标准
* @param standardNumber
*/
handleDeleteStandard (standardNumber) {
let selectedStandards = this.form.getFieldValue('serialNumber').split(',')
selectedStandards = selectedStandards.filter(tt => tt !== standardNumber)
const str = selectedStandards.join(',')
this.form.setFieldsValue({ serialNumber: str })
},
/**
* 重新加载表格数据
*/
reloadTableData () {
},
/**
* 对比维护
*/
handleComparisonMaintain () {
this.$refs.comparisonMaintainDrawer.open()
}
}
}
</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;
}
}
.custom-drawer-style-scroll {
height: 100%;
}
</style>
@@ -0,0 +1,205 @@
<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">
<j-table
ref="table"
size="middle"
:columns="columns"
:data-source="dataSource"
rowKey="id"
:can-drag="true"
:loading="confirmLoading"
:pagination="ipagination"
:scroll="{x: '100%'}"
:operation-list="operationList"
@change="handleTableChange"
@operationClick="operationClick">
<!--跳转标准详情-->
<template v-slot:detail="{text, record}">
<a-tooltip overlay-class-name="tooltip-style">
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
<div class="table-text can-click-table-text" v-if="text || text === 0" @click="toDetailPage(record)">{{ text }}</div>
<div v-else class="table-text">{{ global.emptyLine }}</div>
</a-tooltip>
</template>
</j-table>
</div>
</a-drawer>
</template>
<script>
import JTable from '../../../../components/jero/JTable'
import { deleteCustomComparisonStandard } from '../../../../api/documentToolApi'
export default {
name: 'StandardListDrawer',
components: { JTable },
data () {
return {
title: this.$t('docTool.customComparison.standardList'),
confirmLoading: false,
width: 900,
visible: false,
columns: [
// 编号
{
title: this.$t('number'),
dataIndex: 'standardNumber',
width: 150,
scopedSlots: { customRender: 'detail' }
},
// 名称
{
title: this.$t('title'),
dataIndex: 'standardName',
width: 150,
scopedSlots: { customRender: 'detail' }
},
// 发布日期
{
title: this.$t('standardSelect.releaseDate'),
dataIndex: 'releaseDate',
width: 120
},
// 文本状态
{
title: this.$t('standardSelect.textState'),
dataIndex: 'standardState_dictText',
width: 120
},
// 操作
{
title: this.$t('operation'),
fixed: 'right',
width: 100,
scopedSlots: { customRender: 'action' }
}
],
dataSource: [],
// 分页参数
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
operationList: [
{ // 删除
text: this.$t('delete'),
clickEvent: 'handleDelete'
// has: 'enterpriseStandardLibrary:plan:delete'
}
]
}
},
methods: {
open () {
this.visible = true
this.$emit('delete', 'GB/T 38698.2-2023')
},
handleCancel () {
this.visible = false
},
/**
* 分页变化
* @param pagination
*/
handleTableChange (pagination) {
this.ipagination = pagination
},
/**
* 循环操作按钮的操作
* @param operation
* @param record
*/
operationClick (operation, record) {
if (operation.clickEvent === 'handleDelete') {
this.handleDelete(record.id)
} else {
this[operation.clickEvent](record)
}
},
/**
* 删除
* @param id
*/
handleDelete ({ id }) {
this.$confirm({
title: this.$t('confirmDeletion'),
content: this.$t('areYouSure'),
onOk: () => {
this.confirmLoading = true
deleteCustomComparisonStandard({ id }).then(res => {
if (res.success) {
this.$message.success(res.message)
// 判断当前删除的数据是否是最后一页的最后一条数据,如果是的话页码减一
if (this.ipagination.current > 1 && ((this.ipagination.current - 1) * this.ipagination.pageSize) + 1 === this.ipagination.total) {
this.ipagination.current -= 1
}
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
/**
* 跳转标准详情
* @param standardSource
*/
toDetailPage ({ standardSource, standardId }) {
let path
// 根据来源跳转不同的详情页
switch (standardSource) {
// 国内
case StandardSource.DOMESTIC.value:
path = '/standardRegulationLibrary/DomesticStandardDetail'
break
// 海外
case StandardSource.OVERSEAS.value:
path = '/standardRegulationLibrary/OverseasStandardDetail'
break
// 企标
case StandardSource.ENTERPRISE.value:
path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
break
default:
break
}
if (!path) {
return
}
const query = {
id: standardId
}
this.$openPageNewSheet({
path, query
})
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>