MD_worker/pages/workOrder/index.vue

<template>
    <view v-if="!['待接单', '已完工'].includes(content.where.status)" style="background-color: #fff;">
        <up-tabs lineColor="#3874F6" :current="current" :scrollable="false" :list="tabList" @click="tabClick" />
    </view>
    <My_listbox ref="listBox" :empty="!list.length" @getlist="getList">
        <view style="height: 18rpx;" />
        <navigator class="item" v-for="item in list" :key="item.sa_workorderid" url="#" @click="toDetail(item)"
            hover-class="navigator-hover">
            <view class="head">
                <view style="display: flex;">
                    <view class="tag" :style="{
                        'color': { '待接单': '#3874F6', '待开始': '#3874F6', '待服务': '#F56C6C', '进行中': '#67C23A', '提交': '#171919', '已完工': '#171919' }[item.status] || '#999999',
                        'background': {
                            '待接单': '#E6F0FF',
                            '待开始': '#E6F0FF',
                            '待服务': '#FFECEF',
                            '进行中': '#F0F9EB',
                            '提交': '#F7F7F7',
                            '已完工': '#F7F7F7'     // 与提交共用浅灰背景
                        }[item.status] || '#F5F5F5',
                        marginRight: '20rpx',
                    }">
                        {{ item.status }}
                    </view>
                    <view class="tag" :style="{
                        'background': { '安装': '#E8F8D5', '维修': '#FFE2E5', '清洁': '#E2EBFF', '清洗': '#E2EBFF' }[item.type] || '#F0F0F0',
                        'color': { '安装': '#4B8E00', '维修': '#B00016', '清洁': '#2A5AD9', '清洗': '#2A5AD9' }[item.type] || '#333333'
                    }">
                        {{ item.type }}
                    </view>
                </view>
                <view class="time">
                    {{ item.createdate }}
                </view>
            </view>
            <view class="address">
                产品：{{ item.itemname }}
            </view>
            <view class="address">
                型号：{{ item.model }}
            </view>
            <view class="address">
                备注：{{ item.remarks || '--' }}
            </view>
            <view class="address">
                地址：{{ item.address }}
            </view>
            <view class="user">
                现场联系人：{{ item.scenecontact + ' ' + item.scenecontactphonenumber }}
            </view>
            <view v-if="content.where.status != '已完工'" class="but-box" @click.stop>
                <view class="but-box-item">
                    <My-button :customStyle="{
                        'background-color': '#FFFFFF',
                        'color': '#3874F6',
                        height: '70rpx',
                    }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="item.scenecontactphonenumber" />
                </view>
                <view v-if="content.where.status == '待接单'" class="but-box-item" @click="openModel(item)">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-jiedan" text="接单" />
                </view>
                <view v-if="content.where.status == '提交'" class="but-box-item">
                    <My-button @onClick="completion(item)" :customStyle="{
                        height: '70rpx',
                    }" text="确认完工" />
                </view>
                <navigator v-if="content.where.status != '待接单' && content.where.status != '提交'"
                    :url="'/pages/workOrder/detail?id=' + item.sa_workorderid" class="but-box-item">
                    <My-button :customStyle="{
                        height: '70rpx',
                    }" frontIcon="icon-jiedan" text="报工" />
                </navigator>
            </view>
        </navigator>
    </My_listbox>
    <up-modal negativeTop="100" :show="takeOrderShow" title="是否确认接单？" showCancelButton @confirm="takeOrders"
        @cancel="takeOrderShow = false" ref="uModal" :asyncClose="true"></up-modal>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad, onShow } from '@dcloudio/uni-app';

// 完成工单 
function completion(item) {
    uni.showModal({
        title: '提示',
        confirmText: '确认完工',
        content: '请确认工单内容，完工后不可修改！',
        success: ({ confirm }) => {
            if (confirm) {
                $Http.basic({
                    id: 20230209144903,
                    "content": {
                        "sa_workorderid": item.sa_workorderid
                    }
                }).then(res => {
                    console.log("提交结果", res)
                    uni.showToast({
                        title: res.code == 1 ? '完工成功' : res.msg,
                        icon: 'none'
                    });
                    if (res.code == 1) getList(true);
                })
            }
        },
    })
}

function toDetail(item) {
    if (item.status == '待开始') {
        uni.navigateTo({
            url: '/pages/workOrder/changeMsg?id=' + item.sa_workorderid,
        })
    } else {
        uni.navigateTo({
            url: '/pages/workOrder/detail?id=' + item.sa_workorderid,
        })
    }
}

const listBox = ref(null);
const content = reactive({
    "nocache": true,
    loading: false,
    isadmin: 0,
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
        "status": '',
        "condition": ""
    }
});
const list = ref([])

function tabClick(e) {
    content.where.status = e.value || e.name;
    getList(true);
    listBox.value.backToTop()
}

onLoad((options) => {
    switch (options.type) {
        case '待接单':
            uni.setNavigationBarTitle({
                title: '待接工单'
            });
            content.where.status = options.type;
            break;
        case '进行中':
            uni.setNavigationBarTitle({
                title: '进行中工单'
            });
            content.where.status = '进行中';
            break;
        case '已完工':
            uni.setNavigationBarTitle({
                title: '已完工工单'
            });
            content.where.status = '已完工';
            break;
    }
    getList();
    getBadge();
});

onShow(() => {
    if (content.pageNumber != 1) {
        $Http.updateList(content, getList)
        getBadge();
    }
})

function getList(init = false) {
    if (content.loading) return;
    if (init) content.pageNumber = 1;
    content.loading = true;
    $Http.basic({
        "id": "20230208140203",
        content
    }).then(res => {
        console.log("获取列表", res)
        content.loading = false;
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        if (res.code == 1) {
            list.value = reactive(res.firstPage ? res.data : list.value.concat(res.data));
            content.pageTotal = res.pageTotal;
            content.pageNumber = res.pageNumber;
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

let tabList = ref([
    {
        name: '待开始',
    },
    {
        name: '进行中',
    },
    {
        name: '已提交',
        value: '提交'
    }
]),
    current = ref(1);
function getBadge() {
    return
    if (!['待接单', '已完工'].includes(content.where.status)) Promise.all(
        tabList.value.map(v =>
            $Http.basic({
                "id": "20230208140203", "content":
                    { "pageNumber": 1, "pageSize": 0, "nocache": true, "where": { "status": v.value || v.name } }
            })
        )
    ).then(res => {
        let changeCurrent = false;
        res.forEach((v, index) => {
            let value = v.code !== 0 ? v.total : 0
            tabList.value[index].badge = {
                value
            }
            if (tabList.value[index].name == '进行中' && value == 0) changeCurrent = true;
        })
        if (changeCurrent) {
            let index = tabList.value.findIndex(v => v.badge.value > 0);
            current.value = index == -1 ? 0 : index;
            content.where.status = tabList.value[current.value].value || tabList.value[current.value].name;
            getList(true);
        }
    })
}

let takeOrderShow = ref(false);
let takeItem = null;

function openModel(item) {
    takeItem = item;
    takeOrderShow.value = true;
}

function takeOrders() {
    $Http.basic({
        id: 20230210101103,
        "content": {
            "sa_workorderid": takeItem.sa_workorderid
        }
    }).then(res => {
        console.log("接单结果", res)
        if (res.code == 1) {
            takeOrderShow.value = false;
            uni.navigateTo({
                url: '/pages/workOrder/detail?id=' + takeItem.sa_workorderid,
                success: (result) => {
                    uni.showToast({
                        title: '接单成功',
                        icon: 'none'
                    });
                },
            })
            $Http.updateList(content, getList)
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

</script>

<style lang="scss" scoped>
.item {
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    margin: 0 auto 20rpx;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    border-radius: 16rpx;

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tag {
            font-family: PingFang SC, PingFang SC;
            font-size: 24rpx;
            padding: 8rpx 20rpx;
            border-radius: 8rpx;
        }

        .time {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 24rpx;
            color: #999999;
        }
    }

    .address {
        line-height: 38rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 28rpx;
        color: #333333;
        margin-top: 20rpx;
    }

    .user {
        line-height: 32rpx;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-size: 24rpx;
        color: #999999;
        margin-top: 20rpx;
    }

    .but-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 20rpx;

        .but-box-item {
            width: 40%;
        }
    }
}
</style>