wdt_erp_process_h5/pages/edt/WorkOverChoose.vue

<template>
    <view style="width: 100%;">
        <u-action-sheet :show="show" @close="onClose">
            <view class="cu-bar bg-white">
                <view class="action text-blue"  @tap="onClose">取消</view>
                <view class="action text-green" @tap="selectUsers">确定</view>
            </view>
            <view style="max-height: 300px; overflow-y: auto;">
                <!-- 标题行 -->
                <view style="padding: 10px; font-weight: bold; display: flex; align-items: center;">
                    <view style="flex: 1;text-align: left;">工单编号</view>
                    <view style="flex: 1;text-align: left;">创建时间</view>
                    <view style="flex: 1;text-align: left;">备注</view>
                </view>
                <view v-for="item in data" :key="item.id" style="padding: 10px;">
                    <view @tap="onItemClick(item)" style="display: flex; align-items: center;">
                        <view style="flex: 1;text-align: left; ">{{ item.no }}</view>
                        <view style="flex: 1;text-align: left; ">{{ item.showCreateTime }}</view>
                        <view style="flex: 1;text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.remarks }}</view>
                        <view v-if="item.checked" style="color: #409eff;">已选择</view>
                        <!--<view v-if="item.checked" style="color: #409eff;">✔</view>-->
                    </view>
                </view>
            </view>
            <view v-if="!allDataLoaded && !loading" style="text-align: center; padding: 10px;">
                <button class="load-more-button" @tap="loadMore">加载更多</button>
            </view>
            <view v-if="loading" style="text-align: center; padding: 10px;">
                Loading...
            </view>
        </u-action-sheet>
    </view>
</template>

<script>
    import overService from '@/api/garbageClearance/overService'

    export default {
        data() {
            return {
                checkType: '1',
                show: false,
                labels:'',
                index:'',
                type:'',
                data: [],
                localMode: '', // 声明一个本地数据属性
                allDataLoaded: false, // 跟踪是否所有数据都已加载
                loading: false, // 跟踪加载状态
                pageSize: 10, // 每页获取的项目数
                currentPage: 1 // 当前页数
            };
        },
        props: {
            value: String,
            placeholder: {
                type: String,
                default: '请选择项目'
            },
            readonly: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
        },
        mounted() {
            // this.loadData();
        },
        methods: {
            init(index) {
                this.pageSize = 10
                this.currentPage = 1
                this.show = true;
                this.index = index;
                this.localMode = 'multiple'
                this.loadData();
            },
            onItemClick(item) {
                if (this.localMode  === 'single') {
                    this.data.forEach(node => {
                        node.checked = node === item;
                    });
                } else {
                    item.checked = !item.checked;
                }
            },
            selectUsers() {
                if (this.data.some(item => item.checked)) {
                    let checkedItems = this.data.filter(item => item.checked).map(item => {
                        return {
                            id: item.id,
                            no: item.no,
                        };
                    });
                    this.$emit('input', checkedItems, this.index);
                    this.onClose()
                } else {
                    uni.showToast({
                        title: '请至少选择一条数据',
                        icon: 'none',
                        duration: 2000
                    });
                }
            },
            loadData() {
                this.loading = true; // 开始加载数据，显示loading状态
                overService.getNotDisposeList({ disposeStatus: 1, current: this.currentPage, pageSize: this.pageSize })
                    .then(data => {
                        this.loading = false; // 数据加载完成，隐藏loading状态
                        // 检查新返回的数据是否已经存在，如果存在，则不添加到原始数据数组中
                        let newData = data.records.filter(record => !this.data.some(item => item.id === record.id));
                        if (this.currentPage === 1) {
                            // 如果是加载第一页，则直接赋值给 data
                            this.data = newData.map(item => ({ ...item, checked: false }));
                        } else {
                            // 如果不是第一页，则追加到原始数据数组后面
                            this.data = [...this.data, ...newData.map(item => ({ ...item, checked: false }))];
                        }
                        if (data.records.length < this.pageSize) {
                            this.allDataLoaded = true; // 如果返回的数据少于每页数量，则表示所有数据都已加载
                        }
                        if (this.value) {
                            let keys = this.value.split(',');
                            this.data.forEach(node => {
                                if (keys.includes(node.id)) {
                                    node.checked = true;
                                }
                            });
                            this.labels = this.data.filter(node => node.checked).map(node => node.label).join(',');
                        }
                    })
                    .catch(e => {
                        this.loading = false; // 数据加载失败，隐藏loading状态
                        throw e;
                    });
            },
            loadMore() {
                this.currentPage++; // 增加当前页数
                this.loadData(); // 加载更多数据
            },
            onClose() {
                // 在关闭操作中清除已选择标记
                this.data.forEach(item => {
                    item.checked = false;
                });
                this.labels = ''; // 清空标签
                this.show = false;
                this.data = []; // 清空原始数据
            },
            checkTypeChange(value){
                this.pageSize = 10
                this.currentPage = 1
                this.data = []; // 清空原始数据
                this.loadData(); // 加载更多数据
            },
            isEmpty(value) {
                let result = false;
                if (value == null || value == undefined) {
                    result = true;
                }
                if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
                    result = true;
                }
                if (typeof value == "object" && value instanceof Array && value.length === 0) {
                    result = true;
                }
                return result;
            },
            isNotEmpty (value) {
                return !this.isEmpty(value)
            },
        }
    };
</script>

<style scoped>
    .load-more-button {
        background-color: #409eff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>