sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

main
姜玉琦 2024-06-30 23:30:02 +08:00
parent 6b2d1637fa
commit 7f61b06b44
7 changed files with 1085 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/api/menu/index.ts
View File

@ -212,7 +212,7 @@ class MenuAPI {
name: "calculate",
meta: {
title: "算子管理",
icon: "user",
icon: "oper",
hidden: false,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
@ -249,7 +249,7 @@ class MenuAPI {
name: "calculateParam",
meta: {
title: "算子程序管理",
icon: "user",
icon: "oper",
hidden: false,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
@ -289,7 +289,7 @@ class MenuAPI {
name: "/dataMgr",
meta: {
title: "数据集管理",
icon: "db",
icon: "dict",
hidden: false,
roles: ["GUEST", "ADMIN", "ADMIN6"],
alwaysShow: false,
@ -301,7 +301,7 @@ class MenuAPI {
name: "datas",
meta: {
title: "数据集管理",
icon: "user",
icon: "dict",
hidden: false,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
@ -341,7 +341,7 @@ class MenuAPI {
name: "equipment",
meta: {
title: "计算设备管理",
icon: "user",
icon: "setting",
hidden: false,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
@ -402,7 +402,7 @@ class MenuAPI {
name: "otherTool",
meta: {
title: "第三方工具管理",
icon: "role",
icon: "setting",
hidden: false,
roles: ["ADMIN6", "GUEST", "ADMIN"],
keepAlive: true,
@ -453,7 +453,7 @@ class MenuAPI {
component: "system/user/index",
name: "User",
meta: {
title: "系统管理1",
title: "用户管理",
icon: "user",
hidden: false,
roles: ["ADMIN", "GUEST"],
@ -461,12 +461,24 @@ class MenuAPI {
alwaysShow: false,
},
},
{
path: "userEdit",
component: "system/user/edit",
name: "UserEdit",
meta: {
title: "用户管理编辑",
hidden: true,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "role",
component: "system/role/index",
name: "Role",
meta: {
title: "系统管理2",
title: "角色管理",
icon: "role",
hidden: false,
roles: ["ADMIN6", "GUEST", "ADMIN"],
@ -474,6 +486,43 @@ class MenuAPI {
alwaysShow: false,
},
},
{
path: "roleEdit",
component: "system/role/edit",
name: "RoleEdit",
meta: {
title: "角色管理编辑",
hidden: true,
roles: ["ADMIN6", "GUEST", "ADMIN"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "menu",
component: "system/menu/index",
name: "Menu",
meta: {
title: "菜单管理",
icon: "menu",
hidden: false,
roles: ["ADMIN6", "GUEST", "ADMIN"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "menuEdit",
component: "system/menu/edit",
name: "MenuEdit",
meta: {
title: "菜单管理编辑",
hidden: true,
roles: ["ADMIN6", "GUEST", "ADMIN"],
keepAlive: true,
alwaysShow: false,
},
},
],
},
]);

255
src/views/system/menu/edit.vue 100644
View File

@ -0,0 +1,255 @@
<!-- 用户管理 -->
<template>
<div class="app-container model-detail">
<el-card v-loading="loading">
<template #header
><svg-icon
icon-class="pause"
style="width: 20px; height: 20px"
/>菜单基本信息</template
>
<el-row>
<el-col :lg="12" :xs="24">
<el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="160px">
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select
v-model="formData.parentId"
placeholder="选择上级菜单"
:data="menuOptions"
filterable
check-strictly
:render-after-expand="false"
/>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="formData.type" @change="onMenuTypeChange">
<el-radio label="CATALOG">目录</el-radio>
<el-radio label="MENU">菜单</el-radio>
<el-radio label="BUTTON">按钮</el-radio>
<el-radio label="EXTLINK">外链</el-radio>
</el-radio-group>
</el-form-item>
<!-- v-if="
formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU
" -->
<el-form-item
label="路由路径"
prop="path"
>
<el-input
v-model="formData.path"
placeholder="system"
/>
</el-form-item>
<!-- 组件页面完整路径 -->
<el-form-item
label="页面路径"
prop="component"
>
<el-input
v-model="formData.component"
placeholder="system/user/index"
style="width: 95%"
>
<template #prepend
>src/views/</template
>
<template #append>.vue</template>
</el-input>
</el-form-item>
<el-form-item
prop="visible"
label="显示状态"
>
<el-radio-group v-model="formData.visible">
<el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="是否始终显示"
>
<template #label>
<div>
是否始终显示
<el-tooltip placement="bottom" effect="light">
<template #content>
当设置为始终显示时，即使只有一个子菜单也会显示
</template>
<i-ep-QuestionFilled class="inline-block" />
</el-tooltip>
</div>
</template>
<el-radio-group v-model="formData.alwaysShow">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否缓存">
<el-radio-group v-model="formData.keepAlive">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 100px"
controls-position="right"
:min="0"
/>
</el-form-item>
<!-- 权限标识 -->
<el-form-item
label="权限标识"
prop="perm"
>
<el-input v-model="formData.perm" placeholder="sys:user:add" />
</el-form-item>
<el-form-item
label="图标"
prop="icon"
>
<!-- 图标选择器 -->
<icon-select v-model="formData.icon" />
</el-form-item>
<el-form-item label="跳转路由">
<el-input v-model="formData.redirect" placeholder="跳转路由" />
</el-form-item>
</el-form>
</el-col>
<el-col :lg="12" :xs="24"> </el-col>
</el-row>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter();
const loading = ref(false); // 加载状态
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
const radioSelected = ref('');
// 校验规则
const rules = reactive({
username: [{ required: true, message: "不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
const list = [
{
csmc: "10.0.8.12",
csms: "DOCKER-TOOL",
csmc1: "acd0032a-6833-4348-b0fc-04798f94354c",
csmc2: "华为",
csmc3: "1.2",
csmc4: "已连接",
},
{
csmc: "192.10.71.44",
csms: "ETL",
csmc1: "ac1232a-6233-4348-b0fc-04798f94551",
csmc2: "华为",
csmc3: "1.2",
csmc4: "已连接",
},
];
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
loading.value = true;
setTimeout(() => {
ElMessage.success("保存成功");
loading.value = false;
closeBack();
}, 1000);
}, 3000);
/** 返回默认页面 */
function closeBack() {
router.replace({ path: "/system/menu" });
}
onMounted(() => {
//handleQuery();
});
</script>
<style scoped lang="scss">
.model-detail {
:deep(.el-card__header) {
padding: 8px 4px;
display: flex;
align-items: center;
}
}
.sp-file {
color: #29d;
}
.tb-base-info {
line-height: 30px;
}
:deep(.svg-icon) {
margin-right: 8px;
}
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body) {
padding: 10px;
.el-pagination {
justify-content: end;
}
}
}
</style>

321
src/views/system/menu/index.vue
View File

@ -1,42 +1,41 @@
<template>
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><template #icon><i-ep-search /></template>搜索</el-button
>
<el-button @click="resetQuery">
<template #icon><i-ep-refresh /></template>
重置</el-button
>
</el-form-item>
</el-form>
</div>
<el-card shadow="never" class="table-container">
<template #header>
<el-button
v-hasPerm="['sys:menu:add']"
type="success"
@click="openDialog(0)"
>
<template #icon><i-ep-plus /></template>
新增</el-button
>
<div class="flex justify-between">
<div>
<el-button type="primary" @click="openDialog('user-form')"
><i-ep-plus />新增菜单</el-button
>
</div>
<div>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="菜单名称" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入菜单名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<el-table
v-loading="loading"
:data="menuList"
:data="tableData"
highlight-current-row
row-key="id"
:expand-row-keys="['1']"
@ -55,9 +54,7 @@
<el-table-column label="类型" align="center" width="80">
<template #default="scope">
<el-tag
v-if="scope.row.type === MenuTypeEnum.CATALOG"
type="warning"
<el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning"
>目录</el-tag
>
<el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
@ -72,26 +69,11 @@
</template>
</el-table-column>
<el-table-column
label="路由路径"
align="left"
width="150"
prop="path"
/>
<el-table-column label="路由路径" align="left" width="150" prop="path" />
<el-table-column
label="组件路径"
align="left"
width="250"
prop="component"
/>
<el-table-column label="组件路径" align="left" width="250" prop="component" />
<el-table-column
label="权限标识"
align="center"
width="200"
prop="perm"
/>
<el-table-column label="权限标识" align="center" width="200" prop="perm" />
<el-table-column label="状态" align="center" width="80">
<template #default="scope">
@ -106,7 +88,6 @@
<template #default="scope">
<el-button
v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
v-hasPerm="['sys:menu:add']"
type="primary"
link
size="small"
@ -116,7 +97,6 @@
</el-button>
<el-button
v-hasPerm="['sys:menu:edit']"
type="primary"
link
size="small"
@ -125,7 +105,6 @@
<i-ep-edit />编辑
</el-button>
<el-button
v-hasPerm="['sys:menu:delete']"
type="primary"
link
size="small"
@ -147,12 +126,7 @@
@close="closeDialog"
top="5vh"
>
<el-form
ref="menuFormRef"
:model="formData"
:rules="rules"
label-width="160px"
>
<el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="160px">
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select
v-model="formData.parentId"
@ -177,18 +151,13 @@
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.type == 'EXTLINK'"
label="外链地址"
prop="path"
>
<el-form-item v-if="formData.type == 'EXTLINK'" label="外链地址" prop="path">
<el-input v-model="formData.path" placeholder="请输入外链完整路径" />
</el-form-item>
<el-form-item
v-if="
formData.type == MenuTypeEnum.CATALOG ||
formData.type == MenuTypeEnum.MENU
formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU
"
label="路由路径"
prop="path"
@ -215,9 +184,7 @@
<template v-if="formData.type == MenuTypeEnum.MENU" #prepend
>src/views/</template
>
<template v-if="formData.type == MenuTypeEnum.MENU" #append
>.vue</template
>
<template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
</el-input>
</el-form-item>
@ -234,8 +201,7 @@
<el-form-item
v-if="
formData.type === MenuTypeEnum.CATALOG ||
formData.type === MenuTypeEnum.MENU
formData.type === MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU
"
label="是否始终显示"
>
@ -257,10 +223,7 @@
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.type === MenuTypeEnum.MENU"
label="是否缓存"
>
<el-form-item v-if="formData.type === MenuTypeEnum.MENU" label="是否缓存">
<el-radio-group v-model="formData.keepAlive">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
@ -294,10 +257,7 @@
<icon-select v-model="formData.icon" />
</el-form-item>
<el-form-item
v-if="formData.type == MenuTypeEnum.CATALOG"
label="跳转路由"
>
<el-form-item v-if="formData.type == MenuTypeEnum.CATALOG" label="跳转路由">
<el-input v-model="formData.redirect" placeholder="跳转路由" />
</el-form-item>
</el-form>
@ -321,7 +281,7 @@ defineOptions({
import MenuAPI from "@/api/menu";
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/model";
import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
const router = useRouter();
const queryFormRef = ref(ElForm);
const menuFormRef = ref(ElForm);
@ -363,19 +323,130 @@ const menuCacheData = reactive({
path: "",
});
const tableData = [
{
id: "2014",
icon: "split",
name: "算法分割管理",
type: "MENU",
path: "/modelMgr",
component:"/modelMgr/index",
perm: "system:deployment:list",
visible: 1,
sort: 1,
children: [
{
id: "20141",
name: "算法分割管理查询",
type: "BUTTON",
perm: "system:deployment:query",
visible: 1,
sort: 2,
},
{
id: "20142",
name: "算法分割管理新增",
type: "BUTTON",
perm: "system:deployment:add",
visible: 1,
sort: 2,
},
{
id: "20143",
name: "算法分割管理修改",
type: "BUTTON",
perm: "system:deployment:edit",
visible: 1,
sort: 3,
},
{
id: "20144",
name: "算法分割管理删除",
type: "BUTTON",
perm: "system:deployment:remove",
visible: 1,
sort: 4,
},
{
id: "20145",
name: "算法分割管理导出",
type: "BUTTON",
perm: "system:deployment:export",
visible: 1,
sort: 5,
},
],
},
{
id: "2015",
icon: "web",
name: "互联协议管理",
type: "MENU",
path: "/modelMgr",
component:"/modelMgr/index",
perm: "system:deployment:list",
visible: 1,
sort: 2,
children: [
{
id: "20151",
name: "互联协议管理查询",
type: "BUTTON",
perm: "system:deployment:query",
visible: 1,
sort: 2,
},
{
id: "20152",
name: "互联协议管理新增",
type: "BUTTON",
perm: "system:deployment:add",
visible: 1,
sort: 2,
},
{
id: "20153",
name: "互联协议管理修改",
type: "BUTTON",
perm: "system:deployment:edit",
visible: 1,
sort: 3,
},
{
id: "20154",
name: "互联协议管理删除",
type: "BUTTON",
perm: "system:deployment:remove",
visible: 1,
sort: 4,
},
{
id: "20155",
name: "互联协议管理导出",
type: "BUTTON",
perm: "system:deployment:export",
visible: 1,
sort: 5,
},
],
}
];
/**
* 查询
*/
function handleQuery() {
// 重置父组件
loading.value = true;
MenuAPI.getList(queryParams)
.then((data) => {
menuList.value = data;
})
.then(() => {
loading.value = false;
});
ElMessage.success("查询成功");
loading.value = false;
// MenuAPI.getList(queryParams)
// .then((data) => {
// menuList.value = data;
// })
// .then(() => {
// loading.value = false;
// });
}
/** 重置查询 */
@ -396,24 +467,25 @@ function onRowClick(row: MenuVO) {
* @param menuId 菜单ID
*/
function openDialog(parentId?: number, menuId?: number) {
MenuAPI.getOptions()
.then((data) => {
menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
})
.then(() => {
dialog.visible = true;
if (menuId) {
dialog.title = "编辑菜单";
MenuAPI.getFormData(menuId).then((data) => {
Object.assign(formData, data);
menuCacheData.type = data.type;
menuCacheData.path = data.path ?? "";
});
} else {
dialog.title = "新增菜单";
formData.parentId = parentId;
}
});
router.replace({ path: "/system/menuEdit" });
// MenuAPI.getOptions()
// .then((data) => {
// menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
// })
// .then(() => {
// dialog.visible = true;
// if (menuId) {
// dialog.title = "编辑菜单";
// MenuAPI.getFormData(menuId).then((data) => {
// Object.assign(formData, data);
// menuCacheData.type = data.type;
// menuCacheData.path = data.path ?? "";
// });
// } else {
// dialog.title = "新增菜单";
// formData.parentId = parentId;
// }
// });
}
/** 菜单类型切换事件处理 */
@ -450,23 +522,30 @@ function submitForm() {
/** 删除菜单 */
function handleDelete(menuId: number) {
if (!menuId) {
ElMessage.warning("请勾选删除项");
return false;
}
// if (!menuId) {
// ElMessage.warning("请勾选删除项");
// return false;
// }
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
// ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// })
// .then(() => {
// MenuAPI.deleteById(menuId).then(() => {
// ElMessage.success("删除成功");
// handleQuery();
// });
// })
// .catch(() => ElMessage.info("已取消删除"));
ElMessageBox.confirm("确认删除菜单信息?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
MenuAPI.deleteById(menuId).then(() => {
ElMessage.success("删除成功");
handleQuery();
});
})
.catch(() => ElMessage.info("已取消删除"));
}).then(function () {
ElMessage.success("删除成功");
});
}
/** 关闭弹窗 */
@ -493,6 +572,6 @@ function resetForm() {
}
onMounted(() => {
handleQuery();
//handleQuery();
});
</script>

173
src/views/system/role/edit.vue 100644
View File

@ -0,0 +1,173 @@
<!-- 用户管理 -->
<template>
<div class="app-container model-detail">
<el-card v-loading="loading">
<template #header
><svg-icon
icon-class="pause"
style="width: 20px; height: 20px"
/>角色基本信息</template
>
<el-row>
<el-col :lg="12" :xs="24">
<el-form
ref="roleFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="数据权限" prop="dataScope">
<el-select v-model="formData.dataScope">
<el-option :key="0" label="全部数据" :value="0" />
<el-option :key="1" label="部门及子部门数据" :value="1" />
<el-option :key="2" label="本部门数据" :value="2" />
<el-option :key="3" label="本人数据" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
</el-form>
</el-col>
<el-col :lg="12" :xs="24"> </el-col>
</el-row>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter();
const loading = ref(false); // 加载状态
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
const radioSelected = ref('');
// 校验规则
const rules = reactive({
username: [{ required: true, message: "不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
const list = [
{
csmc: "10.0.8.12",
csms: "DOCKER-TOOL",
csmc1: "acd0032a-6833-4348-b0fc-04798f94354c",
csmc2: "华为",
csmc3: "1.2",
csmc4: "已连接",
},
{
csmc: "192.10.71.44",
csms: "ETL",
csmc1: "ac1232a-6233-4348-b0fc-04798f94551",
csmc2: "华为",
csmc3: "1.2",
csmc4: "已连接",
},
];
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
loading.value = true;
setTimeout(() => {
ElMessage.success("保存成功");
loading.value = false;
closeBack();
}, 1000);
}, 3000);
/** 返回默认页面 */
function closeBack() {
router.replace({ path: "/system/role" });
}
onMounted(() => {
//handleQuery();
});
</script>
<style scoped lang="scss">
.model-detail {
:deep(.el-card__header) {
padding: 8px 4px;
display: flex;
align-items: center;
}
}
.sp-file {
color: #29d;
}
.tb-base-info {
line-height: 30px;
}
:deep(.svg-icon) {
margin-right: 8px;
}
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body) {
padding: 10px;
.el-pagination {
justify-content: end;
}
}
}
</style>

138
src/views/system/role/index.vue
View File

@ -1,59 +1,54 @@
<template>
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.keywords"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never" class="table-container">
<template #header>
<el-button type="success" @click="openDialog()"
><i-ep-plus />新增</el-button
>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
><i-ep-delete />删除</el-button
>
<div class="flex justify-between">
<div>
<el-button type="primary" @click="openDialog('user-form')"
><i-ep-plus />新增角色</el-button
>
</div>
<div>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="角色名称" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="请输入角色名称"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
:data="tableData"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" min-width="100" />
<el-table-column label="角色编码" prop="code" width="150" />
<el-table-column label="状态" align="center" width="100">
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="状态" align="center">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="80" prop="sort" />
<el-table-column label="排序" align="center" prop="sort" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
@ -190,7 +185,7 @@ defineOptions({
name: "Role",
inheritAttrs: false,
});
const router = useRouter();
const queryFormRef = ref(ElForm);
const roleFormRef = ref(ElForm);
const menuRef = ref(ElTree);
@ -211,6 +206,30 @@ const dialog = reactive({
visible: false,
});
const tableData = [
{
id: "2014",
name: "超级管理员",
code: "superAdmin",
status: "1",
sort: 1,
},
{
id: "2015",
name: "管理员",
code: "admin",
status: "1",
sort: 2,
},
{
id: "2016",
name: "普通用户",
code: "common",
status: "1",
sort: 3,
},
];
const formData = reactive<RoleForm>({
sort: 1,
status: 1,
@ -238,14 +257,16 @@ let checkedRole: CheckedRole = reactive({});
/** 查询 */
function handleQuery() {
loading.value = true;
RoleAPI.getPage(queryParams)
.then((data) => {
roleList.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
ElMessage.success("查询成功");
loading.value = false;
// RoleAPI.getPage(queryParams)
// .then((data) => {
// roleList.value = data.list;
// total.value = data.total;
// })
// .finally(() => {
// loading.value = false;
// });
}
/** 重置查询 */
function resetQuery() {
@ -261,15 +282,16 @@ function handleSelectionChange(selection: any) {
/** 打开角色表单弹窗 */
function openDialog(roleId?: number) {
dialog.visible = true;
if (roleId) {
dialog.title = "修改角色";
RoleAPI.getFormData(roleId).then((data) => {
Object.assign(formData, data);
});
} else {
dialog.title = "新增角色";
}
router.replace({ path: "/system/roleEdit" });
// dialog.visible = true;
// if (roleId) {
// dialog.title = "修改角色";
// RoleAPI.getFormData(roleId).then((data) => {
// Object.assign(formData, data);
// });
// } else {
// dialog.title = "新增角色";
// }
}
/** 角色保存提交 */
@ -388,6 +410,6 @@ function handleRoleMenuSubmit() {
}
onMounted(() => {
handleQuery();
//handleQuery();
});
</script>

168
src/views/system/user/edit.vue 100644
View File

@ -0,0 +1,168 @@
<!-- 用户管理 -->
<template>
<div class="app-container model-detail">
<el-card v-loading="loading">
<template #header
><svg-icon
icon-class="pause"
style="width: 20px; height: 20px"
/>用户基本信息</template
>
<el-row>
<el-col :lg="12" :xs="24">
<el-form ref="userFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="用户名称" prop="username">
<el-input
v-model="formData.username"
:readonly="!!formData.id"
placeholder="请输入用户名"
/>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select v-model="formData.gender" placeholder="请选择">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="角色" prop="roleIds">
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="formData.mobile"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-col>
<el-col :lg="12" :xs="24"> </el-col>
</el-row>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
</el-card>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "User",
inheritAttrs: false,
});
import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";
const router = useRouter();
const loading = ref(false); // 加载状态
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
// 用户表单数据
const formData = reactive<UserForm>({
status: 1,
});
const radioSelected = ref("");
// 校验规则
const rules = reactive({
username: [{ required: true, message: "不能为空", trigger: "blur" }],
nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: "请输入正确的邮箱地址",
trigger: "blur",
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
});
/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
loading.value = true;
setTimeout(() => {
ElMessage.success("保存成功");
loading.value = false;
closeBack();
}, 1000);
}, 3000);
/** 返回默认页面 */
function closeBack() {
router.replace({ path: "/system/user" });
}
onMounted(() => {
//handleQuery();
});
</script>
<style scoped lang="scss">
.model-detail {
:deep(.el-card__header) {
padding: 8px 4px;
display: flex;
align-items: center;
}
}
.sp-file {
color: #29d;
}
.tb-base-info {
line-height: 30px;
}
:deep(.svg-icon) {
margin-right: 8px;
}
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body) {
padding: 10px;
.el-pagination {
justify-content: end;
}
}
}
</style>

392
src/views/system/user/index.vue
View File

@ -1,200 +1,95 @@
<!-- 用户管理 -->
<template>
<div class="app-container">
<el-row :gutter="20">
<!-- 部门树 -->
<el-col :lg="4" :xs="24" class="mb-[12px]">
<!-- <el-row :gutter="20"> -->
<!-- 部门树 -->
<!-- <el-col :lg="4" :xs="24" class="mb-[12px]">
<dept-tree v-model="queryParams.deptId" @node-click="handleQuery" />
</el-col>
</el-col> -->
<!-- 用户列表 -->
<el-col :lg="20" :xs="24">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="全部"
clearable
class="!w-[100px]"
>
<el-option label="启用" value="1" />
<el-option label="禁用" value="0" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
class="!w-[240px]"
v-model="dateTimeRange"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="截止时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
</el-form-item>
</el-form>
<!-- 用户列表 -->
<!-- <el-col :lg="20" :xs="24"> -->
<el-card shadow="never" class="table-container">
<template #header>
<div class="flex justify-between">
<div>
<el-button type="primary" @click="openDialog('user-form')"
><i-ep-plus />新增用户</el-button
>
</div>
<div>
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="用户信息" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="用户名称/手机号码"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"
><i-ep-search />搜索</el-button
>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<el-card shadow="never" class="table-container">
<template #header>
<div class="flex justify-between">
<div>
<el-button
v-hasPerm="['sys:user:add']"
type="success"
@click="openDialog('user-form')"
><i-ep-plus />新增</el-button
>
<el-button
v-hasPerm="['sys:user:delete']"
type="danger"
:disabled="removeIds.length === 0"
@click="handleDelete()"
><i-ep-delete />删除</el-button
>
</div>
<div>
<el-dropdown split-button>
导入
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="downloadTemplate">
<i-ep-download />下载模板</el-dropdown-item
>
<el-dropdown-item @click="openDialog('user-import')">
<i-ep-top />导入数据</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button class="ml-3" @click="handleExport"
><template #icon><i-ep-download /></template>导出</el-button
>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column key="id" label="编号" align="center" prop="id" width="100" />
<el-table-column key="username" label="用户名称" align="left" prop="username" />
<el-table-column label="性别" width="100" align="left" prop="genderLabel" />
<el-table-column label="手机号码" align="left" prop="mobile" width="120" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
scope.row.status == 1 ? "正常" : "禁用"
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="left" prop="createTime" width="180" />
<el-table-column label="登录时间" align="left" prop="createTime" width="180" />
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button
type="primary"
size="small"
text
@click="resetPassword(scope.row)"
><i-ep-refresh-left />重置密码</el-button
>
<el-button
type="primary"
text
size="small"
@click="openDialog('user-form', scope.row.id)"
><i-ep-edit />编辑</el-button
>
</template>
</el-table-column>
</el-table>
<el-table
v-loading="loading"
:data="pageData"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
key="id"
label="编号"
align="center"
prop="id"
width="100"
/>
<el-table-column
key="username"
label="用户名"
align="center"
prop="username"
/>
<el-table-column
label="用户昵称"
width="120"
align="center"
prop="nickname"
/>
<el-table-column
label="性别"
width="100"
align="center"
prop="genderLabel"
/>
<el-table-column
label="部门"
width="120"
align="center"
prop="deptName"
/>
<el-table-column
label="手机号码"
align="center"
prop="mobile"
width="120"
/>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
scope.row.status == 1 ? "启用" : "禁用"
}}</el-tag>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
/>
<el-table-column label="操作" fixed="right" width="220">
<template #default="scope">
<el-button
v-hasPerm="['sys:user:password:reset']"
type="primary"
size="small"
link
@click="resetPassword(scope.row)"
><i-ep-refresh-left />重置密码</el-button
>
<el-button
v-hasPerm="['sys:user:edit']"
type="primary"
link
size="small"
@click="openDialog('user-form', scope.row.id)"
><i-ep-edit />编辑</el-button
>
<el-button
v-hasPerm="['sys:user:delete']"
type="primary"
link
size="small"
@click="handleDelete(scope.row.id)"
><i-ep-delete />删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
</el-col>
</el-row>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
</el-card>
<!-- </el-col>
</el-row> -->
<!-- 弹窗 -->
<el-dialog
@ -259,11 +154,7 @@
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="formData.email"
placeholder="请输入邮箱"
maxlength="50"
/>
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
<el-form-item label="状态" prop="status">
@ -339,7 +230,7 @@ import RoleAPI from "@/api/role";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/model";
import type { UploadInstance } from "element-plus";
import { genFileId } from "element-plus";
const router = useRouter();
const queryFormRef = ref(ElForm); // 查询表单
const userFormRef = ref(ElForm); // 用户表单
const uploadRef = ref<UploadInstance>(); // 上传组件
@ -363,6 +254,27 @@ watch(dateTimeRange, (newVal) => {
}
});
const tableData = [
{
id: "2014",
username: "张三峰",
genderLabel: "男",
mobile: "181****6654",
status: "1",
createTime: "2024-05-03 12:12",
loginTime: "2024-05-03 12:12",
},
{
id: "3044",
username: "李白",
genderLabel: "男",
mobile: "135****7788",
status: "0",
createTime: "2024-05-01 01:45",
loginTime: "2024-05-03 12:12",
},
];
// 弹窗对象
const dialog = reactive({
visible: false,
@ -408,15 +320,17 @@ const rules = reactive({
/** 查询 */
function handleQuery() {
loading.value = true;
UserAPI.getPage(queryParams)
.then((data) => {
console.log("handleQuery", data);
pageData.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
ElMessage.success("查询成功");
loading.value = false;
// UserAPI.getPage(queryParams)
// .then((data) => {
// console.log("handleQuery", data);
// pageData.value = data.list;
// total.value = data.total;
// })
// .finally(() => {
// loading.value = false;
// });
}
/** 重置查询 */
@ -437,22 +351,19 @@ function handleSelectionChange(selection: any) {
/** 重置密码 */
function resetPassword(row: { [key: string]: any }) {
ElMessageBox.prompt(
"请输入用户「" + row.username + "」的新密码",
"重置密码",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
}
).then(({ value }) => {
if (!value || value.length < 6) {
// 检查密码是否为空或少于6位
ElMessage.warning("密码至少需要6位字符，请重新输入");
return false;
}
UserAPI.updatePassword(row.id, value).then(() => {
ElMessage.success("密码重置成功，新密码是：" + value);
});
ElMessageBox.prompt("请输入用户「" + row.username + "」的新密码", "重置密码", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(({ value }) => {
// if (!value || value.length < 6) {
// // 检查密码是否为空或少于6位
// ElMessage.warning("密码至少需要6位字符，请重新输入");
// return false;
// }
// UserAPI.updatePassword(row.id, value).then(() => {
// });
ElMessage.success("密码重置成功，新密码是：" + value);
});
}
@ -477,27 +388,28 @@ async function loadDeptOptions() {
* @param id 用户ID
*/
async function openDialog(type: string, id?: number) {
dialog.visible = true;
dialog.type = type;
router.replace({ path: "/system/userEdit" });
// dialog.visible = true;
// dialog.type = type;
if (dialog.type === "user-form") {
// 用户表单弹窗
await loadDeptOptions();
await loadRoleOptions();
if (id) {
dialog.title = "修改用户";
UserAPI.getFormData(id).then((data) => {
Object.assign(formData, { ...data });
});
} else {
dialog.title = "新增用户";
}
} else if (dialog.type === "user-import") {
// 用户导入弹窗
dialog.title = "导入用户";
dialog.width = 600;
loadDeptOptions();
}
// if (dialog.type === "user-form") {
// // 用户表单弹窗
// await loadDeptOptions();
// await loadRoleOptions();
// if (id) {
// dialog.title = "修改用户";
// UserAPI.getFormData(id).then((data) => {
// Object.assign(formData, { ...data });
// });
// } else {
// dialog.title = "新增用户";
// }
// } else if (dialog.type === "user-import") {
// // 用户导入弹窗
// dialog.title = "导入用户";
// dialog.width = 600;
// loadDeptOptions();
// }
}
/**
@ -647,6 +559,6 @@ function handleExport() {
}
onMounted(() => {
handleQuery();
//handleQuery();
});
</script>