bns_zhgd_web/src/views/perception-devices/equipment-manage/components/add-edit-form.vue

<template>
    <!-- 新增修改弹框 -->
    <div>
        <el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
            <!-- <TitleTip :titleText="`基本信息`" /> -->
            <el-form-item label="所属工程：" prop="projectName">
                <el-input v-model="addOrEditForm.projectName" clearable />
            </el-form-item>
            <el-form-item label="设备类型：" prop="ownerUnit">
                <!-- <el-input v-model="addOrEditForm.ownerUnit" clearable /> -->

                <el-select v-model="addOrEditForm.ownerUnit" clearable filterable>
                    <el-option v-for="type in typeList" :key="type.id" :label="type.label" :value="type.id" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="计划开工日期：" prop="planStartTime">
                <el-date-picker
                    type="date"
                    style="width: 100%"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    v-model="addOrEditForm.planStartTime"
                />
            </el-form-item>
            <el-form-item label="计划竣工日期：" prop="planEndTime">
                <el-date-picker
                    type="date"
                    style="width: 100%"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    v-model="addOrEditForm.planEndTime"
                />
            </el-form-item> -->

            <!-- <TitleTip :titleText="`其他信息`" /> -->
            <el-form-item label="设备名称：">
                <el-input v-model="addOrEditForm.address" clearable />
            </el-form-item>

            <el-form-item label="设备编码：">
                <el-input v-model="addOrEditForm.projectAmount" clearable />
            </el-form-item>
            <el-form-item label="设备级联编码：">
                <el-input v-model="addOrEditForm.projectManager" clearable />
            </el-form-item>
            <el-form-item label="设备状态：">
                <el-input
                    clearable
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                    v-model="addOrEditForm.projectScale"
                />
            </el-form-item>

            <el-form-item label="设备信号：">
                <el-input v-model="addOrEditForm.projectAmount" clearable />
            </el-form-item>

            <el-form-item label="监测区域：">
                <el-input v-model="addOrEditForm.projectAmount" clearable />
            </el-form-item>

            <el-form-item label="所属边代：">
                <el-input v-model="addOrEditForm.projectAmount" clearable />
            </el-form-item>

            <el-form-item class="handle">
                <el-button> 取消 </el-button>
                <el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addProjectAPI } from '@/api/project-manage/index.js'
export default {
    data() {
        const validatePlanStartTime = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请选择计划开工日期'))
            }
            const endTime = this.addOrEditForm.planEndTime
            if (endTime && new Date(value) >= new Date(endTime)) {
                return callback(new Error('计划开工日期必须小于计划竣工日期'))
            }
            callback()
        }
        const validatePlanEndTime = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请选择计划竣工日期'))
            }
            const endTime = this.addOrEditForm.planStartTime
            if (endTime && new Date(value) <= new Date(endTime)) {
                return callback(new Error('计划竣工日期必须大于计划开工日期'))
            }
            callback()
        }
        return {
            // 新增或修改接口
            addOrEditForm: {
                projectName: '', // 项目名称
                ownerUnit: '', // 业主单位
                planStartTime: '', //计划开工日期
                planEndTime: '', // 计划竣工日期
                address: '', // 项目地址
                projectAmount: '', // 项目金额
                projectManager: '', // 项目负责任人
                projectScale: '', // 工程规格
            },
            addOrEditFormRef: {
                projectName: [
                    {
                        required: true,
                        message: '项目名称',
                        trigger: 'blur',
                    },
                    {
                        min: 1,
                        max: 30,
                        message: '长度在 1 到 30 个字符',
                        trigger: 'blur',
                    },
                ],
                ownerUnit: [
                    {
                        required: true,
                        message: '请输入业主单位',
                        trigger: 'blur',
                    },
                    {
                        min: 1,
                        max: 20,
                        message: '长度在 1 到 20 个字符',
                        trigger: 'blur',
                    },
                ],
                planStartTime: [
                    {
                        required: true,
                        message: '请选择计划开工日期',
                        trigger: 'change',
                    },
                    { validator: validatePlanStartTime, trigger: 'change' },
                ],
                planEndTime: [
                    {
                        required: true,
                        message: '请选择计划竣工日期',
                        trigger: 'change',
                    },
                    { validator: validatePlanEndTime, trigger: 'change' },
                ],
            },
        }
    },

    methods: {
        handleClose() {
            this.$refs.addOrEditFormRef.resetFields()
            // this.$emit('update:formDialogVisible', false)
        },
        // 表单提交
        onSubmitForm() {
            this.$refs.addOrEditFormRef.validate(async (valid) => {
                if (valid) {
                    const res = await addProjectAPI(this.addOrEditForm)
                    if (res.code === 200) {
                        this.$modal.msgSuccess('新增成功')
                    }
                    // this.$emit('update:formDialogVisible', false)
                    this.$emit('onCloseDialog')
                }
            })
        },
    },
    async mounted() {},
    watch: {},
}
</script>

<style lang="scss" scoped></style>