mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-13 06:02:49 +00:00
402 lines
7.0 KiB
Vue
402 lines
7.0 KiB
Vue
<template>
|
|
<cl-crud ref="Crud">
|
|
<cl-row>
|
|
<!-- 刷新按钮 -->
|
|
<cl-refresh-btn />
|
|
|
|
<!-- 新增按钮 -->
|
|
<cl-add-btn />
|
|
|
|
<!-- 删除 -->
|
|
<cl-multi-delete-btn />
|
|
|
|
<!-- 自动创建菜单 -->
|
|
<auto-menu />
|
|
|
|
<cl-flex1 />
|
|
|
|
<!-- 导入 -->
|
|
<menu-imp />
|
|
|
|
<!-- 导出 -->
|
|
<menu-exp :data="Table?.data" />
|
|
</cl-row>
|
|
|
|
<cl-row>
|
|
<cl-table ref="Table" row-key="id" @row-click="onRowClick">
|
|
<!-- 图标 -->
|
|
<template #column-icon="{ scope }">
|
|
<cl-svg :name="scope.row.icon" size="16px" style="margin-top: 5px" />
|
|
</template>
|
|
|
|
<!-- 是否显示 -->
|
|
<template #column-isShow="{ scope }">
|
|
<cl-switch
|
|
v-model="scope.row.isShow"
|
|
:scope="scope.row"
|
|
:column="scope.column"
|
|
v-if="scope.row.type != 2"
|
|
/>
|
|
|
|
<span v-else></span>
|
|
</template>
|
|
|
|
<!-- 图标 -->
|
|
<template #column-keepAlive="{ scope }">
|
|
<cl-switch
|
|
v-model="scope.row.keepAlive"
|
|
:scope="scope.row"
|
|
:column="scope.column"
|
|
v-if="scope.row.type == 1"
|
|
/>
|
|
|
|
<span v-else></span>
|
|
</template>
|
|
|
|
<!-- 路由 -->
|
|
<template #column-router="{ scope }">
|
|
<el-link v-if="scope.row.type == 1" type="success" :href="scope.row.router">{{
|
|
scope.row.router
|
|
}}</el-link>
|
|
<span v-else>{{ scope.row.router }}</span>
|
|
</template>
|
|
|
|
<!-- 行新增 -->
|
|
<template #slot-add="{ scope }">
|
|
<el-button
|
|
type="success"
|
|
text
|
|
bg
|
|
v-permission="{
|
|
and: [service.base.sys.menu.permission.add, scope.row.type != 2]
|
|
}"
|
|
@click="append(scope.row)"
|
|
>新增</el-button
|
|
>
|
|
</template>
|
|
</cl-table>
|
|
</cl-row>
|
|
|
|
<!-- 新增、编辑 -->
|
|
<cl-upsert ref="Upsert">
|
|
<template #slot-parentId="{ scope }">
|
|
<cl-menu-select v-model="scope.parentId" :type="scope.type" />
|
|
</template>
|
|
|
|
<template #slot-perms="{ scope }">
|
|
<!-- 选择权限 -->
|
|
<cl-menu-perms v-model="scope.perms" />
|
|
|
|
<!-- 自动添加权限 -->
|
|
<auto-perms :menu-id="scope.parentId" @open="Upsert?.close()" @close="refresh()" />
|
|
</template>
|
|
</cl-upsert>
|
|
</cl-crud>
|
|
</template>
|
|
|
|
<script lang="ts" name="sys-menu" setup>
|
|
import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
|
|
import { useCool } from "/@/cool";
|
|
import { deepTree } from "/@/cool/utils";
|
|
import { useStore } from "/$/base/store";
|
|
import MenuImp from "./components/imp.vue";
|
|
import MenuExp from "./components/exp.vue";
|
|
import AutoMenu from "/$/helper/components/auto-menu/index.vue";
|
|
import AutoPerms from "/$/helper/components/auto-perms/index.vue";
|
|
|
|
const { service, mitt } = useCool();
|
|
const { menu } = useStore();
|
|
|
|
// cl-table
|
|
const Table = useTable({
|
|
contextMenu: [
|
|
(row) => {
|
|
return {
|
|
label: "新增",
|
|
hidden: !(row.type != 2 && service.base.sys.user._permission.add),
|
|
callback(done) {
|
|
append(row);
|
|
done();
|
|
}
|
|
};
|
|
},
|
|
"update",
|
|
"delete",
|
|
(row) => {
|
|
return {
|
|
label: "权限",
|
|
hidden: !(row.type != 2 && service.base.sys.user._permission.add),
|
|
callback(done) {
|
|
addPermission(row);
|
|
done();
|
|
}
|
|
};
|
|
}
|
|
],
|
|
columns: [
|
|
{
|
|
type: "selection"
|
|
},
|
|
{
|
|
prop: "name",
|
|
label: "名称",
|
|
align: "left",
|
|
width: 200,
|
|
fixed: "left"
|
|
},
|
|
{
|
|
prop: "isShow",
|
|
label: "是否显示",
|
|
width: 100
|
|
},
|
|
{
|
|
prop: "icon",
|
|
label: "图标",
|
|
width: 100
|
|
},
|
|
{
|
|
prop: "type",
|
|
label: "类型",
|
|
width: 100,
|
|
dict: [
|
|
{
|
|
label: "目录",
|
|
value: 0,
|
|
type: "warning"
|
|
},
|
|
{
|
|
label: "菜单",
|
|
value: 1,
|
|
type: "success"
|
|
},
|
|
{
|
|
label: "权限",
|
|
value: 2,
|
|
type: "danger"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
prop: "router",
|
|
label: "节点路由",
|
|
minWidth: 170
|
|
},
|
|
{
|
|
prop: "keepAlive",
|
|
label: "路由缓存",
|
|
width: 100
|
|
},
|
|
{
|
|
prop: "viewPath",
|
|
label: "文件路径",
|
|
minWidth: 200,
|
|
showOverflowTooltip: true
|
|
},
|
|
{
|
|
prop: "perms",
|
|
label: "权限",
|
|
headerAlign: "center",
|
|
minWidth: 300,
|
|
dict: []
|
|
},
|
|
{
|
|
prop: "orderNum",
|
|
label: "排序号",
|
|
width: 90,
|
|
fixed: "right"
|
|
},
|
|
{
|
|
prop: "updateTime",
|
|
label: "更新时间",
|
|
sortable: "custom",
|
|
width: 160
|
|
},
|
|
{
|
|
label: "操作",
|
|
type: "op",
|
|
width: 250,
|
|
buttons: ["slot-add", "edit", "delete"]
|
|
}
|
|
]
|
|
});
|
|
|
|
// cl-upsert
|
|
const Upsert = useUpsert({
|
|
dialog: {
|
|
width: "800px"
|
|
},
|
|
items: [
|
|
{
|
|
prop: "type",
|
|
value: 0,
|
|
label: "节点类型",
|
|
required: true,
|
|
component: {
|
|
name: "el-radio-group",
|
|
options: [
|
|
{
|
|
label: "目录",
|
|
value: 0
|
|
},
|
|
{
|
|
label: "菜单",
|
|
value: 1
|
|
},
|
|
{
|
|
label: "权限",
|
|
value: 2
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
prop: "name",
|
|
label: "节点名称",
|
|
component: {
|
|
name: "el-input"
|
|
},
|
|
required: true
|
|
},
|
|
{
|
|
prop: "parentId",
|
|
label: "上级节点",
|
|
hook: {
|
|
submit(value) {
|
|
return value || null;
|
|
}
|
|
},
|
|
component: {
|
|
name: "slot-parentId"
|
|
}
|
|
},
|
|
{
|
|
prop: "router",
|
|
label: "节点路由",
|
|
hidden: ({ scope }) => scope.type != 1,
|
|
component: {
|
|
name: "el-input",
|
|
props: {
|
|
placeholder: "请输入节点路由，如：/test"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
prop: "keepAlive",
|
|
value: true,
|
|
label: "路由缓存",
|
|
hidden: ({ scope }) => scope.type != 1,
|
|
component: {
|
|
name: "el-radio-group",
|
|
options: [
|
|
{
|
|
label: "开启",
|
|
value: true
|
|
},
|
|
{
|
|
label: "关闭",
|
|
value: false
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
prop: "isShow",
|
|
label: "是否显示",
|
|
value: true,
|
|
hidden: ({ scope }) => scope.type == 2,
|
|
flex: false,
|
|
component: {
|
|
name: "el-switch"
|
|
}
|
|
},
|
|
{
|
|
prop: "viewPath",
|
|
label: "文件路径",
|
|
hidden: ({ scope }) => scope.type != 1,
|
|
component: {
|
|
name: "cl-menu-file"
|
|
}
|
|
},
|
|
{
|
|
prop: "icon",
|
|
label: "节点图标",
|
|
hidden: ({ scope }) => scope.type == 2,
|
|
component: {
|
|
name: "cl-menu-icon"
|
|
}
|
|
},
|
|
{
|
|
prop: "orderNum",
|
|
label: "排序号",
|
|
component: {
|
|
name: "el-input-number",
|
|
props: {
|
|
placeholder: "请填写排序号",
|
|
min: 0,
|
|
max: 99,
|
|
"controls-position": "right"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
prop: "perms",
|
|
label: "权限",
|
|
hidden: ({ scope }) => scope.type != 2,
|
|
component: {
|
|
name: "slot-perms"
|
|
}
|
|
}
|
|
],
|
|
plugins: [setFocus("name")]
|
|
});
|
|
|
|
// cl-crud
|
|
const Crud = useCrud(
|
|
{
|
|
service: service.base.sys.menu,
|
|
onRefresh(_, { render }) {
|
|
service.base.sys.menu.list().then((list) => {
|
|
render(deepTree(list));
|
|
menu.get();
|
|
});
|
|
}
|
|
},
|
|
(app) => {
|
|
app.refresh();
|
|
}
|
|
);
|
|
|
|
// 刷新
|
|
function refresh(params?: any) {
|
|
Crud.value?.refresh(params);
|
|
}
|
|
|
|
// 行点击展开
|
|
function onRowClick(row: any, column: any) {
|
|
if (column?.property && row.children) {
|
|
Table.value?.toggleRowExpansion(row);
|
|
}
|
|
}
|
|
|
|
// 子集新增
|
|
function append({ type, id }: any) {
|
|
Crud.value?.rowAppend({
|
|
parentId: id,
|
|
parentType: type,
|
|
type: type + 1,
|
|
keepAlive: true,
|
|
isShow: true
|
|
});
|
|
}
|
|
|
|
// 设置权限
|
|
function addPermission({ id }: any) {
|
|
Crud.value?.rowAppend({
|
|
parentId: id,
|
|
type: 2
|
|
});
|
|
}
|
|
|
|
mitt.on("helper.createMenu", refresh);
|
|
</script>
|