xiamen-sb-uniapp/pages/running/running-batch-edit.vue

<template>
    <view class="mx3">
        <view class="main-color-bg main-bg-future"></view>
        <view class="p3 bg-color-white form-view">
            <u-form :model="form" ref="uForm" >
                <u-form-item
                    label="作业名称"
                    prop="projectQuantityId"
                    :label-width="220">
                    <my-select
                        :list="projectQuantityList"
                        :value-name="'id'"
                        :label-name="'name'"
                        v-model="form.projectQuantityId"
                        @selected="changeProjectQuantity"
                        placeholder="请选择"
                    />
                </u-form-item>
                <u-form-item
                    label="作业位置"
                    :label-width="220">
                    <view class="d-flex">
                        <u-input
                            style="width: 100rpx;"
                            v-model="form.projectQuantityStart"
                            type="number"
                            @blur="numBlur($event, 'projectQuantityStart')"
                            placeholder="起始值" />
                        <text class="px3">至</text>
                        <u-input
                            style="width: 100rpx;"
                            v-model="form.projectQuantityEnd"
                            type="number"
                            @blur="numBlur($event, 'projectQuantityEnd')"
                            placeholder="结束值" />
                        <u-input :disabled="true" style="width: 70rpx;" v-model="projectQuantitySiteUnit"/>
                    </view>
                </u-form-item>
            </u-form>
        </view>
        <view class="mt-3">
            <u-button @click="submit" type="primary" shape="circle">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                projectQuantityId: '',
                projectQuantityStart: 0,
                projectQuantityEnd: 0
            },
            projectQuantitySiteUnit: '无',
            projectQuantityList: [],
            projectQuantityUnitMap: {},
            rules: {
                projectQuantityId: [
                    {
                        required: true,
                        message: '请选择作业名称',
                        trigger: ['change']
                    }
                ],
                projectQuantityStart: [
                    {
                        required: true,
                        message: '请输入起始值',
                        trigger: ['blur', 'change']
                    }
                ],
                projectQuantityEnd: [
                    {
                        required: true,
                        message: '请输入结束值',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            id: '' // 列表 id
        };
    },
    onShow() {
        // 获取设备与仓库
        this.initData();
    },
    onLoad(options) {
        this.projectQuantityUnitMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.FILL_PROJECT_QUANTITY_UNIT)
    },
    // watch: {
    //     'form.projectQuantityStart': {
    //         handler(newVal, oldVal) {
    //             console.log(newVal, oldVal)
    //             if (!newVal && newVal !== 0) {
    //                 this.form.projectQuantityStart = 0
    //             }
    //         },
    //         deep: true
    //     }
    // },
    methods: {
        initData() {
            this.$Http.queryFillProjectQuantityDeptProject({ filter: 1 }).then(res => {
                this.projectQuantityList = res.data
            })
        },
        numBlur(e, type) {
            // console.log(!e, type === 'projectQuantityStart')
            // if (!e) {
            //     if (type === 'projectQuantityStart') {
            //         this.$set(this.form, 'projectQuantityStart', 0);
            //     } else {
            //         this.form.projectQuantityEnd = 0
            //     }
            // }
        },
        changeProjectQuantity(value, data) {
            console.log(value, data)
            this.projectQuantitySiteUnit = this.projectQuantityUnitMap[data.siteUnit]
        },
        submit() {
            this.$refs.uForm.validate(valid => {
                const sbRunList = uni.getStorageSync('sb-run-list');
                if (valid) {
                    if (!this.form.projectQuantityStart && this.form.projectQuantityStart !== 0) {
                        uni.showToast({ title: '起始值不能为空', icon: 'none' })
                        return
                    }
                    if (!this.form.projectQuantityEnd && this.form.projectQuantityEnd !== 0) {
                        uni.showToast({ title: '结束值不能为空', icon: 'none' })
                        return
                    }
                    this.$Http.batchUpdateProject({ ...this.form, targetIds: sbRunList }).then(res => {
                        uni.removeStorageSync('sb-run-list')
                        uni.redirectTo({
                            url: '/pages/running/running'
                        });
                    }).catch(() => {

                    })
                }
            });
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    }
};
</script>

<style lang="less">
page {
    background-color: #f4f4f4;
}
</style>