| | |
| | | </div> |
| | | </el-form-item> |
| | | |
| | | <!-- 其它人显示区域 --> |
| | | <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-form-item label="地点" prop="address"> |
| | | <el-input v-model="formData.address" placeholder="请输入地点" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | |
| | | </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> |
| | |
| | | anotherFamilyMembers: [], //另外家族成员信息 |
| | | selectedMemberIds: [], // 弹窗中临时选中的成员ID(用于多选交互) |
| | | displayMemberNames: [], // 显示用的成员名称数组 |
| | | otherPeople: [], // 其它人列表 |
| | | tempOtherPeople: [], // 弹窗中临时编辑的其它人列表 |
| | | otherPeopleInput: '', // 其它人输入框内容 |
| | | otherPeopleDialogVisible: false, // 其它人弹窗可见性 |
| | | memberSearch: '', // 成员搜索关键词 |
| | | loading: false, // 加载状态 |
| | | cdi:"家庭大事记信息", |
| | |
| | | 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) |
| | |
| | | // 1. 判断 people 是否存在且为字符串,避免报错 |
| | | if (!people || typeof people !== "string") { |
| | | this.displayMemberNames = []; |
| | | this.otherPeople = []; |
| | | return; |
| | | } |
| | | console.log(people.split(",")) |
| | | // 2. 按逗号分割字符串,去除每个元素的前后空格,过滤空值(如连续逗号的情况) |
| | | this.displayMemberNames = people.split(",") |
| | | // people |
| | | //.split(",") // 按逗号分割为数组 |
| | | //.map((name) => name.trim()) // 去除每个元素的前后空格 |
| | | // .filter((name) => name); // 过滤空字符串(处理 "a,,b" 这类情况) |
| | | console.log(this.displayMemberNames) |
| | | |
| | | // 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() { |
| | |
| | | }, |
| | | |
| | | 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 |
| | | var pel = "" |
| | | pel = pel + this.selectedMemberNames.join(",") |
| | | this.formData.people = pel; |
| | | // 组合数据:家族成员按逗号分隔,其它人按逗号分隔,两部分用分号分隔 |
| | | const memberPart = this.selectedMemberNames.join(","); |
| | | const otherPart = this.otherPeople.join(","); |
| | | this.formData.people = `${memberPart};${otherPart}`; |
| | | |
| | | this.$refs['elForm'].validate(valid => { |
| | | if (valid) { |
| | | if (this.formData.id != undefined) { |
| | |
| | | background:center/11% no-repeat url('../../assets/icons/form.png') ; |
| | | } |
| | | </style> |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |