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.
479 lines
13 KiB
479 lines
13 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">{{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>
|
|
<!-- <text>20072620</text> -->
|
|
<u-input v-model="item.waterMeter" type="digit" placeholder="请输入水表号" border="none" />
|
|
</view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">上次表数</text>
|
|
<u-input v-model="item.waterMeter" type="digit" :placeholder="`3823.1`" border="none" />
|
|
</view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">本次表数</text>
|
|
<u-input v-model="item.waterMeter" type="digit" placeholder="请输入本次表数" border="none" />
|
|
</view>
|
|
<view class="imeter-row">
|
|
<text class="meter-label">上传图片</text>
|
|
<u-upload
|
|
v-model="item.fileList"
|
|
:max-count="10"
|
|
:multiple="true"
|
|
:preview-full-image="true"
|
|
:deletable="true"
|
|
:show-upload-list="true"
|
|
:fileList="item.fileList"
|
|
accept="all"
|
|
@afterRead="afterRead($event,index)"
|
|
@delete="onDelete($event,index)"
|
|
>
|
|
<view class="custom-upload-btn">
|
|
<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 } from '@/pages/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerPlaceholder: '请选择', // 初始显示的文字
|
|
waterMeter: 3245.1,
|
|
electricMeter: 2672.6,
|
|
remark: '',
|
|
fileList: [],
|
|
deptNames: [],
|
|
deptOptions: [],
|
|
|
|
buildingOptions: [],
|
|
unitOptions: [],
|
|
houseOptions: [],
|
|
multiArray: [[],[],[]],
|
|
multiIndex: [0, 0, 0],
|
|
form:{
|
|
apartmentId: '',
|
|
apartmentName:'',
|
|
buildingId: '',
|
|
unitId: '',
|
|
houseId: '',
|
|
waterMeters: []
|
|
},
|
|
}
|
|
},
|
|
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]
|
|
this.deptOptions = await this.getListByParentId('1', deptInfo.deptId);
|
|
const array = JSON.parse(JSON.stringify(this.deptOptions))
|
|
this.deptNames = array.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 == '乐业社区'){
|
|
const apartmentInfo = this.deptOptions[e.detail.value]
|
|
this.form.apartmentName = apartmentInfo.name
|
|
this.form.apartmentId = apartmentInfo.id
|
|
// 楼
|
|
const buildingArray = await this.getListByParentId("2", apartmentInfo.id);
|
|
this.buildingOptions = buildingArray
|
|
const buildingNames = buildingArray.map(item=> item.name)
|
|
this.form.buildingId = buildingArray[0].id
|
|
// 单元
|
|
const unitArray = await this.getListByParentId("3", buildingArray[0].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
|
|
let house = houseArray[0]
|
|
for (let index = 0; index < house.type; index++) {
|
|
this.form.waterMeters.push({
|
|
waterMeter: '',
|
|
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.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.multiArray[2] = houseNames
|
|
} //拖动第2列
|
|
this.multiIndex.splice(2, 1, 0)
|
|
break
|
|
case 2:{
|
|
this.form.houseId = this.houseOptions[e.detail.value].id
|
|
console.log(this.houseOptions[e.detail.value]);
|
|
}
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
async afterRead(event,index) {
|
|
let lists = [].concat(event.file);
|
|
let fileListLen = this.form.waterMeters[index][`fileList${event.name}`].length;
|
|
lists.map((item) => {
|
|
this.form.waterMeters[index][`fileList${event.name}`].push({
|
|
...item,
|
|
status: "uploading",
|
|
message: "上传中",
|
|
});
|
|
});
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await uploadImage(lists[i].url);
|
|
let item = this.form.waterMeters[index][`fileList${event.name}`][fileListLen];
|
|
|
|
this.form.waterMeters[index][`fileList${event.name}`].splice(
|
|
fileListLen,
|
|
1,
|
|
Object.assign(item, {
|
|
status: "success",
|
|
message: "",
|
|
url: result.url,
|
|
})
|
|
);
|
|
fileListLen++;
|
|
}
|
|
var arry = [];
|
|
this.form.waterMeters[index].fileList.filter((v, i) => {
|
|
arry.push(v.url);
|
|
});
|
|
this.form.waterMeters[index].imageList = arry
|
|
},
|
|
onDelete(event,index) {
|
|
this.form.waterMeters[index].fileList.splice(event.index, 1)
|
|
this.form.waterMeters[index].imageList.splice(event.index, 1)
|
|
},
|
|
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
|
|
}
|
|
console.log('onSubmit',this.form);
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|