修改代码

feige

9 天以前 a096000ec414988074803af7242f2a1bfceb0be0

修改代码

 ruoyi-ui/src/api/peopleSearch/index.js

New file
@@ -0,0 +1,19 @@
import request from '@/utils/request'

// 查询所有家庭大事，分页查询
export function getModules(query) {
  return request({
    url: '/zPeopleSearch/all',
    method: 'get',
    params: query
  })
}

// 根据id查询所有家庭资产详细信息
export function searchPeople(query) {
  return request({
    url: '/zPeopleSearch/all',
    method: 'get',
    params: query
  })
}

 ruoyi-ui/src/views/peopleSearch/index.vue

New file
@@ -0,0 +1,563 @@
<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>

 ruoyi-ui/src/views/search/peopleSerch.vue

New file
@@ -0,0 +1,8 @@
<template>
</template>

<script>
</script>

<style>
</style>