dataControl/src/components/PzSet.vue

<template>
  <el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" direction="rtl" :before-close="closeDialog">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 2">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input v-model="form.polling_time" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input v-model="form.faile_retry_time" 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 v-model="form.port" clearable />
      </el-form-item>
      <!-- <el-form-item label="faile_retry_time">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </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-form :model="form1" label-width="120px" :rules="rules1" ref="ruleFormRef1" v-if="pztypecode === 1">
      <el-form-item label="轮询时间" prop="polling_time">
        <el-input v-model="form1.polling_time" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="失败重试时间" prop="faile_retry_time">
        <el-input v-model="form1.faile_retry_time" clearable/><span>秒</span>
      </el-form-item>
      <el-form-item label="COM" prop="driver_name">
      <el-select v-model="form1.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="form1.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="form1.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="form1.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="form1.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>


  </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 {//2: 'modbus_rtu', 3: 'plc_s7'
  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,
      },
      form1: {
        polling_time: "",
        faile_retry_time: "",
        driver_name: '',
        dataBits: '',
        baudRate: '',
        stopBits: '',
        parity: ''
      },
      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" }]
      },
      rules1: {
        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" }]
      },
    });
    const onSubmit = async () => {
      console.log(555, props.formData.name);
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const param = {
            driver_name: props.formData.name,
            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)
          }
          console.log(777, param);
          const res = await infoApi.addPz(param);
          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);
        nextTick(() => {
          drawEchart();
        });
      }
    };
    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>