hitch-sb-antd/src/views/fill/update-record/modules/BaseForm.vue

<template>
    <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
        <a-row :gutter="48" slot="extra">
            <a-col :md="48" :sm="48">
              <span class="table-page-search-submitButtons" style="float: right">
                <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
                <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
              </span>
            </a-col>
        </a-row>
        <a-form :form="form">

            <a-form-item v-show="false">
                <a-input v-decorator="['id']" type="hidden"/>
                                                                                                                                                                                                                                                                                                                                                            </a-form-item>

            <row-list :col="2">
                                                                                                                                                                                                                                                                                                                        <row-item>

                            <a-form-item
                                    label="巡检任务ID"
                                    :labelCol="BaseTool.Constant.labelCol"
                                    :wrapperCol="BaseTool.Constant.wrapperCol"
                            >
                                                                    <a-input
                                            v-decorator="['taskId', {rules: [{required: true, message: '巡检任务ID不能为空'}]}]"/>
                                                            </a-form-item>
                        </row-item>
                                                                                <row-item>

                            <a-form-item
                                    label="备注"
                                    :labelCol="BaseTool.Constant.labelCol"
                                    :wrapperCol="BaseTool.Constant.wrapperCol"
                            >
                                                                    <a-input
                                            v-decorator="['remark', {rules: [{required: true, message: '备注不能为空'}]}]"/>
                                                            </a-form-item>
                        </row-item>
                                                                                <row-item>

                            <a-form-item
                                    label="延迟小时"
                                    :labelCol="BaseTool.Constant.labelCol"
                                    :wrapperCol="BaseTool.Constant.wrapperCol"
                            >
                                                                    <a-input-number
                                            style="width: 100%"
                                            :min="0"
                                            :formatter="BaseTool.Amount.formatter"
                                            :parser="BaseTool.Amount.parser"
                                            v-decorator="['lateHour', {rules: [{required: true, message: '延迟小时不能为空'}]}]"/>
                                                            </a-form-item>
                        </row-item>
                                                </row-list>
        </a-form>
                                                                                                                                                                                                                                                                                                                                                                                                                        </a-card>
</template>

<script>
    import pick from 'lodash.pick'
    import {addFillUpdateRecord, updateFillUpdateRecord } from '@/api/fill/update-record'
                                                                                                                                                                                                                                                                                                                                                                                                                        export default {
        name: 'BaseFillUpdateRecord',
        data () {
            return {
                confirmLoading: false,
                modalTitle: null,
                form: this.$form.createForm(this),
                visible: false,
            // 下拉框map
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
        },
        props: {},
        created () {
            // 下拉框map
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        },
        methods: {
            base (record) {
                this.visible = true
                // 如果是空标识添加
                if (this.BaseTool.Object.isBlank(record)) {
                    this.modalTitle = '添加'
                    return
                }
                this.modalTitle = '编辑'
                const {form: {setFieldsValue}} = this
                // 日期处理
                                this.$nextTick(() => {
                    setFieldsValue(Object.assign(pick(record, [
                                                                                    'id',
                                                                                                                                                                                                                                                                                                                                                                                                                                        'taskId',
                                                                                                                'remark',
                                                                                                                'lateHour',
                                                    ])))
                })
            },
            save () {
                const {form: {validateFieldsAndScroll}} = this
                this.confirmLoading = true
                validateFieldsAndScroll((errors, values) => {
                    if (errors) {
                        this.confirmLoading = false
                        return
                    }
                    // 日期处理
                                        if (this.BaseTool.String.isBlank(values.id)) {
                        addFillUpdateRecord(values)
                                .then(() => {
                                    this.handleCancel(values)
                                }).catch(() => {
                            this.confirmLoading = false
                        })
                    } else {
                        updateFillUpdateRecord(values)
                                .then(() => {
                                    this.handleCancel(values)
                                }).catch(() => {
                            this.confirmLoading = false
                        })
                    }
                })
            },
            handleCancel (values) {
                this.visible = false
                this.confirmLoading = false
                this.form.resetFields()
                if (this.BaseTool.Object.isNotBlank(values)) {
                    this.$emit('ok', values)
                } else {
                    this.$emit('ok')
                }
            }
                                                                                                                                                                                                                                                                                                            }
    }
</script>