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': { '安装': '#E8F8D5', '维修': '#FFE2E5', '清洁': '#E2EBFF', '清洗': '#E2EBFF' }[detail.servicetype] || '#F0F0F0',
                    'color': { '安装': '#4B8E00', '维修': '#B00016', '清洁': '#2A5AD9', '清洗': '#2A5AD9' }[detail.servicetype] || '#333333'
                }">
                    {{ 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>
            <view class="row" style="align-items: center;">
                <view class="label">工单备注</view>
                <view class="value phonenumber">{{ detail.remarks_workorder || '--' }}<My-button v-if="isonlinesales" :customStyle="{
                    width: '142rpx',
                    height: '48rpx',
                    'background-color': '#FFFFFF',
                    'color': '#3874F6',
                    borderRadius: '10rpx',
                    'margin-left': '20rpx'
                }" text="修改备注" @onClick="editRemarks" />
                </view>
            </view>
            <up-transition :show="transition" v-if="detail.sku || detail.itemname">
                <view class="transition">
                    <up-divider />
                    <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.itemname">
                        <view class="label">产品品名</view>
                        <view class="value">{{ detail.itemname || '--' }}</view>
                    </view>
                    <view class="row" v-if="detail.model">
                        <view class="label">产品型号</view>
                        <view class="value">{{ detail.model || '--' }}</view>
                    </view>
                    <view class="row" v-if="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 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" v-if="detail.team.length" @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 class="but-box-item" v-else @click="takeOrderShow = true">
                    <My-button frontIcon="icon-jiedan" text="抢单" />
                    <up-modal negativeTop="100" :show="takeOrderShow" title="是否确认抢单？" showCancelButton
                        @confirm="snatchingOrders" @cancel="takeOrderShow = false" ref="uModal"
                        :asyncClose="true"></up-modal>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view v-else-if="detail.status != '已完工'" class="but-box" :style="{
                paddingBottom: detail.status == '进行中' ? '40rpx' : '0rpx',
            }">
                <view class="but-box-item" @click="toChangeMsg">
                    <My-button :customStyle="{
                        'background-color': '#FFFFFF',
                        'color': '#3874F6',
                    }" text="信息修改" />
                </view>
                <view class="but-box-item" v-if="detail.status == '待开始'"
                    @click="detail.servicetype == '安装' ? toCMTips() : confirmStartShow = true">
                    <My-button text="确认开始" />
                    <up-modal negativeTop="100" title="提示" cancelText="信息修改" confirmText="确认开始" :show="confirmStartShow"
                        showCancelButton @confirm="confirmStart" @cancel="confirmCancel" ref="uModal"
                        :asyncClose="true">
                        <view class="slot-content">
                            <view>
                                请仔细<text style="color: red;">核对服务信息</text>以及<text style="color: red;">填写单程距离</text>
                            </view>
                            <view style="margin-top: 20rpx;">
                                开始工单后<text style="color: red;">信息不可修改！</text>
                            </view>
                        </view>
                    </up-modal>
                </view>
            </view>
        </view>
        <view class="main" v-if="current >= 2 && detail.nodes.length" style="padding: 30rpx;">
            <nodes ref="Nodes" :status="detail.status" :nodes="detail.nodes" />
            <view class="but-box" v-if="current != 4">
                <view class="but-box-item" v-if="detail.status == '提交'">
                    <My-button @onClick="completion" :disabled="detail.status != '提交'" text="确认完工" />
                </view>
                <view class="but-box-item" v-else>
                    <My-button :disabled="detail.status == '提交'" @onClick="submitAndCompletion" text="确认完工" />
                </view>
            </view>
        </view>
    </view>

    <up-modal :show="shoeEditRemarks" title="工单备注" showCancelButton @confirm="confirmRemarks
    " ref="uModal1" :asyncClose="true" @cancel="shoeEditRemarks = false">
        <view style="width: 99%;">
            <up-textarea v-model="refuseremarks" placeholder="工单备注" count></up-textarea>
        </view>
    </up-modal>

    <view style="height: 50px;" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad, 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,
    isonlinesales = ref(false);

onLoad((options) => {
    sa_workorderid = options.id;
    getDetail()
    $Http.getDetail = function () {
        uni.showToast({ title: "保存成功", icon: 'none' });
        getDetail()
    }

    $Http.basic({
        "classname": "common.usercenter.usercenter",
        "method": "queryUserMsg",
        "content": {}
    }).then(res => {
        console.log("用户信息", res);
        if (res.code === 1) {
            if (res.data.agent.type == '网销' || res.data.usertype == 1) {
                isonlinesales.value = true;
            }
        }
    })
});

onUnload(() => {
    delete $Http.content1
});
const time = ref(new Date().getTime());

let detail = reactive({
    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.inqualityguaranteeperiod = new Date() >= new Date(res.data.cardbegdate) && new Date() <= new Date(res.data.cardenddate);
        } catch (error) {

        }

        if (res.data.status == '进行中' && detail.servicetype == '') transition.value = false;
        time.value = new Date().getTime()
        detail = reactive(res.data);
        $Http.workDetail = detail;
        current.value = steps.findIndex(item => item.value === res.data.status);
    })
}


// 工序是否完成
function isAllNodesCompleted() {
    // 收集所有必填末级节点
    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: '还有工序未完成，不能提交！',
        showCancel: false
    })
    return allCompleted;
}

// 提交工单
function submit() {
    if (isAllNodesCompleted()) 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'
                    });
                    let workorderids = uni.getStorageSync('workorderids') || [];
                    // 把当前工单id从缓存中移除
                    workorderids = workorderids.filter(item => item != detail.sa_workorderid);
                    uni.setStorageSync('workorderids', workorderids);
                    if (res.code == 1) {
                        getDetail();
                        transition.value = true;
                    }
                })
            }
        },
    })
}

// 完成工单 
function completion() {
    if (isAllNodesCompleted()) uni.showModal({
        title: '提示',
        confirmText: '确认完工',
        content: '请确认工单内容，完工后不可修改！',
        success: ({ confirm }) => {
            if (confirm) {
                $Http.basic({
                    id: 20230209144903,
                    "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();
                })
            }
        },
    })
}

// 提交直接完工
function submitAndCompletion() {
    if (isAllNodesCompleted()) uni.showModal({
        title: '提示',
        confirmText: '确认完工',
        content: '请确认工单内容，完工后不可修改！',
        success: ({ confirm }) => {
            if (confirm) {
                $Http.basic({
                    id: 2025072315401603,
                    "content": {
                        "sa_workorderid": detail.sa_workorderid
                    }
                }).then(res1 => {
                    console.log("提交", res1)
                    if (res1.code != 1) return uni.showToast({
                        title: res1.msg,
                        icon: 'none'
                    });

                    // 把当前工单id从缓存中移除
                    let workorderids = uni.getStorageSync('workorderids') || [];
                    workorderids = workorderids.filter(item => item != detail.sa_workorderid);
                    uni.setStorageSync('workorderids', workorderids);
                    transition.value = true;

                    $Http.basic({
                        id: 20230209144903,
                        "content": {
                            "sa_workorderid": detail.sa_workorderid
                        }
                    }).then(res => {
                        console.log("完工结果", res)
                        uni.showToast({
                            title: res.code == 1 ? '完工成功' : res.msg,
                            icon: 'none'
                        });
                        getDetail();
                    })
                })
            }
        },
    })
}

// 接单
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.navigateTo({
                url: `/pages/workOrder/changeMsg?id=` + detail.sa_workorderid,
                success: () => {
                    uni.showToast({
                        title: '接单成功,请确认服务信息',
                        icon: 'none'
                    });
                }
            });

        } else {
            takeOrderShow.value = false;
            if (res.msg) uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false
            });
        }
    })
}

function snatchingOrders() {
    $Http.basic({
        "id": "2025101710510903",
        "content": {
            "sa_workorderid": detail.sa_workorderid,
            "projectlearders": [uni.getStorageSync('userMsg').userid],
            ismanage: 0 // 用于避免多次抢单
        },
    }).then(res => {
        if (res.code == 1) {
            console.log("抢单结果", res)
            takeOrders();
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

function toCMTips() {
    let id = detail.sa_workorderid,
        workorderids = uni.getStorageSync('workorderids') || [];
    let hasId = workorderids.findIndex(item => item == id);
    if (hasId == -1) {
        uni.showModal({
            title: '提示',
            confirmText: '信息确认',
            content: '安装工单请务必确认服务信息和客户信息无误，且需正确录入产品序列号！',
            success: ({ confirm }) => {
                if (confirm) toChangeMsg();
            },
        })
    }
    else {
        confirmStartShow.value = true
    }

}

// 修改信息
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'
            });
            let workorderids = uni.getStorageSync('workorderids') || [];
            // 把当前工单id从缓存中移除
            workorderids = workorderids.filter(item => item != detail.sa_workorderid);
            uni.setStorageSync('workorderids', workorderids);
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}
function confirmCancel() {
    confirmStartShow.value = false;
    toChangeMsg();
}

// 编辑工单备注
let shoeEditRemarks = ref(false),
    refuseremarks = ref("");
let uModal1 = ref(null);

function editRemarks() {
    refuseremarks.value = detail.remarks_workorder || "";
    shoeEditRemarks.value = true;
}

function confirmRemarks() {
    $Http.basic({
        "id": 2026020509571602,
        "content": {
            sa_workorderid: detail.sa_workorderid,
            remarks_workorder: refuseremarks.value
        }
    }).then(res => {
        console.log("工单备注", res)
        uni.showToast({ title: res.code !== 1 ? res.msg : '编辑成功', icon: 'none' });
        if (res.code !== 1) return uModal1.value.loading = false;
        shoeEditRemarks.value = false;
        detail.remarks_workorder = refuseremarks.value;
    })
}

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;
            white-space: nowrap;
        }

        .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;
        }
    }

    .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>