修改表单校验

马宇豪

2023-04-18 af18fd6fb9e1a500be5369550b737ccce12a7d23

 src/views/basic/room/components/roomDialog.vue

@@ -1,10 +1,10 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="roomDialogState.title" v-model="roomDialogState.roomDialogVisible" width="600px">
        <el-dialog :title="roomDialogState.title" v-model="roomDialogState.roomDialogVisible" :close-on-click-modal="false" width="600px">
            <el-form ref="roomFormRef" :rules="roomDialogState.roomFormRules" :model="roomDialogState.roomForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="场所名称" prop="siteName">
                        <el-form-item label="实验室名称" prop="siteName">
                            <el-input v-model="roomDialogState.roomForm.siteName" placeholder="场所名称" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
@@ -18,6 +18,43 @@
                            <el-input v-model="roomDialogState.roomForm.room" placeholder="实验室所在房间" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-form-item label="场所责任人" prop="siteLiabilityPersonId">
                      <el-select v-model="roomDialogState.roomForm.siteLiabilityPersonId" placeholder="场所责任人" clearable class="input-length">
                        <el-option v-for="item in memberList" :key="item.id" :label="item.personName" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-form-item label="场所安全员" prop="safeLiabilityPersonId">
                      <el-select v-model="roomDialogState.roomForm.safeLiabilityPersonId" placeholder="场所安全员" clearable class="input-length">
                        <el-option v-for="item in memberList" :key="item.id" :label="item.personName" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-form-item label="有无消防设施" prop="fireFacilities">
                      <el-select v-model="roomDialogState.roomForm.fireFacilities" placeholder="有无消防设施" clearable class="input-length">
                        <el-option :key="1" label="有" :value="1"></el-option>
                        <el-option :key="2" label="无" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-form-item label="有无隔断" prop="partitionStatus">
                      <el-select v-model="roomDialogState.roomForm.partitionStatus" placeholder="有无隔断" clearable class="input-length">
                        <el-option :key="1" label="有" :value="1"></el-option>
                        <el-option :key="2" label="无" :value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-form-item label="场所性质" prop="siteTypeId">
                      <el-select v-model="roomDialogState.roomForm.siteTypeId" placeholder="场所性质" clearable class="input-length">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.siteType" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <template #footer>
@@ -31,7 +68,7 @@
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { reactive, ref, defineProps} from "vue";
import {ElMessage} from "element-plus";
import {roomApi} from "/@/api/basic/room";

@@ -44,12 +81,21 @@
        siteName: '',
        floor: '',
        room: '',
        siteLiabilityPersonId: null,
        safeLiabilityPersonId: null,
        fireFacilities: null,
        partitionStatus: null,
        siteTypeId: null
    },
    roomFormRules: {
        deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
        siteName: [{ required: true, message: '请填写实验室名称', trigger: 'blur' }],
        floor: [{ required: true, message: '请填写楼名称', trigger: 'blur' }],
        room: [{ required: true, message: '请填写房间', trigger: 'blur' }],
        siteLiabilityPersonId: [{ required: true, message: '请选择场所责任人', trigger: 'blur' }],
        safeLiabilityPersonId: [{ required: true, message: '请选择场所安全员', trigger: 'blur' }],
        fireFacilities: [{ required: true, message: '请选择有无消防设施', trigger: 'blur' }],
        partitionStatus: [{ required: true, message: '请选择有无隔断', trigger: 'blur' }],
        siteTypeId: [{ required: true, message: '请选择场所性质', trigger: 'blur' }]
    },
    specialDeviceList: [],
    deviceUnitList: [
@@ -72,6 +118,11 @@
            siteName: '',
            floor: '',
            room: '',
            siteLiabilityPersonId: null,
            safeLiabilityPersonId: null,
            fireFacilities: null,
            partitionStatus: null,
            siteTypeId: null
        };
    }else{
        roomDialogState.title = '编辑'
@@ -80,6 +131,11 @@
            siteName: value.siteName,
            floor: value.floor,
            room: value.room,
            siteLiabilityPersonId: value.siteLiabilityPersonId,
            safeLiabilityPersonId: value.safeLiabilityPersonId,
            fireFacilities: value.fireFacilities,
            partitionStatus: value.partitionStatus,
            siteTypeId: value.siteTypeId
        };
    }
};
@@ -129,6 +185,11 @@

const emit = defineEmits(['refresh'])

defineProps({
  memberList: Array,
  typeList: Array
})

defineExpose({
    showroomDialog
})