333 lines
10 KiB
Vue
333 lines
10 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
|
||
<!-- 操作按钮区域 -->
|
||
<div class="table-operator">
|
||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||
<a-button type="primary" icon="download" @click="handleExportXls('分类字典')">导出</a-button>
|
||
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
||
<a-button type="primary" icon="import">导入</a-button>
|
||
</a-upload>
|
||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||
<a-menu slot="overlay">
|
||
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
|
||
</a-menu>
|
||
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
|
||
</a-dropdown>
|
||
</div>
|
||
|
||
<!-- table区域-begin -->
|
||
<div>
|
||
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="ipagination"
|
||
:loading="loading"
|
||
:expandedRowKeys="expandedRowKeys"
|
||
@change="handleTableChange"
|
||
@expand="handleExpand"
|
||
v-bind="tableProps">
|
||
|
||
<span slot="action" slot-scope="text, record">
|
||
<a @click="handleEdit(record)">编辑</a>
|
||
<a-divider type="vertical" />
|
||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
|
||
<a>删除</a>
|
||
</a-popconfirm>
|
||
<a-divider type="vertical" />
|
||
<a @click="handleAddSub(record)">添加下级</a>
|
||
</span>
|
||
|
||
</a-table>
|
||
</div>
|
||
|
||
<sysCategory-modal ref="modalForm" @ok="modalFormOk"></sysCategory-modal>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { getAction, postAction } from '@/api/manage'
|
||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||
import SysCategoryModal from './modules/SysCategoryModal'
|
||
|
||
export default {
|
||
name: 'SysCategoryList',
|
||
mixins: [JeroListMixin],
|
||
components: {
|
||
SysCategoryModal
|
||
},
|
||
data () {
|
||
return {
|
||
description: '分类字典管理页面',
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: '分类名称',
|
||
align: 'left',
|
||
dataIndex: 'name'
|
||
},
|
||
{
|
||
title: '分类编码',
|
||
align: 'left',
|
||
dataIndex: 'code'
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
],
|
||
url: {
|
||
list: '/sys/category/rootList',
|
||
childList: '/sys/category/childList',
|
||
getChildListBatch: '/sys/category/getChildListBatch',
|
||
delete: '/sys/category/delete',
|
||
deleteBatch: '/sys/category/deleteBatch',
|
||
exportXlsUrl: '/sys/category/exportXls',
|
||
importExcelUrl: 'sys/category/importExcel'
|
||
},
|
||
expandedRowKeys: [],
|
||
hasChildrenField: 'hasChild',
|
||
pidField: 'pid',
|
||
dictOptions: {
|
||
},
|
||
subExpandedKeys: []
|
||
}
|
||
},
|
||
computed: {
|
||
importExcelUrl () {
|
||
return `${window._CONFIG.domianURL}/${this.url.importExcelUrl}`
|
||
},
|
||
tableProps () {
|
||
const _this = this
|
||
return {
|
||
// 列表项是否可选择
|
||
rowSelection: {
|
||
selectedRowKeys: _this.selectedRowKeys,
|
||
onChange: (selectedRowKeys) => (_this.selectedRowKeys = selectedRowKeys)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
loadData (arg) {
|
||
if (arg === 1) {
|
||
this.ipagination.current = 1
|
||
}
|
||
this.loading = true
|
||
const params = this.getQueryParams()
|
||
return new Promise(() => {
|
||
getAction(this.url.list, params).then(res => {
|
||
if (res.success) {
|
||
const result = res.result
|
||
if (Number(result.total) > 0) {
|
||
this.ipagination.total = Number(result.total)
|
||
this.dataSource = this.getDataByResult(res.result.records)
|
||
// update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||
return this.loadDataByExpandedRows(this.dataSource)
|
||
// update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||
} else {
|
||
this.ipagination.total = 0
|
||
this.dataSource = []
|
||
}
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
getDataByResult (result) {
|
||
if (result && result.length > 0) {
|
||
return result.map(item => {
|
||
// 判断是否标记了带有子节点
|
||
if ((item[this.hasChildrenField] + '') === '1') {
|
||
const loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true }
|
||
item.children = [loadChild]
|
||
}
|
||
return item
|
||
})
|
||
}
|
||
},
|
||
handleExpand (expanded, record) {
|
||
// 判断是否是展开状态
|
||
if (expanded) {
|
||
this.expandedRowKeys.push(record.id)
|
||
if (record.children.length > 0 && record.children[0].isLoading === true) {
|
||
const params = this.getQueryParams()// 查询条件
|
||
params[this.pidField] = record.id
|
||
getAction(this.url.childList, params).then((res) => {
|
||
if (res.success) {
|
||
if (res.result && res.result.length > 0) {
|
||
record.children = this.getDataByResult(res.result)
|
||
this.dataSource = [...this.dataSource]
|
||
} else {
|
||
record.children = ''
|
||
record.hasChildrenField = '0'
|
||
}
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
const keyIndex = this.expandedRowKeys.indexOf(record.id)
|
||
if (keyIndex >= 0) {
|
||
this.expandedRowKeys.splice(keyIndex, 1)
|
||
}
|
||
}
|
||
},
|
||
initDictConfig () {
|
||
},
|
||
modalFormOk (formData, arr) {
|
||
if (!formData.id) {
|
||
this.addOk(formData, arr)
|
||
} else {
|
||
this.editOk(formData, this.dataSource)
|
||
this.dataSource = [...this.dataSource]
|
||
}
|
||
},
|
||
editOk (formData, arr) {
|
||
if (arr && arr.length > 0) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (arr[i].id === formData.id) {
|
||
arr[i] = formData
|
||
break
|
||
} else {
|
||
this.editOk(formData, arr[i].children)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async addOk (formData, arr) {
|
||
if (!formData[this.pidField]) {
|
||
this.loadData()
|
||
} else {
|
||
this.expandedRowKeys = []
|
||
console.log('22222', arr)
|
||
for (const i of arr) {
|
||
await this.expandTreeNode(i)
|
||
}
|
||
}
|
||
},
|
||
expandTreeNode (nodeId) {
|
||
return new Promise((resolve, reject) => {
|
||
this.getFormDataById(nodeId, this.dataSource)
|
||
const row = this.parentFormData
|
||
this.expandedRowKeys.push(nodeId)
|
||
const params = this.getQueryParams()// 查询条件
|
||
params[this.pidField] = nodeId
|
||
getAction(this.url.childList, params).then((res) => {
|
||
console.log('11111', res)
|
||
if (res.success) {
|
||
if (res.result && res.result.length > 0) {
|
||
row.children = this.getDataByResult(res.result)
|
||
this.dataSource = [...this.dataSource]
|
||
resolve()
|
||
} else {
|
||
row.children = ''
|
||
row.hasChildrenField = '0'
|
||
reject()
|
||
}
|
||
} else {
|
||
reject()
|
||
}
|
||
})
|
||
})
|
||
},
|
||
getFormDataById (id, arr) {
|
||
if (arr && arr.length > 0) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (arr[i].id === id) {
|
||
this.parentFormData = arr[i]
|
||
} else {
|
||
this.getFormDataById(id, arr[i].children)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
handleAddSub (record) {
|
||
this.subExpandedKeys = []
|
||
this.getExpandKeysByPid(record.id, this.dataSource, this.dataSource)
|
||
this.$refs.modalForm.subExpandedKeys = this.subExpandedKeys
|
||
this.$refs.modalForm.title = '添加子分类'
|
||
this.$refs.modalForm.edit({ pid: record.id })
|
||
this.$refs.modalForm.disableSubmit = false
|
||
},
|
||
handleDelete: function (record) {
|
||
const that = this
|
||
postAction(that.url.delete, { id: record.id }).then((res) => {
|
||
if (res.success) {
|
||
// update--begin--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||
that.loadData()
|
||
// update--end--autor:lvdandan-----date:20201204------for：JT-31 删除成功后默认展开已展开信息
|
||
} else {
|
||
that.$message.warning(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 添加子分类时获取所有父级id
|
||
getExpandKeysByPid (pid, arr, all) {
|
||
if (pid && arr && arr.length > 0) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (arr[i].id === pid) {
|
||
this.subExpandedKeys.push(arr[i].id)
|
||
this.getExpandKeysByPid(arr[i].pid, all, all)
|
||
} else {
|
||
this.getExpandKeysByPid(pid, arr[i].children, all)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
|
||
loadDataByExpandedRows (dataList) {
|
||
if (this.expandedRowKeys.length > 0) {
|
||
return getAction(this.url.getChildListBatch, { parentIds: this.expandedRowKeys.join(',') }).then(res => {
|
||
if (res.success && res.result.records.length > 0) {
|
||
// 已展开的数据批量子节点
|
||
const records = res.result.records
|
||
const listMap = new Map()
|
||
for (const item of records) {
|
||
const pid = item[this.pidField]
|
||
if (this.expandedRowKeys.join(',').includes(pid)) {
|
||
let mapList = listMap.get(pid)
|
||
if (mapList == null) {
|
||
mapList = []
|
||
}
|
||
mapList.push(item)
|
||
listMap.set(pid, mapList)
|
||
}
|
||
}
|
||
const childrenMap = listMap
|
||
const fn = (list) => {
|
||
if (list) {
|
||
list.forEach(data => {
|
||
if (this.expandedRowKeys.includes(data.id)) {
|
||
data.children = this.getDataByResult(childrenMap.get(data.id))
|
||
fn(data.children)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
fn(dataList)
|
||
}
|
||
})
|
||
} else {
|
||
return Promise.resolve()
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
@import '~@assets/less/common.less';
|
||
</style>
|