修改了代码

feige

2026-01-13 f6ba10af9f368f251de29e77ba88d5ad33bc31d6

 ruoyi-ui/src/views/collection/collectionInfo.vue

@@ -53,9 +53,73 @@
              </el-form-item>
             </el-col>
             <el-col >
              <el-form-item label="持有者" prop="owner" label-width="65px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
           <!--   <el-form-item label="持有者" prop="owner" label-width="65px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.owner" placeholder="请输入持有者" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item> -->

              <el-form-item label="家族成员" prop="selectedMemberIds">
                <!-- 已选成员回显区域 -->
                <div v-if="selectedMemberNames.length > 0" class="selected-members">
                  <el-tag
                    v-for="(name, index) in selectedMemberNames"
                    :key="index"
                    closable
                    @close="handleTagClose(index)"
                  >
                    {{ name }}
                  </el-tag>
                </div>
                <!-- 触发弹窗按钮 -->
                 <div style="display: flex; align-items: center;" v-if="!dsb" >
                <el-button
                  type="primary"
                  icon="el-icon-user-plus"
                  @click="openMemberDialog"
                  :disabled="loading"
                >
                  选择家族成员
                </el-button>
                 </div>
              </el-form-item>


             </el-col>
             <el-col>
               <!-- 其它人显示区域 -->
               <el-form-item label="其它人">
                 <!-- 已选其它人标签显示 -->
                 <div v-if="otherPeople.length > 0" class="selected-members" style="display: inline-block; vertical-align: middle; margin-right: 10px;">
                   <el-tag
                     v-for="(name, index) in otherPeople"
                     :key="index"
                     closable
                     @close="handleOtherPeopleTagClose(index)"
                   >
                     {{ name }}
                   </el-tag>
                 </div>
                 <!-- 编辑按钮 -->
                 <el-button
                   v-if="!dsb"
                   type="primary"
                   icon="el-icon-edit"
                   size="mini"
                   @click="openOtherPeopleDialog"
                 >
                   编辑其它人
                 </el-button>
               </el-form-item>

             </el-col>
             <el-col>
               <el-form-item label="是否隐藏" prop="isHide">
               
                    <el-radio-group v-model="formData.isHide" :style="{width: '100%'}">
                      <el-radio label="是">是</el-radio>
                      <el-radio label="否">否</el-radio>
                    </el-radio-group>
               
              </el-form-item>
             </el-col>
             <el-col >
@@ -219,6 +283,109 @@
        </el-dialog>



    <el-dialog
      :visible.sync="memberDialogVisible"
      title="选择家族成员"
      width="50%"
      :close-on-click-modal="false"
    >
      <!-- 弹窗内容区 -->
      <div class="member-dialog-content">
        <!-- 搜索框 -->
        <el-input
          v-model="memberSearch"
          placeholder="搜索成员姓名..."
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px;"
        ></el-input>



        <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
          <el-loading-spinner></el-loading-spinner>
          <p>加载家族成员中...</p>
        </div>

       <div v-else-if="familyMembers.length === 0" class="no-data">
          <el-empty description="暂无家族成员数据"></el-empty>
        </div>
<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>
                  <hr class="divider-line">

                  <label v-for="item in anotherFamilyMembers" :key="item.userId" class="signature-checkbox">
                    <input type="checkbox" v-model="selectedMemberIds" :value="item.userId">
                    <span> {{ item.oldName }} </span>
                  </label>

        <!-- 多选列表（有数据） -->
<!--    <el-checkbox-group>
         <el-checkbox


          >
          4545

         </el-checkbox>
        </el-checkbox-group> -->

</div>
      <!-- 弹窗底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="memberDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmMemberSelection">确认选择</el-button>
      </div>
    </el-dialog>

    <!-- 其它人编辑弹窗 -->
    <el-dialog
      :visible.sync="otherPeopleDialogVisible"
      title="编辑其它人"
      width="500px"
      :close-on-click-modal="false"
      @close="handleOtherPeopleDialogClose"
    >
      <!-- 已添加的其它人标签 -->
      <div v-if="tempOtherPeople.length > 0" class="selected-members" style="margin-bottom: 20px;">
        <el-tag
          v-for="(name, index) in tempOtherPeople"
          :key="index"
          closable
          @close="handleTempOtherPeopleTagClose(index)"
        >
          {{ name }}
        </el-tag>
      </div>

      <!-- 添加输入框 -->
      <div style="display: flex; align-items: center;">
        <el-input
          v-model="otherPeopleInput"
          placeholder="请输入姓名，按回车或点击添加"
          clearable
          style="flex: 1; margin-right: 10px;"
          @keyup.enter.native="addOtherPeople"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addOtherPeople"
        >
          添加
        </el-button>
      </div>

      <!-- 弹窗底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="otherPeopleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmOtherPeople">完成</el-button>
      </div>
    </el-dialog>

  </div>
</template>

@@ -229,12 +396,27 @@
import {Message} from "element-ui";
import {addRole, updateRole} from "@/api/system/role";
import {getCollection, updateCollection,download,uploadPic,listType} from "@/api/collection/index";
import { getFamilyMembers ,listAnotherFamilyInfo} from '@/api/root'; // 假设获取家族成员的API

export default {
  components: {},
  props: [],
  data() {
    return {


      // 成员多选相关
      memberDialogVisible: false, // 弹窗可见性
      familyMembers: [], // 家族成员列表（原始数据）
      anotherFamilyMembers: [], //另外家族成员信息
      selectedMemberIds: [], // 弹窗中临时选中的成员ID（用于多选交互）
      displayMemberNames: [], // 显示用的成员名称数组
      otherPeople: [], // 其它人列表
      tempOtherPeople: [], // 弹窗中临时编辑的其它人列表
      otherPeopleInput: '', // 其它人输入框内容
      otherPeopleDialogVisible: false, // 其它人弹窗可见性
      memberSearch: '', // 成员搜索关键词
      loading: false, // 加载状态
      cdi:"收藏与荣誉详细信息",
      udi:"收藏与荣誉信息详情",
    // 数据范围选项
@@ -323,7 +505,51 @@
      showInput: false
    }
  },
  computed: {},
  computed: {
       // 已选成员姓名（用于回显）
       selectedMemberNames() {
       //  alert(this.familyMembers.length)
        // 优先使用直接设置的显示名称
        if(this.displayMemberNames && this.displayMemberNames.length > 0 && this.selectedMemberIds.length==0) {
          return this.displayMemberNames;
        }

        // 否则根据选中的ID计算
        // 合并过滤后的成员名称和displayMemberNames内容
        const filteredNames = this.familyMembers
          .filter(member => this.selectedMemberIds.includes(member.userId))
         .map(member => member.oldName);
  const filterAnotherNames = this.anotherFamilyMembers
        .filter(member => this.selectedMemberIds.includes(member.userId))
        .map(member => member.oldName);

        // 创建一个Set来存储唯一名称，避免重复
        const uniqueNames = new Set([...filteredNames]);
filterAnotherNames.forEach(item => uniqueNames.add(item));

        // 如果displayMemberNames有内容，也加入Set中
        if(this.displayMemberNames && this.displayMemberNames.length > 0) {
          this.displayMemberNames.forEach(name => uniqueNames.add(name));
        }
      else
        this.displayMemberNames = Array.from(uniqueNames)
        // 转回数组并返回
        return Array.from(uniqueNames);
      },
    // 过滤后的成员列表（搜索功能）
    filteredMembers() {
      if (!this.memberSearch) return this.familyMembers;
      console.log(this.familyMembers)
      console.log("-sdf")
      const keyword = this.memberSearch.toLowerCase();
      return this.familyMembers;
      //.filter(member =>
     //   member.filteredMembers.toLowerCase().includes(keyword)
        //||
     //   member.role.toLowerCase().includes(keyword)
    //  );
    }
  },
  watch: {},
  created() {
    const id = this.$route.params && this.$route.params.id;
@@ -392,6 +618,7 @@
           }
        }
        this.loading = false;
        this.splitPeopleToSelectedNames(this.formData.owner);
      });
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
@@ -408,6 +635,156 @@
  },
  mounted() {},
  methods: {
    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)

      },
      // 移除其它人标签
      handleOtherPeopleTagClose(index) {
        const removedName = this.otherPeople[index];
        this.otherPeople.splice(index, 1);
        this.$message.info(`已移除: ${removedName}`);
      },

      // 打开其它人编辑弹窗
      openOtherPeopleDialog() {
        // 复制当前其它人列表到临时列表
        this.tempOtherPeople = [...this.otherPeople];
        this.otherPeopleInput = '';
        this.otherPeopleDialogVisible = true;
      },

      // 弹窗内添加其它人
      addOtherPeople() {
        const name = this.otherPeopleInput.trim();
        if (!name) {
          this.$message.warning('请输入姓名');
          return;
        }
        if (this.tempOtherPeople.includes(name)) {
          this.$message.warning('该姓名已添加');
          return;
        }
        this.tempOtherPeople.push(name);
        this.otherPeopleInput = '';
        this.$message.success(`已添加: ${name}`);
      },

      // 弹窗内移除其它人标签
      handleTempOtherPeopleTagClose(index) {
        const removedName = this.tempOtherPeople[index];
        this.tempOtherPeople.splice(index, 1);
        this.$message.info(`已移除: ${removedName}`);
      },

      // 确认完成（保存弹窗中的更改）
      confirmOtherPeople() {
        if (this.tempOtherPeople.length > 0) {
          this.$message.success(`已保存 ${this.tempOtherPeople.length} 名其它人`);
        } else {
          this.$message.info('未添加任何其它人');
        }
        this.otherPeople = [...this.tempOtherPeople];
        this.otherPeopleDialogVisible = false;
      },

      // 其它人弹窗关闭处理
      handleOtherPeopleDialogClose() {
        this.otherPeopleInput = '';
        // 不保存临时列表的更改
      },
      // 确认选择成员（保存到表单）
      confirmMemberSelection() {
        console.log(this.selectedMemberIds)
        this.formData.selectedMemberIds = [...this.selectedMemberIds];
        console.log(this.formData.selectedMemberIds)
         // 将弹窗选中的ID同步到表单
        this.memberDialogVisible = false;
        this.$message.info(`已选择 ${this.selectedMemberNames.length} 名家族成员`);
        // 清空对话框里面选择的内容
       // if(this.displayMemberNames.length==0)
          this.displayMemberNames = this.selectedMemberNames
        this.selectedMemberIds = [];
      },
      splitPeopleToSelectedNames(people) {
        // 处理逻辑：
        // 1. 判断 people 是否存在且为字符串，避免报错
        if (!people || typeof people !== "string") {
          this.displayMemberNames = [];
          this.otherPeople = [];
          return;
        }

        // 2. 先按分号分割：第一部分是家族成员，第二部分是其它人
        const parts = people.split(';');

        // 第一部分：按逗号分割赋值给 displayMemberNames
        if (parts[0]) {
          this.displayMemberNames = parts[0].split(",").map(name => name.trim()).filter(name => name);
        } else {
          this.displayMemberNames = [];
        }

        // 第二部分：按逗号分割赋值给 otherPeople
        if (parts[1]) {
          this.otherPeople = parts[1].split(",").map(name => name.trim()).filter(name => name);
        } else {
          this.otherPeople = [];
        }

        console.log('家族成员:', this.displayMemberNames)
        console.log('其它人:', this.otherPeople)
      },
        // 打开成员多选弹窗
        async openMemberDialog() {
        this.memberDialogVisible = true;
        this.memberSearch = ''; // 重置搜索
        // 初始化弹窗选中状态（回显已选成员）
    //    this.selectedMemberIds = [...this.familyForm.selectedMemberIds];
        // 加载家族成员列表
        await this.loadFamilyMembers();
      },
          // 加载家族成员列表
          async loadFamilyMembers() {
        this.loading = true;

        let clanId = this.$store.state.user.clanId
        let userId = this.$store.state.user.userId
        try {
          const res = await getFamilyMembers(clanId); // 假设需要家族ID参数
    const ano = await listAnotherFamilyInfo(userId)

      console.log(res)
      console.log(res.data)
      this.anotherFamilyMembers = ano.data;
         this.familyMembers = res.data;
         console.log(this.familyMembers)
         console.log(this.familyMembers.length)
         // 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;
        }
      },
    getData(){
      const id = this.$route.params && this.$route.params.id;
      let _this = this
@@ -481,6 +858,10 @@

      this.$refs['elForm'].validate(valid => {

      // 组合数据：家族成员按逗号分隔，其它人按逗号分隔，两部分用分号分隔
      const memberPart = this.selectedMemberNames.join(",");
      const otherPart = this.otherPeople.join(",");
      this.formData.owner = `${memberPart};${otherPart}`;

        if (valid) {
          if (this.formData.id != undefined) {