vue按需引入定制化组件

• 需求： 针对不同客户可引入不同定制化字段或组件，这些代码又不要存放和影响到自身产品代码中，需要给产品开放一个入口，可以嵌入不同需求代码

• 代码管理： 创建独立仓库存放前后端定制化代码，本地启动和部署生产时合并2个仓库代码（产品代码和定制化代码）后再进行压缩打包

• java后台： 搭建jar包并自动化部署，使用hook，通过配置，可支持调用定制微服务的内部接口

• 优势： 相对于不同客户和需求进行分支管理，大量节省维护和测试时间

定制化组件

<template>
  <el-row class="">
    <el-col :span="12">
      <el-form-item>
        <el-select class="select-slot" 
          v-model="newListForm.unfunctionFlag" 
          id="new-demand-form-item40">
          <span slot="prefix" class="el-icon-open"> 是否涉及非功能</span>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item>
        <el-select class="select-slot" 
          v-model="newListForm.safeFlag" 
          id="new-demand-form-item41">
          <span slot="prefix" class="el-icon-open"> 是否涉及安全性需求</span>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>

export default {
  data() {
    return {
      newListForm: {
        unfunctionFlag : '2', //涉及非功能  1、是 2、否
        safeFlag : '2', //涉及安全性需求  1、是 2、否
      }
    }
  },
  created(){},
  mounted(){},
  methods: {
    getSelectData(){
      return this.newListForm;
    }
  }
};

</script>

按需加载容器

<template>
  <div class="dialogs-content" id="new-demand-content">
    <el-form ref="newListForm" :model="newListForm" size="mini" id="new-demand-form">
      <el-row>
        <el-col class="title-input">
          <el-form-item prop="demandName">
            <em></em>
            <el-input type="text" v-model="newListForm.demandName" placeholder='请输入' id="new-demand-form-item1">
              <span slot="prefix" class="el-icon-edit"> 名称</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 特性 定制化字段 -->
      <component 
        :is="realCompoonent"  
        v-if="newListForm.demandType == 3"
        ref="customizationChild"></component>
      <el-row class="form-pop-btn">
        <el-button size="small" type="primary" @click="submitDemandForm('newListForm')" 
          id="new-demand-form-item26">确定</el-button>
        <el-button size="small" id="new-demand-form-item27">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      realCompoonent: null,
      newListForm: {
        demandName: '',
        demandType: '3',
      }
    }
  },
  created(){
    this.init();
  },
  methods: {
    init(){
      let path = 'new-demand.vue';
      try {          
        this.realCompoonent = require(`@/components/customization/${path}`).default;
      } catch(ex){
        console.log(`load sub com [${path}] failed. ${ex}`)
        this.realCompoonent = null
      }
    },
    // 确定新建
    submitDemandForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 新建需求
          const { demandName, demandType } = this.newListForm
          let data = {
            reqName: demandName,
            workflowTypeId: demandType,
          }
          if(demandType == 3 && this.realCompoonent){ // 特性需求  定制化字段
            let obj = this.$refs.customizationChild.getSelectData(); //获取子组件属性
            for(let key in obj){
              data[key] = data[obj[key]]; //添加子组件字段
            }
          }
          // sendRequest() // 发送请求
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>