From efb4569338df5aeeba8317921bb5ee164dc03ed9 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 11 七月 2022 17:49:19 +0800
Subject: [PATCH] 基础模块
---
src/views/system/role/index.vue | 99 +++++++++++++++++++++----------------------------
1 files changed, 42 insertions(+), 57 deletions(-)
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 93ec4b2..93922e3 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -9,7 +9,7 @@
</el-icon>
查询
</el-button>
- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+ <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
<el-icon>
<ele-FolderAdd />
</el-icon>
@@ -18,55 +18,35 @@
</div>
<el-table :data="tableData.data" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="code" label="角色标识" show-overflow-tooltip></el-table-column>
- <el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
- <template #default="scope">
- <el-tag type="success" v-if="scope.row.status">启用</el-tag>
- <el-tag type="info" v-else>禁用</el-tag>
- </template>
- </el-table-column>
- <el-table-column prop="info" label="角色描述" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="roleInfo" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="100">
+ <el-table-column label="操作" width="150">
<template #default="scope">
- <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole(scope.row)"
- >修改</el-button
- >
- <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+ <el-button size="small" text type="primary" @click="onOpenDialogRef('新增','')">新增</el-button>
+ <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
+ <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
- <el-pagination
- @size-change="onHandleSizeChange"
- @current-change="onHandleCurrentChange"
- class="mt15"
- :pager-count="5"
- :page-sizes="[10, 20, 30]"
- v-model:current-page="tableData.param.pageNum"
- background
- v-model:page-size="tableData.param.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="tableData.total"
- >
- </el-pagination>
</el-card>
- <AddRole ref="addRoleRef" />
- <EditRole ref="editRoleRef" />
+ <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
-import AddRole from '/@/views/system/role/component/addRole.vue';
-import EditRole from '/@/views/system/role/component/editRole.vue';
+import roleDialog from '/@/views/system/role/component/roleDialog.vue';
import {useRoleApi} from "/@/api/role";
+import {useMenuApi} from "/@/api/menu";
+import {Session} from "/@/utils/storage";
+import {initBackEndControlRoutes} from "/@/router/backEnd";
// 定义接口来定义对象的类型
interface TableData {
- roleName: string;
+ roleName: string;
roleSign: string;
describe: string;
sort: number;
@@ -87,10 +67,9 @@
export default defineComponent({
name: 'systemRole',
- components: { AddRole, EditRole },
+ components: { roleDialog },
setup() {
- const addRoleRef = ref();
- const editRoleRef = ref();
+ const roleDialogRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
@@ -103,7 +82,7 @@
},
});
// 初始化表格数据
- const initTableData = async () => {
+ const initRoleTableData = async () => {
let res = await useRoleApi().getRoleList()
if(res.data.code === '200'){
state.tableData.data = res.data.data;
@@ -113,15 +92,10 @@
message:res.data.msg
})
}
-
};
// 打开新增角色弹窗
- const onOpenAddRole = () => {
- addRoleRef.value.openDialog();
- };
- // 打开修改角色弹窗
- const onOpenEditRole = (row: Object) => {
- editRoleRef.value.openDialog(row);
+ const onOpenDialogRef = (type: string, value: any) => {
+ roleDialogRef.value.openDialog(type, value);
};
// 删除角色
const onRowDel = (row: any) => {
@@ -129,14 +103,25 @@
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
- })
- .then(() => {
- ElMessage.success('删除成功');
- })
- .catch(() => {});
+ }).then(async () => {
+ let res = await useRoleApi().deleteRole({roleId:row.roleId})
+ if(res.data.code ==='200'){
+ ElMessage({
+ type:'success',
+ duration:2000,
+ message:'删除成功'
+ })
+ await initRoleTableData()
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ }).catch(() => {});
};
const handleSearch = () => {
- initTableData()
+ initRoleTableData()
}
// 分页改变
const onHandleSizeChange = (val: number) => {
@@ -148,17 +133,17 @@
};
// 页面加载时
onMounted(() => {
- initTableData();
+ initRoleTableData();
});
return {
- addRoleRef,
- editRoleRef,
- onOpenAddRole,
- onOpenEditRole,
onRowDel,
+ roleDialog,
+ handleSearch,
+ roleDialogRef,
+ onOpenDialogRef,
+ initRoleTableData,
onHandleSizeChange,
onHandleCurrentChange,
- handleSearch,
...toRefs(state),
};
},
--
Gitblit v1.9.2