591 lines
38 KiB
HTML
591 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>
|
||
宁波既有建筑外墙脱落问卷调查
|
||
</title>
|
||
<script src="../../lib/vue/vue.global.prod.min.js"></script>
|
||
<link href="../../lib/element-plus/index.min.css" rel="stylesheet" />
|
||
<script src="../../lib/element-plus/index.full.min.js"></script>
|
||
<script src="../../lib/element-plus/locale/zh-cn.min.js"></script>
|
||
<script src="../../lib/element-plus-icons-vue/global.iife.min.js"></script>
|
||
<script src="../../lib/xe-utils/dist/xe-utils.umd.min.js"></script>
|
||
<script src="../../lib/axios/axios.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<h3 style="text-align:center;">宁波既有建筑外墙脱落问卷调查</h3>
|
||
<el-form ref="formRef" :model="pageData.form" label-position="left" require-asterisk-position="right" label-width="160px" style="margin-top:15px;">
|
||
<el-form-item label="1.社区/小区名：" prop="communityId" :rules="[{ required: true, trigger: 'blur', message: '请选择社区/小区' }]">
|
||
<el-select v-model="pageData.communityItem" filterable clearable placeholder="请选择" @change="(v,v2)=>funHandles.onChangeSelectCommunity(v,pageData)" style="width:100%">
|
||
<el-option v-for="item in pageData.communitys" :key="item.id" :label="item.name" :value="JSON.stringify(item)">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="2.小区交付年份：" prop="deliveryear" :rules="[{ required: false, trigger: 'blur', message: '请输入交付年份' }]">
|
||
<el-date-picker v-model="pageData.form.deliveryear" type="date" value-format="YYYY-MM-DD" style="width:100%" />
|
||
</el-form-item>
|
||
<!--@*<el-form-item label="物业单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开发商：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="施工单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设计单位：" prop="hangye">
|
||
<el-input v-model="form.hangye"></el-input>
|
||
</el-form-item>*@-->
|
||
<el-form-item label="3.外墙结构：" prop="outsidewallstructurefiles">
|
||
<el-upload class="upload-demo" drag multiple
|
||
action="/gb/yjb/api/outsidewall/sysFileInfo/upload"
|
||
auto-upload
|
||
list-type="picture-card"
|
||
v-model:file-list="pageData.fileList"
|
||
:on-preview="(file)=>funHandles.filePreview(file,pageData.fileList)"
|
||
:on-remove="(file, fileList)=>{return funHandles.fileRemove(file, fileList)}"
|
||
:on-success="(response, file, fileList)=>{return funHandles.fileChange(response, file, fileList)}">
|
||
<!--<i class="el-icon-upload"></i>-->
|
||
<div class="el-upload__text"><em>上传外墙照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="4.楼栋数：" prop="buildcount">
|
||
<el-input-number v-model="pageData.form.buildcount"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="5.住户总数：" prop="householdcount" :rules="[{ required: false, trigger: 'blur', message: '请输入住户总数' }]">
|
||
<el-input-number v-model="pageData.form.householdcount"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="6.总建筑面积：" prop="totalfloorage" :rules="[{ required: true, trigger: 'blur', message: '请输入总建筑面积' }]">
|
||
<el-input-number v-model="pageData.form.totalfloorage" :precision="2" :step="1"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="7.是否存在外墙问题：" prop="isExistProblem" :rules="[{ required: true, trigger: 'blur', message: '请选择是否' }]">
|
||
<el-radio-group v-model="pageData.form.isExistProblem">
|
||
<el-radio-button label="1" border>是</el-radio-button>
|
||
<el-radio-button label="0" border>否</el-radio-button>
|
||
</el-radio-group>
|
||
<span style="margin-left: 20px; color: #909399">例如：漏水、开裂、脱落</span>
|
||
</el-form-item>
|
||
<el-form-item label="8.楼栋信息：" v-show="pageData?.form?.isExistProblem=='1'">
|
||
<el-select v-model="pageData.buildingItemId" filterable clearable placeholder="请选择" style="width:100%">
|
||
<el-option v-for="item in pageData.buildings" :key="item.id" :label="item.buildingName" :value="item.id">
|
||
<span style="float: left">{{ item.buildingName }}</span>
|
||
<span style="float: right;color: var(--el-text-color-secondary);font-size: 11px;">{{ item.address }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
<div v-for="buildingItem in pageData.form.buildings" v-show="buildingItem?.id==pageData.buildingItemId">
|
||
<el-space wrap alignment="start" style="margin:20px 0">
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width: 80px">地址：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.address }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">幢名称：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.buildingName }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">层数：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.levelCount }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">总户数：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.houseHolds }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">建设单位：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.buildingUnit }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">设计单位：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.desingerUnit }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">施工单位：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.constructionUnit }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">监理单位：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.monitorUnit }}</div>
|
||
<div style="width:350px"><label style="color: #606266; display:inline-block;width:80px">物业单位：</label>{{ XEUtils.find(pageData.buildings, item => item.id === pageData.buildingItemId)?.wuYeUnit }}</div>
|
||
</el-space>
|
||
<el-form ref="childFormRef" :model="buildingItem" label-position="top" inline-message>
|
||
<el-form-item prop="curwallproblems" label="8.1 墙体问题的类型是" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择墙体问题' }]">
|
||
<el-checkbox-group v-model="buildingItem.curwallproblems">
|
||
<el-checkbox v-for="w in staticData.wallproblems" :label="w" :key="w">{{w}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
<el-input type="textarea" autosize placeholder="请输入其他问题" v-model="buildingItem.curwallproblemother" v-if="XEUtils.indexOf(buildingItem.curwallproblems, '其他问题')!=-1"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="8.2 哪个问题最先开始出现？" v-if="buildingItem?.curwallproblems?.length>1">
|
||
<el-radio-group v-model="buildingItem.wallproblemsfirst">
|
||
<el-radio v-for="w in staticData.wallproblems" :label="w">{{w}}</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="firstproblemdate" label="8.3 第一次出现墙体问题是建成后____年？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择第一次出现墙体问题时间' }]">
|
||
<el-radio-group v-model="buildingItem.firstproblemdate">
|
||
<el-radio label="建成后0-5年">建成后0-5年</el-radio>
|
||
<el-radio label="建成后6-10年">建成后6-10年</el-radio>
|
||
<el-radio label="建成后11-15年">建成后11-15年</el-radio>
|
||
<el-radio label="建成后15年以上">建成后15年以上</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemfrequency" label="8.4 墙体脱落发生频率如何？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择墙体脱落发生频率' }]">
|
||
<el-radio-group v-model="buildingItem.problemfrequency">
|
||
<el-radio label="1年1-2次">1年1-2次</el-radio>
|
||
<el-radio label="1年3-5次">1年3-5次</el-radio>
|
||
<el-radio label="1年5次以上">1年5次以上</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemseason" label="8.5 问题多发生在哪个季节？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择问题发生季节' }]">
|
||
<el-checkbox-group v-model="buildingItem.problemseason">
|
||
<el-checkbox label="春" key="春">春</el-checkbox>
|
||
<el-checkbox label="夏" key="夏">夏</el-checkbox>
|
||
<el-checkbox label="秋" key="秋">秋</el-checkbox>
|
||
<el-checkbox label="冬" key="冬">冬</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item prop="wallproblemtoward" label="8.6 墙体问题发生的朝向是哪面？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择问题发生朝向' }]">
|
||
<el-checkbox-group v-model="buildingItem.wallproblemtoward">
|
||
<el-checkbox label="东" key="东">东</el-checkbox>
|
||
<el-checkbox label="西" key="西">西</el-checkbox>
|
||
<el-checkbox label="南" key="南">南</el-checkbox>
|
||
<el-checkbox label="北" key="北">北</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="8.7 问题照片：">
|
||
<el-upload class="upload-demo" drag multiple
|
||
action="/gb/yjb/api/outsidewall/sysFileInfo/upload"
|
||
auto-upload
|
||
list-type="picture-card"
|
||
v-model:file-list="pageData.childFileList1"
|
||
:on-preview="(file)=>funHandles.filePreview(file,pageData.childFileList1)"
|
||
:on-remove="(file, fileList)=>funHandles.fileChildRemove(file, fileList,buildingItem)"
|
||
:on-success="(response, file, fileList)=>funHandles.fileChildChange(response, file, fileList, buildingItem,'东')"
|
||
style="width:100%">
|
||
<!--<i class="el-icon-upload"></i>-->
|
||
<div class="el-upload__text"><em>上传东面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
|
||
<el-upload class="upload-demo" drag multiple
|
||
action="/gb/yjb/api/outsidewall/sysFileInfo/upload"
|
||
auto-upload
|
||
list-type="picture-card"
|
||
v-model:file-list="pageData.childFileList2"
|
||
:on-preview="(file)=> funHandles.filePreview(file,pageData.childFileList2)"
|
||
:on-remove="(file, fileList)=>funHandles.fileChildRemove(file, fileList,buildingItem)"
|
||
:on-success="(response, file, fileList)=>funHandles.fileChildChange(response, file, fileList, buildingItem,'西')"
|
||
style="width:100%">
|
||
<!--<i class="el-icon-upload"></i>-->
|
||
<div class="el-upload__text"><em>上传西面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
<el-upload class="upload-demo" drag multiple
|
||
action="/gb/yjb/api/outsidewall/sysFileInfo/upload"
|
||
auto-upload
|
||
list-type="picture-card"
|
||
v-model:file-list="pageData.childFileList3"
|
||
:on-preview="(file)=> funHandles.filePreview(file,pageData.childFileList3)"
|
||
:on-remove="(file, fileList)=>funHandles.fileChildRemove(file, fileList,buildingItem)"
|
||
:on-success="(response, file, fileList)=>funHandles.fileChildChange(response, file, fileList, buildingItem,'南')"
|
||
style="width:100%">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传南面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
<el-upload class="upload-demo" drag multiple
|
||
action="/gb/yjb/api/outsidewall/sysFileInfo/upload"
|
||
auto-upload
|
||
list-type="picture-card"
|
||
v-model:file-list="pageData.childFileList4"
|
||
:on-preview="(file)=>funHandles.filePreview(file,pageData.childFileList4)"
|
||
:on-remove="(file, fileList)=>funHandles.fileChildRemove(file, fileList,buildingItem)"
|
||
:on-success="(response, file, fileList)=>funHandles.fileChildChange(response, file, fileList, buildingItem,'北')"
|
||
style="width:100%">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text"><em>上传北面照片</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item prop="problemfanwei" label="8.8 发生外墙问题的范围有多大？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择外墙问题的范围' }]">
|
||
<el-radio-group v-model="buildingItem.problemfanwei">
|
||
<el-radio label="＜外墙面积的25%"></el-radio>
|
||
<el-radio label="外墙面积的25-50%"></el-radio>
|
||
<el-radio label="外墙面积的50-75%"></el-radio>
|
||
<el-radio label="外墙面积的75-100%"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item prop="problemheight" label="8.9 外墙问题发生在哪个高度？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择外墙问题发生的高度' }]">
|
||
<el-checkbox-group v-model="buildingItem.problemheight">
|
||
<el-checkbox label="底层（楼高1/3以下）"></el-checkbox>
|
||
<el-checkbox label="中层"></el-checkbox>
|
||
<el-checkbox label="高层（屋顶往下1/3）"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item prop="diaoluowu" label="8.10 掉落物是什么？" :rules="[{ required: true, trigger: ['change', 'blur'], message: '请选择掉落物' }]">
|
||
<el-checkbox-group v-model="buildingItem.diaoluowu">
|
||
<el-checkbox label="墙皮材料"></el-checkbox>
|
||
<el-checkbox label="保温材料"></el-checkbox>
|
||
<el-checkbox label="混凝土块"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="problemismodify" label="14.问题发生后是否请人修复了？" v-if="pageData?.form?.isExistProblem=='1'" :rules="[{ required: true, trigger: ['blur'], message: '请选择问题发生后是否请人修复' }]">
|
||
<el-radio-group v-model="pageData.form.problemismodify">
|
||
<el-radio label="1">是</el-radio>
|
||
<el-radio label="0">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="15.请提供修复单位的名称:" v-if="pageData.form?.problemismodify=='1'">
|
||
<el-input type="textarea" autosize placeholder="请提供修复单位的名称。" v-model="pageData.form.problemmodifyunitname">
|
||
rm
|
||
</el-form-item>
|
||
<el-form-item label="16.修复后的部位是否再次发生问题？" v-if="pageData.form?.problemismodify=='1'">
|
||
<el-radio-group v-model="pageData.form.problemmodifyisagain">
|
||
<el-radio label="1">有再发生</el-radio>
|
||
<el-radio label="0">没有</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
20.若您愿意接受我们的现场调查，请惠赐您的联系方式。谢谢！
|
||
<el-input type="textarea" autosize placeholder="" v-model="pageData.form.contract">
|
||
</el-form-item>
|
||
<!--@*<el-form-item label="手机号码：" prop="phone" :rules="[{ validator: checkPhone, required: true, trigger: 'blur' }]">
|
||
<el-input v-model="form.phone"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="验证码" prop="code" v-if="!isshowmyinfo" :rules="[{ validator: checkCode, required: true, trigger: 'blur' }]">
|
||
<el-input type="text" maxlength="4" placeholder="验证码" v-model="form.code">
|
||
<template slot="append">
|
||
<el-button :disabled="disabled" @click="getCode">{{ valiBtn }}</el-button>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>*@-->
|
||
<el-form-item v-if="!isshowmyinfo">
|
||
<el-button type="primary" @click.prevent="funHandles.onSubmit(formRef,childFormRef,pageData)"> 提 交 </el-button>
|
||
<!--<el-button @click.prevent="showinfo()">我的报名</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-image-viewer v-if="pageData.dialogImageUrl"
|
||
:zIndex="8000"
|
||
@close="() => { pageData.dialogImageUrl='' }"
|
||
:url-list="pageData.dialogImageUrls"
|
||
:initial-index="XEUtils.indexOf(pageData.dialogImageUrls, pageData.dialogImageUrl)"></el-image-viewer>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
const { createApp, onMounted, watch, computed, ref } = Vue
|
||
const { ElMessageBox, ElNotification, ElLoading } = ElementPlus;
|
||
|
||
const app = createApp({
|
||
setup() {
|
||
const formRef = ref();
|
||
const childFormRef = ref();
|
||
|
||
const pageData = ref({
|
||
form: {},
|
||
//communitys: [],
|
||
//buildings: [],
|
||
//buildingItemId: ''
|
||
});
|
||
|
||
const rulesCheckData = {
|
||
checkPhone: (rule, value, callback) => {
|
||
const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||
if (regMobile.test(value)) {
|
||
callback()
|
||
}
|
||
callback(new Error("请输入正确的手机号码"))
|
||
},
|
||
checkCode: (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("请输入验证码"))
|
||
} else if (!/^[0-9]+$/.test(value) || !/^\d{4}$/.test(value)) {
|
||
callback(new Error("请输入4位数字的验证码"))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
checkNumber: (rule, value, callback) => {
|
||
if (value === "") {
|
||
callback(new Error("不能为空"))
|
||
} else if (!/^[0-9]+$/.test(value)) {
|
||
callback(new Error("必需为数字"))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
checkCardNo: (rule, value, callback) => {
|
||
const regMobile = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||
if (regMobile.test(value)) {
|
||
callback()
|
||
}
|
||
callback(new Error("请输入正确的身份证号码"))
|
||
}
|
||
};
|
||
const staticData = { wallproblems: ['漏水', '开裂', '脱落', '空鼓', '其他问题'] };
|
||
const funHandles = {
|
||
init: async (data) => {
|
||
do {
|
||
data.key = await funHandles.verifyKey();
|
||
} while (!data.key);
|
||
|
||
data.communitys = await funHandles.getCommunitys();
|
||
},
|
||
verifyKey: async () => {
|
||
const key = await ElMessageBox.prompt('请输入授权码', {
|
||
title: '授权',
|
||
inputPlaceholder: '授权码',
|
||
draggable: true,
|
||
showClose: false,
|
||
showCancelButton: false,
|
||
closeOnClickModal: false,
|
||
closeOnPressEscape: false,
|
||
inputErrorMessage: '请输入授权码',
|
||
})
|
||
try {
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '处理中' });
|
||
const response = await axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: `/gb/yjb/api/outsidewall/VerifyKey?key=${key?.value ?? ''}`,
|
||
responseType: "json",
|
||
});
|
||
window.loadingInstance?.close();
|
||
if (response.data.data)
|
||
return key?.value;
|
||
else {
|
||
await ElMessageBox.alert("授权码错误,授权失败", '授权', { type: 'error' });
|
||
}
|
||
} catch (error) {
|
||
window.loadingInstance?.close();
|
||
console.log(error)
|
||
await ElMessageBox.alert(error.message, '异常', { type: 'error' });
|
||
window.location.reload();//刷新当前页面
|
||
}
|
||
},
|
||
getCommunitys: async (queryString) => {
|
||
try {
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '加载中' });
|
||
|
||
const response = await axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'get',
|
||
url: `/gb/yjb/api/outsidewall/Communitys?searchkey=${queryString ?? ''}`,
|
||
responseType: "json",
|
||
});
|
||
window.loadingInstance?.close();
|
||
return response.data.data;
|
||
} catch (error) {
|
||
window.loadingInstance?.close();
|
||
console.log(error)
|
||
ElMessageBox.alert(error.message, '异常', { type: 'error' });
|
||
}
|
||
},
|
||
onChangeSelectCommunity: async (v, data) => {
|
||
//debugger;
|
||
if (v) {
|
||
const { name, id } = JSON.parse(v)
|
||
try {
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '加载中' });
|
||
|
||
const response = (window.cacheCommunitysData && window.cacheCommunitysData[id]) ?? await axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'get',
|
||
url: '/gb/yjb/api/outsidewall/Community/' + id,
|
||
responseType: "json",
|
||
});
|
||
window.loadingInstance?.close();
|
||
|
||
if (!window.cacheCommunitysData) window.cacheCommunitysData = [];
|
||
if (!window.cacheCommunitysData[id]) window.cacheCommunitysData[id] = response;
|
||
|
||
data.buildings = response.data.data;
|
||
if (!data.form) data.form = {};
|
||
data.form.communityId = id;
|
||
data.form.communityName = name;
|
||
data.form.buildings = response.data.data?.map(x => (
|
||
{
|
||
id: x.id,
|
||
address: x.address,
|
||
buildingName: x.buildingName,
|
||
levelCount: x.levelCount,
|
||
houseHolds: x.houseHolds,
|
||
buildingUnit: x.buildingUnit,
|
||
desingerUnit: x.desingerUnit,
|
||
constructionUnit: x.constructionUnit,
|
||
monitorUnit: x.monitorUnit,
|
||
wuYeUnit: x.wuYeUnit,
|
||
}
|
||
)) ?? [];
|
||
data.form.buildcount = data.buildings.length;//楼栋数
|
||
data.form.householdcount = data.buildings.reduce((a, key) => { return a + key.houseHolds }, 0);//住户总数
|
||
data.form.totalfloorage = data.buildings.reduce((a, key) => { return a + key.areaCount }, 0);//总建筑面积
|
||
} catch (error) {
|
||
window.loadingInstance?.close();
|
||
console.log(error)
|
||
ElMessageBox.alert(error.message, '异常', { type: 'error' });
|
||
}
|
||
} else {
|
||
data.buildings = [];
|
||
data.form = {}
|
||
}
|
||
},
|
||
onSubmit: (formEl, childFormEl, data) => {
|
||
console.log('submit!');
|
||
formEl.validate(async (valid) => {
|
||
if (valid) {
|
||
let isAllChildValid = false;
|
||
if (data?.form?.isExistProblem == '0') { isAllChildValid = true; }
|
||
else {
|
||
const fromMerges = childFormEl.map((x, ii) => ({ formEl: x, building: data.form.buildings[ii] }));
|
||
|
||
const validateFroms = [].concat(fromMerges.filter(x => x.building.id == data.buildingItemId), fromMerges.filter(x => x.building.curwallproblems?.length > 0));
|
||
|
||
if (validateFroms.length > 0) {
|
||
for (let ii = 0; ii < validateFroms.length; ii++) {
|
||
const isValid = await validateFroms[ii].formEl.validate(valid => {
|
||
if (!valid) {
|
||
data.buildingItemId = validateFroms[ii].building.id;
|
||
}
|
||
});
|
||
if (!isValid) {
|
||
ElMessageBox.alert('幢信息问卷未填写完整', '提示', { type: 'warning' });
|
||
return;
|
||
}
|
||
}
|
||
isAllChildValid = true;
|
||
}
|
||
else {
|
||
ElMessageBox.alert('存在问题请展开幢信息进行问卷填写', '提示', { type: 'warning' });
|
||
}
|
||
}
|
||
|
||
if (isAllChildValid) {
|
||
ElMessageBox.confirm('确定提交吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '提交中...请稍候' });
|
||
try {
|
||
const response = await axios({
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
method: 'post',
|
||
url: `/gb/yjb/api/outsidewall/submit?key=${data.key ?? ''}`,
|
||
data: data.form,
|
||
responseType: "json",
|
||
});
|
||
window.loadingInstance?.close();
|
||
|
||
//debugger;
|
||
if (response.data?.success == true) {
|
||
await ElMessageBox.alert('提交成功', '成功', { type: 'success' });
|
||
window.location.reload();//刷新当前页面
|
||
} else {
|
||
ElMessageBox.alert(response.data.message, '异常', { type: 'error' });
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
window.loadingInstance?.close();
|
||
ElMessageBox.alert(error.message, '异常', { type: 'error' });
|
||
}
|
||
}).catch(() => { });
|
||
}
|
||
}
|
||
else {
|
||
ElMessageBox.alert("社区信息问卷未填写完整", '提示', { type: 'warning' });
|
||
}
|
||
});
|
||
},
|
||
fileChange: (response, file, fileList) => {
|
||
if (response.success == false) {
|
||
ElMessageBox.alert('上传失败,请稍候重试', '异常', { type: 'error' });
|
||
return;
|
||
}
|
||
if (file.response) {
|
||
if (!pageData.value.form.fileList) pageData.value.form.fileList = [];
|
||
pageData.value.form.fileList.push(file.response.data);
|
||
}
|
||
},
|
||
fileRemove: async (file, fileList) => {
|
||
console.log(file, fileList);
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '处理中' });
|
||
try {
|
||
const response = await axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'get',
|
||
url: '/gb/yjb/api/outsidewall/sysFileInfo/delete/' + file.response.data,
|
||
responseType: "json",
|
||
});
|
||
|
||
if (file.response && pageData.value.form.fileList) {
|
||
pageData.value.form.fileList = pageData.value.form.fileList.filter((a) => { return a != file.response.data });
|
||
}
|
||
//}
|
||
|
||
window.loadingInstance?.close();
|
||
} catch (error) {
|
||
console.log(error)
|
||
window.loadingInstance?.close();
|
||
}
|
||
},
|
||
fileChildChange: (response, file, fileList, scope, toward) => {
|
||
if (response.success == false) {
|
||
ElMessageBox.alert('上传失败,请稍候重试', '异常', { type: 'error' });
|
||
return;
|
||
}
|
||
|
||
if (file.response) {
|
||
var _pf = {
|
||
file: file.response.data,
|
||
toward: toward
|
||
}
|
||
if (!scope.problemfiles) scope.problemfiles = [];
|
||
scope.problemfiles.push(_pf)
|
||
}
|
||
},
|
||
fileChildRemove: async (file, fileList, scope) => {
|
||
console.log(file, fileList);
|
||
window.loadingInstance = ElLoading.service({ lock: true, text: '处理中' });
|
||
try {
|
||
const response = await axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'get',
|
||
url: '/gb/yjb/api/outsidewall/sysFileInfo/delete/' + file.response.data,
|
||
responseType: "json",
|
||
});
|
||
|
||
if (file.response && scope.problemfiles) {
|
||
scope.problemfiles = scope.problemfiles.filter((a) => { return a.file != file.response.data });
|
||
}
|
||
|
||
window.loadingInstance?.close();
|
||
} catch (error) {
|
||
console.log(error)
|
||
window.loadingInstance?.close();
|
||
}
|
||
},
|
||
filePreview: (file, fileList) => {
|
||
pageData.value.dialogImageUrl = window.location.protocol + "//" + window.location.host + "/gb/yjb/api/outsidewall/sysFileInfo/preview/" + file.response.data;
|
||
pageData.value.dialogImageUrls = fileList.map(a => window.location.protocol + "//" + window.location.host + "/gb/yjb/api/outsidewall/sysFileInfo/preview/" + a.response.data);
|
||
},
|
||
}
|
||
|
||
|
||
onMounted(async () => {
|
||
await funHandles.init(pageData.value);
|
||
});
|
||
|
||
return {
|
||
XEUtils,
|
||
formRef,
|
||
childFormRef,
|
||
rulesCheckData,
|
||
pageData,
|
||
staticData,
|
||
funHandles
|
||
}
|
||
}
|
||
});
|
||
|
||
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
|
||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||
app.component(key, component)
|
||
}
|
||
app.mount("#app");
|
||
</script>
|
||
<style>
|
||
.upload-demo .el-upload-dragger {
|
||
height: 100%;
|
||
border-width: 0;
|
||
padding: 20px var(--el-upload-dragger-padding-vertical);
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |