dataControl/src/components/AddMb.vue

<template>
  <el-dialog v-model="visible" :title="type === 'I' ? '新增模板' : '编辑模板'" width="45%" :before-close="closeDialog">
    <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef" size="large" label-position="top">
      <el-form-item label="模板名称:" prop="template_name">
        <el-input v-model="addForm.template_name" placeholder="请输入模板名称(不超过20个字符)" maxlength="20" clearable
          :disabled="type !== 'I'" />
      </el-form-item>
      <el-form-item label="模板描述:" prop="template_description">
        <el-input v-model="addForm.template_description" placeholder="请输入模板描述(不超过50个字符)" maxlength="50" clearable />
      </el-form-item>
      <el-form-item label="模板类型:" prop="template_type">

        <el-select v-model="addForm.template_type" placeholder="请选择模板类型" @change="driveChange" :disabled="type !== 'I'">
          <el-option v-for="(item, index) of typeOptions" :key="index" :label="item.name" :value="item.key" />
        </el-select>
      </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="saveFormData"> 保存 </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", "type", "templateData"],
  emits: ["dialogClose", "dialogSuccess"],
  setup(props, ctx) {
    const ruleFormRef = ref(null);
    const validName = (rule, value, callback) => {
      var name = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
      if (name.test(value) || !value) {
        callback();
      } else {
        callback(new Error("名称只能以字母开头,仅支持字母,数字和下划线,最短3个字符起,且长度不能超过20个字符"));
      }
    };
    const state = reactive({
      addForm: {},
      rules: {
        template_name: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在3到20个字符", trigger: "blur" },
          { required: true, validator: validName, trigger: "blur" },
        ],
        template_description: [
          { required: false, message: "请输入模板描述", trigger: "blur" }
        ],
        template_type: [
          { required: true, message: "请选择类型", trigger: "blur" }
        ],
      },
      typeOptions: []
    });


    const visible = computed(() => {
      return props.dialogVisible;
    });
    const type = computed(() => {
      return props.type;
    });
    onMounted(() => {
      state.addForm = props.formData;
      getTypeOptions();
    });

    const getTypeOptions = () => {
      state.typeOptions = [];
      for (let i in props.templateData) {
        let obj = {
          key: Number(i),
          name: props.templateData[i]
        }
        state.typeOptions.push(obj);
      }
    }

    const closeDialog = () => {
      ctx.emit("dialogClose");
    };

    const importData = () => { };

    const exoportData = () => { };


    const saveFormData = () => {
      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const res = props.type === 'I' ? await infoApi.addMb(state.addForm) : await infoApi.editMb(state.addForm);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            // 关闭弹框
            ctx.emit("dialogSuccess");
          } else {
            ElMessage.error(res.data);
          }
        } else {
        }
      });
    };
    return {
      ...toRefs(state),
      visible,
      type,
      closeDialog,
      importData,
      exoportData,
      saveFormData,
      ruleFormRef
    };
  },
};
</script>
<style lang="scss" scoped>
.title-div {
  height: 40px;
  line-height: 40px;
  display: flex;

  >div {
    width: 15%;

    span {
      margin-right: 10px;
    }
  }
}

.tree-div {
  height: 780px;
  display: flex;
  justify-content: space-between;

  .tree {
    width: 20%;
    border: 1px solid #f2f2f2;
    height: 100%;
    padding: 10px;
  }

  .table {
    height: 100%;
    width: 79%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .point-table {
      border: 1px solid #f2f2f2;
      padding: 10px;
    }

    .propertie-table {
      padding: 10px;
      border: 1px solid #f2f2f2;
    }
  }

  .custom-tree-node {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .add-icon {
      padding-right: 15px;
    }
  }
}
</style>