From 33802d74d2720e86c406f5ca9531ac9435b9ddd2 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 02 八月 2022 09:09:48 +0800 Subject: [PATCH] lct --- src/views/system/role/index.vue | 266 ++++++++++++++++++++++++++-------------------------- 1 files changed, 134 insertions(+), 132 deletions(-) diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index 93922e3..e1af698 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -1,151 +1,153 @@ <template> - <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="tableData.data" style="width: 100%"> - <el-table-column type="index" label="序号" width="60" /> - <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="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="onRowDel(scope.row)">删除</el-button> - </template> - </el-table-column> - </el-table> - </el-card> - <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/> - </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="tableData.data" style="width: 100%"> + <el-table-column type="index" label="序号" width="60" /> + <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="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="onRowDel(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + </el-card> + <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 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"; +import { useRoleApi } from '/@/api/systemManage/role'; +import { useMenuApi } from '/@/api/systemManage/menu'; +import { Session } from '/@/utils/storage'; +import { initBackEndControlRoutes } from '/@/router/backEnd'; // 定义接口来定义对象的类型 interface TableData { roleName: string; - roleSign: string; - describe: string; - sort: number; - status: boolean; - createTime: string; + roleSign: string; + describe: string; + sort: number; + status: boolean; + createTime: string; } interface TableDataState { - tableData: { - data: Array<TableData>; - total: number; - loading: boolean; - param: { - pageNum: number; - pageSize: number; - }; - }; + tableData: { + data: Array<TableData>; + total: number; + loading: boolean; + param: { + pageNum: number; + pageSize: number; + }; + }; } export default defineComponent({ - name: 'systemRole', - components: { roleDialog }, - setup() { - const roleDialogRef = ref(); - const state = reactive<TableDataState>({ - tableData: { - data: [], - total: 0, - loading: false, - param: { - pageNum: 1, - pageSize: 10, - }, - }, - }); - // 初始化表格数据 - const initRoleTableData = async () => { - let res = await useRoleApi().getRoleList() - if(res.data.code === '200'){ - state.tableData.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(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 - }) + name: 'systemRole', + components: { roleDialog }, + setup() { + const roleDialogRef = ref(); + const state = reactive<TableDataState>({ + tableData: { + data: [], + total: 0, + loading: false, + param: { + pageNum: 1, + pageSize: 10 } - }).catch(() => {}); - }; - const handleSearch = () => { - initRoleTableData() - } - // 分页改变 - const onHandleSizeChange = (val: number) => { - state.tableData.param.pageSize = val; - }; - // 分页改变 - const onHandleCurrentChange = (val: number) => { - state.tableData.param.pageNum = val; - }; - // 页面加载时 - onMounted(() => { - initRoleTableData(); - }); - return { - onRowDel, - roleDialog, - handleSearch, - roleDialogRef, - onOpenDialogRef, - initRoleTableData, - onHandleSizeChange, - onHandleCurrentChange, - ...toRefs(state), - }; - }, + } + }); + // 初始化表格数据 + const initRoleTableData = async () => { + let res = await useRoleApi().getRoleList(); + if (res.data.code === '200') { + state.tableData.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(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 = () => { + initRoleTableData(); + }; + // 分页改变 + const onHandleSizeChange = (val: number) => { + state.tableData.param.pageSize = val; + }; + // 分页改变 + const onHandleCurrentChange = (val: number) => { + state.tableData.param.pageNum = val; + }; + // 页面加载时 + onMounted(() => { + initRoleTableData(); + }); + return { + onRowDel, + roleDialog, + handleSearch, + roleDialogRef, + onOpenDialogRef, + initRoleTableData, + onHandleSizeChange, + onHandleCurrentChange, + ...toRefs(state) + }; + } }); </script> -- Gitblit v1.9.2