dataControl/src/components/AddReport.vue

<template>
  <el-dialog
    v-model="visible"
    :title="formData.id ? '编辑' : '新增'"
    width="35%"
    :before-close="closeDialog"
  >
    <el-form
      size="large"
      label-position="top"
      :model="formData"
      label-width="150px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="通讯名称:" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入通讯名称"
          clearable
          :disabled="type === 'I' ? false: true"
        />
      </el-form-item>
      
      <el-form-item label="上报驱动:" prop="drive">
        <el-select v-model="formData.drive" placeholder="请选择驱动">
          <el-option
            v-for="(item, index) of qudongOptions"
            :key="index"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="主机地址:" prop="host">
        <el-input
          v-model="formData.host"
          placeholder="请输入主机地址"
          clearable
        />
      </el-form-item>
      <el-form-item label="通讯描述:">
        <el-input
          v-model="formData.description"
          placeholder="请输入通讯名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="其他配置:" prop="config">
        <el-input
          v-model="formData.config"
          placeholder="请输入其他配置"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" @click="closeDialog">取消</el-button>
        <el-button size="large" type="primary" @click="saveData"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { sb_list, sb_info, sb_drive_list, sb_add, response } from '../proto/data/pd'
export default {
  props: ["formData", "dialogVisible", "type"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const state = reactive({
      rules: {
        name: [{ required: true, message: "请输入通讯名称", trigger: "blur" }],
        drive: [{ required: true, message: "请选择驱动", trigger: "blur" }],
        host: [{ required: true, message: "请输入主机地址", trigger: "blur" }],
      },
      qudongOptions: [],
    });
    const visible = computed(() => {
      return props.dialogVisible;
    })
 
    onMounted(() => {
      getQuDong();
    });
    const getQuDong = async () => {
      const res = await infoApi.getQuDong();
      const ret = response.decode(new Uint8Array(res));
      
      if (ret.code == 0) {
        // 获取数据
        const infodata = sb_drive_list.decode(ret.data).sbDrive;
        state.qudongOptions = infodata;
      }
    }
    const closeDialog = () => {
      ctx.emit("dialogClose");
    };
    // 保存
    const saveData = async () => {
      await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const req_databuf = sb_add.encode(props.formData).finish();
          // 截取有效长度
          const req_data = req_databuf.slice(0, req_databuf.length);
          const res = props.type === 'I' ? await infoApi.saveTx(req_data) : await infoApi.updateTx(req_data);
          const ret = response.decode(new Uint8Array(res));
          if(ret.code == 0) {
            ElMessage.success(res.msg || '请求成功');
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.msg);
          }
        } else {
        }
      });
    };
    return {
      ...toRefs(state),
      ruleFormRef,
      visible,
      saveData,
      closeDialog,
      getQuDong
    };
  },
};
</script>