xiamen-sb-uniapp/pages/work-order/work-order.vue

<template>
    <view>
        <!-- <view class="border-bottom">
            <u-tabs
                class="p-fixed left0 right0 zIndex"
                :list="list"
                :is-scroll="false"
                :current="current"
                @change="change"
            ></u-tabs>
        </view> -->
        <view>
            <template v-if="listData.length > 0">
                <view
                    class="mx3 my2 p3 bg-color-white box p-relative"
                    v-for="(item, index) in listData"
                    :key="index"
                    @tap="handleDetail(item)"
                    @longpress="showMask(item.id, $event)"
                >
                    <common-mask
                        :item="item"
                        :maskId="maskId"
                        @hide="maskId = 0"
                        @del="handleDel(item.id)"
                    />
                    <view class="d-flex j-between border-bottom pb-2 a-center">
                        <view class="text-color-b f-size-26">{{
                            item.no
                        }}</view>
                        <view class="f-size-24 state-orange">{{
                            statusMap[item.status]
                        }}</view>
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                            item.sbName
                        }} ({{ item.sbNo }})</view>
                    </view>
                    <view class="f-size-26 text-color-6 f-weight-4 mt-2">{{
                        item.applyTime
                    }}</view>
                    <view class="d-flex j-end edit-box">
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="
                                [
                                    $DictCache.VALUE
                                        .REPAIR_APPLICATION_FORM_STATUS.NOT_ALLOCATED,
                                    $DictCache.VALUE
                                        .REPAIR_APPLICATION_FORM_STATUS.REBACK,
                                ].includes(item.status)
                            "
                        >
                            <view @click.stop="handleDealEdit(item)">接收</view>
                        </view>
                        <!-- 仅维修中（状态2）可转派，与后端 transfer 接口状态校验保持一致 -->
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="

                                item.status ===
                                    $DictCache.VALUE
                                        .REPAIR_APPLICATION_FORM_STATUS.PROCESSING
                            "
                        >
                            <view
                                @click.stop="handleDispatching(item)"
                            >转派</view
                            >
                        </view>
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="
                                [
                                    $DictCache.VALUE
                                        .REPAIR_APPLICATION_FORM_STATUS
                                        .PROCESSING,
                                    $DictCache.VALUE
                                        .REPAIR_APPLICATION_FORM_STATUS.REBACK,
                                ].includes(item.status)
                            "
                        >
                            <view @click.stop="handleEdit(item)">维修</view>
                        </view>
                    </view>
                </view>
                <view class="py3">
                    <u-loadmore :status="status" />
                </view>
            </template>
            <template v-else>
                <view class="empty">
                    <u-empty text="暂无数据" mode="list"></u-empty>
                </view>
            </template>
        </view>
        <u-tabbar
            :list="tabbar"
            :mid-button="true"
            active-color="#0082ff"
        ></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    name: '全部'
                },
                {
                    name: '待接单'
                },
                {
                    name: '维修中'
                },
                {
                    name: '待验收'
                },
                {
                    name: '已完成'
                }
            ],
            current: 0,
            // 加载更多
            status: 'loadmore',
            page: 1,
            limit: 10,
            type: '',
            loadMore: true,
            listData: [],
            statusMap: {},
            sourceMap: {},
            maskId: 0,
            tabbar: [
                {
                    iconPath: '/static/tabars/home.png',
                    pagePath: '/pages/home/home',
                    selectedIconPath: '/static/tabars/home_s.png',
                    text: '首页'
                },
                {
                    iconPath: '/static/tabars/tiding.png',
                    pagePath: '/pages/tidings/tidings',
                    selectedIconPath: '/static/tabars/tiding_s.png',
                    text: '消息'
                },
                {
                    iconPath: '/static/tabars/publish.png',
                    pagePath: '/pages/middle/middle',
                    selectedIconPath: '/static/tabars/publish.png',
                    text: '报修',
                    midButton: true
                },
                {
                    iconPath: '/static/tabars/order.png',
                    pagePath: '/pages/work-order/work-order',
                    selectedIconPath: '/static/tabars/order_s.png',
                    text: '工单'
                },
                {
                    iconPath: '/static/tabars/mine.png',
                    pagePath: '/pages/my/my',
                    selectedIconPath: '/static/tabars/mine_s.png',
                    text: '我的'
                }
            ]
        };
    },
    onPullDownRefresh() {
        // 请求结束取消刷新
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.loadMore) {
            this.page++;
            this.initData();
        }
    },
    onLoad() {
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS
        );
        this.sourceMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE
        );
    },
    onShow() {
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
    },
    onHide() {
        this.maskId = 0;
    },
    methods: {
        showMask(id, e) {
            this.maskId = id;
            // #ifdef H5
            e.preventDefault();
            // #endif
        },
        handleDel(id) {
            const that = this;
            const params = [];
            params.push(id);
            uni.showModal({
                title: '提示',
                content: '您确认删除吗?',
                success: (res) => {
                    if (res.confirm) {
                        this.$Http.deleteRepairForms(params).then((res) => {
                            uni.showToast({ title: '删除成功' });
                            this.page = 1;
                            this.loadMore = true;
                            this.listData = [];
                            this.initData();
                        });
                    } else if (res.cancel) {
                    }
                }
            });
        },
        handleDealEdit(item) {
            const that = this;
            uni.showModal({
                title: '提示',
                content: '确认接收该维修任务？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.repairFormDeal(item).then((res) => {
                            that.page = 1;
                            that.loadMore = true;
                            that.listData = [];
                            that.initData();
                        });
                    }
                }
            });
        },
        handleDispatching(item) {
            uni.showModal({
                title: '提示',
                content: '确认转派？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        uni.navigateTo({
                            url: '/pages/deliver-add/deliver-add?id=' + item.id
                        });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        handleEdit(item) {
            uni.navigateTo({
                url: '/pages/service-add/service-add?id=' + item.id
            });
        },
        // tab
        change(index) {
            this.current = index;
            // type 做相应改变
            this.type = index;
            this.page = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        // 跳转详情
        handleDetail(item) {
            // if (index == 0) {
            // 	uni.navigateTo({
            // 			url: '../service-add/service-add'
            // 	});
            // } else {
            // 	uni.navigateTo({
            // 			url: '../service-detail/service-detail'
            // 	});
            // }
            if (this.maskId != 0) return (this.maskId = 0);
            uni.navigateTo({
                url: '/pages/service-detail/service-detail?id=' + item.id
            });
        },
        initData() {
            const that = this;
            that.status = 'loading';

            this.$Http
                .getRepairApplicationFormPage({
                    pageNum: this.page,
                    pageSize: this.limit,
                    filter: 0,
                    searchType: 2,
                    dataScope: {
                        sortBy: 'desc',
                        sortName: 'update_time'
                    }
                })
                .then((res) => {
                    const data = res.data.rows;
                    console.log(res);
                    if (data && data.length > 0 && data.length < that.limit) {
                        that.status = 'nomore';
                        that.loadMore = false;
                    } else if (data.length == that.limit) {
                        that.status = 'loadmore';
                    } else {
                        that.status = 'nomore';
                    }
                    that.listData = [...that.listData, ...data];
                });
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f4f4f4;
}

.box {
    padding-right: 0;
    border-radius: 20rpx;
}

.edit-box {
    padding: 0 30rpx;
    margin-top: 40rpx;

    .edit {
        padding: 8rpx 40rpx;
        border: 1px solid #ddd;
        border-radius: 20rpx;
        font-size: 26rpx;
        color: #666;
        margin-left: 30rpx;
    }
}
</style>