377 lines
12 KiB
Vue
377 lines
12 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" />
|
||
<a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
|
||
<a-icon type="folder" slot="folder" class="tree-icon" />
|
||
|
||
<template #custom="record">
|
||
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(record.key)" @mouseleave="handleTreeMouseout(record.key)">
|
||
<a-tooltip>
|
||
<template #title>
|
||
{{ record.nodeName }}
|
||
</template>
|
||
<span class="tree-node-custom-title">{{ record.nodeName }}</span>
|
||
</a-tooltip>
|
||
<template v-if="record.key === mouseInNodeKey">
|
||
<!-- 新增-->
|
||
<a-button icon="plus" class="tree-operate-node-btn" @click="handleAddTreeNode(record)"></a-button>
|
||
<!-- 编辑-->
|
||
<a-button class="tree-operate-node-btn" @click="handleEditTreeNode(record)">
|
||
<i class="iconfont icon-bianji" />
|
||
</a-button>
|
||
<!-- 删除，根节点不能删除-->
|
||
<a-button class="tree-operate-node-btn" v-if="record.nodeType !== StandardSystemTreeNodeType.ROOT_NODE.value">
|
||
<i class="iconfont icon-shanchu_" />
|
||
</a-button>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</a-tree>
|
||
</div>
|
||
<!-- 表格部分-->
|
||
<div class="page-right-box">
|
||
<div class="table-page-search-wrapper">
|
||
<search ref="searchRef"
|
||
:url="url"
|
||
:get-query-condition-func="getQueryConditionFunc"
|
||
@search="searchQuery"
|
||
@reset="searchReset" />
|
||
</div>
|
||
|
||
<div class="table-operator">
|
||
<!-- 新增-->
|
||
<a-button icon="plus" type="primary" @click="handleAdd">{{ $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 icon="upload"
|
||
type="primary"
|
||
ghost
|
||
@click="handleFileExport($t('standardRegulationLibrary.domesticStandard.exportFileName'))">
|
||
{{ $t('exportWithFile') }}
|
||
</a-button>
|
||
<!-- 模板下载-->
|
||
<a-button type="primary" icon="download" ghost @click="downTemplate($t('standardRegulationLibrary.domesticStandard.templateName'))">
|
||
{{ $t('templateDownload') }}
|
||
</a-button>
|
||
<!-- 批量删除-->
|
||
<a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
|
||
<!-- 配置标准-->
|
||
<a-button type="primary" icon="setting" ghost>{{ $t('standardRegulationLibrary.configStandard') }}</a-button>
|
||
<!-- 移出标准-->
|
||
<a-button type="primary" icon="minus-circle" ghost>{{ $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:operation="{text, record}">
|
||
<!-- 收藏-->
|
||
<a @click="operationClick(operationList[0],record)">
|
||
<i class="iconfont icon-star1" v-show="record.collectionFlag === yesValue" />
|
||
<i class="iconfont icon-star" v-show="!record.collectionFlag || record.collectionFlag === noValue" />
|
||
</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)">
|
||
<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" />
|
||
</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 { getDomesticStandardTableHeader, getDomesticStandardSearchForm, shareDomesticStandard } from '../../../api/standardRegulationLibraryApi'
|
||
import { YesOrNoEnum, StandardSystemTreeNodeType } from '../../../enums/commonEnums'
|
||
import UserSelectModal from '../../../components/selection/UserSelectModal.vue'
|
||
import DomesticSystemTreeModal from './modules/DomesticSystemTreeModal.vue'
|
||
|
||
const apiTreeData = [
|
||
{
|
||
nodeName: 'parent 1',
|
||
key: '0-0',
|
||
nodeType: '1',
|
||
child: [
|
||
{
|
||
nodeName: '张晨成',
|
||
key: '0-0-0',
|
||
child: [
|
||
{ nodeName: 'leaf', key: '0-0-0-0' },
|
||
{ nodeName: 'leaf', key: '0-0-0-1' }
|
||
]
|
||
},
|
||
{
|
||
nodeName: 'parent 1-1',
|
||
key: '0-0-1',
|
||
child: [{ key: '0-0-1-0', nodeName: 'zcvc' }]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
export default {
|
||
name: 'DomesticStandardList',
|
||
components: { Search, JTable, DomesticStandardModal, UserSelectModal, DomesticSystemTreeModal },
|
||
mixins: [ConfigurableTableMixin],
|
||
data () {
|
||
return {
|
||
StandardSystemTreeNodeType,
|
||
treeInput: null, // 树查询绑定值
|
||
treeData: [],
|
||
mouseInNodeKey: null, // 鼠标悬浮的节点key值
|
||
showAction: true,
|
||
operationList: [
|
||
// 收藏
|
||
{
|
||
text: this.$t('standardRegulationLibrary.domesticStandard.cancelCollection'),
|
||
clickEvent: 'handleCollection',
|
||
has: ''
|
||
},
|
||
{
|
||
text: this.$t('edit'),
|
||
clickEvent: 'handleEdit',
|
||
has: ''
|
||
},
|
||
{
|
||
text: this.$t('share'),
|
||
clickEvent: 'handleShare',
|
||
has: ''
|
||
},
|
||
{
|
||
text: this.$t('delete'),
|
||
clickEvent: 'handleDelete',
|
||
has: ''
|
||
}
|
||
],
|
||
getTableHeaderFunc: getDomesticStandardTableHeader,
|
||
getQueryConditionFunc: getDomesticStandardSearchForm,
|
||
url: {
|
||
list: '/laws/standard/domestic/getCommonPage',
|
||
delete: '/laws/standard/domestic/deleteByIdsAndModule',
|
||
downTemplateUrl: '', // 下载模板
|
||
exportXlsUrl: '', // 导出
|
||
exportZipUrl: '', // 带文件导出
|
||
importExcelUrl: '' // 导入
|
||
},
|
||
dataSource: [{ id: 1, collectionFlag: '1' }],
|
||
yesValue: YesOrNoEnum.YES.value,
|
||
noValue: YesOrNoEnum.NO.value,
|
||
nowShareId: null // 当前正在分享的数据的id
|
||
}
|
||
},
|
||
computed: {
|
||
importExcelUrl () {
|
||
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
||
}
|
||
},
|
||
created () {
|
||
this.initTreeData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取树数据
|
||
*/
|
||
initTreeData () {
|
||
this.treeData = this.dealTreeData(apiTreeData)
|
||
},
|
||
/**
|
||
* 处理树数据，加入自定义的节点插槽
|
||
* @param treeData
|
||
* @returns {*}
|
||
*/
|
||
dealTreeData (treeData) {
|
||
return treeData.map(item => {
|
||
if (item.child && item.child.length > 0) {
|
||
item.scopedSlots = { icon: 'folder', title: 'custom' }
|
||
item.children = this.dealTreeData(item.child)
|
||
} else {
|
||
item.scopedSlots = { title: 'custom' }
|
||
}
|
||
return item
|
||
})
|
||
},
|
||
/**
|
||
* 树节点查询
|
||
*/
|
||
handleTreeSearch () {
|
||
|
||
},
|
||
/**
|
||
* 树节点鼠标移入
|
||
* @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 }) {
|
||
if (collectionFlag === this.yesValue) {
|
||
this.dataSource[0].collectionFlag = this.noValue
|
||
} else {
|
||
this.dataSource[0].collectionFlag = this.yesValue
|
||
}
|
||
},
|
||
/**
|
||
* 分享
|
||
*/
|
||
handleShare ({ id }) {
|
||
this.nowShareId = id
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
/**
|
||
* 选择分享的人之后继续分享
|
||
* @param ids
|
||
*/
|
||
continueShare (ids) {
|
||
const params = {
|
||
id: this.nowShareId, // 要分享的标准的id
|
||
userIds: 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()
|
||
},
|
||
handleAddTreeNode ({ dataRef }) {
|
||
this.$refs.treeModal.add({ parentId: dataRef.key })
|
||
},
|
||
handleEditTreeNode ({ dataRef }) {
|
||
this.$refs.treeModal.edit(dataRef)
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.tree-operate-node {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
|
||
&-btn {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgba(213, 44, 38, 0.08);
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 4px;
|
||
padding: 0;
|
||
|
||
/deep/ .anticon {
|
||
margin-top: 2px;
|
||
color: #D52C26;
|
||
}
|
||
|
||
i {
|
||
color: @primary-color;
|
||
height: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|