admin-fiveFollowing/src/views/deviceManage/powerEquip/powerDialog/insertDialog.vue

<template>
  <div class="powerdialog">
    <el-dialog
      :title="updateTitle"
      v-model="dialogVisible"
      @close="close"
      @open="open"
      width="30rem"
    >
      <div>
        <el-form
          ref="formInfo"
          :model="form"
          class="demo-form-inline"
          label-width="150px"
          :rules="rules"
        >
          <el-form-item label="监控设备名称：" prop="monitorDeviceName">
            <el-input v-model="form.monitorDeviceName"></el-input>
          </el-form-item>
          <el-form-item label="监控设备编号：" prop="monitorDeviceCode">
            <el-input v-model="form.monitorDeviceCode"></el-input>
          </el-form-item>
          <el-form-item label="回路表计地址：" prop="loopMeterAddress">
            <el-input-number
              v-model="form.loopMeterAddress"
              controls-position="right"
              :min="0"
              :max="255"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="所属站点：" prop="siteId">
            <el-select
              v-model="form.siteId"
              :disabled="
                deviceNumDataContent != '' &&
                form.siteId != null &&
                form.siteId != ''
                  ? true
                  : false
              "
              placeholder="请选择所属站点"
            >
              <el-option
                v-for="item in siteList"
                :key="item.value"
                :label="item.siteName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="额定电压（kV）：" prop="ratedVoltage">
            <el-select
              v-model="form.ratedVoltage"
              placeholder="请选择额定电压（kV）"
            >
              <el-option
                v-for="item in ratedVoltage"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
            <div class="fontText">(数值为线电压)</div>
          </el-form-item>
          <el-form-item label="额定电流（A）:" prop="ratedCurrent">
            <el-input-number
              v-model="form.ratedCurrent"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="电流负载率门限：" prop="currentLoadRate">
            <el-input-number
              v-model="form.currentLoadRate"
              controls-position="right"
              :min="0"
              :max="100"
            ></el-input-number>
            <div class="fontText">(0-100之间的数字)</div>
          </el-form-item>
          <el-form-item label="设备能力：" prop="qualityAnalysis">
            <el-checkbox
              v-model="form.qualityAnalysis"
              label="电能质量分析"
            ></el-checkbox>
            <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
          </el-form-item>
          <!-- <br />
          <hr />
          <br />
          <el-form-item label="设备类型：" prop="deviceType">
            <el-input v-model="form.deviceType"></el-input>
          </el-form-item>
          <el-form-item label="设备型号：" prop="deviceModel">
            <el-input v-model="form.deviceModel"></el-input>
          </el-form-item>
          <el-form-item label="厂家：" prop="manufactor">
            <el-input v-model="form.manufactor"></el-input>
          </el-form-item>
          <el-form-item label="厂家联系人：" prop="manufactorName">
            <el-input v-model="form.manufactorName"></el-input>
          </el-form-item>
          <el-form-item label="厂家联系联系电话：" prop="manufactorPhone">
            <el-input v-model="form.manufactorPhone"></el-input>
          </el-form-item>
          <el-form-item label="巡检周期：" prop="patrolInsC">
            <el-input v-model="form.patrolInsC"></el-input>
          </el-form-item>
          <el-form-item label="保养周期：" prop="maintenanceC">
            <el-input v-model="form.maintenanceC"></el-input>
          </el-form-item>
          <el-form-item label="投运日期：" prop="operationDate">
            <el-input v-model="form.operationDate"></el-input>
          </el-form-item>
          <el-form-item label="安装位置：" prop="installPosition">
            <el-input v-model="form.deviceType"></el-input>
          </el-form-item>
          <el-form-item label="安装日期：" prop="installDate">
            <el-input v-model="form.deviceType"></el-input>
          </el-form-item>

          <br />
          <br />
          <br /> -->
          <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>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'

export default defineComponent({
  name: 'Dialog',
  props: {
    flag: Boolean,
    data_list: Object,
    updateTitle: String,
    deviceNumDataContent: String,
  },
  setup(props, context) {
    const store = useStore()
    const dialogVisible = ref(false)
    const form = ref([])
    const siteList = ref([])
    const formInfo = ref(null)

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.data_list.value[0]
      siteList.value = store.state.siteList
    }

    // close(): Dialog弹窗关闭之后做的事
    const close = () => {
      context.emit('show', false)
      dialogVisible.value = false
    }

    // 保存-修改操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          form.value.qualityAnalysis =
            form.value.qualityAnalysis == true
              ? (form.value.qualityAnalysis = '是')
              : (form.value.qualityAnalysis = '否')
          if (props.updateTitle == '新增设备信息') {
            api.deviceNewsAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                close()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.deviceNewsUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                close()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })
    return {
      formInfo,
      siteList,
      dialogVisible,
      form,
      close,
      open,
      submitForm,
      ratedVoltage: ref([
        {
          label: 0.22,
          value: 1,
        },
        {
          label: 0.38,
          value: 2,
        },
        {
          label: 0.6,
          value: 3,
        },
        {
          label: 6,
          value: 4,
        },
        {
          label: 10,
          value: 5,
        },
        {
          label: 20,
          value: 6,
        },
        {
          label: 35,
          value: 7,
        },
      ]),
      rules: {
        monitorDeviceName: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 10,
            message: '名称长度不能小于3大于10',
            trigger: 'blur',
          },
        ],
        monitorDeviceCode: [
          {
            required: true,
            message: '设备编号不能为空',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 25,
            message: '设备编号长度不能小于5大于25',
            trigger: 'blur',
          },
        ],
        loopMeterAddress: [
          {
            required: true,
            message: '回路表计地址不能为空',
            trigger: 'blur',
          },
        ],
        siteId: [
          {
            required: true,
            message: '请选择所属站点',
            trigger: 'blur',
          },
        ],
        ratedVoltage: [
          {
            required: true,
            message: '请选择额定电压（kV）',
            trigger: 'blur',
          },
        ],
        ratedCurrent: [
          {
            required: true,
            message: '额定电流（A）',
            trigger: 'blur',
          },
        ],
        currentLoadRate: [
          {
            required: true,
            message: '电流负载率门限',
            trigger: 'blur',
          },
        ],
      },
    }
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
a {
  color: #42b983;
}
.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>