feat: 系统管理页面完成

This commit is contained in:
WANGFAN\wangf 2025-03-30 16:03:02 +08:00
parent 19f5884aa7
commit 7295012508
7 changed files with 336 additions and 494 deletions

View File

@ -931,7 +931,7 @@ export default [
component: "system/log/log",
meta: {
title: "log",
hide: false,
hide: true,
disable: false,
keepAlive: true,
affix: false,

View File

@ -28,7 +28,7 @@
box-sizing: border-box;
height: 100%;
padding: $padding;
overflow: auto;
overflow: hidden;
background: $color-bg-1;
}

View File

@ -1,167 +0,0 @@
<template>
<div class="snow-page">
<div class="snow-inner">
<a-space wrap>
<a-input v-model="form.name" placeholder="请输入字典名称" allow-clear />
<a-input v-model="form.code" placeholder="请输入字典值" allow-clear />
<a-select placeholder="启用状态" v-model="form.open" style="width: 120px" allow-clear>
<a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.label }}</a-option>
</a-select>
<a-button type="primary" @click="search">
<template #icon><icon-search /></template>
<span>查询</span>
</a-button>
<a-button @click="reset">
<template #icon><icon-refresh /></template>
<span>重置</span>
</a-button>
</a-space>
<a-row>
<a-space wrap>
<a-button type="primary" @click="onAdd">
<template #icon><icon-plus /></template>
<span>新增</span>
</a-button>
<a-button type="primary" status="danger" @click="onDelete">
<template #icon><icon-delete /></template>
<span>删除</span>
</a-button>
</a-space>
</a-row>
<a-table
row-key="id"
:data="dictList"
:bordered="{ cell: true }"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination"
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
:selected-keys="selectedKeys"
@select="select"
@select-all="selectAll"
>
<template #columns>
<a-table-column title="序号" :width="64">
<template #cell="cell">{{ cell.rowIndex + 1 }}</template>
</a-table-column>
<a-table-column title="字典名称" data-index="name"></a-table-column>
<a-table-column title="字典值" data-index="value"></a-table-column>
<a-table-column title="状态" :width="100" align="center">
<template #cell="{ record }">
<a-tag bordered size="small" color="arcoblue" v-if="record.status === 1">启用</a-tag>
<a-tag bordered size="small" color="red" v-else>禁用</a-tag>
</template>
</a-table-column>
<a-table-column title="描述" data-index="description" :ellipsis="true" :tooltip="true"></a-table-column>
<a-table-column title="创建时间" data-index="createTime" :width="180"></a-table-column>
<a-table-column title="操作" :width="280" align="center" :fixed="'right'">
<template #cell="{ record }">
<a-space>
<a-button type="primary" status="success" size="mini" @click="onDictData(record)">
<template #icon><icon-file /></template>
<span>字典值</span>
</a-button>
<a-button type="primary" size="mini">
<template #icon><icon-edit /></template>
<span>修改</span>
</a-button>
<a-popconfirm type="warning" content="确定删除该角色吗?">
<a-button type="primary" status="danger" size="mini">
<template #icon><icon-delete /></template>
<span>删除</span>
</a-button>
</a-popconfirm>
</a-space>
</template>
</a-table-column>
</template>
</a-table>
</div>
</div>
</template>
<script setup lang="ts">
const openState = ref([
{ value: 1, label: "是" },
{ value: 0, label: "否" }
]);
const form = ref({
name: "",
code: "",
open: null
});
const search = () => {
console.log("搜索");
};
const reset = () => {
console.log("重置");
};
const onAdd = () => {
console.log("新增");
};
const onDelete = () => {
console.log("删除");
};
const loading = ref(false);
const pagination = ref({
pageSize: 10,
showPageSize: true
});
const selectedKeys = ref([]);
const dictList = ref([
{
id: "01",
name: "性别",
value: "gender",
status: 1,
description: "这是一个性别字典",
createTime: "2024-07-01 10:00:00",
list: [
{ id: "012", name: "女", value: 0, status: 1 },
{ id: "011", name: "男", value: 1, status: 1 },
{ id: "013", name: "未知", value: 2, status: 1 }
]
},
{
id: "02",
name: "状态",
value: "status",
status: 1,
description: "想要统一状态字段可以用这个",
createTime: "2024-07-01 10:00:00",
list: [
{ id: "021", name: "禁用", value: 0, status: 1 },
{ id: "022", name: "启用", value: 1, status: 1 }
]
},
{
id: "03",
name: "岗位",
value: "post",
status: 1,
description: "岗位字段",
createTime: "2024-07-01 10:00:00",
list: [
{ id: "031", name: "总经理", value: 1, status: 1 },
{ id: "032", name: "总监", value: 2, status: 1 },
{ id: "033", name: "人事主管", value: 3, status: 1 },
{ id: "034", name: "开发部主管", value: 4, status: 1 },
{ id: "035", name: "普通职员", value: 5, status: 1 },
{ id: "036", name: "其它", value: 999, status: 1 }
]
}
]);
const select = (list: []) => {
selectedKeys.value = list;
};
const selectAll = (state: boolean) => {
selectedKeys.value = state ? (dictList.value.map(el => el.id) as []) : [];
};
const onDictData = (e: any) => {
console.log("字典数据", e);
};
</script>
<style lang="scss" scoped></style>

View File

@ -1,6 +1,6 @@
<template>
<div class="snow-fill">
<div class="snow-fill-inner">
<div class="snow-fill-inner container">
<div class="left-box">
<a-input placeholder="请输入部门名称">
<template #prefix>
@ -8,182 +8,186 @@
</template>
</a-input>
<div class="tree-box">
<a-tree :data="treeData" show-line> </a-tree>
<a-tree :field-names="fieldNames" :data="treeData" show-line> </a-tree>
</div>
</div>
<div class="right-box"></div>
<div class="right-box">
<a-space wrap>
<a-input v-model="form.name" placeholder="请输入用户名称" allow-clear />
<a-input v-model="form.code" placeholder="请输入手机号码" allow-clear />
<a-select placeholder="用户状态" v-model="form.open" style="width: 120px" allow-clear>
<a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.label }}</a-option>
</a-select>
<a-range-picker show-time format="YYYY-MM-DD HH:mm" allow-clear />
<a-button type="primary" @click="search">
<template #icon><icon-search /></template>
<span>查询</span>
</a-button>
<a-button @click="reset">
<template #icon><icon-refresh /></template>
<span>重置</span>
</a-button>
</a-space>
<a-row>
<a-space wrap>
<a-button type="primary" @click="onAdd">
<template #icon><icon-plus /></template>
<span>新增</span>
</a-button>
<a-button type="primary" status="danger" @click="onDelete">
<template #icon><icon-delete /></template>
<span>删除</span>
</a-button>
</a-space>
</a-row>
<a-table
row-key="id"
:data="dictList"
:bordered="{ cell: true }"
:loading="loading"
:scroll="{ x: '120%', y: '100%' }"
:pagination="pagination"
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
:selected-keys="selectedKeys"
@select="select"
@select-all="selectAll"
>
<template #columns>
<a-table-column title="序号" :width="64">
<template #cell="cell">{{ cell.rowIndex + 1 }}</template>
</a-table-column>
<a-table-column title="用户编号" data-index="name"></a-table-column>
<a-table-column title="用户名" data-index="name"></a-table-column>
<a-table-column title="昵称" data-index="name"></a-table-column>
<a-table-column title="部门" data-index="name"></a-table-column>
<a-table-column title="手机号" data-index="name"></a-table-column>
<a-table-column title="状态" :width="100" align="center">
<template #cell="{ record }">
<a-tag bordered size="small" color="arcoblue" v-if="record.status === 1">启用</a-tag>
<a-tag bordered size="small" color="red" v-else>禁用</a-tag>
</template>
</a-table-column>
<a-table-column title="描述" data-index="description" :ellipsis="true" :tooltip="true"></a-table-column>
<a-table-column title="创建时间" data-index="createTime" :width="180"></a-table-column>
<a-table-column title="操作" :width="280" align="center" :fixed="'right'">
<template #cell="{ record }">
<a-space>
<a-button type="primary" size="mini">
<template #icon><icon-edit /></template>
<span>修改</span>
</a-button>
<a-popconfirm type="warning" content="确定删除该角色吗?">
<a-button type="primary" status="danger" size="mini">
<template #icon><icon-delete /></template>
<span>删除</span>
</a-button>
</a-popconfirm>
<a-dropdown trigger="hover">
<a-button type="primary" status="success" size="mini">
<template #icon><icon-double-right /></template>
<span>更多</span>
</a-button>
<template #content>
<a-doption>
<template #default>
<a-button type="primary" status="success" size="mini" @click="onPrivileges(record)">
<template #icon><icon-lock /></template>
<span>重置密码</span>
</a-button>
</template>
</a-doption>
<a-doption>
<template #default>
<a-button type="primary" size="mini" @click="onUsers(record)">
<template #icon><icon-idcard /></template>
<span>分配角色</span>
</a-button>
</template>
</a-doption>
</template>
</a-dropdown>
</a-space>
</template>
</a-table-column>
</template>
</a-table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const treeData = [
{
title: "Trunk",
key: "node1",
children: [
{
title: "Leaf",
key: "node2"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
},
{
title: "Trunk",
key: "node3",
children: [
{
title: "Leaf",
key: "node4"
},
{
title: "Leaf",
key: "node5"
}
]
}
];
import { divisionData, roleData } from "@/views/system/data/index";
const treeData = ref(divisionData);
console.log("部门数据", treeData);
const fieldNames = ref({
key: "id",
title: "name",
children: "children"
});
const openState = ref([
{ value: 1, label: "是" },
{ value: 0, label: "否" }
]);
const form = ref({
name: "",
code: "",
open: null
});
const search = () => {
console.log("搜索");
};
const reset = () => {
console.log("重置");
};
const onAdd = () => {
console.log("新增");
};
const onDelete = () => {
console.log("删除");
};
const loading = ref(false);
const pagination = ref({
pageSize: 10,
showPageSize: true
});
const selectedKeys = ref([]);
const dictList = ref(roleData);
const select = (list: []) => {
selectedKeys.value = list;
};
const selectAll = (state: boolean) => {
selectedKeys.value = state ? (dictList.value.map(el => el.id) as []) : [];
};
const onPrivileges = (e: any) => {
console.log("分配权限", e);
};
const onUsers = (e: any) => {
console.log("分配账户", e);
};
</script>
<style lang="scss" scoped>
.container {
height: 100%;
// flex: 1;
// overflow: hidden;
border: 1px solid blue;
// .left-box {
// display: flex;
// flex: 1;
// flex-direction: column;
// width: 300px;
// padding: $padding;
// background: $color-bg-1;
// border: 1px solid red;
// .tree-box {
// flex: 1;
// overflow: auto;
// }
// }
// .right-box {
// width: calc(100% - 220px - $padding);
// height: 100%;
// margin-left: $padding;
// background: $color-bg-1;
// }
display: flex;
column-gap: $padding;
.left-box {
display: flex;
flex-direction: column;
width: 250px;
height: 100%;
.tree-box {
flex: 1;
margin-top: $padding;
overflow: auto;
}
}
.right-box {
flex: 1;
}
}
</style>

View File

@ -0,0 +1,159 @@
export const divisionData = [
{
id: "100",
parentId: "0",
name: "xxx机构有限公司",
leader: "兔子先森",
phone: "15888888888",
email: "2547096351@qq.com",
sort: 1,
status: 1,
description: "这是总部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 10:08:25",
children: [
{
id: "10001",
parentId: "100",
name: "研发部门",
leader: "小唐",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这里是研发部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: [
{
id: "1000101",
parentId: "10001",
name: "SnowAdmin开发组",
leader: "小汤",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这是项目研发部",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: [
{
id: "100010101",
parentId: "1000101",
name: "UI组",
leader: "晓棠",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这里负责UI设计",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
},
{
id: "100010102",
parentId: "1000101",
name: "研发组",
leader: "小塘",
phone: "",
email: "",
sort: 2,
status: 1,
description: "这里负责开发",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
}
]
},
{
id: "1000102",
parentId: "10001",
name: "人事部门",
leader: "兔子",
phone: "",
email: "",
sort: 2,
status: 1,
description: "这里是人事部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
},
{
id: "1000103",
parentId: "10001",
name: "财务部门",
leader: "小鹿",
phone: "",
email: "",
sort: 3,
status: 1,
description: "负责收账的",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
}
]
}
]
}
];
export const roleData = [
{
id: 1,
name: "超级管理员",
key: "admin",
sort: 1,
status: 1,
admin: true,
description: "默认角色,超级管理员,上帝角色",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
},
{
id: 2,
name: "系统管理员",
key: "manager",
sort: 2,
status: 1,
admin: false,
description: "主要负责管理系统",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
},
{
id: 3,
name: "操作员",
key: "common",
sort: 3,
status: 1,
admin: false,
description: "负责一些基础信息的查询",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
}
];

View File

@ -72,123 +72,8 @@
</template>
<script setup lang="ts">
const tableData = ref([
{
id: "100",
parentId: "0",
name: "xxx机构有限公司",
leader: "兔子先森",
phone: "15888888888",
email: "2547096351@qq.com",
sort: 1,
status: 1,
description: "这是总部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 10:08:25",
children: [
{
id: "10001",
parentId: "100",
name: "研发部门",
leader: "小唐",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这里是研发部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: [
{
id: "1000101",
parentId: "10001",
name: "SnowAdmin开发组",
leader: "小汤",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这是项目研发部",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: [
{
id: "100010101",
parentId: "1000101",
name: "UI组",
leader: "晓棠",
phone: "",
email: "",
sort: 1,
status: 1,
description: "这里负责UI设计",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
},
{
id: "100010102",
parentId: "1000101",
name: "研发组",
leader: "小塘",
phone: "",
email: "",
sort: 2,
status: 1,
description: "这里负责开发",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
}
]
},
{
id: "1000102",
parentId: "10001",
name: "人事部门",
leader: "兔子",
phone: "",
email: "",
sort: 2,
status: 1,
description: "这里是人事部门",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
},
{
id: "1000103",
parentId: "10001",
name: "财务部门",
leader: "小鹿",
phone: "",
email: "",
sort: 3,
status: 1,
description: "负责收账的",
createBy: "admin",
createTime: "2024-03-19 11:21:01",
updateBy: "admin",
updateTime: "2024-09-09 17:30:40",
children: null
}
]
}
]
}
]);
import { divisionData } from "@/views/system/data/index";
const tableData = ref(divisionData);
const onEdit = (row: Menu.MenuOptions) => {
console.log("修改", row);
};

View File

@ -105,6 +105,7 @@
</template>
<script setup lang="ts">
import { roleData } from "@/views/system/data/index";
const openState = ref([
{ value: 1, label: "是" },
{ value: 0, label: "否" }
@ -132,47 +133,7 @@ const pagination = ref({
showPageSize: true
});
const selectedKeys = ref([]);
const dictList = ref([
{
id: 1,
name: "超级管理员",
key: "admin",
sort: 1,
status: 1,
admin: true,
description: "默认角色,超级管理员,上帝角色",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
},
{
id: 2,
name: "系统管理员",
key: "manager",
sort: 2,
status: 1,
admin: false,
description: "主要负责管理系统",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
},
{
id: 3,
name: "操作员",
key: "common",
sort: 3,
status: 1,
admin: false,
description: "负责一些基础信息的查询",
createBy: null,
createTime: "2024-03-27 11:21:01",
updateBy: null,
updateTime: null
}
]);
const dictList = ref(roleData);
const select = (list: []) => {
selectedKeys.value = list;
};