admin-fiveFollowing/src/views/deviceManage/powerEquip/communicateEquip/dialog/insert_update.vue

<template>
  <div class="powerdialog">
    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="640px">
      <div>
        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :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-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
            <el-input v-else v-model="form.deviceCode"></el-input>
          </el-form-item>
          <el-form-item label="楼层：" prop="floor">
            <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
          </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="请选择设备类型">
              <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>

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

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { useStore } from 'vuex'
import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
/*----------------------------------接口引入-----------------------------------*/
import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const store = useStore()
const props = defineProps({}) //数据双向绑定
const emit = defineEmits(['handleSelect']);
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const dialogTitle = ref("")
const dialogVisible = ref(false)
const form = ref([])
const rules = {
  deviceCode: [
    { required: true, message: '设备编号不能为空', trigger: 'blur', },
    { min: 5, max: 25, message: '设备编号长度不能小于5大于25', trigger: 'blur', },
  ],
  deviceName: [
    { required: true, message: '设备名称不能为空', trigger: 'blur', },
    { min: 5, max: 25, message: '设备名称长度不能小于5大于25', trigger: 'blur', },
  ],
  floor: [
    { required: true, message: '楼层不能为空', trigger: 'blur', },
  ],
  siteId: [
    { required: true, message: '请选择所属站点', trigger: 'blur', },
  ],
  deviceAddress: [
    { required: true, message: '请输入设备安装位置', trigger: 'blur', },
    { min: 2, max: 50, message: '设备安装位置长度不能小于2大于50', trigger: 'blur', },
  ],
  deviceType: [
    { required: true, message: '请选择设备类型', trigger: 'blur', },
  ],
}
const deviceType = ref([
  { value: 1, label: '183用电设备', },
  { value: 2, label: '视频监控设备', },
  { value: 3, label: '171用电设备', },
  { value: 4, label: '173用电设备', },
  { value: 5, label: '158智能网关', },
  { value: 6, label: '其他', },
])

//弹窗打开
function openDialog(item) {
  dialogTitle.value = item.dialogTitle
  form.value = item.dataArray
  dialogVisible.value = true
}

//弹窗关闭
function close() {
  proxy.$refs["formInfo"].resetFields()
  dialogVisible.value = false
}

// 保存-修改操作
function submitForm() {
  proxy.$refs["formInfo"].validate((valid) => {
    if (valid) {
      form.value.floor == 0 ? (form.value.floor = 1) : form.value.floor
      if (dialogTitle.value == '新增') {
        api.correspondDeviceAdd(form.value).then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage.success({
              message: '新增成功',
              type: 'success',
            })

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

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item:not(.user-layout .el-form-item) {
  margin: 0 auto 10px;
}

.fontText {
  font-size: 10px;
  margin-top: -5px;
  margin-bottom: -15px;
}
</style>
<style>
.powerdialog .el-form-item--small .el-form-item__content,
.powerdialog .el-form-item--small .el-form-item__label {
  line-height: 40px;
}
</style>