lct

Your Name

2022-08-02 33802d74d2720e86c406f5ca9531ac9435b9ddd2

lct

 src/api/systemManage/department/index.ts

 src/api/systemManage/menu/index.ts

 src/api/systemManage/role/index.ts

 src/api/systemManage/user/index.ts

 src/assets/methods/index.ts

@@ -1,4 +1,4 @@
import { userApi } from '/@/api/user';
import { userApi } from '/@/api/systemManage/user';
import { ElMessage } from 'element-plus';

export async function getUserByDepartment(value: number | null) {

 src/router/backEnd.ts

@@ -9,14 +9,13 @@
import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
import { useRoutesList } from '/@/stores/routesList';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useMenuApi } from '/@/api/menu/index';
import { useMenuApi } from '/@/api/systemManage/menu/index';
import { ElMessage } from 'element-plus';

const menuApi = useMenuApi();

const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');


/**
 * 获取目录下的 .vue、.tsx 全部文件
@@ -25,51 +24,44 @@
 */
const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...layouModules }, { ...viewsModules });


export async function initBackEndControlRoutes() {
    if (window.nextLoading === undefined) NextLoading.start();
    if (!Session.get('token')) return false;
    const res = await getBackEndControlRoutes(Session.get('projectId') === null ? '' : Session.get('projectId'));
    await useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data.data)));
    dynamicRoutes[0].children = await backEndComponent(res.data.data);
    await setAddRoute();
    await setFilterMenuAndCacheTagsViewRoutes();
    }

    if (window.nextLoading === undefined) NextLoading.start();
    if (!Session.get('token')) return false;
    const res = await getBackEndControlRoutes(Session.get('projectId') === null ? '' : Session.get('projectId'));
    await useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data.data)));
    dynamicRoutes[0].children = await backEndComponent(res.data.data);
    await setAddRoute();
    await setFilterMenuAndCacheTagsViewRoutes();
}

export function setFilterMenuAndCacheTagsViewRoutes() {
    const storesRoutesList = useRoutesList(pinia);
    storesRoutesList.setRoutesList(dynamicRoutes[0].children as any);
    setCacheTagsViewRoutes();
    const storesRoutesList = useRoutesList(pinia);
    storesRoutesList.setRoutesList(dynamicRoutes[0].children as any);
    setCacheTagsViewRoutes();
}


export function setCacheTagsViewRoutes() {
    const storesTagsView = useTagsViewRoutes(pinia);
    storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children);
    const storesTagsView = useTagsViewRoutes(pinia);
    storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children);
}


export function setFilterRouteEnd() {
    let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
    filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower];
    return filterRouteEnd;
    let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
    filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower];
    return filterRouteEnd;
}


export async function setAddRoute() {
    await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
        router.addRoute(route);
    });
    await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
        router.addRoute(route);
    });
}


export async function getBackEndControlRoutes(value : string) {
    // const stores = useUserInfo(pinia);
    // const { userInfos } = storeToRefs(stores);
    // const auth = userInfos.value.roles[0];
    return menuApi.getMenuAdmin(value);

export async function getBackEndControlRoutes(value: string) {
    // const stores = useUserInfo(pinia);
    // const { userInfos } = storeToRefs(stores);
    // const auth = userInfos.value.roles[0];
    return menuApi.getMenuAdmin(value);
}

/**
@@ -78,31 +70,29 @@
 * @description 路径：/src/views/system/homeMenu/component/menuDialog.vue
 */
export function setBackEndControlRefreshRoutes() {
    getBackEndControlRoutes(Session.get('projectId'));
    getBackEndControlRoutes(Session.get('projectId'));
}


export function backEndComponent(routes: any) {
    if (!routes) return;
    return routes.map((item: any) => {
        if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
        item.children && backEndComponent(item.children);
        return item;
    });
    if (!routes) return;
    return routes.map((item: any) => {
        if (item.component) item.component = dynamicImport(dynamicViewsModules, item.component as string);
        item.children && backEndComponent(item.children);
        return item;
    });
}


export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
    const keys = Object.keys(dynamicViewsModules);
    const matchKeys = keys.filter((key) => {
        const k = key.replace(/..\/views|../, '');
        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
    });
    if (matchKeys?.length === 1) {
        const matchKey = matchKeys[0];
        return dynamicViewsModules[matchKey];
    }
    if (matchKeys?.length > 1) {
        return false;
    }
    const keys = Object.keys(dynamicViewsModules);
    const matchKeys = keys.filter((key) => {
        const k = key.replace(/..\/views|../, '');
        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
    });
    if (matchKeys?.length === 1) {
        const matchKey = matchKeys[0];
        return dynamicViewsModules[matchKey];
    }
    if (matchKeys?.length > 1) {
        return false;
    }
}

 src/views/doublePrevent/riskCheckManage/checkTaskManage/checkTask/index.vue

@@ -69,7 +69,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import recordDialog from './components/recordDialog.vue';
import { recordApi } from '/@/api/doublePreventSystem/record/index.ts';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { checkUnitApi } from '/@/api/doublePreventSystem/checkUnit';
import { View, Check } from '@element-plus/icons-vue';


 src/views/doublePrevent/riskCheckManage/checkTaskManage/checkWork/index.vue

@@ -88,7 +88,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import workDialog from './components/workDialog.vue';
import { workApi } from '/@/api/doublePreventSystem/work/index.ts';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { Edit, Delete, View } from '@element-plus/icons-vue';
import { checkUnitApi } from '/@/api/doublePreventSystem/checkUnit';


 src/views/doublePrevent/riskCheckManage/hiddenManagement/hiddenCheck/index.vue

@@ -60,7 +60,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import checkDialog from './components/checkDialog.vue';
import { Check, Delete, View } from '@element-plus/icons-vue';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { hiddenCheckApi } from '/@/api/doublePreventSystem/check';

// 定义接口来定义对象的类型

 src/views/doublePrevent/riskCheckManage/hiddenManagement/hiddenRectify/index.vue

@@ -72,7 +72,7 @@
import rectifyDialog from './components/rectifyDialog.vue';
import { Edit, Delete, Check, View } from '@element-plus/icons-vue';
import { hiddenRectifyApi } from '/@/api/doublePreventSystem/rectify';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

// 定义接口来定义对象的类型

 src/views/doublePrevent/riskCheckManage/hiddenManagement/hiddenReport/index.vue

@@ -95,7 +95,7 @@
import reportDialog from './components/reportDialog.vue';
import { Edit, Delete, View } from '@element-plus/icons-vue';
import { hiddenReportApi } from '/@/api/doublePreventSystem/report';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';


 src/views/doublePrevent/riskLevel/device/index.vue

@@ -70,7 +70,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import productionDeviceDialog from './components/productionDeviceDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { Edit, Delete, View } from '@element-plus/icons-vue';

// 定义接口来定义对象的类型

 src/views/doublePrevent/riskLevel/event/index.vue

@@ -53,7 +53,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { Edit, Delete, View } from '@element-plus/icons-vue';


 src/views/doublePrevent/riskLevel/map/index.vue

@@ -47,19 +47,7 @@
                </el-table-column>
            </el-table>
            <br />
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="rectifyData.params.pageIndex"
                background
                v-model:page-size="rectifyData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="rectifyData.total"
                class="page-position"
            >
            </el-pagination>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="rectifyData.params.pageIndex" background v-model:page-size="rectifyData.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="rectifyData.total" class="page-position"> </el-pagination>
            <br />
            <br />
        </el-card>
@@ -73,7 +61,7 @@
import rectifyDialog from './components/rectifyDialog.vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { hiddenRectifyApi } from '/@/api/doublePreventSystem/rectify';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

// 定义接口来定义对象的类型

 src/views/doublePrevent/riskLevel/unit/components/safetyRiskAnalyseUnitDialog.vue

@@ -64,7 +64,7 @@
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
import { userApi } from '/@/api/systemManage/user';
import { getUserByDepartment } from '/@/assets/methods';
export default {
    name: 'productionDeviceDialog',

 src/views/doublePrevent/riskLevel/unit/index.vue

@@ -62,8 +62,8 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts';
import { departmentApi } from '/@/api/department';
import { userApi } from '/@/api/user';
import { departmentApi } from '/@/api/systemManage/department';
import { userApi } from '/@/api/systemManage/user';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { Edit, Delete, View } from '@element-plus/icons-vue';


 src/views/system/department/component/deptDialog.vue

@@ -5,15 +5,7 @@
                <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-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">
@@ -41,7 +33,7 @@
<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { departmentApi } from '/@/api/department';
import { departmentApi } from '/@/api/systemManage/department';

// 定义接口来定义对象的类型
interface TableDataRow {

 src/views/system/department/index.vue

@@ -1,129 +1,126 @@
<template>
    <div class="system-dept-container">
        <el-card shadow="hover">
            <div class="system-dept-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="onOpenDeptDialog('新增','')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增部门
                </el-button>
            </div>
            <el-table
                :data="tableData.data"
                style="width: 100%"
                row-key="depId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
                <el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDeptDialog('新增','')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDeptDialog('修改',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>
        <deptDialog ref="deptDialog" @getDepartmentList="initTableData"/>
    </div>
    <div class="system-dept-container">
        <el-card shadow="hover">
            <div class="system-dept-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="onOpenDeptDialog('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增部门
                </el-button>
            </div>
            <el-table :data="tableData.data" style="width: 100%" row-key="depId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDeptDialog('新增', '')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDeptDialog('修改', 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>
        <deptDialog ref="deptDialog" @getDepartmentList="initTableData" />
    </div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import deptDialog from '/@/views/system/department/component/deptDialog.vue';
import {departmentApi} from "/@/api/department";
import {useRoleApi} from "/@/api/role";
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';

// 定义接口来定义对象的类型
interface TableDataRow {
    name: string;
    status: boolean;
    parentId: number;
    info: string;
    name: string;
    status: boolean;
    parentId: number;
    info: string;
    depId: number;
    children?: TableDataRow[];
    children?: TableDataRow[];
}
interface TableDataState {
    tableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
    };
    tableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
    };
}

export default defineComponent({
    name: 'systemDept',
    components: { deptDialog },
    setup() {
        const deptDialog = ref();
        const state = reactive<TableDataState>({
            tableData: {
                data: [],
                total: 0,
                loading: false,
            },
        });
        // 初始化表格数据
        const initTableData = async () => {
            let res = await departmentApi().getDepartmentList()
            if(res.data.code === '200'){
                state.tableData.data = res.data.data
                state.tableData.total = state.tableData.data.length;
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
            }
        };
        // 打开新增菜单弹窗
        const onOpenDeptDialog = (type: string, value: any) => {
            deptDialog.value.openDialog(type, value, state.tableData.data);
        };
        // 删除当前行
        const onTabelRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除部门：${row.depId}, 是否继续?`, '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                let res = await departmentApi().deleteDepartment({depId:row.depId})
                if(res.data.code ==='200'){
                    ElMessage({
                        type:'success',
                        duration:2000,
                        message:'删除成功'
                    })
                    await initTableData()
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }).catch(() => {});
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            deptDialog,
            initTableData,
            onOpenDeptDialog,
            onTabelRowDel,
            ...toRefs(state),
        };
    },
    name: 'systemDept',
    components: { deptDialog },
    setup() {
        const deptDialog = ref();
        const state = reactive<TableDataState>({
            tableData: {
                data: [],
                total: 0,
                loading: false
            }
        });
        // 初始化表格数据
        const initTableData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.tableData.data = res.data.data;
                state.tableData.total = state.tableData.data.length;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        // 打开新增菜单弹窗
        const onOpenDeptDialog = (type: string, value: any) => {
            deptDialog.value.openDialog(type, value, state.tableData.data);
        };
        // 删除当前行
        const onTabelRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除部门：${row.depId}, 是否继续?`, '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await departmentApi().deleteDepartment({ depId: row.depId });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
        });
        return {
            deptDialog,
            initTableData,
            onOpenDeptDialog,
            onTabelRowDel,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/menu/component/menuDialog.vue

@@ -5,15 +5,7 @@
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                :options="menuData"
                                :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                placeholder="请选择上级菜单"
                                clearable
                                class="w100"
                                v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                            <el-cascader :options="menuData" :props="{ checkStrictly: true, value: 'id', label: 'title' }" placeholder="请选择上级菜单" clearable class="w100" v-model="ruleForm.menuSuperior"> </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -56,13 +48,7 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="项目名">
                            <el-select
                                @change="handelMenu"
                                v-model="ruleForm.projectId"
                                controls-position="right"
                                placeholder="请输入排序"
                                class="w100"
                            >
                            <el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
                                <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
                            </el-select>
                        </el-form-item>
@@ -98,7 +84,7 @@
import { useRoutesList } from '/@/stores/routesList';
import { i18n } from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue';
import { useMenuApi } from '/@/api/menu/index';
import { useMenuApi } from '/@/api/systemManage/menu/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

 src/views/system/menu/index.vue

@@ -66,13 +66,13 @@
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
import { useMenuApi } from '/@/api/menu';
import { useMenuApi } from '/@/api/systemManage/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 { useRoleApi } from '/@/api/role';
import { useRoleApi } from '/@/api/systemManage/role';

export default defineComponent({
    name: 'systemMenu',

 src/views/system/role/component/roleDialog.vue

@@ -33,7 +33,7 @@
<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, defineComponent } from 'vue';
import { useRoleApi } from '/@/api/role';
import { useRoleApi } from '/@/api/systemManage/role';

// 定义接口来定义对象的类型
interface MenuDataTree {

 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>

 src/views/system/user/component/userDialog.vue

@@ -22,15 +22,7 @@
                    </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-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">
@@ -85,7 +77,7 @@
<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
import { userApi } from '/@/api/systemManage/user';

// 定义接口来定义对象的类型
interface DeptData {}

 src/views/system/user/index.vue

@@ -34,34 +34,13 @@
                <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
                        >
                        <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>
            <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>
@@ -73,9 +52,9 @@
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/user';
import { departmentApi } from '/@/api/department';
import { useRoleApi } from '/@/api/role';
import { userApi } from '/@/api/systemManage/user';
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';

// 定义接口来定义对象的类型
interface TableDataRow {