549 lines
19 KiB
Vue
549 lines
19 KiB
Vue
<template>
|
||
<a-card :bordered="false" class="page-left-right-layout">
|
||
<!-- 树部分-->
|
||
<div class="page-left-box">
|
||
<!-- $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
|
||
<a-input-search v-model="treeInput"
|
||
:placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
|
||
@search="handleTreeSearch" />
|
||
<div class="page-tree-box page-tree-box-has-search">
|
||
<a-spin :spinning="treeLoading">
|
||
<a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedTreeKeys">
|
||
<a-icon type="folder" slot="folder" class="tree-icon" />
|
||
<a-icon type="file" slot="file" class="tree-icon" />
|
||
|
||
<template #custom="record">
|
||
<div class="tree-operate-node"
|
||
@mouseenter="handleTreeMouseover(record.key)"
|
||
@mouseleave="handleTreeMouseout(record.key)"
|
||
@click="handleSelectTreeNode(record)">
|
||
<a-tooltip>
|
||
<template #title>
|
||
{{ record.title }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.title }}</span>
|
||
</a-tooltip>
|
||
<!---->
|
||
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey}">
|
||
<!-- 新增-->
|
||
<a-button icon="plus"
|
||
class="tree-operate-node-btn"
|
||
@click.stop="handleAddTreeNode(record)"
|
||
v-if="record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
||
v-has="'domesticStandard:tree:add'"></a-button>
|
||
<!-- 编辑，根节点不能编辑-->
|
||
<a-button class="tree-operate-node-btn"
|
||
@click.stop="handleEditTreeNode(record)"
|
||
v-has="'domesticStandard:tree:edit'"
|
||
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value">
|
||
<i class="iconfont icon-bianji" />
|
||
</a-button>
|
||
<!-- 删除，根节点不能删除-->
|
||
<a-button class="tree-operate-node-btn"
|
||
v-has="'domesticStandard:tree:delete'"
|
||
v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value && record.nodeType !== StandardSystemTreeNodeType.NOT_OPERATE_NODE.value"
|
||
@click.stop="handleDelTreeNode(record)">
|
||
<i class="iconfont icon-shanchu_" />
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</a-tree>
|
||
</a-spin>
|
||
</div>
|
||
</div>
|
||
<!-- 表格部分-->
|
||
<div class="page-right-box">
|
||
<div class="table-page-search-wrapper">
|
||
<search ref="searchRef"
|
||
:url="url"
|
||
:get-query-condition-func="getQueryConditionFunc"
|
||
search-has="domesticStandard:search"
|
||
@search="searchQuery"
|
||
@reset="searchReset" />
|
||
</div>
|
||
|
||
<div class="table-operator">
|
||
<!-- 新增-->
|
||
<a-button icon="plus" type="primary" @click="handleAdd" v-has="'domesticStandard:add'">{{ $t('newlyAdded') }}</a-button>
|
||
<!-- 导入-->
|
||
<a-upload name="file"
|
||
:showUploadList="false"
|
||
:multiple="false"
|
||
:headers="tokenHeader"
|
||
:action="importExcelUrl"
|
||
v-has="'domesticStandard:import'"
|
||
@change="handleImportExcel">
|
||
<a-button type="primary" icon="download" ghost>{{ $t('import') }}</a-button>
|
||
</a-upload>
|
||
<!-- 导出-->
|
||
<a-button icon="upload"
|
||
type="primary"
|
||
ghost
|
||
v-has="'domesticStandard:export'"
|
||
@click="handleExportXls($t('standardRegulationLibrary.domesticStandard.exportFileName'))">
|
||
{{ $t('export') }}
|
||
</a-button>
|
||
<!-- 带文件导出-->
|
||
<a-button icon="upload"
|
||
type="primary"
|
||
ghost
|
||
v-has="'domesticStandard:exportFile'"
|
||
@click="handleFileExport($t('standardRegulationLibrary.domesticStandard.exportFileName'))">
|
||
{{ $t('exportWithFile') }}
|
||
</a-button>
|
||
<!-- 模板下载-->
|
||
<a-button type="primary"
|
||
icon="download"
|
||
ghost
|
||
v-has="'domesticStandard:downTemplate'"
|
||
@click="downTemplate($t('standardRegulationLibrary.domesticStandard.templateName'))">
|
||
{{ $t('templateDownload') }}
|
||
</a-button>
|
||
<!-- 批量删除-->
|
||
<a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'domesticStandard:batchDel'">{{ $t('batchDelete') }}</a-button>
|
||
<!-- 配置标准-->
|
||
<a-button type="primary" icon="setting" ghost @click="handleConfigStandard" v-has="'domesticStandard:configStandard'">
|
||
{{ $t('standardRegulationLibrary.configStandard') }}
|
||
</a-button>
|
||
<!-- 移出标准-->
|
||
<a-button type="primary" icon="minus-circle" ghost @click="handleRemoveStandard" v-has="'domesticStandard:removeStandard'">
|
||
{{ $t('standardRegulationLibrary.removeStandard') }}
|
||
</a-button>
|
||
</div>
|
||
<div>
|
||
<j-table
|
||
v-if="columns && columns.length > 0"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:can-drag="true"
|
||
rowKey="id"
|
||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||
:pagination="ipagination"
|
||
:scroll="{x: '100%'}"
|
||
@change="tableOnChange">
|
||
|
||
<!-- 标准编号-->
|
||
<template v-slot:standard_number="{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>
|
||
|
||
<!-- 标准名称-->
|
||
<template v-slot:standard_name="{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>
|
||
|
||
<template v-slot:operation="{text, record}">
|
||
<!-- 收藏-->
|
||
<a @click="operationClick(operationList[0],record)" v-has="operationList[0].has">
|
||
<i class="iconfont icon-star1" v-show="record.collectionFlag" />
|
||
<i class="iconfont icon-star" v-show="!record.collectionFlag" />
|
||
</a>
|
||
<a-divider type="vertical" />
|
||
<a-dropdown placement="bottomCenter">
|
||
<a-icon type="more" class="operate-icon-btn operate-icon-more" />
|
||
<a-menu slot="overlay">
|
||
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
|
||
<a @click="operationClick(operation,record)" v-has="operation.has">
|
||
<div class="operate-btn">
|
||
<!-- 编辑图标-->
|
||
<i class="iconfont icon-bianji operate-btn-icon" v-if="operation.text === $t('edit')" />
|
||
<!-- 分享图标-->
|
||
<i class="iconfont icon-fangxingfenxiang operate-btn-icon" v-if="operation.text === $t('share')" />
|
||
<!-- 删除图标-->
|
||
<i class="iconfont icon-shanchu_ operate-btn-icon" v-if="operation.text === $t('delete')" />
|
||
{{ operation.text }}
|
||
</div>
|
||
</a>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</a-dropdown>
|
||
</template>
|
||
</j-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增、编辑-->
|
||
<domestic-standard-modal ref="modalForm" @ok="modalFormOk" />
|
||
<!-- 分享选人-->
|
||
<user-select-modal ref="userSelectModal" type="checkbox" @change="continueShare" />
|
||
<!-- 树新增、编辑-->
|
||
<domestic-system-tree-modal ref="treeModal" @ok="modalFormOk" />
|
||
<!-- 配置标准-->
|
||
<selection-domestic-standard-drawer ref="standardSelectionModal" :node-code="selectedTreeNodeCodes[0]" @change="continueConfigStandard" />
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import '@assets/less/common.less'
|
||
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
|
||
import Search from '../../../components/customField/Search.vue'
|
||
import JTable from '../../../components/jero/JTable.vue'
|
||
import DomesticStandardModal from './modules/DomesticStandardModal.vue'
|
||
import {
|
||
configDomesticStandard,
|
||
deleteDomesticSystemTree,
|
||
getDomesticStandardSearchForm,
|
||
getDomesticStandardTableHeader,
|
||
getDomesticStandardTree,
|
||
removeDomesticStandard,
|
||
shareDomesticStandard,
|
||
collectionDomesticStandard,
|
||
cancelCollectionDomesticStandard
|
||
} from '../../../api/standardRegulationLibraryApi'
|
||
import { StandardSystemTreeNodeType, TagsTypeEnums, YesOrNoEnum } from '../../../enums/commonEnums'
|
||
import UserSelectModal from '../../../components/selection/UserSelectModal.vue'
|
||
import DomesticSystemTreeModal from './modules/DomesticSystemTreeModal.vue'
|
||
import SelectionDomesticStandardDrawer from './modules/SelectionDomesticStandardDrawer.vue'
|
||
|
||
export default {
|
||
name: 'DomesticStandardList',
|
||
components: { Search, JTable, DomesticStandardModal, UserSelectModal, DomesticSystemTreeModal, SelectionDomesticStandardDrawer },
|
||
mixins: [ConfigurableTableMixin],
|
||
data () {
|
||
return {
|
||
StandardSystemTreeNodeType,
|
||
treeInput: null, // 树查询绑定值
|
||
treeData: [],
|
||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||
showAction: true,
|
||
operationList: [
|
||
// 收藏
|
||
{
|
||
text: this.$t('standardRegulationLibrary.domesticStandard.cancelCollection'),
|
||
clickEvent: 'handleCollection',
|
||
has: 'domesticStandard:collection'
|
||
},
|
||
// 编辑
|
||
{
|
||
text: this.$t('edit'),
|
||
clickEvent: 'handleEdit',
|
||
has: 'domesticStandard:edit'
|
||
},
|
||
// 分享
|
||
{
|
||
text: this.$t('share'),
|
||
clickEvent: 'handleShare',
|
||
has: 'domesticStandard:share'
|
||
},
|
||
// 删除
|
||
{
|
||
text: this.$t('delete'),
|
||
clickEvent: 'handleDelete',
|
||
has: 'domesticStandard:delete'
|
||
}
|
||
],
|
||
getTableHeaderFunc: getDomesticStandardTableHeader,
|
||
getQueryConditionFunc: getDomesticStandardSearchForm,
|
||
url: {
|
||
list: '/laws/standard/domestic/getCommonPage',
|
||
delete: '/laws/standard/domestic/deleteByIdsAndModule',
|
||
downTemplateUrl: '', // 下载模板
|
||
exportXlsUrl: '', // 导出
|
||
exportZipUrl: '', // 带文件导出
|
||
importExcelUrl: '' // 导入
|
||
},
|
||
yesValue: YesOrNoEnum.YES.value,
|
||
noValue: YesOrNoEnum.NO.value,
|
||
nowShareInfo: {}, // 当前正在分享的数据
|
||
selectedTreeKeys: [], // 选中的树节点key
|
||
selectedTreeNodeCodes: [], // 选中树节点的code
|
||
tableSlotField: ['standard_name', 'standard_number'], // 表格中需要插槽的字段
|
||
treeLoading: false
|
||
}
|
||
},
|
||
computed: {
|
||
importExcelUrl () {
|
||
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
||
}
|
||
},
|
||
created () {
|
||
this.initTreeData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取树数据
|
||
*/
|
||
initTreeData () {
|
||
this.treeLoading = true
|
||
getDomesticStandardTree({ nodeName: this.treeInput }).then(res => {
|
||
this.treeData = []
|
||
this.selectedTreeKeys = []
|
||
this.selectedTreeNodeCodes = []
|
||
this.filters.nodeCode = null
|
||
if (res.success) {
|
||
const treeData = res.result || []
|
||
this.treeData = this.dealTreeData(treeData)
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.treeLoading = false
|
||
})
|
||
},
|
||
/**
|
||
* 处理树数据，加入自定义的节点插槽
|
||
* @param treeData
|
||
* @returns {*}
|
||
*/
|
||
dealTreeData (treeData) {
|
||
return treeData.map(item => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.scopedSlots = { icon: 'folder', title: 'custom' }
|
||
item.children = this.dealTreeData(item.children)
|
||
} else if (item.nodeType === StandardSystemTreeNodeType.ROOT_NODE.value) {
|
||
item.scopedSlots = { icon: 'folder', title: 'custom' }
|
||
} else {
|
||
item.scopedSlots = { icon: 'file', title: 'custom' }
|
||
}
|
||
return item
|
||
})
|
||
},
|
||
/**
|
||
* 树节点查询
|
||
*/
|
||
handleTreeSearch () {
|
||
this.initTreeData()
|
||
},
|
||
/**
|
||
* 树节点鼠标移入
|
||
* @param key
|
||
*/
|
||
handleTreeMouseover (key) {
|
||
this.mouseInNodeKey = key
|
||
},
|
||
/**
|
||
* 树节点鼠标移出
|
||
* @param key
|
||
*/
|
||
handleTreeMouseout (key) {
|
||
if (this.mouseInNodeKey === key) {
|
||
this.mouseInNodeKey = null
|
||
}
|
||
},
|
||
/**
|
||
* 表格操作点击
|
||
* @param operation
|
||
* @param record
|
||
*/
|
||
operationClick (operation, record) {
|
||
if (operation.clickEvent === 'handleDelete') {
|
||
this.handleDelete(record.id)
|
||
} else {
|
||
this[operation.clickEvent](record)
|
||
}
|
||
},
|
||
/**
|
||
* 收藏/取消收藏
|
||
* @param record
|
||
*/
|
||
handleCollection ({ collectionFlag, id: standardId, standard_number: standardNumber }) {
|
||
let params
|
||
let submitFunc
|
||
// 取消收藏
|
||
if (collectionFlag) {
|
||
params = { id: standardId, standardNumber }
|
||
submitFunc = cancelCollectionDomesticStandard
|
||
} else {
|
||
params = { standardId, standardNumber }
|
||
submitFunc = collectionDomesticStandard
|
||
}
|
||
// 收藏
|
||
this.loading = true
|
||
submitFunc(params).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.loadData(1)
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 分享
|
||
*/
|
||
handleShare ({ id, standard_number: standardNum }) {
|
||
this.nowShareInfo = {
|
||
standardId: id,
|
||
standardNum
|
||
}
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
/**
|
||
* 选择分享的人之后继续分享
|
||
* @param ids
|
||
*/
|
||
continueShare (ids) {
|
||
const params = Object.assign(this.nowShareInfo, {
|
||
recipientId: ids // 分享给的用户的id
|
||
})
|
||
this.loading = true
|
||
shareDomesticStandard(params).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
modalFormOk () {
|
||
this.initTreeData()
|
||
// 新增/修改 成功时，重载列表
|
||
this.loadData()
|
||
// 清空列表选中
|
||
this.onClearSelected()
|
||
},
|
||
/**
|
||
* 新增树节点
|
||
* @param dataRef
|
||
*/
|
||
handleAddTreeNode ({ dataRef }) {
|
||
this.$refs.treeModal.add({ parentId: dataRef.id, parentCode: dataRef.nodeCode })
|
||
},
|
||
/**
|
||
* 编辑树节点
|
||
* @param dataRef
|
||
*/
|
||
handleEditTreeNode ({ dataRef }) {
|
||
this.$refs.treeModal.edit(dataRef)
|
||
},
|
||
/**
|
||
* 删除树节点
|
||
* @param dataRef
|
||
*/
|
||
handleDelTreeNode ({ dataRef }) {
|
||
this.$confirm({
|
||
title: this.$t('confirmDeletion'),
|
||
content: this.$t('areYouSure'),
|
||
onOk: () => {
|
||
deleteDomesticSystemTree({ id: dataRef.id }).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.modalFormOk()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 选中树节点
|
||
* @param dataRef
|
||
*/
|
||
handleSelectTreeNode ({ dataRef }) {
|
||
this.selectedTreeKeys = [dataRef.key]
|
||
this.selectedTreeNodeCodes = [dataRef.nodeCode]
|
||
this.filters.nodeCode = dataRef.nodeCode
|
||
this.loadData(1)
|
||
},
|
||
/**
|
||
* 配置标准
|
||
*/
|
||
handleConfigStandard () {
|
||
// 没选择左侧树节点，需要提示“请先选择二级及以下体系”
|
||
if (!this.selectedTreeNodeCodes || this.selectedTreeNodeCodes.length === 0) {
|
||
this.$message.warn(this.$t('standardRegulationLibrary.configStandardNoTreeNode'))
|
||
return
|
||
}
|
||
this.$refs.standardSelectionModal.open()
|
||
},
|
||
/**
|
||
* 配置标准-提交
|
||
* @param dbFieldName
|
||
* @param standardIds
|
||
*/
|
||
continueConfigStandard (dbFieldName, standardIds) {
|
||
this.loading = true
|
||
const params = {
|
||
nodeCode: this.selectedTreeNodeCodes[0],
|
||
ids: standardIds
|
||
}
|
||
configDomesticStandard(params).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.modalFormOk()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 移出标准
|
||
*/
|
||
handleRemoveStandard () {
|
||
// 没选择左侧树节点，需要提示“请先选择二级及以下体系”
|
||
if (!this.selectedTreeNodeCodes || this.selectedTreeNodeCodes.length === 0) {
|
||
this.$message.warn(this.$t('standardRegulationLibrary.configStandardNoTreeNode'))
|
||
return
|
||
}
|
||
// 没有选择列表数据，需要提示“选中至少一条列表数据”
|
||
if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
|
||
this.$message.warning(this.$t('standardRegulationLibrary.selectLeastOneTableData'))
|
||
return
|
||
}
|
||
this.loading = true
|
||
const params = {
|
||
nodeCode: this.selectedTreeNodeCodes[0],
|
||
ids: this.selectedRowKeys.join(',')
|
||
}
|
||
removeDomesticStandard(params).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.modalFormOk()
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 跳转详情页
|
||
* @param id
|
||
* @param standardNumber
|
||
*/
|
||
toDetailPage ({ id, standard_number: standardNumber }) {
|
||
this.$openPageNewSheet({
|
||
path: '/standardRegulationLibrary/DomesticStandardDetail',
|
||
query: {
|
||
id,
|
||
type: TagsTypeEnums.DOMESTIC_LIST.value,
|
||
standardNumber
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/deeo/ .ant-tree li span.ant-tree-iconEle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tree-icon {
|
||
color: #1D2129;
|
||
}
|
||
|
||
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
|
||
display: none;
|
||
}
|
||
</style>
|