You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.3 KiB
132 lines
4.3 KiB
<template>
|
|
<div class="p-2">
|
|
<el-row :gutter="20">
|
|
<!-- 左侧：虚拟化组织机构树 -->
|
|
<el-col :lg="6" :xs="24">
|
|
<srz-dept-full-load-tree @node-click="handleNodeClick" />
|
|
</el-col>
|
|
|
|
<!-- 右侧：用户表格 -->
|
|
<el-col :lg="18" :xs="24">
|
|
<el-card shadow="hover" class="mb-2">
|
|
<el-form :inline="true" :model="queryParams" ref="queryFormRef" class="search-form">
|
|
<el-form-item label="姓名" prop="fullname">
|
|
<el-input v-model="queryParams.fullname" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" style="width: 160px" />
|
|
</el-form-item>
|
|
<el-form-item label="用户名" prop="username">
|
|
<el-input v-model="queryParams.username" placeholder="请输入用户名" clearable @keyup.enter="handleQuery" style="width: 160px" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="mobilenumber">
|
|
<el-input v-model="queryParams.mobilenumber" placeholder="请输入手机号" clearable @keyup.enter="handleQuery" style="width: 160px" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card shadow="hover">
|
|
<template #header>
|
|
<span v-if="selectedDeptName" class="font-bold">{{ selectedDeptName }} - 人员列表</span>
|
|
</template>
|
|
|
|
<el-table v-loading="loading" border :data="userList" empty-text="暂无数据">
|
|
<el-table-column label="姓名" prop="fullname" min-width="100" show-overflow-tooltip />
|
|
<el-table-column label="用户名" prop="username" min-width="120" show-overflow-tooltip />
|
|
<el-table-column label="手机号" prop="mobilenumber" min-width="130" />
|
|
<el-table-column label="性别" prop="gender" width="70" align="center" />
|
|
<el-table-column label="职务" prop="positionname" min-width="120" show-overflow-tooltip />
|
|
<el-table-column label="人员状态" prop="ryzt" width="100" align="center" />
|
|
<el-table-column label="邮箱" prop="email" min-width="160" show-overflow-tooltip />
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total > 0"
|
|
v-model:page="queryParams.pageNum"
|
|
v-model:limit="queryParams.pageSize"
|
|
:total="total"
|
|
@pagination="getUserList"
|
|
/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="SrzDeptUser">
|
|
import SrzDeptFullLoadTree from '@/views/efcode/components/srz-dept-full-load-tree.vue';
|
|
import { listSrzUser } from '@/api/efcode/srz';
|
|
import type { SrzUserQuery, SrzUserVo } from '@/api/efcode/srz/types';
|
|
|
|
const selectedDeptName = ref('');
|
|
const loading = ref(false);
|
|
const userList = ref<SrzUserVo[]>([]);
|
|
const total = ref(0);
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
|
const queryParams = reactive<SrzUserQuery>({
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
organizationid: undefined,
|
|
fullname: undefined,
|
|
username: undefined,
|
|
mobilenumber: undefined
|
|
});
|
|
|
|
/** 树节点点击事件 */
|
|
const handleNodeClick = (data: { id: string; label: string }) => {
|
|
selectedDeptName.value = data.label;
|
|
queryParams.organizationid = data.id;
|
|
queryParams.pageNum = 1;
|
|
getUserList();
|
|
};
|
|
|
|
/** 获取用户列表 */
|
|
const getUserList = async () => {
|
|
if (!queryParams.organizationid) {
|
|
userList.value = [];
|
|
total.value = 0;
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
const res = await listSrzUser(queryParams);
|
|
userList.value = res.rows;
|
|
total.value = res.total;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
/** 搜索按钮 */
|
|
const handleQuery = () => {
|
|
queryParams.pageNum = 1;
|
|
getUserList();
|
|
};
|
|
|
|
/** 重置按钮 */
|
|
const resetQuery = () => {
|
|
queryFormRef.value?.resetFields();
|
|
queryParams.fullname = undefined;
|
|
queryParams.username = undefined;
|
|
queryParams.mobilenumber = undefined;
|
|
queryParams.pageNum = 1;
|
|
getUserList();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-card__body) {
|
|
padding: 15px !important;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|