|
|
@@ -0,0 +1,483 @@
|
|
|
+<template>
|
|
|
+ <view v-if="time">
|
|
|
+ <view style="background-color: #fff;padding: 20rpx 0;">
|
|
|
+ <up-steps :current="current" dot activeColor="#0279FE">
|
|
|
+ <up-steps-item v-for="item in steps" :key="item.title" :title="item.title" />
|
|
|
+ </up-steps>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="billno" style="margin-bottom: -24rpx;">
|
|
|
+ 工单编号：{{ detail.billno }}
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label col-center">服务类型</view>
|
|
|
+ <view class="servicetype"
|
|
|
+ :style="{ 'background': { '安装': '#70B603', '维修': '#D9001B', '清洁': '#3874F6', '清洗': '#3874F6' }[detail.servicetype] || '#999999' }">
|
|
|
+ {{ detail.servicetype || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">产品品类</view>
|
|
|
+ <view class="value">{{ detail.class1 || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.servicetype == '维修'">
|
|
|
+ <view class="label">故障类型</view>
|
|
|
+ <view class="value">{{ detail.class2 || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务地址</view>
|
|
|
+ <view class="value">{{ detail.province + detail.city + detail.county + detail.address || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" style="align-items: center;">
|
|
|
+ <view class="label justify">联系人</view>
|
|
|
+ <view class="value phonenumber">{{ detail.scenecontact || '--' }}
|
|
|
+ <block v-if="detail.scenecontactphonenumber">
|
|
|
+ <text style="margin: 0 20rpx 0 10rpx;">
|
|
|
+ {{ detail.scenecontactphonenumber }}
|
|
|
+ </text>
|
|
|
+ <My-button :customStyle="{
|
|
|
+ width: '142rpx',
|
|
|
+ height: '48rpx',
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ borderRadius: '10rpx'
|
|
|
+ }" :frontIconStyle="{
|
|
|
+ marginRight: '6rpx',
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.scenecontactphonenumber" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">派单日期</view>
|
|
|
+ <view class="value">{{ detail.createdate || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务需求</view>
|
|
|
+ <view class="value">{{ detail.remarks || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <up-transition :show="transition">
|
|
|
+ <view class="transition">
|
|
|
+ <up-divider />
|
|
|
+ <view class="row" v-if="detail.enterprisename">
|
|
|
+ <view class="label justify">销售商</view>
|
|
|
+ <view class="value">{{ detail.enterprisename || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.itemsText.length">
|
|
|
+ <view class="label">产品信息</view>
|
|
|
+ <view class="value">
|
|
|
+ <view class="col-center" v-for="(item, index) in detail.itemsText" :key="index">
|
|
|
+ <view class="value"><text v-if="detail.itemsText.length != 1">{{ index + 1 }}. </text>{{
|
|
|
+ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.sku">
|
|
|
+ <view class="label justify">序列号</view>
|
|
|
+ <view class="value">{{ detail.sku || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.customername || detail.customerphonenumber"
|
|
|
+ style="align-items: center;">
|
|
|
+ <view class="label justify">客户信息</view>
|
|
|
+ <view class="value phonenumber">{{ detail.customername || '' }}
|
|
|
+ <block v-if="detail.customerphonenumber">
|
|
|
+ <text style="margin: 0 20rpx 0 10rpx;">
|
|
|
+ {{ detail.customerphonenumber }}
|
|
|
+ </text>
|
|
|
+ <My-button :customStyle="{
|
|
|
+ width: '142rpx',
|
|
|
+ height: '48rpx',
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ borderRadius: '10rpx'
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.servicetype !== '安装' && detail.cardno">
|
|
|
+ <view class="label">保修信息</view>
|
|
|
+ <view class="value">
|
|
|
+ <text :style="{ color: detail.inqualityguaranteeperiod ? '#70B603' : '#D9001B' }"
|
|
|
+ style="margin-right: 0rpx;">
|
|
|
+ {{ detail.inqualityguaranteeperiod ? '在保' : '已过保' }}
|
|
|
+ </text>
|
|
|
+ {{ detail.cardno || '' }}
|
|
|
+ <view v-if="detail.cardno && detail.cardbegdate" style="margin-top: 20rpx;">
|
|
|
+ {{ detail.cardbegdate || '' }} - {{ detail.cardenddate || '' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-transition>
|
|
|
+ <block v-if="detail.status == '进行中'">
|
|
|
+ <view style="height: 40rpx;" />
|
|
|
+ <view class="changeTransition" hover-class="navigator-hover" @click="transition = !transition">
|
|
|
+ 详细信息
|
|
|
+ <view class="iconfont icon-dianjizhankai" :class="transition ? 'shrink' : ''" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view v-if="detail.status == '待接单'" class="but-box">
|
|
|
+ <view class="but-box-item" v-if="detail.customerphonenumber">
|
|
|
+ <My-button :customStyle="{
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
|
|
|
+ </view>
|
|
|
+ <view class="but-box-item" @click="takeOrderShow = true">
|
|
|
+ <My-button frontIcon="icon-jiedan" text="接单" />
|
|
|
+ <up-modal negativeTop="100" :show="takeOrderShow" title="是否确认接单？" showCancelButton
|
|
|
+ @confirm="takeOrders" @cancel="takeOrderShow = false" ref="uModal"
|
|
|
+ :asyncClose="true"></up-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view v-else-if="detail.status == '待开始'" class="but-box">
|
|
|
+ <view class="but-box-item" @click="toChangeMsg">
|
|
|
+ <My-button :customStyle="{
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ }" text="信息修改" />
|
|
|
+ </view>
|
|
|
+ <view class="but-box-item" @click="!detail.sku ? toCMTips() : confirmStartShow = true">
|
|
|
+ <My-button text="确认开始" />
|
|
|
+ <up-modal negativeTop="100" :show="confirmStartShow" showCancelButton @confirm="confirmStart"
|
|
|
+ @cancel="confirmStartShow = false" ref="uModal" :asyncClose="true">
|
|
|
+ <view class="slot-content">
|
|
|
+ <view>
|
|
|
+ 请仔细核对服务信息和客户信息
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 20rpx;">
|
|
|
+ 开始工单后确认信息将不可修改！
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main" v-if="current >= 2 && detail.nodes.length" style="padding: 30rpx;">
|
|
|
+ <nodes ref="Nodes" :nodes="detail.nodes" />
|
|
|
+ <view v-if="detail.status == '进行中'" style='width: 60%;margin: 40rpx auto 0;padding-bottom: 30rpx;'
|
|
|
+ @click="submit"><My-button text="完工提交" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height: 50px;" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, getCurrentInstance } from 'vue';
|
|
|
+const { $Http } = getCurrentInstance().proxy;
|
|
|
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
|
|
|
+import nodes from './modules/nodes.vue';
|
|
|
+
|
|
|
+const transition = ref(true);
|
|
|
+const Nodes = ref(null);
|
|
|
+
|
|
|
+const current = ref(-1);
|
|
|
+const steps = reactive([
|
|
|
+ { title: '接单', value: '待接单' },
|
|
|
+ { title: '开始', value: '待开始' },
|
|
|
+ { title: '进行中', value: '进行中' },
|
|
|
+ { title: '提交', value: '提交' },
|
|
|
+ { title: '完工', value: '已完成' }
|
|
|
+]);
|
|
|
+let sa_workorderid = 0;
|
|
|
+onLoad((options) => {
|
|
|
+ sa_workorderid = options.id;
|
|
|
+});
|
|
|
+
|
|
|
+onUnload(() => {
|
|
|
+ delete $Http.content1
|
|
|
+});
|
|
|
+
|
|
|
+const time = ref(new Date().getTime());
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ getDetail()
|
|
|
+})
|
|
|
+
|
|
|
+let detail = reactive({
|
|
|
+ itemsText: [],
|
|
|
+ servicetype: ""
|
|
|
+});
|
|
|
+
|
|
|
+function getDetail() {
|
|
|
+ $Http.basic({ "id": "20230208140103", "content": { "nocache": true, sa_workorderid } }).then(res => {
|
|
|
+ console.log("工单详情", res)
|
|
|
+ $Http.content1 = {
|
|
|
+ itemid: res.data.itemid,
|
|
|
+ sku: res.data.sku,
|
|
|
+ sys_enterpriseid: res.data.sys_enterpriseid,
|
|
|
+ sa_workorderid: res.data.sa_workorderid,
|
|
|
+ }
|
|
|
+ if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
|
|
|
+ try {
|
|
|
+ res.data.itemsText = res.data.titems.map(item => {
|
|
|
+ return `${item.itemname} ${item.model}`;
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.data.status == '进行中' && detail.servicetype == '') transition.value = false;
|
|
|
+ time.value = new Date().getTime()
|
|
|
+ detail = reactive(res.data);
|
|
|
+ current.value = steps.findIndex(item => item.value === res.data.status);
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 提交工单
|
|
|
+function submit() {
|
|
|
+ // 收集所有必填末级节点
|
|
|
+ const requiredLeafNodes = [];
|
|
|
+
|
|
|
+ // 递归查找末级节点
|
|
|
+ function findLeafNodes(nodeList) {
|
|
|
+ for (const node of nodeList) {
|
|
|
+ // 检查是否为末级节点（没有子节点）
|
|
|
+ if (!node.child || node.child.length === 0) {
|
|
|
+ // 检查是否是必填节点（required == 11）
|
|
|
+ if (node.workpresetjson?.required == 11 && node.status !== "1") {
|
|
|
+ requiredLeafNodes.push(node);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 递归检查子节点
|
|
|
+ findLeafNodes(node.child);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 开始查找
|
|
|
+ findLeafNodes(detail.nodes);
|
|
|
+ // 检查所有必填末级节点是否已完成
|
|
|
+ const allCompleted = requiredLeafNodes.every(node => node.status === "1");
|
|
|
+ if (allCompleted) {
|
|
|
+ uni.showModal({
|
|
|
+ confirmText: '继续提交',
|
|
|
+ content: '请确认工单内容，提交后不可修改！',
|
|
|
+ success: ({ confirm }) => {
|
|
|
+ if (confirm) {
|
|
|
+ $Http.basic({
|
|
|
+ id: 2025072315401603,
|
|
|
+ "content": {
|
|
|
+ "sa_workorderid": detail.sa_workorderid
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("提交结果", res)
|
|
|
+ uni.showToast({
|
|
|
+ title: res.code == 1 ? '提交成功' : res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ if (res.code == 1) {
|
|
|
+ getDetail();
|
|
|
+ transition.value = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ confirmText: '关闭',
|
|
|
+ content: '还有工序未完成，不能提交！',
|
|
|
+ showCancel: false
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 接单
|
|
|
+const takeOrderShow = ref(false);
|
|
|
+
|
|
|
+function takeOrders() {
|
|
|
+ $Http.basic({
|
|
|
+ id: 20230210101103,
|
|
|
+ "content": {
|
|
|
+ "sa_workorderid": detail.sa_workorderid
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("接单结果", res)
|
|
|
+ if (res.code == 1) {
|
|
|
+ takeOrderShow.value = false;
|
|
|
+ getDetail();
|
|
|
+ uni.showToast({
|
|
|
+ title: '接单成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (res.msg) uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function toCMTips() {
|
|
|
+ uni.showModal({
|
|
|
+ confirmText: '前去修改',
|
|
|
+ content: '请完善产品信息和客户信息，确认开始后将不可修改！',
|
|
|
+ success: ({ confirm }) => {
|
|
|
+ if (confirm) toChangeMsg();
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 修改信息
|
|
|
+function toChangeMsg() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/workOrder/changeMsg?id=` + sa_workorderid
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 确认开始
|
|
|
+const confirmStartShow = ref(false);
|
|
|
+
|
|
|
+function confirmStart() {
|
|
|
+ $Http.basic({
|
|
|
+ id: 20230209144503,
|
|
|
+ "content": {
|
|
|
+ "sa_workorderid": detail.sa_workorderid
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("确认开始", res)
|
|
|
+ if (res.code == 1) {
|
|
|
+ confirmStartShow.value = false;
|
|
|
+ getDetail();
|
|
|
+ uni.showToast({
|
|
|
+ title: '确认开始成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (res.msg) uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({ detail })
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main {
|
|
|
+ position: relative;
|
|
|
+ width: 690rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .changeTransition {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #3874F6;
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #EDF4FF;
|
|
|
+
|
|
|
+ .icon-dianjizhankai {
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shrink {
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ position: relative;
|
|
|
+ width: 108rpx;
|
|
|
+ color: #999999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -12rpx;
|
|
|
+ content: ':';
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phonenumber {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .servicetype {
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-center::after {
|
|
|
+ top: 50% !important;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .justify {
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+
|
|
|
+ .billno {
|
|
|
+ position: relative;
|
|
|
+ width: 400rpx;
|
|
|
+ top: -40rpx;
|
|
|
+ left: -40rpx;
|
|
|
+ background: #3874F6;
|
|
|
+ border-radius: 0 0rpx 24rpx 0rpx;
|
|
|
+ padding: 10rpx 52rpx 10rpx 20rpx;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.but-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .but-box-item {
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
