Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,413 @@
|
||||
<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.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">
|
||||
<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'
|
||||
},
|
||||
// 编辑
|
||||
{
|
||||
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>
|
||||
Reference in New Issue
Block a user