<template>
|
<div class="people-search-container">
|
<!-- 页面标题 -->
|
<div class="page-header">
|
<h2>人员搜索</h2>
|
<p>通过模块和时间范围筛选相关人员信息</p>
|
</div>
|
|
<!-- 搜索表单 -->
|
<el-card class="search-card">
|
<el-form
|
:model="searchForm"
|
:rules="searchRules"
|
ref="searchForm"
|
label-width="100px"
|
class="search-form"
|
>
|
<!-- 模块选择 -->
|
<el-form-item label="选择模块" prop="module">
|
|
<label v-for="item in modules" :key="item.label" class="signature-checkbox">
|
<input type="checkbox" v-model="searchForm.modules" :value="item.label">
|
<span>{{ item.value }}</span>
|
</label>
|
<!-- <el-select
|
v-model="searchForm.module"
|
placeholder="请选择搜索模块"
|
clearable
|
@change="handleModuleChange"
|
>
|
<el-option
|
v-for="item in modules"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select> -->
|
</el-form-item>
|
<el-form-item class="left-align-btn">
|
<div v-if="selectedMemberNames.length > 0" class="selected-members">
|
<el-tag
|
v-for="(name, index) in selectedMemberNames"
|
:key="index"
|
closable
|
@close="handleTagClose(index, name)"
|
>
|
{{ name }}
|
</el-tag>
|
</div>
|
<el-button
|
type="primary"
|
plain
|
@click="openFamilyMemberDialog"
|
style="width: 100%; margin-bottom: 15px;"
|
>
|
选择家族人
|
</el-button>
|
</el-form-item>
|
<!-- 时间范围选择 -->
|
<el-form-item label="时间范围" prop="dateRange">
|
<el-date-picker
|
v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
:disabled-date="disabledDate"
|
></el-date-picker>
|
</el-form-item>
|
|
<!-- 高级搜索选项 (根据选择的模块动态显示) -->
|
<!-- <div v-if="showAdvancedOptions" class="advanced-options">
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
<el-option label="全部" value=""></el-option>
|
<el-option label="启用" value="active"></el-option>
|
<el-option label="禁用" value="inactive"></el-option>
|
</el-select>
|
</el-form-item>
|
</div> -->
|
|
<!-- 操作按钮 -->
|
<el-form-item class="form-actions">
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
<el-button type="text" @click="toggleAdvancedOptions">
|
{{ showAdvancedOptions ? '收起高级选项' : '展开高级选项' }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 搜索结果 -->
|
<el-card class="result-card">
|
<!-- 结果统计 -->
|
<div class="result-stats" v-if="searchResult.length > 0">
|
<span>共找到 {{ pagination.total }} 条结果</span>
|
<el-button
|
type="text"
|
icon="el-icon-download"
|
size="small"
|
@click="exportResult"
|
>
|
导出结果
|
</el-button>
|
</div>
|
|
<!-- 结果表格 -->
|
<el-table
|
v-loading="loading"
|
:data="searchResult"
|
border
|
stripe
|
style="width: 100%"
|
@row-click="handleRowClick"
|
>
|
<el-table-column type="index" label="序号" width="60"></el-table-column>
|
<el-table-column prop="name" label="姓名" min-width="120"></el-table-column>
|
<el-table-column prop="module" label="所属模块" min-width="120">
|
<template slot-scope="scope">
|
<el-tag>{{ getModuleLabel(scope.row.module) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
|
|
<el-table-column label="操作" min-width="120" fixed="right">
|
<template slot-scope="scope">
|
<el-button size="small" type="text" @click="handleView(scope.row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页控件 -->
|
<div class="pagination-container" v-if="pagination.total > 0">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pagination.currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pagination.pageSize"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
></el-pagination>
|
</div>
|
|
<!-- 无结果提示 -->
|
<div v-else-if="!loading" class="no-result">
|
<el-empty description="暂无搜索结果"></el-empty>
|
</div>
|
</el-card>
|
|
|
|
|
<!-- 添加家族人选择对话框 -->
|
<el-dialog
|
:visible.sync="familyMemberDialogVisible"
|
title="选择家族成员"
|
width="30%"
|
>
|
<el-form ref="familyForm" :model="familyForm" :rules="familyRules">
|
<el-form-item prop="selectedMember">
|
<!-- <el-select
|
v-model="familyForm.selectedMember"
|
placeholder="请选择家族成员"
|
style="width: 100%;"
|
>
|
<el-option
|
v-for="member in familyMembers"
|
:key="member.id"
|
:label="member.name"
|
:value="member.id"
|
></el-option>
|
</el-select> -->
|
|
<label v-for="item in familyMembers" :key="item.userId" class="signature-checkbox">
|
<input type="checkbox" v-model="selectedMemberIds" :value="item.userId">
|
<span>{{ item.oldName }}</span>
|
</label>
|
</el-form-item>
|
|
<!-- 或者使用多选模式 -->
|
<!-- <el-form-item label="选择家族成员">
|
<el-checkbox-group v-model="familyForm.selectedMembers">
|
<el-checkbox
|
v-for="member in familyMembers"
|
:key="member.id"
|
:label="member.id"
|
>
|
{{ member.name }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item> -->
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="familyMemberDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="confirmFamilyMember">确定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
// 导入API请求函数（根据实际项目路径调整）
|
import { searchPeople, getModules } from '@/api/peopleSearch';
|
import { getFamilyMembers } from '@/api/root'; // 假设获取家族成员的API
|
|
export default {
|
name: 'PeopleSearch',
|
data() {
|
return {
|
names: "",
|
selectedModules: [],
|
selectedMemberIds:[],
|
// ... existing data ...
|
familyMemberDialogVisible: false, // 家族成员选择对话框显示状态
|
familyForm: {
|
selectedMember: '', // 单选模式
|
// selectedMembers: [] // 多选模式
|
},
|
familyRules: {
|
selectedMember: [
|
{ required: true, message: '请选择家族成员', trigger: 'change' }
|
]
|
},
|
familyMembers: [
|
// 家族成员数据，实际项目中可能从接口获取
|
{ id: 1, name: '家族成员1' },
|
{ id: 2, name: '家族成员2' },
|
{ id: 3, name: '家族成员3' },
|
{ id: 4, name: '家族成员4' },
|
{ id: 5, name: '家族成员5' }
|
],
|
// 搜索表单数据
|
searchForm: {
|
modules: [],
|
dateRange: [],
|
peoples: ''
|
},
|
// 表单验证规则
|
searchRules: {
|
// module: [
|
// { required: true, message: '请选择搜索模块', trigger: 'change' }
|
// ],
|
// dateRange: [
|
// { type: 'array', required: true, message: '请选择时间范围', trigger: 'change' }
|
// ]
|
},
|
// 模块列表
|
modules: [],
|
// 搜索结果
|
searchResult: [],
|
// 分页信息
|
pagination: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
// 加载状态
|
loading: false,
|
// 是否显示高级选项
|
showAdvancedOptions: false
|
};
|
},
|
created() {
|
// 初始化页面数据
|
this.loadFamilyMembers()
|
this.loadModules();
|
},
|
computed: {
|
// 已选成员姓名（用于回显）
|
selectedMemberNames() {
|
var od = this.familyMembers
|
.filter(member => this.selectedMemberIds.includes(member.userId))
|
.map(member => member.oldName);
|
|
return od
|
},
|
},
|
methods: {
|
// 加载家族成员列表
|
async loadFamilyMembers() {
|
this.loading = true;
|
|
let clanId = this.$store.state.user.clanId
|
try {
|
const res = await getFamilyMembers(clanId); // 假设需要家族ID参数
|
|
|
console.log(res)
|
console.log(res.data)
|
this.familyMembers = res.data;
|
// console.log(this.familyMembers.length)
|
// console.log(this.familyMembers.length)
|
// console.log(this.familyMembers[0])
|
// for(let i=0; i < this.familyMembers.length; i++)
|
// console.log(this.familyMembers[i])
|
// console.log("---999")
|
// 格式：[{ id: 1, name: '张三', role: '家长', relation: '父子', avatar: 'xxx' }, ...]
|
} catch (err) {
|
this.$message.error('加载家族成员失败，请重试');
|
} finally {
|
this.loading = false;
|
}
|
},
|
// 加载模块列表
|
async loadModules() {
|
try {
|
// const response = await getModules(); response.data ||
|
this.modules = [
|
{ label: '事纪', value: '事纪' },
|
{ label: '部门管理', value: 'department' },
|
// { label: '角色管理', value: 'role' },
|
// { label: '项目管理', value: 'project' }
|
];
|
} catch (error) {
|
this.$message.error('加载模块列表失败');
|
console.error('模块加载错误:', error);
|
}
|
},
|
|
// 处理模块变更
|
handleModuleChange(module) {
|
console.log('选择的模块:', module);
|
// 可以根据选择的模块动态调整表单选项
|
},
|
|
// 搜索按钮点击事件
|
async handleSearch() {
|
var nams = this.$store.state.user.name +","+this.selectedMemberNames.join(",")
|
|
this.searchForm.peoples = nams
|
this.names = nams
|
console.log(this.searchForm.module)
|
console.log("----3")
|
this.$refs.searchForm.validate(async (valid) => {
|
if (valid) {
|
this.loading = true;
|
try {
|
// 构建搜索参数
|
const params = {
|
modules: this.searchForm.modules,
|
startTime: this.searchForm.dateRange[0] || '',
|
endTime: this.searchForm.dateRange[1] || '',
|
peoples: this.searchForm.peoples,
|
// status: this.searchForm.status,
|
pageNum: this.pagination.currentPage,
|
pageSize: this.pagination.pageSize
|
};
|
// alert(23)
|
// 调用API进行搜索
|
const response = await searchPeople(params);
|
console.log(response)
|
// 更新搜索结果和分页信息
|
this.searchResult = response.data.data || [];
|
console.log(this.searchResult)
|
this.pagination.total = response.data.total || 0;
|
|
this.$message.success(`搜索成功，共找到 ${this.pagination.total} 条记录`);
|
} catch (error) {
|
this.$message.error('搜索失败，请重试');
|
console.error('搜索错误:', error);
|
} finally {
|
this.loading = false;
|
}
|
}
|
});
|
},
|
|
// 重置表单
|
handleReset() {
|
this.$refs.searchForm.resetFields();
|
this.searchResult = [];
|
this.pagination = {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
};
|
},
|
|
// 切换高级选项显示/隐藏
|
toggleAdvancedOptions() {
|
this.showAdvancedOptions = !this.showAdvancedOptions;
|
},
|
|
// 根据值获取模块标签
|
getModuleLabel(value) {
|
const module = this.modules.find(item => item.value === value);
|
return module ? module.label : value;
|
},
|
|
// 禁止选择未来日期
|
disabledDate(date) {
|
return date > new Date();
|
},
|
|
// 分页相关方法
|
handleSizeChange(val) {
|
this.pagination.pageSize = val;
|
this.pagination.currentPage = 1;
|
this.handleSearch();
|
},
|
|
handleCurrentChange(val) {
|
this.pagination.currentPage = val;
|
this.handleSearch();
|
},
|
handleTagClose(index, name) {
|
// 从 selectedMemberNames 数组中移除当前关闭的标签名称
|
// const index = this.selectedMemberNames.findIndex(item=== name);
|
selectedMemberIds: this.selectedMemberIds.filter(
|
item => item!== index // 过滤掉与关闭名称相同的元素
|
)
|
this.$forceUpdate();
|
console.log(this.selectedMemberIds)
|
this.selectedMemberNames.splice(index, 1);
|
this.$forceUpdate();
|
selectedMemberNames: this.selectedMemberNames.filter(
|
item => item !== name // 过滤掉与关闭名称相同的元素
|
)
|
console.log(this.selectedMemberNames)
|
|
},
|
// 查看详情
|
handleView(row) {
|
var id = row.id
|
this.$router.push("/familymodel/bignote/familyeventInfo/" + id);
|
},
|
|
// 编辑
|
handleEdit(row) {
|
this.$router.push({ name: 'PeopleEdit', params: { id: row.id } });
|
},
|
|
// 行点击事件
|
handleRowClick(row) {
|
console.log('点击了行:', row);
|
},
|
|
// 导出结果
|
exportResult() {
|
this.$confirm('确定要导出当前搜索结果吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'info'
|
}).then(() => {
|
// 实现导出逻辑
|
this.$message.success('导出成功');
|
}).catch(() => {
|
this.$message.info('已取消导出');
|
});
|
},
|
// 打开家族成员选择对话框
|
openFamilyMemberDialog() {
|
this.familyMemberDialogVisible = true;
|
},
|
// 确认选择家族成员
|
confirmFamilyMember() {
|
//this.formDat.selectedMemberIds = [...this.selectedMemberIds]; // 将弹窗选中的ID同步到表单
|
|
// this.$message.success(`已选择家族成员: ${selectedName}`);
|
// 可以在这里处理选择后的逻辑，比如保存到登录表单中
|
// this.loginForm.familyMemberId = this.familyForm.selectedMember;
|
// this.loginForm.familyMemberName = selectedName;
|
|
this.familyMemberDialogVisible = false;
|
|
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.people-search-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: calc(100vh - 60px);
|
}
|
|
.page-header {
|
margin-bottom: 20px;
|
|
h2 {
|
margin-bottom: 5px;
|
color: #1f2d3d;
|
}
|
|
p {
|
color: #8391a5;
|
font-size: 14px;
|
}
|
}
|
/* 可选：标签样式优化 */
|
.member-tags {
|
display: flex;
|
gap: 8px;
|
flex-wrap: wrap;
|
margin: 10px 0;
|
}
|
.search-card {
|
margin-bottom: 20px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
}
|
::v-deep .left-align-btn .el-form-item__content {
|
text-align: left; /* 关键：设置内容左对齐 */
|
}
|
.search-form {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 5px;
|
padding: 10px 0;
|
|
.el-form-item {
|
margin-bottom: 15px;
|
flex: 1;
|
min-width: 180px;
|
text-align: left;
|
// &.form-actions {
|
// display: flex;
|
// align-items: flex-start;
|
// justify-content: flex-end;
|
// flex: 100%;
|
// }
|
}
|
}
|
|
.advanced-options {
|
border-top: 1px dashed #eaeaea;
|
margin-top: 15px;
|
padding-top: 15px;
|
}
|
|
.result-card {
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
padding: 15px;
|
min-height: 400px;
|
|
.el-table {
|
margin-bottom: 15px;
|
}
|
}
|
|
.pagination-container {
|
margin-top: 15px;
|
text-align: right;
|
}
|
|
.no-result {
|
padding: 50px 0;
|
text-align: center;
|
}
|
/* 已选成员标签样式 */
|
.selected-members {
|
margin-bottom: 12px;
|
.el-tag {
|
margin-right: 8px;
|
margin-bottom: 8px;
|
}
|
}
|
|
</style>
|
