基础模块

Your Name

2022-07-11 efb4569338df5aeeba8317921bb5ee164dc03ed9

基础模块

 src/api/department/index.ts

@@ -2,24 +2,35 @@

export function departmentApi() {
    return {
        // v2
        getDepartmentList: () => {
            return request({
                url: `/department/list`,
                method: 'post',
                method: 'post'
            });
        },
        // v2
        addDepartment: (data: object) => {
            return request({
                url: `/department/add`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v2
        modDepartment: (data: object) => {
            return request({
                url: `/department/mod`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        deleteDepartment: (value?: object) => {
            return request({
                url: `/department/del`,
                method: 'post',
                data: value
            });
        },
    };

 src/api/menu/index.ts

@@ -8,32 +8,43 @@
 */
export function useMenuApi() {
    return {
        // v2
        getMenuAdmin: (value?: string) => {
            return request({
                url: `/auth/menu?projectId= ${value}`,
                method: 'post',
                method: 'post'
            });
        },
        // v1
        addMenu: (value?: object) => {
            return request({
                url: `/menu/add`,
                method: 'post',
                data:value
                data: value
            });
        },
        // v1
        modMenu: (value?: object) => {
            return request({
                url: `/menu/mod`,
                method: 'post',
                data:value
                data: value
            });
        },
        // v1
        deleteMenu: (value?: object) => {
            return request({
                url: `/menu/del`,
                method: 'post',
                data:value,
                data: value
            });
        },
        // v1
        getProjectList: () => {
            return request({
                url: `/project/list`,
                method: 'post'
            });
        }
    };
}

 src/api/role/index.ts

@@ -2,10 +2,35 @@

export function useRoleApi() {
    return {
        // v2
        getRoleList: () => {
            return request({
                url: `/role/list`,
                method: 'post'
            });
        },
        // v2
        addRole: (data: object) => {
            return request({
                url: `/role/add`,
                method: 'post',
                data: data
            });
        },
        // v2
        modRole: (data: object) => {
            return request({
                url: `/role/mod`,
                method: 'post',
                data: data
            });
        },
        // v2
        deleteRole: (value?: object) => {
            return request({
                url: `/role/del`,
                method: 'post',
                data: value
            });
        },
    };

 src/api/user/index.ts

对比新文件
@@ -0,0 +1,37 @@
import request from '/@/utils/request';

export function userApi() {
    return {
        // v1
        getUserList: (data: any) => {
            return request({
                url: `/account/page/list`,
                method: 'post',
                data: data
            });
        },
        // v1
        addUser: (data: object) => {
            return request({
                url: `/account/add`,
                method: 'post',
                data: data
            });
        },
        // v1
        modUser: (data: object) => {
            return request({
                url: `/account/mod`,
                method: 'post',
                data: data
            });
        },
        // v1
        getUserLByDepartment: (depId: number | null) => {
            return request({
                url: `/account/dep/list?depId=${depId}`,
                method: 'get'
            });
        }
    };
}

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

@@ -7,23 +7,23 @@
                        <el-form-item label="上级部门">
                            <el-cascader
                                :options="deptData"
                                :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                                :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                placeholder="请选择部门"
                                clearable
                                class="w100"
                                v-model="departmentForm.struct"
                                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.name" placeholder="请输入部门名称" clearable></el-input>
                            <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.info" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
                            <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
@@ -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" @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
@@ -45,7 +45,6 @@

// 定义接口来定义对象的类型
interface TableDataRow {
    struct: Array<string>;
    name:string,
    info:string,
    parentId:string,
@@ -55,10 +54,9 @@
    title:string;
    isShowDialog: boolean;
    departmentForm: {
        struct: Array<string>;
        name:string,
        info:string,
        parentId:string
        depName:string,
        depInfo:string,
        parentDepId:string
    };
    deptData: Array<TableDataRow>;
}
@@ -70,10 +68,9 @@
            title:'',
            isShowDialog: false,
            departmentForm: {
                name:'',
                parentId:'',
                info:'',
                struct:[]
                depName:'',
                parentDepId:'',
                depInfo:'',
            },
            deptData: [], // 部门数据
        });
@@ -84,13 +81,13 @@
            if(type === '新增'){
                state.title = '新增部门'
                state.departmentForm = {
                    name:'',
                    parentId:'',
                    info:'',
                    struct:[]
                    depName:'',
                    parentDepId:'',
                    depInfo:'',
                }
            }else{
                state.title = '编辑部门'
                state.title = '修改部门'
                state.departmentForm = JSON.parse(JSON.stringify(value))
            }
        };
        // 关闭弹窗
@@ -103,20 +100,16 @@
        };
        // 新增
        const onSubmit = async () => {
            if(state.departmentForm.struct && state.departmentForm.struct !== []){
                let departmentId = JSON.parse(JSON.stringify(state.departmentForm.struct))
                state.departmentForm.parentId = departmentId[departmentId.length - 1]
            }
            if(state.title === '新增部门'){
                let res = await departmentApi().addDepartment(state.departmentForm)
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'菜单新增成功',
                        message:'部门新增成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getMenuList')
                    context.emit('getDepartmentList')
                }else{
                    ElMessage({
                        type:'warning',
@@ -128,11 +121,11 @@
                if(res.data.code === '200'){
                    ElMessage({
                        type:'success',
                        message:'菜单修改成功',
                        message:'部门修改成功',
                        duration:2000
                    })
                    closeDialog();
                    context.emit('getMenuList')
                    context.emit('getDepartmentList')
                }else{
                    ElMessage({
                        type:'warning',

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

文件已删除

 src/views/system/department/index.vue

@@ -19,18 +19,11 @@
            <el-table
                :data="tableData.data"
                style="width: 100%"
                row-key="id"
                default-expand-all
                row-key="depId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
                <el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="status" label="部门状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="info" label="部门描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="depName" label="部门名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="depInfo" label="部门描述" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="140">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDeptDialog('新增','')">新增</el-button>
@@ -40,7 +33,7 @@
                </el-table-column>
            </el-table>
        </el-card>
        <deptDialog ref="deptDialog" />
        <deptDialog ref="deptDialog" @getDepartmentList="initTableData"/>
    </div>
</template>

@@ -49,6 +42,7 @@
import { ElMessageBox, ElMessage } from 'element-plus';
import deptDialog from '/@/views/system/department/component/deptDialog.vue';
import {departmentApi} from "/@/api/department";
import {useRoleApi} from "/@/api/role";

// 定义接口来定义对象的类型
interface TableDataRow {
@@ -56,7 +50,7 @@
    status: boolean;
    parentId: number;
    info: string;
    id: number;
    depId: number;
    children?: TableDataRow[];
}
interface TableDataState {
@@ -93,18 +87,31 @@
            }
        };
        // 打开新增菜单弹窗
        const onOpenDeptDialog = (type: string,value: any) => {
            deptDialog.value.openDialog(type,value,state.tableData.data);
        const onOpenDeptDialog = (type: string, value: any) => {
            deptDialog.value.openDialog(type, value, state.tableData.data);
        };
        // 删除当前行
        const onTabelRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除部门：${row.id}, 是否继续?`, '提示', {
            ElMessageBox.confirm(`此操作将永久删除部门：${row.depId}, 是否继续?`, '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                    ElMessage.success('删除成功');
            }).catch(() => {});
            }).then(async () => {
                let res = await departmentApi().deleteDepartment({depId:row.depId})
                if(res.data.code ==='200'){
                    ElMessage({
                        type:'success',
                        duration:2000,
                        message:'删除成功'
                    })
                    await initTableData()
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }).catch(() => {});
        };
        // 页面加载时
        onMounted(() => {
@@ -112,6 +119,7 @@
        });
        return {
            deptDialog,
            initTableData,
            onOpenDeptDialog,
            onTabelRowDel,
            ...toRefs(state),

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

@@ -1,267 +1,267 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                    :options="menuData"
                                    :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                    placeholder="请选择上级菜单"
                                    clearable
                                    class="w100"
                                    v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                        </el-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.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-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-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-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单图标">
                            <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-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-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-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
                                <el-option
                                        v-for="item in projectList"
                                        :key="item.key"
                                        :value="item.id"
                                        :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单排序">
                            <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否隐藏">
                            <el-radio-group v-model="ruleForm.meta.isHide">
                                <el-radio :label="true">隐藏</el-radio>
                                <el-radio :label="false">不隐藏</el-radio>
                            </el-radio-group>
                        </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">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                :options="menuData"
                                :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                placeholder="请选择上级菜单"
                                clearable
                                class="w100"
                                v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                        </el-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.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-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-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-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" />
                            <!--                            <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-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-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-select
                                @change="handelMenu"
                                v-model="ruleForm.projectId"
                                controls-position="right"
                                placeholder="请输入排序"
                                class="w100"
                            >
                                <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单排序">
                            <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否隐藏">
                            <el-radio-group v-model="ruleForm.meta.isHide">
                                <el-radio :label="true">隐藏</el-radio>
                                <el-radio :label="false">不隐藏</el-radio>
                            </el-radio-group>
                        </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">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    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/menu/index'
    import { ElMessageBox, ElMessage } from 'element-plus';
    import {Session} from "/@/utils/storage";
    // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
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/menu/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

    export default defineComponent({
        name: 'systemAddMenu',
        components: { IconSelector },
        setup(props,context) {
            const stores = useRoutesList();
            const { routesList } = storeToRefs(stores);
            const state = reactive({
                isShowDialog: false,
                title:'',
                buttonName:'',
                // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
                ruleForm: {
                    projectId:'',
                    parentId:0,
                    menuSuperior: [], // 上级菜单
                    menuType: 'menu', // 菜单类型
                    name: '', // 路由名称
                    component: '', // 组件路径
                    priority: 0, // 菜单排序
                    path: '', // 路由路径
                    redirect: '', // 路由重定向，有子集 children 时
                    meta: {
                        title: '', // 菜单名称
                        icon: '', // 菜单图标
                        isHide: false, // 是否隐藏
                        isKeepAlive: true, // 是否缓存
                        isAffix: false, // 是否固定
                        isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                        isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                        roles: '', // 权限标识，取角色管理
                    },
                    btnPower: '', // 菜单类型为按钮时，权限标识
                },
                menuData: [], // 上级菜单数据
                projectList:[
                ],
            });
            // 获取 vuex 中的路由
            const getMenuList = (routes: any) => {
                const arr: any = [];
                routes.map((val: any) => {
                    val['title'] = val.meta.title;
                    val['id'] = val.id
                    arr.push(val);
                    if (val.children) getMenuList(val.children);
                });
                return arr;
            };
            // 打开弹窗
            const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
                state.projectList = JSON.parse(JSON.stringify(projectList))
                state.isShowDialog = true;
                if(type === '新增'){
                    state.buttonName = '新增'
                    state.title = '新增菜单'
                    state.ruleForm = {
                        projectId:projectId,
                        parentId:0,
                        menuSuperior: [],
                        menuType: 'menu',
                        name: '',
                        component: '',
                        priority: 0,
                        path: '',
                        redirect: '',
                        meta: {
                            title: '',
                            icon: '',
                            isHide: false,
                            isKeepAlive: true,
                            isAffix: false,
                            isLink: '',
                            isIframe: false,
                            roles: '',
                        },
                        btnPower: '',
                    }
                }else{
                    state.buttonName = '修改'
                    state.title = '修改菜单'
                    state.ruleForm = JSON.parse(JSON.stringify(value))
                    state.ruleForm.projectId = projectId.toString()
                }
                handelMenu()
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            // 是否内嵌下拉改变
            // const onSelectIframeChange = () => {
            //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
            //     else state.ruleForm.isLink = false;
            // };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            // 新增
            const onSubmit = async () => {
                if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
                    let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
                    state.ruleForm.parentId = menuId[menuId.length - 1]
                }
                if(state.title === '新增菜单'){
                    let res = await useMenuApi().addMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单新增成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }else{
                    let res = await useMenuApi().modMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单修改成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }
export default defineComponent({
    name: 'systemAddMenu',
    components: { IconSelector },
    setup(props, context) {
        const stores = useRoutesList();
        const { routesList } = storeToRefs(stores);
        const state = reactive({
            isShowDialog: false,
            title: '',
            buttonName: '',
            // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
            ruleForm: {
                projectId: '',
                parentId: 0,
                menuSuperior: [], // 上级菜单
                menuType: 'menu', // 菜单类型
                name: '', // 路由名称
                component: '', // 组件路径
                priority: 0, // 菜单排序
                path: '', // 路由路径
                redirect: '', // 路由重定向，有子集 children 时
                meta: {
                    title: '', // 菜单名称
                    icon: '', // 菜单图标
                    isHide: false, // 是否隐藏
                    isKeepAlive: true, // 是否缓存
                    isAffix: false, // 是否固定
                    isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                    isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                    roles: [] // 权限标识，取角色管理
                },
                btnPower: '' // 菜单类型为按钮时，权限标识
            },
            menuData: [], // 上级菜单数据
            projectList: []
        });
        // 获取 vuex 中的路由
        const getMenuList = (routes: any) => {
            const arr: any = [];
            routes.map((val: any) => {
                val['title'] = val.meta.title;
                val['id'] = val.id;
                arr.push(val);
                if (val.children) getMenuList(val.children);
            });
            return arr;
        };
        // 打开弹窗
        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
            state.projectList = JSON.parse(JSON.stringify(projectList));
            state.isShowDialog = true;
            if (type === '新增') {
                state.buttonName = '新增';
                state.title = '新增菜单';
                state.ruleForm = {
                    projectId: projectId,
                    parentId: 0,
                    menuSuperior: [],
                    menuType: 'menu',
                    name: '',
                    component: '',
                    priority: 0,
                    path: '',
                    redirect: '',
                    meta: {
                        title: '',
                        icon: '',
                        isHide: false,
                        isKeepAlive: true,
                        isAffix: false,
                        isLink: '',
                        isIframe: false,
                        roles: []
                    },
                    btnPower: ''
                };
            } else {
                state.buttonName = '修改';
                state.title = '修改菜单';
                state.ruleForm = JSON.parse(JSON.stringify(value));
                state.ruleForm.projectId = projectId.toString();
            }
            handelMenu();
        };
        // 关闭弹窗
        const closeDialog = () => {
            state.isShowDialog = false;
        };
        // 是否内嵌下拉改变
        // const onSelectIframeChange = () => {
        //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
        //     else state.ruleForm.isLink = false;
        // };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = async () => {
            if (state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []) {
                let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior));
                state.ruleForm.parentId = menuId[menuId.length - 1];
            }
            if (state.title === '新增菜单') {
                let res = await useMenuApi().addMenu(state.ruleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '菜单新增成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getMenuList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await useMenuApi().modMenu(state.ruleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '菜单修改成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getMenuList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }

                // closeDialog(); // 关闭弹窗
                // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
            };
            // closeDialog(); // 关闭弹窗
            // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
        };

            const handelMenu = async () => {
                let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
                state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            }
            // 页面加载时
            onMounted(async () => {
                // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
                // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            });
            return {
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                handelMenu,
                ...toRefs(state),
            };
        },
    });
        const handelMenu = async () => {
            let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
            state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
        };
        // 页面加载时
        onMounted(async () => {
            // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
            // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
        });
        return {
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            handelMenu,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/menu/index.vue

@@ -146,6 +146,20 @@
                    })
                }
            };

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

            onMounted( () => {
                getMenuList()
            });

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

文件已删除

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

文件已删除

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

对比新文件
@@ -0,0 +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>
</template>

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

// 定义接口来定义对象的类型
interface MenuDataTree {
    id: number;
    label: string;
    children?: MenuDataTree[];
}
interface RoleState {
    title:string,
    buttonName:string,
    isShowRoleDialog: boolean;
    roleForm: {
        roleName: string;
        roleCode: string;
        roleInfo: 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: {
                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),
        };
    },
});
</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;
    }
}
</style>

 src/views/system/role/index.vue

@@ -9,7 +9,7 @@
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
@@ -18,55 +18,35 @@
            </div>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="code" label="角色标识" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status">启用</el-tag>
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="info" label="角色描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleInfo" label="角色描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole(scope.row)"
                            >修改</el-button
                        >
                        <el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('新增','')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="tableData.param.pageNum"
                background
                v-model:page-size="tableData.param.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
            >
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef" />
        <EditRole ref="editRoleRef" />
        <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddRole from '/@/views/system/role/component/addRole.vue';
import EditRole from '/@/views/system/role/component/editRole.vue';
import roleDialog from '/@/views/system/role/component/roleDialog.vue';
import {useRoleApi} from "/@/api/role";
import {useMenuApi} from "/@/api/menu";
import {Session} from "/@/utils/storage";
import {initBackEndControlRoutes} from "/@/router/backEnd";

// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
@@ -87,10 +67,9 @@

export default defineComponent({
    name: 'systemRole',
    components: { AddRole, EditRole },
    components: { roleDialog },
    setup() {
        const addRoleRef = ref();
        const editRoleRef = ref();
        const roleDialogRef = ref();
        const state = reactive<TableDataState>({
            tableData: {
                data: [],
@@ -103,7 +82,7 @@
            },
        });
        // 初始化表格数据
        const initTableData = async () => {
        const initRoleTableData = async () => {
            let res = await useRoleApi().getRoleList()
            if(res.data.code === '200'){
                state.tableData.data = res.data.data;
@@ -113,15 +92,10 @@
                    message:res.data.msg
                })
            }

        };
        // 打开新增角色弹窗
        const onOpenAddRole = () => {
            addRoleRef.value.openDialog();
        };
        // 打开修改角色弹窗
        const onOpenEditRole = (row: Object) => {
            editRoleRef.value.openDialog(row);
        const onOpenDialogRef = (type: string, value: any) => {
            roleDialogRef.value.openDialog(type, value);
        };
        // 删除角色
        const onRowDel = (row: any) => {
@@ -129,14 +103,25 @@
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
            }).then(async () => {
                let res = await useRoleApi().deleteRole({roleId:row.roleId})
                if(res.data.code ==='200'){
                    ElMessage({
                        type:'success',
                        duration:2000,
                        message:'删除成功'
                    })
                    await initRoleTableData()
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
                }
            }).catch(() => {});
        };
        const handleSearch = () => {
            initTableData()
            initRoleTableData()
        }
        // 分页改变
        const onHandleSizeChange = (val: number) => {
@@ -148,17 +133,17 @@
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
            initRoleTableData();
        });
        return {
            addRoleRef,
            editRoleRef,
            onOpenAddRole,
            onOpenEditRole,
            onRowDel,
            roleDialog,
            handleSearch,
            roleDialogRef,
            onOpenDialogRef,
            initRoleTableData,
            onHandleSizeChange,
            onHandleCurrentChange,
            handleSearch,
            ...toRefs(state),
        };
    },

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

文件已删除

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

文件已删除

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

文件已删除

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

对比新文件
@@ -0,0 +1,221 @@
<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>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {userApi} from "/@/api/user";

// 定义接口来定义对象的类型
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>,
}

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


        // 新增修改
        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),
        };
    },
});
</script>

 src/views/system/user/index.vue

@@ -9,19 +9,20 @@
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
                <el-button size="default" type="success" class="ml10" @click="onOpenUserDialog('新增','')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增用户
                </el-button>
            </div>
            <el-table :data="tableData.data" style="width: 100%">
            <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="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
                <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
                <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>
@@ -30,11 +31,10 @@
                        <el-tag type="info" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></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="onOpenEditUser(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>
@@ -45,24 +45,25 @@
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="tableData.param.pageNum"
                v-model:current-page="userTableData.listQuery.pageIndex"
                background
                v-model:page-size="tableData.param.pageSize"
                v-model:page-size="userTableData.listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
                :total="userTableData.total"
            >
            </el-pagination>
        </el-card>
        <AddUer ref="addUserRef" />
        <EditUser ref="editUserRef" />
        <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 AddUer from '/@/views/system/user/component/addUser.vue';
import EditUser from '/@/views/system/user/component/editUser.vue';
import userDialog from '/@/views/system/user/component/userDialog.vue';
import {userApi} from "/@/api/user";
import {departmentApi} from "/@/api/department";
import {useRoleApi} from "/@/api/role";

// 定义接口来定义对象的类型
interface TableDataRow {
@@ -79,96 +80,124 @@
    describe: string;
    createTime: string;
}
interface DepartmentDataRow{

}
interface TableDataState {
    tableData: {
    userTableData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
        param: {
            pageNum: number;
        listQuery: {
            searchParams:{
                username:string,
                realName:string,
            },
            pageIndex: number;
            pageSize: number;
        };
    };
    departmentList:[];
    roleList:[];
}

export default defineComponent({
    name: 'systemUser',
    components: { AddUer, EditUser },
    components: { userDialog },
    setup() {
        const addUserRef = ref();
        const editUserRef = ref();
        const userRef = ref();
        const state = reactive<TableDataState>({
            tableData: {
            userTableData: {
                data: [],
                total: 0,
                loading: false,
                param: {
                    pageNum: 1,
                listQuery: {
                    searchParams:{
                        username:'',
                        realName:'',
                    },
                    pageIndex: 1,
                    pageSize: 10,
                },
            },
            departmentList:[],
            roleList:[],
        });
        // 初始化表格数据
        const initTableData = () => {
            const data: Array<TableDataRow> = [];
            for (let i = 0; i < 2; i++) {
                data.push({
                    userName: i === 0 ? 'admin' : 'test',
                    userNickname: i === 0 ? '我是管理员' : '我是普通用户',
                    roleSign: i === 0 ? 'admin' : 'common',
                    department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
                    phone: '12345678910',
                    email: 'vueNextAdmin@123.com',
                    sex: '女',
                    password: '123456',
                    overdueTime: new Date(),
                    status: true,
                    describe: i === 0 ? '不可删除' : '测试用户',
                    createTime: new Date().toLocaleString(),
                });
        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
                })
            }
            state.tableData.data = data;
            state.tableData.total = state.tableData.data.length;
        };
        // 打开新增用户弹窗
        const onOpenAddUser = () => {
            addUserRef.value.openDialog();

        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 onOpenUserDialog = (type: string,value: any) => {
            userRef.value.openDialog(type, value, state.departmentList,state.roleList);
        };
        // 打开修改用户弹窗
        const onOpenEditUser = (row: TableDataRow) => {
            editUserRef.value.openDialog(row);
        };

        // 删除用户
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
            }).then(() => {
                    ElMessage.success('删除成功');
                })
                .catch(() => {});
            }).catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.tableData.param.pageSize = val;
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.tableData.param.pageNum = val;
            state.userTableData.listQuery.pageSize = val;
            initUserTableData()
        };
        // 页面加载时
        onMounted(() => {
            initTableData();
            initUserTableData();
            getDepartmentData();
            getRoleData();
        });
        return {
            addUserRef,
            editUserRef,
            onOpenAddUser,
            onOpenEditUser,
            userRef,
            onOpenUserDialog,
            onRowDel,
            onHandleSizeChange,
            initUserTableData,
            onHandleCurrentChange,
            ...toRefs(state),
        };