458 lines
16 KiB
Vue
458 lines
16 KiB
Vue
<template>
|
|
<a-drawer
|
|
:title="$t('standardSelect.standardSelection')"
|
|
:maskClosable="false"
|
|
:width="1000"
|
|
placement="right"
|
|
:closable="true"
|
|
@close="handleCancel"
|
|
:visible="visible"
|
|
class="custom-drawer-style">
|
|
<div class="custom-drawer-style-scroll">
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
<a-row :gutter="24">
|
|
<a-col :sm="6" v-show="!splitSearch">
|
|
<a-form-item :label="$t('standardSelect.source')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<j-dict-select-tag style="width: 100%" v-model="queryParam.source"
|
|
:disabled="disabledSourceSearch"
|
|
:placeholder="$t('pleaseSelect')+$t('standardSelect.source')"
|
|
:triggerChange="false"
|
|
:options="sourceOptions"
|
|
@change="handleTypeChange" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!--标准结构树-->
|
|
<a-col :md="8" :sm="12" v-if="splitSearch">
|
|
<a-form-item :label="$t('docTool.comparison.standardStructureTree')">
|
|
<a-tree-select
|
|
tree-node-filter-prop="title"
|
|
v-model="queryParam.standardSystem"
|
|
:maxTagCount="1"
|
|
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
|
:tree-data="standardStructureTree"
|
|
tree-checkable
|
|
show-search
|
|
allowClear
|
|
tree-check-strictly
|
|
:filterTreeNode="filterTreeOption"
|
|
:placeholder="$t('pleaseSelect') + $t('docTool.comparison.standardStructureTree')"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :sm="8">
|
|
<a-form-item :label="$t('standardSelect.standardNumOrName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-input :placeholder="$t('pleaseEnter')+$t('standardSelect.standardNumOrName')"
|
|
v-model="queryParam.standardNumberOrName"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<div style="float: right;overflow: hidden;margin-right: 41px;margin-bottom: 20px"
|
|
class="table-page-search-submitButtons">
|
|
<a-button style="margin-left: 8px" type="primary" icon="search" @click="searchQuery">{{ $t('query') }}</a-button>
|
|
<a-button style="margin-left: 8px" type="primary" ghost icon="reload" @click="searchReset">{{ $t('reset') }}</a-button>
|
|
</div>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<a-table
|
|
:columns="columns"
|
|
:rowKey="record => {return isValueHaveName ? record.standardNumber + '|' + record.standardName : record.standardNumber}"
|
|
:scroll="{x: 900}"
|
|
:data-source="dataList"
|
|
:pagination="ipagination"
|
|
:row-selection="{ type: type, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
|
:loading="loading"
|
|
@change="handleTableChange">
|
|
<template slot="text" slot-scope="text">
|
|
<a-tooltip overlay-class-name="tooltip-style">
|
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
|
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
<!-- 企标编号/企标名称 -->
|
|
<template v-slot:toDetail="text, record">
|
|
<a-tooltip overlay-class-name="tooltip-style">
|
|
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
|
<a v-if="text" class="link-a" @click="handleGoDetail(record)">{{ text }}</a>
|
|
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
<!-- 标准状态 -->
|
|
<template slot="standardState" slot-scope="text, record">
|
|
<a-tooltip overlay-class-name="tooltip-style">
|
|
<template slot="title">{{ record.source === '3' ? (record.esStandardState_dictText || global.emptyLine) : (record.standardState_dictText || global.emptyLine) }}</template>
|
|
<div class="table-text">{{ record.source === '3' ? (record.esStandardState_dictText || global.emptyLine) : (record.standardState_dictText || global.emptyLine) }}</div>
|
|
</a-tooltip>
|
|
</template>
|
|
|
|
</a-table>
|
|
</div>
|
|
|
|
<div class="custom-drawer-style-bottom-btn">
|
|
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
|
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('submit') }}</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ajaxGetDictItems, getStandardList } from '@/api/api'
|
|
import JDictSelectTag from '../dict/JDictSelectTag'
|
|
import { StandardSource } from '../../enums/commonEnums'
|
|
import { getForeignStandardTree } from '@api/standardRegulationLibraryApi'
|
|
|
|
export default {
|
|
name: 'StandardSelectionModal',
|
|
components: { JDictSelectTag },
|
|
props: {
|
|
source: {
|
|
type: [String, Number],
|
|
default: '1'
|
|
},
|
|
// 查询条件可以选择的类型
|
|
canSelectedSource: {
|
|
type: [String, Array],
|
|
required: false,
|
|
default: () => {
|
|
return [StandardSource.FOREIGN.value, StandardSource.ENTERPRISE.value]
|
|
}
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 搜索条件中的来源是否不可更改
|
|
disabledSourceSearch: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'checkbox'
|
|
},
|
|
// 列表数据不包含的标准
|
|
excludeStandardNumbers: {
|
|
type: String,
|
|
required: false,
|
|
default: null
|
|
},
|
|
// 过滤条件
|
|
filters: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
// 是否拆分的搜索(来源换成外部标准结构树)
|
|
splitSearch: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 是否value要有标准名称
|
|
isValueHaveName: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
labelCol: {
|
|
sm: 8
|
|
},
|
|
wrapperCol: {
|
|
sm: 14
|
|
},
|
|
selectedRowKeys: [],
|
|
selectedRowList: [],
|
|
loading: false,
|
|
queryParam: {},
|
|
/* 分页参数 */
|
|
ipagination: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
columns: [
|
|
{
|
|
title: this.$t('standardNumber'),
|
|
dataIndex: 'standardNumber',
|
|
ellipsis: true,
|
|
align: 'center',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'toDetail' }
|
|
},
|
|
{
|
|
title: this.$t('standardName'),
|
|
dataIndex: 'standardName',
|
|
ellipsis: true,
|
|
align: 'center',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'toDetail' }
|
|
},
|
|
// 实施日期
|
|
{
|
|
title: this.$t('standardSelect.materialDate'),
|
|
dataIndex: 'implementationDate',
|
|
align: 'center',
|
|
width: 120,
|
|
scopedSlots: { customRender: 'text' }
|
|
},
|
|
{
|
|
title: this.$t('standardSelect.textState'),
|
|
dataIndex: 'standardState_dictText',
|
|
align: 'center',
|
|
width: 150,
|
|
scopedSlots: { customRender: 'standardState' }
|
|
}
|
|
],
|
|
dataList: [],
|
|
sourceOptions: [],
|
|
// 标准结构树
|
|
standardStructureTree: []
|
|
}
|
|
},
|
|
created () {
|
|
// 拆分的需要加载标准结构树
|
|
if (this.splitSearch) {
|
|
this.loadStandardStructureTree()
|
|
}
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
this.queryParam = {}
|
|
this.initDict()
|
|
this.$nextTick(() => {
|
|
this.source ? this.queryParam.source = this.source : this.queryParam = {}
|
|
this.replacePage()
|
|
})
|
|
},
|
|
initDict () {
|
|
ajaxGetDictItems('standard_source').then(res => {
|
|
if (res.success) {
|
|
const canSelectedArr = typeof this.canSelectedSource === 'string' ? this.canSelectedSource.split(',') : this.canSelectedSource
|
|
this.sourceOptions = res.result.filter(tt => canSelectedArr.includes(tt.value))
|
|
}
|
|
})
|
|
},
|
|
// 加载标准结构树
|
|
loadStandardStructureTree () {
|
|
// option 不传显示我的收藏，1不显示我的收藏, 2只能选二级中国及中国下三级,和欧盟EU
|
|
getForeignStandardTree({ option: 2 }).then(res => {
|
|
if (res.success) {
|
|
const data = res.result || []
|
|
this.standardStructureTree = data.map(item => {
|
|
item.disabled = true
|
|
return item
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// tree-select搜索
|
|
filterTreeOption (input, option) {
|
|
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
|
|
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
},
|
|
// 获取树结构没有被禁用的value值
|
|
getValuesWhereNotDisabled (tree = []) {
|
|
const values = []
|
|
function traverse (node) {
|
|
if (!node.disabled) { // 只处理 disabled 不为 true 的节点
|
|
values.push(node.value)
|
|
}
|
|
if (node.children && node.children.length > 0) {
|
|
node.children.forEach(child => traverse(child))
|
|
}
|
|
}
|
|
tree.forEach(node => traverse(node))
|
|
return values
|
|
},
|
|
// 获取表格数据
|
|
replacePage (arg) {
|
|
if (arg === 1) {
|
|
this.ipagination.current = 1
|
|
}
|
|
const query = {
|
|
...this.queryParam,
|
|
...this.filters,
|
|
pageNo: this.ipagination.current,
|
|
pageSize: this.ipagination.pageSize,
|
|
excludeStandardNumbers: this.excludeStandardNumbers
|
|
}
|
|
// 标准结构树
|
|
if (Array.isArray(query.standardSystem) && query.standardSystem.length) {
|
|
query.standardSystem = query.standardSystem.map(item => item.value).join(',')
|
|
} else {
|
|
query.standardSystem = this.getValuesWhereNotDisabled(this.standardStructureTree).join(',')
|
|
}
|
|
// 清空在可选范围内进行查询
|
|
if (!query.source && this.canSelectedSource.length < 3) {
|
|
query.source = this.canSelectedSource.join(',')
|
|
}
|
|
// this.selectedRowKeys = []
|
|
this.loading = true
|
|
getStandardList(query).then((res) => {
|
|
if (res.success) {
|
|
this.dataList = res.result.records
|
|
this.ipagination.total = res.result.total
|
|
this.selectedRowKeys = this.value ? this.value.split(',') : (this.selectedRowKeys || [])
|
|
} else {
|
|
this.dataList = []
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
searchQuery () {
|
|
this.replacePage(1)
|
|
},
|
|
searchReset () {
|
|
// 如果禁用来源，就不重置来源
|
|
if (this.disabledSourceSearch) {
|
|
this.queryParam = { source: this.source }
|
|
} else {
|
|
this.queryParam = {}
|
|
}
|
|
this.replacePage(1)
|
|
},
|
|
// 表格选择改变
|
|
onSelectChange (selectedRowKeys, selectedRows) {
|
|
this.selectedRowKeys = selectedRowKeys
|
|
// this.selectedRowList = row
|
|
if (this.type === 'checkbox') {
|
|
if (selectedRowKeys.length > this.selectedRowList.length) {
|
|
// 说明是增加了数据
|
|
if (this.isValueHaveName) {
|
|
// value里面要带标准名称
|
|
for (const rowIndex in selectedRows) {
|
|
if (!this.selectedRowList.find(item => (item.standardNumber + '|' + item.standardName) === (selectedRows[rowIndex].standardNumber + '|' + selectedRows[rowIndex].standardName))) {
|
|
// 不存在，追加
|
|
this.selectedRowList.push(selectedRows[rowIndex])
|
|
}
|
|
}
|
|
} else {
|
|
// value不带标准名称
|
|
for (const rowIndex in selectedRows) {
|
|
if (!this.selectedRowList.find(item => item.standardNumber === selectedRows[rowIndex].standardNumber)) {
|
|
// 不存在，追加
|
|
this.selectedRowList.push(selectedRows[rowIndex])
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// 说明是删除了数据
|
|
if (selectedRowKeys && selectedRowKeys.length > 0) {
|
|
// 没有选中数据，说明这一页没有选中数据了
|
|
if (this.isValueHaveName) {
|
|
// value里面要带标准名称
|
|
for (let i = 0; i < this.selectedRowList.length; i++) {
|
|
if (!selectedRowKeys.find(item => item === this.selectedRowList[i].standardNumber + '|' + this.selectedRowList[i].standardName)) {
|
|
// 表格选中中没有找到这一条数据，说明已经被删了
|
|
this.selectedRowList.splice(i, 1)
|
|
i--
|
|
}
|
|
}
|
|
} else {
|
|
for (let i = 0; i < this.selectedRowList.length; i++) {
|
|
if (!selectedRowKeys.find(item => item === this.selectedRowList[i].standardNumber)) {
|
|
// 表格选中中没有找到这一条数据，说明已经被删了
|
|
this.selectedRowList.splice(i, 1)
|
|
i--
|
|
}
|
|
}
|
|
}
|
|
|
|
} else {
|
|
this.selectedRowList = []
|
|
}
|
|
}
|
|
console.log(this.selectedRowList)
|
|
} else {
|
|
this.selectedRowList = selectedRows
|
|
}
|
|
},
|
|
handleTableChange (pagination) {
|
|
// 分页、排序、筛选变化时触发
|
|
this.ipagination = pagination
|
|
this.replacePage()
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
handleSubmit () {
|
|
const serialNumber = []
|
|
const serialNameArr = []
|
|
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
|
|
this.selectedRowList.forEach(res => {
|
|
serialNumber.push(res.standardNumber)
|
|
serialNameArr.push(res.standardName)
|
|
})
|
|
this.$emit('change', this.selectedRowKeys.join(','))
|
|
this.$emit('numberChange', serialNumber.join(','))
|
|
this.$emit('nameChange', serialNameArr.join(','))
|
|
this.$emit('listChange', this.selectedRowList)
|
|
this.close()
|
|
} else {
|
|
this.$message.warning(this.$t('selectLeastOne'))
|
|
}
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
this.selectedRowKeys = []
|
|
this.selectedRowList = []
|
|
this.ipagination = {
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
}
|
|
},
|
|
handleTypeChange () {
|
|
this.$forceUpdate()
|
|
},
|
|
// 点击跳转标准详情
|
|
handleGoDetail (record) {
|
|
let path = ''
|
|
// 需要先判断是哪种标准
|
|
if (record.source === '1') {
|
|
path = '/standardRegulationLibrary/foreignStandardDetailPage'
|
|
} else if (record.source === '3') {
|
|
path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
|
|
}
|
|
this.$openPageNewSheet({
|
|
path: path,
|
|
query: {
|
|
id: record.id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
.table-page-search-wrapper .ant-form-inline /deep/ .ant-form-item > .ant-form-item-label {
|
|
min-width: auto;
|
|
}
|
|
</style>
|