MD_worker/pages/workOrder/detail.vue

<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.reason || '--' }}</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" style="margin-top: 20rpx;">
                                {{ item.begdate || '' }} - {{ item.enddate || '' }}
                            </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-dianhua" 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();
                    })
                }
            },
        })
    } 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>