admin-fiveFollowing/src/views/siteManage/powerScore/index.vue

<template>
  <div class="siteManage-main powerScore">
    <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="137px" class="demo-ruleForm">
      <div class="el-form-item blockTitle">电能质量各要素权重</div>
      <div></div>
      <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
        <el-input v-model="ruleForm.powerFactorOne"></el-input>
      </el-form-item>

      <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
        <el-input v-model="ruleForm.voltageQualified"></el-input>
      </el-form-item>
      <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
        <el-input v-model="ruleForm.loadRate"></el-input>
      </el-form-item>
      <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
        <el-input v-model="ruleForm.currentBalance"></el-input>
      </el-form-item>

      <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
        <el-input v-model="ruleForm.voltageBalance"></el-input>
      </el-form-item>
      <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
        <el-input v-model="ruleForm.thdu"></el-input>
      </el-form-item>

      <div class="el-form-item blockTitle">功率因素</div>

      <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
        <el-input v-model="ruleForm.powerFactorTwo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { useStore } from 'vuex'
import { ElMessage, ElNotification } from 'element-plus'
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
import * as api from '@/api/siteManage/powerScore'
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const store = useStore()
const props = defineProps({
  siteId: Number,
  activeName: String,
}) //数据双向绑定
const emit = defineEmits([]);
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const formInfo = ref(null)
const state = reactive({
  ruleForm: {},
  rules: {
    powerFactorOne: [
      { required: true, message: '请输入功率因数', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
    voltageQualified: [
      { required: true, message: '请输入电压合格率', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
    loadRate: [
      { required: true, message: '请输入负载率', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],

    currentBalance: [
      { required: true, message: '请输入电流平衡度', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
    voltageBalance: [
      { required: true, message: '请输入电压平衡度', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
    thdu: [
      { required: true, message: '请输入谐波畸变率', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
    powerFactorTwo: [
      { required: true, message: '请输入功率因数', trigger: 'blur' },
      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
    ],
  },
  isDisable: false,
  formStatus: ""
})
const { ruleForm, rules, isDisable, formStatus } = toRefs(state)





//评分配置详情查询
function powerQualityList() {
  api
    .powerQualityList({
      siteId: props.siteId,
    })
    .then((requset) => {
      if (requset.status === 'SUCCESS') {
        if (requset.data[0]) {
          formStatus.value = 'update'
          ruleForm.value = requset.data[0]
        } else {
          formStatus.value = 'add'
          ruleForm.value = {}
        }
      } else {
        ElMessage.error(requset.msg)
      }
    })
}

function resetForm() {
  formInfo.value.clearValidate()
}

//表单提交
function submitForm() {
  ruleForm.value.siteId = props.siteId
  formInfo.value.validate((valid) => {
    if (valid) {

      isDisable.value = true

      if (formStatus.value == 'add') {
        //新增
        api.powerQualityAdd(ruleForm.value).then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage.success({
              message: '新增成功',
              type: 'success',
            })
            setTimeout(() => {
              isDisable.value = false
            }, 5000)
          } else {
            ElMessage.error(requset.msg)
          }
        })
      } else {
        //修改
        api.powerQualityUpdate(ruleForm.value).then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage.success({
              message: '修改成功',
              type: 'success',
            })
            setTimeout(() => {
              isDisable.value = false
            }, 5000)
          } else {
            ElMessage.error(requset.msg)
          }
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}


watch(
  () => props.activeName,
  (newVal) => {
    if (newVal == 'six' && props.siteId) {
      resetForm()
      powerQualityList()
    }
  }
)

onMounted(() => {
  if (store.state.goUrl == 6) {
    resetForm()
    powerQualityList()
  }
})
</script>