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">
            <!-- <el-form-item label="所属工程：" prop="projectName">
                <el-select v-model="addOrEditForm.projectName" clearable filterable style="width: 100%">
                    <el-option v-for="type in projectList" :key="type.id" :label="type.label" :value="type.id" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="设备类型：" prop="typeId">
                <el-select v-model="addOrEditForm.typeId" clearable filterable style="width: 100%">
                    <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="devName">
                <el-input placeholder="请输入设备名称" v-model="addOrEditForm.devName" clearable />
            </el-form-item>

            <el-form-item label="设备编码：" prop="deviceCode">
                <el-input placeholder="请输入设备编码" v-model="addOrEditForm.deviceCode" clearable />
            </el-form-item>
            <el-form-item label="设备级联编码：">
                <el-input placeholder="请输入设备级联编码" v-model="addOrEditForm.casDeviceCode" clearable />
            </el-form-item>
            <el-form-item label="设备状态：" prop="status">
                <el-select v-model="addOrEditForm.status" clearable filterable style="width: 100%">
                    <el-option label="在线" value="1" />
                    <el-option label="离线" value="2" />
                </el-select>
            </el-form-item>

            <el-form-item label="设备信号：">
                <el-input placeholder="请输入设备信号" v-model="addOrEditForm.wifi" clearable />
            </el-form-item>

            <el-form-item label="监测区域：" prop="area">
                <el-select v-model="addOrEditForm.area" clearable filterable style="width: 100%">
                    <el-option v-for="type in areaList" :key="type.id" :label="type.label" :value="type.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="所属边代：">
                <el-input placeholder="请输入所属边代" v-model="addOrEditForm.bd" clearable />
            </el-form-item>

            <el-form-item class="handle">
                <el-button @click="onCancel"> 取消 </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'
import { addEquipmentManageDataAPI } from '@/api/perception-devices/equipment-manage.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: '', // 所属工程
                typeId: '', // 设备类型
                devName: '', //设备名称
                deviceCode: '', // 设备编码
                casDeviceCode: '', // 级联编码
                status: '', // 设备状态
                wifi: '', // 设备信号
                area: '', // 监测区域
                bd: '', // 所属边
            },
            addOrEditFormRef: {
                // projectName: [
                //     {
                //         required: true,
                //         message: '请选择所属工程',
                //         trigger: 'change',
                //     },
                // ],
                typeId: [
                    {
                        required: true,
                        message: '请选择设备类型',
                        trigger: 'change',
                    },
                ],
                deviceName: [
                    {
                        required: true,
                        message: '请输入设备名称',
                        trigger: 'blur',
                    },
                ],

                deviceCode: [
                    {
                        required: true,
                        message: '请输入设备编码',
                        trigger: 'blur',
                    },
                ],
                status: [
                    {
                        required: true,
                        message: '请选择设备状态',
                        trigger: 'change',
                    },
                ],
                area: [
                    {
                        required: true,
                        message: '请选择监测区域',
                        trigger: 'change',
                    },
                ],
            },

            // 所属工程数据源
            projectList: [
                { id: 1, label: '工程1' },
                { id: 2, label: '工程2' },
                { id: 3, label: '工程3' },
            ],
            // 设备类型数据源
            typeList: [
                { id: 1, label: '测试1' },
                { id: 2, label: '测试2' },
                { id: 3, label: '测试3' },
            ],
            // 设备类型数据源
            areaList: [
                { id: 1, label: '区域1' },
                { id: 2, label: '区域2' },
                { id: 3, label: '区域3' },
            ],
        }
    },

    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')
                }
            })
        },

        // 取消按钮
        onCancel() {
            this.$emit('onCloseDialog', false)
        },
    },
    async mounted() {},
    watch: {},
}
</script>

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