<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>
|
<div class="fl-fw">
|
<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>
|
</div>
|
<el-form-item label="服务项目名称">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入服务项目名称"
|
v-model.trim="paramData.title"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="项目图片">
|
<UploadImg
|
:imgNum="1"
|
formKey="imgUrl"
|
:imgShow="paramData.imgUrl"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</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>
|
|
<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 } 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,
|
communityId: "",
|
paramData: {
|
phone: "",
|
meritId: "",
|
title: "",
|
imgUrl: ""
|
},
|
paramRules: {
|
meritId: [
|
{
|
required: true,
|
message: "请选择职能特长及服务意愿",
|
trigger: "change"
|
}
|
],
|
title: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
|
phone: [{ required: true, validator: PHONE, 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
|
};
|
},
|
mounted() {
|
this.info_id = this.$route.query.id;
|
this.unitId = this.$route.query.unitId;
|
this.communityId = this.$route.query.communityId;
|
if (this.info_id) {
|
this.getDataInfo();
|
}
|
//
|
},
|
methods: {
|
getDataInfo() {
|
// this.$api.get("/comAreaTownCommunity/areaTownCommunityNew", {}, (res) => {
|
// this.areaChooseList = res;
|
// });
|
this.$api.get(
|
`StriveFor/ResourceSharing/getResourceSharingDetails`,
|
{ id: this.info_id },
|
res => {
|
const BACK_DATA_INFO = res;
|
this.paramData = objCopyPro(this.paramData, BACK_DATA_INFO);
|
this.specialtyNameValue = res.meritId ? res.meritId.split(",") : [];
|
this.skillOtherType = this.specialtyNameValue.some(item => {
|
return item === "其他";
|
});
|
}
|
);
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
case "close": {
|
this.$router.back();
|
break;
|
}
|
case "submit": {
|
this.$refs.paramForm.validate(val => {
|
if (val) {
|
// this.btnType = true;
|
this.paramData.meritId = this.specialtyNameValue.join(",");
|
this.paramData.unitId = this.unitId;
|
this.paramData.communityId = this.communityId;
|
if (this.info_id) {
|
this.paramData.id = this.info_id;
|
|
this.$api.post(
|
"StriveFor/ResourceSharing/editResourceSharingData",
|
this.paramData,
|
() => {
|
// this.btnType = false;
|
demo.toast("编辑成功");
|
this.$router.back();
|
}
|
);
|
} else {
|
this.$api.post(
|
"StriveFor/ResourceSharing/addResourceSharingData",
|
this.paramData,
|
() => {
|
// this.btnType = false;
|
demo.toast("提交成功");
|
this.$router.back();
|
}
|
);
|
}
|
}
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
skillChange(arr) {
|
this.skillOtherType = arr.some(item => {
|
return item === "其他";
|
});
|
console.log(arr);
|
this.paramData.meritId = arr.join(",");
|
},
|
uploadHandleHealth({ type, val, key }) {
|
if (type === "loading") {
|
this.btnType = val;
|
} else {
|
this.paramData[key] = val;
|
this.$refs.paramForm.validateField(key);
|
}
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.textarea-width {
|
width: 400px;
|
}
|
.iw-220 {
|
width: 250rpx !important;
|
}
|
.iw-200 {
|
width: 200rpx !important;
|
}
|
|
.addBtn {
|
margin-left: 20px;
|
}
|
</style>
|
