elink-star
/
epmet-apartment-work-mp
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

水电上报表单修改

wyx
fp 1 month ago
parent
77472ffc32
commit
563f5c6585
4 changed files with 486 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      pages/tabBar/sdPage/dfReport.vue
  2. 222
      pages/tabBar/sdPage/sfReport.vue
  3. 7
      pages/tabBar/xjPage/xj.vue
  4. 6
      pages/tabBar/xjPage/xjRecord.vue

228
pages/tabBar/sdPage/dfReport.vue
View File

@ -1,15 +1,12 @@
<template>
<view class="page-content dfReport">
<!-- 房间图片 -->
<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">
@ -17,8 +14,8 @@
<text>乐业社区</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
<view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
<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>
@ -29,40 +26,44 @@
<text>房屋</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
<view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
<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>
<view class="section-card">
<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="form.waterMeter" type="digit" placeholder="请输入水表号" border="none" />
<!-- <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="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none" />
<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="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none" />
<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="fileList"
v-model="item.fileList"
:max-count="10"
:multiple="true"
:preview-full-image="true"
:deletable="true"
:show-upload-list="true"
:file-list="fileList"
:file-list="item.fileList"
accept="image"
@after-read="afterRead"
@delete="onDelete"
@after-read="afterRead($event,index)"
@delete="onDelete($event,index)"
>
<view class="custom-upload-btn">
<view class="icon-box">
@ -72,50 +73,205 @@
</view>
</u-upload>
</view>
</view>
</scroll-view>
<!-- 提交按钮 -->
<view class="u-button--primary">提交</view>
<view class="u-button--primary" @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 {
items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
pickerPlaceholder: '请选择', // 初始显示的文字
waterMeter: 3245.1,
electricMeter: 2672.6,
remark: '',
fileList: [],
deptNames: [],
deptOptions: [],
buildingOptions: [],
unitOptions: [],
houseOptions: [],
currentHouse: {},
multiArray: [[],[],[]],
multiIndex: [0, 0, 0],
form:{
pickerValue: '',
pickerValue2: '',
waterMeter: ''
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: {
onPickerChange(e,type){
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 == '乐业社区'){
this.form.pickerValue = this.items[e.detail.value]
} else if(type == '房屋'){
this.form.pickerValue2 = this.items[e.detail.value]
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]
}
},
afterRead(event) {
let files = Array.isArray(event) ? event : [event]
this.fileList = this.fileList.concat(files)
handleShowToast(){
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
},
onDelete(event) {
this.fileList.splice(event.index, 1)
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.currentHouse = this.houseOptions[e.detail.value]
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() {
if(!this.form.pickerValue){
let {buildingId, unitId, houseId} = this.form
if(!this.form.apartmentName){
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
return
} else if(!this.form.pickerValue2){
} else if(!buildingId && !unitId && !houseId){
uni.showToast({ title: '请选择房屋', icon: 'none' });
return
}
@ -132,14 +288,12 @@ export default {
padding-bottom: 40rpx;
}
.bg-box {
/* padding-top: 40rpx; */
width: 100vw;
height: 280rpx;
object-fit: cover;
display: block;
position: relative;
display: flex;
/* align-items: center; */
}
.bg-img{
position: absolute;
@ -171,6 +325,9 @@ export default {
position: relative;
z-index: 2;
}
.house-view{
height: calc(100vh - 600rpx);
}
.room-title {
font-weight: bold;
font-size: 32rpx;
@ -292,6 +449,7 @@ display: flex;
.submit-btn-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 40rpx 0 0 0;
}

222
pages/tabBar/sdPage/sfReport.vue
View File

@ -1,15 +1,12 @@
<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">
@ -17,8 +14,8 @@
<text>乐业社区</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'乐业社区')">
<view :style="{'color':!form.pickerValue?'#cbcbcb':''}">{{form.pickerValue || pickerPlaceholder}}</view>
<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>
@ -29,41 +26,44 @@
<text>房屋</text>
</view>
<view class="picker-label">
<picker mode="selector" :range="items" @change="onPickerChange($event,'房屋')">
<view :style="{'color':!form.pickerValue2?'#cbcbcb':''}">{{form.pickerValue2 || pickerPlaceholder}}</view>
<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>
<view class="section-card">
<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="form.waterMeter" type="digit" placeholder="请输入水表号" border="none" />
<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="form.waterMeter" type="digit" :placeholder="`3823.1`" border="none" />
<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="form.waterMeter" type="digit" placeholder="请输入本次表数" border="none" />
<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="fileList"
v-model="item.fileList"
:max-count="10"
:multiple="true"
:preview-full-image="true"
:deletable="true"
:show-upload-list="true"
:file-list="fileList"
:file-list="item.fileList"
accept="image"
@after-read="afterRead"
@delete="onDelete"
@after-read="afterRead($event,index)"
@delete="onDelete($event,index)"
>
<view class="custom-upload-btn">
<view class="icon-box">
@ -73,50 +73,205 @@
</view>
</u-upload>
</view>
</view>
</scroll-view>
<!-- 提交按钮 -->
<view class="u-button--primary" @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 {
items: ['选项1', '选项2', '选项3'], // 下拉列表的选项
pickerPlaceholder: '请选择', // 初始显示的文字
waterMeter: 3245.1,
electricMeter: 2672.6,
remark: '',
fileList: [],
deptNames: [],
deptOptions: [],
buildingOptions: [],
unitOptions: [],
houseOptions: [],
currentHouse: {},
multiArray: [[],[],[]],
multiIndex: [0, 0, 0],
form:{
pickerValue: '',
pickerValue2: '',
waterMeter: ''
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: {
onPickerChange(e,type){
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 == '乐业社区'){
this.form.pickerValue = this.items[e.detail.value]
} else if(type == '房屋'){
this.form.pickerValue2 = this.items[e.detail.value]
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.currentHouse = this.houseOptions[e.detail.value]
console.log(this.houseOptions[e.detail.value]);
}
}
this.$forceUpdate()
},
afterRead(event) {
let files = Array.isArray(event) ? event : [event]
this.fileList = this.fileList.concat(files)
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) {
this.fileList.splice(event.index, 1)
onDelete(event,index) {
this.form.waterMeters[index].fileList.splice(event.index, 1)
this.form.waterMeters[index].imageList.splice(event.index, 1)
},
onSubmit() {
if(!this.form.pickerValue){
let {buildingId, unitId, houseId} = this.form
if(!this.form.apartmentName){
uni.showToast({ title: '请选择乐业社区', icon: 'none' });
return
} else if(!this.form.pickerValue2){
} else if(!buildingId && !unitId && !houseId){
uni.showToast({ title: '请选择房屋', icon: 'none' });
return
}
@ -170,6 +325,9 @@ export default {
position: relative;
z-index: 2;
}
.house-view{
height: calc(100vh - 600rpx);
}
.room-title {
font-weight: bold;
font-size: 32rpx;

7
pages/tabBar/xjPage/xj.vue
View File

@ -77,11 +77,10 @@ import {
import { getdeptList,addInspection } from '@/common/api';
import { uploadImage } from '@/pages/api';
import { getDicts } from "@/common/system/dict/data";
import { baseUrl } from "@/utils/config";
export default {
data () {
return {
uploadUlr: baseUrl + '/common/upload',
wtlxShow: false,
lysqShow: false,
deptOptions: [],
@ -177,8 +176,8 @@ export default {
"children",
2
);
this.form.apartmentId = this.deptOptions[0].children.filter(item=>item.deptName == '城阳区')[0].deptId
this.deptOptions = await this.getListByParentId("1", this.form.apartmentId);
const deptInfo = this.deptOptions[0].children[0]
this.deptOptions = await this.getListByParentId("1", deptInfo.deptId);
console.log(this.deptOptions);
});
},

6
pages/tabBar/xjPage/xjRecord.vue
View File

@ -45,6 +45,9 @@
</view>
</view>
<view style="text-align: center;" v-if="isLoading">加载中...</view>
<view v-else class="no-data">
暂无数据~
</view>
</scroll-view>
</template>
@ -133,8 +136,7 @@ export default {
},
handlePreviewImage(list,index){
const images = list.filter(item=> item.format == 'image')
const filePaths = images.map(item=> item.url)
const filePaths = list.filter(item=> item.format == 'image').map(item=> item.url)
uni.previewImage({
urls: filePaths,
current:index,

Write Preview
Loading…
Cancel
Save