From a266ece06a2a4c906e5377d3417962fa3760aef6 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 29 六月 2022 18:31:53 +0800
Subject: [PATCH] 'lct'
---
src/views/system/role/index.vue | 73 +----
src/api/role/index.ts | 14 +
src/views/system/department/component/deptDialog.vue | 12
src/router/backEnd.ts | 2
src/views/system/department/index.vue | 8
src/stores/userInfo.ts | 3
/dev/null | 242 ------------------
src/views/system/menu/index.vue | 29 +
src/views/system/role/component/roleDialog.vue | 151 +++++++++++
src/utils/debounce.ts | 25 +
src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue | 153 +++++++++++
src/api/menu/index.ts | 14
src/views/login/component/account.vue | 2
src/api/productionDevice/index.ts | 34 ++
14 files changed, 432 insertions(+), 330 deletions(-)
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index 2af998a..a8e0864 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -28,12 +28,12 @@
data:value
});
},
- // getMenuTest: (params?: string) => {
- // return request({
- // url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/testMenu.json',
- // method: 'get',
- // params,
- // });
- // },
+ deleteMenu: (value?: object) => {
+ return request({
+ url: `/menu/del`,
+ method: 'post',
+ data:value,
+ });
+ },
};
}
diff --git a/src/api/productionDevice/index.ts b/src/api/productionDevice/index.ts
new file mode 100644
index 0000000..275a254
--- /dev/null
+++ b/src/api/productionDevice/index.ts
@@ -0,0 +1,34 @@
+import request from '/@/utils/request'
+
+export function productionDeviceApi() {
+ return {
+ getProductionDeviceList: (data: object) => {
+ return request({
+ url: `/prevent/device/select/getDevicePage`,
+ method: 'post',
+ data:data
+ });
+ },
+ addProductionDevice: (data: object) => {
+ return request({
+ url: `/prevent/device/insert/saveDevice`,
+ method: 'post',
+ data:data
+ });
+ },
+ modProductionDevice: (data: object) => {
+ return request({
+ url: `/prevent/device/update/updateDevice`,
+ method: 'post',
+ data:data
+ });
+ },
+ deleteProductionDevice: (data: object) => {
+ return request({
+ url: `/prevent/device/delete/deleteDevice`,
+ method: 'post',
+ data:data
+ });
+ },
+ }
+}
diff --git a/src/api/role/index.ts b/src/api/role/index.ts
index 137195d..1d1ac38 100644
--- a/src/api/role/index.ts
+++ b/src/api/role/index.ts
@@ -8,5 +8,19 @@
method: 'post',
});
},
+ addRole: (data: object) => {
+ return request({
+ url: `/role/add`,
+ method: 'post',
+ data:data
+ });
+ },
+ modRole: (data: object) => {
+ return request({
+ url: `/role/mod`,
+ method: 'post',
+ data:data
+ });
+ },
};
}
diff --git a/src/router/backEnd.ts b/src/router/backEnd.ts
index 5cb3d0d..c109d30 100644
--- a/src/router/backEnd.ts
+++ b/src/router/backEnd.ts
@@ -29,7 +29,7 @@
export async function initBackEndControlRoutes() {
if (window.nextLoading === undefined) NextLoading.start();
if (!Session.get('token')) return false;
- const res = await getBackEndControlRoutes(Session.get('projectId'));
+ const res = await getBackEndControlRoutes(Session.get('projectId') === null ? '' : Session.get('projectId'));
useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data.data)));
dynamicRoutes[0].children = await backEndComponent(res.data.data);
await setAddRoute();
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
index 1408dfa..9714aab 100644
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -21,9 +21,8 @@
}),
actions: {
async setUserInfos(value: any) {
- debugger
this.userInfos.userName = value.username
- this.userInfos.uid = value.id
+ this.userInfos.uid = value.uid
this.userInfos.roles = value.role
// const userName = Cookies.get('userName');
// // 模拟数据
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 0000000..e6f754d
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,25 @@
+import { App } from 'vue'
+
+export function preventClick(app: App){
+ app.directive('debounce', {
+ mounted(el, binding) {
+ let timer : NodeJS.Timeout | null = null
+ el.addEventListener('click', () => {
+ debugger
+ let firstClick: Boolean = !timer;
+ if(firstClick){
+ binding.value
+ }
+ if(timer){
+ clearTimeout(timer)
+ }
+ timer = setTimeout(() => {
+ timer = null
+ if(!firstClick){
+ binding.value
+ }
+ },3000);
+ })
+ }
+ })
+}
diff --git a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
index b562500..76f4724 100644
--- a/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
+++ b/src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue
@@ -1,13 +1,150 @@
<template>
- <div>1</div>
+ <div class="system-role-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" @click="handleSearch">
+ <el-icon>
+ <ele-Search />
+ </el-icon>
+ 查询
+ </el-button>
+ <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
+ <el-icon>
+ <ele-FolderAdd />
+ </el-icon>
+ 新增角色
+ </el-button>
+ </div>
+ <el-table :data="productionDeviceData.data" style="width: 100%">
+ <el-table-column type="index" label="序号" width="60" />
+ <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="depName" label="区域位置" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gtmCreate" label="最后修改时间" show-overflow-tooltip></el-table-column>
+ <el-table-column label="操作" width="150">
+ <template #default="scope">
+ <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="onTabelRowDel(scope.row)">删除</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
+ </div>
</template>
-<script>
- export default {
- name: "index"
+<script lang="ts">
+ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+ import { ElMessageBox, ElMessage } from 'element-plus';
+ import roleDialog from '/@/views/system/role/component/roleDialog.vue';
+ import {productionDeviceApi} from "/@/api/productionDevice";
+
+ // 定义接口来定义对象的类型
+ interface TableData {
+ roleName: string;
+ roleSign: string;
+ describe: string;
+ sort: number;
+ status: boolean;
+ createTime: string;
}
+ interface TableDataState {
+ productionDeviceData: {
+ data: Array<TableData>;
+ total: number;
+ loading: boolean;
+ params: {
+ pageIndex: number;
+ pageSize: number;
+ riskLevel:number;
+ status:number;
+ depName:string;
+ location:string;
+ produceDeviceName:string;
+ };
+ };
+ }
+
+ export default defineComponent({
+ name: 'productionDevice',
+ components: { roleDialog },
+ setup() {
+ const roleDialogRef = ref();
+ const state = reactive<TableDataState>({
+ productionDeviceData: {
+ data: [],
+ total: 0,
+ loading: false,
+ params: {
+ pageIndex: 1,
+ pageSize: 10,
+ riskLevel:1,
+ status:1,
+ depName:"",
+ location:"",
+ produceDeviceName:""
+ },
+ },
+ });
+ // 初始化表格数据
+ const initProductionDeviceTableData = async () => {
+ let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params)
+ if(res.data.code === '200'){
+ state.productionDeviceData.data = res.data.data;
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ };
+ // 打开新增角色弹窗
+ const onOpenDialogRef = (type: string, value: any) => {
+ roleDialogRef.value.openDialog(type, value);
+ };
+ // 删除角色
+ const onRowDel = (row: any) => {
+ ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ }).then(() => {
+ ElMessage.success('删除成功');
+ }).catch(() => {});
+ };
+ const handleSearch = () => {
+ initProductionDeviceTableData()
+ }
+ // 分页改变
+ const onHandleSizeChange = (val: number) => {
+ state.productionDeviceData.param.pageSize = val;
+ };
+ // 分页改变
+ const onHandleCurrentChange = (val: number) => {
+ state.productionDeviceData.param.pageNum = val;
+ };
+ // 页面加载时
+ onMounted(() => {
+ initProductionDeviceTableData();
+ });
+ return {
+ onRowDel,
+ roleDialog,
+ handleSearch,
+ roleDialogRef,
+ onOpenDialogRef,
+ initProductionDeviceTableData,
+ onHandleSizeChange,
+ onHandleCurrentChange,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue
index 7dea861..08b28f0 100644
--- a/src/views/login/component/account.vue
+++ b/src/views/login/component/account.vue
@@ -101,7 +101,7 @@
userInfo.setUserInfos(res.data.data)
Session.set('token', res.data.data.accessToken);
Session.set('projectId','');
- Session.set('uid',res.data.data.id);
+ Session.set('uid',res.data.data.uid);
await initBackEndControlRoutes();
signInSuccess();
}else{
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index 2006116..b1df6b5 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -90,8 +90,8 @@
struct:[]
}
}else{
- state.title = '编辑部门'
- state.departmentForm = value
+ state.title = '修改部门'
+ state.departmentForm = JSON.parse(JSON.stringify(value))
}
};
// 关闭弹窗
@@ -113,11 +113,11 @@
if(res.data.code === '200'){
ElMessage({
type:'success',
- message:'菜单新增成功',
+ message:'部门新增成功',
duration:2000
})
closeDialog();
- context.emit('getMenuList')
+ context.emit('getDepartmentList')
}else{
ElMessage({
type:'warning',
@@ -129,11 +129,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 e5e0505..ca69129 100644
--- a/src/views/system/department/index.vue
+++ b/src/views/system/department/index.vue
@@ -20,7 +20,6 @@
:data="tableData.data"
style="width: 100%"
row-key="id"
- default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
@@ -34,7 +33,7 @@
</el-table-column>
</el-table>
</el-card>
- <deptDialog ref="deptDialog" />
+ <deptDialog ref="deptDialog" @getDepartmentList="initTableData"/>
</div>
</template>
@@ -87,8 +86,8 @@
}
};
// 打开新增菜单弹窗
- 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) => {
@@ -106,6 +105,7 @@
});
return {
deptDialog,
+ initTableData,
onOpenDeptDialog,
onTabelRowDel,
...toRefs(state),
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 46b65b0..1fc2094 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -56,7 +56,7 @@
<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="onTabelRowDel(scope.row)">删除</el-button>-->
+ <el-button size="small" text type="primary" @click="deleteMenu(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -77,12 +77,14 @@
import pinia from "/@/stores";
import {dynamicRoutes} from "/@/router/route";
import {useUserInfo} from "/@/stores/userInfo";
+ import {initBackEndControlRoutes} from "/@/router/backEnd";
export default defineComponent({
name: 'systemMenu',
components: { menuDialog },
setup() {
const menuDialog = ref();
+ const storesRoutesList = useRoutesList();
const state = reactive({
projectId:'1',
menuData:[],
@@ -109,21 +111,34 @@
};
// 打开编辑菜单弹窗
// 删除当前行
- const onTabelRowDel = (row: RouteRecordRaw) => {
+ const deleteMenu = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
- }).then(() => {
- ElMessage.success('删除成功');
+ }).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
- // const storesRoutesList = useRoutesList(pinia);
- // storesRoutesList.setRoutesList(res.data.data);
+ if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
}else{
ElMessage({
type:'warning',
@@ -138,7 +153,7 @@
getMenuList,
menuDialog,
onOpenMenuDialog,
- onTabelRowDel,
+ deleteMenu,
...toRefs(state),
};
},
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..9470bf4
--- /dev/null
+++ b/src/views/system/role/component/roleDialog.vue
@@ -0,0 +1,151 @@
+<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.name" 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.code" 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.info" 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 {departmentApi} from "/@/api/department";
+import {useRoleApi} from "/@/api/role";
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+ id: number;
+ label: string;
+ children?: MenuDataTree[];
+}
+interface RoleState {
+ title:string,
+ buttonName:string,
+ isShowRoleDialog: boolean;
+ roleForm: {
+ name: string;
+ code: string;
+ info: 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: '', // 角色名称
+ code: '', // 角色标识
+ info: '', // 排序
+ },
+ menuData: [],
+ menuProps: {
+ children: 'children',
+ label: 'label',
+ },
+ });
+ // 打开弹窗
+ const openDialog = (type: string, value: any) => {
+ state.isShowRoleDialog = true;
+ if(type === '新增'){
+ state.title = '新增角色'
+ state.buttonName = '新增'
+ state.roleForm = {
+ name:'',
+ code:'',
+ info:'',
+ }
+ }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..b05db16 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>
@@ -20,48 +20,25 @@
<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="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="onTabelRowDel(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";
// 定义接口来定义对象的类型
@@ -87,10 +64,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 +79,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 +89,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 +100,12 @@
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
+ }).then(() => {
ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).catch(() => {});
};
const handleSearch = () => {
- initTableData()
+ initRoleTableData()
}
// 分页改变
const onHandleSizeChange = (val: number) => {
@@ -148,17 +117,17 @@
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initRoleTableData();
});
return {
- addRoleRef,
- editRoleRef,
- onOpenAddRole,
- onOpenEditRole,
onRowDel,
+ roleDialog,
+ handleSearch,
+ roleDialogRef,
+ onOpenDialogRef,
+ initRoleTableData,
onHandleSizeChange,
onHandleCurrentChange,
- handleSearch,
...toRefs(state),
};
},
--
Gitblit v1.9.2