xiamen-sb-uniapp/pages/equipment-detail/equipment-status.vue

<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <u-toast ref="uToast" />
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view class="p3 bg-color-white" style="margin-top: -50rpx; border-radius: 20rpx">
            <u-form :model="form" ref="uForm">
                <view class="main-color-text f-size-32 f-weight-6 mt-2">设备信息</view>
                <u-form-item label="设备名称" :label-width="150">
                    <u-input v-model="form.sbName" disabled />
                </u-form-item>
                <u-form-item label="设备编号" :label-width="150">
                    <u-input v-model="form.sbNo" disabled />
                </u-form-item>
                <view class="main-color-text f-size-32 f-weight-6 mt-2">变更信息</view>
                <u-form-item label="变更时间" required prop="changeTime" :label-width="150">
                    <u-input v-model="form.changeTime" @click="handleClick" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="变更原因" :label-width="150">
                    <u-input v-model="form.changeReason" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="变更人" required prop="actualUser" :label-width="150">
                    <u-input v-model="form.actualUser" :cursor-spacing="cursorSpacing" />
                </u-form-item>
                <u-form-item label="变更前状态" required :label-width="150">
                    <text class="f-size-26 mr-3 state-r">{{ statusMap[form.preStatus] }}</text>
                </u-form-item>
                <u-form-item label="变更后状态" required :label-width="150">
                    <text class="f-size-26 mr-3 state-r">{{ statusMap[form.afterStatus] }}</text>
                </u-form-item>
            </u-form>
            <u-picker @confirm="confirm" @cancel="cancel" mode="time" v-model="isShow"
                :params="pickerParams"></u-picker>
            <!-- <button class="main-color-bg text-color-white" @tap='handleSubmit'>提交</button> -->
            <view class="p-fixed d-flex j-around a-center footer">
                <view class="main-color-bg text-color-white common" @tap="handleSubmit">提交</view>
            </view>
        </view>
    </view>
</template>

<script>
import BaseTool from '../../utils/tool';

export default {
    data() {
        return {
            isShow: false,
            form: {
                sbId: '',
                sbNo: '',
                sbName: '',
                changeUserId: '',
                actualUser: '',
                preStatus: '',
                afterStatus: '',
                changeTime: '',
                changeReason: '',
                remarks: ''
            },
            pickerParams: {
                year: true,
                month: true,
                day: true,
                hour: true,
                minute: true,
                second: true,
                timestamp: true
            },
            statusMap: {},
            rules: {
                changeTime: [
                    {
                        required: true,
                        message: '请选择变更时间',
                        trigger: ['blur', 'change']
                    }
                ],
                actualUser: [
                    {
                        required: true,
                        message: '请输入变更人',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            // #ifdef MP-WEIXIN
            cursorSpacing: 50,
            // #endif
            // #ifndef MP-WEIXIN
            cursorSpacing: 0,
            // #endif
            sbBackId: '',
            aShow: false,
            address: '',
            sbId: null,
            aList: [
            ]
        };
    },
    onShow() {
    },
    onLoad(options) {
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.SB_INFO_STATUS
        );
        if (options && options.sbId) {
            console.log(options)
            this.form.sbId = options.sbId;
            this.form.sbNo = options.sbNo;
            this.form.sbName = options.sbName;
            this.form.preStatus = options.preStatus;
            this.form.afterStatus = options.afterStatus;
            this.form.actualUser = this.$BaseTool.UserUtil.getUserInfo().realName;
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        handleClick() {
            this.isShow = !this.isShow
        },
        confirm(values) {
            console.log(values)
            this.form.changeTime = values.year + '-' + values.month + '-' + values.day + ' ' + values.hour + ':' + values.minute + ':' + values.second
            console.log(this.form.changeTime)
        },
        cancel(values) {
            console.log(values)
            this.form.changeTime = null
        },
        handleSubmit() {
            console.log('点击')
            let time = null;
            if (this.form.changeTime != null) {
                time = this.$BaseTool.Date.formatter(this.form.changeTime, BaseTool.Date.PICKER_NORM_DATETIME_PATTERN);
            }
            console.log(this.form)
            const params = {
                sbId: this.form.sbId,
                actualUser: this.form.actualUser,
                preStatus: this.form.preStatus,
                afterStatus: this.form.afterStatus,
                changeTime: time,
                remarks: this.form.remarks,
                changeReason: this.form.changeReason
            };
            console.log(params)
            // this.form.photo = a.join(',');
            var that = this;
            this.$refs.uForm.validate((valid) => {
                console.log(valid)
                if (valid) {
                    this.$Http.addSbStatusLogIgnores(params).then((res) => {
                        uni.showToast({ icon: 'none', title: '变更记录已提交!', duration: 2000 });
                        setTimeout(function () {
                            uni.navigateTo({
                                url: '/pages/equipment-detail/equipment-detail?detailId=' + that.form.sbId
                            });
                        }, 2000)
                    });
                } else {
                    console.log(valid)
                }
            });
        }
    }
};
</script>

<style lang="less">
.footer {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10000;
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
        padding: 15rpx 200rpx;
        border-radius: 30rpx;
        background-color: #0082ff;
        color: #fff;
    }
}
</style>