修改了代码

feige

2026-01-13 f6ba10af9f368f251de29e77ba88d5ad33bc31d6

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

@@ -1,7 +1,15 @@
<template>
  <div class="app-container">
  <div class="app-container" id="printable-content">
    <div class="form-header mt">
      <h4 class="dt h4">收藏与荣誉详细信息 </h4>
      <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;" >
        <span>收藏详细信息</span>
        <div style="display: flex; align-items: center;">
        <el-button size="mini" type="text"  v-print="'#printable-content'" v-hasPermi="['person:information:memo']">
        <div class="form" ><el-icon  style="padding-right:100px;"></el-icon>
          <span class="text" style="width: 69px;height: 26px;font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">打印</span></div>
      </el-button></div>
      </h1>
<!--      <el-button v-if="isShow" type="primary" class="pt"  icon="el-icon-edit" @click="handleEdit()" >编辑</el-button>-->
      <!--      <br>-->
      <!--      <el-button type="primary" class="pt"   @click="handleExport"-->
@@ -15,15 +23,15 @@
      <!--      </el-form-item>-->
         <el-container>
           <el-row :span="12">
             <el-cow >
             <el-col >
              <el-form-item label="获得时间" prop="happenTime" label-width="70px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.happenTime" placeholder="请输入获得时间" type="date" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>

                <el-date-picker v-model="formData.happenTime" type="date" placeholder="请选择日期"
                  :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>

             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="类别" prop="type" label-width="40px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                 <el-select v-model="formData.type" placeholder="请选择类别" clearable :style="{width: '100%'}"   :disabled="dsb">
                   <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
@@ -31,113 +39,205 @@
                 </el-select>
                 <el-input v-model="newOption" v-if="showInput" placeholder="若未在上述选项中找到对应类别，请在此输入新的类别" @change="addNewOption"></el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
              <el-form-item label="名称" prop="name" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="来源" prop="source" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.source" placeholder="请输入来源" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
              <el-form-item label="持有者" prop="owner" label-width="65px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
             </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-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-cow>
             <el-cow >


             </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 >
               <el-form-item label="价值" prop="price" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.price" placeholder="请输入价值" clearable :style="{width: '100%'}" :disabled="dsb">
                <el-input v-model="formData.price" type="number" placeholder="请输入价值" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
              <el-form-item label="存放位置" prop="location" label-width="80px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.location" placeholder="请输入存放位置" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="备注" prop="remark" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
              <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
            </el-form-item>
             </el-cow>
             </el-col>

           </el-row>
         </el-container>
         <h4 class="form-header">电子文件 </h4>
         <el-upload
           action="#"
           list-type="picture-card"
           multiple
           :http-request="requestUpload"
           :file-list="fileList"
         >
           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{file}">
             <img
               class="el-upload-list__item-thumbnail"
               :src="file.url"
               alt=""
               style="width: 147px; height: 147px"
               fit="cover"
               :preview-src-list="[file.url]"
             >
             <span class="el-upload-list__item-actions" >
            <span
          <h4 class="form-header">相关图片 </h4>
          <el-upload
            action="#"
            accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif"
            list-type="picture-card"
            multiple
            :http-request="requestUpload"
            :file-list="fileList"

              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
         :on-change="handleChange"
         :auto-upload="false"
            :disabled="!btn"
            :class="{ hide: !btn }"
          >

              class="el-upload-list__item-delete"
              @click="handleDownload(file.url)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="isShow"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
            <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 147px; height: 147px"
                fit="cover"
                :preview-src-list="[file.url]"
              >
              <span class="el-upload-list__item-actions" >
                <span

                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span

                  class="el-upload-list__item-delete"
                  @click="handleDownload(file.url)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="isShow"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>


           </div>
         </el-upload>
            </div>
          </el-upload>
       <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
              v-if="btn"
                @click="picUpload"
              >上传到服务器</el-button>
          <h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            list-type="picture-card"
            :on-preview="handleFileCardPreview"

         <h4 class="form-header">其他附件 </h4>
         <el-upload
           action=""
           :file-list="fileListOther"
           class="upload-demo"
           multiple
           list-type="picture-card"
           :on-preview="handleFileCardPreview"
           :on-remove="handleRemoveFile"
           :http-request="requestUpload"
           :show-file-list="true"
         >
            :http-request="requestUpload1"
            :show-file-list="true"
         :on-change="handleChange1"
               :auto-upload="false"
            :disabled="!btn"
            :class="{ hide: !btn }"
          >

           <i slot="default" class="el-icon-plus"></i>
           <div slot="file" slot-scope="{file}">
             <img
               class="el-upload-list__item-thumbnail"
               src="../../assets/401_images/401.gif"
               alt=""
               style="width: 147px; height: 147px"
               fit="cover"
             >
             <span class="el-upload-list__item-actions">
            <div v-if="uploading1" class="upload-status">正在上传...</div>
            <i v-if="!uploading1" slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <!-- 添加video元素用于显示视频 -->
              <video
                v-if="file.url.includes('.mp4')"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                style="width: 147px; height: 147px"
                fit="cover"
              ></video>
              <img v-else
                class="el-upload-list__item-thumbnail"
                src="../../assets/images/deviceLis.png"
                alt=""
                style="width: 147px; height: 147px"
                fit="cover">

              <span class="el-upload-list__item-actions">
               <span class="el-upload-list__item-name">{{ file.name }}</span>
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleFileCardPreview(file)"
@@ -158,14 +258,20 @@
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
              </span>

            </div>


           </div>


         </el-upload>

          </el-upload>
    <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                v-if="btn"
                @click="fileUpload"
              >上传到服务器</el-button>
                  <h4 class="form-header"> </h4>
          <el-form-item size="large">
            <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb" >修改</el-button>
          </el-form-item>
@@ -173,9 +279,112 @@
    </div>

        <el-dialog  :visible.sync="dialogVisible">
          <img w-full :src="dialogImageUrl"    style="width: 700px; height: 700px" alt="Preview Image" />
          <img w-full :src="dialogImageUrl"    style="width: 100%; height: 100%" alt="Preview Image" />
        </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>
@@ -185,26 +394,48 @@
import {blobValidate} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
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:"收藏与荣誉信息详情",
      fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx',
        '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],
      fileList:[
      ],
      fileListOther:[
    // 数据范围选项
    fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx',
      '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],

      ],
      fileList:[],
   fileList1:[],
   uploadFileList:[],
   uploadFileList1:[],
   fileListOther:[

   ],
   fileListOther1:[],
      dsb:true,
      btn:false,
      isShow:true,
      uploading: false,
      uploading1: false,
      // 收藏与荣誉表格数据
     collectionList: [],
      typeList:[],
@@ -219,8 +450,9 @@
        price:undefined,
        location:undefined,
        remark:undefined,
        url: undefined,
        url: "",
      },

      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
@@ -273,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;
@@ -284,13 +560,15 @@
      this.btn= jd
      this.dsb = !jd
      this.showInput=true
      document.title = "修改收藏与荣誉详细信息";
      this.$route.meta.title = "修改收藏与荣誉详细信息";//列表的名称
      this.isShow=true
   //   document.title = "修改收藏与荣誉详细信息";
      this.$route.meta.title = "修改收藏详细信息";//列表的名称
    }
    else{
      document.title = "收藏与荣誉详细信息";
      this.$route.meta.title = "收藏与荣誉详细信息";//列表的名称
    //  document.title = "收藏与荣誉详细信息";
      this.$route.meta.title = "收藏详细信息";//列表的名称
      this.isShow=false
      this.btn = false;
    }

    let _this = this
@@ -301,21 +579,46 @@
        let paths = response.data.url.split(",");
        for(let i = 0; i < paths.length; i++)
        {
          if(paths[i]!="") {
         if(paths[i]!="") {

            let pth = paths[i].substr(paths[i].length - 4, paths[i].length)

            if (_this.fot.includes(pth) === true)
              _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
            else {
              // alert(paths[i])
              let nms = paths[i].split("\/")
              let nm = nms[nms.length - 1]
              _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i]})
             let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
         //   alert(pth)
             if (_this.fot.includes(pth) === true)
            // {
            //    if(paths[i][0]=="/")
          //      _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
            //   else
            //      _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
            //   }
          {
            if(paths[i].includes(process.env.VUE_APP_BASE_TRUE_API)){
              if(paths[i][0]=="/")
                    _this.fileList.push({name:paths[i],url: paths[i].substr(1),res:false})
              else
                 _this.fileList.push({name:paths[i],url: paths[i],res:false})
            }else{
              if(paths[i][0]=="/")
                    _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
              else
                 _this.fileList.push({name:paths[i],url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})
            }
          }

            }
             else {
               // alert(paths[i])
             // alert()
               let nms = paths[i].split("\/")
               let nm = nms[nms.length - 1]
              if(paths[i][0]=="/")
               _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
               else
               _this.fileListOther.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})

            }
           }
        }
        this.loading = false;
        this.splitPeopleToSelectedNames(this.formData.owner);
      });
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
@@ -332,17 +635,199 @@
  },
  mounted() {},
  methods: {
    /** 查询类别信息 */
    // getCateInfor()
    // {
    //   let _this = this
    //   getCategory().then(response=>{
    //
    //     response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{
    //       _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]})
    //     })
    //   })
    // },
    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
      if (id) {
        this.loading = true;
        getCollection(id).then((response) => {
          this.formData = response.data;
          let paths = response.data.url.split(",");
          for(let i = 0; i < paths.length; i++)
          {
           if(paths[i]!="") {

               let pth = paths[i].substr(paths[i].length - 4, paths[i].length)
           //   alert(pth)
               if (_this.fot.includes(pth) === true)
              {
            console.log()
                }
               else {
                 let nms = paths[i].split("\/")
                 let nm = nms[nms.length - 1]
                if(paths[i][0]=="/")
                 _this.fileListOther1.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i].substr(1),res:false})
                 else
                 _this.fileListOther1.push({name:nm, url: process.env.VUE_APP_BASE_TRUE_API+paths[i],res:false})

              }
             }
          }
          _this.fileListOther = _this.fileListOther1
          this.loading = false;
        });
        listType(this.queryParams).then(response => {
            this.typeList = response.data;
            this.total = response.data.total;
            // console.log( this.typeList )
            // 在回调函数中调用 getTypeOptions()
            this.getTypeOptions();
            this.loading = false;
          }
        );
      }
    },
    //类别
    addNewOption() {
      const newOption = this.newOption.trim();
@@ -369,16 +854,14 @@

    },
    submitForm() {
      let ul = this.fileList.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      }).join(",")
      let uls = this.fileListOther.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      }).join(",")
      this.formData.url = ul+","+uls


      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) {
@@ -414,25 +897,93 @@
        saveAs(blob, filename)
      })
    },
    handleRemoveFile(file) {
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
          this.$delete(this.fileListOther,i);
      }
    },
    handleRemove(file) {
      for(let i = 0; i < this.fileList.length; i++)
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
      }
    },
  handleRemoveFile(file) {
    //判读是否是之前的图片
    let res = false
    for(let i = 0; i < this.fileListOther.length; i++)
    {
      if(this.fileListOther[i].url==file.url)
     {
        if(this.fileListOther[i].res==false)
           res = true
        else
        {
           this.$delete(this.uploadFileList1, Math.abs(i - this.uploadFileList1.length-1))
        }
        this.$delete(this.fileListOther,i);

     }
    }

    let ul = ""
    this.fileList.map(function (elem){
          if(elem.res==false)
             ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
    })
    let uls = ""
    this.fileListOther.map(function (elem){
      if(elem.res==false)
             uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
    })
    this.formData.url = ul+","+uls;
  //  alert(this.formData.url)
    if(res==true){
       updateCollection(this.formData).then(response => {
        this.$modal.msgSuccess("删除成功");
        // this.open = false;

       });
    }
  },
  handleRemove(file) {
          //判断是否是之前的图片
    let res = false
  //  alert(this.fileList.length)
    for(let i = 0; i < this.fileList.length; i++)
    {
      if(this.fileList[i].url==file.url)
     {
        //原来图像标记为false
        //alert(this.fileList[i].res)
       if(this.fileList[i].res==false)
        res = true
       else
       {
        //  alert(this.uploadFileList.length)
        //  alert(87)
         this.$delete(this.uploadFileList, Math.abs(i - this.uploadFileList.length-1))
            //     alert(this.uploadFileList.length)
         }
        this.$delete(this.fileList,i);

    }
    }
    let ul = ""
    this.fileList.map(function (elem){
     if(elem.res==false)
        ul = ul + ","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
    })
    let uls = ""
    this.fileListOther.map(function (elem){
      if(elem.res==false)
        uls = uls +","+elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
    })
    this.formData.url = ul+","+uls;
    if(res==true){
       updateCollection(this.formData).then(response => {
        this.$modal.msgSuccess("删除成功");
       });
    }

  },
    handleFileCardPreview(file){
      this.dialogFileUrl = file.url;
      if(this.dialogFileUrl.includes("47.93.189.255")==true)
        this.dialogFileUrl = this.dialogFileUrl.replace("47.93.189.255","www.bendudu.com")

      const Base64 = require('js-base64').Base64
      this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
      myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
      this.desurl = process.env.VUE_APP_BASE_OTHER_API+"preview/"+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
      let myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
@@ -454,39 +1005,168 @@
    handleEdit()
    {
      this.dsb = false
      // this.btn = true
      this.btn = true
      this.isShow=false
    },

   //自定义上传方法
       handleChange(file, fileList1) {
          //定义一个全局数组uploadFileList来做存储

        // this.uploadFileList.push(file.raw);
         console.log("=========5555=========")
        this.uploadFileList.push(file.raw);
         this.fileList.push({name:file.name,url:file.url,res:true})
       },
      //自定义上传方法
      handleChange1(file, fileListOther12) {
             //定义一个全局数组uploadFileList来做存储

           // this.uploadFileList.push(file.raw);
          this.uploadFileList1.push(file.raw);
           this.fileListOther.push({name:file.name,url:file.url,res:true})
            console.log("=========5555=========")
            //console.log(file)
          //  console.log(this.uploadFileList)
         //  this.fileList = fileList
      },
      fileUpload(){
      //   var file = params.file;

         var formData = new FormData();
         //this.$refs.upload1.submit();
      //   alert(this.uploadFileList1.length)
         // formData.append('uploadFile', file);
         if(this.uploadFileList1.length==0){
              this.$modal.msgSuccess("文档上传列表不能为空！");
              return}

         this.uploadFileList1.forEach((elem)=>{
            formData.append("files", elem)

         })
         console.log(this.uploadFileList1)
         let _this = this

         this.uploading = true;
         uploadPic(formData).then(response => {
         _this.uploadFileList1 = []
           _this.formData.url = _this.formData.url+","+response.fileNames
             updateCollection(_this.formData).then(response => {
               this.$modal.msgSuccess("文档上传成功");
               // this.open = false;
            this.getData()
            this.fileListOther1=[]
             });
           })

      },
      picUpload()
      {

         var formData = new FormData();
         //this.$refs.upload.submit();
         //alert(this.uploadFileList.length)
      if(this.uploadFileList.length==0){
           this.$modal.msgSuccess("图像上传列表不能为空！");
           return}

         this.uploadFileList.forEach((elem)=>{
            formData.append("files", elem)

         })
         let _this = this


           uploadPic(formData).then(response => {
            // console.log(response.originalFilenames)
            // console.log(response.urls)
            // console.log(response.fileNames)
            //       console.log(response.newFileNames)
           // let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
           // _this.uploading1= false;
           // console.log(_this.fot.includes(pth))
           // // debugger
           // if(_this.fot.includes(pth) === true)
           // {
           //   _this.fileList.push({name:response.data.fileName, "url":response.data.url})
           //   let ul = _this.fileList.map(function (elem){
           //     return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
           //   }).join(",")
           //   let uls = _this.fileListOther.map(function (elem){
           //     return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
           //   }).join(",")
         //console.log(_this.fileList)
      //   alert(response.fileNames)
             _this.formData.url = _this.formData.url+","+response.fileNames
         _this.uploadFileList = []
            // alert(87)
             updateCollection(_this.formData).then(response => {
               _this.$modal.msgSuccess("图片上传成功");
               // this.open = false;

             });
           // }
           // else{
           //   _this.fileListOther.push({name:response.data.fileName, url:response.data.url})

           // }
         });
      },

    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this

      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)

        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})

        }

        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})

        }
      })

    },
    requestUpload1(params)
    {
      // var file = params.file;
      // var formData = new FormData();
      // formData.append('uploadFile', file);
      // let _this = this
      // this.uploading1 = true;
      // uploadPic(formData).then(response => {
      //   let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
      //   this.uploading1 = false;
      //   // this.$modal.msgSuccess("上传成功");
      //   if(_this.fot.includes(pth) === true)
      //   {
      //     _this.fileList.push({name:response.data.fileName, "url":response.data.url})

    /** 导出按钮操作 */
    handleExport() {
      this.download('/zfCollection/export', {
        ...this.queryParams
      }, `zfCollection_${new Date().getTime()}.xlsx`)
    }
      //   }

      //   else{
      //     _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
      //     let ul = this.fileList.map(function (elem){
      //       return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      //     }).join(",")
      //     let uls = this.fileListOther.map(function (elem){
      //       return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      //     }).join(",")
      //     this.formData.url = ul+","+uls
      //     console.log(this.formData.url)
      //     updateCollection(this.formData).then(response => {
      //       this.$modal.msgSuccess("上传成功");

      //       const videoElement = document.createElement('video'); // 创建一个新的video元素
      //       videoElement.src = response.data.url; // 设置video元素的src为视频URL
      //       // 监听loadedmetadata事件以确保视频元数据加载完成
      //       videoElement.addEventListener('loadedmetadata', function() {
      //         const canvas = document.createElement('canvas');// 创建一个canvas元素
      //         const context = canvas.getContext('2d');
      //         context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 将视频的首帧画面绘制到画布上
      //         const imageURL = canvas.toDataURL();// 将画布转换为图像URL
      //         videoElement.setAttribute('poster', imageURL);// 设置视频的封面图像

      //         // 在页面中显示视频元素
      //         document.body.appendChild(videoElement);
      //       });
      //       // this.open = false;
      //       // this.btn=false
      //     });
      //   }
      // })
    },

  }
}
@@ -511,10 +1191,20 @@
  display: block;
  position: absolute;
}
.hide /deep/ .el-upload--picture-card {
  display: none;
}
.form{
  background:center/11% no-repeat url('../../assets/icons/form.png') ;
}
.form_item{
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}
.el-upload-list__item-name {
  font-size: 14px; /* 调整文件名字的字体大小 */

}
</style>