合同组件开发思路文档

简要说明：

目前有4种合同（主合同，子合同，中心合同，通用合同），统一用这一个组件实现的。
合同有两种模板，我司模板（选择模板）和对方模板（上传文件）
一个合同有两种类型，往期合同与非往期合同（不走审批流程）

//入口
    /**
     * @param {currentStep} 当前打开第几步页面
     * @param {contractId} 合同Id
     * @param {isAddContract} 是否为新建合同
     * @param {formData} 新建合同表单填写带过来的信息
     */
    getContractDetail({ currentStep, contractId, isAddContract, formData = {} }) {
      this.loadSteps()
      this.isAddContract = isAddContract
      this.current = currentStep
      this.formData = formData
      if (contractId) {
        this.getContractInfo(contractId)
      } else {
        this.visible = true
      }
    },

整体思路

1.组件有4个入口页面，主合同，补充子合同，独立子合同，（中心合同，普通合同）。它们的Step名称和数量都是不一样的，所以需要根据不同的合同情况选择加载
2. 4个入口页面把需要的Stepxxx组件配置到每个入口页面，监听Stepxxx组件切换，调用当前Stepxxx组件的入口方法，像汽车选配置一样，你需要座椅加热，你就加上
3.入口页面的入口方法有4个参数，上面代码中已经注释分别代表啥意思.,入口方法拿到核心数据contractInfo合同数据，整个组件只会维护这一个数据对象，公用这一个对象
4.整个组件通过step步骤条一步步进行的，每一步都是一个Step组件
5. 每个Stepxxx组件都有一个StepInit入口方法，会携带contractInfo核心数据到组件内
6.在每个组件里，如果有新的合同数据产生，会将最新的数据更新到contractInfo上(下面举个例子1,StepOne组件选择合同模板后拿到 flowId, processDefineVersio templateId templateContent, templateFiles这些数据，更新到contractInfo上)

例子1

   //获取指定模板详情(合同内容、flowID...)
      GetContractTemDetail(item.id).then(res => {
        if (res.status === 1) {
          // 扩展contractInfo
          Object.assign(this.contractInfo, {
            flowId: res.data.flowId,
            processDefineVersion: res.data.processDefineVersion,
            templateId: item.id,
            templateContent: res.data.sourceHtml,
            templateFiles: res.data.fields
          })
        } else {
          this.$message.error(res.message)
        }