基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式

'_viewDetail': {
    path: '/_viewDetail',
    meta: {
      title: '查看申请单信息'
    },
    component: Layout,
    children: [{
      path: '',
      component: () => import('@/views/workflow/system/viewdetail')
    }]
  },

<!--实现动态组件的展示-->
    <component :is="viewType" :applyid="applyid" />

methods: {
    getViewType () {
      if (this.applyid) {
        // 通过申请单的DataTable去掉前缀，转换小写，获得模块名称，如TW_Payment => payment
        var param = { applyId: this.applyid }
        apply.GetModuleName(param).then(data => {
          if (data.result) {
            this.viewType = data.result.toLowerCase()
          }
        })
      }
    },

export default {
  install(Vue) {
    // 从模块目录中自动载入模块内容
    const viewFiles = require.context('./view', true, /\.vue$/)
    const viewModules = viewFiles.keys().reduce((viewModules, modulePath) => {
      // set './app.vue' => 'app'
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1').toLowerCase()
      const value = viewFiles(modulePath)
      viewModules[moduleName] = value.default
      return viewModules
    }, {})
    // console.log(viewModules)
    Object.keys(viewModules).forEach(key => {
      // console.log(key)
      Vue.component(key, viewModules[key])
    })
  }
}

// 导入工作流查看、创建等模块
import workflow from './views/workflow/modules'
Vue.use(workflow)

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>付款申请单-表单数据</span>
      </div>
      <el-form ref="viewForm" :model="viewForm" label-width="120px">
        <el-tabs value="basicPage" type="border-card">
          <el-tab-pane name="basicPage" label="基本信息">
            <el-row>
              <el-col :span="24">
                <el-form-item label="付款事由">
                  <el-input v-model="viewForm.reason" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款金额">
                  <el-input v-model="viewForm.payAmount" readonly>
                    <span slot="suffix">元</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款方式">
                  <el-input v-model="viewForm.payType" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款日期">
                  <el-date-picker v-model="viewForm.payDate" align="right" type="datetime" placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款人全称">
                  <el-input v-model="viewForm.payeeFullName" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行账号">
                  <el-input v-model="viewForm.bankAccount" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户行">
                  <el-input v-model="viewForm.bank" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注信息">
                  <el-input v-model="viewForm.note" readonly type="textarea" :rows="5" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="附件">
                  <my-attachment v-model="viewForm.attachGUID" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <div class="dialog-footer">
      <el-button type="success" @click="goback">返回列表页面</el-button>
    </div>
  </div>
</template>

props: {
    applyid: {// 申请单ID, 接受外部v-model传入的值
      type: [String, Number],
      default: ''
    }
  },

created () {
    this.getData() // 显示数据
  },
  methods: {
    getData () {
      if (this.applyid) {
        var param = { applyId: this.applyid }
        payment.FindByApplyId(param).then(data => {
          // console.log(data)
          Object.assign(this.viewForm, data.result)
        })
      }
    }

<!--表格行操作按钮 -->
      <el-table-column align="center" label="操作" width="110">
        <template scope="scope">
          <el-row>
            <el-button-group>
              <el-tooltip effect="light" content="查看" placement="top-start">
                <el-button icon="el-icon-search" type="success" circle size="mini"
                  @click="showView(scope.row.apply_ID)" />
              </el-tooltip>
              <el-tooltip effect="light" content="删除" placement="top-start">
                <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
              </el-tooltip>
            </el-button-group>
          </el-row>
        </template>
      </el-table-column>

showView (id) { // 显示查看对话框处理
      this.$router.push(
        {
          path: `/_viewDetail`, // 查看申请单路径，以_view开始
          query: { id: id }
        })
    },