| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- 刷新页面 --> |
| | | <!-- <MyComponent :key="componentKey" />--> |
| | | <!-- 回到顶部--> |
| | | <el-backtop :bottom="150" :right="30"> |
| | | <el-button type="primary" circle |
| | |
| | | <!-- <el-input v-model="individualList.sex === 1 ? '男':'女' " placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">--> |
| | | <!-- </el-input>--> |
| | | <template v-if="!isEditing"> |
| | | <el-input v-model="individualList.sex === 1 ? '男':'女'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> |
| | | <el-input v-model="individualList.sex === 1 ? inds='男':inds='女'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> |
| | | </template> |
| | | <template v-else> |
| | | <el-select v-model="individualList.sex" placeholder="请选择性别" clearable :style="{width: '100%'}"> |
| | | <el-option label="男" value="1"></el-option> |
| | | <el-option label="女" value="0"></el-option> |
| | | <el-select v-model="inds" placeholder="请选择性别" clearable :style="{width: '100%'}" :disabled="dsb"> |
| | | <el-option label="男" value='1'></el-option> |
| | | <el-option label="女" value='0'></el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-form-item> |
| | |
| | | <template v-if="!isEditing" > |
| | | <el-input v-if="individualList.maritalStatus===0" placeholder="未婚"></el-input> |
| | | <el-input v-if="individualList.maritalStatus===1" placeholder="已婚"></el-input> |
| | | <el-input v-if="individualList.maritalStatus===2" placeholder="离婚"></el-input> |
| | | <el-input v-if="individualList.maritalStatus===2" placeholder="未婚"></el-input> |
| | | |
| | | </template> |
| | | <template v-else> |
| | | <el-select v-model="individualList.maritalStatus" placeholder="请选择性别" clearable :style="{width: '100%'}"> |
| | | <el-option label="未婚" value="0"></el-option> |
| | | <el-option label="已婚" value="1"></el-option> |
| | | <el-option label="离婚" value="2"></el-option> |
| | | <el-select v-model="mrs" placeholder="请选择性别" clearable :style="{width: '100%'}"> |
| | | <el-option label="未婚" value='0'></el-option> |
| | | <el-option label="已婚" value='1'></el-option> |
| | | <el-option label="离婚" value='2'></el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-form-item> |
| | |
| | | </div> |
| | | <div style="padding-left:30px;padding-top:30px"> |
| | | <el-col :span="6" :data="individualList"> |
| | | <div class="block" :model="individualList" > |
| | | <el-col v-model="individualList.img" prop="img"> |
| | | <el-avatar shape="square" style="width: 200px;height: 150px;" > |
| | | <div class="block" :model="individualList"> |
| | | <div v-if="!isEditing"> |
| | | <el-avatar shape="square" style="width: 200px; height: 150px;"> |
| | | <el-image |
| | | :src="'http://47.93.189.255:8080/'+ individualList.img" |
| | | class="el-upload-list__item-thumbnail" |
| | | v-if="!individualList.img" |
| | | src="default-avatar-url" |
| | | :fit="fit" |
| | | style="width: 100%;height: 100%;" |
| | | style="width: 100%; height: 100%;" |
| | | ></el-image> |
| | | <el-image |
| | | v-else |
| | | :src="'http://47.93.189.255:8080/' + individualList.img" |
| | | :fit="fit" |
| | | style="width: 100%; height: 100%;" |
| | | ></el-image> |
| | | </el-avatar> |
| | | <!-- <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]"--> |
| | | <!-- >--> |
| | | <!-- </div>--> |
| | | <!-- </el-upload>--> |
| | | </el-col> |
| | | </div> |
| | | <el-upload v-else |
| | | class="upload-demo" |
| | | action="#" |
| | | :auto-upload="false" |
| | | :http-request="requestUpload" |
| | | :limit="1" |
| | | :file-list="fileList" |
| | | > |
| | | <el-avatar shape="square" style="width: 200px; height: 150px;"> |
| | | <el-image |
| | | class="el-upload-list__item-thumbnail" |
| | | v-if="!individualList.img" |
| | | src="default-avatar-url" |
| | | :fit="fit" |
| | | style="width: 100%; height: 100%;" |
| | | ></el-image> |
| | | <el-image |
| | | v-else |
| | | :src="'http://47.93.189.255:8080/' + individualList.img" |
| | | :fit="fit" |
| | | style="width: 100%; height: 100%;" |
| | | ></el-image> |
| | | </el-avatar> |
| | | </el-upload> |
| | | <div class="edit-text" v-if="isEditing" @click="uploadImage">点击更换图片</div> |
| | | </div> |
| | | |
| | | </el-col> |
| | | |
| | | </div> |
| | |
| | | <div> |
| | | <el-form v-loading="loading" :data="individualList" @selection-change="handleSelectionChange"> |
| | | <el-form-item label="是否拥有外籍、境外居留权、长期居留许可" > |
| | | <el-radio-group v-model="individualList.outStatus" style="margin-bottom: 0;color: #FEF7FC;"> |
| | | <el-radio-group v-model="individualList.outStatus" style="margin-bottom: 0;color: #FEF7FC;" :disabled="dsb"> |
| | | <el-radio :label="1">是</el-radio> |
| | | <el-radio :label="0">否</el-radio> |
| | | </el-radio-group> |
| | |
| | | <div class="title-wrapper"> |
| | | 主要学习及工作经历 |
| | | <div> |
| | | <el-button class="button" size="mini" type="text" @click="showDialog('open')"> |
| | | <el-button class="button" size="mini" type="text" @click="showDialog('open')" > |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <el-table-column label="开始日期" prop="startDate" sortable width="250" align="center" > |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.startDate }}</template> |
| | | <template v-else><el-input v-model="scope.row.startDate"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.startDate" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="结束日期" prop="endDate" sortable width="250" align="center" > |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.endDate }}</template> |
| | | <template v-else><el-input v-model="scope.row.endDate"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.endDate" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="主要学习经历、工作单位及任职情况" prop="content" sortable width="350" align="center" > |
| | |
| | | <el-table-column label="开始时间" prop="startTime" sortable width="230" align="center"> |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template> |
| | | <template v-else><el-input v-model="scope.row.startTime"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="结束时间" prop="endTime" sortable width="230" align="center"> |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template> |
| | | <template v-else><el-input v-model="scope.row.endTime"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | |
| | | <el-table-column label="开始时间" prop="startTime" sortable width="200" align="center"> |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template> |
| | | <template v-else><el-input v-model="scope.row.startTime"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.startTime" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="结束时间" prop="endTime" sortable width="200" align="center"> |
| | | <template slot-scope="scope"> |
| | | <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template> |
| | | <template v-else><el-input v-model="scope.row.endTime"></el-input></template> |
| | | <template v-else><el-input v-model="scope.row.endTime" type="date" placeholder="选择日期"></el-input></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="所到国家或者地区" prop="destination" sortable width="300" align="center" > |
| | |
| | | <div v-if="item.term === '研究生'"> {{item.content}}</div> |
| | | <div v-if="item.term === '工作'"> {{item.content}}</div> |
| | | <div v-if="item.term === '结婚后'"> {{item.content}}</div> |
| | | <el-button size='mini' type="text" class="btn_edit" @click="editData(item)" style='position: absolute;right:10px;top:5px;'> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn> |
| | | </el-button> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | |
| | | <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" style='position: absolute;right:10px;top:5px;'> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn> |
| | | </el-button> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | <!--新增自传--> |
| | | <el-dialog :title="title" :visible.sync="dialogVisible.autobiography" width="900px" append-to-body> |
| | | <el-dialog :title="isEdit1 ? '编辑记录' : '新增记录'" :visible.sync="dialogVisible.autobiography" width="900px" append-to-body> |
| | | <el-col > |
| | | <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-position="left" > |
| | | <el-row :span="5"> |
| | | <!-- <el-form-item label="需要修改的记录:" prop="id">--> |
| | | <!-- <el-select v-model="formDat.id" placeholder="请选择需要修改的记录" clearable :style="{width: '50%'}" >--> |
| | | <!-- <el-option v-for="(item, index) in AutobiographyList" :key='item.id' :label="item.ageBegin+'~'+item.ageEnd+'岁'+'('+item.term+')'"--> |
| | | <!-- ></el-option>--> |
| | | <!-- </el-select>--> |
| | | <!-- </el-form-item>--> |
| | | <el-form-item label="年龄段:" prop="ageBegin ageEnd" label-width="70px"> |
| | | <el-input v-model="formDat.ageBegin" placeholder="" clearable :style="{width: '20%'}" > |
| | | </el-input> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | listExperience, addExperience, updateExperience, delExperience, |
| | | getIndividualRelation, addRelation, updateRelation, delRelation, |
| | | getCertificateList, addCertificate, updateCertificate, delCertificate, |
| | | getAbroadList, addAbroad,updateAbroad, delAbroad, |
| | | getAutobiographyList, getAutobiographyTermList, addAutobiography, |
| | | getAbroadList, addAbroad, updateAbroad, delAbroad, |
| | | getAutobiographyList, getAutobiographyTermList, addAutobiography,updateAutobiography, |
| | | getCategory, |
| | | } from "@/api/self/index"; |
| | | import { delFamilyevent, uploadPic } from '../../api/bignote' |
| | |
| | | export default { |
| | | name: "show", |
| | | dicts: ['sys_normal_disable'], |
| | | |
| | | data() { |
| | | return { |
| | | // 遮罩层 |
| | |
| | | |
| | | loading: true, |
| | | formData:[], |
| | | componentKey: 0, |
| | | // 选中数组 |
| | | ids: [], |
| | | //性别 |
| | | inds:undefined, |
| | | //婚姻类别 |
| | | mrs:undefined, |
| | | // 非单个禁用 |
| | | single: true, |
| | | // 非多个禁用 |
| | |
| | | //个人信息数据 |
| | | individualList:[], |
| | | isEditing: false, |
| | | // fit:['fill'], |
| | | fit:['cover'], |
| | | // 个人经历数据 |
| | | experienceList: [], |
| | | // isEdit:true, |
| | |
| | | dateRange: [], |
| | | // 数据范围选项 |
| | | fot:[".jpg",".jif"], |
| | | fileList:[ |
| | | ], |
| | | fileListOther:[ |
| | | |
| | | ], |
| | | fileList:[], |
| | | fileListOther:[], |
| | | dsb:true, |
| | | btn:false, |
| | | isShow:true, |
| | | isShow_2:false, |
| | | isEdit1:false, |
| | | formDat: { |
| | | //个人基本信息 |
| | | nickName:undefined, |
| | |
| | | term:undefined, |
| | | |
| | | }, |
| | | AgeEnd:'', |
| | | // 菜单列表 |
| | | menuOptions: [], |
| | | // 部门列表 |
| | |
| | | }], |
| | | |
| | | }, |
| | | selectedOption:'', |
| | | typeOptions:[], |
| | | typeOption: [{ |
| | | value:'护照', |
| | |
| | | this.dialogVisible.relation1 = false; |
| | | this.dialogVisible.certificate =false; |
| | | this.dialogVisible.abroad=false; |
| | | this.dialogVisible.autobiography=false |
| | | this.dialogVisible.autobiography=false; |
| | | this.isEdit1 = false; |
| | | this.reset(); |
| | | // 清空formDat对象的数据 |
| | | Object.keys(this.formDat).forEach(key => { |
| | | this.formDat[key] = ''; |
| | | }); |
| | | }, |
| | | handleUploadSuccess(response, file) { |
| | | // 处理文件上传成功后的回调 |
| | | this.individualList.img = response.url; |
| | | }, |
| | | |
| | | //下拉 |
| | | handleChange(activeNames) { |
| | | // console.log(val); |
| | |
| | | // console.log(tab, event); |
| | | this.getAutobiographyInfor(); |
| | | // this.getSrc1(typeOptions) |
| | | }, |
| | | //个人自传编辑 |
| | | editData(data) { |
| | | this.isEdit1 = true; // 设置为编辑操作 |
| | | // 将要修改的数据填充到formDat对象中 |
| | | this.formDat.ageBegin = data.ageBegin; |
| | | this.formDat.ageEnd = data.ageEnd; |
| | | this.formDat.term = data.term; |
| | | this.formDat.content = data.content; |
| | | |
| | | // 打开弹窗 |
| | | this.dialogVisible.autobiography = true; |
| | | }, |
| | | |
| | | //隔行变色 |
| | |
| | | return '——————' |
| | | } |
| | | }, |
| | | getSrc1(term){ |
| | | if(term==='7'){ |
| | | return '研究生' |
| | | } |
| | | }, |
| | | |
| | | /** 查询角色列表 */ |
| | | getList() { |
| | |
| | | this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | |
| | | ); |
| | | //成员关系 |
| | | getIndividualRelation(this.queryParams).then(response => { |
| | |
| | | // this.total = response.data.total; |
| | | // this.loading = false; |
| | | // }); |
| | | |
| | | }, |
| | | |
| | | //图片的上传及上传按钮隐藏 |
| | |
| | | this.isShow=false |
| | | this.isShow_2=true |
| | | this.isEditing=true |
| | | // this.isEdit=false |
| | | if(this.individualList.maritalStatus == 0) |
| | | this.mrs = '未婚' |
| | | else if(this.individualList.maritalStatus == 1) |
| | | this.mrs = '已婚' |
| | | else |
| | | this.mrs = '离婚'// this.isEdit=false |
| | | }, |
| | | |
| | | /** 查询自传信息 */ |
| | | getAutobiographyInfor() |
| | | { |
| | | let _this = this |
| | | getCategory().then(response=>{ |
| | | |
| | | getCategory().then(response => { |
| | | // response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{ |
| | | // _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]}) |
| | | // }) |
| | | response.data.itemValues.replace("{", "").replace("}", "").split(",").map(elem => { |
| | | const label = elem.split(":")[0].trim(); |
| | | const value = parseInt(elem.split(":")[1].trim()); |
| | | _this.typeOptions.push({ "label": label, "value": value }); |
| | | // this.getSrc1(value) |
| | | }) |
| | | }) |
| | | |
| | | // 判断 typeOptions 数组中是否已存在相同的 value |
| | | if (!_this.typeOptions.some(option => option.value === value)) { |
| | | _this.typeOptions.push({ "label": label, "value": value }); |
| | | } |
| | | // console.log(_this.typeOptions) |
| | | // _this.getSrc1(value) |
| | | }); |
| | | }); |
| | | |
| | | // if(AutobiographyList.ageEnd==null){ |
| | | // this.AgeEnd='?' |
| | |
| | | this.formDat[key] = ''; |
| | | }); |
| | | }, |
| | | //个人自传 |
| | | //个人自传的保存 |
| | | submitDataScope6: function() { |
| | | this.$refs["elForm"].validate(valid => { |
| | | if (valid) { |
| | | // 根据值找到选中的选项对象 |
| | | const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term); |
| | | // 将选中选项的文本设置为"term"字段的值 |
| | | this.formDat.term = selectedOption.label; |
| | | addAutobiography(this.formDat).then(response => { |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.dialogVisible.autobiography = false; |
| | | this.getList(); |
| | | }); |
| | | |
| | | if (this.isEdit1) { |
| | | // 执行修改操作 |
| | | updateAutobiography(this.formDat).then(response => { |
| | | // 将选中选项的文本设置为"term"字段的值 |
| | | this.formDat.term = selectedOption.label; |
| | | this.formDat.id = selectedOption.id; |
| | | console.log("1") |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.dialogVisible.autobiography = false; |
| | | this.isEdit1 = false; |
| | | this.getList(); |
| | | }).catch(error => { |
| | | console.log(error); |
| | | this.isEdit1 = false; |
| | | this.dialogVisible.autobiography = false; |
| | | }); |
| | | } else { |
| | | // 执行新增操作 |
| | | addAutobiography(this.formDat).then(response => { |
| | | this.formDat.term = selectedOption.label; |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.dialogVisible.autobiography = false; |
| | | this.getList(); |
| | | }).catch(error => { |
| | | console.log(error); |
| | | this.dialogVisible.autobiography = false; |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | // 清空formDat对象的数据 |
| | | Object.keys(this.formDat).forEach(key => { |
| | | this.formDat[key] = ''; |
| | | }); |
| | | // 重置isEdit为false,以便下次点击新增时为新增操作 |
| | | this.isEdit1 = false; |
| | | }, |
| | | |
| | | editRow(row) { |
| | |
| | | //修改后的保存 |
| | | //个人基本信息 |
| | | submitForm() { |
| | | if(this.inds=='1') |
| | | this.individualList.sex = 1; |
| | | else |
| | | this.individualList.sex = 0; |
| | | if(this.mrs=='0') |
| | | this.individualList.maritalStatus = 0 |
| | | else if(this.mrs == '1') |
| | | this.individualList.maritalStatus = 1 |
| | | else |
| | | this.individualList.maritalStatus = 2 |
| | | let ul = this.fileList.map(function (elem){ |
| | | return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") |
| | | }).join(",") |
| | |
| | | if (this.individualList.userId !== undefined) { |
| | | updateIndividual(this.individualList).then(response => { |
| | | this.$modal.msgSuccess("修改成功"); |
| | | // 强制更新相关组件 |
| | | this.individualList={...this.individualList} |
| | | |
| | | // this.open = false; |
| | | this.dsb = true |
| | | this.btn=false |
| | | this.isShow_2=false |
| | | this.isShow=true |
| | | this.isEditing = false |
| | | }); |
| | | } else { |
| | | this.$modal.msgSuccess("修改失败"); |
| | |
| | | } |
| | | }) |
| | | // 刷新页面 |
| | | window.location.reload(); |
| | | // window.location.reload(); |
| | | }, |
| | | //头像修改 |
| | | uploadImage() { |
| | | const inputElement = document.createElement("input"); |
| | | inputElement.type = "file"; |
| | | inputElement.accept = "image/*"; |
| | | inputElement.style.display = "none"; |
| | | document.body.appendChild(inputElement); |
| | | |
| | | inputElement.addEventListener("change", () => { |
| | | const file = inputElement.files[0]; |
| | | if (file) { |
| | | const formData = new FormData(); |
| | | formData.append("image", file); |
| | | |
| | | // 调用uploadPic接口上传图片 |
| | | axios.post("/common/upload", formData, { |
| | | headers: { |
| | | "Content-Type": "multipart/form-data" |
| | | } |
| | | }).then(response => { |
| | | // 上传成功,获取新图片的URL |
| | | const newImageUrl = response.data.img; |
| | | |
| | | // 假设individualList是一个对象,更新individualList.img |
| | | this.individualList.img = newImageUrl; |
| | | |
| | | // 假设fileList是一个数组,更新fileList中对应的图片URL |
| | | // const index = this.fileList.findIndex(item => item.id === fileId); |
| | | // this.fileList[index].url = newImageUrl; |
| | | |
| | | // 清除input元素并移除事件监听 |
| | | document.body.removeChild(inputElement); |
| | | inputElement.removeEventListener("change", null); |
| | | }).catch(error => { |
| | | console.error("上传失败:", error); |
| | | // 清除input元素并移除事件监听 |
| | | document.body.removeChild(inputElement); |
| | | inputElement.removeEventListener("change", null); |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // 触发点击事件,显示文件选择对话框 |
| | | inputElement.click(); |
| | | }, |
| | | //主要经历 |
| | | saveRowExperienceList(row) { |
| | |
| | | .btn_autobiography{ |
| | | background:center no-repeat url('../../assets/icons/add1.png') ; |
| | | } |
| | | .btn_edit{ |
| | | background:center no-repeat url('../../assets/icons/edit.png') ; |
| | | } |
| | | |
| | | .button { |
| | | background:center no-repeat url('../../assets/icons/add1.png') ; |
| | | margin-left: 69.5vw; |