Files
dvcp_v2_webapp/project/pingchang/apps/AppRecruitPartyMembers/components/Add.vue
2022-12-01 09:35:20 +08:00

705 lines
27 KiB
Vue

<template>
<ai-detail class="party">
<ai-title slot="title" :title="isEdit ? '编辑发展党员' : '添加发展党员'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
<template slot="content">
<el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="right">
<ai-card title="个人信息">
<template #content>
<el-alert
v-if="!isEdit"
style="margin-bottom: 20px"
type="warning"
show-icon
:closable="false"
title="请仔细核对姓名与身份证号码,保存后将无法修改姓名、身份证号"
></el-alert>
<div class="ai-form">
<div style="width: 50%">
<el-form-item
label="姓名"
style="width: 100%"
prop="name"
>
<el-input
size="small"
:disabled="isEdit"
:maxLength="15"
placeholder="请输入姓名"
v-model="form.name"
>
<template slot="append" v-if="!isEdit">
<ai-person-select
:url="'/app/appresident/list?areaId='+user.info.areaId"
:instance="instance"
@selectPerson="checkName"
>
</ai-person-select>
</template>
</el-input>
</el-form-item>
<el-form-item
label="身份证号"
style="width: 100%"
prop="idNumber"
:rules="[
{
required: true,
message: '请输入身份证号',
trigger: 'change',
},
]"
>
<el-input
size="small"
v-model="form.idNumber"
@change="idChange"
:disabled="isEdit"
placeholder="请输入身份证号"
:maxLength="18"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="发展状态" prop="developStatus" style="width: 100%">
<ai-select
v-model="form.developStatus"
placeholder="请选择发展状态"
:selectList="dict.getDict('developStatus')"
></ai-select>
</el-form-item>
</div>
<el-form-item label="个人照片" prop="photo">
<ai-avatar :instance="instance" v-model="form.avatarUrl"/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<ai-select
disabled
v-model="form.sex"
placeholder="请选择性别"
:selectList="dict.getDict('sex')"
></ai-select>
</el-form-item>
<el-form-item label="出生日期">
<el-date-picker
disabled
size="small"
v-model="form.birthday"
type="date"
style="width: 100%"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
size="small"
disabled
v-model="form.age"
placeholder="请输入..."
clearabel
:maxLength="15"
></el-input>
</el-form-item>
<el-form-item label="民族" prop="email">
<ai-select
v-model="form.nation"
placeholder="请选择民族"
:selectList="dict.getDict('nation')"
@change="(search.current = 1), getList()"
></ai-select>
</el-form-item>
<el-form-item label="籍贯" style="width: 100%">
<ai-area-select
clearable
:instance="instance"
v-model="form.birthplaceAreaId"
always-show
area-level="3"
/>
</el-form-item>
<el-form-item label="户籍地" style="width: 100%">
<template>
<ai-area-select
clearable
:instance="instance"
always-show
v-model="form.householdAreaId"
/>
<el-input
size="small"
placeholder="请输入详细地址..."
clearable
v-model="form.householdAddress"
maxlength="50"
show-word-limit
></el-input>
</template>
</el-form-item>
</div>
</template>
</ai-card>
<ai-card title="联络信息">
<div class="ai-form" slot="content">
<el-form-item label="联系方式" prop="phone">
<el-input
size="small"
v-model="form.phone"
placeholder="请输入..."
clearabel
:maxLength="11"
></el-input>
</el-form-item>
<el-form-item label="现住址" style="width: 100%">
<template>
<ai-area-select
clearable
:instance="instance"
v-model="form.currentAreaId"
always-show
/>
<el-input
size="small"
clearable
v-model="form.currentAddress"
placeholder="请输入详细地址"
maxlength="50"
show-word-limit
></el-input>
</template>
</el-form-item>
</div>
</ai-card>
<ai-card title="团籍信息">
<div class="ai-form" slot="content">
<el-form-item label="入团日期">
<el-date-picker
size="small"
v-model="form.joinLeagueMemberTime"
type="date"
placeholder="请选择入团日期"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="文化程度">
<ai-select
v-model="form.education"
placeholder="请选择文化程度"
:selectList="dict.getDict('education')"
></ai-select>
</el-form-item>
<el-form-item label="学位职称">
<el-input
size="small"
v-model="form.position"
placeholder="请输入..."
clearabel
:maxLength="20"
></el-input>
</el-form-item>
<el-form-item label="奖励情况" style="width: 100%;">
<el-input type="textarea" v-model="form.rewardRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="处分情况" style="width: 100%;">
<el-input type="textarea" v-model="form.punishmentRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="简历" style="width: 100%;">
<el-input type="textarea" v-model="form.resume" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="附件" style="width: 100%;">
<ai-uploader
:isShowTip="true"
:instance="instance"
v-model="form.fileList"
fileType="file"
acceptType=".zip,.rar,.doc,.docx,.xls,.ppt,.pptx,.pdf,.txt,.jpg,.png,.xlsx"
:limit="9">
<template slot="tips">
最多上传9个附件,单个文件最大10MB<br/>
支持.zip.rar.doc.docx.xls.ppt.pptx.pdf.txt.jpg.png格式<br/>
建议上传入党积极分子培养教育考察登记簿中共预备党员考察登记簿<br/>
</template>
</ai-uploader>
</el-form-item>
</div>
</ai-card>
<template v-if="isEdit">
<ai-card title="申请入党">
<template #content>
<el-form-item label="申请入党时间" prop="applyJoinPartyTime">
<el-date-picker
size="small"
v-model="form.applyJoinPartyTime"
type="date"
placeholder="请选择申请入党时间"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="申请入党形式">
<el-input
size="small"
v-model="form.applyJoinPartyWay"
placeholder="请输入..."
clearabel
:maxLength="11"
></el-input>
</el-form-item>
</template>
</ai-card>
<ai-card title="入党积极分子的确定和教育培养" v-if="form.developStatus > 0">
<template #content>
<el-form-item label="确定为入党积极分子时间" prop="activistTime" >
<el-date-picker
size="small"
v-model="form.activistTime"
type="date"
placeholder="请选择确定为入党积极分子时间"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="确定为积极分子的根据和意见" style="width: 100%;">
<el-input type="textarea" v-model="form.activistAccordingRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="培养教育情况及鉴定意见" style="width: 100%;">
<el-input type="textarea" v-model="form.activistEducationRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
</template>
</ai-card>
<ai-card title="入党介绍人/培养人" v-if="form.developStatus > 0">
<template #right>
<el-button type="text" icon="iconfont iconAdd" @click="addIntroducer()">添加入党介绍人/培养人</el-button>
</template>
<template #content>
<ai-table
:border="true"
:tableData="form.introducerList"
:isShowPagination="false"
:col-configs="colConfigs"
:stripe="false"
@getList="() => {}"
>
<el-table-column
slot="options"
width="120px"
fixed="right"
label="操作"
align="center"
>
<template slot-scope="{ row, $index }">
<div class="table-options">
<el-button type="text" @click="remove($index)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-card>
<ai-card title="发展对象的确定和考察" v-if="form.developStatus > 1">
<template #content>
<el-form-item label="确定为发展对象时间" prop="determineTime" >
<el-date-picker
size="small"
v-model="form.determineTime"
type="date"
placeholder="请选择确定为发展对象时间"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="政治历史的考察及结论" style="width: 100%;">
<el-input type="textarea" v-model="form.determinePoliticsRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="社会关系考察及结论" style="width: 100%;">
<el-input type="textarea" v-model="form.determineSocialRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="现实考察及结论" style="width: 100%;">
<el-input type="textarea" v-model="form.determineRealityRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党的基本知识考核及考试成绩" style="width: 100%;">
<el-input type="textarea" v-model="form.determineKnowledgeRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="综合考察结论意见" style="width: 100%;">
<el-input type="textarea" v-model="form.determineComprehensiveRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党内讨论是否确定为发展对象的意见" style="width: 100%;">
<el-input type="textarea" v-model="form.determinePartyInnerRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="确定为发展对象后的谈话记录" style="width: 100%;">
<el-input type="textarea" v-model="form.determineChatRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="支委会研究意见" style="width: 100%;">
<el-input type="textarea" v-model="form.determineBranchRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
</template>
</ai-card>
<ai-card title="预备党员的接收" v-if="form.developStatus > 2">
<template #content>
<el-form-item label="吸收入党时间" prop="acceptTime" >
<el-date-picker
size="small"
v-model="form.acceptTime"
type="date"
placeholder="请选择吸收入党时间"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="吸收入党地点">
<el-input
size="small"
v-model="form.acceptAddress"
placeholder="请输入..."
clearabel
:maxLength="50"
></el-input>
</el-form-item>
<el-form-item label="吸收入党时支部大会上党员提的意见和要求及个人的态度" style="width: 100%;">
<el-input type="textarea" v-model="form.acceptBranchMeetingOpinion" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="预备期间的教育情况" style="width: 100%;">
<el-input type="textarea" v-model="form.acceptEducationRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党小组对其转正的讨论意见" style="width: 100%;">
<el-input type="textarea" v-model="form.acceptPartyGroupRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="预备期间的考察情况" style="width: 100%;">
<el-input type="textarea" v-model="form.acceptInvestigateRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党支部对其转正的意见" style="width: 100%;">
<el-input type="textarea" v-model="form.acceptBranchRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
</template>
</ai-card>
<ai-card title="预备党员的教育考察和转正" v-if="form.developStatus == 4">
<template #content>
<el-form-item label="转正时间" prop="becomePartyTime" >
<el-date-picker
size="small"
v-model="form.becomePartyTime"
type="date"
placeholder="请选择转正时间"
style="width: 100%"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预备期间的教育情况" style="width: 100%;">
<el-input type="textarea" v-model="form.becomePartyEducationRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="预备期间的考察情况" style="width: 100%;">
<el-input type="textarea" v-model="form.becomePartyInvestigateRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党小组对其转正的讨论意见" style="width: 100%;">
<el-input type="textarea" v-model="form.becomePartyGroupRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
<el-form-item label="党支部对其转正的意见" style="width: 100%;">
<el-input type="textarea" v-model="form.becomePartyBranchRemark" clearable maxlength="500" show-word-limit
rows="2" placeholder="请输入..."/>
</el-form-item>
</template>
</ai-card>
</template>
</el-form>
<ai-dialog
:visible.sync="isShowIntroducer"
width="690px"
title="添加入党介绍人/培养人"
@close="onClose"
@onConfirm="onConfirm"
>
<el-form
ref="introducerForm"
:model="introducerInfo"
label-width="110px"
label-position="right"
>
<el-form-item
label="姓名"
prop="name"
:rules="[
{ required: true, message: '请输入姓名', trigger: 'change' },
]"
>
<el-input
size="small"
v-model="introducerInfo.name"
placeholder="请输入..."
clearabel
:maxLength="20"
></el-input>
</el-form-item>
<el-form-item
label="职称"
prop="position"
:rules="[
{ required: true, message: '请输入职称', trigger: 'change' },
]"
>
<el-input
size="small"
v-model="introducerInfo.position"
placeholder="请输入..."
clearabel
:maxLength="20"
></el-input>
</el-form-item>
</el-form>
</ai-dialog>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm">提交</el-button>
</template>
</ai-detail>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "Add",
props: {
instance: Function,
dict: Object,
selected: Object,
},
computed: {
...mapState(["user"]),
isEdit() {
return !!this.$route.query.id;
},
},
data() {
return {
form: {
name: '',
idNumber: '',
developStatus: '',
sex: '',
birthday: '',
age: '',
nation: '',
birthplaceAreaId: '',
householdAreaId: '',
householdAddress: '',
avatarUrl: '',
phone: '',
currentAreaId: '',
currentAddress: '',
joinLeagueMemberTime: '',
education: '',
position: '',
rewardRemark: '',
punishmentRemark: '',
resume: '',
fileList: [],
applyJoinPartyTime: '',
applyJoinPartyWay: '',
activistTime: '',
activistAccordingRemark: '',
activistEducationRemark: '',
introducerList: [],
determineTime: '',
determinePoliticsRemark: '',
determineSocialRemark: '',
determineRealityRemark: '',
determineKnowledgeRemark: '',
determineComprehensiveRemark: '',
determinePartyInnerRemark: '',
determineChatRemark: '',
determineBranchRemark: '',
acceptTime: '',
acceptAddress: '',
acceptBranchMeetingOpinion: '',
acceptEducationRemark: '',
acceptBranchMeetingOpinion: '',
acceptInvestigateRemark: '',
acceptBranchRemark: '',
becomePartyTime: '',
becomePartyEducationRemark: '',
becomePartyInvestigateRemark: '',
becomePartyGroupRemark: '',
becomePartyBranchRemark: '',
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
idNumber: [{ required: true, message: '请输入身份证号', trigger: 'change' }],
developStatus: [{ required: true, message: '请选择发展状态', trigger: 'change' }],
phone: [{ required: true, message: '请输入联系方式', trigger: 'change' }],
applyJoinPartyTime: [{ required: true, message: '请选择申请入党时间', trigger: 'change' }],
activistTime: [{ required: true, message: '请选择确定为入党积极分子时间', trigger: 'change' }],
determineTime: [{ required: true, message: '请选择确定为发展对象时间', trigger: 'change' }],
acceptTime: [{ required: true, message: '请选择吸收入党时间', trigger: 'change' }],
becomePartyTime: [{ required: true, message: '请选择转正时间', trigger: 'change' }],
},
isShowIntroducer: false,
introducerInfo: {position: '', name: ''},
colConfigs: [
{prop: "name", label: "姓名", align: "center"},
{prop: "position", label: "姓名", align: "center"},
{slot: "options"},
],
};
},
created() {
this.dict.load("education", "sex", "nation", "developStatus").then(() => {
if (this.isEdit) {
this.getInfo()
}
})
console.log(this.$route.query.partyOrgId)
},
methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
if(!this.isEdit) {
this.form.partyOrgId = this.$route.query.partyOrgId
}
if (this.form.fileList.length > 0) {
this.form.files = JSON.stringify(this.form.fileList)
}
this.instance.post(`/app/apppartydevelop/addOrUpdate`, {...this.form}).then((res) => {
if (res.code == 0) {
this.$message.success(this.isEdit ? "编辑成功" : "添加成功");
setTimeout(() => {
this.cancel(true);
}, 600);
}
});
}
});
},
cancel() {
this.$router.push({});
},
addIntroducer() {
this.isShowIntroducer = true
this.introducerInfo = {position: '', name: ''}
},
onClose() {
this.isShowIntroducer = false
},
onConfirm() {
this.$refs.introducerForm.validate((valid) => {
if (valid) {
this.introducerInfo.developPartyId = this.form.id
this.form.introducerList.push(this.introducerInfo)
this.isShowIntroducer = false
}
});
},
remove(index) {
this.$confirm("确定删除该数据?").then(() => {
this.form.introducerList.splice(index, 1)
});
},
checkName(val) {
for (let i in this.form) {
for (let j in val) {
if (i == j) {
this.form[i] = val[j];
}
}
}
this.idChange(val.idNumber);
if (val.photo) {
this.imageUrl = val.photo.split(";")[0];
}
this.form.avatarUrl = val.photo;
},
getInfo() {
let {id} = this.$route.query;
id && this.instance.post(`/app/apppartydevelop/queryDetailById`, null, {params: {id},}).then((res) => {
if (res?.data) {
this.form = res.data
}
});
},
idChange(val) {
let info = this.idCardNoUtil.getIdCardInfo(val)
this.form.sex = info.sex || "";
this.form.birthday = info.birthday + ' 00:00:00' || "";
this.form.age = this.$calcAge(val) || "";
},
}
};
</script>
<style scoped lang="scss">
.party {
:deep( .el-input-group__append ){
height: 32px;
margin: 0;
padding: 0;
border: none;
button {
margin: 0;
height: 32px;
color: #fff;
}
&:hover {
background: rgba(34, 102, 255, 0.9);
border-color: rgba(34, 102, 255, 0.9);
color: #fff;
}
}
:deep(.cardTabs ){
.el-tabs__header {
padding: 0;
}
}
.audit-0 {
color: #ff8822 !important;
}
.audit-1 {
color: #2ea222 !important;
}
:deep( .ai-form .el-form-item .el-form-item__content ){
margin-left: 174px!important;
}
}
</style>