更新首页登录页

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>
@@ -69,15 +69,16 @@
    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 userInfo = useUserInfo();
            const { userInfos } = storeToRefs(userInfo);
            const routeToStore = useRoutesList(pinia);
            const { routesList } = storeToRefs(routeToStore);
@@ -86,6 +87,8 @@
            const state = reactive<LoginState>({
                tabsActiveName: 'account',
                isScan: false,
                count: 0,
                projectId: '1'
            });
            // 获取布局配置信息
            const getThemeConfig = computed(() => {
@@ -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 {
                render,
                logoMini,
                onLoginOut,
                loginIconTwo,
                getThemeConfig,
                renderMenu,
                toSpecialWorkSys,
                ...toRefs(state),
                ...toRefs(state)
            };
        },
    });

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

@@ -31,7 +31,7 @@
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
@@ -41,22 +41,22 @@
<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
        depName: string;
        depInfo: string;
        parentDepId: string;
    };
    deptData: Array<TableDataRow>;
}
@@ -70,24 +70,24 @@
            departmentForm: {
                depName:'',
                parentDepId:'',
                depInfo:'',
                depInfo: ''
            },
            deptData: [], // 部门数据
            deptData: [] // 部门数据
        });
        // 打开弹窗
        const openDialog = (type:string, value: any,departmentList: []) => {
            state.isShowDialog = true;
            state.deptData = JSON.parse(JSON.stringify(departmentList))
            state.deptData = JSON.parse(JSON.stringify(departmentList));
            if(type === '新增'){
                state.title = '新增部门'
                state.title = '新增部门';
                state.departmentForm = {
                    depName:'',
                    parentDepId:'',
                    depInfo:'',
                }
                    depInfo: ''
                };
            }else{
                state.title = '修改部门'
                state.departmentForm = JSON.parse(JSON.stringify(value))
                state.title = '修改部门';
                state.departmentForm = JSON.parse(JSON.stringify(value));
            }
        };
        // 关闭弹窗
@@ -101,43 +101,41 @@
        // 新增
        const onSubmit = async () => {
            if(state.title === '新增部门'){
                let res = await departmentApi().addDepartment(state.departmentForm)
                let res = await departmentApi().addDepartment(state.departmentForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'部门新增成功',
                        duration:2000
                    })
                    });
                    closeDialog();
                    context.emit('getDepartmentList')
                    context.emit('getDepartmentList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }else{
                let res = await departmentApi().modDepartment(state.departmentForm)
                let res = await departmentApi().modDepartment(state.departmentForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'部门修改成功',
                        duration:2000
                    })
                    });
                    closeDialog();
                    context.emit('getDepartmentList')
                    context.emit('getDepartmentList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }
        };
        // 初始化部门数据
        const initTableData = () => {

        };
        const initTableData = () => {};
        // 页面加载时
        onMounted(() => {
            initTableData();
@@ -147,8 +145,8 @@
            closeDialog,
            onCancel,
            onSubmit,
            ...toRefs(state),
            ...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

@@ -3,13 +3,7 @@
        <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-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>
@@ -39,7 +33,7 @@
                </el-table-column>
                <el-table-column label="权限标识" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.meta.roles }}</span>
                        <span>{{ parseRole(scope.row.meta.roles) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" show-overflow-tooltip width="80">
@@ -66,28 +60,30 @@
</template>

<script lang="ts">
    import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
    import { RouteRecordRaw } from 'vue-router';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
    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 { 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 },
    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 },
@@ -101,7 +97,7 @@
                    { id: '9', name: '设备综合管控系统', key: 8 },
                    { id: '10', name: '安全知识图谱系统', key: 9 },
                    { id: '11', name: '危险化学品全生命周期安全', key: 10 }
                ],
            ]
            });
            // // 获取 vuex 中的路由
            // const menuTableData = computed(() => {
@@ -109,69 +105,96 @@
            // });
            // 打开新增菜单弹窗
            const onOpenMenuDialog = (type: string,value: any) => {
                menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
            menuDialog.value.openDialog(type, value, state.projectList, state.projectId, state.roleList);
            };
            // 打开编辑菜单弹窗

            // 删除当前行
            const deleteMenu =  (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await useMenuApi().deleteMenu({id:row.id})
                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()
                        });
                        await getMenuList();
                        if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                        });
                    }
                }).catch(() => {});
                })
                .catch(() => {});
            };
            const getMenuList = async () => {
                let res = await useMenuApi().getMenuAdmin(state.projectId)
            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()
                state.menuTableData = res.data.data;
                if (Session.get('projectId') == state.projectId) await initBackEndControlRoutes();
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                });
            }
        };

        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()
            let res = await useMenuApi().getProjectList();
                if(res.data.code === '200'){
                    state.menuTableData = res.data.data
                    if(Session.get('projectId') == state.projectId) await initBackEndControlRoutes()
                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()
            getMenuList();
            getRoleList();
            });
            return {
            parseRole,
                getMenuList,
                menuDialog,
                onOpenMenuDialog,
                deleteMenu,
                ...toRefs(state),
            ...toRefs(state)
            };
        },
    }
    });
</script>

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

@@ -23,7 +23,7 @@
            <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>
                    <el-button type="primary" @click="onSubmit" v-throttle size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
@@ -33,7 +33,7 @@
<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 {
@@ -42,8 +42,8 @@
    children?: MenuDataTree[];
}
interface RoleState {
    title:string,
    buttonName:string,
    title: string;
    buttonName: string;
    isShowRoleDialog: boolean;
    roleForm: {
        roleName: string;
@@ -67,64 +67,64 @@
            roleForm: {
                roleName: '', // 角色名称
                roleCode: '', // 角色标识
                roleInfo: '', // 排序
                roleInfo: '' // 排序
            },
            menuData: [],
            menuProps: {
                children: 'children',
                label: 'label',
            },
                label: 'label'
            }
        });
        // 打开弹窗
        const openDialog = (type: string, value: any) => {
            state.isShowRoleDialog = true;
            if(type === '新增'){
                state.title = '新增角色'
                state.buttonName = '新增'
                state.title = '新增角色';
                state.buttonName = '新增';
                state.roleForm = {
                    roleName:'',
                    roleCode:'',
                    roleInfo:'',
                }
                    roleInfo: ''
                };
            }else{
                state.title = '修改角色'
                state.buttonName = '修改'
                state.roleForm = JSON.parse(JSON.stringify(value))
                state.title = '修改角色';
                state.buttonName = '修改';
                state.roleForm = JSON.parse(JSON.stringify(value));
            }
        };
        // 新增
        const onSubmit = async () => {
            if(state.title === '新增角色'){
                let res = await useRoleApi().addRole(state.roleForm)
                let res = await useRoleApi().addRole(state.roleForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'角色新增成功',
                        duration:2000
                    })
                    state.isShowRoleDialog = false
                    context.emit('refreshRoleList')
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }else{
                let res = await useRoleApi().modRole(state.roleForm)
                let res = await useRoleApi().modRole(state.roleForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'角色修改成功',
                        duration:2000
                    })
                    state.isShowRoleDialog = false
                    context.emit('refreshRoleList')
                    });
                    state.isShowRoleDialog = false;
                    context.emit('refreshRoleList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }
        };
@@ -132,9 +132,9 @@
        return {
            onSubmit,
            openDialog,
            ...toRefs(state),
            ...toRefs(state)
        };
    },
    }
});
</script>


 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

@@ -16,13 +16,7 @@
                    <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-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
@@ -30,7 +24,7 @@
                        <el-form-item label="部门">
                            <el-cascader
                                :options="departmentData"
                                :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
@@ -45,20 +39,19 @@
                        </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.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 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>
@@ -82,7 +75,7 @@
            <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>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">新 增</el-button>
                </span>
            </template>
        </el-dialog>
@@ -92,19 +85,14 @@
<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,
    title: string;
    isShowUserDialog: boolean;
    userForm: {
        username: string;
@@ -113,14 +101,15 @@
        depId: number | null;
        phone: string;
        email: string;
        sex: number | null;
        gender: number | null;
        password: string;
        expireTime: string;
        status: number;
        identify: string;
    };
    departmentData: Array<DeptData>;
    roleData: Array<roleData>;
    sexList:Array<sexData>,
    sexList: Array<sexData>;
}

export default defineComponent({
@@ -136,14 +125,18 @@
                depId:null, // 部门
                phone: '', // 手机号
                email: '', // 邮箱
                sex: null, // 性别
                identify: '',
                gender: null, // 性别
                password: '', // 账户密码
                expireTime: '', // 账户过期
                status: 1, // 用户状态
                status: 1 // 用户状态
            },
            departmentData: [], // 部门数据
            roleData:[],//角色数据
            sexList:[{id:1,name:'男'},{id:0,name:'女'}]
            sexList: [
                { id: 1, name: '男' },
                { id: 0, name: '女' }
            ]
        });
        // 打开弹窗
        const openDialog = (type: string,value: any,departmentList:[], roleList: []) => {
@@ -151,7 +144,7 @@
            state.departmentData = departmentList;
            state.roleData = roleList;
            if(type === '新增'){
                state.title = '新增用户'
                state.title = '新增用户';
                state.userForm = {
                    username: '',
                    realName: '',
@@ -159,63 +152,62 @@
                    depId: null,
                    phone: '',
                    email: '',
                    sex: null,
                    identify: '',
                    gender: null,
                    password: '',
                    expireTime: '',
                    status: 1,
                }
                    status: 1
                };
            }else{
                state.title = '修改用户'
                state.userForm = JSON.parse(JSON.stringify(value))
                state.title = '修改用户';
                state.userForm = JSON.parse(JSON.stringify(value));
            }
        };


        // 新增修改
        const onSubmit = async () => {
            if(state.title === '新增用户'){
                let res = await userApi().addUser(state.userForm)
                let res = await userApi().addUser(state.userForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'用户新增成功',
                        duration:2000
                    })
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList')
                    context.emit('getUserList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }else{
                let res = await userApi().modUser(state.userForm)
                let res = await userApi().modUser(state.userForm);
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'用户修改成功',
                        duration:2000
                    })
                    });
                    state.isShowUserDialog = false;
                    context.emit('getUserList')
                    context.emit('getUserList');
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                    });
                }
            }
        };

        // 页面加载时
        onMounted(() => {
        });
        onMounted(() => {});
        return {
            openDialog,
            onSubmit,
            ...toRefs(state),
            ...toRefs(state)
        };
    },
    }
});
</script>

 src/views/system/user/index.vue

@@ -34,15 +34,25 @@
                <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="mt15"
                class="page-position"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="userTableData.listQuery.pageIndex"
@@ -52,6 +62,8 @@
                :total="userTableData.total"
            >
            </el-pagination>
            <br />
            <br />
        </el-card>
        <userDialog ref="userRef" @getUserList = "initUserTableData"/>
    </div>
@@ -61,9 +73,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/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 {
@@ -80,9 +92,7 @@
    describe: string;
    createTime: string;
}
interface DepartmentDataRow{

}
interface DepartmentDataRow {}
interface TableDataState {
    userTableData: {
        data: Array<TableDataRow>;
@@ -90,9 +100,9 @@
        loading: boolean;
        listQuery: {
            searchParams:{
                username:string,
                realName:string,
            },
                username: string;
                realName: string;
            };
            pageIndex: number;
            pageSize: number;
        };
@@ -114,52 +124,52 @@
                listQuery: {
                    searchParams:{
                        username:'',
                        realName:'',
                        realName: ''
                    },
                    pageIndex: 1,
                    pageSize: 10,
                },
                    pageSize: 10
                }
            },
            departmentList:[],
            roleList:[],
            roleList: []
        });
        // 初始化表格数据
        const initUserTableData = async () => {
            let res = await userApi().getUserList(state.userTableData.listQuery)
            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;
                state.userTableData.total = res.data.total;
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
                });
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList()
            let res = await departmentApi().getDepartmentList();
            if(res.data.code === '200'){
                state.departmentList = res.data.data
                state.departmentList = res.data.data;
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
                });
            }
        }
        };

        const getRoleData = async () => {
            let res = await useRoleApi().getRoleList()
            let res = await useRoleApi().getRoleList();
            if(res.data.code === '200'){
                state.roleList = res.data.data
                state.roleList = res.data.data;
            }else{
                ElMessage({
                    type:'warning',
                    message:res.data.msg
                })
                });
            }
        }
        };

        // 打开新增修改用户弹窗
        const onOpenUserDialog = (type: string,value: any) => {
@@ -171,20 +181,22 @@
            ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                type: 'warning'
            })
                .then(() => {
                    ElMessage.success('删除成功');
            }).catch(() => {});
                })
                .catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
            initUserTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
            state.userTableData.listQuery.pageIndex = val;
            initUserTableData();
        };
        // 页面加载时
        onMounted(() => {
@@ -199,8 +211,8 @@
            onHandleSizeChange,
            initUserTableData,
            onHandleCurrentChange,
            ...toRefs(state),
            ...toRefs(state)
        };
    },
    }
});
</script>