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