<template>
|
<view class="main_app">
|
<view class="list">
|
<view class="item">
|
<view class="la"><text class="red">*</text>位置类型</view>
|
<view class="line sel_wrap" @click="showModal0 = true">
|
<view class="left" :class="param.areaName ? '' : 'placeholder9'">{{ param.areaName ? param.areaName : '请选择' }}
|
</view>
|
<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la"><text class="red">*</text>选择区域</view>
|
<view class="line sel_wrap" @click="showModal1 = true">
|
<view class="left" :class="param.projectName ? '' : 'placeholder9'">
|
{{ param.projectName ? `${param.projectName} ${param.buildingName || ''} ${param.areaType == 0 ? param.roomNum || '' : param.floorName || ''}` : '请选择' }}
|
</view>
|
<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la"><text class="red">*</text>工单分类</view>
|
<view class="line sel_wrap" @click="showCate1 = true">
|
<view class="left" :class="param.cateName ? '' : 'placeholder9'">
|
{{ param.cateName ? param.cateName : '请选择' }}</view>
|
<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
|
</view>
|
</view>
|
<view class="item" v-if="param.areaType == 0">
|
<view class="la">上门时间</view>
|
<view class="line sel_wrap" @click="showTime = true">
|
<view class="left" :class="param.getDate ? '' : 'placeholder9'">{{ param.getDate ? param.getDate : '请选择' }}
|
</view>
|
<u-icon name="arrow-right" color="#999999" size="15"></u-icon>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la">描述</view>
|
<view class="line">
|
<textarea v-model="param.content" placeholder="请输入" placeholder-class="placeholder9" />
|
</view>
|
</view>
|
<view class="item">
|
<view class="la">现场照片</view>
|
<view class="upload_wrap">
|
<view class="upload_file" @click="showUpload = true">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
<view class="mt6">图片/视频</view>
|
</view>
|
<view class="upload_file" v-for="(item, i) in fileList" :key="i">
|
<u-icon class="close" size="20" name="close-circle-fill" color="red"
|
@click="fileDel('fileList', i)"></u-icon>
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
<video v-if="item.type == 1" :show-center-play-btn="false" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="sub_btn" @click="onSubmit">提交</view>
|
<!-- -->
|
<u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
|
<view class="sel_upload_wrap">
|
<view class="btn" @click="uploadImage">选择图片</view>
|
<view class="btn" @click="uploadVideo">选择视频</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<u-picker :show="showModal0" keyName="name" @cancel="showModal0 = false" @confirm='confirm0'
|
:columns="areaType"></u-picker>
|
<!-- -->
|
<u-picker :show="showModal1" keyName="name" @cancel="showModal1 = false" @confirm='confirm1'
|
:columns="projectList"></u-picker>
|
<u-picker :show="showModal2" keyName="name" @cancel="showModal2 = false" @confirm='confirm2'
|
:columns="buildingList"></u-picker>
|
<u-picker :show="showModal3" keyName="name" @cancel="showModal3 = false" @confirm='confirm3'
|
:columns="floorList"></u-picker>
|
<u-picker :show="showModal4" keyName="roomNum" @cancel="showModal4 = false" @confirm='confirm4'
|
:columns="roomList"></u-picker>
|
<!-- -->
|
<u-datetime-picker :minDate="new Date().getTime()" :show="showTime" @confirm="confirmDate"
|
@cancel="showTime = false" mode="datetime"></u-datetime-picker>
|
|
<u-picker :show="showCate1" keyName="name" ref="uPicker" @change="changeHandler" @cancel="showCate1 = false"
|
@confirm='confirmCate1' :columns="cateList1"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import {
|
uploadUrl,
|
ywProjectPost,
|
ywBuildingPost,
|
ywFloorPost,
|
ywRoomPost,
|
ywWorkorderCreate,
|
getCategoryPost
|
} from '@/api'
|
import dayjs from 'dayjs';
|
export default {
|
data() {
|
return {
|
param: {
|
areaName: '室内装修',
|
areaType: 0
|
},
|
showUpload: false,
|
fileList: [],
|
|
showModal0: false,
|
showModal1: false,
|
showModal2: false,
|
showModal3: false,
|
showModal4: false,
|
showTime: false,
|
showCate1: false,
|
showCate2: false,
|
areaType: [
|
[{
|
name: '室内维修',
|
id: 0
|
},
|
{
|
name: '公共维修',
|
id: 1
|
}
|
]
|
],
|
cateList1: [],
|
cateList2: [],
|
projectList: [],
|
buildingList: [],
|
floorList: [],
|
roomList: [],
|
};
|
},
|
onLoad() {
|
this.getProject()
|
this.getCate()
|
},
|
methods: {
|
onSubmit() {
|
const {
|
param,
|
fileList
|
} = this
|
if (!param.projectId) return this.showToast('请选择完整的区域')
|
if (!param.buildingId) return this.showToast('请选择完整的区域')
|
if (!param.floorName && !param.roomNum) return this.showToast('请选择完整的区域')
|
if (!param.cateName) return this.showToast('请选择工单分类')
|
ywWorkorderCreate({
|
...param,
|
// roomId: '',
|
fileList
|
}).then(res => {
|
this.showToast('提交成功')
|
uni.redirectTo({
|
url: '/pages/workOrder/list'
|
})
|
})
|
},
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
console.log(index);
|
console.log(index);
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
picker.setColumnValues(1, this.cateList1[0][index].childCategoryList)
|
}
|
},
|
confirmCate1(e) {
|
console.log(e.value[1]);
|
if(e.value.length == 2){
|
this.$set(this.param, 'cateId', e.value[1].id)
|
this.$set(this.param, 'cateName', e.value[1].name)
|
this.showCate1 = false
|
}
|
|
},
|
confirm0(e) {
|
const item = e.value[0]
|
this.$set(this.param, 'areaType', item.id)
|
this.$set(this.param, 'areaName', item.name)
|
this.showModal0 = false
|
this.param = {
|
areaType: item.id,
|
areaName: item.name,
|
}
|
},
|
confirm1(e) {
|
const item = e.value[0]
|
this.showModal1 = false
|
this.$set(this.param, 'projectName', item.name)
|
this.$set(this.param, 'projectId', item.id)
|
this.getBuilding(item.id)
|
this.showModal2 = true
|
},
|
confirm2(e) {
|
const item = e.value[0]
|
this.showModal2 = false
|
this.$set(this.param, 'buildingName', item.name)
|
this.$set(this.param, 'buildingId', item.id)
|
if (this.param.areaType == 0) {
|
this.getRoom(item.id)
|
this.showModal4 = true
|
} else {
|
this.getFloor(item.id)
|
this.showModal3 = true
|
}
|
},
|
confirm3(e) {
|
const item = e.value[0]
|
this.showModal3 = false
|
this.$set(this.param, 'floorName', item.name)
|
this.$set(this.param, 'floorId', item.id)
|
},
|
confirm4(e) {
|
const item = e.value[0]
|
this.showModal4 = false
|
this.$set(this.param, 'roomNum', item.roomNum)
|
this.$set(this.param, 'roomId', item.id)
|
},
|
confirmDate(e) {
|
this.$set(this.param, 'getDate', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));
|
this.showTime = false
|
},
|
getCate() {
|
getCategoryPost({
|
capacity: 9999,
|
page: 1,
|
model: {
|
type: 3
|
}
|
}).then(res => {
|
|
let temp = res.data.records || []
|
if (temp && temp.length > 0) {
|
this.cateList1 = [temp, temp[0].childCategoryList || []]
|
} else {
|
this.cateList1 = [temp, []]
|
}
|
console.log(this.cateList1);
|
})
|
},
|
getProject() {
|
ywProjectPost().then(res => {
|
this.projectList = [res.data || []]
|
})
|
},
|
getBuilding(projectId) {
|
ywBuildingPost({
|
projectId
|
}).then(res => {
|
this.buildingList = [res.data || []]
|
})
|
},
|
getFloor(buildingId) {
|
ywFloorPost({
|
buildingId
|
}).then(res => {
|
this.floorList = [res.data || []]
|
})
|
},
|
getRoom(buildingId) {
|
ywRoomPost({
|
buildingId
|
}).then(res => {
|
this.roomList = [res.data || []]
|
})
|
},
|
fileDel(str, i) {
|
this[str].splice(i, 1);
|
},
|
uploadImage() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseImage({
|
count: 6,
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
};
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'YW_WORKORDER_FILE'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 0;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
fail(err) {
|
console.log('err', err);
|
},
|
complete() {
|
uni.hideLoading();
|
// if (i === chooseImageRes.tempFilePaths.length - 1) {
|
// uni.hideLoading()
|
// }
|
}
|
});
|
}
|
});
|
},
|
uploadVideo() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseVideo({
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
filePath: chooseImageRes.tempFilePath,
|
header: {
|
Dm_user_token: token
|
},
|
name: 'file',
|
formData: {
|
folder: 'YW_WORKORDER_FILE'
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 1;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.list {
|
|
.item {
|
.la {
|
margin-top: 30rpx;
|
}
|
|
.line {
|
|
textarea {
|
box-sizing: border-box;
|
width: 690rpx;
|
min-height: 160rpx;
|
background-color: #f7f7f7;
|
font-size: 28rpx;
|
color: #333333;
|
padding: 24rpx;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
margin-top: 20rpx;
|
}
|
}
|
|
.sel_wrap {
|
height: 90rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
}
|
|
.upload_wrap {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 30rpx;
|
}
|
|
.upload_file {
|
margin-top: 24rpx;
|
width: 156rpx;
|
height: 156rpx;
|
margin-right: 20rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
&:nth-of-type(4n) {
|
margin-right: 0;
|
}
|
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
background-color: #fff;
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
}
|
}
|
|
.sub_btn {
|
// position: fixed;
|
// bottom: 68rpx;
|
// left: 40rpx;
|
width: 670rpx;
|
height: 88rpx;
|
margin-top: 80rpx;
|
background: $primaryColor;
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
|
border-radius: 44rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
|
.sel_upload_wrap {
|
width: 100%;
|
border-top: 1px solid #666666;
|
box-shadow: 0 1 1 #333333;
|
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
</style>
|
