xiamen-sb-uniapp/pages/repair/repair.vue

<template>
    <view>
        <my-add-button @handleClick="handleClick" />
        <!-- 关键词搜索栏：与设备台账(equipment.vue)一致，后端 selectPageList keyword 已覆盖报修内容/报修人/维修人（含二三四维修人）等字段 -->
        <div class="bg-color-white py2">
            <u-search placeholder="设备名称/编号/单号/报修内容/报修人/维修人" clearabled v-model="keyword" @search="search" @custom="search" @clear="search"></u-search>
        </div>
        <!-- 	<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 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)"
                    @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.sbName }} ({{ item.sbNo }})</view>
                        <my-badge
                            :text="$BaseTool.Object.getField(statusMap, item.status)"
                            :status="
                                $DictCache.COLOR.REPAIR_APPLICATION_FORM_STATUS[item.status]
                            "
                        />
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                            item.actualUser
                        }}-{{
                            item.sbCph
                        }}</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 v-if="item.status === $DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ACCEPTANCE" class="text-color-3 f-size-32 edit">
                            <view @click.stop="handleApprove(item)">通过</view>
                        </view>
                        <view v-if="item.status === $DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ACCEPTANCE" class="text-color-3 f-size-32 edit">
                            <view @click.stop="handleReturn(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 {
            list: [
                {
                    name: '全部'
                },
                {
                    name: '待接单'
                },
                {
                    name: '进行中'
                },
                {
                    name: '待验收'
                },
                {
                    name: '待支付'
                }
            ],
            current: 0,
            // 加载更多
            status: 'loadmore',
            keyword: '',
            page: 1,
            limit: 10,
            type: '',
            loadMore: true,
            listData: [],
            statusMap: {},
            maskId: 0
        };
    },
    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
        );
    },
    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.deleteRepairApplicationForms(params).then(res => {
                            uni.showToast({ title: '删除成功' })
                            this.page = 1;
                            this.loadMore = true;
                            this.listData = [];
                            this.initData();
                        })
                    } else if (res.cancel) { }
                }
            });
        },
        handleReturn(item) {
            const that = this;

            uni.showModal({
                title: '提示',
                content: '确认驳回？',
                success: function (res) {
                    if (res.confirm) {
                        uni.navigateTo({
                            url: '/pages/repair/repair-return?id=' + item.id
                        });
                    }
                }
            });
        },
        // 通过
        handleApprove(item) {
            const that = this;
            uni.showModal({
                title: '提示',
                content: '确认通过？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.approve(item).then((res) => {
                            // console.log(res);
                            that.initData();
                        });
                    }
                }
            });
        },
        handleClick() {
            uni.navigateTo({
                url: '/pages/repair-add/repair-add'
            });
        },
        // tab
        change(index) {
            this.current = index;
            this.type = index;
            this.page = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        // 跳转详情
        handleDetail(id) {
            if (this.maskId != 0) return this.maskId = 0
            uni.navigateTo({
                url: '/pages/repair-detail/repair-detail?detailId=' + id
            });
        },
        // 点击搜索：重置分页后按关键词查询
        search() {
            this.page = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        // 关键词搜索默认时间起点：近三个月，避免大表多列 LIKE 全表扫描，保证查询性能（后端按 apply_time 过滤）
        getSearchStartTime() {
            const d = new Date();
            d.setMonth(d.getMonth() - 3);
            return this.$BaseTool.Date.formatter(d, this.$BaseTool.Date.PICKER_NORM_DATETIME_PATTERN);
        },
        // 初始化
        initData() {
            const that = this;
            that.status = 'loading';
            const kw = (this.keyword || '').trim();
            this.$Http
                .getRepairApplicationFormPage({
                    pageNum: this.page,
                    pageSize: this.limit,
                    keyword: kw,
                    // 仅在关键词搜索时默认限定近三个月，普通列表加载行为保持不变
                    searchStartTime: kw ? this.getSearchStartTime() : null,
                    // status: that.$DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.NOT_ALLOCATED,
                    dataScope: {
                      sortBy: 'asc, desc',
                        sortName: 'status, apply_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>