project-manager/h5/src/views/underlying/department/index.vue

<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <div class="system-menu-search">
                        <el-input size="default" v-model="state.param2.keyword" placeholder="请输入关键词" style="max-width: 180px"> </el-input>
                        <el-button size="default" type="primary" class="ml10" @click="getTableData()">
                            <el-icon>
                                <ele-Search />
                            </el-icon>
                            查询
                        </el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="onOpenAddEmployee('add')">新增员工</el-button>
                        <el-button type="primary" @click="pass()">审核</el-button>
                        <el-button type="danger" @click="repass()">反审核</el-button>
                        <el-button type="success" @click="importExcel()">导入</el-button>
                        <el-button type="success" @click="exportExcel()">
                            导出
                            <!-- <a :href="state.download_file_url" target="target" download>导出</a> -->
                        </el-button>
                        <el-button type="danger" @click="del()">删除</el-button>
                    </div>
                </div>
            </template>

            <el-row>
                <el-col :span="6">
                    <div class="card-header ml5 mr5 mt5 mb5">
                        <span class="dept-all" @click="deptAll()">全部部门</span>
                        <el-button link type="primary" @click="onOpenAddDept('add')">添加</el-button>
                    </div>
                    <el-tree :data="state.data" :props="defaultProps" @node-click="handleNodeClick" :draggable="false">
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span>{{ node.label }}</span>
                                <span>
                                    <a class="a1" @click="onOpenEditDept('edit',data)"> 编辑 </a>
                                    <a class="a2" @click="remove(node, data)"> 删除 </a>
                                </span>
                            </span>
                        </template>
                    </el-tree>
                </el-col>
                <el-col :span="18">
                    <el-table
                        ref="multipleTableRef"
                        :data="state.tableData"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" width="60" />
                        <el-table-column property="name" label="员工姓名" />
                        <el-table-column property="id_card" label="证件号码" />
                        <el-table-column property="department.name" label="部门" />
                        <el-table-column property="phone" label="电话" width="120" />
                
                        <el-table-column property="valid" label="状态" width="90">
                            <template #default="scope">
                                <el-button link type="danger" size="default" v-if="scope.row.valid == 0">禁用</el-button>
                                <el-button link type="primary" size="default" v-if="scope.row.valid == 1">启用</el-button>
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="审核状态" width="120">
                            <template #default="scope">
                                <el-button link type="danger" v-if="scope.row.is_pass==-1">审核不通过</el-button>
                                <el-button link type="info" v-if="scope.row.is_pass==0">待审核</el-button>
                                <el-button link type="success" v-if="scope.row.is_pass==1">审核通过</el-button>
                            </template>
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="160">
                            <template #default="scope">
                                <div class="disflex">
                                    <!--  :disabled="scope.row.is_pass==1" -->
                                    <el-button link type="primary" size="small" @click="onOpenEditEmployee('edit',scope.row)" :disabled="scope.row.is_pass==1">编辑</el-button>
                                    <el-button link type="primary" size="small" @click="onOpenDetail(scope.row.id)">详情</el-button>
                                    <el-button link type="primary" size="small">
                                        <el-dropdown @command="handleCommand">
                                            <span class="el-dropdown-link">
                                                <span class="dropdown-text">更多</span>
                                                <el-icon class="el-icon--right">
                                                    <arrow-down />
                                                </el-icon>
                                            </span>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item command="取消审核" @click="rePassOne(scope.row)">取消审核</el-dropdown-item>
                                                    <!-- <el-dropdown-item command="工资设置">工资设置</el-dropdown-item> -->
                                                    <el-dropdown-item command="重置登录密码" @click="onOpenResetPassword(scope.row)">重置登录密码</el-dropdown-item>
                                                    <!-- <el-dropdown-item command="查看计件">查看计件</el-dropdown-item> -->
                                                    <el-dropdown-item command="查看员工" @click="onOpenDetail(scope.row.id)">查看员工</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </el-button>
                                </div>
                            </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="state.param2.page"
                        background
                        v-model:page-size="state.param2.list_rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="state.total"
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
		<DeptEditDialog ref="deptEditDialogRef" @refresh="getTableData()" />
		<DeptDialog ref="deptDialogRef" @refresh="getTableData()" />
        <ResetPasswordDialog ref="resetPasswordDialogRef" @refresh="getTableData()" />
        <DetailDialog ref="detailDialogRef" @refresh="getTableData()" />
        <ImportExcelDialog ref="importExcelDialogRef" @refresh="getTableData()" />
        <ExportExcelDialog ref="exportExcelDialogRef" @refresh="getTableData()" />
    </div>
</template>

<script lang="ts" setup name="underlyingDepartment">
    import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
    import { ElTable, ElMessage, ElMessageBox } from 'element-plus';
    import { ArrowDown, Download } from '@element-plus/icons-vue';
    import type Node from 'element-plus/es/components/tree/src/model/node';
    import Department from '/@/api/department/department.ts';
    import config from '/@/config.ts';
    
    const DeptEditDialog = defineAsyncComponent(() => import('/@/views/underlying/department/departEdit.vue'));
    const deptEditDialogRef = ref();
    // 打开新增部门弹窗
    const onOpenAddDept = (type: string) => {
        deptEditDialogRef.value.openDialog(type);
    };
    const onOpenEditDept = (type: string, data: Tree) => {
        deptEditDialogRef.value.openDialog(type, data);
    }

    const DeptDialog = defineAsyncComponent(() => import('/@/views/underlying/department/edit.vue'));
    const deptDialogRef = ref();
    // 打开新增员工弹窗
    const onOpenAddEmployee = (type: string) => {
        deptDialogRef.value.openDialog(type);
    };
    // 打开编辑员工弹窗
    const onOpenEditEmployee = (type: string, row: any) => {
        row = JSON.parse(JSON.stringify(row));
        console.log('row',row);
        deptDialogRef.value.openDialog(type, row);
    };

    const DetailDialog = defineAsyncComponent(() => import('/@/views/underlying/department/detail.vue'));
    const detailDialogRef = ref();
    // 打开详情弹窗
    const onOpenDetail = (id: number) => {
        detailDialogRef.value.openDialog(id);
    };

    interface Tree {
        label: string
        name: string
        children?: Tree[]
        department_id: number
        leader_id: number
        valid: number
    }
    const handleNodeClick = (data: Tree) => {
        console.log(data);
        state.param2.department_id = JSON.parse(JSON.stringify(data)).id;
        console.log('state.param2.department_id',state.param2.department_id);
        getAdminList();
    }
    const data: Tree[] = [
        {
            label: '研发部 1',
            name: '研发部 1',
            department_id: 1,
            leader_id: 1,
            valid: 1,
            children: [
                {
                    label: '研发部 1-1',
                    name: '研发部 1-1',
                    department_id: 1,
                    leader_id: 1,
                    valid: 1,
                    children: [
                        {
                            label: '研发部 1-1-1',
                            name: '研发部 1-1-1',
                            department_id: 1,
                            leader_id: 1,
                            valid: 1,
                        },
                    ],
                },
            ],
        },
        {
            label: '运营部 2',
            name: '运营部 2',
            department_id: 1,
            leader_id: 1,
            valid: 1,
            children: [
                {
                    label: '运营部 2-1',
                    name: '运营部 2-1',
                    department_id: 1,
                    leader_id: 1,
                    valid: 1,
                    children: [
                        {
                            label: '运营部 2-1-1',
                            name: '运营部 2-1-1',
                            department_id: 1,
                            leader_id: 1,
                            valid: 1,
                        },
                    ],
                },
                {
                    label: '运营部 2-2',
                    name: '运营部 2-2',
                    department_id: 1,
                    leader_id: 1,
                    valid: 1,
                    children: [
                        {
                            label: '运营部 2-2-1',
                            name: '运营部 2-2-1',
                            department_id: 1,
                            leader_id: 1,
                            valid: 1,
                        },
                    ],
                },
            ],
        },
        {
            label: '生产部 3',
            name: '生产部 3',
            department_id: 1,
            leader_id: 1,
            valid: 1,
            children: [
                {
                    label: '生产部 3-1',
                    name: '生产部 3-1',
                    department_id: 1,
                    leader_id: 1,
                    valid: 1,
                    children: [
                        {
                            label: '生产部 3-1-1',
                            name: '生产部 3-1-1',
                            department_id: 1,
                            leader_id: 1,
                            valid: 1,
                        },
                    ],
                },
                {
                    label: '生产部 3-2',
                    name: '生产部 3-2',
                    department_id: 1,
                    leader_id: 1,
                    valid: 1,
                    children: [
                        {
                            label: '生产部 3-2-1',
                            name: '生产部 3-2-1',
                            department_id: 1,
                            leader_id: 1,
                            valid: 1,
                        },
                    ],
                },
            ],
        },
    ]
    const defaultProps = {
        children: 'children',
        label: 'label',
    }

    interface User {
        id: number
        head_img: string
		gender: number
		name: string
		department_id: number
		id_card: string
		age: number
		phone: string
		valid: number
        role_id: number
        create_time: string
        update_time: string
        is_pass: number
        pass_time: string
    }
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    const toggleSelection = (rows?: User[]) => {
        if (rows) {
            rows.forEach((row) => {
                // TODO: improvement typing when refactor table
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-expect-error
                multipleTableRef.value!.toggleRowSelection(row, undefined)
            })
        } else {
            multipleTableRef.value!.clearSelection()
        }
    }
    const handleSelectionChange = (val: User[]) => {
        multipleSelection.value = val
        console.log('multipleSelection',multipleSelection.value);
    }

    const ResetPasswordDialog = defineAsyncComponent(() => import('/@/views/underlying/department/resetPassword.vue'));
    const resetPasswordDialogRef = ref();
    const onOpenResetPassword = (row:any) => {
        resetPasswordDialogRef.value.openDialog(row);
    }
    const handleCommand = (command: string) => {
        console.log('command',command);
    }
    const del = () => {
        console.log('multipleSelection.value',multipleSelection.value);
        if(multipleSelection.value.length==0){
            return ElMessage.warning("请选择要操作的列表");
        }
        let name = [];
        let noName = [];
        state.ids = [];
        for(let i=0;i<multipleSelection.value.length;i++){
            if(multipleSelection.value[i].is_pass==1){
                noName.push(multipleSelection.value[i].name);
            }else{
                name.push(multipleSelection.value[i].name);
                state.ids.push(multipleSelection.value[i].id);
            }
        }
        if(noName.length>0){
            return ElMessage.warning(`员工名称：“${noName}”不允许删除，请先反审核再操作`);
        }
        ElMessageBox.confirm(`此操作将永久删除员工名称：“${name}”，是否继续?`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            console.log('ids',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            delOnce('del',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            // getTableData();
            // ElMessage.success('删除成功');
        })
        .catch(() => {});
    }
    const remove = (node: Node, data: Tree) => {
        console.log('node', node);
        console.log('data', data);
        ElMessageBox.confirm(`此操作将永久删除部门名称：“${data.name}”，是否继续?`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            delOnce('remove',data.id);
            // getTableData();
            // ElMessage.success('删除成功');
        })
        .catch(() => {});
        // ElMessage(`click on 删除 ${data.name}`);
    }
    const delOnce = async(type: string, ids: number | string) => {
        let res: any = null;
        if(type=='del'){
            res = await Department.delAdmin(ids);
            if(res.code != 0){
                return ElMessage.error(res.msg);
            }
        }else if(type=='remove'){
            res = await Department.del(ids);
            if(res.code != 0){
                return ElMessage.error(res.msg);
            }
        }else{
            return ElMessage.warning("操作有误");
        }
        getTableData();
        ElMessage.success(res.msg);
    }

    const pass = () => {
        console.log('multipleSelection.value',multipleSelection.value.length);
        if(multipleSelection.value.length==0){
            return ElMessage.warning("请选择要操作的列表");
        }
        let name = [];
        let noName= [];
        state.ids = [];
        for(let i=0;i<multipleSelection.value.length;i++){
            if(multipleSelection.value[i].is_pass==1){
                noName.push(multipleSelection.value[i].name);
            }else{
                name.push(multipleSelection.value[i].name);
                state.ids.push(multipleSelection.value[i].id);
            }
        }
        if(noName.length>0){
            return ElMessage.warning(`员工名称：“${noName}”已审核通过,无需重复操作`);
        }
        ElMessageBox.confirm(`此操作将审核：“${name}”，是否继续?`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            console.log('ids',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            requestPass('pass',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            // getTableData();
            // ElMessage.success('删除成功');
        })
        .catch(() => {});
    }
    const repass = () => {
        console.log('multipleSelection.value',multipleSelection.value.length);
        if(multipleSelection.value.length==0){
            return ElMessage.warning("请选择要操作的列表");
        }
        let name = [];
        let noName= [];
        state.ids = [];
        for(let i=0;i<multipleSelection.value.length;i++){
            if(multipleSelection.value[i].is_pass==0){
                noName.push(multipleSelection.value[i].name);
            }else{
                name.push(multipleSelection.value[i].name);
                state.ids.push(multipleSelection.value[i].id);
            }
        }
        if(noName.length>0){
            return ElMessage.warning(`员工名称：“${noName}”已处于反审核状态,无需重复操作`);
        }
        ElMessageBox.confirm(`此操作将反审核：“${name}”，是否继续?`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            console.log('ids',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            requestPass('rePass',JSON.stringify(state.ids).split('[')[1].split(']')[0]);
            // getTableData();
            // ElMessage.success('删除成功');
        })
        .catch(() => {});
    }
    const requestPass = async(type: string, ids: number | string) => {
        let res: any = null;
        if(type=='pass'){
            res = await Department.passAdmin(ids);
            if(res.code != 0){
                return ElMessage.error(res.msg);
            }
        }else if(type=='rePass'){
            res = await Department.rePassAdmin(ids);
            if(res.code != 0){
                return ElMessage.error(res.msg);
            }
        }else{
            return ElMessage.warning("操作有误");
        }
        getTableData();
        ElMessage.success(res.msg);
    }
    const rePassOne = (row:any) => {
        if(row.is_pass==0){
            return ElMessage.warning("该记录已处于反审核状态,无需重复操作");
        }
        ElMessageBox.confirm(`此操作将反审核：“${row.name}”，是否继续?`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            requestPass('rePass',row.id);
        })
        .catch(() => {});
    }

    const ImportExcelDialog = defineAsyncComponent(() => import('/@/views/underlying/department/import.vue'));
    const importExcelDialogRef = ref();
    const importExcel = () => {
        importExcelDialogRef.value.openDialog();
    }

    const ExportExcelDialog = defineAsyncComponent(() => import('/@/views/underlying/department/export.vue'));
    const exportExcelDialogRef = ref();
    const exportExcel = async() => {
        let res = await Department.export();
        if(res.code != 0){
            return ElMessage.error(res.msg);
        }
        state.download_file_url = config.file +'/'+ res.data.path;
        console.log('state.download_file_url',state.download_file_url);
        exportExcelDialogRef.value.openDialog(state.download_file_url);
    }

    const deptAll = () => {
        state.param2 = {
            keyword: '',
            page: 1,
            list_rows: 10,
            department_id: 0,
        };
        getTableData();
    }

    const state = reactive({
        tableData: [],
        total: 0,
        loading: false,
        param1: {
            keyword: '',
        },
        param2: {
            keyword: '',
            page: 1,
            list_rows: 10,
            department_id: 0,
        },
        ids:<any> [],
        data: [],
        download_file_url: '',
    });
    const initDept = async() => {
        let res = await Department.init();
        if(res.code != 0){
            return ElMessage.error(res.msg);
        }
    }
    const getDeptList = async() => {
        let res = await Department.list(state.param1);
        if(res.code != 0){
            return ElMessage.error(res.msg);
        }
        state.data = res.data;
        getAdminList();
    }
    const getAdminList = async() => {
        console.log("getAdminList");
        let res = await Department.listAdmin(state.param2);
        if(res.code != 0){
            return ElMessage.error(res.msg);
        }
        state.tableData = res.data.data;
        state.total = res.data.total;
    }
    // 初始化表格数据
    const getTableData = () => {
        getDeptList();
        state.loading = true;
        setTimeout(() => {
            state.loading = false;
        }, 500);
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
        state.param2.list_rows = val;
        getTableData();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.param2.page = val;
        getTableData();
    };
    // 页面加载时
    onMounted(() => {
        initDept();
        getTableData();
    });
</script>

<style lang="scss" scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dept-all{
            cursor: pointer;
        }
        .dept-all:hover{
            cursor: pointer;
            color: #409EFF;
        }
    }
    .box-card {
        margin: 10px;
    }
    .disflex{
        display: flex;
    }
    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
    .dropdown-text{
        color: #409EFF;
        font-size: 12px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .a1{
            color: #409EFF;
        }
        .a2{
            color: #F56C6C;
            margin-left: 8px
        }
    }
</style>