更新首页登录页

Your Name

2022-07-21 dd2576bf9887b29c47d128cd6c070f8d70756865

更新首页登录页

 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;
}

 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';

 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 = '/'

 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)
            };
        },
    });

 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>

 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 {

 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 = '新增';

 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>

 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>

 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 {

 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>

 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>