<template>
|
<div class="box-card">
|
<div class="details-center">
|
<h3 class="fz-10 fw-bold mr-b-10" style="padding-top: 20px">
|
社区报备修改
|
</h3>
|
<el-form
|
:model="paramData"
|
:rules="paramRules"
|
ref="paramForm"
|
label-width="250px"
|
>
|
<el-form-item label="填写对象" prop="type">
|
<div class="iw-220">
|
<el-radio v-model="paramData.type" :label="1">本人填写</el-radio>
|
<el-radio v-model="paramData.type" :label="2">代人填写</el-radio>
|
</div>
|
</el-form-item>
|
<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="idCard">
|
<el-input
|
class="iw-220"
|
clearable
|
maxlength="18"
|
placeholder="请输入证件号"
|
v-model.trim="paramData.idCard"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input
|
class="iw-220"
|
maxlength="11"
|
clearable
|
placeholder="请输入联系电话"
|
v-model.trim="paramData.phone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="出发城市" prop="departureCity">
|
<div v-if="!departureType">
|
<span>{{ paramData.departureCity }}</span>
|
<el-button class="mr-l-10" @click="departureType = true"
|
>修改</el-button
|
>
|
</div>
|
<div v-else>
|
<el-cascader
|
v-model="localCityValueOut"
|
:options="cityChooseList"
|
:props="propsCityTourst"
|
@change="outHandleEditChange"
|
filterable
|
class="iw-220"
|
placeholder="选择出发城市"
|
/>
|
<el-button class="mr-l-10" @click="confirmHandle">确定</el-button>
|
<el-button class="mr-l-10" @click="departureType = false"
|
>取消</el-button
|
>
|
</div>
|
</el-form-item>
|
</div>
|
<el-form-item label="详细地址">
|
<el-input
|
type="textarea"
|
class="textarea-width"
|
:rows="5"
|
resize="none"
|
placeholder="请输入详细地址"
|
maxlength="300"
|
clearable
|
show-word-limit
|
v-model="paramData.departureAddress"
|
></el-input>
|
</el-form-item>
|
<div class="fl-fw">
|
<el-form-item label="出发日期" prop="departureDate">
|
<el-date-picker
|
v-model="paramData.departureDate"
|
type="date"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
class="iw-220"
|
placeholder="选择出发出发日期"
|
/>
|
</el-form-item>
|
</div>
|
<el-form-item label="中途旅居城市">
|
<el-button class="mr-b-10" @click="handleAction('addCity')"
|
>添加</el-button
|
>
|
<div
|
v-for="(it, ix) in touristCityList"
|
:key="ix"
|
class="mr-b-10 fl-al"
|
>
|
<div v-if="it.name && !it.touristType">
|
<span>{{ it.name.join(",") }}</span>
|
<el-button class="mr-l-10" @click="it.touristType = true"
|
>修改</el-button
|
>
|
</div>
|
<div v-if="it.name && it.touristType">
|
<el-cascader
|
v-model="it.name"
|
:options="cityChooseList"
|
:props="propsCityTourst"
|
filterable
|
class="iw-220"
|
placeholder="选择中途旅居城市"
|
/>
|
<el-button class="mr-l-10" @click="it.touristType = false"
|
>修改</el-button
|
>
|
</div>
|
<div v-if="!it.name">
|
<el-cascader
|
v-model="it.name"
|
:options="cityChooseList"
|
:props="propsCityTourst"
|
filterable
|
class="iw-220"
|
placeholder="选择中途旅居城市"
|
/>
|
</div>
|
<el-button class="mr-l-10" @click="handleAction('deleteCity', ix)"
|
>删除</el-button
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="在攀居住信息" prop="localCity">
|
<el-cascader
|
v-model="localCityValueEdit"
|
:options="areaChooseList"
|
:props="propsAreaEdit"
|
@change="areaHandleEditChange"
|
filterable
|
class="iw-220"
|
placeholder="选择在攀居住地"
|
/>
|
</el-form-item>
|
<el-form-item label="详细地址">
|
<el-input
|
type="textarea"
|
class="textarea-width"
|
:rows="5"
|
resize="none"
|
placeholder="请输入详细地址"
|
maxlength="300"
|
clearable
|
show-word-limit
|
v-model="paramData.localAddress"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="到达日期" prop="arriveDate">
|
<el-date-picker
|
v-model="paramData.arriveDate"
|
type="date"
|
class="iw-220"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
placeholder="选择出发出发日期"
|
/>
|
</el-form-item>
|
<el-form-item label="交通工具" prop="transport">
|
<el-checkbox-group v-model="vehicleListCheckValue" @change="vehicleListCheckChange">
|
<el-checkbox
|
v-for="(it, ix) in vehicleList"
|
:key="ix"
|
:label="it.label"
|
/>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="车次信息">
|
<el-input
|
class="iw-220"
|
clearable
|
placeholder="请输入车次信息"
|
v-model.trim="paramData.transportInfo"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="健康码状态" prop="colorMark">
|
<div>
|
<el-radio
|
v-for="(it, ix) in healthyCodeList"
|
:key="ix"
|
v-model="paramData.colorMark"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="行程卡是否带*" prop="travelCard">
|
<div>
|
<el-radio
|
v-for="(it, ix) in toHighDangerous"
|
:key="ix"
|
v-model="paramData.travelCard"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item
|
label="是否为冷链、海关、边检、口岸、机场等高风险行业人员"
|
prop="isSpecialJob"
|
>
|
<div>
|
<el-radio
|
v-for="(it, ix) in toHighDangerous"
|
:key="ix"
|
v-model="paramData.isSpecialJob"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="14天内是否到过中高风险地区" prop="dangerArea">
|
<div>
|
<el-radio
|
v-for="(it, ix) in toHighDangerous"
|
:key="ix"
|
v-model="paramData.dangerArea"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item
|
label="28天内是否到过境外或边境口岸城市"
|
prop="outsideCity"
|
>
|
<div>
|
<el-radio
|
v-for="(it, ix) in toHighDangerous"
|
:key="ix"
|
v-model="paramData.outsideCity"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="是否为入（返）川学生" prop="outsideCity">
|
<div>
|
<el-radio
|
v-for="(it, ix) in toHighDangerous"
|
:key="ix"
|
v-model="paramData.isStudent"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="新冠疫苗接种情况" prop="vaccination">
|
<div>
|
<el-radio
|
v-for="(it, ix) in vaccinationList"
|
:key="ix"
|
v-model="paramData.vaccination"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<el-form-item label="48小时内核酸检测" prop="acidTest">
|
<div>
|
<el-radio
|
v-for="(it, ix) in nucleinDetection"
|
:key="ix"
|
v-model="paramData.acidTest"
|
:label="it.label"
|
>{{ it.label }}</el-radio
|
>
|
</div>
|
</el-form-item>
|
<div
|
v-if="
|
paramData.colorMark === '红码' ||
|
paramData.colorMark === '黄码' ||
|
paramData.travelCard === '是' ||
|
paramData.dangerArea === '是' ||
|
paramData.outsideCity === '是' ||
|
paramData.acidTest === '阳性' ||
|
isRenheArea
|
"
|
>
|
<el-form-item label="健康码截图" prop="colorImage">
|
<UploadImg
|
:imgNum="1"
|
formKey="colorImage"
|
:imgShow="paramData.colorImage"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</el-form-item>
|
<el-form-item label="行程卡截图" prop="travelImage">
|
<UploadImg
|
:imgNum="1"
|
formKey="travelImage"
|
:imgShow="paramData.travelImage"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</el-form-item>
|
<el-form-item label="48小时核酸截图">
|
<UploadImg
|
:imgNum="1"
|
formKey="acidImage"
|
:imgShow="paramData.acidImage"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<el-form-item label="健康码截图">
|
<UploadImg
|
:imgNum="1"
|
formKey="colorImage"
|
:imgShow="paramData.colorImage"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</el-form-item>
|
<el-form-item label="行程卡截图">
|
<UploadImg
|
:imgNum="1"
|
formKey="travelImage"
|
:imgShow="paramData.travelImage"
|
@fileHandle="uploadHandleHealth"
|
/>
|
</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 CityList from "../../utils/city";
|
import { objCopyPro } from "../../utils/common";
|
import { PHONE, SHENFENZHENG } from "@/utils/validation";
|
import UploadImg from "../../components/upload/uploadImg.vue";
|
import {
|
WRITE_CHOOSE_SELF,
|
HEALTHY_CODE_LIST,
|
TO_HIGH_DANGEROUS,
|
VACCINATION_LIST,
|
NUCLEIN_DETECTION,
|
VEHICLE_LIST,
|
} from "./labelList";
|
export default {
|
components: {
|
UploadImg,
|
},
|
data() {
|
return {
|
info_id: "",
|
btnType: false,
|
departureType: false,
|
paramData: {
|
type: 1,
|
name: "", //姓名
|
idCard: "", //身份证
|
phone: "", //联系电话
|
departureCity: "", //出发城市
|
departureDate: "", //出发日期
|
touristCity: "", //中途旅居城市
|
isAddressHave: "有", //在攀有无明确住址
|
localCity: "", //在攀居住地
|
localAddress: "", //详细地址
|
arriveDate: "", //到达日期
|
colorMark: "绿码", //健康码状态
|
travelCard: "否", //行程卡是否带
|
dangerArea: "否", //14天内是否到过中高风险地区
|
outsideCity: "否", //28天内是否到过境外或边境口岸城市
|
vaccination: "", //新冠疫苗接种情况
|
acidTest: "", //48小时内核酸检测
|
realAddress: "", //定位地址
|
colorImage: "", // 健康码截图
|
travelImage: "", // 行程码截图
|
acidImage: "", // 48小时核酸截图
|
departureAddress: "", // 出发地详细地址
|
transport: "", // 交通工具
|
transportInfo: "", // 交通信息
|
isStudent: "", // 交通信息
|
isSpecialJob: "", // 交通信息
|
},
|
paramRules: {
|
travelImage: [
|
{
|
required: true,
|
message: "请上传行程卡截图",
|
trigger: "change",
|
},
|
],
|
acidImage: [
|
{
|
required: true,
|
message: "48小时核酸截图",
|
trigger: "change",
|
},
|
],
|
colorImage: [
|
{
|
required: true,
|
message: "请上传健康码截图",
|
trigger: "change",
|
},
|
],
|
acidTest: [
|
{
|
required: true,
|
message: "请选择48小时内核酸检测",
|
trigger: "change",
|
},
|
],
|
isSpecialJob: [
|
{
|
required: true,
|
message: "请选择是否为冷链、海关、边检、口岸、机场等高风险行业人员",
|
trigger: "change",
|
},
|
],
|
vaccination: [
|
{
|
required: true,
|
message: "请选择新冠疫苗接种情况",
|
trigger: "change",
|
},
|
],
|
outsideCity: [
|
{
|
required: true,
|
message: "请选择28天内是否到过境外或边境口岸城市",
|
trigger: "change",
|
},
|
],
|
isStudent: [
|
{
|
required: true,
|
message: "请选择是否为入（返）川学生",
|
trigger: "change",
|
},
|
],
|
travelCard: [
|
{ required: true, message: "请选择行程卡是否带*", trigger: "change" },
|
],
|
dangerArea: [
|
{
|
required: true,
|
message: "请选择14天内是否到过中高风险地区",
|
trigger: "change",
|
},
|
],
|
colorMark: [
|
{ required: true, message: "请选择健康码状态", trigger: "change" },
|
],
|
localCity: [
|
{ required: true, message: "请选择在攀居住地", trigger: "change" },
|
],
|
transport: [
|
{ required: true, message: "请选择交通工具", trigger: "change" },
|
],
|
arriveDate: [
|
{ required: true, message: "请选择出发出发日期", trigger: "change" },
|
],
|
departureCity: [
|
{ required: true, message: "请选择出发城市", trigger: "change" },
|
],
|
departureDate: [
|
{ required: true, message: "请选择出发出发日期", trigger: "change" },
|
],
|
type: [
|
{ required: true, message: "请选择填写对象", trigger: "change" },
|
],
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
idCard: [{ required: true, message: "请输入证件号", trigger: "blur" }],
|
// idCard: [{ required: true, validator: SHENFENZHENG, trigger: "blur" }],
|
phone: [{ required: true, validator: PHONE, trigger: "blur" }],
|
}, // 表单验证
|
propsAreaEdit: {
|
label: "value",
|
value: "value",
|
},
|
propsCityTourst: {
|
label: "name",
|
value: "name",
|
children: "provinceCityReturnVOList",
|
},
|
localCityValueEdit: [],
|
localCityValueOut: [],
|
touristCityList: [
|
{
|
name: [],
|
},
|
],
|
writeChooseSelf: WRITE_CHOOSE_SELF,
|
healthyCodeList: HEALTHY_CODE_LIST,
|
toHighDangerous: TO_HIGH_DANGEROUS,
|
vaccinationList: VACCINATION_LIST,
|
nucleinDetection: NUCLEIN_DETECTION,
|
vehicleList: VEHICLE_LIST,
|
|
areaChooseList: [],
|
cityChooseList: [],
|
vehicleListCheckValue: [],
|
isRenheArea: false,
|
touristType: false,
|
};
|
},
|
mounted() {
|
this.info_id = this.$route.query.id;
|
this.getCityList();
|
this.getDataInfo();
|
},
|
methods: {
|
confirmHandle() {
|
this.paramData.departureCity = this.localCityValueOut.join(",");
|
this.departureType = false;
|
},
|
getCityList() {
|
this.$api.get("/bcRegion/levelList", {}, (res) => {
|
this.cityChooseList = JSON.parse(res);
|
});
|
},
|
vehicleListCheckChange(val) {
|
this.paramData.transport = val.join(",");
|
this.$refs.paramForm.validateField("transport");
|
},
|
getDataInfo() {
|
this.$api.get("/comAreaTownCommunity/areaTownCommunityNew", {}, (res) => {
|
this.areaChooseList = res;
|
});
|
this.$api.get(`/comActAcidRecord/${this.info_id}`, {}, (res) => {
|
const BACK_DATA_INFO = res,
|
{ localCity, transport, touristCity, departureCity } = res;
|
this.paramData = objCopyPro(this.paramData, BACK_DATA_INFO);
|
this.localCityValueEdit = localCity ? localCity.split(",") : "";
|
this.vehicleListCheckValue = transport ? transport.split(",") : [];
|
this.localCityValueOut = departureCity ? departureCity.split(",") : [];
|
const CITY_LIST = JSON.parse(touristCity);
|
let isRenheArea = localCity.indexOf("仁和区");
|
this.isRenheArea = isRenheArea === -1 ? false : true;
|
CITY_LIST.forEach((it) => {
|
it.touristType = false;
|
if (it.name !== "") {
|
it.name = it.name.split(",");
|
}
|
});
|
this.touristCityList = CITY_LIST;
|
});
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
case "close": {
|
this.$router.back();
|
break;
|
}
|
case "addCity": {
|
this.touristCityList.push({
|
name: "",
|
});
|
break;
|
}
|
case "deleteCity": {
|
if (this.touristCityList.length === 1) {
|
this.touristCityList = [
|
{
|
name: "",
|
},
|
];
|
return;
|
}
|
this.touristCityList.splice(row, 1);
|
break;
|
}
|
case "submit": {
|
this.$refs.paramForm.validate((val) => {
|
if (val) {
|
this.btnType = true;
|
this.touristCityList.forEach((item) => {
|
item.name = item.name !== "" ? item.name.join(",") : "";
|
});
|
this.paramData.transport = this.vehicleListCheckValue.join(",");
|
this.paramData.localCity = this.localCityValueEdit.join(",");
|
this.paramData.touristCity = JSON.stringify(this.touristCityList);
|
this.paramData.departureCity = this.localCityValueOut.join(",");
|
this.$api.post("comActAcidRecord/update", this.paramData, () => {
|
this.btnType = false;
|
demo.toast("编辑成功");
|
this.$router.back();
|
});
|
}
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
areaHandleEditChange(val) {
|
if (val) {
|
this.paramData.localCity = val.join(",");
|
} else {
|
this.localCityValueEdit = [];
|
this.paramData.localCity = "";
|
}
|
let isRenheArea = this.paramData.localCity.indexOf("仁和区");
|
this.isRenheArea = isRenheArea === -1 ? false : true;
|
this.$refs.paramForm.validateField("localCity");
|
},
|
outHandleEditChange(val) {
|
if (val) {
|
this.paramData.departureCity = val.join(",");
|
} else {
|
this.localCityValueOut = [];
|
this.paramData.departureCity = "";
|
}
|
this.$refs.paramForm.validateField("departureCity");
|
},
|
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;
|
}
|
</style>
|
