equipmentForm.vue

<template>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="设备名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入设备名称" :readonly="isReadOnly" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="检测日期" prop="test_date">
            <el-date-picker type="datetime" v-model="formData.test_date" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择检测日期" :readonly="isReadOnly" clearable>
            </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期" prop="validity">
            <el-date-picker type="datetime" v-model="formData.validity" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择有效期" clearable>
            </el-date-picker>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    inheritAttrs: false,
    components: {},
    props: {
        data: {
            type: Object
        },
        isReadOnly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            formData: {
                name: undefined,
                test_date: null,
                validity: null,
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入设备名称',
                    trigger: 'blur'
                }],
                test_date: [{
                    required: true,
                    message: '请选择检测日期',
                    trigger: 'change'
                }],
                validity: [{
                    required: true,
                    message: '请选择有效期',
                    trigger: 'change'
                }],
            },
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        if (this.data) this.formData = this.data;
    },
    methods: {}
}
</script>

<style>
</style>