dataControl/src/components/AddPoint.vue

<template>
  <el-dialog v-model="visible" title="点位管理" width="40%" :before-close="closeDialog">
    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
      <el-form-item label="点位名称:" prop="name">
        <el-input v-model="addForm.name" placeholder="请输入点位名称" clearable :disabled="type !== 'I'" />
      </el-form-item>
      <el-form-item label="点位地址:" prop="address">
        <el-input v-model="addForm.address" placeholder="请输入点位地址：0-19999或30000-49999" clearable type="number" />
      </el-form-item>
      <el-form-item label="点位类型:" prop="type">
        <el-select v-model="addForm.type" size="mini" placeholder="请选择点位类型">
          <el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="字节顺序:" prop="byte_order">
        <el-select v-model="addForm.byte_order" size="mini" placeholder="请选择字节顺序">
          <el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="点位描述:" prop="description">
        <el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
      </el-form-item>
      <el-form-item label="读写权限:" prop="permissions">
        <el-select v-model="addForm.permissions" size="mini" placeholder="请选择读写权限">
          <el-option v-for="item in perOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="缩放系数:" prop="multiplier">
        <el-input v-model="addForm.multiplier" placeholder="请输入缩放系数" type="number" clearable />
      </el-form-item>
      <el-form-item label="点位单位:" prop="unit">
        <el-input v-model="addForm.unit" placeholder="请输入点位单位" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveP"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</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", "pointData", "type"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const checkAddress = (rule, value, callback) => {
      let num = Number(value);
      if (value && (num >= 0 && num <= 19999) || (num >= 30000 && num <= 49999)) {
        callback();
      } else {
        callback(new Error("点位地址：0-19999，30000-49999"));
      }
    };
    const ruleFormRef = ref(null);
    const state = reactive({
      addForm: {
      },
      datatypeArr: [{
        label: 'bool',
        value: 1
      }, {
        label: 'int16',
        value: 2
      }, {
        label: 'int32',
        value: 3
      }, {
        label: 'int64',
        value: 4
      },
      {
        label: 'unit16',
        value: 5
      }, {
        label: 'unit32',
        value: 6
      },
      {
        label: 'unit64',
        value: 7
      }, {
        label: 'float32',
        value: 8
      }, {
        label: 'float64',
        value: 9
      }],
      byte_orderArr: [{
        label: 'null',
        value: 1
      }, {
        label: '12',
        value: 2
      }, {
        label: '21',
        value: 3
      }, {
        label: '4321',
        value: 4
      },
      {
        label: '2143',
        value: 5
      },
      {
        label: '1234',
        value: 6
      },
      {
        label: '3412',
        value: 7
      }, {
        label: '4312',
        value: 8
      }, {
        label: '3421',
        value: 9
      },
      {
        label: '2134',
        value: 10
      },
      {
        label: '1243',
        value: 11
      },
      {
        label: 'BIG',
        value: 12
      },
      {
        label: 'LIT',
        value: 13
      }],
      perOptions: [
        {
          label: '只读',
          value: 1
        },
        {
          label: '可写',
          value: 2
        }
      ],
      rules: {
        name: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
        address: [
          { required: true, message: "请输入点位地址", trigger: "blur" },
          { required: true, validator: checkAddress, trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择点位类型", trigger: "blur" }],
        byte_order: [{ required: true, message: "请选择字节顺序", trigger: "blur" }],
        multiplier: [{ required: true, message: "请输入缩放系数", trigger: "blur" }],
        unit: [{ required: true, message: "请输入点位单位", trigger: "blur" }],
        permissions: [{ required: true, message: "请输入读写权限", trigger: "blur" }],
      },
    });
    const visible = computed(() => {
      return props.dialogVisible;
    });

    onMounted(() => {
      state.addForm = props.pointData
    });
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const saveP = async () => {
      console.log(ruleFormRef.value);
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const param = {
            template_name: props.formData.name,
            ...state.addForm,
            address: Number(state.addForm.address),
            multiplier: Number(state.addForm.multiplier)
          }
          const res = props.type === 'I' ? await infoApi.addP(param) : await infoApi.editP(param);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.data || res.message);
          }
        } else {
          console.log("error submit!");
        }
      });


    };
    return {
      ...toRefs(state),
      visible,
      closeDialog,
      saveP,
      ruleFormRef
    };
  },
};
</script>
<style lang="scss" scoped>
.top-title {
  width: 100%;

  ::v-deep .el-card__body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 16px;
  }
}

.btns {
  padding: 15px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
}
</style>