| | |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item :disabled="multiple" icon="el-icon-top" style="height: 32px;width:240px;color: #0099ff;" @click.native="handleShare">分享</el-dropdown-item> |
| | | |
| | | |
| | | <el-dropdown-item icon="el-icon-top" @click.native="whoShare">分享给我的数据</el-dropdown-item> |
| | | <el-dropdown-item icon="el-icon-top" @click.native="handleWho">分享给谁了什么数据</el-dropdown-item> |
| | | <el-dropdown-item icon="el-icon-top" @click.native="showData">展示下载的分享数据</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | |
| | | |
| | | |
| | | <right-toolbar :parentValue.sync="valueFromParent" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="人物" prop="people" sortable width="150px" /> |
| | | <el-table-column label="地点" prop="address" sortable width="150px" /> |
| | | <el-table-column label="是否隐藏" prop="isHide" sortable :show-overflow-tooltip="true" width="150px" /> |
| | | |
| | | <el-table-column label="大事标题" prop="title" sortable :show-overflow-tooltip="true" width="150px" /> |
| | | <el-table-column label="是否是本家庭记录" prop="ownData" sortable width="150px" > |
| | | <template slot-scope="scope">{{scope.row.ownData === 0 ? '否': '是'}}</template> |
| | |
| | | ></div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" v-if="userId != 2"> |
| | | <el-table-column fixed="right" label="操作" align="center" width="250" class-name="small-padding fixed-width" v-if="userId != 2"> |
| | | <template slot-scope="scope" v-if="scope.row.roleId !== 1"> |
| | | <div class="button-container"> |
| | | <el-button |
| | |
| | | <el-form-item label="大事标题" prop="title"> |
| | | <el-input v-model="formDat.title" placeholder="请输入大事标题" clearable :style="{width: '100%'}" ></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> |
| | | <!-- 触发弹窗按钮 --> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-user-plus" |
| | | @click="openMemberDialog" |
| | | :disabled="loading" |
| | | > |
| | | 选择家族成员 |
| | | </el-button> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="人物" prop="people"> |
| | | <el-input v-model="formDat.people" placeholder="请输入人物" clearable :style="{width: '100%'}" > |
| | | </el-input> |
| | | </el-form-item> |
| | | <!-- 其它人选择字段 --> |
| | | <el-form-item label="其它人" prop="otherPeople"> |
| | | <!-- 已选其它人回显区域 --> |
| | | <div v-if="formDat.otherPeople && formDat.otherPeople.length > 0" class="selected-members"> |
| | | <el-tag |
| | | v-for="(name, index) in formDat.otherPeople" |
| | | :key="index" |
| | | closable |
| | | @close="handleOtherPeopleTagClose(index)" |
| | | > |
| | | {{ name }} |
| | | </el-tag> |
| | | </div> |
| | | <!-- 触发弹窗按钮 --> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-user" |
| | | @click="openOtherPeopleDialog" |
| | | :disabled="loading" |
| | | > |
| | | 添加其它人 |
| | | </el-button> |
| | | </el-form-item> |
| | | <el-form-item label="地点" prop="address"> |
| | | <el-input v-model="formDat.address" placeholder="请输入地点" clearable :style="{width: '100%'}" > |
| | | </el-input> |
| | |
| | | <el-date-picker v-model="formDat.happenTime" type="date" placeholder="请选择日期" |
| | | @click.native.stop |
| | | ref="datePicker" |
| | | |
| | | |
| | | |
| | | |
| | | :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="是否隐藏" prop="isHide"> |
| | | |
| | | <el-radio-group v-model="formDat.isHide" :style="{width: '100%'}"> |
| | | <el-radio label="是">是</el-radio> |
| | | <el-radio label="否">否</el-radio> |
| | | </el-radio-group> |
| | | |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="备注" prop="remark"> |
| | | <el-input v-model="formDat.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" ></el-input> |
| | | </el-form-item> |
| | |
| | | |
| | | </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="400px" |
| | | :close-on-click-modal="false" |
| | | @close="handleOtherPeopleDialogClose" |
| | | > |
| | | <div class="other-people-dialog"> |
| | | <el-input |
| | | v-model="otherPeopleInput" |
| | | placeholder="请输入姓名,按回车或点击添加按钮添加" |
| | | @keyup.enter.native="addOtherPeople" |
| | | style="margin-bottom: 20px;" |
| | | > |
| | | <el-button slot="append" icon="el-icon-plus" @click="addOtherPeople">添加</el-button> |
| | | </el-input> |
| | | |
| | | <!-- 已添加的其它人列表 --> |
| | | <div v-if="formDat.otherPeople && formDat.otherPeople.length > 0" class="added-people-list"> |
| | | <el-divider content-position="left">已添加 ({{ formDat.otherPeople.length }}人)</el-divider> |
| | | <el-tag |
| | | v-for="(name, index) in formDat.otherPeople" |
| | | :key="index" |
| | | closable |
| | | @close="handleOtherPeopleTagClose(index)" |
| | | style="margin-right: 8px; margin-bottom: 8px;" |
| | | > |
| | | {{ name }} |
| | | </el-tag> |
| | | </div> |
| | | |
| | | <div v-else class="no-people" style="padding: 20px 0;"> |
| | | <el-empty description="暂未添加任何人" :image-size="60"></el-empty> |
| | | </div> |
| | | </div> |
| | | |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" @click="confirmOtherPeople">完成</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- 分享对话框1 --> |
| | | <el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body @close="handleClose2"> |
| | |
| | | <el-table v-loading="loading1" :data="listRoot" :row-key="getRowId1" ref="table1" @selection-change="handleSelectionChange1" :row-class-name="tableRowClassName" style="background: #FFEFF2; border-radius: 14px 14px 14px 14px;"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column fixed label="序号" sortable type="index" :index="(queryParams1.pageNum-1)*queryParams1.pageSize+1" width="130"/> |
| | | <el-table-column label="身份" prop="identity" sortable width="130" > |
| | | <!-- <el-table-column label="身份" prop="identity" sortable width="130" > |
| | | <template slot-scope="scope" > |
| | | <span v-if="scope.row.isMyFamily==1">第{{scope.row.identity}}代</span> |
| | | <span v-else>——</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> --> |
| | | <el-table-column label="姓名" prop="nickName" sortable :show-overflow-tooltip="true" width="145" align="center"/> |
| | | </el-table> |
| | | |
| | |
| | | |
| | | |
| | | <script> |
| | | import { listRole, getRole, delRole, addRole, |
| | | import { listRole, getRole, delRole, addRole, |
| | | updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"; |
| | | import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"; |
| | | |
| | | |
| | | import { Notification, MessageBox, Message, Loading } from 'element-ui' |
| | | import {getAllInfo} from "@/api/system/user" |
| | | import { getFamilyMembers,listAnotherFamilyInfo } from '@/api/root'; // 假设获取家族成员的API |
| | | |
| | | //在system/note/index.js中导入接口函数 --接好了 |
| | | import {listFamilyevent,enload, delFamilyevent , addFamilyevent , uploadPic, |
| | | import {listFamilyevent, enload, delFamilyevent , addFamilyevent , uploadPic, |
| | | share,shareToWho,getWhoShare,downShareData,deleteShareData,showShareData,showShareUser |
| | | } from "@/api/bignote/index"; |
| | | import {listUserAll} from "@/api/root/index"; |
| | | import {getInfo} from "@/api/login"; |
| | | export default { |
| | | name: "Role", |
| | | name: "ZfEvent", |
| | | dicts: ['sys_normal_disable'], |
| | | data() { |
| | | return { |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | // 成员多选相关 |
| | | memberDialogVisible: false, // 弹窗可见性 |
| | | familyMembers: [], // 家族成员列表(原始数据) |
| | | anotherFamilyMembers: [], //另外家族成员信息 |
| | | selectedMemberIds: [], // 弹窗中临时选中的成员ID(用于多选交互) |
| | | memberSearch: '', // 成员搜索关键词 |
| | | loading: false, // 加载状态 |
| | | total1: 0, |
| | | // 分享给谁的list |
| | | listRoot: [], |
| | |
| | | total: 0, |
| | | // 家大事记表格数据 |
| | | familyList: [], |
| | | |
| | | selectedMemberIds:[], |
| | | displayMemberNames: [], // 显示用的成员名称数组 |
| | | |
| | | // 弹出层标题 |
| | | title: "", |
| | |
| | | dateRange: [], |
| | | // 数据范围选项 |
| | | fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx', |
| | | '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng','.m4a'], |
| | | '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng','.m4a','.M4A'], |
| | | fileList:[], |
| | | fileList1:[], |
| | | uploadFileList: [], |
| | |
| | | dsb:true, |
| | | btn:false, |
| | | uploading: false, |
| | | // 其它人弹窗相关 |
| | | otherPeopleDialogVisible: false, |
| | | otherPeopleInput: '', |
| | | formDat: { |
| | | // type: undefined, |
| | | selectedMemberIds: [], |
| | | otherPeople: [], // 存储其它人名字 |
| | | title: undefined, |
| | | location: undefined, |
| | | holder: undefined, |
| | |
| | | }, |
| | | // 表单校验 |
| | | rules: { |
| | | selectedMemberIds: [ |
| | | { type: 'array', required: true, message: '请至少选择一名家族成员', trigger: 'change' } |
| | | ], |
| | | title: [{ |
| | | required: true, |
| | | message: '请输入大事标题', |
| | |
| | | this.getInfo() |
| | | |
| | | this.getList1(); |
| | | |
| | | |
| | | |
| | | }, |
| | | computed: { |
| | | // 已选成员姓名(用于回显) |
| | | selectedMemberNames() { |
| | | |
| | | |
| | | // 优先使用直接设置的显示名称 |
| | | if(this.displayMemberNames && this.displayMemberNames.length > 0 && this.selectedMemberIds.length==0) { |
| | | return this.displayMemberNames; |
| | | } |
| | | |
| | | |
| | | // 否则根据选中的ID计算 |
| | | // 合并过滤后的成员名称和displayMemberNames内容 |
| | | console.log(this.selectedMemberIds) |
| | | 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)); |
| | | console.log(uniqueNames) |
| | | // 如果displayMemberNames有内容,也加入Set中 |
| | | if(this.displayMemberNames && this.displayMemberNames.length > 0) { |
| | | this.displayMemberNames.forEach(name => uniqueNames.add(name)); |
| | | } |
| | | else |
| | | this.displayMemberNames = Array.from(uniqueNames) |
| | | // this.selectedMemberIds = [] |
| | | // 转回数组并返回 |
| | | 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) |
| | | // ); |
| | | } |
| | | }, |
| | | methods: { |
| | | handleDialogClick() |
| | |
| | | this.loading1 = true; |
| | | let userId = this.$store.state.user.userId |
| | | // alert(userId) |
| | | |
| | | this.userOptions = [] |
| | | showShareUser(userId, 2013).then(response=>{ |
| | | console.log("===========ddddddddddddd") |
| | | console.log(response.data) |
| | |
| | | // this.queryParams1.happenEndTime = this.dateRange1.length > 0 && this.dateRange1[1] |
| | | // // alert(this.$store.state.user.clanId) |
| | | // this.listRoot = [] |
| | | // let clanId = this.$store.state.user.clanId |
| | | // getAllInfo(clanId).then(response => { |
| | | // this.listRoot = response.data; |
| | | // const kon = {} |
| | | // console.log(response.data,'userListuserListuserList99999999999999') |
| | | // this.listRoot.forEach(element => { |
| | | // kon[element['nickName']] = element['userId'] |
| | | // }) |
| | | // for(let i in kon){ |
| | | // this.userOptions.push({label: i,value: kon[i]}) |
| | | // } |
| | | // for(let i in this.userOptions){ |
| | | // this.userList.push(this.userOptions[i].value) |
| | | // } |
| | | // console.log(this.userList,'userListuserListuserList99999999999999') |
| | | // this.loading1 = false; |
| | | // } |
| | | // ); |
| | | let clanId = this.$store.state.user.clanId |
| | | getAllInfo(clanId).then(response => { |
| | | this.listRoot = response.data; |
| | | const kon = {} |
| | | console.log(response.data,'userListuserListuserList99999999999999') |
| | | this.listRoot.forEach(element => { |
| | | kon[element['nickName']] = element['userId'] |
| | | }) |
| | | // for(let i in kon){ |
| | | // this.userOptions.push({label: i,value: kon[i]}) |
| | | // } |
| | | // for(let i in this.userOptions){ |
| | | // this.userList.push(this.userOptions[i].value) |
| | | // } |
| | | // console.log(this.userList,'userListuserListuserList99999999999999') |
| | | this.loading1 = false; |
| | | } |
| | | ); |
| | | }, |
| | | // 确认分享 |
| | | subShare(row) { |
| | | const shareList = {} |
| | | shareList.shareContents = this.id1 || this.ids; |
| | | shareList.shareIds = this.ids1 |
| | | if(shareList.shareIds.length==0) |
| | | { |
| | | this.$modal.msgSuccess("请选择分享对象"); |
| | | return; |
| | | } |
| | | console.log(shareList,'sharelistsharelist') |
| | | |
| | | |
| | | |
| | | |
| | | this.$modal.confirm('是否确认分享?').then(function() { |
| | | return share(shareList); |
| | | }).then(() => { |
| | | |
| | | this.getList(); |
| | | this.getList1(); |
| | | this.$modal.msgSuccess("分享成功"); |
| | | this.id1 = undefined |
| | | this.open1 = false; |
| | |
| | | getInfo(){ |
| | | console.log('-----------------') |
| | | getInfo().then(response=>{ |
| | | console.log(response.user) |
| | | // alert(123) |
| | | console.log(response.user.roles[0].roleId,'roleID') |
| | | this.userId = response.user.roles[0].roleId |
| | | }) |
| | |
| | | |
| | | close(){ |
| | | //alert(234) |
| | | |
| | | |
| | | |
| | | this.open = false |
| | | }, |
| | | // 取消按钮 |
| | | cancelData() { |
| | | |
| | | |
| | | this.open = false; |
| | | this.reset(); |
| | | }, |
| | |
| | | } |
| | | ); |
| | | }, |
| | | openOtherPeopleDialog(){ |
| | | this.otherPeopleDialogVisible = true; |
| | | this.otherPeopleInput = ''; // 清空输入框 |
| | | }, |
| | | |
| | | // 添加其它人(支持回车和点击添加按钮) |
| | | addOtherPeople() { |
| | | const name = this.otherPeopleInput.trim(); |
| | | if (!name) { |
| | | this.$message.warning('请输入姓名'); |
| | | return; |
| | | } |
| | | if (this.formDat.otherPeople.includes(name)) { |
| | | this.$message.warning('该姓名已添加'); |
| | | return; |
| | | } |
| | | this.formDat.otherPeople.push(name); |
| | | this.otherPeopleInput = ''; // 清空输入框,准备输入下一个 |
| | | this.$message.success(`已添加: ${name}`); |
| | | }, |
| | | |
| | | // 确认完成(关闭弹窗) |
| | | confirmOtherPeople() { |
| | | if (this.formDat.otherPeople.length > 0) { |
| | | this.$message.success(`已添加 ${this.formDat.otherPeople.length} 名其它人`); |
| | | } else { |
| | | this.$message.info('未添加任何其它人'); |
| | | } |
| | | this.otherPeopleDialogVisible = false; |
| | | }, |
| | | |
| | | // 关闭其它人标签 |
| | | handleOtherPeopleTagClose(index) { |
| | | const removedName = this.formDat.otherPeople[index]; |
| | | this.formDat.otherPeople.splice(index, 1); |
| | | this.$message.info(`已移除: ${removedName}`); |
| | | }, |
| | | |
| | | // 其它人弹窗关闭处理 |
| | | handleOtherPeopleDialogClose() { |
| | | this.otherPeopleInput = ''; |
| | | }, |
| | | |
| | | // ------------------- 恢复被删除的方法 ------------------- |
| | | |
| | | // 取消按钮 |
| | | cancel() { |
| | |
| | | // 多选框选中数据 |
| | | handleSelectionChange(selection) { |
| | | this.ids = selection.map(item => item.id) |
| | | // alert(this.ids) |
| | | this.single = selection.length!=1 |
| | | this.multiple = !selection.length |
| | | }, |
| | |
| | | this.title = "添加家庭大事记信息"; |
| | | }, |
| | | |
| | | |
| | | /** 查看详细信息 */ |
| | | handleCheck(row){ |
| | | const id = row.id; |
| | | this.open2 = false; |
| | | this.$router.push("/familymodel/bignote/familyeventInfo/" + id); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | |
| | | }, |
| | | |
| | | handleRemove(file) { |
| | | //alert(98) |
| | | //alert(this.fileList.length) |
| | | for(let i = 0; i < this.fileList.length; i++) |
| | | { |
| | | if(this.fileList[i].url==file.url) |
| | | { |
| | | this.$delete(this.fileList,i); |
| | | this.$delete(this.uploadFileList,i); |
| | | } |
| | | } |
| | | // let ul = this.fileList.map(function (elem){ |
| | | // return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") |
| | | // }).join(",") |
| | | // alert(this.fileListOther.length) |
| | | // let uls = this.fileListOther.map(function (elem){ |
| | | // return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") |
| | | // }).join(",") |
| | | // this.formDat.url = ul+","+uls; |
| | | for(let i = 0; i < this.fileList.length; i++) |
| | | { |
| | | if(this.fileList[i].url==file.url) |
| | | { |
| | | this.$delete(this.fileList,i); |
| | | this.$delete(this.uploadFileList,i); |
| | | } |
| | | } |
| | | }, |
| | | handleRemoveFile(file) { |
| | | for(let i = 0; i < this.fileListOther.length; i++) |
| | | { |
| | | if(this.fileListOther[i].url==file.url) |
| | | { |
| | | { |
| | | this.$delete(this.fileListOther,i); |
| | | this.$delete(this.uploadFileList1,i); |
| | | } |
| | | this.$delete(this.uploadFileList1,i); |
| | | } |
| | | } |
| | | }, |
| | | |
| | | handlePictureCardPreview(file) { |
| | | this.dialogImageUrl = file.url; |
| | | this.dialogVisible = true; |
| | | }, |
| | | |
| | | // |
| | | 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 // 过滤掉与关闭名称相同的元素 |
| | | ) |
| | | this.displayMemberNames = this.selectedMemberNames |
| | | console.log(this.selectedMemberNames) |
| | | |
| | | }, |
| | | /** 提交按钮(数据权限) */ |
| | | submitDataScope: function() { |
| | |
| | | // }).join(",") |
| | | // this.formDat.url = ul+","+uls |
| | | // alert(this.formDat.url) |
| | | //把名字连在一起 |
| | | var pel = "" |
| | | pel = pel + this.selectedMemberNames.join(",") |
| | | if(this.formDat.otherPeople.length != 0) |
| | | { |
| | | pel = pel +";"+ this.formDat.otherPeople.join(",") |
| | | } |
| | | // alert(pel) |
| | | this.formDat.people = pel; |
| | | this.$refs["elForm"].validate(valid => { |
| | | if (valid) { |
| | | |
| | |
| | | this.handleRemoveFile(this.fileListOther[0]); |
| | | } |
| | | this.getList(); |
| | | this.selectedMemberNames = []; |
| | | this.displayMemberNames = [] |
| | | }); |
| | | } |
| | | }); |
| | |
| | | Message({ message: "导入失败", type: 'error' }) |
| | | } |
| | | |
| | | } |
| | | }, |
| | | // 打开成员多选弹窗 |
| | | 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 |
| | | // alert(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.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; |
| | | } |
| | | }, |
| | | |
| | | // 确认选择成员(保存到表单) |
| | | confirmMemberSelection() { |
| | | console.log() |
| | | this.formDat.selectedMemberIds = [...this.selectedMemberIds]; // 将弹窗选中的ID同步到表单 |
| | | this.memberDialogVisible = false; |
| | | this.$message.info(`已选择 ${this.selectedMemberNames.length} 名家族成员`); |
| | | // 清空对话框里面选择的内容 |
| | | // if(this.displayMemberNames.length==0) |
| | | this.displayMemberNames = this.selectedMemberNames |
| | | this.selectedMemberIds = []; |
| | | }, |
| | | 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 // 过滤掉与关闭名称相同的元素 |
| | | ) |
| | | this.displayMemberNames = this.selectedMemberNames |
| | | console.log(this.selectedMemberNames) |
| | | |
| | | }, |
| | | // |
| | | |
| | | } |
| | | }; |
| | |
| | | .button-container { |
| | | display: inline-flex; /* 设置按钮容器为行内元素 */ |
| | | } |
| | | |
| | | |
| | | /* 已选成员标签样式 */ |
| | | .selected-members { |
| | | margin-bottom: 12px; |
| | | .el-tag { |
| | | margin-right: 8px; |
| | | margin-bottom: 8px; |
| | | } |
| | | } |
| | | |
| | | /* 多选弹窗样式 */ |
| | | .member-dialog-content { |
| | | max-height: 400px; |
| | | overflow-y: auto; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | /* 成员列表样式 */ |
| | | .member-checkbox-group { |
| | | .el-checkbox { |
| | | display: block; |
| | | padding: 12px; |
| | | border-bottom: 1px solid #f5f5f5; |
| | | &:last-child { |
| | | border-bottom: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* 成员项样式 */ |
| | | .member-item { |
| | | display: flex; |
| | | align-items: center; |
| | | .member-avatar { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 50%; |
| | | margin-right: 12px; |
| | | } |
| | | .member-info { |
| | | .member-name { |
| | | font-weight: 500; |
| | | margin-bottom: 4px; |
| | | } |
| | | .member-role { |
| | | font-size: 12px; |
| | | color: #606266; |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* 加载状态样式 */ |
| | | .loading-container { |
| | | text-align: center; |
| | | padding: 40px 0; |
| | | .el-loading-spinner { |
| | | margin-bottom: 16px; |
| | | } |
| | | }.signature-checkbox |
| | | { |
| | | margin-right: 15px; |
| | | display: inline-block; |
| | | margin-bottom: 8px; |
| | | cursor: pointer; |
| | | } |
| | | .signature-checkbox input[type="checkbox"] { |
| | | margin-right: 6px; |
| | | } |
| | | |
| | | .signature-checkbox span { |
| | | cursor: pointer; |
| | | } |
| | | /* 无数据样式 */ |
| | | .no-data { |
| | | padding: 60px 0; |
| | | } |
| | | </style> |