393 lines
10 KiB
Vue
393 lines
10 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="aspectFill"
|
||
>
|
||
</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
|
||
>
|
||
<image
|
||
v-else
|
||
v-for="(item, index) in info.videosList"
|
||
:key="index"
|
||
:src="item"
|
||
mode="aspectFill"
|
||
></image>
|
||
</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.reporter_worker">
|
||
<div class="row">
|
||
<div class="row_label">维修师傅</div>
|
||
<div class="row_con">{{ info.reporter_worker.name }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">师傅手机号</div>
|
||
<div class="row_con">{{ info.reporter_worker.mobile }}</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">师傅工号</div>
|
||
<div class="row_con noneBor">{{ info.reporter_worker.emp_no }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="repairMsg"
|
||
v-if="info.repair_images || info.repair_videos || info.repair_description"
|
||
>
|
||
<div class="row">
|
||
<div class="row_label df">维修图片</div>
|
||
<div class="row_con">
|
||
<image
|
||
v-for="(item, index) in info.repair_images"
|
||
:key="index"
|
||
:src="item"
|
||
mode="aspectFill"
|
||
>
|
||
</image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label df">维修视频</div>
|
||
<div class="row_con">
|
||
<image
|
||
v-for="(item, index) in info.repair_images"
|
||
:key="index"
|
||
:src="item"
|
||
mode="aspectFill"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">维修描述</div>
|
||
<div class="row_con noneBor">{{ info.repair_description }}</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="white_container"
|
||
v-if="state == 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 || orderStateList[0].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.user.gender }}</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,
|
||
NavgateTo,
|
||
upload,
|
||
menuButtonInfo,
|
||
} from "../../../utils";
|
||
import { apiArr } from "../../../api/v2Community";
|
||
export default {
|
||
data() {
|
||
return {
|
||
active: "1",
|
||
top: "",
|
||
localHeight: "",
|
||
state: "4",
|
||
type: "edit",
|
||
checked: "",
|
||
orderSelect: false,
|
||
orderStateList: [
|
||
{
|
||
desc: "进行中",
|
||
state: "2",
|
||
},
|
||
{
|
||
desc: "已作废",
|
||
state: "3",
|
||
},
|
||
{
|
||
desc: "已完成",
|
||
state: "4",
|
||
},
|
||
],
|
||
orderState: {},
|
||
info: {},
|
||
// 状态枚举类型
|
||
statusType: {
|
||
1: {
|
||
desc: "待指派",
|
||
style: "orderItemTit_state1",
|
||
},
|
||
2: {
|
||
desc: "进行中",
|
||
style: "orderItemTit_state2",
|
||
},
|
||
4: {
|
||
desc: "已完成",
|
||
style: "orderItemTit_state4",
|
||
},
|
||
3: {
|
||
desc: "已作废",
|
||
style: "orderItemTit_state3",
|
||
},
|
||
},
|
||
show: false,
|
||
communityMasterList: [],
|
||
order_dispatch_permission: false,
|
||
};
|
||
},
|
||
methods: {
|
||
headerBackClick() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
headerTakeClick() {
|
||
console.log("接单");
|
||
},
|
||
async headerSelectMasterClick() {
|
||
const res = await request(apiArr.workMasterLick, "POST", {
|
||
community_id: this.info.community_id,
|
||
});
|
||
|
||
this.communityMasterList = res.rows;
|
||
this.show = true;
|
||
},
|
||
headerEditClick() {
|
||
if (this.type === "edit") {
|
||
console.log("确定");
|
||
} else {
|
||
this.type = "edit";
|
||
console.log("编辑");
|
||
}
|
||
},
|
||
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,
|
||
})
|
||
console.log('res');
|
||
if (res) {
|
||
uni.showToast({
|
||
title: '派单成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '派单失败',
|
||
icon: 'error',
|
||
mask: true
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
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}`)
|
||
: [],
|
||
};
|
||
console.log("222222", res.videos !== "" ? 222 : []);
|
||
console.log("newRes", newRes);
|
||
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>
|