xiamen-sb-uniapp/pages/transfer-approval/transfer-approval.vue

<template>
    <view>
        <view class="">
            <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.id)"
                >
                    <view class="d-flex j-between border-bottom pb-2 a-center">
                        <view class="text-color-b f-size-26">{{ item.sbName }}</view>
                        <my-badge text="转派审批中" status="processing" />
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                            item.userName
                        }}</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">
                            <view @click.stop="handleApprove(item)">同意</view>
                        </view>
                        <view class="text-color-3 f-size-32 edit">
                            <view @click.stop="handleReject(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>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 加载更多
            status: 'loadmore',
            page: 1,
            limit: 10,
            loadMore: true,
            listData: []
        };
    },
    onPullDownRefresh() {
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.loadMore) {
            this.page++;
            this.initData();
        }
    },
    onShow() {
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
    },
    methods: {
        // 同意转派
        handleApprove(item) {
            const that = this;
            uni.showModal({
                title: '同意转派',
                editable: true,
                placeholderText: '可填写审批意见（选填）',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http
                            .transferApprove({
                                id: item.id,
                                repairDispatchRemark: res.content || ''
                            })
                            .then(() => {
                                uni.showToast({ title: '已同意', icon: 'success' });
                                that.refresh();
                            });
                    }
                }
            });
        },
        // 驳回转派
        handleReject(item) {
            const that = this;
            uni.showModal({
                title: '驳回转派',
                editable: true,
                placeholderText: '请填写驳回原因',
                success: function (res) {
                    if (res.confirm) {
                        if (!res.content || !res.content.trim()) {
                            uni.showToast({ title: '请填写驳回原因', icon: 'none' });
                            return;
                        }
                        that.$Http
                            .transferReject({
                                id: item.id,
                                repairDispatchRemark: res.content
                            })
                            .then(() => {
                                uni.showToast({ title: '已驳回', icon: 'success' });
                                that.refresh();
                            });
                    }
                }
            });
        },
        // 跳转详情（复用报修审核详情，含转派记录展示）
        handleDetail(id) {
            uni.navigateTo({
                url: '/pages/repair-check/repair-detail?detailId=' + id
            });
        },
        refresh() {
            this.page = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        // 初始化：查询转派审批中（searchType=4）的工单
        initData() {
            const that = this;
            that.status = 'loading';
            this.$Http
                .getRepairApplicationFormPage({
                    pageNum: this.page,
                    pageSize: this.limit,
                    searchType: 4,
                    filter: 0,
                    dataScope: {
                        sortBy: 'desc',
                        sortName: 'update_time'
                    }
                })
                .then((res) => {
                    const data = res.data.rows;
                    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="less">
page {
  background-color: #f4f4f4;
}

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

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