Vue利用extends改造组件

Vue利用extends改造组件

最近有个需求：就是不能更改公司的工作流组件，但是我们这个项目需要对这个组件进行客户化开发 。

修改 n20-common-lib下面的ApprovalButtons组件

JtApprovalButtons.vue

<template>
  <div>
    <el-form ref="approveBtnGroup" label-position="right" :label-width="_lang === 'zh' ? '6em' : '10em'">
      <el-form-item v-if="fileKit || fileKitT" label="附加上传">
        <cl-upload
          ref="Jtupload"  // 对比ApprovalButtons组件的template新加的ref，后面需要处理upload里面data的fileList数组
          class="upload-224"
          :file-name.sync="fileName"
          multiple
          :data="fileData"
          :file-url.sync="fileUrl"
          :on-success="onSuccess"
          :on-remove="onRemove"
          action="/api/neams/eamsbaserecord/batchSavejson"
          msg-type="message"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import ClUpload from 'n20-common-lib/src/components/Upload'
import ApprovalButtons from 'n20-common-lib/src/components/ApprovalButtons';
export default {
  name: "JtApprovalButtons", // 新对象名称
  extends: ApprovalButtons, // 继承的对象
  components: {
    ClUpload  // ApprovalButtons组件引用了ClUpload组件，
  },
  data () {
    return {
      queryList: []
    }
  },
  created () {
    // 这个是根据客户化开发加进来查询附件和审批意见的，有值则回显出来
    this.init()
  },
  methods: {
    init () {
      let userNo = JSON.parse(sessionStorage.getItem('User_Info'))?.userNo
      let param = {
        procInstId: this.$route.query.processInstanceId,
        userNo
      }
      getTempFileByUser(param).then(res => {
        this.messageC = res.message
        if (res.fileDtos && res.fileDtos?.length) {
          this.queryList = res.fileDtos && res.fileDtos.map(item => {
            return {
              name: item.fileName,
              beid: item.beid
            }
          })
          this.$refs.Jtupload.fileList = this.queryList
        }
      })
    },
    // 重写getParam的参数传递fileDtos，其他保持ApprovalButtons的不变
    getParam() {
      let fileDtos = []
      if (this.$refs.Jtupload.fileList && this.$refs.Jtupload.fileList.length) {
        fileDtos = this.getFileDtos(this.$refs.Jtupload.fileList);
      } 
      let { typeCode, taskId, groupNo, isAgentcy } = this.$route.query
      return [
        {
          typeCode,
          taskId,
          groupNo,
          taskDefKey: this.taskDefKey,
          message: this.messageC,
          formData: JSON.stringify(this.formData),
          signText: this.signText,
          isAgentcy: isAgentcy,
          fileDtos: fileDtos,
          carbonCopyUserDtoList: this.carbonCopyList.map((c) => ({ userNo: c.uno, userName: c.uname })),
          addTaskList: this.addTaskList.map((c) => ({ userNo: c.uno, userName: c.uname })),
          addTaskType: this.addTaskType,
          addTaskWay: this.addTaskWay,
          ...this.otherAtt
        }
      ]
    },
    getFileDtos(fileList) {
      return fileList.map((file) => {
        return {
          fileName: file.name,
          beid: (file.response && Object.values(file.response).length) ? file.response?.data : file.beid
        }
      })
    }
  }
}
</script>

在上述代码中给原template的cl-upload加了ref属性，所以引用的时候也得根据实际情况引用进来

main.js

// 全局注册组件
import JtApprovalButtons from "@/components/approvalButtons/index.vue"
Vue.component('JtApprovalButtons',JtApprovalButtons)

edit.vue
// 使用改造后的组件
<div v-if="$route.query.typeCode == 'GDEBIT_FM001'">
   <div v-if="$route.query.processInstanceId">
     <n20-approve-card :procInstId="$route.query.processInstanceId" />
   </div>
   <div v-if="$route.query.parent === '审核'">
     <JtApprovalButtons :messageMax="messageMax" fileKit/>
   </div>
 </div>

以上通过extends继承了原有组件所有的特性扩展其功能，根据需要在该子类中重写父组件的属性和方法，避免了原组件的污染。