154 lines
3.3 KiB
Vue
154 lines
3.3 KiB
Vue
<template>
|
|
<!-- 数据操作 -->
|
|
<a-space style="margin-bottom: 10px">
|
|
<a-button style="background-color: #5cc750" type="primary" class="ele-btn-icon" @click="handleAdd">
|
|
<template #icon>
|
|
<plus-outlined />
|
|
</template>
|
|
<span>新增</span>
|
|
</a-button>
|
|
</a-space>
|
|
<a-table bordered
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<a @click="handleDeal(record)">编辑</a>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<!-- 编辑权限信息 -->
|
|
<a-modal
|
|
v-model:open="open"
|
|
:title="openTitle"
|
|
@ok="handleOkModal"
|
|
@cancel="handleCancelModal"
|
|
width="800px"
|
|
:maskClosable="false"
|
|
>
|
|
<PermForm ref="formModel"></PermForm>
|
|
</a-modal>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue';
|
|
import { message } from 'ant-design-vue'
|
|
import { callUser } from '@/apis/call.js'
|
|
import PermForm from '@/views/form/permmanage/permform.vue'
|
|
|
|
const open = ref(false);
|
|
const openTitle = ref('权限信息');
|
|
const formModel = ref(null);
|
|
|
|
const columns = [
|
|
{
|
|
title: '权限编码',
|
|
dataIndex: 'code',
|
|
key: 'code',
|
|
},
|
|
{
|
|
title: '权限名称',
|
|
dataIndex: 'description',
|
|
key: 'description',
|
|
},
|
|
{
|
|
title: '级别',
|
|
dataIndex: 'level',
|
|
key: 'level',
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 200,
|
|
align: 'center'
|
|
}
|
|
];
|
|
// 表格行数据
|
|
const dataSource = ref([])
|
|
const data = ref([]);
|
|
|
|
onMounted(() => {
|
|
getData();
|
|
})
|
|
|
|
const getData = async () => {
|
|
callUser("/permissions/list", {},"get").then((res) => {
|
|
if (res.code != 200) {
|
|
message.error(res.message)
|
|
dataSource.value = []
|
|
data.value = []
|
|
return
|
|
}
|
|
data.value = res.data
|
|
data.value = data.value.map((item) => {
|
|
return { ...item, key: item.permId }
|
|
})
|
|
dataSource.value = buildTreeWithChildren(data.value)
|
|
});
|
|
}
|
|
|
|
const buildTreeWithChildren = (data) => {
|
|
const map = new Map();
|
|
const roots = [];
|
|
data.forEach(item => {
|
|
map.set(item.permId, { ...item });
|
|
});
|
|
data.forEach(item => {
|
|
const child = map.get(item.permId);
|
|
child.code = child.permCode;
|
|
if (item.parentId === null || item.parentId === undefined) {
|
|
roots.push(child);
|
|
} else {
|
|
const parent = map.get(item.parentId);
|
|
if (parent) {
|
|
parent.children = parent.children || [];
|
|
child.code = child.permCode.replace(parent.permCode + ".", '');
|
|
parent.children.push(child);
|
|
} else {
|
|
roots.push(child);
|
|
}
|
|
}
|
|
});
|
|
return roots;
|
|
}
|
|
|
|
const handleAdd = async () => {
|
|
open.value = true;
|
|
nextTick(() => {
|
|
if (formModel.value) {
|
|
formModel.value.openForm({});
|
|
} else {
|
|
console.log('formModel is not ready yet');
|
|
}
|
|
});
|
|
}
|
|
|
|
const handleDeal = async (record) => {
|
|
open.value = true;
|
|
nextTick(() => {
|
|
if (formModel.value) {
|
|
formModel.value.openForm({ ...record });
|
|
} else {
|
|
console.log('formModel is not ready yet');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 处理停车点申请modal确定
|
|
*/
|
|
const handleOkModal = () => {
|
|
formModel.value.formSave(bres => {
|
|
open.value = false;
|
|
if(bres){
|
|
getData()
|
|
}
|
|
});
|
|
}
|
|
|
|
const handleCancelModal = () => {
|
|
formModel.value.resetAll(bres => {
|
|
if(bres) open.value = false;
|
|
});
|
|
}
|
|
</script> |