基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

let viewType = ref(null); // 查看明细的组件类型
//根据申请单的模块类型定义，确定组件名称
function getViewType() {
  if (applyid.value) {
    // 一般规则：通过申请单的DataTable去掉前缀，转换小写，获得模块名称，如TW_Payment => payment
    var param = { applyId: applyid.value };
    apply.GetModuleName(param).then(data => {
      if (data) {
        console.log(data);
        let pageComponent = defineAsyncComponent(() => import(`/@/views/workflow/modules/view/${data.toLowerCase()}.vue`));
        // console.log(pageComponent);
        viewType.value = markRaw(pageComponent);
      }
    });
  }
}

<el-form ref="viewRef" :model="viewForm" label-width="120px">
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-descriptions title="" :column="2" border>
              <el-descriptions-item label="报销类型">
                {{ viewForm.category }}
              </el-descriptions-item>
              <el-descriptions-item label="报销事由">
                {{ viewForm.reason }}
              </el-descriptions-item>
              <el-descriptions-item label="总金额">
                <el-input v-model="viewForm.totalAmount" disabled style="width: 150px">
                  <template #suffix> 元 </template>
                </el-input>
              </el-descriptions-item>
              <el-descriptions-item label="备注信息" :span="2">
                {{ viewForm.note }}
              </el-descriptions-item>
              <el-descriptions-item label="明细清单" :span="2">
                <vxe-table ref="xTable" stripe highlight-current-row highlight-hover-row :data="detailData">
                  <vxe-column type="seq" width="60" />
                  <vxe-column field="feeType" title="费用类型" width="100" />
                  <vxe-column field="occurTime" title="发生时间" width="250" />
                  <vxe-column field="feeAmount" title="费用金额" width="100" />
                  <vxe-column field="feeDescription" title="费用说明" width="250" />
                </vxe-table>
              </el-descriptions-item>
              <el-descriptions-item label="附件" :span="2">
                <my-upload v-model="viewForm.attachGUID" :disabled="true" :data="{ guid: viewForm.attachGUID, folder: '申请单图片' }" />
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-form>

//挂载的时候初始化数据
onMounted(async () => {
  await getData(); //打开新增窗体的时候，初始化公司列表
});
function getData() {
  let applyid = props.applyid + '';
  if (applyid) {
    reimbursement.FindByApplyId(applyid).then(data => {
      Object.assign(viewForm, data);
      // 获取从表明细记录
      var headerId = viewForm.id;
      reimbursement.FindDetailByHeaderId(headerId).then(data => {
        detailData.value = data;
      });
    });
  }
}