You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
640 lines
18 KiB
640 lines
18 KiB
<template>
|
|
<view class="page-content sfReport">
|
|
<view class="bg-box">
|
|
<view class="bg-text">
|
|
<view>填写信息</view>
|
|
<view>请您填写相关问题</view>
|
|
</view>
|
|
<image class="bg-img" src="/static/img/bsorbxBac.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info-card">
|
|
<view class="meter-row">
|
|
<view class="meter-label">
|
|
<view style="color: #f93838;margin-right: 4rpx;font-size: 24rpx;">*</view>
|
|
<text>乐业社区</text>
|
|
</view>
|
|
<view class="picker-label">
|
|
<picker mode="selector" :range="deptNames" @change="onPickerChange($event,'乐业社区')">
|
|
<view :style="{'color':!form.apartmentName?'#cbcbcb':''}">{{form.apartmentName || pickerPlaceholder}}</view>
|
|
</picker>
|
|
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="meter-row">
|
|
<view class="meter-label">
|
|
<view style="color: #f93838;margin-right: 4rpx;font-size: 24rpx;">*</view>
|
|
<text>房屋</text>
|
|
</view>
|
|
<view class="picker-label">
|
|
<view class="uni-list-cell-db" v-if="multiArray[0].length">
|
|
<picker
|
|
mode="multiSelector"
|
|
@columnchange="bindMultiPickerColumnChange"
|
|
:value="multiIndex"
|
|
:range="multiArray"
|
|
>
|
|
<view class="uni-input">{{
|
|
multiIndex[0] === -1
|
|
? "请选择"
|
|
: multiArray[0][multiIndex[0]] +
|
|
multiArray[1][multiIndex[1]] +
|
|
multiArray[2][multiIndex[2]]
|
|
}}</view>
|
|
</picker>
|
|
</view>
|
|
<view v-else @click="handleShowToast" style="color:#cbcbcb">请选择社区</view>
|
|
<image class="arrow-r" src="/static/img/arrow-right.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="house-view" scroll-y="true">
|
|
<view class="section-card" v-for="(item,index) in form.waterMeters" :key="item.id">
|
|
<view class="meter-row">
|
|
<text class="meter-label">水表号</text>
|
|
<u-input
|
|
v-model="item.meterNumber"
|
|
type="digit"
|
|
placeholder="请输入水表号"
|
|
border="none"
|
|
:disabled="!!item.meterNumber"
|
|
:custom-style="item.meterNumber ? 'background:#fff;color:#bbb;' : ''"
|
|
/>
|
|
</view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">上次表数</text>
|
|
<u-input
|
|
v-model="item.lastMeterReading"
|
|
type="digit"
|
|
placeholder="请输入上次表数"
|
|
border="none"
|
|
:disabled="!!item.lastMeterReading"
|
|
:custom-style="item.lastMeterReading ? 'background:#fff;color:#bbb;' : ''"
|
|
/>
|
|
</view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">本次表数</text>
|
|
<u-input
|
|
v-model="item.thisMeterReading"
|
|
type="digit"
|
|
placeholder="请输入本次表数"
|
|
border="none"
|
|
/>
|
|
</view>
|
|
<view class="imeter-row">
|
|
<text class="meter-label">上传图片/视频</text>
|
|
<u-upload
|
|
:max-count="10"
|
|
:multiple="true"
|
|
:preview-full-image="true"
|
|
:deletable="true"
|
|
:show-upload-list="true"
|
|
:fileList="item.fileList || []"
|
|
:auto-upload="false"
|
|
accept="all"
|
|
:maxSize="10 * 1024 * 1024"
|
|
@oversize="oversize"
|
|
@delete="(e) => onDelete(e, index)"
|
|
>
|
|
<view
|
|
class="custom-upload-btn"
|
|
@click.stop="() => chooseMedia(index)"
|
|
>
|
|
<view class="icon-box">
|
|
<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="upload-tips">点击上传</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 提交按钮 -->
|
|
<view class="btn" @click="onSubmit">提交</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {
|
|
queryDeptDropdownList,
|
|
} from "@/common/rec";
|
|
import { getdeptList } from '@/common/api';
|
|
import {
|
|
uploadImage,
|
|
queryLastMeterReading,
|
|
submitWaterAndElectricity
|
|
} from '@/pages/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerPlaceholder: '请选择', // 初始显示的文字
|
|
waterMeter: 3245.1,
|
|
electricMeter: 2672.6,
|
|
remark: '',
|
|
fileList: [],
|
|
deptNames: [],
|
|
deptOptions: [],
|
|
|
|
buildingOptions: [],
|
|
unitOptions: [],
|
|
houseOptions: [],
|
|
multiArray: [[], [], []],
|
|
multiIndex: [-1, -1, -1],
|
|
form:{
|
|
apartmentId: '',
|
|
apartmentName:'',
|
|
buildingId: '',
|
|
unitId: '',
|
|
houseId: '',
|
|
roomId: '',
|
|
waterMeters: [],
|
|
remark: ''
|
|
},
|
|
}
|
|
},
|
|
watch: {
|
|
"form.apartmentId": {
|
|
handler(newVal, oldVal) {
|
|
console.log("newVal", newVal);
|
|
this.form.buildingId = null;
|
|
this.form.unitId = null;
|
|
this.form.houseId = null;
|
|
this.buildingOptions = [];
|
|
this.unitOptions = [];
|
|
this.houseOptions = [];
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
onLoad () {
|
|
this.getTree()
|
|
},
|
|
methods: {
|
|
getTree(){
|
|
getdeptList().then(async (res) => {
|
|
this.deptOptions = this.handleTree(
|
|
res.data,
|
|
"deptId",
|
|
"parentId",
|
|
"children",
|
|
2
|
|
);
|
|
// const deptInfo = this.deptOptions[0].children.filter(
|
|
// (item) => item.deptName == "城阳区"
|
|
// )[0];
|
|
const newArr = this.deptOptions.map((item) => ({
|
|
name: item.deptName,
|
|
}));
|
|
// this.deptOptions = newArr
|
|
// this.deptOptions = await this.getListByParentId("1", deptInfo.deptId);
|
|
// const array = JSON.parse(JSON.stringify(this.deptOptions));
|
|
this.deptNames = newArr.map((item) => item.name);
|
|
});
|
|
},
|
|
// 三级联动通用接口
|
|
async getListByParentId(type, id) {
|
|
return new Promise((resolve, reject) => {
|
|
queryDeptDropdownList({ type, id }).then((res) => {
|
|
resolve(res.data);
|
|
});
|
|
});
|
|
},
|
|
async onPickerChange(e, type) {
|
|
if (type == "乐业社区") {
|
|
console.log("e", e);
|
|
|
|
const apartmentInfo = this.deptOptions[e.detail.value];
|
|
console.log("社区信息", apartmentInfo);
|
|
console.log("社区信息11", this.deptOptions);
|
|
|
|
this.form.apartmentName = apartmentInfo.deptName;
|
|
this.form.apartmentId = apartmentInfo.deptId;
|
|
// 楼
|
|
const buildingArray = await this.getListByParentId(
|
|
"2",
|
|
apartmentInfo.deptId
|
|
);
|
|
this.buildingOptions = buildingArray;
|
|
console.log("楼信息", buildingArray);
|
|
const buildingNames = buildingArray.map((item) => item.name);
|
|
console.log("buildingNames:", buildingNames);
|
|
|
|
this.form.buildingId = buildingArray[0].id;
|
|
// 单元
|
|
const unitArray = await this.getListByParentId(
|
|
"3",
|
|
buildingArray[0].id
|
|
);
|
|
this.unitOptions = unitArray;
|
|
console.log("unitArray:", unitArray);
|
|
|
|
const unitNames = unitArray.map((item) => item.name);
|
|
this.form.unitId = unitArray[0].id;
|
|
// 户
|
|
const houseArray = await this.getListByParentId("4", unitArray[0].id);
|
|
this.houseOptions = houseArray;
|
|
const houseNames = houseArray.map((item) => item.name);
|
|
this.form.houseId = houseArray[0].id;
|
|
this.form.roomId = houseArray[0].roomId;
|
|
let house = houseArray[0];
|
|
// for (let index = 0; index < house.type; index++) {
|
|
// this.form.waterMeters.push({
|
|
// meterNumber: "",
|
|
// lastMeterReading: "",
|
|
// thisMeterReading: "",
|
|
// imageList: [],
|
|
// fileList: [],
|
|
// });
|
|
// }
|
|
this.multiArray = [buildingNames, unitNames, houseNames];
|
|
}
|
|
},
|
|
handleShowToast(){
|
|
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
|
|
},
|
|
async bindMultiPickerColumnChange (e) {
|
|
if(!this.multiArray[0].length) return
|
|
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
|
|
this.multiIndex[e.detail.column] = e.detail.value
|
|
switch (e.detail.column) {
|
|
case 0: {
|
|
const unitArray = await this.getListByParentId("3", this.buildingOptions[e.detail.value].id);
|
|
this.unitOptions = unitArray
|
|
const unitNames = unitArray.map(item=> item.name)
|
|
this.form.unitId = unitArray[0].id
|
|
|
|
const houseArray = await this.getListByParentId("4", unitArray[0].id);
|
|
this.houseOptions = houseArray
|
|
const houseNames = houseArray.map(item=> item.name)
|
|
this.form.houseId = houseArray[0].id
|
|
this.form.roomId = houseArray[0].roomId
|
|
|
|
this.multiArray[1] = unitNames
|
|
this.multiArray[2] = houseNames
|
|
|
|
}//拖动第1列
|
|
this.multiIndex.splice(1, 1, 0)
|
|
this.multiIndex.splice(2, 1, 0)
|
|
break
|
|
case 1:{
|
|
const houseArray = await this.getListByParentId("4", this.unitOptions[e.detail.value].id);
|
|
this.houseOptions = houseArray
|
|
const houseNames = houseArray.map(item=> item.name)
|
|
this.form.houseId = houseArray[0].id
|
|
this.form.roomId = houseArray[0].roomId
|
|
|
|
this.multiArray[2] = houseNames
|
|
} //拖动第2列
|
|
this.multiIndex.splice(2, 1, 0)
|
|
break
|
|
case 2:{
|
|
this.form.houseId = this.houseOptions[e.detail.value].id
|
|
this.form.roomId = this.houseOptions[e.detail.value].roomId
|
|
console.log(this.houseOptions[e.detail.value]);
|
|
}
|
|
}
|
|
this.getLastMeter()
|
|
this.$forceUpdate()
|
|
},
|
|
//图片超过大小时取消上传
|
|
oversize(e) {
|
|
this.$u.toast("请传10MB以内大小的图片/视频！");
|
|
return false;
|
|
},
|
|
chooseMedia(index) {
|
|
if (!this.form.waterMeters[index].fileList) {
|
|
this.$set(this.form.waterMeters[index], "fileList", []);
|
|
}
|
|
uni.chooseMedia({
|
|
count: 10 - this.form.waterMeters[index].fileList.length,
|
|
mediaType: ["image", "video"],
|
|
sourceType: ["album", "camera"],
|
|
maxDuration: 60,
|
|
camera: "back",
|
|
success: async (res) => {
|
|
uni.showLoading({ title: "上传中...", mask: true });
|
|
try {
|
|
const files = res.tempFiles;
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
const filePath = file.tempFilePath;
|
|
const type =
|
|
file.fileType ||
|
|
(filePath.match(/\.(mp4|mov|avi|wmv|flv|mkv)$/i)
|
|
? "video"
|
|
: "image");
|
|
// 上传
|
|
const uploadRes = await uploadImage(filePath);
|
|
this.form.waterMeters[index].fileList.push({
|
|
url: uploadRes.data?.url || uploadRes.url || uploadRes.path,
|
|
name: uploadRes.data?.name || uploadRes.name || "",
|
|
type: type,
|
|
status: "success",
|
|
});
|
|
}
|
|
// 更新 imageList
|
|
this.form.waterMeters[index].imageList = this.form.waterMeters[index].fileList.map((v) => v.url);
|
|
} catch (e) {
|
|
uni.showToast({ title: "上传失败", icon: "none" });
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
fail: () => {
|
|
uni.hideLoading();
|
|
},
|
|
});
|
|
},
|
|
// 获取上次抄表
|
|
async getLastMeter() {
|
|
const params = {
|
|
houseId: this.form.houseId,
|
|
roomId: this.form.roomId,
|
|
meterType: 1, // 1是水表，2是电表
|
|
meterNumber: "",
|
|
};
|
|
const res = await queryLastMeterReading(params);
|
|
if (Array.isArray(res.data) && res.data.length > 0) {
|
|
this.form.waterMeters = res.data.map((item, idx) => ({
|
|
lastMeterReading: item.thisMeterReading,
|
|
meterNumber: item.meterNumber,
|
|
thisMeterReading: "",
|
|
fileList: [],
|
|
}));
|
|
} else {
|
|
// res.data 为空时，显示一个空表单
|
|
this.form.waterMeters = [
|
|
{
|
|
lastMeterReading: "",
|
|
meterNumber: "",
|
|
thisMeterReading: "",
|
|
fileList: [],
|
|
},
|
|
];
|
|
}
|
|
},
|
|
onDelete(event, index) {
|
|
if (
|
|
this.form.waterMeters[index] &&
|
|
Array.isArray(this.form.waterMeters[index].fileList)
|
|
) {
|
|
this.form.waterMeters[index].fileList.splice(event.index, 1);
|
|
// 更新 imageList
|
|
this.form.waterMeters[index].imageList = this.form.waterMeters[index].fileList.map((v) => v.url);
|
|
}
|
|
},
|
|
onSubmit() {
|
|
let {buildingId, unitId, houseId} = this.form
|
|
if(!this.form.apartmentName){
|
|
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
|
|
return
|
|
} else if(!buildingId && !unitId && !houseId){
|
|
uni.showToast({ title: '请选择房屋', icon: 'none' });
|
|
return
|
|
}
|
|
this.submitAdd();
|
|
console.log('onSubmit',this.form);
|
|
},
|
|
async submitAdd() {
|
|
let params = [];
|
|
this.form.waterMeters.forEach((item) => {
|
|
params.push({
|
|
meterNumber: item.meterNumber,
|
|
meterType: 1, // 1是水表，2是电表
|
|
houseId: this.form.houseId,
|
|
roomId: this.form.roomId,
|
|
lastMeterReading: item.lastMeterReading,
|
|
thisMeterReading: item.thisMeterReading,
|
|
images: item.fileList,
|
|
remark: this.form.remark,
|
|
});
|
|
});
|
|
console.log(params, "params");
|
|
|
|
const res = await submitWaterAndElectricity(params);
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
icon: "success",
|
|
title: "提交成功!",
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: "/pages/tabBar/work/index",
|
|
success: () => {
|
|
this.fileList = [];
|
|
},
|
|
});
|
|
}, 1500);
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || "提交失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
console.log(res, "reeees");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-content{
|
|
background: #f7f7f7;
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.bg-box {
|
|
width: 100vw;
|
|
height: 280rpx;
|
|
object-fit: cover;
|
|
display: block;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
.bg-img{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bg-text{
|
|
margin: 50rpx 0 0 28rpx;
|
|
z-index: 1;
|
|
font-size: 44rpx;
|
|
color:#101010;
|
|
font-weight: bold;
|
|
}
|
|
.bg-text view:nth-child(2){
|
|
font-size: 28rpx;
|
|
color:#666666;
|
|
margin-top: 10rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.info-card {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: -100rpx 24rpx 16rpx 24rpx;
|
|
padding: 24rpx 24rpx 12rpx 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.house-view{
|
|
height: calc(100vh - 600rpx);
|
|
}
|
|
.room-title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.info-row {
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.label {
|
|
color: #888;
|
|
margin-right: 24rpx;
|
|
}
|
|
.section-card {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 0 24rpx 16rpx 24rpx;
|
|
padding: 24rpx;
|
|
z-index: 2;
|
|
}
|
|
.section-title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.device-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24rpx;
|
|
min-height: 64rpx;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
.device-label {
|
|
width: 160rpx;
|
|
color: #222;
|
|
font-size: 28rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
.meter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
/* padding-bottom: 14rpx; */
|
|
padding: 16rpx 0 26rpx;
|
|
border-bottom: 2rpx solid #bbbbbb43;
|
|
}
|
|
.meter-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 140rpx;
|
|
color: #68758b;
|
|
font-size: 28rpx;
|
|
}
|
|
.picker-label{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.arrow-r{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
.u-input .u-input__content uni-input {
|
|
text-align: right !important;
|
|
}
|
|
.u-radio {
|
|
margin-right: 36rpx;
|
|
}
|
|
.meter-value {
|
|
color: #222;
|
|
font-size: 28rpx;
|
|
}
|
|
.custom-upload-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #fafafa;
|
|
border: 2rpx solid #f0f0f0;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 20rpx 16rpx 0 0;
|
|
}
|
|
.icon-box{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background: #ceeced;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.camera-icon{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
.upload-tips {
|
|
color: #bbb;
|
|
font-size: 24rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
.u-upload__wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
.u-upload__preview {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.submit-btn-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 40rpx 0 0 0;
|
|
}
|
|
|
|
.btn {
|
|
width: 414rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
border-radius: 600rpx;
|
|
background: linear-gradient(
|
|
86.25deg,
|
|
rgba(13, 198, 198, 1) 3.03%,
|
|
rgba(19, 194, 194, 1) 3.03%,
|
|
rgba(70, 219, 213, 1) 96.43%
|
|
);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 34rpx;
|
|
text-align: center;
|
|
margin: auto;
|
|
margin-top: 40rpx;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.sfReport .u-input__content__field-wrapper__field{
|
|
text-align: right !important;
|
|
}
|
|
</style>
|
|
|