water_affairs/select/device.vue

<template>
    <view class="container">
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                {{ title }}
            </block>
        </cu-custom>
        <My_listbox ref="List" @getlist="getList" :empty="empty">
            <view :class="[isActive(item[idKey])]" v-for="item in list" :key="item[idKey]" @click="onSelect(item)">
                设备：{{ item[showKey] }}
                <view class="row">
                    产品名称：{{ item.prodname || ' --' }}
                </view>
                <view class="row">
                    设备编号：{{ item.serialnumber || ' --' }}
                </view>
                <view class="row">
                    状态：{{ item.status || ' --' }}
                </view>
            </view>
            <view style="height:22vw;" />
        </My_listbox>
        <view class="but-box" v-if="extent != 1">
            <view style="width: 75vw;">
                <u-button :disabled="!value.length" type="primary" text="确定选择" color="rgba(42,106,242,.8)"
                    loadingText="执行中..." :loading="loading" @click="submit" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "points",
    computed: {
        isActive() {
            return function (id) {
                return this.value.some(v => v == id) ? "active item" : "item"
            };
        }
    },
    data() {
        return {
            list: [],
            ...this.$Http.route.data.param,
            empty: true,
            title: '',
            idKey: "",
            showKey: "",
            loading: false,
            value: [],
            showList: [],
            extent: -1,
        }
    },
    onLoad(options) {
        let data = this.$Http.route.data;
        this.title = '选择' + data.label
        this.param = data.param;
        this.idKey = data.idKey;
        this.showKey = data.showKey;
        this.value = data.value.value || [];
        this.showList = data.value.showList || [];
        this.extent = data.extent || -1;
        this.getList(true)
    },
    methods: {
        getList(init = false) {
            if (this.loading) return;
            let param = this.param;
            if (init) {
                param.content.pageNumber = 1;
                param.content.pageSize = param.content.pageSize || 20;
                param.content.pageTotal = 1;
            };
            if (param.content.pageNumber > param.content.pageTotal) return;
            this.loading = true;
            return this.$Http.basic(param).then(res => {
                this.loading = false;
                this.$refs.List.setHeight();
                console.log("选择列表", res)
                if (this.cutoff(res.msg)) return;
                this.$refs.List.RefreshToComplete();
                this.empty = res.total == 0;
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                param.content.pageNumber = res.pageNumber + 1;
                param.content.pageTotal = res.pageTotal;
            })
        },
        onSelect(item) {
            let id = item[this.idKey],
                that = this;
            if (this.value.some(v => v == id)) {
                this.value = this.value.filter(v => v != id)
                this.showList = this.showList.filter(v => v[this.showKey] != item[this.showKey])
            } else {
                if (this.extent == 1) {
                    uni.showModal({
                        title: '提示',
                        content: `是否确定选择"${item[this.showKey]}"`,
                        success: ({ confirm }) => {
                            that.value = [id];
                            that.showList = [item[this.showKey]];
                            if (confirm) that.submit()
                        },
                    })
                } else {
                    if (this.extent != -1 && this.value.length == this.extent) return uni.showToast({
                        title: '可选数量已上限',
                        icon: 'none',
                        duration: 1500,
                    })
                    this.value.push(id);
                    this.showList.push(item[this.showKey])
                }
            }
        },
        submit() {
            this.$Http.handleAdd({
                value: this.value,
                showList: this.showList,
            })
        }
    },
    onUnload() {
    }
}
</script>

<style lang="scss" scoped>
.item {
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    width: 355px;
    margin: 10px auto;
    border-radius: 4px;

    .row{
        font-size: 14px;
        margin-top: 6px;
    }
}

.active {
    background: #0054E1;
    color: #fff;
}


.but-box {
    position: absolute;
    width: 100vw;
    bottom: 30px;
    display: flex;
    justify-content: center;

    /deep/ .u-button__text,
    /deep/.u-button__loading-text {
        font-size: 14px !important;
    }

    /deep/.u-loading-icon__spinner {
        width: 17.25px !important;
        height: 17.25px !important;
    }
}
</style>