From dd2576bf9887b29c47d128cd6c070f8d70756865 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期四, 21 七月 2022 18:27:13 +0800
Subject: [PATCH] 更新首页登录页
---
src/views/system/menu/index.vue | 361 ++++++-----
src/views/system/role/index.vue | 4
src/views/system/user/index.vue | 382 ++++++-----
src/assets/style/index.scss | 10
src/views/system/role/component/roleDialog.vue | 250 ++++----
src/utils/request.ts | 30
src/views/system/department/component/deptDialog.vue | 274 ++++----
src/views/homeMenu/homeMenu.vue | 110 ++-
src/views/system/user/component/userDialog.vue | 402 ++++++------
src/views/system/department/index.vue | 1
src/main.ts | 2
src/views/system/menu/component/menuDialog.vue | 25
12 files changed, 967 insertions(+), 884 deletions(-)
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
new file mode 100644
index 0000000..f7be0d0
--- /dev/null
+++ b/src/assets/style/index.scss
@@ -0,0 +1,10 @@
+.input-box{
+ width: 200px !important;
+}
+.basic-line{
+ display: inline-block;
+ padding-left: 10px;
+}
+.page-position{
+ float: right;
+}
diff --git a/src/main.ts b/src/main.ts
index acd3d24..dd69054 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@
import { directive } from '/@/utils/directive';
import { i18n } from '/@/i18n/index';
import other from '/@/utils/other';
-
+import '/@/assets/style/index.scss';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import '/@/theme/index.scss';
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 9de0cfe..a6c21e4 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -29,16 +29,34 @@
);
service.interceptors.response.use(
-
(response) => {
// 对响应数据做点什么
- if(response.data.code && (response.data.code ==='A0215' || response.data.code === 'A0214' || response.data.code === 'A0213')){
- Session.clear()
- window.location.href = '/'
- return Promise.reject(response)
+ if (response.data.code && response.data.code === 'A0213') {
+ ElMessage.error('用户uid不存在');
+ setTimeout(() => {
+ Session.clear();
+ window.location.href = '/';
+ }, 2000);
+ } else if (response.data.code && response.data.code === 'A0215') {
+ ElMessage.error('token失效');
+ Session.clear();
+ window.location.href = '/';
}
// if(response.data.code && response.data.code !== '200'){
- return Promise.resolve(response)
+ return Promise.resolve(response);
+ //
+ // (response) => {
+ // // 对响应数据做点什么
+ // if(response.data.code && (response.data.code ==='A0215' || response.data.code === 'A0214' || response.data.code === 'A0213')){
+ // Session.clear()
+ // window.location.href = '/'
+ // return Promise.reject(response)
+ // }
+ // // if(response.data.code && response.data.code !== '200'){
+ // return Promise.resolve(response)
+
+
+
// }
// Session.clear()
// window.location.href = '/'
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
index 8326f96..01718e3 100644
--- a/src/views/homeMenu/homeMenu.vue
+++ b/src/views/homeMenu/homeMenu.vue
@@ -21,11 +21,11 @@
<div class="menuGrid">
<div class="gridCont">
<el-row :gutter="20">
- <el-col :span="6"><div class="grid-content" @click="renderMenu('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
- <el-col :span="6"><div class="grid-content" @click="renderMenu('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
- <el-col :span="6"><div class="grid-content" @click="renderMenu('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content" @click="render('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content" @click="render('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content" @click="render('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
<el-col :span="6">
- <div class="grid-content" @click="renderMenu('5')">
+ <div class="grid-content" @click="render('5')">
<div class="itemTit">安全风险综合
<br>预警预报平台
</div>
@@ -35,15 +35,15 @@
</el-col>
</el-row>
<el-row :gutter="20">
- <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="render('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="render('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="render('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="render('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
</el-row>
<el-row :gutter="20">
- <el-col :span="6"><div class="grid-content grid-content-3" @click="renderMenu('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
- <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
- <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-3" @click="render('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
+ <el-col :span="9"><div class="grid-content grid-content-3" @click="render('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
+ <el-col :span="9"><div class="grid-content grid-content-3" @click="render('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
</el-row>
</div>
</div>
@@ -66,27 +66,30 @@
import { useRoutesList } from '/@/stores/routesList';
// 定义接口来定义对象的类型
- interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
- }
+ interface LoginState {
+ tabsActiveName: string;
+ isScan: boolean;
+ count: number;
+ projectId: string;
+ }
- export default defineComponent({
- name: 'loginIndex',
- components: {},
- setup() {
- const route = useRoute();
- const router = useRouter();
- const userInfo = useUserInfo()
- const { userInfos } = storeToRefs(userInfo);
+ export default defineComponent({
+ name: 'loginIndex',
+ components: {},
+ setup() {
+ const router = useRouter();
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
const routeToStore = useRoutesList(pinia);
const { routesList } = storeToRefs(routeToStore);
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive<LoginState>({
- tabsActiveName: 'account',
- isScan: false,
- });
+ const storesThemeConfig = useThemeConfig();
+ const { themeConfig } = storeToRefs(storesThemeConfig);
+ const state = reactive<LoginState>({
+ tabsActiveName: 'account',
+ isScan: false,
+ count: 0,
+ projectId: '1'
+ });
// 获取布局配置信息
const getThemeConfig = computed(() => {
return themeConfig.value;
@@ -95,9 +98,40 @@
const onLoginOut = () => {
console.log('退出登录')
};
- const renderMenu = async (value: string) => {
- Session.set('projectId', value);
- userInfos.value.projectId = value;
+ //选择菜单
+ const render = (value: string) => {
+ state.projectId = value;
+ renderMenu();
+ };
+
+ const throttle = (renderMenu: any, delay: number) => {
+ let flag = true;
+ let count = 0;
+ return function () {
+ if (!flag) return;
+ flag = false;
+ if (count === 0) {
+ renderMenu.apply();
+ count++;
+ flag = true;
+ } else {
+ setTimeout(() => {
+ renderMenu.apply();
+ flag = true;
+ }, delay);
+ }
+ };
+ };
+
+ //调用菜单方法
+ const renderMenu = throttle(() => {
+ renderFun();
+ }, 2000);
+
+ //调后台菜单接口
+ const renderFun = async () => {
+ Session.set('projectId', state.projectId);
+ userInfos.value.projectId = state.projectId;
await initBackEndControlRoutes().then(() => {
let linkToMenu = [...routesList.value];
if (linkToMenu && linkToMenu.length > 1) {
@@ -127,12 +161,12 @@
// loginApp()
});
return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- renderMenu,
- toSpecialWorkSys,
- ...toRefs(state),
+ render,
+ logoMini,
+ onLoginOut,
+ loginIconTwo,
+ getThemeConfig,
+ ...toRefs(state)
};
},
});
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index 1c2bf4a..03bbef1 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -1,154 +1,152 @@
<template>
- <div class="system-add-dept-container">
- <el-dialog :title="title" v-model="isShowDialog" width="600px">
- <el-form :model="departmentForm" 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="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- 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.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.depInfo" 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>
+ <div class="system-add-dept-container">
+ <el-dialog :title="title" v-model="isShowDialog" width="600px">
+ <el-form :model="departmentForm" 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="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
+ placeholder="请选择部门"
+ clearable
+ class="w100"
+ 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.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.depInfo" 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" v-throttle @click="onSubmit" size="default">确 定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</template>
<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-import { departmentApi } from "/@/api/system/department";
+import { departmentApi } from '/@/api/system/department';
// 定义接口来定义对象的类型
interface TableDataRow {
- name:string,
- info:string,
- parentId:string,
- id:number,
+ name: string;
+ info: string;
+ parentId: string;
+ id: number;
}
interface DeptSate {
- title:string;
- isShowDialog: boolean;
- departmentForm: {
- depName:string,
- depInfo:string,
- parentDepId:string
- };
- deptData: Array<TableDataRow>;
+ title: string;
+ isShowDialog: boolean;
+ departmentForm: {
+ depName: string;
+ depInfo: string;
+ parentDepId: string;
+ };
+ deptData: Array<TableDataRow>;
}
export default defineComponent({
- name: 'systemAddDept',
- setup(prop,context) {
- const state = reactive<DeptSate>({
- title:'',
- isShowDialog: false,
- departmentForm: {
- depName:'',
- parentDepId:'',
- depInfo:'',
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (type:string, value: any,departmentList: []) => {
- state.isShowDialog = true;
- state.deptData = JSON.parse(JSON.stringify(departmentList))
- if(type === '新增'){
- state.title = '新增部门'
- state.departmentForm = {
- depName:'',
- parentDepId:'',
- depInfo:'',
- }
- }else{
- state.title = '修改部门'
- state.departmentForm = JSON.parse(JSON.stringify(value))
- }
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = async () => {
- if(state.title === '新增部门'){
- let res = await departmentApi().addDepartment(state.departmentForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'部门新增成功',
- duration:2000
- })
- closeDialog();
- context.emit('getDepartmentList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }else{
- let res = await departmentApi().modDepartment(state.departmentForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'部门修改成功',
- duration:2000
- })
- closeDialog();
- context.emit('getDepartmentList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }
- };
- // 初始化部门数据
- const initTableData = () => {
-
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
+ name: 'systemAddDept',
+ setup(prop, context) {
+ const state = reactive<DeptSate>({
+ title: '',
+ isShowDialog: false,
+ departmentForm: {
+ depName: '',
+ parentDepId: '',
+ depInfo: ''
+ },
+ deptData: [] // 部门数据
+ });
+ // 打开弹窗
+ const openDialog = (type: string, value: any, departmentList: []) => {
+ state.isShowDialog = true;
+ state.deptData = JSON.parse(JSON.stringify(departmentList));
+ if (type === '新增') {
+ state.title = '新增部门';
+ state.departmentForm = {
+ depName: '',
+ parentDepId: '',
+ depInfo: ''
+ };
+ } else {
+ state.title = '修改部门';
+ state.departmentForm = JSON.parse(JSON.stringify(value));
+ }
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ state.isShowDialog = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // 新增
+ const onSubmit = async () => {
+ if (state.title === '新增部门') {
+ let res = await departmentApi().addDepartment(state.departmentForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '部门新增成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getDepartmentList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ } else {
+ let res = await departmentApi().modDepartment(state.departmentForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '部门修改成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getDepartmentList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ };
+ // 初始化部门数据
+ const initTableData = () => {};
+ // 页面加载时
+ 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 610f52a..8e85911 100644
--- a/src/views/system/department/index.vue
+++ b/src/views/system/department/index.vue
@@ -42,7 +42,6 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import deptDialog from '/@/views/system/department/component/deptDialog.vue';
import {departmentApi} from "/@/api/system/department";
-import {useRoleApi} from "/@/api/system/role";
// 定义接口来定义对象的类型
interface TableDataRow {
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 960a05d..eb7e633 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -18,40 +18,39 @@
</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-input v-model.trim="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-input v-model.trim="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-input v-model.trim="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-input v-model.trim="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" />
+ <el-input placeholder="请输入菜单图标" v-model.trim="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-input v-model.trim="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-option v-for="item in roleList" :key="item.roleId" :value="item.roleCode" :label="item.roleName"></el-option>
</el-select>
</el-form-item>
</el-col>
@@ -86,7 +85,7 @@
<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>
+ <el-button type="primary" v-throttle @click="onSubmit" size="default">{{ buttonName }}</el-button>
</span>
</template>
</el-dialog>
@@ -97,12 +96,10 @@
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/system/menu/index';
import { ElMessageBox, ElMessage } from 'element-plus';
-import { Session } from '/@/utils/storage';
-// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
+
export default defineComponent({
name: 'systemAddMenu',
@@ -137,6 +134,7 @@
},
btnPower: '' // 菜单类型为按钮时，权限标识
},
+ roleList: [],
menuData: [], // 上级菜单数据
projectList: []
});
@@ -152,8 +150,9 @@
return arr;
};
// 打开弹窗
- const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
+ const openDialog = (type: string, value: any, projectList: any, projectId: string, roleList: []) => {
state.projectList = JSON.parse(JSON.stringify(projectList));
+ state.roleList = roleList;
state.isShowDialog = true;
if (type === '新增') {
state.buttonName = '新增';
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 652beff..f20befb 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,177 +1,200 @@
<template>
- <div class="system-menu-container">
- <el-card shadow="hover">
- <div class="system-menu-search mb15">
- <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
- <el-option
- v-for="item in projectList"
- :key="item.key"
- :value="item.id"
- :label="item.name"
- >
- </el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10" @click="getMenuList">
- <el-icon>
- <ele-Search />
- </el-icon>
- 查询
- </el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
- <el-icon>
- <ele-FolderAdd />
- </el-icon>
- 新增菜单
- </el-button>
- </div>
- <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
- <el-table-column label="菜单名称" show-overflow-tooltip>
- <template #default="scope">
- <SvgIcon :name="scope.row.meta.icon" />
- <span class="ml10">{{ scope.row.meta.title }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
- <el-table-column label="组件路径" show-overflow-tooltip>
- <template #default="scope">
- <span>{{ scope.row.component }}</span>
- </template>
- </el-table-column>
- <el-table-column label="权限标识" show-overflow-tooltip>
- <template #default="scope">
- <span>{{ scope.row.meta.roles }}</span>
- </template>
- </el-table-column>
- <el-table-column label="排序" show-overflow-tooltip width="80">
- <template #default="scope">
- {{ scope.$index }}
- </template>
- </el-table-column>
- <el-table-column label="类型" show-overflow-tooltip width="80">
- <template #default="scope">
- <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="操作" show-overflow-tooltip width="140">
- <template #default="scope">
- <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
- <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改',scope.row)">修改</el-button>
- <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
- <menuDialog ref="menuDialog" @getMenuList="getMenuList"/>
- </div>
+ <div class="system-menu-container">
+ <el-card shadow="hover">
+ <div class="system-menu-search mb15">
+ <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
+ <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
+ </el-select>
+ <el-button size="default" type="primary" class="ml10" @click="getMenuList">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询
+ </el-button>
+ <el-button size="default" type="success" class="ml10" @click="onOpenMenuDialog('新增')">
+ <el-icon>
+ <ele-FolderAdd />
+ </el-icon>
+ 新增菜单
+ </el-button>
+ </div>
+ <el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+ <el-table-column label="菜单名称" show-overflow-tooltip>
+ <template #default="scope">
+ <SvgIcon :name="scope.row.meta.icon" />
+ <span class="ml10">{{ scope.row.meta.title }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+ <el-table-column label="组件路径" show-overflow-tooltip>
+ <template #default="scope">
+ <span>{{ scope.row.component }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="权限标识" show-overflow-tooltip>
+ <template #default="scope">
+ <span>{{ parseRole(scope.row.meta.roles) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="排序" show-overflow-tooltip width="80">
+ <template #default="scope">
+ {{ scope.$index }}
+ </template>
+ </el-table-column>
+ <el-table-column label="类型" show-overflow-tooltip width="80">
+ <template #default="scope">
+ <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" show-overflow-tooltip width="140">
+ <template #default="scope">
+ <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
+ <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改', scope.row)">修改</el-button>
+ <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ <menuDialog ref="menuDialog" @getMenuList="getMenuList" />
+ </div>
</template>
<script lang="ts">
- import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
- import { RouteRecordRaw } from 'vue-router';
- import { ElMessageBox, ElMessage } from 'element-plus';
- import { storeToRefs } from 'pinia';
- import { useRoutesList } from '/@/stores/routesList';
- import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
- import {useMenuApi} from "/@/api/system/menu";
- import {Session} from "/@/utils/storage";
- import pinia from "/@/stores";
- import {dynamicRoutes} from "/@/router/route";
- import {useUserInfo} from "/@/stores/userInfo";
- import {initBackEndControlRoutes} from "/@/router/backEnd";
+import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useRoutesList } from '/@/stores/routesList';
+import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
+import { useMenuApi } from '/@/api/system/menu';
+import { Session } from '/@/utils/storage';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useRoleApi } from '/@/api/system/role';
- export default defineComponent({
- name: 'systemMenu',
- components: { menuDialog },
- setup() {
- const menuDialog = ref();
- const storesRoutesList = useRoutesList();
- const state = reactive({
- projectId:'1',
- menuData:[],
- menuTableData:[],
- projectList:[
- { id: '1', name: '基础数据权限管理系统', key: 0 },
- { id: '2', name: '双重预防系统', key: 1 },
- { id: '3', name: '特殊作业系统', key: 2 },
- { id: '4', name: '智能巡检系统', key: 3 },
- { id: '5', name: '安全风险综合预警预报平台', key: 4 },
- { id: '6', name: '应急管理系统', key: 5 },
- { id: '7', name: '目标责任管理系统', key: 6 },
- { id: '8', name: '事故管理系统', key: 7 },
- { id: '9', name: '设备综合管控系统', key: 8 },
- { id: '10', name: '安全知识图谱系统', key: 9 },
- { id: '11', name: '危险化学品全生命周期安全', key: 10 }
- ],
- });
- // // 获取 vuex 中的路由
- // const menuTableData = computed(() => {
- // return routesList.value;
- // });
- // 打开新增菜单弹窗
- const onOpenMenuDialog = (type: string,value: any) => {
- menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
- };
- // 打开编辑菜单弹窗
- // 删除当前行
- const deleteMenu = (row: any) => {
- ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
- confirmButtonText: '删除',
- cancelButtonText: '取消',
- type: 'warning',
- }).then(async () => {
- let res = await useMenuApi().deleteMenu({id:row.id})
- if(res.data.code ==='200'){
- ElMessage({
- type:'success',
- duration:2000,
- message:'删除成功'
- })
- await getMenuList()
- if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }).catch(() => {});
- };
- const getMenuList = async () => {
- let res = await useMenuApi().getMenuAdmin(state.projectId)
- 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
- })
- }
- };
+export default defineComponent({
+ name: 'systemMenu',
+ components: { menuDialog },
+ filters: {
+ parseRole: (roles: Array<string>) => {
+ return ['1', '2'];
+ }
+ },
+ setup() {
+ const menuDialog = ref();
+ const storesRoutesList = useRoutesList();
+ const state = reactive({
+ projectId: '1',
+ menuData: [],
+ roleList: [],
+ menuTableData: [],
+ projectList: [
+ { id: '1', name: '基础数据权限管理系统', key: 0 },
+ { id: '2', name: '双重预防系统', key: 1 },
+ { id: '3', name: '特殊作业系统', key: 2 },
+ { id: '4', name: '智能巡检系统', key: 3 },
+ { id: '5', name: '安全风险综合预警预报平台', key: 4 },
+ { id: '6', name: '应急管理系统', key: 5 },
+ { id: '7', name: '目标责任管理系统', key: 6 },
+ { id: '8', name: '事故管理系统', key: 7 },
+ { id: '9', name: '设备综合管控系统', key: 8 },
+ { id: '10', name: '安全知识图谱系统', key: 9 },
+ { id: '11', name: '危险化学品全生命周期安全', key: 10 }
+ ]
+ });
+ // // 获取 vuex 中的路由
+ // const menuTableData = computed(() => {
+ // return routesList.value;
+ // });
+ // 打开新增菜单弹窗
+ const onOpenMenuDialog = (type: string, value: any) => {
+ menuDialog.value.openDialog(type, value, state.projectList, state.projectId, state.roleList);
+ };
- 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
- })
- }
- };
+ // 删除当前行
+ const deleteMenu = (row: any) => {
+ ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
+ confirmButtonText: '删除',
+ cancelButtonText: '取消',
+ type: 'warning'
+ })
+ .then(async () => {
+ let res = await useMenuApi().deleteMenu({ id: row.id });
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ duration: 2000,
+ message: '删除成功'
+ });
+ await getMenuList();
+ if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ })
+ .catch(() => {});
+ };
+ const getMenuList = async () => {
+ let res = await useMenuApi().getMenuAdmin(state.projectId);
+ 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()
- });
- return {
- getMenuList,
- menuDialog,
- onOpenMenuDialog,
- deleteMenu,
- ...toRefs(state),
- };
- },
- });
+ const getRoleList = 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 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
+ });
+ }
+ };
+
+ const parseRole = (roles: Array<string>) => {
+ let role = roles.map((item) => {
+ for (let i in state.roleList) {
+ if (state.roleList[i].roleCode === item) {
+ return state.roleList[i].roleName;
+ }
+ }
+ });
+ return role;
+ };
+
+ onMounted(() => {
+ getMenuList();
+ getRoleList();
+ });
+ return {
+ parseRole,
+ getMenuList,
+ menuDialog,
+ onOpenMenuDialog,
+ deleteMenu,
+ ...toRefs(state)
+ };
+ }
+});
</script>
diff --git a/src/views/system/role/component/roleDialog.vue b/src/views/system/role/component/roleDialog.vue
index fc4539a..6786c29 100644
--- a/src/views/system/role/component/roleDialog.vue
+++ b/src/views/system/role/component/roleDialog.vue
@@ -1,150 +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>
+ <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" v-throttle 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/system/role";
+import { useRoleApi } from '/@/api/system/role';
// 定义接口来定义对象的类型
interface MenuDataTree {
- id: number;
- label: string;
- children?: MenuDataTree[];
+ id: number;
+ label: string;
+ children?: MenuDataTree[];
}
interface RoleState {
- title:string,
- buttonName:string,
- isShowRoleDialog: boolean;
- roleForm: {
- roleName: string;
+ title: string;
+ buttonName: string;
+ isShowRoleDialog: boolean;
+ roleForm: {
+ roleName: string;
roleCode: string;
roleInfo: string;
- };
- menuData: Array<MenuDataTree>;
- menuProps: {
- children: string;
- label: 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: {
+ 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),
- };
- },
+ 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;
- }
+ .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 6624a39..e60a5a7 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -40,9 +40,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import roleDialog from '/@/views/system/role/component/roleDialog.vue';
import {useRoleApi} from "/@/api/system/role";
-import {useMenuApi} from "/@/api/system/menu";
-import {Session} from "/@/utils/storage";
-import {initBackEndControlRoutes} from "/@/router/backEnd";
+
// 定义接口来定义对象的类型
interface TableData {
diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue
index 0faf127..3851ccc 100644
--- a/src/views/system/user/component/userDialog.vue
+++ b/src/views/system/user/component/userDialog.vue
@@ -1,221 +1,213 @@
<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>
+ <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.roleId" :label="item.roleName" :value="item.roleId"> </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: 'depId', label: 'depName' }"
+ 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.identify" 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.gender" 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" v-throttle @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/system/user";
+import { userApi } from '/@/api/system/user';
// 定义接口来定义对象的类型
-interface DeptData {
-}
-interface roleData{
-
-}
-interface sexData{
-
-}
+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>,
+ title: string;
+ isShowUserDialog: boolean;
+ userForm: {
+ username: string;
+ realName: string;
+ roleId: number | null;
+ depId: number | null;
+ phone: string;
+ email: string;
+ gender: number | null;
+ password: string;
+ expireTime: string;
+ status: number;
+ identify: string;
+ };
+ 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))
- }
- };
+ name: 'user',
+ setup(props, context) {
+ const state = reactive<UserState>({
+ title: '',
+ isShowUserDialog: false,
+ userForm: {
+ username: '', // 账户名称
+ realName: '', // 用户昵称
+ roleId: null, // 关联角色
+ depId: null, // 部门
+ phone: '', // 手机号
+ email: '', // 邮箱
+ identify: '',
+ gender: 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: '',
+ identify: '',
+ gender: 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
+ });
+ }
+ }
+ };
- // 新增修改
- 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),
- };
- },
+ // 页面加载时
+ onMounted(() => {});
+ return {
+ openDialog,
+ onSubmit,
+ ...toRefs(state)
+ };
+ }
});
</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index f15ec18..4e5946d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,206 +1,218 @@
<template>
- <div class="system-user-container">
- <el-card shadow="hover">
- <div class="system-user-search mb15">
- <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
- <el-button size="default" type="primary" class="ml10">
- <el-icon>
- <ele-Search />
- </el-icon>
- 查询
- </el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
- <el-icon>
- <ele-FolderAdd />
- </el-icon>
- 新增用户
- </el-button>
- </div>
- <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="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>
- <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="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="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>
- </el-table>
- <el-pagination
- @size-change="onHandleSizeChange"
- @current-change="onHandleCurrentChange"
- class="mt15"
- :pager-count="5"
- :page-sizes="[10, 20, 30]"
- v-model:current-page="userTableData.listQuery.pageIndex"
- background
- v-model:page-size="userTableData.listQuery.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="userTableData.total"
- >
- </el-pagination>
- </el-card>
- <userDialog ref="userRef" @getUserList = "initUserTableData"/>
- </div>
+ <div class="system-user-container">
+ <el-card shadow="hover">
+ <div class="system-user-search mb15">
+ <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
+ <el-button size="default" type="primary" class="ml10">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询
+ </el-button>
+ <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增', '')">
+ <el-icon>
+ <ele-FolderAdd />
+ </el-icon>
+ 新增用户
+ </el-button>
+ </div>
+ <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="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>
+ <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="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="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>
+ </el-table>
+ <br />
+ <el-pagination
+ @size-change="onHandleSizeChange"
+ @current-change="onHandleCurrentChange"
+ class="page-position"
+ :pager-count="5"
+ :page-sizes="[10, 20, 30]"
+ v-model:current-page="userTableData.listQuery.pageIndex"
+ background
+ v-model:page-size="userTableData.listQuery.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="userTableData.total"
+ >
+ </el-pagination>
+ <br />
+ <br />
+ </el-card>
+ <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 userDialog from '/@/views/system/user/component/userDialog.vue';
-import {userApi} from "/@/api/system/user";
-import {departmentApi} from "/@/api/system/department";
-import {useRoleApi} from "/@/api/system/role";
+import { userApi } from '/@/api/system/user';
+import { departmentApi } from '/@/api/system/department';
+import { useRoleApi } from '/@/api/system/role';
// 定义接口来定义对象的类型
interface TableDataRow {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: string[];
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: Date;
- status: boolean;
- describe: string;
- createTime: string;
+ userName: string;
+ userNickname: string;
+ roleSign: string;
+ department: string[];
+ phone: string;
+ email: string;
+ sex: string;
+ password: string;
+ overdueTime: Date;
+ status: boolean;
+ describe: string;
+ createTime: string;
}
-interface DepartmentDataRow{
-
-}
+interface DepartmentDataRow {}
interface TableDataState {
- userTableData: {
- data: Array<TableDataRow>;
- total: number;
- loading: boolean;
- listQuery: {
- searchParams:{
- username:string,
- realName:string,
- },
- pageIndex: number;
- pageSize: number;
- };
- };
- departmentList:[];
- roleList:[];
+ userTableData: {
+ data: Array<TableDataRow>;
+ total: number;
+ loading: boolean;
+ listQuery: {
+ searchParams: {
+ username: string;
+ realName: string;
+ };
+ pageIndex: number;
+ pageSize: number;
+ };
+ };
+ departmentList: [];
+ roleList: [];
}
export default defineComponent({
- name: 'systemUser',
- components: { userDialog },
- setup() {
- const userRef = ref();
- const state = reactive<TableDataState>({
- userTableData: {
- data: [],
- total: 0,
- loading: false,
- listQuery: {
- searchParams:{
- username:'',
- realName:'',
- },
- pageIndex: 1,
- pageSize: 10,
- },
- },
- departmentList:[],
- roleList:[],
- });
- // 初始化表格数据
- 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
- })
- }
- };
+ name: 'systemUser',
+ components: { userDialog },
+ setup() {
+ const userRef = ref();
+ const state = reactive<TableDataState>({
+ userTableData: {
+ data: [],
+ total: 0,
+ loading: false,
+ listQuery: {
+ searchParams: {
+ username: '',
+ realName: ''
+ },
+ pageIndex: 1,
+ pageSize: 10
+ }
+ },
+ departmentList: [],
+ roleList: []
+ });
+ // 初始化表格数据
+ 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.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
- 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 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 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 onOpenUserDialog = (type: string, value: any) => {
+ userRef.value.openDialog(type, value, state.departmentList, state.roleList);
+ };
- // 删除用户
- const onRowDel = (row: TableDataRow) => {
- ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
- confirmButtonText: '确认',
- cancelButtonText: '取消',
- type: 'warning',
- }).then(() => {
- ElMessage.success('删除成功');
- }).catch(() => {});
- };
- // 分页改变
- const onHandleSizeChange = (val: number) => {
- state.userTableData.listQuery.pageSize = val;
- initUserTableData()
- };
- // 分页改变
- const onHandleCurrentChange = (val: number) => {
- state.userTableData.listQuery.pageSize = val;
- initUserTableData()
- };
- // 页面加载时
- onMounted(() => {
- initUserTableData();
- getDepartmentData();
- getRoleData();
- });
- return {
- userRef,
- onOpenUserDialog,
- onRowDel,
- onHandleSizeChange,
- initUserTableData,
- onHandleCurrentChange,
- ...toRefs(state),
- };
- },
+ // 删除用户
+ const onRowDel = (row: TableDataRow) => {
+ ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning'
+ })
+ .then(() => {
+ ElMessage.success('删除成功');
+ })
+ .catch(() => {});
+ };
+ // 分页改变
+ const onHandleSizeChange = (val: number) => {
+ state.userTableData.listQuery.pageSize = val;
+ initUserTableData();
+ };
+ // 分页改变
+ const onHandleCurrentChange = (val: number) => {
+ state.userTableData.listQuery.pageIndex = val;
+ initUserTableData();
+ };
+ // 页面加载时
+ onMounted(() => {
+ initUserTableData();
+ getDepartmentData();
+ getRoleData();
+ });
+ return {
+ userRef,
+ onOpenUserDialog,
+ onRowDel,
+ onHandleSizeChange,
+ initUserTableData,
+ onHandleCurrentChange,
+ ...toRefs(state)
+ };
+ }
});
</script>
--
Gitblit v1.9.2