<template>
|
<div class="box-card">
|
<div class="details-center">
|
<h3 class="fz-10 fw-bold mr-b-10" style="padding-top: 20px">
|
{{ info_id ? "编辑" : "新增" }}报到单位
|
</h3>
|
<el-form
|
:model="paramData"
|
:rules="paramRules"
|
ref="paramForm"
|
label-width="250px"
|
>
|
<div class="fl-fw">
|
<el-form-item label="所属党组织" prop="orgName">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入所属党组织"
|
v-model.trim="paramData.orgName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="单位归属" prop="belongTo" v-if="!areaType">
|
<el-select
|
filterable
|
class="iw-220"
|
v-model="paramData.belongTo"
|
placeholder="请选择单位归属"
|
>
|
<el-option
|
v-for="item in belongToList"
|
:key="item.label"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="单位名称" prop="name">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入单位名称"
|
v-model.trim="paramData.name"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="单位性质" prop="natureName">
|
<el-select
|
filterable
|
class="iw-220"
|
v-model="paramData.natureName"
|
placeholder="请选择单位性质"
|
>
|
<el-option
|
v-for="item in natureList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="党组织负责人" prop="contacts">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入党组织负责人"
|
v-model.trim="paramData.contacts"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="党组织负责人电话" prop="phone">
|
<el-input
|
class="iw-220"
|
clearable
|
maxlength="11"
|
placeholder="请输入党组织负责人电话"
|
v-model.trim="paramData.phone"
|
></el-input>
|
</el-form-item>
|
</div>
|
<!-- <div class="fl-fw">
|
<el-form-item label="职能特长及服务意愿" prop="specialtyName">
|
<el-select
|
filterable
|
multiple
|
collapse-tags
|
class="iw-220"
|
@change="skillChange"
|
v-model="specialtyNameValue"
|
placeholder="请选择职能特长及服务意愿"
|
>
|
<el-option
|
v-for="item in skillList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="其他职能特长及服务意愿"
|
prop="idCard"
|
v-if="skillOtherType"
|
>
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入其他职能特长及服务意愿"
|
v-model.trim="paramData.otherRemark"
|
></el-input>
|
</el-form-item>
|
</div> -->
|
<div class="fl-fw">
|
<el-form-item label="单位管理员" prop="adminName">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入单位管理员"
|
v-model.trim="paramData.adminName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="管理员手机号" prop="adminPhone">
|
<el-input
|
class="iw-220"
|
clearable
|
maxlength="11"
|
placeholder="请输入管理员手机号"
|
v-model.trim="paramData.adminPhone"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="服务社区" prop="helpCommunityName">
|
<el-cascader
|
v-model="communityListValue"
|
:options="cityChooseList"
|
:props="propsCityTourst"
|
filterable
|
class="iw-220"
|
@change="communityChange"
|
placeholder="请选择服务社区"
|
/>
|
</el-form-item>
|
<el-form-item label="社区联系人" prop="helpCommunityContactsName">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入社区联系人"
|
v-model.trim="paramData.helpCommunityContactsName"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="社区联系人电话" prop="helpCommunityContacts">
|
<el-input
|
class="iw-220"
|
clearable
|
maxlength="11"
|
placeholder="请输入社区联系人电话"
|
v-model.trim="paramData.helpCommunityContacts"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="下沉服务小区（网格）院落" prop="villageName">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入下沉服务小区（网格）院落"
|
v-model.trim="paramData.villageName"
|
></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="单位标识">
|
<UploadImg
|
:imgNum="1"
|
formKey="logo"
|
:imgShow="paramData.logo"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</el-form-item>
|
<el-form-item label="单位管理员" v-if="false">
|
<el-button size="mini" @click="addAdminClick">添加</el-button>
|
<div class="fl-co">
|
<div
|
class="fl-al mr-t-10"
|
v-for="(it, ix) in administratorsList"
|
:key="ix"
|
>
|
<div class="fl-al">
|
<span>单位管理员：</span>
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入单位管理员"
|
v-model.trim="it.adminName"
|
></el-input>
|
</div>
|
<div class="fl-al mr-l-20">
|
<span>管理员手机号：</span>
|
<el-input
|
class="iw-220"
|
clearable
|
maxlength="11"
|
placeholder="请输入管理员手机号"
|
v-model.trim="it.adminPhone"
|
></el-input>
|
</div>
|
<el-button
|
:disabled="administratorsList.length === 1"
|
size="mini"
|
class="mr-l-10"
|
type="danger"
|
icon="el-icon-delete"
|
@click="deleteAdminRow(ix)"
|
circle
|
></el-button>
|
</div>
|
</div>
|
</el-form-item>
|
|
<!-- 20231215需求优化 -->
|
<el-form-item label="职能特长及服务意愿">
|
<el-select
|
filterable
|
multiple
|
collapse-tags
|
class="iw-220"
|
v-model="specialtyNameValue"
|
placeholder="请选择职能特长及服务意愿"
|
>
|
<el-option
|
v-for="item in skillList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 20231215需求优化 -->
|
<!-- <div v-for="(item, index) in projectList" :key="index">
|
<div class="fl-fw">
|
<el-form-item label="职能特长及服务意愿">
|
<el-select
|
filterable
|
multiple
|
collapse-tags
|
class="iw-220"
|
v-model="item.specialtyNameValue"
|
placeholder="请选择职能特长及服务意愿"
|
>
|
<el-option
|
v-for="item in skillList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<div>
|
<el-button
|
class="addBtn"
|
v-if="
|
index == projectList.length - 1 || projectList.length === 1
|
"
|
type="primary"
|
:loading="btnType"
|
@click="handleAction('addProject')"
|
>添加</el-button
|
>
|
<el-button
|
v-else
|
class="addBtn"
|
type="primary"
|
:loading="btnType"
|
@click="handleAction('delProject', index)"
|
>删除</el-button
|
>
|
</div>
|
</div>
|
<el-form-item label="服务项目名称">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入服务项目名称"
|
v-model.trim="item.projectName"
|
></el-input>
|
</el-form-item>
|
</div> -->
|
|
<el-form-item prop="password" label="">
|
<el-button @click="handleAction('close')">取 消</el-button>
|
<el-button
|
type="primary"
|
:loading="btnType"
|
@click="handleAction('submit')"
|
>提 交</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { objCopyPro, areaAccountReturn } from "../../../utils/common";
|
import { PHONE } from "@/utils/validation";
|
import UploadImg from "../../../components/upload/uploadImg.vue";
|
export default {
|
components: {
|
UploadImg
|
},
|
data() {
|
return {
|
info_id: "",
|
btnType: false,
|
projectList: [
|
{
|
projectName: "",
|
specialtyNameValue: []
|
}
|
],
|
paramData: {
|
natureName: "",
|
name: "", // 姓名
|
adminName: "",
|
adminPhone: "",
|
phone: "",
|
contacts: "",
|
logo: "",
|
specialtyName: "",
|
helpCommunityName: "",
|
helpCommunityId: "",
|
helpCommunityContactsName: "",
|
helpCommunityContacts: "",
|
otherRemark: "",
|
villageName: "",
|
orgName: "",
|
belongTo: "",
|
adminJson: ""
|
},
|
paramRules: {
|
natureName: [
|
{ required: true, message: "请选择单位性质", trigger: "change" }
|
],
|
orgName: [
|
{ required: true, message: "请选择所属党组织", trigger: "change" }
|
],
|
belongTo: [
|
{ required: true, message: "请选择单位归属", trigger: "change" }
|
],
|
specialtyName: [
|
{
|
required: true,
|
message: "请选择职能特长及服务意愿",
|
trigger: "change"
|
}
|
],
|
helpCommunityName: [
|
{ required: true, message: "请选择服务社区", trigger: "change" }
|
],
|
name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
|
contacts: [
|
{ required: true, message: "请输入党组织负责人", trigger: "blur" }
|
],
|
phone: [{ required: true, validator: PHONE, trigger: "blur" }],
|
adminName: [
|
{ required: true, message: "请输入单位管理员", trigger: "blur" }
|
],
|
adminPhone: [{ required: true, validator: PHONE, trigger: "blur" }],
|
helpCommunityContactsName: [
|
{ required: true, message: "请输入社区联系人", trigger: "blur" }
|
],
|
helpCommunityContacts: [
|
{ required: true, validator: PHONE, trigger: "blur" }
|
],
|
villageName: [
|
{
|
required: true,
|
message: "请输入下沉服务小区（网格）院落",
|
trigger: "blur"
|
}
|
]
|
}, // 表单验证
|
cityChooseList: [],
|
propsCityTourst: {
|
label: "value",
|
value: "value"
|
},
|
communityListValue: [],
|
villageList: [],
|
specialtyNameValue: [],
|
skillList: [
|
{ label: "党建指导", value: 1, checkType: false },
|
{ label: "政策宣讲", value: 2, checkType: false },
|
{ label: "教育培训", value: 3, checkType: false },
|
{ label: "就业服务", value: 4, checkType: false },
|
{ label: "志愿服务", value: 5, checkType: false },
|
{ label: "维修服务", value: 6, checkType: false },
|
{ label: "家政服务", value: 7, checkType: false },
|
{ label: "其他", value: 8, checkType: false }
|
],
|
skillOtherType: false,
|
unitList: [],
|
natureList: [
|
{
|
label: "机关单位",
|
value: "机关单位"
|
},
|
{
|
label: "企事业单位",
|
value: "企事业单位"
|
},
|
{
|
label: "国有国企",
|
value: "国有国企"
|
}
|
],
|
belongToList: [
|
{
|
label: "市直属"
|
},
|
{
|
label: "西区"
|
},
|
{
|
label: "东区"
|
},
|
{
|
label: "仁和区"
|
},
|
{
|
label: "盐边县"
|
},
|
{
|
label: "米易县"
|
},
|
{
|
label: "钒钛高新区"
|
}
|
],
|
administratorsList: [
|
{
|
adminName: "",
|
adminPhone: ""
|
}
|
],
|
areaType: false
|
};
|
},
|
mounted() {
|
this.areaType = areaAccountReturn(demo.$session.get("user").name);
|
this.info_id = this.$route.query.id;
|
if (this.info_id) {
|
this.getDataInfo();
|
}
|
this.getAreaRequestList();
|
this.getUnitList();
|
},
|
methods: {
|
addAdminClick() {
|
this.administratorsList.push({
|
adminName: "",
|
adminPhone: ""
|
});
|
},
|
deleteAdminRow(ix) {
|
this.administratorsList.splice(ix, 1);
|
},
|
// 获取区域列表
|
getAreaRequestList() {
|
this.$api.get("comAreaTownCommunity/areaTownCommunityNew", {}, res => {
|
this.cityChooseList = res;
|
});
|
},
|
getUnitList() {
|
this.$api.post(
|
"checkUnit/list",
|
{
|
pageNum: 1,
|
pageSize: 999
|
},
|
res => {
|
this.unitList = res.records;
|
}
|
);
|
},
|
getDataInfo() {
|
// this.$api.get("/comAreaTownCommunity/areaTownCommunityNew", {}, (res) => {
|
// this.areaChooseList = res;
|
// });
|
this.$api.get(`checkUnit/detail`, { id: this.info_id }, res => {
|
const BACK_DATA_INFO = res;
|
this.paramData = objCopyPro(this.paramData, BACK_DATA_INFO);
|
this.specialtyNameValue = res.specialtyName
|
? res.specialtyName.split(",")
|
: [];
|
this.communityListValue = res.helpCommunityName
|
? res.helpCommunityName.split(",")
|
: [];
|
this.skillOtherType = this.specialtyNameValue.some(item => {
|
return item === "其他";
|
});
|
this.administratorsList = res.adminJson
|
? JSON.parse(res.adminJson)
|
: [{ adminName: "", adminPhone: "" }];
|
});
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
case "close": {
|
this.$router.back();
|
break;
|
}
|
case "submit": {
|
// const ADMIN_RULES_NAME = this.administratorsList.some((it) => {
|
// return it.adminName == "";
|
// });
|
// const ADMIN_RULES_PHONE = this.administratorsList.some((it) => {
|
// return it.adminPhone == "";
|
// });
|
// if (ADMIN_RULES_NAME) {
|
// demo.toast("单位管理员名称不能为空");
|
// return;
|
// }
|
// if (ADMIN_RULES_PHONE) {
|
// demo.toast("管理员手机号不能为空");
|
// return;
|
// }
|
// this.paramData.adminJson = JSON.stringify(this.administratorsList);
|
this.paramData.specialtyName = this.specialtyNameValue.join(",");
|
this.$refs.paramForm.validate(val => {
|
if (val) {
|
// this.btnType = true;
|
if (this.info_id) {
|
this.$api.put("checkUnit/edit", this.paramData, () => {
|
// this.btnType = false;
|
demo.toast("提交成功");
|
this.$router.back();
|
});
|
} else {
|
this.$api.post("checkUnit/add", this.paramData, () => {
|
// this.btnType = false;
|
demo.toast("提交成功");
|
this.$router.back();
|
});
|
}
|
}
|
});
|
break;
|
}
|
case "addProject": {
|
this.projectList.push({
|
projectName: "",
|
specialtyNameValue: []
|
});
|
break;
|
}
|
case "delProject": {
|
this.projectList.splice(row, 1);
|
break;
|
}
|
|
default: {
|
break;
|
}
|
}
|
},
|
skillChange(arr) {
|
this.skillOtherType = arr.some(item => {
|
return item === "其他";
|
});
|
this.paramData.specialtyName = arr.join(",");
|
},
|
uploadHandleHealth({ type, val, key }) {
|
if (type === "loading") {
|
this.btnType = val;
|
} else {
|
this.paramData[key] = val;
|
this.$refs.paramForm.validateField(key);
|
}
|
},
|
communityChange(arr) {
|
this.paramData.helpCommunityName = arr.join(",");
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.textarea-width {
|
width: 400px;
|
}
|
.iw-220 {
|
width: 250rpx !important;
|
}
|
.iw-200 {
|
width: 200rpx !important;
|
}
|
|
.addBtn {
|
margin-left: 20px;
|
}
|
</style>
|
