401 lines
15 KiB
Vue
401 lines
15 KiB
Vue
<template>
|
||
<a-card :bordered="false" class="page-left-right-layout">
|
||
<div class="page-left-box">
|
||
<a-input-search v-model="treeInput"
|
||
class="tree-search"
|
||
:placeholder="$t('system.internalWorkGroup.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"
|
||
:selectedKeys="currentTreeNode"
|
||
:replaceFields="{children: 'subset', title: 'name', key: 'id'}"
|
||
:default-expand-all="defaultExpandAll"
|
||
@select="treeSelect">
|
||
<!-- 没有删除 -->
|
||
<template #customNoDelete="record">
|
||
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
|
||
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
|
||
<a-tooltip>
|
||
<template #title>
|
||
{{ record.name }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.name }}</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="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
|
||
<!-- 编辑-->
|
||
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
|
||
<i class="iconfont icon-bianji" style="color: @primary-color"></i>
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template #custom="record">
|
||
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.id)" @mouseleave="handleTreeMouseout(record.id)">
|
||
<a-icon class="parent-node-icon" type="folder" v-if="record.subset && record.subset.length > 0" />
|
||
<a-tooltip>
|
||
<template #title>
|
||
{{ record.name }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.name }}</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="handleTreeAdd" v-has="'sys:innerWorkingGroup:tree:add'"></a-button>
|
||
<!-- 编辑-->
|
||
<a-button class="tree-operate-node-btn" @click="handleTreeEdit(record.name)" v-has="'sys:innerWorkingGroup:tree:edit'">
|
||
<i class="iconfont icon-bianji" style="color: @primary-color"></i>
|
||
</a-button>
|
||
<!-- 删除-->
|
||
<a-button class="tree-operate-node-btn" @click="handleTreeDelete" v-has="'sys:innerWorkingGroup:tree:delete'">
|
||
<i class="iconfont icon-shanchu_" style="color: @primary-color"></i>
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</a-tree>
|
||
</a-spin>
|
||
</div>
|
||
</div>
|
||
<div class="page-right-box">
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row :gutter="24">
|
||
<a-col :span="8">
|
||
<a-form-item :label="$t('system.internalWorkGroup.name')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+$t('system.internalWorkGroup.name')" v-model="queryParam.realname"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item :label="$t('system.internalWorkGroup.workNo')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+$t('system.internalWorkGroup.workNo')" v-model="queryParam.username"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<template v-if="toggleSearchStatus">
|
||
<a-col :span="8">
|
||
<a-form-item :label="$t('system.internalWorkGroup.role')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+$t('system.internalWorkGroup.role')" v-model="queryParam.userRoleName"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item :label="$t('system.internalWorkGroup.post')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter')+$t('system.internalWorkGroup.post')" v-model="queryParam.userPostName"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
</template>
|
||
|
||
<div style="float: right;overflow: hidden;" 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" icon="search" style="margin-left: 8px" v-has="'sys:innerWorkingGroup:search'">{{ $t('query') }}</a-button>
|
||
<a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
|
||
</div>
|
||
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div class="table-operator">
|
||
<!-- 新增-->
|
||
<a-button icon="plus" type="primary" @click="handleAdd" v-has="'sys:innerWorkingGroup:add'">{{ $t('newlyAdded') }}</a-button>
|
||
<!-- 导入-->
|
||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :data="importData" :action="importExcelUrl" @change="handleImportExcel">
|
||
<a-button type="primary" icon="import" ghost @click="handleImport" v-has="'sys:innerWorkingGroup:import'">{{ $t('import') }}</a-button>
|
||
</a-upload>
|
||
<!-- 导出-->
|
||
<a-button icon="export" type="primary" ghost @click="handleExportXls($t('system.internalWorkGroup.exportName'))" v-has="'sys:innerWorkingGroup:export'">
|
||
{{ $t('export') }}
|
||
</a-button>
|
||
<!-- 模板下载-->
|
||
<a-button type="primary" icon="download" ghost @click="downTemplate($t('system.internalWorkGroup.templateName'))" v-has="'sys:innerWorkingGroup:downTemplate'">
|
||
{{ $t('templateDownload') }}
|
||
</a-button>
|
||
</div>
|
||
<div>
|
||
<j-table
|
||
:can-drag="true"
|
||
:scroll="{x: '100%'}"
|
||
ref="table"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||
@change="handleTableChange">
|
||
|
||
<template v-slot:action="{text, record}">
|
||
<a @click="handleDelete(record.id)" v-has="'sys:innerWorkingGroup:delete'">{{ $t('delete') }}</a>
|
||
</template>
|
||
|
||
</j-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增、编辑左侧树节点 -->
|
||
<tree-node-modal ref="treeNodeModal" @ok="treeNodeModalOk"></tree-node-modal>
|
||
<!-- 新增弹框 -->
|
||
<working-group-modal ref="modalForm" @ok="modalFormOk"></working-group-modal>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import JTable from '@/components/jero/JTable'
|
||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||
import TreeNodeModal from './modules/TreeNodeModal'
|
||
import { postAction, downFile } from '@/api/manage'
|
||
import WorkingGroupModal from './modules/WorkingGroupModal'
|
||
import { getWorkGroupTreeList } from '@/api/api'
|
||
|
||
export default {
|
||
name: 'WorkingGroupList',
|
||
components: { WorkingGroupModal, TreeNodeModal, JTable },
|
||
mixins: [JeroListMixin],
|
||
data () {
|
||
return {
|
||
treeInput: null, // 树查询绑定值
|
||
treeData: [],
|
||
treeLoading: false,
|
||
defaultExpandAll: false, // 左侧树默认展开所有
|
||
currentTreeNode: null, // 当前选中的树节点
|
||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||
columns: [
|
||
{
|
||
title: this.$t('system.internalWorkGroup.name'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'realname',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('system.internalWorkGroup.workNo'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'username',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('system.internalWorkGroup.role'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'userRoleName',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('system.internalWorkGroup.post'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'userPostName',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('operation'),
|
||
scopedSlots: { customRender: 'action' },
|
||
align: 'center',
|
||
fixed: 'right',
|
||
width: 170
|
||
}
|
||
],
|
||
labelCol: {
|
||
span: 4
|
||
},
|
||
wrapperCol: {
|
||
span: 18
|
||
},
|
||
importData: {},
|
||
url: {
|
||
treeNodeDelete: '/sys/lawsWorkingGroup/delete',
|
||
list: '/sys/lawsWorkingGroupUser/page',
|
||
importExcelUrl: '/sys/lawsWorkingGroupUser/importExcel',
|
||
exportXlsUrl: '/sys/lawsWorkingGroupUser/export',
|
||
delete: '/sys/lawsWorkingGroupUser/delete',
|
||
downTemplateUrl: '/sys/lawsWorkingGroupUser/download/template'
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initTreeData()
|
||
},
|
||
methods: {
|
||
// 获取左侧树数据
|
||
initTreeData (params) {
|
||
this.treeLoading = true
|
||
getWorkGroupTreeList(params).then(res => {
|
||
if (res.success) {
|
||
this.treeData = this.dealTreeData(res.result)
|
||
this.treeData[0].scopedSlots = { title: 'customNoDelete' }
|
||
} else {
|
||
this.treeData = []
|
||
}
|
||
}).finally(() => {
|
||
this.$nextTick(() => {
|
||
this.defaultExpandAll = true
|
||
})
|
||
this.treeLoading = false
|
||
})
|
||
},
|
||
// 处理左侧树数据结构
|
||
dealTreeData (treeData) {
|
||
return treeData.map(item => {
|
||
if (item.subset && item.subset.length > 0) {
|
||
item.scopedSlots = { title: 'custom' }
|
||
item.subset = this.dealTreeData(item.subset)
|
||
}
|
||
return item
|
||
})
|
||
},
|
||
// 左侧树搜索框搜索
|
||
handleTreeSearch () {
|
||
this.treeData = []
|
||
this.initTreeData({ name: this.treeInput })
|
||
},
|
||
// 左侧树鼠标移入
|
||
handleTreeMouseover (key) {
|
||
this.mouseInNodeKey = key
|
||
},
|
||
// 左侧树鼠标移出
|
||
handleTreeMouseout (key) {
|
||
if (this.mouseInNodeKey === key) {
|
||
this.mouseInNodeKey = null
|
||
}
|
||
},
|
||
// 左侧树点击新增
|
||
handleTreeAdd () {
|
||
this.$refs.treeNodeModal.title = this.$t('newlyAdded')
|
||
this.$refs.treeNodeModal.add(this.mouseInNodeKey)
|
||
},
|
||
// 左侧树点击编辑
|
||
handleTreeEdit (name) {
|
||
this.$refs.treeNodeModal.title = this.$t('edit')
|
||
this.$refs.treeNodeModal.edit(this.mouseInNodeKey, name)
|
||
},
|
||
// 左侧树点击删除
|
||
handleTreeDelete () {
|
||
const param = {}
|
||
param.id = this.mouseInNodeKey
|
||
this.$confirm({
|
||
title: this.$t('confirmDeletion'),
|
||
content: this.$t('confirmDeleteNodes'),
|
||
onOk: () => {
|
||
postAction(this.url.treeNodeDelete, param).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.initTreeData()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 左侧树节点新增或编辑完成
|
||
treeNodeModalOk () {
|
||
this.initTreeData()
|
||
},
|
||
// 左侧树点击选中
|
||
treeSelect (selectedKeys) {
|
||
this.currentTreeNode = selectedKeys
|
||
this.queryParam.workingGroupId = selectedKeys[0]
|
||
this.loadData()
|
||
},
|
||
// 右侧新增
|
||
handleAdd () {
|
||
console.log(this.currentTreeNode)
|
||
if (!this.currentTreeNode || this.currentTreeNode.length <= 0) {
|
||
this.$message.warning(this.$t('system.internalWorkGroup.pleaseSelectASystem'))
|
||
return
|
||
}
|
||
this.$refs.modalForm.add(this.currentTreeNode[0])
|
||
this.$refs.modalForm.title = this.$t('newlyAdded')
|
||
},
|
||
// 清空
|
||
searchReset () {
|
||
this.queryParam = {}
|
||
this.currentTreeNode = null
|
||
this.initTreeData()
|
||
this.loadData(1)
|
||
},
|
||
// 导入，必须选中左侧节点
|
||
handleImport (e) {
|
||
if (!this.currentTreeNode || this.currentTreeNode.length <= 0) {
|
||
this.$message.warning(this.$t('system.internalWorkGroup.pleaseSelectASystem'))
|
||
e.stopPropagation()
|
||
} else {
|
||
this.importData = { workingGroupId: this.currentTreeNode[0] }
|
||
}
|
||
},
|
||
// 导出左侧必选
|
||
handleExportXls (fileName) {
|
||
if (!this.currentTreeNode || this.currentTreeNode.length <= 0) {
|
||
this.$message.warning(this.$t('system.internalWorkGroup.pleaseSelectASystem'))
|
||
return
|
||
}
|
||
if (!fileName || typeof fileName !== 'string') {
|
||
fileName = '导出文件'
|
||
}
|
||
const param = this.getQueryParams()
|
||
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
|
||
param.selections = this.selectedRowKeys.join(',')
|
||
}
|
||
param.workingGroupId = this.currentTreeNode[0]
|
||
console.log('导出参数', param)
|
||
// 加一个大的提示
|
||
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, param).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 + '.xlsx')
|
||
} 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 + '.xlsx')
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link) // 下载完成移除元素
|
||
window.URL.revokeObjectURL(url) // 释放掉blob对象
|
||
}
|
||
}).finally(() => {
|
||
// 销毁这个提示
|
||
modalLoading.destroy()
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
/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>
|