417 lines
14 KiB
Vue
417 lines
14 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('standardRegulationLibrary.foreignStandard.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">
|
||
<template #title="record">
|
||
<div class="tree-operate-node"
|
||
:class="{'tree-operate-node-selected': selectedTreeKeys.includes(record.id)}"
|
||
@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.folderName }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.folderName }}</span>
|
||
</a-tooltip>
|
||
<div class="tree-operate-node-btn-box"
|
||
:class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}"
|
||
v-if="hasManagePermission(record)">
|
||
<!--新增同级-->
|
||
<a-button icon="plus"
|
||
:title="$t('standardRegulationLibrary.profileCenter.addAPeer')"
|
||
class="tree-operate-node-btn"
|
||
@click.stop="handleAddPeerFolder(record)"
|
||
v-has="'profileCenter:addPeer'" />
|
||
<!--新增子级-->
|
||
<a-button class="tree-operate-node-btn"
|
||
:title="$t('standardRegulationLibrary.profileCenter.newChild')"
|
||
@click.stop="handleAddChildrenFolder(record)"
|
||
v-has="'profileCenter:addChildren'">
|
||
<i class="iconfont icon-wenjian-tianjia" />
|
||
</a-button>
|
||
<!--编辑-->
|
||
<a-button class="tree-operate-node-btn"
|
||
:title="$t('edit')"
|
||
@click.stop="handleEditTreeNode(record)"
|
||
v-has="'profileCenter:editFolder'">
|
||
<i class="iconfont icon-bianji" />
|
||
</a-button>
|
||
<!--删除，根节点不能删除-->
|
||
<a-button v-if="record.defaultFolder !== '1'"
|
||
class="tree-operate-node-btn"
|
||
:title="$t('delete')"
|
||
@click.stop="handleDelTreeNode(record)"
|
||
v-has="'profileCenter:deleteFolder'">
|
||
<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">
|
||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||
<a-row :gutter="24">
|
||
<!--文件名称-->
|
||
<a-col :md="6" :sm="12">
|
||
<a-form-item :label="$t('fileName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('fileName')" v-model="queryParam.fileName"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!--上传人-->
|
||
<a-col :md="6" :sm="12">
|
||
<a-form-item :label="$t('uploadedBy')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('uploadedBy')" v-model="queryParam.uploader"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<!--上传时间-->
|
||
<a-col :md="6" :sm="12">
|
||
<a-form-item :label="$t('uploadTime')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-range-picker
|
||
:placeholder="[$t('pleaseSelectTime'), $t('pleaseSelectTime')]"
|
||
style="width: 100%"
|
||
showTime
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
v-model="queryParam.uploadTime">
|
||
</a-range-picker>
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :md="6" :sm="8">
|
||
<div style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||
<a-button type="primary"
|
||
@click="searchQuery"
|
||
icon="search"
|
||
style="margin-left: 8px"
|
||
v-has="'profileCenter:table'">
|
||
{{ $t('query') }}
|
||
</a-button>
|
||
<a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div class="table-operator">
|
||
<!-- 新增-->
|
||
<a-button icon="plus" type="primary" @click="handleAdd" v-has="'profileCenter:table'">{{ $t('newlyAdded') }}</a-button>
|
||
<!-- 批量删除-->
|
||
<a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'profileCenter:table'">
|
||
{{ $t('batchDelete') }}
|
||
</a-button>
|
||
</div>
|
||
<div>
|
||
<j-table
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:can-drag="true"
|
||
rowKey="id"
|
||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||
:pagination="ipagination"
|
||
:scroll="{x: '100%', y: yScrollHeight}"
|
||
:loading="loading"
|
||
:operation-list="operationList"
|
||
@change="handleTableChange"
|
||
@operationClick="operationClick">
|
||
|
||
</j-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!--表格数据新增、编辑-->
|
||
<profile-center-modal ref="modalForm" @ok="modalFormOk" />
|
||
<!--树节点新增、编辑-->
|
||
<profile-center-tree-modal ref="treeModal" @ok="modalFormOk" />
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import JTable from '../../../components/jero/JTable.vue'
|
||
import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
|
||
import { deleteProfileCenterTree, getProfileCenterTree } from '../../../api/standardRegulationLibraryApi.js'
|
||
import ProfileCenterModal from './modules/ProfileCenterModal.vue'
|
||
import ProfileCenterTreeModal from './modules/ProfileCenterTreeModal.vue'
|
||
import { filterObj } from '../../../utils/util'
|
||
import { downloadFile } from '../../../api/manage'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
name: 'ProfileCenterList',
|
||
components: { JTable, ProfileCenterModal, ProfileCenterTreeModal },
|
||
mixins: [JeroListMixin],
|
||
data () {
|
||
return {
|
||
treeInput: null, // 树查询绑定值
|
||
treeData: [],
|
||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||
columns: [
|
||
// 文件名称
|
||
{
|
||
dataIndex: 'fileName',
|
||
title: this.$t('fileName'),
|
||
width: 150
|
||
},
|
||
// 文件说明
|
||
{
|
||
dataIndex: 'fileDescription',
|
||
title: this.$t('fileDeclaration'),
|
||
width: 150
|
||
},
|
||
// 上传人
|
||
{
|
||
dataIndex: 'uploader',
|
||
title: this.$t('uploadedBy'),
|
||
width: 150
|
||
},
|
||
// 上传时间
|
||
{
|
||
dataIndex: 'createTime',
|
||
title: this.$t('uploadTime'),
|
||
width: 150
|
||
},
|
||
// 操作
|
||
{
|
||
title: this.$t('operation'),
|
||
fixed: 'right',
|
||
width: 150,
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
],
|
||
operationList: [
|
||
// 下载
|
||
{
|
||
text: this.$t('download'),
|
||
clickEvent: 'handleDownload',
|
||
has: 'profileCenter:table',
|
||
show: (record) => {
|
||
return record.authDownloadTag
|
||
}
|
||
},
|
||
// 编辑
|
||
{
|
||
text: this.$t('edit'),
|
||
clickEvent: 'handleEdit',
|
||
has: 'profileCenter:table',
|
||
show: (record) => {
|
||
return record.authManageTag
|
||
}
|
||
},
|
||
// 删除
|
||
{
|
||
text: this.$t('delete'),
|
||
clickEvent: 'handleDelete',
|
||
has: 'profileCenter:table',
|
||
show: (record) => {
|
||
return record.authManageTag
|
||
}
|
||
}
|
||
],
|
||
url: {
|
||
list: '/laws/dataCenter/lawsDataCenterFile/page',
|
||
delete: '/laws/dataCenter/lawsDataCenterFile/delete',
|
||
deleteBatch: '/laws/dataCenter/lawsDataCenterFile/deleteBatch'
|
||
},
|
||
selectedTreeKeys: [], // 选中的树节点key
|
||
treeLoading: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
created () {
|
||
this.initTreeData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取树数据
|
||
*/
|
||
initTreeData () {
|
||
this.treeLoading = true
|
||
const params = {
|
||
folderName: this.treeInput
|
||
}
|
||
if (!params.folderName) {
|
||
delete params.folderName
|
||
}
|
||
getProfileCenterTree(params).then(res => {
|
||
this.treeData = []
|
||
this.selectedTreeKeys = []
|
||
this.selectedTreeNodeCodes = []
|
||
this.filters.nodeCode = null
|
||
if (res.success) {
|
||
this.treeData = res.result || []
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.treeLoading = false
|
||
})
|
||
},
|
||
handleAdd: function () {
|
||
if (!this.selectedTreeKeys||this.selectedTreeKeys.length === 0) {
|
||
this.$message.warning(this.$t('standardRegulationLibrary.profileCenter.pleaseSelectTheDirectoryOnTheLeft'))
|
||
return
|
||
}
|
||
const folderId = this.selectedTreeKeys && this.selectedTreeKeys.length > 0 ? this.selectedTreeKeys.join(',') : null
|
||
this.$refs.modalForm.add({ folderId })
|
||
this.$refs.modalForm.title = this.$t('newlyAdded')
|
||
this.$refs.modalForm.disableSubmit = false
|
||
},
|
||
/**
|
||
* 树节点查询
|
||
*/
|
||
handleTreeSearch () {
|
||
this.initTreeData()
|
||
},
|
||
/**
|
||
* 树节点鼠标移入
|
||
* @param key
|
||
*/
|
||
handleTreeMouseover (key) {
|
||
this.mouseInNodeKey = key
|
||
},
|
||
/**
|
||
* 树节点鼠标移出
|
||
* @param key
|
||
*/
|
||
handleTreeMouseout (key) {
|
||
if (this.mouseInNodeKey === key) {
|
||
this.mouseInNodeKey = null
|
||
}
|
||
},
|
||
/**
|
||
* 选中树节点
|
||
* @param dataRef
|
||
*/
|
||
handleSelectTreeNode ({ dataRef }) {
|
||
this.selectedTreeKeys = [dataRef.id]
|
||
this.loadData(1)
|
||
},
|
||
modalFormOk () {
|
||
this.selectedTreeKeys = []
|
||
this.initTreeData()
|
||
// 新增/修改 成功时，重载列表
|
||
this.loadData()
|
||
// 清空列表选中
|
||
this.onClearSelected()
|
||
},
|
||
/**
|
||
* 新增同级节点
|
||
* @param dataRef
|
||
*/
|
||
handleAddPeerFolder ({ dataRef }) {
|
||
this.$refs.treeModal.title = this.$t('newlyAdded')
|
||
this.$refs.treeModal.add({ parentId: dataRef.parentId }, true)
|
||
},
|
||
/**
|
||
* 新增子节点
|
||
* @param dataRef
|
||
*/
|
||
handleAddChildrenFolder ({ dataRef }) {
|
||
this.$refs.treeModal.title = this.$t('newlyAdded')
|
||
this.$refs.treeModal.add({ parentId: dataRef.id }, false)
|
||
},
|
||
/**
|
||
* 编辑树节点
|
||
* @param dataRef
|
||
*/
|
||
handleEditTreeNode ({ dataRef }) {
|
||
this.$refs.treeModal.title = this.$t('edit')
|
||
this.$refs.treeModal.edit(dataRef)
|
||
},
|
||
/**
|
||
* 删除树节点
|
||
* @param dataRef
|
||
*/
|
||
handleDelTreeNode ({ dataRef }) {
|
||
this.$confirm({
|
||
title: this.$t('confirmDeletion'),
|
||
content: this.$t('areYouSure'),
|
||
onOk: () => {
|
||
deleteProfileCenterTree({ id: dataRef.id }).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.modalFormOk()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 重置查询
|
||
*/
|
||
searchReset () {
|
||
this.queryParam = {}
|
||
this.selectedTreeKeys = []
|
||
this.loadData(1)
|
||
},
|
||
getQueryParams () {
|
||
// 获取查询条件
|
||
const sqp = {}
|
||
if (this.superQueryParams) {
|
||
sqp.superQueryParams = encodeURI(this.superQueryParams)
|
||
sqp.superQueryMatchType = this.superQueryMatchType
|
||
}
|
||
const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
||
param.field = this.getQueryField()
|
||
param.pageNo = this.ipagination.current
|
||
param.pageSize = this.ipagination.pageSize
|
||
param.folderId = this.selectedTreeKeys.join(',')
|
||
Object.keys(param).forEach(val => {
|
||
if (param[val] instanceof Array) {
|
||
param[val] = param[val].join(',')
|
||
}
|
||
})
|
||
return filterObj(param)
|
||
},
|
||
handleDownload ({ id, fileName }) {
|
||
downloadFile(`/laws/dataCenter/lawsDataCenterFile/download?id=${id}`, fileName)
|
||
},
|
||
hasManagePermission ({ authManageIds, ownerId }) {
|
||
const adminRoleList = window._CONFIG.adminRoleCode.split(',')
|
||
const userRoleList = this.userInfo.roleCode.split(',')
|
||
const isAdmin = userRoleList.some(tt => adminRoleList.includes(tt))
|
||
if (isAdmin) {
|
||
return true
|
||
}
|
||
const authManageArr = (authManageIds || '').split(',')
|
||
if (authManageArr.includes(this.userInfo.id) || ownerId === this.userInfo.id) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.tree-operate-node-selected {
|
||
//background-color: #ffd9d1 !important;
|
||
}
|
||
|
||
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
|
||
min-width: 60px;
|
||
}
|
||
</style>
|