'菜单'

Your Name

2022-07-04 41b20b89eb03e1a7e52e7e31ce3fd3f240f67c46

'菜单'

 .env.development

@@ -2,6 +2,6 @@
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.35:8008'
VITE_API_URL = 'http://192.168.0.8:8008'

# VITE_API_URL = 'http://192.168.0.8:8008'

 src/api/doubleProventSystem/productionDevice/index.ts

 src/api/user/index.ts

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

export function userApi() {
    return {
        getUserList: (data: any) => {
            return request({
                url: `/account/page/list`,
                method: 'post',
                data:data
            });
        },
        addUser: (data: object) => {
            return request({
                url: `/account/add`,
                method: 'post',
                data:data
            });
        },
        modUser: (data: object) => {
            return request({
                url: `/account/mod`,
                method: 'post',
                data:data
            });
        },
    };
}

 src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue

对比新文件
@@ -0,0 +1,76 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <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.produceDeviceName" 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="roleForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险等级">
                            <el-select v-model="roleForm.riskLevel" placeholder="请选择风险等级"clearable filterable></el-select>
                        </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.location" type="textarea" placeholder="请输入区域位置" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    interface stateType{
        isShowProductionDeviceDialog:Boolean,
        productionDeviceForm:{
            produceDeviceName: string,
            depName: number | null,
            riskLevel: number | null,
            location: string,
        }
    }
    import { reactive, toRefs } from 'vue'
    export default {
        name: "productionDeviceDialog",
        setup() {
            const state = reactive<stateType>({
                isShowProductionDeviceDialog: false,
                productionDeviceForm: {
                    produceDeviceName: '',
                    depName: null,
                    riskLevel: null,
                    location: '',
                },
            });

            const openProductionDeviceDialog = () => {
                state.isShowProductionDeviceDialog = true;
            };

            return{
                ...toRefs(state),
                openProductionDeviceDialog,
            };
        }
    }
</script>

<style scoped>

</style>

 src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue

@@ -13,7 +13,7 @@
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增角色
                    新增装置
                </el-button>
            </div>
            <el-table :data="productionDeviceData.data" style="width: 100%">
@@ -36,15 +36,15 @@
                </el-table-column>
            </el-table>
        </el-card>
        <roleDialog ref="roleDialogRef" @refreshRoleList="initRoleTableData"/>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshRoleList="initRoleTableData"/>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import roleDialog from '/@/views/system/role/component/roleDialog.vue';
    import {productionDeviceApi} from "/@/api/productionDevice";
    import productionDeviceDialog from './components/productionDeviceDialog.vue';
    import {productionDeviceApi} from "/@/api/doubleProventSystem/productionDevice";

    // 定义接口来定义对象的类型
    interface TableData {
@@ -74,9 +74,9 @@

    export default defineComponent({
        name: 'productionDevice',
        components: { roleDialog },
        components: { productionDeviceDialog },
        setup() {
            const roleDialogRef = ref();
            const productionDeviceDialogRef = ref();
            const state = reactive<TableDataState>({
                productionDeviceData: {
                    data: [],
@@ -105,9 +105,9 @@
                    })
                }
            };
            // 打开新增角色弹窗
            // 打开生产装置弹窗
            const onOpenDialogRef = (type: string, value: any) => {
                roleDialogRef.value.openDialog(type, value);
                productionDeviceDialogRef.value.openProductionDeviceDialog(type, value);
            };
            // 删除角色
            const onRowDel = (row: any) => {
@@ -124,11 +124,11 @@
            }
            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.productionDeviceData.param.pageSize = val;
                state.productionDeviceData.params.pageSize = val;
            };
            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.productionDeviceData.param.pageNum = val;
                state.productionDeviceData.params.pageIndex = val;
            };
            // 页面加载时
            onMounted(() => {
@@ -136,13 +136,13 @@
            });
            return {
                onRowDel,
                roleDialog,
                handleSearch,
                roleDialogRef,
                onOpenDialogRef,
                initProductionDeviceTableData,
                onHandleSizeChange,
                onHandleCurrentChange,
                productionDeviceDialog,
                productionDeviceDialogRef,
                initProductionDeviceTableData,
                ...toRefs(state),
            };
        },

 src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue

对比新文件
@@ -0,0 +1,13 @@
<template>

</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

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

@@ -132,7 +132,7 @@
                        isAffix: false, // 是否固定
                        isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                        isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                        roles: '', // 权限标识，取角色管理
                        roles: [], // 权限标识，取角色管理
                    },
                    btnPower: '', // 菜单类型为按钮时，权限标识
                },
@@ -176,7 +176,7 @@
                            isAffix: false,
                            isLink: '',
                            isIframe: false,
                            roles: '',
                            roles: [],
                        },
                        btnPower: '',
                    }

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