aiot-app/pages/purchasingManage/components/timePopup.vue

<template>
    <uni-popup ref="popup" :showClose="true" background-color="#fff" @change="change">
        <scroll-view class="scroll-content" scroll-y style="height: 80vh;">
            <view class="popup-title">
                <text>待分配数量：{{ count }}</text>
                <u-button v-if="!isView" class="popup-title-btn" type="primary" @click="handleAddDate" text="新增" ></u-button>
            </view>
            <uni-table ref="table" border stripe emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th width="100" align="center">数量</uni-th>
                    <uni-th width="150" align="center">到货时间</uni-th>
                    <uni-th width="80" align="center">操作</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td><uni-number-box v-model="item.arriveCount" :disabled="isView" :min="0" :max="getCountMax(item)" @change="(v) =>changeCountValue(v, index)" /></uni-td>
                    <uni-td>
                        <uni-datetime-picker :disabled="isView" type="date" v-model="item.arriveDate"></uni-datetime-picker>
                    </uni-td>
                    <uni-td>
                        <button v-if="!isView" class="uni-button" size="mini" type="warn" @click="handleDelDate(index)">删除</button>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="footerButton" v-if="!isView">
                <u-button type="default" @click="handleClose" text="关闭"></u-button>
                <u-button type="primary" @click="handleConfirm" text="确认"></u-button>
            </view>
        </scroll-view>
    </uni-popup>
</template>
<script>
export default {
    props: {
        isView: {
            default: false
        }
    },
    data() {
        return {
            count: 0, //待分配数量
            tableData: [], //表格数据
        }
    },
    computed: {
        getCountMax() {
            return (row) => {
                let maxCount = this.current.totalCount * 1 || 0;
                let usedCount = this.tableData.reduce((n, item) => {
                    n += item.arriveCount * 1;
                    return n;
                }, 0);
                return maxCount - usedCount + row.arriveCount * 1;
            };
        }
    },
    methods: {
        open(current, index) {
            this.current = current;
            this.currentIndex = index;
            // this.count = this.current.totalCount * 1 || 0;
            this.changeCountValue();
            this.$refs.popup.open('bottom');
            if(current.arrivalBatch) {
                this.tableData = current.arrivalBatch
            } else {
                this.tableData = []
            }
        },
        change(e) {
            console.log('当前模式：' + e.type + ',状态：' + e.show);
        },
        // 新增
        handleAddDate() {
            this.tableData.push({
                arriveCount: null,
                arriveDate: null,

            })
        },
        handleDelDate(index) {
            this.count += this.tableData[index].arriveCount;
            this.tableData.splice(index, 1);
        },
        changeCountValue(v, index) {
            if(v !== null && v !== undefined) {
                this.tableData[index].arriveCount = v;
            }
            console.log('列表', v, this.tableData)
            if (this.tableData.length) {
                let num = this.tableData.reduce((n, item) => {
                    n += item.arriveCount * 1;
                    return n;
                }, 0);
                this.count = this.current.totalCount * 1 - num || 0;
            } else {
                this.count = this.current.totalCount * 1 || 0;
            }
        },
        handleConfirm() {
            console.log('确认', this.count)
            if (this.count != 0) {
                uni.showToast({ icon: 'none', title: '分配数量有误，请检查！'})
                return
            }

            // 检查tableData数组中是否有空值
            for (let i = 0; i < this.tableData.length; i++) {
                const item = this.tableData[i];
                if (item.arriveCount === null || item.arriveCount === undefined || !item.arriveDate) {
                    return uni.showToast({ icon: 'none', title: `第${i + 1}行数据不完整，请检查数量和到货时间！`});
                }
            }
            
            this.$emit('confirm', this.tableData);
            this.handleClose()
        },
        handleClose() {
            this.$refs.popup.close()
        },
    }
}
</script>
<style scoped lang="scss">
    .footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;
		background-color: #fff;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}
    .scroll-content {
        padding: 20rpx;
    }
    .popup-title {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}
	.popup-title-btn {
		width: 100rpx;
		margin-right: 20rpx;
	}
</style>