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

<template>
  <!-- 克隆 -->
  <el-dialog v-model="cloneDialog" title="变量克隆" width="30rem" @close="close">
    <div class="dialogOne">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="克隆设备对象:" prop="deviceCode">
          <span>{{ form.deviceCode }}</span>
        </el-form-item>
        <el-form-item label="变量克隆至:" prop="cloneRadio">
          <el-radio-group v-model="form.type" size="medium">
            <el-radio :label="1">新设备</el-radio>
            <el-radio :label="2">已有设备（仅克隆变量）</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备名:" prop="cloneInputName" v-if="form.type == 1">
          <el-input v-model="form.cloneInputName" placeholder="请输入设备名" clearable />
        </el-form-item>
        <el-form-item label="设备编号:" prop="cloneInputCode" v-if="form.type == 1">
          <el-input v-model="form.cloneInputCode" placeholder="请输入设备编号" clearable />
        </el-form-item>
        <el-form-item label="选择站点：" v-if="form.type != 1">
          <el-select v-model="store.state.siteId" @change="select_deviceList()" placeholder="请选择" clearable filterable>
            <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择设备：" v-if="form.type != 1">
          <el-select filterable v-model="form.oldDeviceCode" placeholder="请选择所需克隆设备（可输入）">
            <el-option v-for="list in deviceList" :key="list" :label="list.deviceName"
              :value="list.deviceCode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- <div class="content">
        <span>*</span>
        模拟量:
        <el-input class="inputer" v-model="cloneInputModel" placeholder="请输入模拟量" clearable />
        状态量:
        <el-input class="inputer" v-model="cloneInputState" placeholder="请输入状态量" clearable />
      </div> -->
    </div>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-checkbox v-model="cloneChecked" label="连续克隆模式" style="margin-right: 10px"></el-checkbox> -->
        <el-button @click="cloneDialog = false">取消</el-button>
        <el-button type="primary" @click="clone()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</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 cloneDialog = ref(false) //克隆弹窗控制

const form = ref({
  type: 1,
  cloneInputName: '',
  cloneInputCode: '',
  oldDeviceCode: '',
})
const rules = {
  cloneInputCode: [
    { required: true, message: '设备名不能为空', trigger: 'blur', },
    { min: 5, max: 25, message: '设备名长度不能小于5大于25', trigger: 'blur', },
  ],
  cloneInputName: [
    { required: true, message: '设备编号不能为空', trigger: 'blur', },
    { min: 5, max: 25, message: '设备编号长度不能小于5大于25', trigger: 'blur', },
  ],
}


const cloneChecked = ref(false) //克隆复选框控制
const cloneInputModel = ref('') //克隆input模拟量
const cloneInputState = ref('') //克隆input状态量
const ruleForm = ref(null)
const deviceList = ref([])

const clone = () => {
  let list = {}
  if (form.value.type == 1) {
    list = {
      type: form.value.type,
      oldDeviceCode: form.value.deviceCode,
      newDeviceCode: form.value.cloneInputCode,
      deviceName: form.value.cloneInputName,
    }
  } else {
    list = {
      type: form.value.type,
      newDeviceCode: form.value.oldDeviceCode,
      oldDeviceCode: form.value.deviceCode,
    }
  }
  proxy.$refs["ruleForm"].validate((valid) => {
    if (valid) {
      api.variableCloning(list).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '克隆成功',
            type: 'success',
          })
          close()
          emit('handleSelect', false)
        } else {
          ElMessage.error(requset.msg)
        }
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

//open
function openDialog(item) {
  form.value = item.dialogArray
  cloneDialog.value = true
  select_deviceList()
}

//弹窗关闭
function close() {
  proxy.$refs["ruleForm"].resetFields()
  form.value.cloneInputName = ''
  form.value.cloneInputCode = ''
  form.value.oldDeviceCode = ''
  cloneDialog.value = false
}

function select_deviceList() {
  api
    .deviceList({
      siteId: store.state.siteId,
    })
    .then((requset) => {
      if (requset.status === 'SUCCESS') {
        deviceList.value = requset.data

        for (var i = deviceList.value.length - 1; i >= 0; i--) {
          if (deviceList.value[i].id == form.value.id) deviceList.value.splice(i, 1)
        }
      } else {
        ElMessage.error(requset.msg)
      }
    })
}

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