520 lines
15 KiB
Vue
520 lines
15 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div
|
||
class="searchBox"
|
||
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||
>
|
||
<div class="searchBox_add">
|
||
<div class="searchBox_left">
|
||
<u-icon
|
||
bold
|
||
color="#000"
|
||
size="40"
|
||
name="arrow-left"
|
||
@click="headerBackClick"
|
||
></u-icon>
|
||
</div>
|
||
<div class="searchBox_mid">工单详情</div>
|
||
<div class="searchBox_right"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="repairMsg">
|
||
<div :class="['orderItemTit', statusType[info.status].style]">
|
||
<div class="orderItemTit_left">工单编号：{{ info.order_code }}</div>
|
||
<div class="orderItemTit_right">{{ statusType[info.status].desc }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">小区房源名称</div>
|
||
<div class="row_con">{{ info.room.name }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">报修类型</div>
|
||
<div class="row_con">{{ info.ac.category_name }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">问题描述</div>
|
||
<div class="row_con">{{ info.problem_description }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">联系人</div>
|
||
<div class="row_con">{{ info.contact_name }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">联系电话</div>
|
||
<div class="row_con">{{ info.contact_phone }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">上门时间</div>
|
||
<div class="row_con">{{ info.service_time }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="repairMsg">
|
||
<div class="row">
|
||
<div class="row_label df">图片</div>
|
||
<div class="row_con">
|
||
<view v-if="info.imagesList && info.imagesList.length == 0">暂无图片</view>
|
||
<image
|
||
v-else
|
||
v-for="(item, index) in info.imagesList"
|
||
:key="index"
|
||
:src="item"
|
||
mode=""
|
||
@click="handlerPreviewImageClick(item)"
|
||
>
|
||
</image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label df">视频</div>
|
||
<div class="row_con">
|
||
<view v-if="info.videosList && info.videosList.length == 0">暂无视频</view>
|
||
<div v-else v-for="(item, index) in info.videosList" :key="index" class="videoBOX">
|
||
<video id="myVideo" :src="item" playsinline webkit-playsinline></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" v-if="info.assign_time">
|
||
<div class="row_label">指派时间</div>
|
||
<div class="row_con noneBor">{{ info.assign_time }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 维修状态非带指派 -->
|
||
<div class="repairMsg" v-if="info.status !== 1">
|
||
<div class="row">
|
||
<div class="row_label">维修师傅</div>
|
||
<div class="row_con">{{ info.repairman_worker.name }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">师傅手机号</div>
|
||
<div class="row_con">{{ info.repairman_worker.mobile }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">师傅工号</div>
|
||
<div class="row_con noneBor">{{ info.repairman_worker.emp_no }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工单状态非带指派或者进行中 -->
|
||
<div class="repairMsg" v-if="info.status !== 1 && info.status !== 2">
|
||
<div class="row">
|
||
<div class="row_label df">维修图片</div>
|
||
<div class="row_con">
|
||
<view v-if="info.repairImagesList && info.repairImagesList.length == 0">暂无图片</view>
|
||
<image
|
||
v-for="(item, index) in info.repairImagesList"
|
||
:key="index"
|
||
:src="item"
|
||
mode=""
|
||
@click="headerRepairImagesClick(item)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label df">维修视频</div>
|
||
<div class="row_con">
|
||
<view v-if="info.repairVideosList && info.repairVideosList.length == 0">暂无视频</view>
|
||
<div v-else v-for="(item, index) in info.repairVideosList" :key="index" class="videoBOX">
|
||
<video id="myVideo" :src="item" playsinline webkit-playsinline></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">维修描述</div>
|
||
<div class="row_con noneBor">{{ info.repair_description || '暂无描述' }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="repairMsg" v-if="type === 'edit'">
|
||
<div class="repairMedia">
|
||
<div class="edit_row df">
|
||
<div class="row_label">维修图片</div>
|
||
<div class="row_con2">
|
||
<u-upload :fileList="imgList" name="imgList" @afterRead="afterReadImg" @delete="deletePic" multiple
|
||
:maxCount="10">
|
||
<div class="imgCon">
|
||
<image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
|
||
上传图片
|
||
</div>
|
||
</u-upload>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="edit_row df">
|
||
<div class="row_label">上传视频</div>
|
||
<div class="row_con2">
|
||
<u-upload v-if="!videoList.url" :fileList="videoList" @afterRead="afterReadVideo" @delete="deleteVideo" name="videoList"
|
||
:maxCount="1" accept="video">
|
||
<div class="imgCon">
|
||
<image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image>
|
||
上传视频
|
||
</div>
|
||
</u-upload>
|
||
|
||
<div v-if="videoList.url" class="videoBOX">
|
||
<video id="myVideo" :src="videoList.url" playsinline webkit-playsinline></video>
|
||
<div class="mask" @click="playFullScreenVideo">
|
||
<!-- <div class="mask_con">
|
||
<image src="http://192.168.0.172:5500/local_play.png" mode="widthFix"></image>
|
||
</div> -->
|
||
<div class="mask_cancel" @click="cancels">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="edit_row">
|
||
<div class="row_label">维修描述</div>
|
||
<textarea placeholder="请输入维修描述" :value="repairRemarks" data-name="repairRemarks" @input="handlerInputClick" auto-height />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="white_container"
|
||
v-if="info.status == 2 && type === 'edit'"
|
||
@click="headerChangeStateClick"
|
||
>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div style="display: flex">
|
||
<div class="white_label">工单状态</div>
|
||
<div class="whit_desc">
|
||
{{ orderState.desc }}
|
||
</div>
|
||
</div>
|
||
<u-icon name="arrow-up" v-if="!orderSelect" />
|
||
<u-icon name="arrow-down" v-if="orderSelect" />
|
||
</div>
|
||
|
||
<view class="statePupop" v-if="orderSelect">
|
||
<view
|
||
class="statePopop_label"
|
||
v-for="(item, index) in orderStateList"
|
||
:key="index"
|
||
@click.stop="headerSelectClick(item)"
|
||
>{{ item.desc }}</view>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="btn_view" v-if="info.status == 1 && order_dispatch_permission">
|
||
<view class="btn" @click="headerTakeClick">接单</view>
|
||
<view class="btn" @click="headerSelectMasterClick">派单</view>
|
||
</div>
|
||
<!-- 待派单状态 无派单权限按钮 -->
|
||
<div class="btn" v-else-if="info.status == 1" @click="headerTakeClick">接单</div>
|
||
<!-- 进行中状态编辑维修信息 -->
|
||
<div class="btn" v-if="info.status == 2" @click="headerEditClick">
|
||
{{ type === "edit" ? "确定" : "编辑" }}
|
||
</div>
|
||
|
||
<u-popup
|
||
:show="show"
|
||
@close="close"
|
||
round="50rpx"
|
||
style="height: 50%; overflow: hidden"
|
||
>
|
||
<view class="master_popup">
|
||
<view class="master_popup_title">
|
||
<view></view>
|
||
<view class="master_popup_title_text">请选择维修师傅</view>
|
||
<view class="master_popup_title_btn" @click="headerConfirmClick">确定</view>
|
||
</view>
|
||
<view class="master_popup_main">
|
||
<view class="master_list" v-for="(item, index) in communityMasterList" :key="index">
|
||
<u-line margin="30rpx 0" />
|
||
<view class="master_popup_tabel">
|
||
<view class="master_popup_tabel_left">
|
||
<view class="master_popup_label">
|
||
<view class="label">师傅名称</view>
|
||
<view>{{item.name}}</view>
|
||
</view>
|
||
<view class="master_popup_label">
|
||
<view class="label">师傅手机号</view>
|
||
<view>{{ item.mobile }}</view>
|
||
</view>
|
||
</view>
|
||
<radio :value="item.worker_id" @click="headerRadioClick" :data-name="item.worker_id" :checked="checked === item.worker_id" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
upload,
|
||
uploadVideo,
|
||
menuButtonInfo,
|
||
} from "../../../utils";
|
||
import { apiArr } from "../../../api/v2Community";
|
||
export default {
|
||
data() {
|
||
return {
|
||
active: "1",
|
||
top: "",
|
||
localHeight: "",
|
||
type: "",
|
||
checked: "",
|
||
orderSelect: false,
|
||
orderStateList: [
|
||
{
|
||
desc: "进行中",
|
||
state: 2,
|
||
},
|
||
{
|
||
desc: "已作废",
|
||
state: 4,
|
||
},
|
||
{
|
||
desc: "已完成",
|
||
state: 3,
|
||
},
|
||
],
|
||
orderState: {
|
||
desc: '进行中',
|
||
state: 2
|
||
}, // 工单状态
|
||
info: {},
|
||
// 状态枚举类型
|
||
statusType: {
|
||
1: {
|
||
desc: "待指派",
|
||
style: "orderItemTit_state1",
|
||
},
|
||
2: {
|
||
desc: "进行中",
|
||
style: "orderItemTit_state2",
|
||
},
|
||
3: {
|
||
desc: "已完成",
|
||
style: "orderItemTit_state3",
|
||
},
|
||
4: {
|
||
desc: "已作废",
|
||
style: "orderItemTit_state4",
|
||
},
|
||
},
|
||
show: false,
|
||
communityMasterList: [],
|
||
order_dispatch_permission: false,
|
||
repairRemarks: '', // 维修备注信息
|
||
imgList: [],
|
||
videoList: {},
|
||
|
||
};
|
||
},
|
||
methods: {
|
||
headerBackClick() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 接单按钮点击
|
||
async headerTakeClick() {
|
||
const res = await request(apiArr.workOrderCrudAccept, 'POST', {
|
||
id: this.info.id
|
||
})
|
||
uni.showToast({
|
||
title: '接单成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 2000)
|
||
},
|
||
// 派单按钮点击 获取师傅列表并打开弹窗
|
||
async headerSelectMasterClick() {
|
||
const res = await request(apiArr.workMasterLick, "POST", {
|
||
community_id: this.info.community_id,
|
||
});
|
||
|
||
this.communityMasterList = res.rows;
|
||
this.show = true;
|
||
},
|
||
|
||
// 上传图片
|
||
async afterReadImg(e){
|
||
const { file} = e;
|
||
console.log(e);
|
||
file.forEach(item => {
|
||
upload(item.url, res => {
|
||
console.log(res.data.path);
|
||
this.imgList.push({
|
||
url: picUrl + res.data.path,
|
||
picUrl: res.data.path,
|
||
})
|
||
})
|
||
})
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
deletePic(e) {
|
||
this.imgList.splice(e.index, 1);
|
||
},
|
||
afterReadVideo(e){
|
||
uploadVideo(e.file.url, res => {
|
||
this.videoList = {
|
||
url: picUrl + res.data.url,
|
||
videos: res.data.url
|
||
}
|
||
})
|
||
},
|
||
deleteVideo() {
|
||
this.videoList = {};
|
||
},
|
||
playFullScreenVideo() {
|
||
this.videoContext = this.videoContext || wx.createVideoContext('myVideo')
|
||
this.videoContext.requestFullScreen() // 请求全屏
|
||
},
|
||
cancels(e) {
|
||
this.videoList = {};
|
||
},
|
||
|
||
// 进行中订单 按钮触发方法
|
||
async headerEditClick() {
|
||
if (this.type === "edit") {
|
||
this.type = '';
|
||
const res = await request(apiArr.workOrderCrudUpdate, 'POST', {
|
||
id: this.info.id,
|
||
status: this.orderState.state, // 工单状态
|
||
repair_description: this.repairRemarks, // 维修描述
|
||
repair_images: this.imgList.length !== 0 ? this.imgList.map(item => item.picUrl).join(',') : '', // 维修图片
|
||
repair_videos: this.videoList.videos || '', // 维修视频
|
||
repair_remarks: '', // 维修备注
|
||
repair_time: '', // 维修时间
|
||
})
|
||
uni.showToast({
|
||
title: '修改工单状态完成',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 2000)
|
||
|
||
} else {
|
||
this.type = "edit";
|
||
}
|
||
},
|
||
// input 输入公共方法
|
||
handlerInputClick(e) {
|
||
const { name} = e.currentTarget.dataset;
|
||
this[name] = e.detail.value
|
||
},
|
||
|
||
// 修改工单状态
|
||
headerChangeStateClick() {
|
||
this.orderSelect = true;
|
||
},
|
||
|
||
// 工单状态选择时间
|
||
headerSelectClick(item) {
|
||
this.orderState = item;
|
||
this.orderSelect = false;
|
||
},
|
||
// 派单确定按钮
|
||
async headerConfirmClick() {
|
||
if (!this.checked) {
|
||
uni.showToast({
|
||
title: '请选择维修师傅',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
console.log('this.chec', this.checked);
|
||
const res = await request(apiArr.workOrderCrudDispatch, 'POST', {
|
||
worker_id: this.checked,
|
||
id: this.info.id,
|
||
})
|
||
uni.showToast({
|
||
title: '派单成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 2000)
|
||
},
|
||
|
||
// 打开图片预览
|
||
handlerPreviewImageClick(item) {
|
||
uni.previewImage({
|
||
urls: this.info.imagesList,
|
||
current: item,
|
||
});
|
||
},
|
||
headerRepairImagesClick(item) {
|
||
uni.previewImage({
|
||
urls: this.info.repairImagesList,
|
||
current: item,
|
||
});
|
||
},
|
||
|
||
// 师傅选择事件
|
||
headerRadioClick(e) {
|
||
console.log('e', e);
|
||
const { name } = e.currentTarget.dataset;
|
||
this.checked = name;
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
async init(id) {
|
||
const res = await request(apiArr.workOrderCrudInfo, "POST", {
|
||
id: Number(id),
|
||
});
|
||
const newRes = {
|
||
...res,
|
||
imagesList: res.images !== "" ? res.images.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
|
||
videosList: res.videos !== "" ? res.videos.split(",").map((url) => `${picUrl}${url}`) : [], // 上报视频
|
||
repairImagesList: res.repair_images !== "" ? res.repair_images.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
|
||
repairVideosList: res.repair_videos !== "" ? res.repair_videos.split(",").map((url) => `${picUrl}${url}`) : [], // 上报图片
|
||
|
||
};
|
||
this.info = newRes;
|
||
},
|
||
},
|
||
|
||
onLoad(options) {
|
||
console.log("1111", options);
|
||
const order_dispatch_permission = uni.getStorageSync('order_dispatch_permission');
|
||
this.order_dispatch_permission = order_dispatch_permission;
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
this.localHeight = meun.height;
|
||
this.init(options.id);
|
||
},
|
||
|
||
onShow() {},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style>
|