admin-fiveFollowing/src/views/siteManage/camera/dialogComponent.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="640px"
    @close="closeDialog()"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="设备名称：" prop="deviceName">
        <el-input v-model="form.deviceName"></el-input>
      </el-form-item>
      <el-form-item label="设备编号：" prop="deviceCode">
        <el-input v-model="form.deviceCode"></el-input>
      </el-form-item>
      <el-form-item label="楼层:" prop="floor">


       <el-select
          v-model="form.floor"
          placeholder="请选择所属楼层"
        >
          <el-option value="" >请选择所属楼层</el-option>
          <el-option
            v-for="item in [20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]"
            :key="item"
            :label="'楼层B'+item"
            :value="'-'+item"
          ></el-option>
          <el-option
            v-for="item in 100"
            :key="item"
            :label="'楼层'+item"
            :value="''+item"
          ></el-option>
        </el-select>
       </el-form-item> 
      <el-form-item label="所属站点：" prop="siteId">
        <el-select
          v-model="form.siteId"
         :disabled="dialogTitle === '编辑'"
          placeholder="请选择所属站点"
        >
          <el-option
            v-for="item in store.state.siteList"
            :key="item.value"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="设备安装位置：" prop="deviceAddress">
        <el-input v-model="form.deviceAddress"></el-input>
      </el-form-item>
      <el-form-item label="设备类型：" prop="deviceType">
        <el-select
          v-model="form.deviceType"
          placeholder="请选择设备类型"
         :disabled="dialogTitle === '编辑'"
        >
          <el-option
            v-for="item in deviceType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
       
      </el-form-item>
      <el-form-item label="sim卡" prop="sim">
        <el-input v-model="form.sim"></el-input>
      </el-form-item>

      <br />
      <br />
      <br />
      <div style="text-align: right">
        <el-button @click="closeDialog(0)">取消</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect,watch } from 'vue'
import * as api from '@/api/siteManage/camera.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
  },
  setup(props, context) {
    context
    const store = useStore()
    const dialogVisible = ref(false)
    const formInfo = ref(null)

    const form = ref([])

    const siteList = ref([])

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      store.commit('publicSiteList')
      form.value = props.itemInfo.value
        console.log('form.value.floor')

      console.log(form.value.floor)

    }

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
      resetForm()
    }
    function resetForm() {
      formInfo.value.resetFields()
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }
    

    // 保存-修改操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          // form.value.siteId =18

          if (props.dialogTitle === '新增') {
            api.correspondDeviceAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.correspondDeviceUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

     watch(
      () => form.value.floor,
      (newVal,oldVal) => {
        newVal,oldVal
        
      }
    )


    return {
      store,
      // ...toRefs(state),
      closeDialog,
      dialogVisible,
      roleValid,
      formInfo,
      siteList,
      form,
      open,
      submitForm,
      // InputDiff,
      rules: {
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
           {
            min: 1,
            max: 25,
            message: '长度在 1 到 25 个字符',
            trigger: 'blur',
          },
        ],
        deviceCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
         
        ],
        floor: [{ required: true, message: '请选择所属楼层', trigger: 'blur' }],
        siteId: [
          {
            required: true,
            message: '请选择所属站点',
            trigger: 'blur',
          },
        ],
        deviceAddress: [
          { required: true, message: '请输入设备安装位置', trigger: 'blur' },
        ],
        deviceType: [
          { required: true, message: '请选择设备类型', trigger: 'change' },
        ],
        sim: [
          { required: false, message: '请输入sim卡号', trigger: 'blur' } , //
            // { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{0,25}$/, message: '请输入英文和数字组合的卡号,并且长度小于25!' },
             { pattern:/^[A-Za-z0-9]+$/, message: '请输入含有英文或数字的卡号!' },
            {
            min: 0,
            max: 25,
            message: '长度在 0 到 25 个字符',
            trigger: 'blur',
          },
          ],   
      },
      deviceType: ref([
        {
          value: 1,
          label: '183用电设备',
        },
        {
          value: 2,
          label: '视频监控设备',
        },
        {
          value: 3,
          label: '171用电设备',
        },
        {
          value: 4,
          label: '173用电设备',
        },
        {
          value: 5,
          label: '158智能网关',
        },
        {
          value: 6,
          label: '其他',
        },
      ]),
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

// label样式
.el-form-item__label {
  width: 150px;
}
.el-form-item__content {
  margin-left: 150px;
}
</style>