From fec6b110419b2b4b0d82cd8ee14fb544cd2f579d Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期二, 12 七月 2022 09:15:25 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/views/system/role/index.vue | 99 +--
src/api/user/index.ts | 37 +
src/api/role/index.ts | 25
src/views/system/department/component/deptDialog.vue | 47 -
src/views/system/user/component/userDialog.vue | 221 ++++++++
src/views/system/department/index.vue | 44 +
/dev/null | 202 -------
src/views/system/menu/index.vue | 14
src/views/system/user/index.vue | 153 +++--
src/views/system/role/component/roleDialog.vue | 150 +++++
src/api/department/index.ts | 17
src/api/menu/index.ts | 19
src/views/system/menu/component/menuDialog.vue | 518 +++++++++---------
13 files changed, 914 insertions(+), 632 deletions(-)
diff --git a/src/api/department/index.ts b/src/api/department/index.ts
index 0ed427c..3733527 100644
--- a/src/api/department/index.ts
+++ b/src/api/department/index.ts
@@ -2,24 +2,35 @@
export function departmentApi() {
return {
+ // v2
getDepartmentList: () => {
return request({
url: `/department/list`,
- method: 'post',
+ method: 'post'
});
},
+ // v2
addDepartment: (data: object) => {
return request({
url: `/department/add`,
method: 'post',
- data:data
+ data: data
});
},
+ // v2
modDepartment: (data: object) => {
return request({
url: `/department/mod`,
method: 'post',
- data:data
+ data: data
+ });
+ },
+ // v1
+ deleteDepartment: (value?: object) => {
+ return request({
+ url: `/department/del`,
+ method: 'post',
+ data: value
});
},
};
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index a8e0864..e5e9291 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -8,32 +8,43 @@
*/
export function useMenuApi() {
return {
+ // v2
getMenuAdmin: (value?: string) => {
return request({
url: `/auth/menu?projectId= ${value}`,
- method: 'post',
+ method: 'post'
});
},
+ // v1
addMenu: (value?: object) => {
return request({
url: `/menu/add`,
method: 'post',
- data:value
+ data: value
});
},
+ // v1
modMenu: (value?: object) => {
return request({
url: `/menu/mod`,
method: 'post',
- data:value
+ data: value
});
},
+ // v1
deleteMenu: (value?: object) => {
return request({
url: `/menu/del`,
method: 'post',
- data:value,
+ data: value
});
},
+ // v1
+ getProjectList: () => {
+ return request({
+ url: `/project/list`,
+ method: 'post'
+ });
+ }
};
}
diff --git a/src/api/role/index.ts b/src/api/role/index.ts
index 137195d..3b85d45 100644
--- a/src/api/role/index.ts
+++ b/src/api/role/index.ts
@@ -2,10 +2,35 @@
export function useRoleApi() {
return {
+ // v2
getRoleList: () => {
return request({
url: `/role/list`,
+ method: 'post'
+ });
+ },
+ // v2
+ addRole: (data: object) => {
+ return request({
+ url: `/role/add`,
method: 'post',
+ data: data
+ });
+ },
+ // v2
+ modRole: (data: object) => {
+ return request({
+ url: `/role/mod`,
+ method: 'post',
+ data: data
+ });
+ },
+ // v2
+ deleteRole: (value?: object) => {
+ return request({
+ url: `/role/del`,
+ method: 'post',
+ data: value
});
},
};
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
new file mode 100644
index 0000000..8959ea7
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,37 @@
+import request from '/@/utils/request';
+
+export function userApi() {
+ return {
+ // v1
+ getUserList: (data: any) => {
+ return request({
+ url: `/account/page/list`,
+ method: 'post',
+ data: data
+ });
+ },
+ // v1
+ addUser: (data: object) => {
+ return request({
+ url: `/account/add`,
+ method: 'post',
+ data: data
+ });
+ },
+ // v1
+ modUser: (data: object) => {
+ return request({
+ url: `/account/mod`,
+ method: 'post',
+ data: data
+ });
+ },
+ // v1
+ getUserLByDepartment: (depId: number | null) => {
+ return request({
+ url: `/account/dep/list?depId=${depId}`,
+ method: 'get'
+ });
+ }
+ };
+}
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index 0477317..e3757f2 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -7,23 +7,23 @@
<el-form-item label="上级部门">
<el-cascader
:options="deptData"
- :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+ :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
placeholder="请选择部门"
clearable
class="w100"
- v-model="departmentForm.struct"
+ v-model="departmentForm.parentDepId"
>
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="部门名称">
- <el-input v-model="departmentForm.name" placeholder="请输入部门名称" clearable></el-input>
+ <el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="部门描述">
- <el-input v-model="departmentForm.info" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
+ <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -31,7 +31,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
</span>
</template>
</el-dialog>
@@ -45,7 +45,6 @@
// 定义接口来定义对象的类型
interface TableDataRow {
- struct: Array<string>;
name:string,
info:string,
parentId:string,
@@ -55,10 +54,9 @@
title:string;
isShowDialog: boolean;
departmentForm: {
- struct: Array<string>;
- name:string,
- info:string,
- parentId:string
+ depName:string,
+ depInfo:string,
+ parentDepId:string
};
deptData: Array<TableDataRow>;
}
@@ -70,10 +68,9 @@
title:'',
isShowDialog: false,
departmentForm: {
- name:'',
- parentId:'',
- info:'',
- struct:[]
+ depName:'',
+ parentDepId:'',
+ depInfo:'',
},
deptData: [], // 部门数据
});
@@ -84,13 +81,13 @@
if(type === '新增'){
state.title = '新增部门'
state.departmentForm = {
- name:'',
- parentId:'',
- info:'',
- struct:[]
+ depName:'',
+ parentDepId:'',
+ depInfo:'',
}
}else{
- state.title = '编辑部门'
+ state.title = '修改部门'
+ state.departmentForm = JSON.parse(JSON.stringify(value))
}
};
// 关闭弹窗
@@ -103,20 +100,16 @@
};
// 新增
const onSubmit = async () => {
- if(state.departmentForm.struct && state.departmentForm.struct !== []){
- let departmentId = JSON.parse(JSON.stringify(state.departmentForm.struct))
- state.departmentForm.parentId = departmentId[departmentId.length - 1]
- }
if(state.title === '新增部门'){
let res = await departmentApi().addDepartment(state.departmentForm)
if(res.data.code === '200'){
ElMessage({
type:'success',
- message:'菜单新增成功',
+ message:'部门新增成功',
duration:2000
})
closeDialog();
- context.emit('getMenuList')
+ context.emit('getDepartmentList')
}else{
ElMessage({
type:'warning',
@@ -128,11 +121,11 @@
if(res.data.code === '200'){
ElMessage({
type:'success',
- message:'菜单修改成功',
+ message:'部门修改成功',
duration:2000
})
closeDialog();
- context.emit('getMenuList')
+ context.emit('getDepartmentList')
}else{
ElMessage({
type:'warning',
diff --git a/src/views/system/department/component/editDept.vue b/src/views/system/department/component/editDept.vue
deleted file mode 100644
index 7b16f44..0000000
--- a/src/views/system/department/component/editDept.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
- <div class="system-edit-dept-container">
- <el-dialog title="修改部门" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="上级部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.deptLevel"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门名称">
- <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="负责人">
- <el-input v-model="ruleForm.person" placeholder="请输入负责人" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="排序">
- <el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="部门描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface TableDataRow {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number;
- describe: string;
- id: number;
- children?: TableDataRow[];
-}
-interface RuleFormState {
- deptLevel: Array<string>;
- deptName: string;
- person: string;
- phone: string | number;
- email: string;
- sort: number;
- status: boolean;
- describe: string;
-}
-interface DeptSate {
- isShowDialog: boolean;
- ruleForm: RuleFormState;
- deptData: Array<TableDataRow>;
-}
-
-export default defineComponent({
- name: 'systemEditDept',
- setup() {
- const state = reactive<DeptSate>({
- isShowDialog: false,
- ruleForm: {
- deptLevel: [], // 上级部门
- deptName: '', // 部门名称
- person: '', // 负责人
- phone: '', // 手机号
- email: '', // 邮箱
- sort: 0, // 排序
- status: true, // 部门状态
- describe: '', // 部门描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (row: RuleFormState) => {
- row.deptLevel = ['vueNextAdmin'];
- row.person = 'lyt';
- row.phone = '12345678910';
- row.email = 'vueNextAdmin@123.com';
- state.ruleForm = row;
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/department/index.vue b/src/views/system/department/index.vue
index 4f33400..28464ce 100644
--- a/src/views/system/department/index.vue
+++ b/src/views/system/department/index.vue
@@ -19,18 +19,11 @@
<el-table
:data="tableData.data"
style="width: 100%"
- row-key="id"
- default-expand-all
+ row-key="depId"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
- <el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
- <el-table-column prop="status" label="部门状态" show-overflow-tooltip>
- <template #default="scope">
- <el-tag type="success" v-if="scope.row.status">启用</el-tag>
- <el-tag type="info" v-else>禁用</el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="info" label="部门描述" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column>
+ <el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" show-overflow-tooltip width="140">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenDeptDialog('新增','')">新增</el-button>
@@ -40,7 +33,7 @@
</el-table-column>
</el-table>
</el-card>
- <deptDialog ref="deptDialog" />
+ <deptDialog ref="deptDialog" @getDepartmentList="initTableData"/>
</div>
</template>
@@ -49,6 +42,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import deptDialog from '/@/views/system/department/component/deptDialog.vue';
import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
// 定义接口来定义对象的类型
interface TableDataRow {
@@ -56,7 +50,7 @@
status: boolean;
parentId: number;
info: string;
- id: number;
+ depId: number;
children?: TableDataRow[];
}
interface TableDataState {
@@ -93,18 +87,31 @@
}
};
// 打开新增菜单弹窗
- const onOpenDeptDialog = (type: string,value: any) => {
- deptDialog.value.openDialog(type,value,state.tableData.data);
+ const onOpenDeptDialog = (type: string, value: any) => {
+ deptDialog.value.openDialog(type, value, state.tableData.data);
};
// 删除当前行
const onTabelRowDel = (row: TableDataRow) => {
- ElMessageBox.confirm(`此操作将永久删除部门：${row.id}, 是否继续?`, '提示', {
+ ElMessageBox.confirm(`此操作将永久删除部门：${row.depId}, 是否继续?`, '提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
- }).then(() => {
- ElMessage.success('删除成功');
- }).catch(() => {});
+ }).then(async () => {
+ let res = await departmentApi().deleteDepartment({depId:row.depId})
+ if(res.data.code ==='200'){
+ ElMessage({
+ type:'success',
+ duration:2000,
+ message:'删除成功'
+ })
+ await initTableData()
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }).catch(() => {});
};
// 页面加载时
onMounted(() => {
@@ -112,6 +119,7 @@
});
return {
deptDialog,
+ initTableData,
onOpenDeptDialog,
onTabelRowDel,
...toRefs(state),
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 500a948..f223f93 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -1,267 +1,267 @@
<template>
- <div class="system-add-menu-container">
- <el-dialog :title="title" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="80px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="上级菜单">
- <el-cascader
- :options="menuData"
- :props="{ checkStrictly: true, value: 'id', label: 'title' }"
- placeholder="请选择上级菜单"
- clearable
- class="w100"
- v-model="ruleForm.menuSuperior"
- >
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单名称">
- <el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="路由名称">
- <el-input v-model="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="路由路径">
- <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="重定向">
- <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单图标">
- <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="组件路径">
- <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="权限标识">
- <el-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
- <el-option label="admin" value="admin"></el-option>
- <el-option label="common" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="项目名">
- <el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
- <el-option
- v-for="item in projectList"
- :key="item.key"
- :value="item.id"
- :label="item.name"
- >
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单排序">
- <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100"/>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="是否隐藏">
- <el-radio-group v-model="ruleForm.meta.isHide">
- <el-radio :label="true">隐藏</el-radio>
- <el-radio :label="false">不隐藏</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
+ <div class="system-add-menu-container">
+ <el-dialog :title="title" v-model="isShowDialog" width="769px">
+ <el-form :model="ruleForm" size="default" label-width="80px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="上级菜单">
+ <el-cascader
+ :options="menuData"
+ :props="{ checkStrictly: true, value: 'id', label: 'title' }"
+ placeholder="请选择上级菜单"
+ clearable
+ class="w100"
+ v-model="ruleForm.menuSuperior"
+ >
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单名称">
+ <el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="路由名称">
+ <el-input v-model="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="路由路径">
+ <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="重定向">
+ <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单图标">
+ <el-input placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
+ <!-- <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />-->
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="组件路径">
+ <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="权限标识">
+ <el-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
+ <el-option label="admin" value="admin"></el-option>
+ <el-option label="common" value="common"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="项目名">
+ <el-select
+ @change="handelMenu"
+ v-model="ruleForm.projectId"
+ controls-position="right"
+ placeholder="请输入排序"
+ class="w100"
+ >
+ <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单排序">
+ <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="是否隐藏">
+ <el-radio-group v-model="ruleForm.meta.isHide">
+ <el-radio :label="true">隐藏</el-radio>
+ <el-radio :label="false">不隐藏</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</template>
<script lang="ts">
- import { reactive, toRefs, onMounted, defineComponent } from 'vue';
- import { storeToRefs } from 'pinia';
- import { useRoutesList } from '/@/stores/routesList';
- import { i18n } from '/@/i18n/index';
- import IconSelector from '/@/components/iconSelector/index.vue';
- import { useMenuApi } from '/@/api/menu/index'
- import { ElMessageBox, ElMessage } from 'element-plus';
- import {Session} from "/@/utils/storage";
- // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRoutesList } from '/@/stores/routesList';
+import { i18n } from '/@/i18n/index';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { useMenuApi } from '/@/api/menu/index';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { Session } from '/@/utils/storage';
+// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
- export default defineComponent({
- name: 'systemAddMenu',
- components: { IconSelector },
- setup(props,context) {
- const stores = useRoutesList();
- const { routesList } = storeToRefs(stores);
- const state = reactive({
- isShowDialog: false,
- title:'',
- buttonName:'',
- // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
- ruleForm: {
- projectId:'',
- parentId:0,
- menuSuperior: [], // 上级菜单
- menuType: 'menu', // 菜单类型
- name: '', // 路由名称
- component: '', // 组件路径
- priority: 0, // 菜单排序
- path: '', // 路由路径
- redirect: '', // 路由重定向，有子集 children 时
- meta: {
- title: '', // 菜单名称
- icon: '', // 菜单图标
- isHide: false, // 是否隐藏
- isKeepAlive: true, // 是否缓存
- isAffix: false, // 是否固定
- isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
- isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
- roles: '', // 权限标识，取角色管理
- },
- btnPower: '', // 菜单类型为按钮时，权限标识
- },
- menuData: [], // 上级菜单数据
- projectList:[
- ],
- });
- // 获取 vuex 中的路由
- const getMenuList = (routes: any) => {
- const arr: any = [];
- routes.map((val: any) => {
- val['title'] = val.meta.title;
- val['id'] = val.id
- arr.push(val);
- if (val.children) getMenuList(val.children);
- });
- return arr;
- };
- // 打开弹窗
- const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
- state.projectList = JSON.parse(JSON.stringify(projectList))
- state.isShowDialog = true;
- if(type === '新增'){
- state.buttonName = '新增'
- state.title = '新增菜单'
- state.ruleForm = {
- projectId:projectId,
- parentId:0,
- menuSuperior: [],
- menuType: 'menu',
- name: '',
- component: '',
- priority: 0,
- path: '',
- redirect: '',
- meta: {
- title: '',
- icon: '',
- isHide: false,
- isKeepAlive: true,
- isAffix: false,
- isLink: '',
- isIframe: false,
- roles: '',
- },
- btnPower: '',
- }
- }else{
- state.buttonName = '修改'
- state.title = '修改菜单'
- state.ruleForm = JSON.parse(JSON.stringify(value))
- state.ruleForm.projectId = projectId.toString()
- }
- handelMenu()
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 是否内嵌下拉改变
- // const onSelectIframeChange = () => {
- // if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
- // else state.ruleForm.isLink = false;
- // };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = async () => {
- if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
- let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
- state.ruleForm.parentId = menuId[menuId.length - 1]
- }
- if(state.title === '新增菜单'){
- let res = await useMenuApi().addMenu(state.ruleForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'菜单新增成功',
- duration:2000
- })
- closeDialog();
- context.emit('getMenuList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }else{
- let res = await useMenuApi().modMenu(state.ruleForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'菜单修改成功',
- duration:2000
- })
- closeDialog();
- context.emit('getMenuList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }
+export default defineComponent({
+ name: 'systemAddMenu',
+ components: { IconSelector },
+ setup(props, context) {
+ const stores = useRoutesList();
+ const { routesList } = storeToRefs(stores);
+ const state = reactive({
+ isShowDialog: false,
+ title: '',
+ buttonName: '',
+ // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
+ ruleForm: {
+ projectId: '',
+ parentId: 0,
+ menuSuperior: [], // 上级菜单
+ menuType: 'menu', // 菜单类型
+ name: '', // 路由名称
+ component: '', // 组件路径
+ priority: 0, // 菜单排序
+ path: '', // 路由路径
+ redirect: '', // 路由重定向，有子集 children 时
+ meta: {
+ title: '', // 菜单名称
+ icon: '', // 菜单图标
+ isHide: false, // 是否隐藏
+ isKeepAlive: true, // 是否缓存
+ isAffix: false, // 是否固定
+ isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
+ isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
+ roles: [] // 权限标识，取角色管理
+ },
+ btnPower: '' // 菜单类型为按钮时，权限标识
+ },
+ menuData: [], // 上级菜单数据
+ projectList: []
+ });
+ // 获取 vuex 中的路由
+ const getMenuList = (routes: any) => {
+ const arr: any = [];
+ routes.map((val: any) => {
+ val['title'] = val.meta.title;
+ val['id'] = val.id;
+ arr.push(val);
+ if (val.children) getMenuList(val.children);
+ });
+ return arr;
+ };
+ // 打开弹窗
+ const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
+ state.projectList = JSON.parse(JSON.stringify(projectList));
+ state.isShowDialog = true;
+ if (type === '新增') {
+ state.buttonName = '新增';
+ state.title = '新增菜单';
+ state.ruleForm = {
+ projectId: projectId,
+ parentId: 0,
+ menuSuperior: [],
+ menuType: 'menu',
+ name: '',
+ component: '',
+ priority: 0,
+ path: '',
+ redirect: '',
+ meta: {
+ title: '',
+ icon: '',
+ isHide: false,
+ isKeepAlive: true,
+ isAffix: false,
+ isLink: '',
+ isIframe: false,
+ roles: []
+ },
+ btnPower: ''
+ };
+ } else {
+ state.buttonName = '修改';
+ state.title = '修改菜单';
+ state.ruleForm = JSON.parse(JSON.stringify(value));
+ state.ruleForm.projectId = projectId.toString();
+ }
+ handelMenu();
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ state.isShowDialog = false;
+ };
+ // 是否内嵌下拉改变
+ // const onSelectIframeChange = () => {
+ // if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
+ // else state.ruleForm.isLink = false;
+ // };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // 新增
+ const onSubmit = async () => {
+ if (state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []) {
+ let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior));
+ state.ruleForm.parentId = menuId[menuId.length - 1];
+ }
+ if (state.title === '新增菜单') {
+ let res = await useMenuApi().addMenu(state.ruleForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '菜单新增成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getMenuList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ } else {
+ let res = await useMenuApi().modMenu(state.ruleForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '菜单修改成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getMenuList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
- // closeDialog(); // 关闭弹窗
- // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
- };
+ // closeDialog(); // 关闭弹窗
+ // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
+ };
- const handelMenu = async () => {
- let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
- state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
- }
- // 页面加载时
- onMounted(async () => {
- // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
- // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- handelMenu,
- ...toRefs(state),
- };
- },
- });
+ const handelMenu = async () => {
+ let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
+ state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
+ };
+ // 页面加载时
+ onMounted(async () => {
+ // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
+ // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
+ });
+ return {
+ openDialog,
+ closeDialog,
+ onCancel,
+ onSubmit,
+ handelMenu,
+ ...toRefs(state)
+ };
+ }
+});
</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 1fc2094..0d0881c 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -146,6 +146,20 @@
})
}
};
+
+ const getProjectList = async () => {
+ let res = await useMenuApi().getProjectList()
+ if(res.data.code === '200'){
+ state.menuTableData = res.data.data
+ if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ };
+
onMounted( () => {
getMenuList()
});
diff --git a/src/views/system/role/component/addRole.vue b/src/views/system/role/component/addRole.vue
deleted file mode 100644
index adb0e83..0000000
--- a/src/views/system/role/component/addRole.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
- <div class="system-add-role-container">
- <el-dialog title="新增角色" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色名称">
- <el-input v-model="ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色标识">
- <template #label>
- <el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
- <span>角色标识</span>
- </el-tooltip>
- </template>
- <el-input v-model="ruleForm.roleSign" placeholder="请输入角色标识" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="排序">
- <el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="角色描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="菜单权限">
- <el-tree :data="menuData" :props="menuProps" show-checkbox class="menu-data-tree" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface MenuDataTree {
- id: number;
- label: string;
- children?: MenuDataTree[];
-}
-interface RoleState {
- isShowDialog: boolean;
- ruleForm: {
- roleName: string;
- roleSign: string;
- sort: number;
- status: boolean;
- describe: string;
- };
- menuData: Array<MenuDataTree>;
- menuProps: {
- children: string;
- label: string;
- };
-}
-
-export default defineComponent({
- name: 'systemAddRole',
- setup() {
- const state = reactive<RoleState>({
- isShowDialog: false,
- ruleForm: {
- roleName: '', // 角色名称
- roleSign: '', // 角色标识
- sort: 0, // 排序
- status: true, // 角色状态
- describe: '', // 角色描述
- },
- menuData: [],
- menuProps: {
- children: 'children',
- label: 'label',
- },
- });
- // 打开弹窗
- const openDialog = () => {
- state.isShowDialog = true;
- getMenuData();
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 获取菜单结构数据
- const getMenuData = () => {
- state.menuData = [
- {
- id: 1,
- label: '系统管理',
- children: [
- {
- id: 11,
- label: '菜单管理',
- children: [
- {
- id: 111,
- label: '菜单新增',
- },
- {
- id: 112,
- label: '菜单修改',
- },
- {
- id: 113,
- label: '菜单删除',
- },
- {
- id: 114,
- label: '菜单查询',
- },
- ],
- },
- {
- id: 12,
- label: '角色管理',
- children: [
- {
- id: 121,
- label: '角色新增',
- },
- {
- id: 122,
- label: '角色修改',
- },
- {
- id: 123,
- label: '角色删除',
- },
- {
- id: 124,
- label: '角色查询',
- },
- ],
- },
- {
- id: 13,
- label: '用户管理',
- children: [
- {
- id: 131,
- label: '用户新增',
- },
- {
- id: 132,
- label: '用户修改',
- },
- {
- id: 133,
- label: '用户删除',
- },
- {
- id: 134,
- label: '用户查询',
- },
- ],
- },
- ],
- },
- {
- id: 2,
- label: '权限管理',
- children: [
- {
- id: 21,
- label: '前端控制',
- children: [
- {
- id: 211,
- label: '页面权限',
- },
- {
- id: 212,
- label: '页面权限',
- },
- ],
- },
- {
- id: 22,
- label: '后端控制',
- children: [
- {
- id: 221,
- label: '页面权限',
- },
- ],
- },
- ],
- },
- ];
- };
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
-
-<style scoped lang="scss">
-.system-add-role-container {
- .menu-data-tree {
- width: 100%;
- border: 1px solid var(--el-border-color);
- border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
- padding: 5px;
- }
-}
-</style>
diff --git a/src/views/system/role/component/editRole.vue b/src/views/system/role/component/editRole.vue
deleted file mode 100644
index fc6fe29..0000000
--- a/src/views/system/role/component/editRole.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
- <div class="system-edit-role-container">
- <el-dialog title="修改角色" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色名称">
- <el-input v-model="ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色标识">
- <template #label>
- <el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
- <span>角色标识</span>
- </el-tooltip>
- </template>
- <el-input v-model="ruleForm.roleSign" placeholder="请输入角色标识" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="排序">
- <el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="角色状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="角色描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="菜单权限">
- <el-tree :data="menuData" :props="menuProps" :default-checked-keys="[112, 113]" node-key="id" show-checkbox class="menu-data-tree" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface MenuDataTree {
- id: number;
- label: string;
- children?: MenuDataTree[];
-}
-interface DialogRow {
- roleName: string;
- roleSign: string;
- sort: number;
- status: boolean;
- describe: string;
-}
-interface RoleState {
- isShowDialog: boolean;
- ruleForm: DialogRow;
- menuData: Array<MenuDataTree>;
- menuProps: {
- children: string;
- label: string;
- };
-}
-
-export default defineComponent({
- name: 'systemEditRole',
- setup() {
- const state = reactive<RoleState>({
- isShowDialog: false,
- ruleForm: {
- roleName: '', // 角色名称
- roleSign: '', // 角色标识
- sort: 0, // 排序
- status: true, // 角色状态
- describe: '', // 角色描述
- },
- menuData: [],
- menuProps: {
- children: 'children',
- label: 'label',
- },
- });
- // 打开弹窗
- const openDialog = (row: DialogRow) => {
- state.ruleForm = row;
- state.isShowDialog = true;
- getMenuData();
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 获取菜单结构数据
- const getMenuData = () => {
- state.menuData = [
- {
- id: 1,
- label: '系统管理',
- children: [
- {
- id: 11,
- label: '菜单管理',
- children: [
- {
- id: 111,
- label: '菜单新增',
- },
- {
- id: 112,
- label: '菜单修改',
- },
- {
- id: 113,
- label: '菜单删除',
- },
- {
- id: 114,
- label: '菜单查询',
- },
- ],
- },
- {
- id: 12,
- label: '角色管理',
- children: [
- {
- id: 121,
- label: '角色新增',
- },
- {
- id: 122,
- label: '角色修改',
- },
- {
- id: 123,
- label: '角色删除',
- },
- {
- id: 124,
- label: '角色查询',
- },
- ],
- },
- {
- id: 13,
- label: '用户管理',
- children: [
- {
- id: 131,
- label: '用户新增',
- },
- {
- id: 132,
- label: '用户修改',
- },
- {
- id: 133,
- label: '用户删除',
- },
- {
- id: 134,
- label: '用户查询',
- },
- ],
- },
- ],
- },
- {
- id: 2,
- label: '权限管理',
- children: [
- {
- id: 21,
- label: '前端控制',
- children: [
- {
- id: 211,
- label: '页面权限',
- },
- {
- id: 212,
- label: '页面权限',
- },
- ],
- },
- {
- id: 22,
- label: '后端控制',
- children: [
- {
- id: 221,
- label: '页面权限',
- },
- ],
- },
- ],
- },
- ];
- };
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
-
-<style scoped lang="scss">
-.system-edit-role-container {
- .menu-data-tree {
- width: 100%;
- border: 1px solid var(--el-border-color);
- border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
- padding: 5px;
- }
-}
-</style>
diff --git a/src/views/system/role/component/roleDialog.vue b/src/views/system/role/component/roleDialog.vue
new file mode 100644
index 0000000..d3b7c04
--- /dev/null
+++ b/src/views/system/role/component/roleDialog.vue
@@ -0,0 +1,150 @@
+<template>
+ <div class="system-add-role-container">
+ <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
+ <el-form :model="roleForm" size="default" label-width="90px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="角色名称">
+ <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="角色标识">
+ <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="角色描述">
+ <el-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="isShowRoleDialog = !isShowRoleDialog" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import { ElMessage } from 'element-plus';
+import { reactive, toRefs, defineComponent } from 'vue';
+import {useRoleApi} from "/@/api/role";
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+ id: number;
+ label: string;
+ children?: MenuDataTree[];
+}
+interface RoleState {
+ title:string,
+ buttonName:string,
+ isShowRoleDialog: boolean;
+ roleForm: {
+ roleName: string;
+ roleCode: string;
+ roleInfo: string;
+ };
+ menuData: Array<MenuDataTree>;
+ menuProps: {
+ children: string;
+ label: string;
+ };
+}
+
+export default defineComponent({
+ name: 'systemAddRole',
+ setup(prop,context) {
+ const state = reactive<RoleState>({
+ isShowRoleDialog: false,
+ title:'',
+ buttonName:'',
+ roleForm: {
+ roleName: '', // 角色名称
+ roleCode: '', // 角色标识
+ roleInfo: '', // 排序
+ },
+ menuData: [],
+ menuProps: {
+ children: 'children',
+ label: 'label',
+ },
+ });
+ // 打开弹窗
+ const openDialog = (type: string, value: any) => {
+ state.isShowRoleDialog = true;
+ if(type === '新增'){
+ state.title = '新增角色'
+ state.buttonName = '新增'
+ state.roleForm = {
+ roleName:'',
+ roleCode:'',
+ roleInfo:'',
+ }
+ }else{
+ state.title = '修改角色'
+ state.buttonName = '修改'
+ state.roleForm = JSON.parse(JSON.stringify(value))
+ }
+ };
+ // 新增
+ const onSubmit = async () => {
+ if(state.title === '新增角色'){
+ let res = await useRoleApi().addRole(state.roleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'角色新增成功',
+ duration:2000
+ })
+ state.isShowRoleDialog = false
+ context.emit('refreshRoleList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }else{
+ let res = await useRoleApi().modRole(state.roleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'角色修改成功',
+ duration:2000
+ })
+ state.isShowRoleDialog = false
+ context.emit('refreshRoleList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+ };
+ // 获取菜单结构数据
+ return {
+ onSubmit,
+ openDialog,
+ ...toRefs(state),
+ };
+ },
+});
+</script>
+
+<style scoped lang="scss">
+.system-add-role-container {
+ .menu-data-tree {
+ width: 100%;
+ border: 1px solid var(--el-border-color);
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+ padding: 5px;
+ }
+}
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 93ec4b2..93922e3 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -9,7 +9,7 @@
</el-icon>
查询
</el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+ <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
<el-icon>
<ele-FolderAdd />
</el-icon>
@@ -18,55 +18,35 @@
</div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="code" label="角色标识" show-overflow-tooltip></el-table-column>
- <el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
- <template #default="scope">
- <el-tag type="success" v-if="scope.row.status">启用</el-tag>
- <el-tag type="info" v-else>禁用</el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="info" label="角色描述" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleInfo" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="100">
+ <el-table-column label="操作" width="150">
<template #default="scope">
- <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole(scope.row)"
- >修改</el-button
- >
- <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+ <el-button size="small" text type="primary" @click="onOpenDialogRef('新增','')">新增</el-button>
+ <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
+ <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
- <el-pagination
- @size-change="onHandleSizeChange"
- @current-change="onHandleCurrentChange"
- class="mt15"
- :pager-count="5"
- :page-sizes="[10, 20, 30]"
- v-model:current-page="tableData.param.pageNum"
- background
- v-model:page-size="tableData.param.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.total"
- >
- </el-pagination>
</el-card>
- <AddRole ref="addRoleRef" />
- <EditRole ref="editRoleRef" />
+ <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
-import AddRole from '/@/views/system/role/component/addRole.vue';
-import EditRole from '/@/views/system/role/component/editRole.vue';
+import roleDialog from '/@/views/system/role/component/roleDialog.vue';
import {useRoleApi} from "/@/api/role";
+import {useMenuApi} from "/@/api/menu";
+import {Session} from "/@/utils/storage";
+import {initBackEndControlRoutes} from "/@/router/backEnd";
// 定义接口来定义对象的类型
interface TableData {
- roleName: string;
+ roleName: string;
roleSign: string;
describe: string;
sort: number;
@@ -87,10 +67,9 @@
export default defineComponent({
name: 'systemRole',
- components: { AddRole, EditRole },
+ components: { roleDialog },
setup() {
- const addRoleRef = ref();
- const editRoleRef = ref();
+ const roleDialogRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
@@ -103,7 +82,7 @@
},
});
// 初始化表格数据
- const initTableData = async () => {
+ const initRoleTableData = async () => {
let res = await useRoleApi().getRoleList()
if(res.data.code === '200'){
state.tableData.data = res.data.data;
@@ -113,15 +92,10 @@
message:res.data.msg
})
}
-
};
// 打开新增角色弹窗
- const onOpenAddRole = () => {
- addRoleRef.value.openDialog();
- };
- // 打开修改角色弹窗
- const onOpenEditRole = (row: Object) => {
- editRoleRef.value.openDialog(row);
+ const onOpenDialogRef = (type: string, value: any) => {
+ roleDialogRef.value.openDialog(type, value);
};
// 删除角色
const onRowDel = (row: any) => {
@@ -129,14 +103,25 @@
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
- ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).then(async () => {
+ let res = await useRoleApi().deleteRole({roleId:row.roleId})
+ if(res.data.code ==='200'){
+ ElMessage({
+ type:'success',
+ duration:2000,
+ message:'删除成功'
+ })
+ await initRoleTableData()
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }).catch(() => {});
};
const handleSearch = () => {
- initTableData()
+ initRoleTableData()
}
// 分页改变
const onHandleSizeChange = (val: number) => {
@@ -148,17 +133,17 @@
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initRoleTableData();
});
return {
- addRoleRef,
- editRoleRef,
- onOpenAddRole,
- onOpenEditRole,
onRowDel,
+ roleDialog,
+ handleSearch,
+ roleDialogRef,
+ onOpenDialogRef,
+ initRoleTableData,
onHandleSizeChange,
onHandleCurrentChange,
- handleSearch,
...toRefs(state),
};
},
diff --git a/src/views/system/user/component/addTeamLeader.vue b/src/views/system/user/component/addTeamLeader.vue
deleted file mode 100644
index 3c2d7ea..0000000
--- a/src/views/system/user/component/addTeamLeader.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
- <div class="system-edit-user-container">
- <el-dialog title="修改用户" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface RuleFormRow {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemEditUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- state.ruleForm = row;
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/user/component/addUser.vue b/src/views/system/user/component/addUser.vue
deleted file mode 100644
index 4a78153..0000000
--- a/src/views/system/user/component/addUser.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
- <div class="system-add-user-container">
- <el-dialog title="新增用户" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
- };
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemAddUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = () => {
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/user/component/editUser.vue b/src/views/system/user/component/editUser.vue
deleted file mode 100644
index b7a0793..0000000
--- a/src/views/system/user/component/editUser.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
- <div class="system-edit-user-container">
- <el-dialog title="修改用户" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">修 改</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface RuleFormRow {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemEditUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- state.ruleForm = row;
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue
new file mode 100644
index 0000000..5500677
--- /dev/null
+++ b/src/views/system/user/component/userDialog.vue
@@ -0,0 +1,221 @@
+<template>
+ <div class="system-add-user-container">
+ <el-dialog :title="title" v-model="isShowUserDialog" width="769px">
+ <el-form :model="userForm" size="default" label-width="90px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户名称">
+ <el-input v-model="userForm.username" placeholder="请输入账户名称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="用户昵称">
+ <el-input v-model="userForm.realName" placeholder="请输入用户昵称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="关联角色">
+ <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100">
+ <el-option
+ v-for="item in roleData"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="部门">
+ <el-cascader
+ :options="departmentData"
+ :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
+ placeholder="请选择部门"
+ clearable
+ class="w100"
+ v-model="userForm.depId"
+ >
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="手机号">
+ <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="邮箱">
+ <el-input v-model="userForm.email" placeholder="请输入" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="性别">
+ <el-select v-model="userForm.sex" placeholder="请选择" clearable class="w100">
+ <el-option
+ v-for="item in sexList"
+ :key="item.id"
+ :value="item.id"
+ :label="item.name"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户密码">
+ <el-input v-model="userForm.password" placeholder="请输入" type="password" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="账户过期">
+ <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
+ </el-form-item>
+ </el-col>
+<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
+<!-- <el-form-item label="用户状态">-->
+<!-- <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>-->
+<!-- </el-form-item>-->
+<!-- </el-col>-->
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
+ <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import {userApi} from "/@/api/user";
+
+// 定义接口来定义对象的类型
+interface DeptData {
+}
+interface roleData{
+
+}
+interface sexData{
+
+}
+interface UserState {
+ title:string,
+ isShowUserDialog: boolean;
+ userForm: {
+ username: string;
+ realName: string;
+ roleId: number | null;
+ depId: number | null;
+ phone: string;
+ email: string;
+ sex: number | null;
+ password: string;
+ expireTime: string;
+ status: number;
+ };
+ departmentData: Array<DeptData>;
+ roleData: Array<roleData>;
+ sexList:Array<sexData>,
+}
+
+export default defineComponent({
+ name: 'user',
+ setup(props,context) {
+ const state = reactive<UserState>({
+ title:'',
+ isShowUserDialog: false,
+ userForm: {
+ username: '', // 账户名称
+ realName: '', // 用户昵称
+ roleId: null, // 关联角色
+ depId:null, // 部门
+ phone: '', // 手机号
+ email: '', // 邮箱
+ sex: null, // 性别
+ password: '', // 账户密码
+ expireTime: '', // 账户过期
+ status: 1, // 用户状态
+ },
+ departmentData: [], // 部门数据
+ roleData:[],//角色数据
+ sexList:[{id:1,name:'男'},{id:0,name:'女'}]
+ });
+ // 打开弹窗
+ const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
+ state.isShowUserDialog = true;
+ state.departmentData = departmentList;
+ state.roleData = roleList;
+ if(type === '新增'){
+ state.title = '新增用户'
+ state.userForm = {
+ username: '',
+ realName: '',
+ roleId: null,
+ depId: null,
+ phone: '',
+ email: '',
+ sex: null,
+ password: '',
+ expireTime: '',
+ status: 1,
+ }
+ }else{
+ state.title = '修改用户'
+ state.userForm = JSON.parse(JSON.stringify(value))
+ }
+ };
+
+
+ // 新增修改
+ const onSubmit = async () => {
+ if(state.title === '新增用户'){
+ let res = await userApi().addUser(state.userForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'用户新增成功',
+ duration:2000
+ })
+ state.isShowUserDialog = false;
+ context.emit('getUserList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }else{
+ let res = await userApi().modUser(state.userForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'用户修改成功',
+ duration:2000
+ })
+ state.isShowUserDialog = false;
+ context.emit('getUserList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+ };
+
+ // 页面加载时
+ onMounted(() => {
+ });
+ return {
+ openDialog,
+ onSubmit,
+ ...toRefs(state),
+ };
+ },
+});
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index a120c59..c4123dd 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -9,19 +9,20 @@
</el-icon>
查询
</el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+ <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增用户
</el-button>
</div>
- <el-table :data="tableData.data" style="width: 100%">
+ <el-table :data="userTableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
- <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="username" label="账户名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="realName" label="用户昵称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="role.name" label="关联角色" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="department.name" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
@@ -30,11 +31,10 @@
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
- <el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
+ <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改',scope.row)">修改</el-button>
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
@@ -45,24 +45,25 @@
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
- v-model:current-page="tableData.param.pageNum"
+ v-model:current-page="userTableData.listQuery.pageIndex"
background
- v-model:page-size="tableData.param.pageSize"
+ v-model:page-size="userTableData.listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.total"
+ :total="userTableData.total"
>
</el-pagination>
</el-card>
- <AddUer ref="addUserRef" />
- <EditUser ref="editUserRef" />
+ <userDialog ref="userRef" @getUserList = "initUserTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
-import AddUer from '/@/views/system/user/component/addUser.vue';
-import EditUser from '/@/views/system/user/component/editUser.vue';
+import userDialog from '/@/views/system/user/component/userDialog.vue';
+import {userApi} from "/@/api/user";
+import {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
// 定义接口来定义对象的类型
interface TableDataRow {
@@ -79,96 +80,124 @@
describe: string;
createTime: string;
}
+interface DepartmentDataRow{
+
+}
interface TableDataState {
- tableData: {
+ userTableData: {
data: Array<TableDataRow>;
total: number;
loading: boolean;
- param: {
- pageNum: number;
+ listQuery: {
+ searchParams:{
+ username:string,
+ realName:string,
+ },
+ pageIndex: number;
pageSize: number;
};
};
+ departmentList:[];
+ roleList:[];
}
export default defineComponent({
name: 'systemUser',
- components: { AddUer, EditUser },
+ components: { userDialog },
setup() {
- const addUserRef = ref();
- const editUserRef = ref();
+ const userRef = ref();
const state = reactive<TableDataState>({
- tableData: {
+ userTableData: {
data: [],
total: 0,
loading: false,
- param: {
- pageNum: 1,
+ listQuery: {
+ searchParams:{
+ username:'',
+ realName:'',
+ },
+ pageIndex: 1,
pageSize: 10,
},
},
+ departmentList:[],
+ roleList:[],
});
// 初始化表格数据
- const initTableData = () => {
- const data: Array<TableDataRow> = [];
- for (let i = 0; i < 2; i++) {
- data.push({
- userName: i === 0 ? 'admin' : 'test',
- userNickname: i === 0 ? '我是管理员' : '我是普通用户',
- roleSign: i === 0 ? 'admin' : 'common',
- department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
- phone: '12345678910',
- email: 'vueNextAdmin@123.com',
- sex: '女',
- password: '123456',
- overdueTime: new Date(),
- status: true,
- describe: i === 0 ? '不可删除' : '测试用户',
- createTime: new Date().toLocaleString(),
- });
+ const initUserTableData = async () => {
+ let res = await userApi().getUserList(state.userTableData.listQuery)
+ if(res.data.code === '200'){
+ state.userTableData.data = res.data.data;
+ state.userTableData.total = res.data.data.length;
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
}
- state.tableData.data = data;
- state.tableData.total = state.tableData.data.length;
};
- // 打开新增用户弹窗
- const onOpenAddUser = () => {
- addUserRef.value.openDialog();
+
+ const getDepartmentData = async () => {
+ let res = await departmentApi().getDepartmentList()
+ if(res.data.code === '200'){
+ state.departmentList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ const getRoleData = async () => {
+ let res = await useRoleApi().getRoleList()
+ if(res.data.code === '200'){
+ state.roleList = res.data.data
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }
+
+ // 打开新增修改用户弹窗
+ const onOpenUserDialog = (type: string,value: any) => {
+ userRef.value.openDialog(type, value, state.departmentList,state.roleList);
};
- // 打开修改用户弹窗
- const onOpenEditUser = (row: TableDataRow) => {
- editUserRef.value.openDialog(row);
- };
+
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
+ }).then(() => {
ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
- state.tableData.param.pageSize = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
- state.tableData.param.pageNum = val;
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData()
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initUserTableData();
+ getDepartmentData();
+ getRoleData();
});
return {
- addUserRef,
- editUserRef,
- onOpenAddUser,
- onOpenEditUser,
+ userRef,
+ onOpenUserDialog,
onRowDel,
onHandleSizeChange,
+ initUserTableData,
onHandleCurrentChange,
...toRefs(state),
};
--
Gitblit v1.9.2