| | |
| | | <template> |
| | | <div class="app-container" style="opacity: 1;"> |
| | | <div class="app-container" style="opacity: 1;" > |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" > |
| | | |
| | | <el-form-item label="大事标题" prop="title"> |
| | |
| | | |
| | | </el-upload> |
| | | </el-col> |
| | | <el-dropdown placement="分享相关"> |
| | | <el-button size="mini" type="primary" |
| | | plain |
| | | icon="el-icon-top">分享相关</el-button> |
| | | <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-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | :disabled="multiple" |
| | | @click="handleShare" |
| | | <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> |
| | | |
| | | >分享</el-button> |
| | | </el-col> |
| | | |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | @click="handleWho" |
| | | >分享给谁了什么数据</el-button> |
| | | </el-col> |
| | | |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | @click="whoShare" |
| | | >分享给我的数据</el-button> |
| | | </el-col> |
| | | |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | @click="showData" |
| | | >展示下载的分享数据</el-button> |
| | | </el-col> |
| | | |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | <right-toolbar :parentValue.sync="valueFromParent" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | | <!-- 序号、时间、人物、地点、大事标题、电子文件、备注 --> |
| | | <!-- 这里有个familyList数组 是在data()中定义的 --> |
| | | <el-table v-loading="loading" :data="familyList" :row-key="getRowId" ref="multipleTable" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"> |
| | | <el-table v-loading="loading" border :data="familyList" :row-key="getRowId" ref="multipleTable" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" :reserve-selection="true" width="55" align="center" /> |
| | | |
| | | <el-table-column fixed label="序号" sortable type="index" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" width="80px"/> |
| | |
| | | ></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-dialog :title="title" :visible.sync="open" width="800px" append-to-body> |
| | | <el-dialog :title="title" @click.native="handleDialogClick" :visible.sync="open" width="800px" :append-to-body="true"> |
| | | <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px"> |
| | | |
| | | |
| | | <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="people"> |
| | | <el-input v-model="formDat.people" 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="address"> |
| | | <el-input v-model="formDat.address" placeholder="请输入地点" clearable :style="{width: '100%'}" > |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="发生时间" prop="happenTime"> |
| | | <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 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="remark"> |
| | |
| | | |
| | | </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> |
| | | <!-- 分享对话框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, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"; |
| | | 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 } from '@/api/root'; // 假设获取家族成员的API |
| | | |
| | | //在system/note/index.js中导入接口函数 --接好了 |
| | | import {listFamilyevent,enload, delFamilyevent , addFamilyevent , uploadPic, |
| | | share,shareToWho,getWhoShare,downShareData,deleteShareData,showShareData |
| | | 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: [], // 家族成员列表(原始数据) |
| | | selectedMemberIds: [], // 弹窗中临时选中的成员ID(用于多选交互) |
| | | memberSearch: '', // 成员搜索关键词 |
| | | loading: false, // 加载状态 |
| | | total1: 0, |
| | | // 分享给谁的list |
| | | listRoot: [], |
| | | open1:false, |
| | |
| | | dateRange1: [], |
| | | |
| | | |
| | | |
| | | valueFromParent: "家大事记", |
| | | userId: undefined, |
| | | // 遮罩层 |
| | | disabled: false, |
| | |
| | | dateRange: [], |
| | | // 数据范围选项 |
| | | fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx', |
| | | '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'], |
| | | '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng','.m4a','.M4A'], |
| | | fileList:[], |
| | | fileList1:[], |
| | | uploadFileList: [], |
| | |
| | | uploading: false, |
| | | formDat: { |
| | | // type: undefined, |
| | | selectedMemberIds: [], |
| | | title: undefined, |
| | | location: undefined, |
| | | holder: undefined, |
| | |
| | | }, |
| | | // 表单校验 |
| | | rules: { |
| | | selectedMemberIds: [ |
| | | { type: 'array', required: true, message: '请至少选择一名家族成员', trigger: 'change' } |
| | | ], |
| | | title: [{ |
| | | required: true, |
| | | message: '请输入大事标题', |
| | |
| | | typeOptions: [], |
| | | }; |
| | | }, |
| | | |
| | | created() { |
| | | this.getList(); |
| | | // this.getCateInfor() |
| | | this.getInfo() |
| | | |
| | | this.getList1(); |
| | | |
| | | |
| | | }, |
| | | computed: { |
| | | // 已选成员姓名(用于回显) |
| | | selectedMemberNames() { |
| | | 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) |
| | | // ); |
| | | } |
| | | }, |
| | | methods: { |
| | | handleDialogClick() |
| | | { |
| | | // 关闭日期选择器 |
| | | this.$refs.datePicker.handleClose(); |
| | | }, |
| | | // 分页 |
| | | fenYe(){ |
| | | // @pagination='ifNum === 1 ? selectValue : (ifNum === 2 ? whoShare : showData)' |
| | |
| | | }, |
| | | getList1() { |
| | | this.loading1 = true; |
| | | this.queryParams1.happenStartTime = this.dateRange1.length > 0 && this.dateRange1[0] |
| | | this.queryParams1.happenEndTime = this.dateRange1.length > 0 && this.dateRange1[1] |
| | | listUserAll(this.queryParams1).then(response => { |
| | | this.listRoot = response.data.data; |
| | | let userId = this.$store.state.user.userId |
| | | // alert(userId) |
| | | this.userOptions = [] |
| | | showShareUser(userId, 2013).then(response=>{ |
| | | console.log("===========ddddddddddddd") |
| | | console.log(response.data) |
| | | console.log("--------------------") |
| | | response.data.forEach(element =>{ |
| | | this.userOptions.push({label: element.oldName,value: element.userId}) |
| | | }) |
| | | }) |
| | | // this.queryParams1.happenStartTime = this.dateRange1.length > 0 && this.dateRange1[0] |
| | | // 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,'userListuserListuserList') |
| | | // 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; |
| | | } |
| | | ); |
| | |
| | | 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; |
| | |
| | | isInFot(fileName) { |
| | | return this.fot.includes(fileName); |
| | | }, |
| | | |
| | | close(){ |
| | | //alert(234) |
| | | |
| | | |
| | | this.open = false |
| | | }, |
| | | // 取消按钮 |
| | | cancelData() { |
| | | |
| | | this.open = false; |
| | | this.reset(); |
| | | }, |
| | |
| | | /** 查看详细信息 */ |
| | | handleCheck(row){ |
| | | const id = row.id; |
| | | this.open2 = false; |
| | | this.$router.push("/familymodel/bignote/familyeventInfo/" + id); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | |
| | | // }).join(",") |
| | | // this.formDat.url = ul+","+uls |
| | | // alert(this.formDat.url) |
| | | //把名字连在一起 |
| | | var pel = "" |
| | | pel = pel + this.selectedMemberNames.join(",") |
| | | this.formDat.people = pel; |
| | | this.$refs["elForm"].validate(valid => { |
| | | if (valid) { |
| | | |
| | |
| | | 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 |
| | | try { |
| | | const res = await getFamilyMembers(clanId); // 假设需要家族ID参数 |
| | | |
| | | |
| | | console.log(res) |
| | | console.log(res.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() { |
| | | this.formDat.selectedMemberIds = [...this.selectedMemberIds]; // 将弹窗选中的ID同步到表单 |
| | | this.memberDialogVisible = false; |
| | | this.$modal.message(`已选择 ${this.selectedMemberNames.length} 名家族成员`); |
| | | }, |
| | | |
| | | // 移除已选成员标签 |
| | | handleTagClose(index) { |
| | | const removedId = this.familyForm.selectedMemberIds[index]; |
| | | this.familyForm.selectedMemberIds = this.familyForm.selectedMemberIds.filter(id => id !== removedId); |
| | | } |
| | | |
| | | } |
| | |
| | | .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; |
| | | } |
| | | /* 无数据样式 */ |
| | | .no-data { |
| | | padding: 60px 0; |
| | | } |
| | | </style> |