/* eslint-disable */
|
<template>
|
<a-row :gutter="24">
|
<a-col :md="5" :sm="24" style="padding: 0 0 0 0;">
|
<a-card :bordered="true">
|
<a-table
|
ref="table"
|
size="middle"
|
:rowKey="(record) => record.code"
|
:pagination="false"
|
:defaultExpandAllRows="true"
|
:columns="appColumns"
|
:dataSource="appData"
|
:loading="loading"
|
showPagination="auto"
|
:row-selection="{ selectedRowKeys: selectedAppKeys, onChange: onAppSelectChange,type:'radio' }"
|
:customRow="click"
|
>
|
<!--:rowSelection="rowSelectionon"-->
|
|
<span slot="type" slot-scope="text">
|
{{ typeFilter(text) }}
|
</span>
|
|
<span slot="icon" slot-scope="text">
|
<div v-if="text != null && text != ''">
|
<a-icon :type="text"/>
|
</div>
|
</span>
|
</a-table>
|
</a-card>
|
</a-col>
|
<a-col :md="19" :sm="24">
|
<a-card :bordered="false">
|
<div class="table-operator" v-if="hasPerm('sysMenu:add')">
|
<a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单
|
</a-button>
|
</div>
|
<!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{this.selectedRowKeys.length }}</a>项
|
<a style="margin-left: 24px" @click="clearSele()">清空</a>
|
</div>-->
|
<a-table
|
ref="table"
|
size="middle"
|
:rowKey="(record) => record.id"
|
:pagination="false"
|
:defaultExpandAllRows="true"
|
:columns="columns"
|
:dataSource="data"
|
:loading="loading"
|
showPagination="auto"
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
>
|
<!--:rowSelection="rowSelectionon"-->
|
|
<span slot="type" slot-scope="text">
|
{{ typeFilter(text) }}
|
</span>
|
|
<span slot="icon" slot-scope="text">
|
<div v-if="text != null && text != ''">
|
<a-icon :type="text"/>
|
</div>
|
</span>
|
|
<span slot="action" slot-scope="text, record">
|
<template>
|
<a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
|
<a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
|
<a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？"
|
@confirm="() => handleDel(record)">
|
<a>删除</a>
|
</a-popconfirm>
|
</template>
|
</span>
|
</a-table>
|
|
<add-form ref="addForm" @ok="handleOk"/>
|
<edit-form ref="editForm" @ok="handleOk"/>
|
</a-card>
|
</a-col>
|
</a-row>
|
|
</template>
|
|
<script>
|
import { getMenuList, sysMenuDelete } from '@/api/modular/system/menuManage'
|
import addForm from './addForm'
|
import editForm from './editForm'
|
import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
|
import { getAppList } from '@/api/modular/system/appManage'
|
|
export default {
|
components: {
|
addForm,
|
editForm
|
},
|
data() {
|
return {
|
queryParam: {},
|
data: [],
|
appData: [],
|
loading: true,
|
columns: [
|
{
|
title: '菜单名称',
|
dataIndex: 'name',
|
width: '20%'
|
},
|
{
|
title: '菜单类型',
|
dataIndex: 'type',
|
scopedSlots: { customRender: 'type' }
|
},
|
{
|
title: '图标',
|
dataIndex: 'icon',
|
scopedSlots: { customRender: 'icon' }
|
},
|
{
|
title: '组件',
|
dataIndex: 'component',
|
width: '20%',
|
ellipsis: true
|
},
|
{
|
title: '路由地址',
|
dataIndex: 'router',
|
key: 'router',
|
ellipsis: true
|
},
|
{
|
title: '排序',
|
dataIndex: 'sort'
|
}
|
],
|
appColumns: [{
|
title: '应用名称',
|
dataIndex: 'name'
|
}],
|
selectedRowKeys: [],
|
selectedAppKeys: [],
|
typeDict: []
|
}
|
},
|
created() {
|
this.loadData()
|
if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
|
this.columns.push({
|
title: '操作',
|
dataIndex: 'action',
|
width: '150px',
|
scopedSlots: { customRender: 'action' }
|
})
|
}
|
},
|
|
methods: {
|
loadData() {
|
this.loading = true
|
getAppList(this.queryParam).then((res) => {
|
if (res.success) {
|
this.appData = res.data
|
this.removeEmptyChildren(this.appData)
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
this.sysDictTypeDropDown()
|
},
|
|
removeEmptyChildren(data) {
|
if (data == null || data.length === 0) return
|
for (let i = 0; i < data.length; i++) {
|
const item = data[i]
|
if (item.children != null && item.children.length === 0) {
|
item.children = null
|
} else {
|
this.removeEmptyChildren(item.children)
|
}
|
}
|
},
|
|
typeFilter(type) {
|
// eslint-disable-next-line eqeqeq
|
const values = this.typeDict.filter(item => item.code == type)
|
if (values.length > 0) {
|
return values[0].value
|
}
|
},
|
|
/**
|
* 获取字典数据
|
*/
|
sysDictTypeDropDown() {
|
sysDictTypeDropDown({ code: 'menu_type' }).then((res) => {
|
this.typeDict = res.data
|
})
|
},
|
|
refreshSele() {
|
this.onAppSelectChange(this.selectedAppKeys)
|
},
|
handleOk() {
|
this.onAppSelectChange(this.selectedAppKeys)
|
},
|
handleDel(record) {
|
sysMenuDelete(record).then((res) => {
|
if (res.success) {
|
this.$message.success('删除成功')
|
this.onAppSelectChange(this.selectedAppKeys)
|
} else {
|
this.$message.error('删除失败：' + res.message)
|
}
|
}).catch((err) => {
|
this.$message.error('错误：' + err.message)
|
})
|
},
|
|
onSelectChange(selectedRowKeys) {
|
this.selectedRowKeys = selectedRowKeys
|
},
|
onAppSelectChange(selectedRowKeys) {
|
this.selectedAppKeys = selectedRowKeys
|
if (selectedRowKeys.length > 0) {
|
this.queryParam.application = selectedRowKeys[0]
|
getMenuList(this.queryParam).then((res) => {
|
if (res.success) {
|
this.data = res.data
|
this.removeEmptyChildren(this.data)
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
},
|
click(record, index) {
|
return {
|
on: {
|
click: () => {
|
const keys = []
|
keys.push(record.code)
|
this.selectedAppKeys = keys
|
this.onAppSelectChange(this.selectedAppKeys)
|
}
|
}
|
}
|
},
|
clearSele() {
|
this.selectedRowKeys = []
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
|
.table-operator {
|
margin-bottom: 18px;
|
}
|
|
button {
|
margin-right: 8px;
|
}
|
|
</style>
|
