dataControl/src/components/PzSet.vue

<template>
  <el-drawer v-model="visible" direction="rtl" :before-close="closeDialog" title="驱动配置">
    <fieldset class="box2">
      <legend class="box-ht">驱动名称</legend>
      <el-form label-width="130px">
        <el-form-item>
          {{ form.driver_name }}
        </el-form-item>
      </el-form>
    </fieldset>
    <!-- 2 modbus_tcp -->
    <el-form size="large" :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 2">
      <fieldset class="box2">
        <legend class="box-ht">通用配置</legend>
        <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>
      </fieldset>
      <fieldset class="box2">
        <legend class="box-ht">专属配置</legend>
        <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 label="大小端模式" prop="little_endian">
          <el-select v-model="form.little_endian">
            <el-option v-for="item in endianArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字节顺序" prop="wordswap">
          <el-select v-model="form.wordswap">
            <el-option v-for="item in wordswapArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
      </fieldset>
    </el-form>
    <!-- 1: 'modbus_rtu'  -->
    <el-form size="large" :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 1">
      <fieldset class="box2">
        <legend class="box-ht">通用配置</legend>
        <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>
      </fieldset>
      <fieldset class="box2">
        <legend class="box-ht">专属配置</legend>
        <el-form-item label="COM" prop="com_name">
          <el-select v-model="form2.com_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>
      </fieldset>
    </el-form>
    <!-- 3: 'plc_s7' -->
    <!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
      <fieldset class="box2">
        <legend class="box-ht">通用配置</legend>
        <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>
      </fieldset>
      <fieldset class="box2">
        <legend class="box-ht">专属配置</legend>
        <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>
      </fieldset>
    </el-form> -->
    <div class="btns">
      <el-button type="primary" size="large" @click="onSubmit">保存</el-button>
    </div>

  </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 ruleFormRef2 = ref(null);
    const ruleFormRef3 = ref(null);
    const state = reactive({
      form: {
        driver_name: '',
        polling_time: "",
        faile_retry_time: "",
        host: '',
        port: '',
        id: 1,
        little_endian: false,
        wordswap: false
      },
      form2: {
        polling_time: "",
        faile_retry_time: "",
        com_name: '',
        dataBits: 5,
        baudRate: 2400,
        stopBits: 1,
        parity: 'N',
        id: 1,
      },
      form3: {
        polling_time: "",
        faile_retry_time: "",
        host: '',
        slot: '',
        rack: 1,
        id: 1
      },
      endianArr: [
        {
          name: '大端模式',
          value: false
        },
        {
          name: '小端模式',
          value: true
        }
      ],
      wordswapArr: [
        {
          name: '正常',
          value: false
        },
        {
          name: '交换',
          value: true
        }
      ],
      comArr: [],// com
      baudRateArr: [{
        name: 2400,
        value: 2400
      }, {
        name: 4800,
        value: 4800
      },
      {
        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" }],
        little_endian: [{ required: true, message: "请选择大小端模式", trigger: "blur" }],
        wordswap: [{ required: true, message: "请选择字节顺序", trigger: "blur" }]
      },
      rules2: {
        polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
        faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
        com_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 () => {
      var header = {
        driver_name: props.formData.driver_name
      }
      if (props.pztypecode === 2) { //modbus_tcp
        await ruleFormRef.value.validate(async (valid) => {
          if (valid) {
            var param = {
              ...state.form,
              polling_time: Number(state.form.polling_time),
              faile_retry_time: Number(state.form.faile_retry_time),
              port: Number(state.form.port),
              id: Number(state.form.id)
            }
            const res = await infoApi.addPz(param, header);
            if (res.code == 0) {
              ElMessage.success(res.data || "请求成功");
              ctx.emit("dialogClose");
            } else {
              ElMessage.error(res.data);
            }
          } else {
          }
        });
      } else if (props.pztypecode === 1) { // modbus_rtu
        await ruleFormRef2.value.validate(async (valid) => {
          if (valid) {
            var param = {
              name: props.formData.name,
              polling_time: Number(state.form2.polling_time),
              faile_retry_time: Number(state.form2.faile_retry_time),
              com: {
                name: state.form2.com_name,
                dataBits: Number(state.form2.dataBits),
                baudRate: Number(state.form2.baudRate),
                stopBits: Number(state.form2.stopBits),
                parity: state.form2.parity
              }
            }
            const res = await infoApi.addPz(param, header);
            if (res.code == 0) {
              ElMessage.success(res.data || "请求成功");
              ctx.emit("dialogClose");
            } else {
              ElMessage.error(res.data);
            }
          } else {
          }
        });
      } 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.data || "请求成功");
              ctx.emit("dialogClose");
            } else {
              ElMessage.error(res.data);
            }
          } else {
          }
        });
      }

    }
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {
      getD();
      getCom();
    });
    const getD = async () => {
      const parm = {
        driver_name: props.formData.driver_name
      }
      const res = await infoApi.getD(parm);
      if (res.code == 0) {
        if (props.pztypecode === 2) {
          state.form = res.data;
        }
        if (props.pztypecode === 1) {
          state.form2 = res.data;
          state.form2.com_name = res.data.com.name;
          state.form2.dataBits = Number(res.data.com.dataBits);
          state.form2.baudRate = Number(res.data.com.baudRate);
          state.form2.stopBits = Number(res.data.com.stopBits);
          state.form2.parity = res.data.com.parity;
        }
      }
    };
    const getCom = async () => {
      const parm = {
        name: props.formData.name
      }
      const res = await infoApi.getCom(parm);
      if (res.code == 0) {
        state.comArr = res.data.sort((a, b) => {
          return (a.name > b.name ? 1 : -1)
        });
      }
    };
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
    const importData = () => { };

    const exportData = () => { };

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

  >span {
    margin-left: 10px;
  }
}
</style>