| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="app-container" id="printable-content"> |
| | | <!-- 刷新页面 --> |
| | | <!-- <MyComponent :key="componentKey" />--> |
| | | <!-- 回到顶部--> |
| | |
| | | size="mini" |
| | | style=" width: 67px;height: 27px;background: #FFDDE3; |
| | | border-radius: 7px 7px 7px 7px;opacity: 1; margin-left: 20px;" |
| | | v-print="'#printable-content'" |
| | | v-hasPermi="['family:note:export']" |
| | | >打印</el-button> |
| | | </div> |
| | |
| | | <el-collapse-item name="1" > |
| | | <template v-slot:title> |
| | | <div class="title-wrapper"> |
| | | 主要学习及工作经历 |
| | | <div class="left-content">主要学习及工作经历</div> |
| | | <div> |
| | | <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> |
| | |
| | | <el-collapse-item name="2" > |
| | | <template v-slot:title> |
| | | <div class="title-wrapper"> |
| | | 家庭成员及主要社会关系情况 |
| | | <div class="left-content">家庭成员及主要社会关系情况</div> |
| | | <div> |
| | | <el-button class="button2" size="mini" type="text" @click="showDialog('relation1')"> |
| | | <el-button class="button" size="mini" type="text" @click="showDialog('relation1')"> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button> |
| | | </div> |
| | | </div> |
| | |
| | | <el-collapse-item name="4"> |
| | | <template v-slot:title> |
| | | <div class="title-wrapper"> |
| | | 持有证件情况 |
| | | <el-button class="button4" size="mini" type="text" @click="showDialog('certificate')"> |
| | | <div class="left-content">持有证件情况</div> |
| | | <el-button class="button" size="mini" type="text" @click="showDialog('certificate')"> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button> |
| | | </div> |
| | | </template> |
| | |
| | | <el-collapse-item name="5"> |
| | | <template v-slot:title> |
| | | <div class="title-wrapper"> |
| | | 出国(境)情况 |
| | | <el-button class="button5" size="mini" type="text" @click="showDialog('abroad')"> |
| | | <div class="left-content">出国(境)情况</div> |
| | | <el-button class="button" size="mini" type="text" @click="showDialog('abroad')"> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button> |
| | | </div> |
| | | </template> |
| | |
| | | <el-collapse-item name="6"> |
| | | <template v-slot:title> |
| | | <div class="title-wrapper"> |
| | | 自传 |
| | | <div class="left-content">自传</div> |
| | | <div> |
| | | <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" > |
| | | <el-button size='mini' type="text" class="button" @click="showDialog('autobiography')" > |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn> |
| | | </el-button> |
| | | </div> |
| | |
| | | v-loading="loading" :data="AutobiographyList" > |
| | | <el-tab-pane v-for="(item, index) in AutobiographyList" |
| | | :key='item.id' :label="item.ageBegin+'~'+item.ageEnd+'岁'+'('+item.term+')'"> |
| | | <div v-if="item.term === '婴儿'"> {{item.content}}</div> |
| | | <div v-if="item.term === '幼儿'"> {{item.content}}</div> |
| | | <div v-if="item.term === '小学'"> {{item.content}}</div> |
| | | <div v-if="item.term === '初中'"> {{item.content}}</div> |
| | | <div v-if="item.term === '高中'"> {{item.content}}</div> |
| | | <div v-if="item.term === '大学'"> {{item.content}}</div> |
| | | <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;'> |
| | | <div>{{ item.content }}</div> |
| | | <el-button size='mini' type="text" class="btn_edit" @click="editAutobiography(item)" style='position: absolute;right:40px;top:5px;'> |
| | | <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn> |
| | | </el-button> |
| | | |
| | | <el-button size="mini" type="text" class="btn_del" @click="handleAutobiography(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></div> |
| | | </el-contain> |
| | |
| | | <span> 岁 </span> |
| | | </el-form-item> |
| | | <el-form-item label="时期:" prop="term"> |
| | | <el-select v-model="formDat.term" placeholder="请选择时期" clearable :style="{width: '50%'}" > |
| | | <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" |
| | | ></el-option> |
| | | </el-select> |
| | | <!-- <el-select v-model="formDat.term" placeholder="请选择时期" clearable :style="{width: '50%'}" >--> |
| | | <!-- <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"--> |
| | | <!-- ></el-option>--> |
| | | <!-- </el-select>--> |
| | | <el-input v-model="formDat.term" placeholder="请输入时期" clearable :style="{width: '100%'}" > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="内容编辑:" prop="content"> |
| | | <el-input v-model="formDat.content" type="textarea" :rows="5" placeholder="" clearable :style="{width: '100%'}" > |
| | |
| | | import axios from 'axios'; |
| | | |
| | | //在system/note/index.js中导入接口函数 --接好了 |
| | | import {getIndividualList, addIndividual, updateIndividual, delIndividual, |
| | | import { |
| | | getIndividualList, addIndividual, updateIndividual, delIndividual, |
| | | listExperience, addExperience, updateExperience, delExperience, |
| | | getIndividualRelation, addRelation, updateRelation, delRelation, |
| | | getCertificateList, addCertificate, updateCertificate, delCertificate, |
| | | getAbroadList, addAbroad, updateAbroad, delAbroad,listType, |
| | | getAutobiographyList, getAutobiographyTermList, addAutobiography,updateAutobiography, |
| | | getAbroadList, addAbroad, updateAbroad, delAbroad, listType, |
| | | getAutobiographyList, getAutobiographyTermList, addAutobiography, updateAutobiography,delAutobiography, |
| | | getCategory, |
| | | } from "@/api/self/index"; |
| | | import { delFamilyevent, uploadPic } from '../../api/bignote' |
| | |
| | | //自传 |
| | | term: [{ |
| | | required: true, |
| | | message: '请选择时期', |
| | | message: '请输入时期', |
| | | trigger: 'blur' |
| | | }], |
| | | ageBegin: [{ |
| | |
| | | // 打开弹窗 |
| | | this.dialogVisible.autobiography = true; |
| | | }, |
| | | editAutobiography(item) { |
| | | this.isEdit1 = true; |
| | | this.dialogVisible.autobiography = true; |
| | | this.formDat = { ...item }; |
| | | }, |
| | | |
| | | //隔行变色 |
| | | tableRowClassName({ row, rowIndex }) { |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.experienceList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.relationList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.individualList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.certificateList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.AbroadList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.AutobiographyList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | this.loading = false; |
| | | |
| | | }); |
| | |
| | | // }); |
| | | listType(this.queryParams).then(response => { |
| | | this.typeList = response.data; |
| | | this.total = response.data.total; |
| | | // this.total = response.data.total; |
| | | // console.log( this.typeList ) |
| | | // 在回调函数中调用 getTypeOptions() |
| | | this.getTypeOptions(); |
| | |
| | | this.$refs["elForm"].validate(valid => { |
| | | if (valid) { |
| | | // 根据值找到选中的选项对象 |
| | | const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term); |
| | | // const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term); |
| | | |
| | | if (this.isEdit1) { |
| | | // 执行修改操作 |
| | | updateAutobiography(this.formDat).then(response => { |
| | | // 将选中选项的文本设置为"term"字段的值 |
| | | this.formDat.term = selectedOption.label; |
| | | this.formDat.id = selectedOption.id; |
| | | // this.formDat.term = selectedOption.value; |
| | | // this.formDat.id = selectedOption.id; |
| | | console.log("1") |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.dialogVisible.autobiography = false; |
| | |
| | | } else { |
| | | // 执行新增操作 |
| | | addAutobiography(this.formDat).then(response => { |
| | | this.formDat.term = selectedOption.label; |
| | | // this.formDat.term = selectedOption.label; |
| | | this.$modal.msgSuccess("新增成功"); |
| | | this.dialogVisible.autobiography = false; |
| | | this.getList(); |
| | |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | /** 删除个人自传按钮操作 */ |
| | | handleAutobiography(row) { |
| | | const Ids = row.id || this.ids; |
| | | this.$modal.confirm('是否确认删除数据项?').then(function() { |
| | | return delAutobiography(Ids); |
| | | }).then(() => { |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | |
| | | /** 导出按钮操作 */ |
| | | handleExport() { |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style > |
| | | <style scoped=""> |
| | | /*.uoloadSty {*/ |
| | | /* width:110px;*/ |
| | | /* height:110px;*/ |
| | |
| | | |
| | | .el-collapse-item__header { |
| | | background-color:#FEF7FC; |
| | | width: 100%; |
| | | } |
| | | .title-wrapper { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | width: calc(100% - 50px); |
| | | } |
| | | .left-content { |
| | | |
| | | width: 100%; |
| | | } |
| | | .btn_autobiography{ |
| | | background:center no-repeat url('../../assets/icons/add1.png') ; |
| | |
| | | .btn_edit{ |
| | | background:center no-repeat url('../../assets/icons/edit.png') ; |
| | | } |
| | | |
| | | .btn_del{ |
| | | background:center no-repeat url('../../assets/images/删除2.png') ; |
| | | } |
| | | .button-container { |
| | | text-align: right; |
| | | display: flex; |
| | |
| | | } |
| | | .button { |
| | | background:center no-repeat url('../../assets/icons/add1.png') ; |
| | | margin-left: 69.5vw; |
| | | |
| | | } |
| | | .button2 { |
| | | background: center no-repeat url('../../assets/icons/add1.png') ; |
| | | margin-left: 66vw; |
| | | } |
| | | .button4 { |
| | | background: center no-repeat url('../../assets/icons/add1.png') ; |
| | | margin-left: 71.5vw; |
| | | } |
| | | .button5 { |
| | | background:center no-repeat url('../../assets/icons/add1.png') ; |
| | | margin-left: 71vw; |
| | | /*margin-right: -10px ;*/ |
| | | flex-shrink: 0; |
| | | width: 30px; |
| | | height: 28px; |
| | | } |
| | | .form{ |
| | | background:center/11% no-repeat url('../../assets/icons/form.png') ; |