| | |
| | | <el-input v-model="formData.title" placeholder="请输入标题" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="人物" prop="people"> |
| | | <!-- <el-form-item label="人物" prop="people"> |
| | | <el-input v-model="formData.people" placeholder="请输入人物" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | | </el-input> --> |
| | | |
| | | <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-form-item label="地点" prop="address"> |
| | | <el-input v-model="formData.address" placeholder="请输入地点" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | </el-input> |
| | |
| | | :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <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-form-item label="备注" prop="remark"> |
| | | <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> |
| | | </el-form-item> |
| | |
| | | <el-dialog :visible.sync="dialogVisible"> |
| | | <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> |
| | | <!-- 多选列表(有数据) --> |
| | | <!-- <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> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import errorCode from "@/utils/errorCode"; |
| | | import {Message} from "element-ui"; |
| | | import { getFamilyeventInfo, updateFamilyevent, uploadPic, download} from "@/api/bignote/index"; |
| | | import { getFamilyMembers } from '@/api/root'; // 假设获取家族成员的API |
| | | |
| | | export default { |
| | | components: {}, |
| | | props: [], |
| | | data() { |
| | | return { |
| | | |
| | | // 成员多选相关 |
| | | memberDialogVisible: false, // 弹窗可见性 |
| | | familyMembers: [], // 家族成员列表(原始数据) |
| | | selectedMemberIds: [], // 弹窗中临时选中的成员ID(用于多选交互) |
| | | displayMemberNames: [], // 显示用的成员名称数组 |
| | | memberSearch: '', // 成员搜索关键词 |
| | | loading: false, // 加载状态 |
| | | cdi:"家庭大事记信息", |
| | | udi:"家庭大事记修改", |
| | | |
| | |
| | | typeOptions: [], |
| | | } |
| | | }, |
| | | computed: {}, |
| | | computed: { |
| | | // 已选成员姓名(用于回显) |
| | | selectedMemberNames() { |
| | | // alert(this.familyMembers.length) |
| | | // 优先使用直接设置的显示名称 |
| | | if(this.displayMemberNames && this.displayMemberNames.length > 0) { |
| | | return this.displayMemberNames; |
| | | } |
| | | // 否则根据选中的ID计算 |
| | | return this.familyMembers |
| | | .filter(member => this.selectedMemberIds.includes(member.userId)) |
| | | .map(member => member.oldName); |
| | | }, |
| | | // 过滤后的成员列表(搜索功能) |
| | | 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; |
| | | let jd; |
| | | |
| | | if(this.$route.query.detail!=undefined) |
| | | { |
| | | jd = this.$route.query.detail |
| | |
| | | // _this.fileList1 = _this.fileList |
| | | } |
| | | this.loading = false; |
| | | this.splitPeopleToSelectedNames(this.formData.people); // 初始化时处理已选成员 |
| | | }); |
| | | } |
| | | console.log(this.fileList,'fileListfilelllllllllllll') |
| | |
| | | }, |
| | | mounted() {}, |
| | | methods: { |
| | | splitPeopleToSelectedNames(people) { |
| | | // 处理逻辑: |
| | | // 1. 判断 people 是否存在且为字符串,避免报错 |
| | | if (!people || typeof people !== "string") { |
| | | this.displayMemberNames = []; |
| | | 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) |
| | | }, |
| | | // 打开成员多选弹窗 |
| | | 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 |
| | | try { |
| | | const res = await getFamilyMembers(clanId); // 假设需要家族ID参数 |
| | | |
| | | |
| | | console.log(res) |
| | | console.log(res.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 |
| | |
| | | </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> |
| | |
| | | :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> |
| | |
| | | height: 35px; |
| | | border-radius: 16px 16px 16px 16px; |
| | | opacity: 0.5;" allow-create |
| | | filterable clearable :style="{width: '100%'}" > |
| | | filterable :style="{width: '100%'}" > |
| | | <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | |
| | | <el-table-column label="标题" prop="title" sortable :show-overflow-tooltip="true" width="150" /> |
| | | <el-table-column label="存储地址" prop="location" sortable width="150" /> |
| | | <el-table-column label="持有人" prop="holder" sortable width="150" /> |
| | | <el-table-column label="价值区间" prop="valueRange" sortable width="150" /> |
| | | |
| | | <el-table-column label="具体位置" prop="address" sortable width="150" /> |
| | | <el-table-column label="备注" prop="remark" sortable width="130" > |
| | | <template slot-scope="scope">{{scope.row.remark? scope.row.remark: '————'}}</template> |
| | |
| | | <el-date-picker v-model="formDat.happenTime" type="date" placeholder="请选择日期" |
| | | :editable="false" :clearable="false" :style="{width: '100%'}" value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="价值范围" prop="valueRange"> |
| | | <el-radio-group v-model="formDat.valueRange" :style="{width: '100%'}"> |
| | | <el-radio v-for="(item, index) in valueRangeOptions" :key="index" :label="item.value">{{ item.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> |
| | |
| | | remark: undefined, |
| | | happenTime:undefined, |
| | | url: "", |
| | | |
| | | valueRange: undefined |
| | | }, |
| | | // 菜单列表 |
| | | menuOptions: [], |
| | |
| | | message: '请输入具体位置', |
| | | trigger: 'blur' |
| | | }], |
| | | |
| | | happenTime: [{ |
| | | required: true, |
| | | message: '请选择日期选择', |
| | | trigger: 'blur' |
| | | }], |
| | | valueRange: [{ |
| | | required: true, |
| | | message: '请选择价值范围', |
| | | trigger: 'change' |
| | | }], |
| | | }, |
| | | typeOptions: [], |
| | | // 价值范围选项 |
| | | valueRangeOptions: [ |
| | | { label: '10000以下', value: '10000以下' }, |
| | | { label: '1w到10w', value: '1w到10w' }, |
| | | { label: '10w到100w', value: '10w到100w' }, |
| | | { label: '100w-1000w', value: '100w-1000w' }, |
| | | { label: '1000w以上', value: '1000w以上' } |
| | | ], |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | |
| | | <el-form-item label="价值范围" prop="valueRange"> |
| | | <el-radio-group v-model="formData.valueRange" :style="{width: '100%'}"> |
| | | <el-radio v-for="(item, index) in valueRangeOptions" :key="index" :label="item.value">{{ item.label }}</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="标题" prop="title"> |
| | | <el-input v-model="formData.title" placeholder="请输入标题" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> |
| | | </el-form-item> |
| | |
| | | address: undefined, |
| | | remark: undefined, |
| | | url: "", |
| | | valueRange: undefined, |
| | | }, |
| | | desurl:'', |
| | | dialogImageUrl: '', |
| | |
| | | message: '请输入具体位置', |
| | | trigger: 'blur' |
| | | }], |
| | | valueRange: [{ |
| | | required: true, |
| | | message: '请选择价值范围', |
| | | trigger: 'change' |
| | | }], |
| | | |
| | | |
| | | }, |
| | | typeOptions: [], |
| | | valueRangeOptions: [ |
| | | {label: '10000以下', value: '10000以下'}, |
| | | {label: '1w到10w', value: '1w到10w'}, |
| | | {label: '10w到100w', value: '10w到100w'}, |
| | | {label: '100w-1000w', value: '100w-1000w'}, |
| | | {label: '1000w以上', value: '1000w以上'}, |
| | | ], |
| | | } |
| | | }, |
| | | computed: {}, |
| | |
| | | <el-table-column label="价值(金额)" prop="price" sortable width="140" align="center" > |
| | | <template slot-scope="scope">{{scope.row.price? scope.row.price: '————'}}</template> |
| | | </el-table-column> |
| | | <el-table-column label="价值范围" prop="valueRange" sortable width="120" align="center" > |
| | | <template slot-scope="scope">{{scope.row.valueRange? scope.row.valueRange: '————'}}</template> |
| | | </el-table-column> |
| | | <el-table-column label="期限" prop="timeLimit" sortable width="110" align="center"> |
| | | <template slot-scope="scope">{{scope.row.timeLimit? scope.row.timeLimit: '————'}}</template> |
| | | </el-table-column> |
| | |
| | | <el-form-item label="财产类别" prop="type"> |
| | | <el-input v-model="formDat.type" placeholder="请输入财产类别" clearable :style="{width: '100%'}" > |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="价值范围" prop="valueRange"> |
| | | <el-radio-group v-model="formDat.valueRange" :style="{width: '100%'}"> |
| | | <el-radio v-for="(item, index) in valueRangeOptions" :key="index" :label="item.value">{{ item.label }}</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="财产名称" prop="incomeName"> |
| | | <el-input v-model="formDat.incomeName" placeholder="请输入财产名称" clearable :style="{width: '100%'}" > |
| | |
| | | </div> |
| | | |
| | | |
| | | </el-upload> |
| | | </el-upload> |
| | | |
| | | </el-form> |
| | |
| | | location:undefined, |
| | | remark:undefined, |
| | | url: "", |
| | | valueRange: undefined, |
| | | |
| | | }, |
| | | // 菜单列表 |
| | |
| | | required: true, |
| | | message: '请输入财产类别', |
| | | trigger: 'blur' |
| | | }], |
| | | valueRange: [{ |
| | | required: true, |
| | | message: '请选择价值范围', |
| | | trigger: 'change' |
| | | }], |
| | | happenTime: [{ |
| | | required: true, |
| | |
| | | label: '购买', |
| | | }, |
| | | ], |
| | | valueRangeOptions: [ |
| | | {label: '10000以下', value: '10000以下'}, |
| | | {label: '1w到10w', value: '1w到10w'}, |
| | | {label: '10w到100w', value: '10w到100w'}, |
| | | {label: '100w-1000w', value: '100w-1000w'}, |
| | | {label: '1000w以上', value: '1000w以上'}, |
| | | ], |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | </el-form-item> |
| | | </el-cow> |
| | | <el-cow > |
| | | <el-form-item label="价值范围" prop="valueRange" label-width="100px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> |
| | | |
| | | |
| | | |
| | | <el-radio-group v-model="formData.valueRange" placeholder="请输入价值范围" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | <el-radio v-for="(item, index) in valueRangeOptions" :key="index" :label="item.value">{{ item.label }}</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-cow> |
| | | <el-cow > |
| | | <el-form-item label="金额" prop="price" label-width="100px" 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> |
| | |
| | | |
| | | fileList:[ |
| | | ], |
| | | valueRangeOptions: [ |
| | | {label: '10000以下', value: '10000以下'}, |
| | | {label: '1w到10w', value: '1w到10w'}, |
| | | {label: '10w到100w', value: '10w到100w'}, |
| | | {label: '100w-1000w', value: '100w-1000w'}, |
| | | {label: '1000w以上', value: '1000w以上'}, |
| | | ], |
| | | fileList1:[], |
| | | uploadFileList:[], |
| | | uploadFileList1:[], |
| | |
| | | status:undefined, |
| | | isChange:undefined, |
| | | incomeName:undefined, |
| | | valueRange:undefined, |
| | | price:undefined, |
| | | timeLimit:undefined, |
| | | propertyRight:undefined, |
| | |
| | | message: '请输入收支类别', |
| | | trigger: 'blur' |
| | | }], |
| | | valueRange: [{ |
| | | required: true, |
| | | message: '请输入价值范围', |
| | | trigger: 'blur' |
| | | }], |
| | | timeLimit: [{ |
| | | required: true, |
| | | message: '请输入期限', |