dataControl/src/components/PzSet.vue

<template>
  <el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" direction="rtl" :before-close="closeDialog">
    <!-- 1 -->
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input-number v-model="form.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="主机地址" prop="host">
        <el-input v-model="form.host" clearable/>
      </el-form-item>
      <el-form-item label="端口号" prop="port">
        <el-input-number v-model="form.port" :min="1" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 2: 'modbus_rtu'  -->
    <el-form :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 2">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input-number v-model="form2.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="COM" prop="driver_name">
      <el-select v-model="form2.driver_name" clearable>
        <el-option
          v-for="item in comArr"
          :label="item.name"
          :value="item.name" 
          :key="item.name"
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="数据位" prop="dataBits" clearable>
      <el-select v-model="form2.dataBits">
        <el-option  
          v-for="item in dataBitsArr"
          :label="item.name"
          :value="item.value" 
          :key="item.value"
          clearable
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="波特率" prop="baudRate" clearable>
      <el-select v-model="form2.baudRate">
        <el-option  
          v-for="item in baudRateArr"
          :label="item.name"
          :value="item.value" 
          :key="item.value"
          clearable
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="停止位" prop="stopBits" clearable>
      <el-select v-model="form2.stopBits">
        <el-option  
          v-for="item in stopBitsArr"
          :label="item.name"
          :value="item.value" 
          :key="item.value"
          clearable
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="校验类型" prop="parity" clearable>
      <el-select v-model="form2.parity">
        <el-option  
          v-for="item in parityArr"
          :label="item.name"
          :value="item.value" 
          :key="item.value"
          clearable
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </el-form-item>
  </el-form>
    <!-- 3: 'plc_s7' -->
    <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input-number v-model="form3.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="主机地址" prop="host">
        <el-input v-model="form3.host" clearable/>
      </el-form-item>
      <el-form-item label="机架号" prop="rack">
        <el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
      </el-form-item>
      <el-form-item label="插槽号" prop="slot">
        <el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>


  </el-drawer>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: ["formData", "dialogVisible", "pztype", "pztypecode"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      form: {
        polling_time: "",
        faile_retry_time: "",
        host: '',
        port: '',
        id: 1,
      },
      form2: {
        polling_time: "",
        faile_retry_time: "",
        driver_name: '',
        dataBits: 5,
        baudRate: 2480,
        stopBits: 1,
        parity: 'N',
        id: 1
      },
      form3: {
        polling_time: "",
        faile_retry_time: "",
        host: '',
        slot: '',
        rack: 1,
        id: 1
      },
      comArr: [],// com
      baudRateArr: [{
        name: 2480,
        value: 2480
      },{
        name: 4880,
        value: 4880 
      },
      {
        name:9600,
        value: 9600
      },
      {
        name:19200,
        value: 19200
      },
      {
        name:38400,
        value: 38400
      },
      {
        name:76800,
        value: 76800
      },
      {
        name:115200,
        value: 115200
      }],
      dataBitsArr:[{
        name: 5,
        value: 5
      },{
        name: 6,
        value: 6 
      },
      {
        name:7,
        value: 7
      },
      {
        name:8,
        value: 8
      }],
      stopBitsArr: [{
        name: 1,
        value: 1
      },{
        name: 2,
        value: 2 
      }],
      parityArr: [{
        name: "N",
        value: "N"
      },{
        name: "E",
        value: "E",
      },{
        name: "O",
        value: "O",
      }],

      rules: {
        polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
        faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
        host: [{ required: true, validator: (rule, value, callback) => {
            // 只能输入英文字母
            var reg =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (value && reg.test(value) ) {
              callback();
            } else {
              callback(new Error("请输入正确的ip地址"));
            }}, trigger: 'blur' }],
        port: [{ required: true, message: "请输入端口号", trigger: "blur" }]
      },
      rules2: {
        polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
        faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
        driver_name: [{ required: true, message: "请选择COM口", trigger: "blur" }],
        dataBits: [{ required: true, message: "请选择数据位", trigger: "blur" }],
        baudRate: [{ required: true, message: "请选择波特率", trigger: "blur" }],
        stopBits: [{ required: true, message: "请选择停止位", trigger: "blur" }],
        parity: [{ required: true, message: "请选择校验类型", trigger: "blur" }]
      },
      rules3: {
        polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
        faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
        host: [{ required: true, validator: (rule, value, callback) => {
            // 只能输入英文字母
            var reg =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (value && reg.test(value) ) {
              callback();
            } else {
              callback(new Error("请输入正确的ip地址"));
            }}, trigger: 'blur' }],
        rack: [{ required: true, message: "请输入机架号", trigger: "blur" }],
        slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }]
      },
    });
    const onSubmit = async () => {
      console.log(555, props.formData.name);
      var header = {
        driver_name: props.formData.name
      }
      if (props.pztypecode === 1) {
        await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          var param = {
            polling_time:Number(state.form.polling_time),
            faile_retry_time: Number(state.form.faile_retry_time),
            host: state.form.host,
            port: Number(state.form.port),
            id: Number(state.form.id)
          }
          const res = await infoApi.addPz(param, header);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            ctx.emit("dialogClose");
          } else {
            ElMessage.error(res.message);
          }
        } else {
          console.log("error submit!");
        }
      });
      } else if (props.pztypecode === 2) {
        await ruleFormRef2.value.validate(async (valid) => {
          if (valid) {
            var param = {
                polling_time:Number(state.form2.polling_time),
                faile_retry_time: Number(state.form2.faile_retry_time),
                dataBits: Number(state.form2.dataBits),
                baudRate: Number(state.form2.baudRate),
                stopBits: Number(state.form2.stopBits),
                driver_name: state.form2.driver_name,
                parity: state.form2.parity,
                id: Number(state.form2.id)
              }
            const res = await infoApi.addPz(param, header);
            if (res.code == 0) {
              ElMessage.success(res.message || "请求成功");
              ctx.emit("dialogClose");
            } else {
              ElMessage.error(res.message);
            }
          } else {
            console.log("error submit!");
          }
        });
      } else if (props.pztypecode === 3) {
        await ruleFormRef3.value.validate(async (valid) => {
          if (valid) {
            var param = {
              polling_time:Number(state.form3.polling_time),
              faile_retry_time: Number(state.form3.faile_retry_time),
              host: state.form3.host,
              rack: Number(state.form3.rack),
              slot: Number(state.form3.slot),
              id: Number(state.form3.id)
            }
            const res = await infoApi.addPz(param, header);
            if (res.code == 0) {
              ElMessage.success(res.message || "请求成功");
              ctx.emit("dialogClose");
            } else {
              ElMessage.error(res.message);
            }
          } else {
            console.log("error submit!");
          }
        });
      }
      
    }
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {
      getCom();
    });
    const getCom = async () => {
      const res = await infoApi.getCom();
      if (res.code == 0) {
        state.comArr = res.data;
        console.log(44, state.comArr);
        state.form2.driver_name = state.comArr[0].name;
      }
    };
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
    const importData = () => { };

    const exportData = () => { };

    return {
      ...toRefs(state),
      visible,
      closeDialog,
      importData,
      exportData, 
      onSubmit,
      ruleFormRef,
      getCom
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  display: flex;
  flex-wrap: nowrap;
  >span {
    margin-left: 10px;
  }
}
</style>