| | |
| | | <view class="list">
|
| | | <view class="item">
|
| | | <view class="la"><text class="red">*</text>位置类型</view>
|
| | | <view class="line sel_wrap">
|
| | | <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</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">
|
| | | <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</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.roomName || '' : param.floorName || ''}` : '请选择' }}</view>
|
| | | <u-icon name="arrow-right" color="#999999" size="15"></u-icon>
|
| | | </view>
|
| | | </view>
|
| | | <view class="item">
|
| | | <view class="la">上门时间</view>
|
| | | <view class="line sel_wrap">
|
| | | <view class="left" :class="param.name ? '' : 'placeholder9'">{{ param.name ? param.name : '请选择' }}</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.checkInfo" placeholder="请输入" placeholder-class="placeholder9" />
|
| | | <textarea v-model="param.content" placeholder="请输入" placeholder-class="placeholder9" />
|
| | | </view>
|
| | | </view>
|
| | | <view class="item">
|
| | |
| | | <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 dealFileList" :key="i">
|
| | | <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('dealBeforeFileList', i)"></u-icon>
|
| | | <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
| | | <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
| | | </view>
|
| | | </view>
|
| | | </view> |
| | | </view> |
| | | <view class="sub_btn">提交</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="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="name" @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>
|
| | | </view>
|
| | | </template>
|
| | |
|
| | | <script> |
| | | import { |
| | | uploadUrl |
| | | } from '@/api' |
| | | <script>
|
| | | import {
|
| | | uploadUrl,
|
| | | ywProjectPost,
|
| | | ywBuildingPost,
|
| | | ywFloorPost,
|
| | | ywRoomPost, |
| | | ywWorkorderCreate
|
| | | } from '@/api'
|
| | | import dayjs from 'dayjs';
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | param: {},
|
| | | showUpload: false,
|
| | | dealFileList: [],
|
| | | fileList: [],
|
| | |
|
| | | showModal0: false,
|
| | | showModal1: false,
|
| | | showModal2: false,
|
| | | showModal3: false,
|
| | | showModal4: false, |
| | | showTime: false,
|
| | | areaType: [
|
| | | [{
|
| | | name: '室内装修',
|
| | | id: 0
|
| | | },
|
| | | {
|
| | | name: '公共维修',
|
| | | id: 1
|
| | | }
|
| | | ]
|
| | | ],
|
| | | projectList: [],
|
| | | buildingList: [],
|
| | | floorList: [],
|
| | | roomList: [],
|
| | | };
|
| | | }, |
| | | },
|
| | | onLoad() {
|
| | | this.getProject()
|
| | | },
|
| | | methods: { |
| | | fileDel(str, i) { |
| | | this[str].splice(i, 1); |
| | | onSubmit() { |
| | | const { param, fileList } = this |
| | | ywWorkorderCreate({ |
| | | ...param, |
| | | // roomId: '', |
| | | fileList |
| | | }).then(res => { |
| | | this.showToast('提交成功') |
| | | uni.redirectTo({ |
| | | url: '/pages/workOrder/list' |
| | | }) |
| | | }) |
| | | },
|
| | | 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.areaType == 0) {
|
| | | this.getRoom(item.id) |
| | | this.showModal4 = true
|
| | | } else {
|
| | | this.getFloor(item.id) |
| | | this.showModal3 = true
|
| | | }
|
| | | }, |
| | | uploadImage() { |
| | | this.showUpload = false; |
| | | let token = uni.getStorageSync('token') || ''; |
| | | uni.chooseImage({ |
| | | count: 4, |
| | | 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: 'HIDDEN_DANGER_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.submitFileList.push(i); |
| | | }); |
| | | } |
| | | }, |
| | | fail(err) { |
| | | console.log('err', err); |
| | | }, |
| | | complete() { |
| | | uni.hideLoading(); |
| | | // if (i === chooseImageRes.tempFilePaths.length - 1) { |
| | | // uni.hideLoading() |
| | | // } |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | confirm3(e) { |
| | | const item = e.value[0] |
| | | this.showModal3 = false |
| | | this.$set(this.param, 'floorName', item.name) |
| | | this.$set(this.param, 'floorId', item.id) |
| | | }, |
| | | 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: 'HIDDEN_DANGER_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.submitFileList.push(i); |
| | | }); |
| | | } |
| | | }, |
| | | complete() { |
| | | uni.hideLoading(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | confirm4(e) { |
| | | const item = e.value[0] |
| | | this.showModal4 = false |
| | | this.$set(this.param, 'roomName', item.name) |
| | | 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 |
| | | },
|
| | | 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 { |
| | | |
| | | .list {
|
| | |
|
| | | .item {
|
| | | .la {
|
| | | margin-top: 30rpx;
|
| | |
| | | align-items: center;
|
| | | justify-content: center;
|
| | | position: relative;
|
| | | &:nth-of-type(4n){ |
| | | margin-right: 0; |
| | |
|
| | | &:nth-of-type(4n) {
|
| | | margin-right: 0;
|
| | | }
|
| | |
|
| | | .close {
|
| | | position: absolute;
|
| | | right: -20rpx;
|
| | |
| | | }
|
| | |
|
| | | }
|
| | | }
|
| | |
|
| | | .sub_btn {
|
| | | position: fixed;
|
| | | bottom: 68rpx;
|
| | | left: 40rpx;
|
| | | width: 670rpx;
|
| | | height: 88rpx;
|
| | | 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;
|
| | | } |
| | | .sub_btn{ |
| | | position: fixed; |
| | | bottom: 68rpx; |
| | | left: 40rpx; |
| | | width: 670rpx; |
| | | height: 88rpx; |
| | | 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> |