Files
2026-09-08 19:49:21 +08:00

711 lines
29 KiB
Vue

<template>
<div>
<div v-if="!view">
<el-form :model="formData" ref="form" label-width="0" :disabled="formDisabled">
<border-table>
<table>
<tr>
<th>姓名</th>
<td>
<el-form-item prop="username">
{{ formData.username }}
</el-form-item>
</td>
<th>工号</th>
<td>
<el-form-item prop="loginname">
{{ formData.loginname }}
</el-form-item>
</td>
<th>电子照</th>
<td>
<el-form-item prop="avatar">
<image-upload :height="100"
:width="100"
:limit="1"
:file-type="['png','jpg']"
:file-size="10"
:is-show-tip="false"
v-model="formData.avatar"
></image-upload>
</el-form-item>
</td>
</tr>
<tr>
<th>性别</th>
<td>
<el-form-item prop="sex"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-radio-group v-model="formData.sex">
<el-radio label="男" border size="small">
</el-radio>
<el-radio label="女" border size="small">
</el-radio>
</el-radio-group>
</el-form-item>
</td>
<th>出生日期</th>
<td>
<el-form-item prop="birthday"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-date-picker style="width: 100%" v-model="formData.birthday" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" type="date"
placeholder="出生日期"></el-date-picker>
</el-form-item>
</td>
<th>出生地点</th>
<td>
<el-form-item prop="birthPlace"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="出生地点"
v-model="formData.birthPlace"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<th>民族</th>
<td>
<el-form-item prop="nation"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-select placeholder="民族" style="width: 100%" filterable
v-model="formData.nation">
<el-option v-for="nation in nationOptions" :key="nation" :value="nation"
:label="nation"></el-option>
</el-select>
</el-form-item>
</td>
<th>政治面貌</th>
<td>
<el-form-item prop="political"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input maxlength="100" placeholder="政治面貌"
v-model="formData.political"></el-input>
</el-form-item>
</td>
<th>学历</th>
<td>
<el-form-item prop="education"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<dict-select v-model="formData.education" style="width: 100%"
placeholder="请选择学历"
code="Education"></dict-select>
</el-form-item>
</td>
</tr>
<tr>
<th>所属单位</th>
<td>
<el-form-item prop="unitid">
<el-select placeholder="所属单位"
style="width: 100%"
filterable
@change="unitChange"
v-model="formData.unitid">
<el-option v-for="unit in unitOptions" :key="unit.id" :value="unit.id"
:label="unit.name"></el-option>
</el-select>
</el-form-item>
</td>
<th>职务</th>
<td>
<el-form-item prop="position"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input v-model="formData.position" placeholder="职务"></el-input>
</el-form-item>
</td>
<th>籍贯</th>
<td>
<el-form-item prop="hometown"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input v-model="formData.hometown" placeholder="籍贯"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<th>个人工作简历</th>
<td colspan="5">
<el-form-item prop="vita"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input maxlength="200"
placeholder="请填写个人工作简历"
v-model="formData.vita"
type="textarea"
rows="3"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<th>家庭成员</th>
<td colspan="5">
<el-table :data="formData.family" border size="mini" style="width: 100%">
<el-table-column prop="relation" label="与本人关系" align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'family.'+$index+'.relation'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="请输入与本人关系" maxlength="30"
v-model="row.relation"
clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'family.'+$index+'.name'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="请输入姓名" maxlength="100"
v-model="row.name" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'family.'+$index+'.unit'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="请输入单位" maxlength="100"
v-model="row.unit" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'family.'+$index+'.remark'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="请输入备注" maxlength="100"
v-model="row.remark" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="100px" align="center"
header-align="center">
<template slot="header" slot-scope="scope">
<el-button type="primary"
size="mini"
@click="formData.family.push({})">
添加
</el-button>
</template>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete"
size="mini"
:disabled="formData.family.length===0"
@click="formData.family.splice(scope.$index,1)"></el-button>
</template>
</el-table-column>
</el-table>
</td>
</tr>
<tr>
<th>婚姻状况</th>
<td :colspan="2">
<el-form-item prop="maritalStatus.unmarried">
<div style="display:flex;justify-content: space-between">
<span style="width: 100px">未婚</span>
<el-checkbox v-model="formData.maritalStatus.unmarried"></el-checkbox>
</div>
</el-form-item>
<el-form-item prop="maritalStatus">
<div style="display:flex;justify-content: space-between;margin-bottom: 10px">
<span style="width: 100px">初婚</span>
<el-date-picker type="date"
v-model="formData.maritalStatus.firstMarriageDate"
value-format="yyyy-MM-dd"
format="yyyy年MM月dd日"></el-date-picker>
</div>
</el-form-item>
<el-form-item prop="maritalStatus">
<div style="display:flex;justify-content: space-between;margin-bottom: 10px">
<span style="width: 100px">再婚</span>
<el-date-picker type="date"
v-model="formData.maritalStatus.remarryDate"
value-format="yyyy-MM-dd"
format="yyyy年MM月dd日"></el-date-picker>
</div>
</el-form-item>
<el-form-item prop="maritalStatus">
<div style="display:flex;justify-content: space-between;margin-bottom: 10px">
<span style="width: 100px">离婚</span>
<el-date-picker type="date"
v-model="formData.maritalStatus.divorceDate"
value-format="yyyy-MM-dd"
format="yyyy年MM月dd日"></el-date-picker>
</div>
</el-form-item>
<el-form-item prop="maritalStatus">
<div style="display:flex;justify-content: space-between;">
<span style="width: 100px">丧偶</span>
<el-date-picker type="date"
v-model="formData.maritalStatus.bereaveDate"
value-format="yyyy-MM-dd"
format="yyyy年MM月dd日"></el-date-picker>
</div>
</el-form-item>
</td>
</tr>
<tr>
<th>生育情况</th>
<td colspan="5">
<el-table :data="formData.fertilityCircumstances" border size="mini"
style="width: 100%">
<el-table-column prop="parity"
label="胎次"
align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'fertilityCircumstances.'+$index+'.parity'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="胎次"
maxlength="30"
v-model="row.parity"
clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="childName"
label="子女姓名"
align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'fertilityCircumstances.'+$index+'.childName'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="子女姓名"
maxlength="30"
v-model="row.childName"
clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="sex"
label="性别"
align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'fertilityCircumstances.'+$index+'.sex'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-radio v-model="row.sex" label="男" border size="small">
</el-radio>
<el-radio v-model="row.sex" label="女" border size="small">
</el-radio>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="birthday"
label="出生年月"
align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'fertilityCircumstances.'+$index+'.birthday'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
placeholder="出生年月"
v-model="row.birthday"
clearable></el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="100px" align="center"
header-align="center">
<template slot="header" slot-scope="scope">
<el-button type="primary"
size="mini"
@click="formData.fertilityCircumstances.push({})">
添加
</el-button>
</template>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete"
size="mini"
:disabled="formData.fertilityCircumstances.length===0"
@click="formData.fertilityCircumstances.splice(scope.$index,1)"></el-button>
</template>
</el-table-column>
</el-table>
</td>
</tr>
<tr>
<th>独生子女情况</th>
<td colspan="5">
<el-table :data="formData.singleChildList" border size="mini"
style="width: 100%">
<el-table-column prop="certificateProcessingDate" label="办证年月日">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'singleChildList.'+$index+'.certificateProcessingDate'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
placeholder="办证年月日"
v-model="row.certificateProcessingDate"
clearable></el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="certificateNumber"
label="办证编号"
align="center"
header-align="center">
<template scope="{row,$index}">
<el-form-item label-width="0"
:prop="'singleChildList.'+$index+'.certificateNumber'"
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
<el-input placeholder="办证编号"
maxlength="30"
v-model="row.certificateNumber"
clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="100px" align="center"
header-align="center">
<template slot="header" slot-scope="scope">
<el-button type="primary"
size="mini"
@click="formData.singleChildList.push({certificateProcessingDate:null,certificateNumber:null})">
添加
</el-button>
</template>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete"
size="mini"
:disabled="formData.singleChildList.length===0"
@click="formData.singleChildList.splice(scope.$index,1)"></el-button>
</template>
</el-table-column>
</el-table>
</td>
</tr>
</table>
</border-table>
</el-form>
<el-row type="flex" justify="end" align="center" class="mt10">
<el-button type="primary" @click="save">保存</el-button>
</el-row>
<!-- <el-form :model="formData" ref="form" :rules="formRules" label-width="120px" v-loading="loading"-->
<!-- :disabled="!isAllowModify">-->
<!-- <el-tabs v-model="activeName" type="card">-->
<!-- </el-tabs>-->
<!-- </el-form>-->
<!-- <el-button v-if="has_bottom_btn" @click="save" :loading="submitLoading" type="primary" style="float: right">提交-->
<!-- </el-button>-->
</div>
<div v-else>
<border-table>
<table>
<tr>
<th>姓名</th>
<td>{{ formData.username }}</td>
<th>工号</th>
<td>{{ formData.loginname }}</td>
<th>电子照</th>
<td>
<el-image v-if="formData.avatar"
:src="CREATE_PREVIEW_URL(formData.avatar)"
style="width: 100px;height: 100px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<span v-else>未上传电子照</span>
</td>
</tr>
<tr>
<th>性别</th>
<td>{{ formData.sex }}</td>
<th>出生日期</th>
<td>{{ formData.birthday }}</td>
<th>出生地点</th>
<td>{{ formData.birthPlace }}</td>
</tr>
<tr>
<th>民族</th>
<td>{{ formData.nation }}</td>
<th>政治面貌</th>
<td>{{ formData.political }}</td>
<th>学历</th>
<td>{{ formData.education }}</td>
</tr>
<tr>
<th>所属单位</th>
<!-- <td>{{ formData.unitid }}</td>-->
<td>{{ unitOptions.find(v => v.id === formData.unitid)?.name }}</td>
<th>职务</th>
<td>{{ formData.position }}</td>
<th>籍贯</th>
<td>{{ formData.hometown }}</td>
</tr>
<tr>
<th>政治面貌</th>
<td>{{ formData.political }}</td>
<th>人员类型</th>
<td>{{ formData.personType }}</td>
</tr>
<tr>
<th>个人工作简历</th>
<td colspan="5">{{ formData.vita }}</td>
</tr>
<tr>
<th>家庭成员</th>
<td colspan="5">
<el-table :data="formData.family" border size="mini" style="width: 100%">
<el-table-column prop="relation" label="与本人关系"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="remark" label="备注"></el-table-column>
</el-table>
</td>
</tr>
<tr>
<th>婚姻状况</th>
<td :colspan="2">
<border-table>
<table>
<tr>
<td>未婚</td>
<td>
<span v-if="formData.maritalStatus.unmarried!=null">
<span v-if="formData.maritalStatus.unmarried==true">是</span>
<span v-else>否</span>
</span>
<span v-else>未填写</span>
</td>
</tr>
<tr>
<td>初婚</td>
<td>{{ formData.maritalStatus.firstMarriageDate }}</td>
</tr>
<tr>
<td>再婚</td>
<td>{{ formData.maritalStatus.remarryDate }}</td>
</tr>
<tr>
<td>离婚</td>
<td>{{ formData.maritalStatus.divorceDate }}</td>
</tr>
<tr>
<td>丧偶</td>
<td>{{ formData.maritalStatus.bereaveDate }}</td>
</tr>
</table>
</border-table>
</td>
</tr>
<tr>
<th>生育情况</th>
<td colspan="5">
<el-table :data="formData.fertilityCircumstances" border size="mini"
style="width: 100%">
<el-table-column prop="parity" label="胎次"></el-table-column>
<el-table-column prop="childName" label="子女姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="birthday" label="出生年月"></el-table-column>
</el-table>
</td>
</tr>
<tr>
<th>独生子女情况</th>
<td colspan="5">
<el-table :data="formData.singleChildList" border size="mini">
<el-table-column prop="certificateProcessingDate" label="办证年月日">
</el-table-column>
<el-table-column prop="certificateNumber" label="办证编号"></el-table-column>
</el-table>
</td>
</tr>
</table>
</border-table>
</div>
</div>
</template>
<script>
module.exports = {
components: {
'dict-select': httpVueLoader('/components/plugins/DictSelect.vue?v=1.0.4'),
},
props: {
id: {type: String},
view: {type: Boolean, default: false},
edit_unit: {type: Boolean, default: false},
source: {type: String},
has_bottom_btn: {type: Boolean, default: true}
},
data() {
return {
activeName: 1,
unionOptions: [],
unitOptions: [],
submitLoading: false,
imageList: [],
uploadDisabled: false,
loading: true,
disabled: false,
formData: {
family: [],
maritalStatus: {
unmarried: false,
firstMarriageDate: null,
remarryDate: null,
bereaveDate: null,
divorceDate: null
}
},
formRules: {
loginname: [{required: true, message: '必填', trigger: ['blur', 'change']}],
username: [{required: true, message: '必填', trigger: ['blur', 'change']}],
unitid: [{required: true, message: '必填', trigger: ['blur', 'change']}],
threeUnitId: [{required: true, message: '必填', trigger: ['blur', 'change']}],
},
nationOptions: nation,
formDisabled: false,
hasModifyPermission: true
}
},
watch: {
id() {
this.getUserInfo()
}
},
methods: {
async validateForm() {
return new Promise(resolve => {
if (!this.hasModifyPermission) {
this.$refs.form.validate(valid => {
resolve(valid)
})
}
resolve(true)
})
},
async save() {
if (this.formDisabled) {
this.$message.warning('系统设置不允许个人修改信息,请联系校工会管理员进行修改!')
return
}
const valid = await this.validateForm()
if (!valid) return
const formData = this.formData
this.$confirm('您确定要保存吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const {code, msg} = await $.post('/platform/member/common/updateMemberInfo', {
user: JSON.stringify(formData)
})
if (code === 0) {
this.$notify({
title: '提示',
message: msg,
type: 'success'
})
this.getUserInfo()
} else {
this.$notify({
title: '提示',
message: msg,
type: 'warning'
});
}
}).catch(() => {
});
},
async unitChange(v) {
const unit = this.unitOptions.find(x => x.id == v)
if (unit) {
this.formData.unionid = unit.unionid
this.formData.unionname = unit.unionname
} else {
this.formData.unionid = ''
this.formData.unionname = ''
}
},
async getUserInfo() {
const {data} = await $.post('/platform/member/common/userInfoPlus', {id: this.id})
if (data.maritalStatus == null) {
data.maritalStatus = {}
}
this.formData = data
await this.getLoginUserRoles()
},
async getLoginUserRoles() {
this.formDisabled = await getConfigKey('MemberInfoModify') === 'false'
const {data} = await $.post('/platform/member/common/loginUserRoles')
const codes = data.map(v => v.code)
this.hasModifyPermission = codes.some(v => ['sysadmin', 'A06', 'H04', 'ghzl'].includes(v))
if (this.hasModifyPermission) {
this.formDisabled = false
if (this.$refs.form) {
this.$refs.form.clearValidate()
}
}
}
},
async created() {
await this.getUserInfo()
this.unionOptions = await getUnions(null)
this.unitOptions = await getUnionUnits()
}
}
</script>
<style>
.is-flex {
display: flex;
}
.is-flex .el-form-item {
width: 50%;
}
.el-picker-panel {
z-index: 9999999 !important;
}
.el-table__empty-block {
background-size: unset;
background: unset;
min-height: 60px;
}
.el-table__empty-text{
position: unset;
bottom: unset;
height: unset;
line-height: 60px;
}
</style>