Files
dvcp_v2_webapp/packages/party/partyMember/components/Add.vue
aixianling eb769a93a1 BUG 27038
2022-01-26 17:41:48 +08:00

1097 lines
34 KiB
Vue

<template>
<ai-detail class="party">
<template slot="title">
<ai-title
:title="isEdit ? '编辑党员' : '添加党员'"
isShowBack
isShowBottomBorder
@onBackClick="cancel(false)"
>
</ai-title>
</template>
<template slot="content">
<el-form
ref="form"
:model="form"
label-width="110px"
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"
:rules="[
{
required: true,
message: '请输入姓名',
trigger: 'change',
},
]"
>
<el-input
size="small"
:disabled="isEdit"
:maxLength="15"
placeholder="请输入姓名"
v-model="form.name"
>
<template slot="append" v-if="!isEdit">
<ai-person-select
: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>
</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"
>
</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="审核状态" v-if="isEdit">
<template #content>
<el-form-item label="审核状态" style="width: 100%">
<span
style="padding-left: 24px"
:class="'audit-' + form.auditStatus"
>{{ dict.getLabel("auditStatus", form.auditStatus) }}</span
>
</el-form-item>
</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>
<el-form-item
label="所属党组织"
prop="partyOrgId"
:rules="[
{
required: true,
message: '请选择所属党组织',
trigger: 'change',
},
]"
>
<el-input
size="small"
disabled
placeholder="请选择所属党组织"
v-model="form.partyOrgName"
>
<template slot="append">
<ai-party :instance="instance" size="small" :value="form.partyOrgId" @origin="handlePartyOrgSelect"/>
</template>
</el-input>
</el-form-item>
</div>
</ai-card>
<ai-card title="党籍信息">
<div class="ai-form" slot="content">
<el-form-item
label="党籍状态"
prop="partyStatus"
:rules="[
{
required: true,
message: '请选择党籍状态',
trigger: 'change',
},
]"
>
<ai-select
v-model="form.partyStatus"
placeholder="请选择党籍状态"
:selectList="dict.getDict('partyStatus')"
></ai-select>
</el-form-item>
<el-form-item
label="党员类型"
prop="partyType"
:rules="[
{
required: true,
message: '请选择党员类型',
trigger: 'change',
},
]"
>
<ai-select
v-model="form.partyType"
placeholder="请选择党员类型"
:selectList="dict.getDict('partyType')"
></ai-select>
</el-form-item>
<el-form-item
label="入党时间"
prop="joinPartyTime"
:rules="[
{
required: true,
message: '请选择入党时间',
trigger: 'change',
},
]"
>
<el-date-picker
size="small"
v-model="form.joinPartyTime"
type="date"
placeholder="请选择入党时间"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd' + ' 00:00:00'"
>
</el-date-picker>
</el-form-item>
<el-form-item label="转正日期" prop="turnPositiveTime">
<el-date-picker
size="small"
v-model="form.turnPositiveTime"
type="date"
placeholder="请选择转正日期"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd' + ' 00:00:00'"
>
</el-date-picker>
</el-form-item>
<el-form-item label="入党介绍人" prop="joinPartyIntroducer">
<el-input
size="small"
v-model="form.joinPartyIntroducer"
placeholder="请输入入党介绍人"
:maxLength="15"
></el-input>
</el-form-item>
<el-form-item label="党内职务" prop="partyPosition">
<ai-select
v-model="form.partyPosition"
placeholder="请选择党内职务"
:selectList="dict.getDict('partyPosition')"
></ai-select>
</el-form-item>
<el-form-item label="任职日期" prop="partyStartDate">
<el-date-picker
size="small"
v-model="form.partyStartDate"
type="date"
placeholder="选择日期"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd'"
>
</el-date-picker>
</el-form-item>
<el-form-item label="党内兼职" prop="partyWork">
<el-input
size="small"
v-model="form.partyWork"
placeholder="请输入党内兼职"
clearabel
:maxLength="20"
></el-input>
</el-form-item>
</div>
</ai-card>
<ai-card title="流动信息">
<div class="ai-form" slot="content">
<el-form-item
label="流动情况"
prop="flowStatus"
:rules="[
{
required: true,
message: '请选择流动情况',
trigger: 'change',
},
]"
>
<ai-select
v-model="form.flowStatus"
placeholder="请选择流动情况"
:selectList="dict.getDict('flowStatus')"
@change="flowStatusChange"
/>
</el-form-item>
<el-form-item
label="流入组织"
prop="flowOrgId"
v-if="form.flowStatus == 1"
:rules="[
{
required: true,
message: '请输入流入组织',
trigger: 'change',
},
]"
>
<el-input
size="small"
v-model="form.flowOrgId"
placeholder="请输入..."
></el-input>
</el-form-item>
<el-form-item
label="流入时间"
prop="flowTime"
v-if="form.flowStatus == 1"
:rules="[
{
required: true,
message: '请选择流入时间',
trigger: 'change',
},
]"
>
<el-date-picker
size="small"
v-model="form.flowTime"
type="date"
placeholder="选择日期"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd'"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="流出组织"
prop="outFlow"
v-if="form.flowStatus === '0'"
:rules="[
{
required: true,
message: '请输入流出组织',
trigger: 'change',
},
]"
>
<el-input
size="small"
v-model="form.outFlow"
placeholder="请输入..."
></el-input>
</el-form-item>
<el-form-item
label="流出时间"
prop="inTime"
v-if="form.flowStatus === '0'"
:rules="[
{
required: true,
message: '请选择流出时间',
trigger: 'change',
},
]"
>
<el-date-picker
size="small"
v-model="form.inTime"
type="date"
placeholder="选择日期"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd'"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="失联时间"
prop="lossTime"
v-if="form.flowStatus == 2"
:rules="[
{
required: true,
message: '请选择失联时间',
trigger: 'change',
},
]"
>
<el-date-picker
size="small"
v-model="form.lossTime"
type="date"
placeholder="选择日期"
style="width: 100%"
format="yyyy-MM-dd"
:value-format="'yyyy-MM-dd'"
></el-date-picker>
</el-form-item>
</div>
</ai-card>
<ai-card title="文化程度">
<template #content>
<div class="ai-form">
<el-form-item label="文化程度" prop="education">
<ai-select
v-model="form.education"
placeholder="请选择文化程度"
:selectList="dict.getDict('education')"
></ai-select>
</el-form-item>
</div>
<el-tabs v-model="activeName" class="cardTabs">
<el-tab-pane label="五星党员" name="五星党员" lazy/>
<el-tab-pane label="工作信息" name="工作信息" lazy/>
<el-tab-pane label="违纪信息" name="违纪信息" lazy/>
</el-tabs>
<ai-search-bar>
<template #right>
<el-button type="text" icon="iconfont iconAdd" @click="addForm(activeName)">添加{{
activeName
}}
</el-button>
</template>
</ai-search-bar>
<ai-table
v-if="activeName === '五星党员'"
:border="true"
:tableData="form.starList"
:isShowPagination="false"
:col-configs="colConfigs1"
:stripe="false"
@getList="() => {}"
>
<el-table-column label="评定等级" slot="level" align="center">
<template slot-scope="{ row }">
<el-rate
v-model="row.level"
disabled
show-text
:texts="textlist"
></el-rate>
</template>
</el-table-column>
<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="editStar(row, $index)"
>编辑
</el-button
>
<el-button type="text" @click="remove($index, 'starList')"
>删除
</el-button
>
</div>
</template>
</el-table-column>
</ai-table>
<ai-table
v-if="activeName === '工作信息'"
:border="true"
:tableData="form.workInfoList"
:isShowPagination="false"
:col-configs="colConfigs2"
:stripe="false"
@getList="() => {}"
>
<el-table-column label="工作时间" slot="date" align="center">
<template slot-scope="{ row }">
<span v-if="row.starTime && row.endTime"
>{{ row.starTime.split(" ")[0] }}
{{ row.endTime.split(" ")[0] }}</span
>
</template>
</el-table-column>
<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="editJob(row, $index)"
>编辑
</el-button
>
<el-button
type="text"
@click="remove($index, 'workInfoList')"
>删除
</el-button
>
</div>
</template>
</el-table-column>
</ai-table>
<ai-table
v-if="activeName === '违纪信息'"
:border="true"
:tableData="form.disciplinaryInfoList"
:isShowPagination="false"
:col-configs="colConfigs3"
: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="editDisciplinary(row, $index)"
>编辑
</el-button
>
<el-button
type="text"
@click="remove($index, 'disciplinaryInfoList')"
>删除
</el-button
>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-card>
</el-form>
<ai-dialog
:visible.sync="isShowStarForm"
width="690px"
:title="starId ? '修改五星党员' : '添加五星党员'"
@close="onClose"
@onConfirm="onStarForm"
>
<el-form
ref="starForm"
:model="starForm"
label-width="110px"
label-position="right"
>
<el-form-item
label="评定时间"
prop="starTime"
:rules="[
{ required: true, message: '请选择评定时间', trigger: 'change' },
]"
>
<el-date-picker
size="small"
v-model="starForm.starTime"
type="month"
placeholder="请选择评定时间"
style="width: 230px"
format="yyyy-MM"
:value-format="'yyyy-MM-dd' + ' 00:00:00'"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="评定等级"
prop="level"
:rules="[
{ required: true, message: '请选择评定等级', trigger: 'change' },
]"
>
<el-rate
v-model="starForm.level"
show-text
:texts="textlist"
style="line-height: 2.5"
></el-rate>
</el-form-item>
</el-form>
</ai-dialog>
<ai-dialog
:visible.sync="isShowJobForm"
width="690px"
:title="jobId ? '修改工作信息' : '添加工作信息'"
@close="onClose"
@onConfirm="onJobForm"
>
<el-form
ref="jobForm"
:model="jobForm"
label-width="110px"
label-position="right"
>
<el-form-item
label="工作时间"
prop="date"
:rules="[
{ required: true, message: '请选择评定时间', trigger: 'change' },
]"
>
<el-date-picker
size="small"
v-model="jobForm.date"
type="monthrange"
range-separator=""
start-placeholder="开始月份"
end-placeholder="结束月份"
format="yyyy-MM"
:value-format="'yyyy-MM-dd' + ' 00:00:00'"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="单位"
prop="company"
:rules="[
{ required: true, message: '请输入工作单位', trigger: 'blur' },
]"
>
<el-input
size="small"
:maxLength="30"
v-model="jobForm.company"
placeholder="请输入工作单位"
></el-input>
</el-form-item>
<el-form-item
label="职务"
prop="position"
:rules="[
{ required: true, message: '请输入职务', trigger: 'blur' },
]"
>
<el-input
size="small"
:maxLength="30"
v-model="jobForm.position"
placeholder="请输入职务"
></el-input>
</el-form-item>
</el-form>
</ai-dialog>
<ai-dialog
:visible.sync="isShowDisciplinaryForm"
width="690px"
:title="disciplinaryId ? '修改违纪信息' : '添加违纪信息'"
@close="onClose"
@onConfirm="onDisciplinarForm"
>
<el-form
ref="disciplinaryForm"
:model="disciplinaryForm"
label-width="110px"
label-position="right"
>
<el-form-item
label="时间"
prop="starTime"
:rules="[
{ required: true, message: '请选择违纪时间', trigger: 'change' },
]"
>
<el-date-picker
size="small"
v-model="disciplinaryForm.starTime"
type="month"
placeholder="请选择违纪时间"
style="width: 230px"
format="yyyy-MM"
:value-format="'yyyy-MM-dd' + ' 00:00:00'"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="违纪原因"
prop="disciplinaryInfo"
:rules="[
{ required: true, message: '请输入违纪原因', trigger: 'blur' },
]"
>
<el-input
size="small"
v-model="disciplinaryForm.disciplinaryInfo"
placeholder="请输入违纪原因"
></el-input>
</el-form-item>
<el-form-item
label="处理结果"
prop="result"
:rules="[
{ required: true, message: '请输入处理结果', trigger: 'blur' },
]"
>
<el-input
size="small"
v-model="disciplinaryForm.result"
placeholder="请输入处理结果"
></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>
export default {
name: "Add",
props: {
instance: Function,
dict: Object,
selected: Object
},
computed: {
isEdit() {
return !!this.$route.query.id;
},
},
data() {
const validatorPhone = function (rule, value, callback) {
if (value === "") {
callback(new Error("请输入手机号"));
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error("手机号格式错误"));
} else {
callback();
}
};
return {
info: {},
validatorPhone: validatorPhone,
form: {
name: "",
partyOrgId: "",
idNumber: "",
sex: "",
fileId: "",
birthday: "",
age: "",
nation: "",
partyOrgName: "",
birthplaceAreaId: "",
householdAreaId: "",
householdAddress: "",
phone: "",
currentAreaId: "",
currentAddress: "",
partyStatus: "",
partyType: "",
joinPartyTime: "",
turnPositiveTime: "",
joinPartyIntroducer: "",
partyPosition: "",
partyStartDate: "",
partyWork: "",
flowStatus: "",
flowOrgId: "",
flowTime: "",
disciplinaryInfoList: [],
starList: [],
workInfoList: [],
outFlow: "",
lossTime: "",
inTime: "",
education: "",
},
isShowStarForm: false,
isShowJobForm: false,
jobForm: {
date: [],
company: "",
position: "",
},
jobId: "",
starForm: {
starTime: "",
level: 1,
},
disciplinaryId: "",
isShowDisciplinaryForm: false,
disciplinaryForm: {
starTime: "",
disciplinaryInfo: "",
result: "",
},
starId: "",
activeName: "五星党员",
textlist: ["一星党员", "二星党员", "三星党员", "四星党员", "五星党员"],
colConfigs1: [
{
prop: "starTime",
label: "评定时间",
align: "center",
formart: (v) => (v ? v.split(" ")[0] : "-"),
},
{slot: "level"},
],
colConfigs2: [
{slot: "date"},
{prop: "company", label: "单位", align: "center"},
{prop: "position", label: "职务", align: "center"},
],
colConfigs3: [
{
prop: "starTime",
label: "时间",
align: "center",
formart: (v) => (v ? v.split(" ")[0] : "-"),
},
{prop: "disciplinaryInfo", label: "违纪原因", align: "center"},
{prop: "result", label: "处理结果", align: "center"},
],
};
},
created() {
this.dict.load(
"partyStatus",
"education",
"flowStatus",
"auditStatus",
"partyType",
"partyPosition",
"sex",
"nation"
);
if (this.isEdit) {
this.getInfo()
} else {
this.initOrg();
}
},
methods: {
flowStatusChange() {
this.form.flowOrgId = ''
this.form.flowTime = ''
this.form.outFlow = ''
this.form.inTime = ''
this.form.lossTime = ''
},
initOrg() {
let {id: partyOrgId, name: partyOrgName} = this.selected
this.form.partyOrgId = partyOrgId;
this.form.partyOrgName = partyOrgName;
},
remove(index, key) {
this.$confirm("确定删除该数据?").then(() => {
this.form[key].splice(index, 1);
});
},
getInfo() {
let {id} = this.$route.query;
id && this.instance.post(`/app/appparty/detail`, null, {
params: {id},
}).then((res) => {
if (res?.data) {
this.form = res.data
}
});
},
editStar(query, index) {
this.starForm = JSON.parse(JSON.stringify(query));
this.starId = index;
this.isShowStarForm = true;
},
editJob(query, index) {
this.jobForm = JSON.parse(JSON.stringify(query));
this.jobId = index;
this.isShowJobForm = true;
},
editDisciplinary(query, index) {
this.disciplinaryForm = JSON.parse(JSON.stringify(query));
this.disciplinaryId = index;
this.isShowDisciplinaryForm = true;
},
idChange(val) {
let info = this.idCardNoUtil.getIdCardInfo(val)
this.form.sex = info.sex || "";
this.form.birthday = info.birthday || "";
this.form.age = this.$calcAge(val) || "";
},
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;
},
onJobForm() {
this.$refs.jobForm.validate((valid) => {
if (valid) {
let info = JSON.parse(JSON.stringify({
...this.jobForm,
starTime: this.jobForm.date[0],
endTime: this.jobForm.date[1],
}))
if (this.jobId != "") {
this.form.workInfoList.splice(this.jobId, 1, info)
} else {
this.form.workInfoList.push(info)
}
this.isShowJobForm = false;
}
});
},
onStarForm() {
this.$refs.starForm.validate((valid) => {
if (valid) {
let info = JSON.parse(JSON.stringify(this.starForm))
if (this.starId != "") {
this.form.starList.splice(this.starId, 1, info)
} else {
this.form.starList.push(info)
}
this.isShowStarForm = false;
}
});
},
onDisciplinarForm() {
this.$refs.disciplinaryForm.validate((valid) => {
if (valid) {
let info = JSON.parse(JSON.stringify(this.disciplinaryForm))
if (this.disciplinaryId != "") {
this.form.disciplinaryInfoList.splice(this.disciplinaryId, 1, info)
} else {
this.form.disciplinaryInfoList.push(info)
}
this.isShowDisciplinaryForm = false;
}
});
},
onClose() {
this.starId = "";
this.jobId = "";
this.disciplinaryId = "";
this.starForm.level = 0;
this.starForm.id = "";
this.starForm.starTime = "";
this.jobForm.date = [];
this.jobForm.company = "";
this.jobForm.id = "";
this.jobForm.position = "";
this.disciplinaryForm.starTime = "";
this.disciplinaryForm.id = "";
this.disciplinaryForm.disciplinaryInfo = "";
this.disciplinaryForm.result = "";
},
addForm(type) {
if (type === "五星党员") {
this.isShowStarForm = true;
} else if (type === "工作信息") {
this.isShowJobForm = true;
} else {
this.isShowDisciplinaryForm = true;
}
},
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.instance.post(`/app/appparty/addOrUpdate`, {
...this.form
})
.then((res) => {
if (res.code == 0) {
this.$message.success(this.isEdit ? "编辑成功" : "添加成功");
setTimeout(() => {
this.cancel(true);
}, 600);
}
});
}
});
},
cancel() {
this.$router.push({});
},
handlePartyOrgSelect(e) {
let {isLeaf, name, id} = e?.[0] || {};
if (isLeaf == 1) {
this.form.partyOrgName = name;
this.form.partyOrgId = id;
}
},
},
};
</script>
<style scoped lang="scss">
.party {
::v-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;
}
}
::v-deep.cardTabs {
.el-tabs__header {
padding: 0;
}
}
.audit-0 {
color: #ff8822 !important;
}
.audit-1 {
color: #2ea222 !important;
}
}
</style>