556 lines
19 KiB
Vue
556 lines
19 KiB
Vue
<template>
|
||
<internal-detail-page :title="pageTitle" :content-padding="0">
|
||
<div class="page-left-right-layout">
|
||
<!--树部分-->
|
||
<div class="page-left-box">
|
||
<a-input-search class="tree-search" v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
|
||
<div class="page-tree-box page-tree-box-has-search">
|
||
<a-spin :spinning="loading">
|
||
<a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedKeys">
|
||
<template #title="record">
|
||
<div class="tree-operate-node"
|
||
@mouseenter="handleTreeMouseover(record.id)"
|
||
@mouseleave="handleTreeMouseout(record.id)"
|
||
@click="handleSelectTreeNode(record)">
|
||
<a-icon class="parent-node-icon" type="folder" v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
||
<a-tooltip>
|
||
<template #title>
|
||
{{ record.name }}{{ record.itemName }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
|
||
</a-tooltip>
|
||
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
|
||
<!--新增-->
|
||
<a-button icon="plus"
|
||
class="tree-operate-node-btn"
|
||
@click.stop="orgAdd(record)"
|
||
v-has="'split:sarFileSplitMenu:add'">
|
||
</a-button>
|
||
<!--编辑-->
|
||
<a-button class="tree-operate-node-btn"
|
||
@click.stop="orgEdit(record)"
|
||
v-if="record.pid"
|
||
v-has="'split:sarFileSplitMenu:update'">
|
||
<i class="iconfont icon-bianji" />
|
||
</a-button>
|
||
<!--删除，根节点不能删除-->
|
||
<a-button class="tree-operate-node-btn"
|
||
v-if="record.pid"
|
||
v-has="'split:sarFileSplitMenu:delete'"
|
||
@click.stop="orgDelete(record)">
|
||
<i class="iconfont icon-shanchu_" />
|
||
</a-button>
|
||
<!--节点上移，是否可以上移在树形数据中应该有字段标识-->
|
||
<a-button icon="up"
|
||
v-if="record.pid"
|
||
class="tree-operate-node-btn"
|
||
@click.stop="orgMoveUp(record)"
|
||
v-has="'split:sarFileSplitMenu:moveUp'">
|
||
</a-button>
|
||
<!--节点下移，是否可以下移在树形数据中应该有字段标识-->
|
||
<a-button icon="down"
|
||
v-if="record.pid"
|
||
class="tree-operate-node-btn"
|
||
@click.stop="orgmoveDown(record)"
|
||
v-has="'split:sarFileSplitMenu:moveDown'">
|
||
</a-button>
|
||
</div>
|
||
<!--<template #overlay>-->
|
||
<!-- <a-menu v-if="$route.query.createBy === userInfo.username || administrators"-->
|
||
<!-- @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey, record)">-->
|
||
<!-- <a-menu-item key="1" @click="orgAdd" v-has="'split:sarFileSplitMenu:add'">-->
|
||
<!-- {{ $t('newNode') }}-->
|
||
<!-- </a-menu-item>-->
|
||
<!-- <a-menu-item key="2" @click="orgEdit" v-has="'split:sarFileSplitMenu:update'">-->
|
||
<!-- {{ $t('modifyNode') }}-->
|
||
<!-- </a-menu-item>-->
|
||
<!-- <a-menu-item key="3" @click="orgDelete" v-if="deleteNode"-->
|
||
<!-- v-has="'split:sarFileSplitMenu:delete'">{{ $t('deleteNode') }}-->
|
||
<!-- </a-menu-item>-->
|
||
<!-- <a-menu-item key="4" @click="orgMoveUp" v-if="deleteNode && moveUpFlag"-->
|
||
<!-- v-has="'split:sarFileSplitMenu:moveUp'">{{ $t('moveUp') }}-->
|
||
<!-- </a-menu-item>-->
|
||
<!-- <a-menu-item key="5" @click="orgmoveDown" v-if="deleteNode && moveDownFlag"-->
|
||
<!-- v-has="'split:sarFileSplitMenu:moveDown'">{{ $t('moveDown') }}-->
|
||
<!-- </a-menu-item>-->
|
||
<!-- </a-menu>-->
|
||
<!--</template>-->
|
||
</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"
|
||
@change="handleImportExcel">
|
||
<a-button type="primary" icon="download" ghost>{{ $t('import') }}</a-button>
|
||
</a-upload>
|
||
<!--导出-->
|
||
<a-button icon="upload"
|
||
type="primary"
|
||
ghost
|
||
@click="handleExportXls($t('standardRegulationLibrary.domesticStandard.exportFileName'))">
|
||
{{ $t('export') }}
|
||
</a-button>
|
||
<!--批量删除-->
|
||
<a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'domesticStandard:batchDel'">{{ $t('batchDelete') }}</a-button>
|
||
<!--模板下载-->
|
||
<a-button type="primary"
|
||
icon="download"
|
||
ghost
|
||
@click="downTemplate($t('standardRegulationLibrary.domesticStandard.templateName'))">
|
||
{{ $t('templateDownload') }}
|
||
</a-button>
|
||
<!--批量复制-->
|
||
<a-button type="primary" ghost @click="handleCopyManage">{{ $t('docTool.split.batchCopy') }}</a-button>
|
||
<!--批量编辑-->
|
||
<a-button type="primary" ghost @click="handleManage">{{ $t('docTool.split.batchEdit') }}</a-button>
|
||
<!--合并条款-->
|
||
<a-button type="primary" ghost @click="handleMergeManage">{{ $t('docTool.split.mergerClause') }}</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 slot="operation" slot-scope="{text, record}">
|
||
<a v-for="(operation, index) in operationList" :key="index" @click="operationClick(operation,record)">
|
||
<!-- v-has="operation.has"-->
|
||
<span class="text">
|
||
{{ operation.text }}
|
||
</span>
|
||
</a>
|
||
</template>
|
||
|
||
<!-- 详情-->
|
||
<template slot="detailClick" slot-scope="{text, record}">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<a class="table-text textName" @click="detailClick(record)" v-if="text || text === 0">{{ text }}</a>
|
||
<div class="table-text" v-else>{{ global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<template slot="showContent" slot-scope="text, record">
|
||
<span class="content-show"
|
||
@click="showContent(text,record)">{{ record.iterms_conditions && record.iterms_conditions !== 'null' ? record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''
|
||
}}</span>
|
||
</template>
|
||
|
||
</j-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 条款详情 -->
|
||
<split-clause-detail ref="splitClauseDetail"></split-clause-detail>
|
||
<!-- 添加节点 -->
|
||
<split-detail-node-add ref="splitDetailNodeAdd" @ok="nodeAddOk" @update="nodeUpdateOk"></split-detail-node-add>
|
||
<!-- 批量设置弹框 -->
|
||
<split-detail-batch-setting ref="splitDetailBatchSetting" @ok="batchSettingOk"></split-detail-batch-setting>
|
||
<!--条款添加-->
|
||
<split-add-form ref="modalForm" :flag="'4'"
|
||
:url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId"
|
||
@sumber="sumber"></split-add-form>
|
||
</internal-detail-page>
|
||
</template>
|
||
|
||
<script>
|
||
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
||
import JTable from '../../../components/jero/JTable.vue'
|
||
// 条款添加
|
||
import SplitAddForm from './modules/SplitAddForm.vue'
|
||
// 条款内容弹框
|
||
import SplitClauseDetail from './modules/SplitClauseDetail.vue'
|
||
// 添加左侧树节点弹框
|
||
import SplitDetailNodeAdd from './modules/SplitDetailNodeAdd.vue'
|
||
// 批量设置弹框
|
||
import SplitDetailBatchSetting from './modules/SplitDetailBatchSetting.vue'
|
||
import { mapGetters } from 'vuex'
|
||
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin.js'
|
||
import {
|
||
getDocSplitTableHeader,
|
||
getDocSplitSearch,
|
||
deleteClauseTreeNode,
|
||
moveUpOrDownClauseTreeNode,
|
||
batchCopyClause,
|
||
merageClause,
|
||
getClauseTreeData
|
||
} from '../../../api/documentToolApi.js'
|
||
import Search from '../../../components/customField/Search.vue'
|
||
|
||
export default {
|
||
name: 'DocumentSplitDetail',
|
||
components: {
|
||
InternalDetailPage,
|
||
JTable,
|
||
SplitAddForm,
|
||
SplitClauseDetail,
|
||
SplitDetailNodeAdd,
|
||
SplitDetailBatchSetting,
|
||
Search
|
||
},
|
||
mixins: [ConfigurableTableMixin],
|
||
data () {
|
||
return {
|
||
data: [],
|
||
loading: false, // 提交的加载
|
||
confirmLoading: false,
|
||
nodeTreeItem: null, // 右键菜单
|
||
tmpStyle: '', // 右键菜单位置
|
||
infoId: '',
|
||
menuId: '',
|
||
itemId: '',
|
||
itemVal: {},
|
||
uploadMenuId: '',
|
||
deleteNode: false,
|
||
moveDownFlag: false,
|
||
moveUpFlag: false,
|
||
fullWidth: '',
|
||
parameter: {},
|
||
administrators: false,
|
||
showAction: this.isCanOperate,
|
||
flag: '4', // 查询要用到
|
||
|
||
getQueryConditionFunc: getDocSplitSearch,
|
||
getTableHeaderFunc: getDocSplitTableHeader,
|
||
treeData: [],
|
||
searchValue: '',
|
||
selectedKeys: [],
|
||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||
// 操作栏
|
||
operationList: [
|
||
{
|
||
text: this.$t('edit'),
|
||
ClickEvent: 'handleEdit'
|
||
},
|
||
{
|
||
text: this.$t('delete'),
|
||
ClickEvent: 'handleDelete'
|
||
}
|
||
],
|
||
url: {
|
||
list: '',
|
||
importUrl: '', // 导入
|
||
exportXlsUrl: '', // 导出
|
||
delete: '', // 删除
|
||
deleteBatch: '', // 批量删除
|
||
downTemplateUrl: '' // 模板下载
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
isCanOperate () {
|
||
return !!(this.$route.query.createBy === this.userInfo.username || this.administrators)
|
||
},
|
||
// 页面标题是标准名称
|
||
pageTitle () {
|
||
return this.$route.query.standardName
|
||
},
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
created () {
|
||
this.filters = {
|
||
menu_id: this.menuId,
|
||
info_id: this.infoId
|
||
}
|
||
},
|
||
mounted () {
|
||
this.administrators = false
|
||
if (this.userInfo.userRoleList && this.userInfo.userRoleList.length > 0) {
|
||
this.userInfo.userRoleList.forEach(res => {
|
||
if (res.roleCode === 'admin') {
|
||
this.administrators = true
|
||
}
|
||
})
|
||
}
|
||
this.infoId = this.$route.query.infoId
|
||
this.loadMenuData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 树节点鼠标移入
|
||
* @param key
|
||
*/
|
||
handleTreeMouseover (key) {
|
||
this.mouseInNodeKey = key
|
||
},
|
||
/**
|
||
* 树节点鼠标移出
|
||
* @param key
|
||
*/
|
||
handleTreeMouseout (key) {
|
||
if (this.mouseInNodeKey === key) {
|
||
this.mouseInNodeKey = null
|
||
}
|
||
},
|
||
/**
|
||
* 选中树节点
|
||
* @param dataRef
|
||
*/
|
||
handleSelectTreeNode ({ dataRef }) {
|
||
this.selectedKeys = [dataRef.id]
|
||
this.menuId = this.selectedKeys[0]
|
||
this.uploadMenuId = this.selectedKeys[0]
|
||
this.filters.info_id = this.infoId
|
||
this.filters.menu_id = this.menuId
|
||
this.loadData()
|
||
},
|
||
|
||
// 显示条款内容弹框
|
||
showContent (val) {
|
||
this.$refs.splitClauseDetail.open(val)
|
||
},
|
||
// 获取左侧目录数据
|
||
loadMenuData () {
|
||
const params = {
|
||
infoId: this.infoId,
|
||
name: this.searchValue
|
||
}
|
||
this.loading = true
|
||
getClauseTreeData(params).then(res => {
|
||
if (res.success) {
|
||
this.treeData = res.result || []
|
||
console.log(this.treeData)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 用于点击空白处隐藏增删改菜单
|
||
clearMenu () {
|
||
this.nodeTreeItem = null
|
||
},
|
||
// 树形新增
|
||
orgAdd (record) {
|
||
console.log(record)
|
||
this.$refs.splitDetailNodeAdd.add(record.dataRef, this.infoId)
|
||
},
|
||
// 树形修改
|
||
orgEdit (record) {
|
||
this.$refs.splitDetailNodeAdd.edit(record.dataRef, this.infoId)
|
||
},
|
||
// 添加节点完成后的回调
|
||
nodeAddOk () {
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
},
|
||
// 修改节点完成后的回调
|
||
nodeUpdateOk (expandId) {
|
||
this.onExpand(expandId)
|
||
this.loadMenuData()
|
||
},
|
||
// 树形删除
|
||
orgDelete (record) {
|
||
this.$confirm({
|
||
content: this.$t('confirmDeleteNodes'),
|
||
onOk:
|
||
async () => {
|
||
deleteClauseTreeNode({ id: record.dataRef.id }).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(this.$t('operationSuccessful'))
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 树上移
|
||
orgMoveUp (record) {
|
||
const query = {
|
||
moveFlag: 'up',
|
||
infoId: this.infoId,
|
||
sarFileSplitMenu: {
|
||
id: record.dataRef.id,
|
||
pId: record.dataRef.pid,
|
||
displaySeq: record.dataRef.displaySeq
|
||
}
|
||
}
|
||
moveUpOrDownClauseTreeNode(query).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(this.$t('operationSuccessful'))
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
},
|
||
// 树下移
|
||
orgmoveDown (record) {
|
||
const query = {
|
||
moveFlag: 'down',
|
||
infoId: this.infoId,
|
||
SarFileSplitMenu: {
|
||
id: record.dataRef.id,
|
||
pId: record.dataRef.pid,
|
||
displaySeq: record.dataRef.displaySeq
|
||
}
|
||
}
|
||
moveUpOrDownClauseTreeNode(query).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(this.$t('operationSuccessful'))
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
},
|
||
onContextMenuClick (treeKey, menuKey) {
|
||
// console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
|
||
},
|
||
// 复制按钮
|
||
handleCopyManage (record) {
|
||
const ids = []
|
||
const infoIds = []
|
||
const menuIds = []
|
||
this.selectedRows.forEach(item => {
|
||
ids.push(item.id)
|
||
infoIds.push(item.info_id)
|
||
menuIds.push(item.menu_id)
|
||
})
|
||
const params = {
|
||
ids: ids.join(','),
|
||
infoIds: infoIds.join(','),
|
||
menuids: menuIds.join(',')
|
||
}
|
||
if (menuIds && menuIds.length > 0) {
|
||
this.$confirm({
|
||
title: this.$t('confirmReplication'),
|
||
content: '',
|
||
onOk: () => {
|
||
batchCopyClause(params).then((res) => {
|
||
if (res.data.success) {
|
||
this.$message.success(this.$t('operationSuccessful'))
|
||
this.onClearSelected()
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else if (menuIds.length === 0) {
|
||
this.$message.warning(this.$t('pleaseSelectData'))
|
||
}
|
||
},
|
||
// 新增
|
||
handleAdd () {
|
||
// console.log('this.menuId',this.menuId)
|
||
if (this.menuId) {
|
||
this.formTitle = this.$t('add')
|
||
this.itemId = ''
|
||
this.addVisible = true
|
||
this.$nextTick(() => {
|
||
this.$refs.modalForm.add()
|
||
})
|
||
} else {
|
||
this.$message.warning(this.$t('selectDirectoryTerms'))
|
||
}
|
||
},
|
||
// 合并条款
|
||
handleMergeManage () {
|
||
if (this.selectedRowKeys && this.selectedRowKeys.length < 2) {
|
||
this.$message.warning(this.$t('leastTwo'))
|
||
} else {
|
||
const ids = this.selectedRowKeys.join(',')
|
||
this.$confirm({
|
||
title: this.$t('docTool.split.mergeTerms'),
|
||
content: '',
|
||
onOk: () => {
|
||
merageClause({ ids: ids }).then(res => {
|
||
if (res.data.success) {
|
||
this.$message.success(this.$t('operationSuccessful'))
|
||
this.onClearSelected()
|
||
this.loadMenuData()
|
||
this.loadData()
|
||
this.selectedRowKeys = []
|
||
} else {
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 批量设置
|
||
handleManage () {
|
||
const ids = this.selectedRowKeys.join(',')
|
||
if (this.selectedRowKeys && this.selectedRowKeys.length < 1) {
|
||
this.$message.warning(this.$t('selectLeastOne'))
|
||
} else {
|
||
this.$refs.splitDetailBatchSetting.open(ids)
|
||
}
|
||
},
|
||
// 批量设置完成的回调
|
||
batchSettingOk () {
|
||
this.onClearSelected()
|
||
this.loadData()
|
||
},
|
||
// 保存成功
|
||
sumber () {
|
||
this.loadData()
|
||
this.loadMenuData()
|
||
},
|
||
onSearch () {
|
||
this.loadMenuData()
|
||
}
|
||
},
|
||
beforeDestroy () {
|
||
window.removeEventListener('resize', {}, false)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.page-left-right-layout {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
/deep/ .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
|
||
color: #1D2129;
|
||
}
|
||
|
||
.parent-node-icon {
|
||
color: #1D2129;
|
||
font-size: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
</style>
|