feat: 代码评审修改

src/views/bpm/processInstance/detail/PrintDialog.vue

@@ -3,7 +3,9 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { useUserStore } from '@/store/modules/user'
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
-import { decodeFields } from '@/utils/formCreate'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import formCreate from "@form-create/element-ui";
 
 const userStore = useUserStore()
 
@@ -16,6 +18,21 @@ const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
 const formFields = ref()
 const printDataMap = ref({})
 
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
+
+const fApiH = ref<ApiAttrs>()
+const detailFormH = ref({
+  rule: [],
+  option: {},
+  value: {}
+})
+const fcRef = ref()
+
 const open = async (id: string) => {
   loading.value = true
   try {
@@ -30,9 +47,38 @@ const open = async (id: string) => {
 defineExpose({ open })
 
 const parseFormFields = () => {
+  const processInstance = printData.value.processInstance
+  const processDefinition = processInstance.processDefinition
+  setConfAndFields2(
+    detailForm,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  detailForm.value.option = {
+    submitBtn: false,
+    resetBtn: false,
+    form: {
+      disabled: true
+    }
+  }
+  setConfAndFields2(
+    detailFormH,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  detailFormH.value.option = {
+    submitBtn: false,
+    resetBtn: false,
+    form: {
+      disabled: true
+    }
+  }
+  return
   // TODO @lesan：form field 有可能基于 form-create 什么 api 生成么？好像也挺难的 = =
   const formFieldsObj = decodeFields(printData.value.formFields)
-  const processVariables = printData.value.processVariables
+  const processVariables = printData.value.processInstance.formVariables
   let res: any = []
   for (const item of formFieldsObj) {
     const id = item['field']
@@ -40,6 +86,7 @@ const parseFormFields = () => {
     let html = '暂不支持此类型的表单展示'
     // TODO 完善各类型表单的展示
     // TODO @lesan：要不 UploadImg、UploadFile 特殊处理下，其它就 else processVariables[item['field']]？
+    // TODO @芋艿：感觉很多都要处理一下，select那些都要转为可读的label，还有子表单那些，都需要处理一下...
     if (item['type'] === 'input') {
       html = processVariables[item['field']]
     } else if (item['type'] === 'UploadImg') {
@@ -52,15 +99,15 @@ const parseFormFields = () => {
 }
 
 const initPrintDataMap = () => {
-  printDataMap.value['startUser'] = printData.value.startUser.nickname
-  printDataMap.value['startUserDept'] = printData.value.startUser.deptName
-  printDataMap.value['processName'] = printData.value.processName
-  printDataMap.value['processNum'] = printData.value.processInstanceId
-  printDataMap.value['startTime'] = printData.value.startTime
-  printDataMap.value['endTime'] = printData.value.endTime
+  printDataMap.value['startUser'] = printData.value.processInstance.startUser.nickname
+  printDataMap.value['startUserDept'] = printData.value.processInstance.startUser.deptName
+  printDataMap.value['processName'] = printData.value.processInstance.name
+  printDataMap.value['processNum'] = printData.value.processInstance.id
+  printDataMap.value['startTime'] = formatDate(printData.value.processInstance.startTime)
+  printDataMap.value['endTime'] = formatDate(printData.value.processInstance.endTime)
   printDataMap.value['processStatus'] = getDictLabel(
     DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
-    printData.value.processStatus
+    printData.value.processInstance.status
   )
   printDataMap.value['printUsername'] = userName.value
   printDataMap.value['printTime'] = printTime.value
@@ -96,12 +143,12 @@ const getPrintTemplateHTML = () => {
     headTd.innerHTML = '流程节点'
     headTr.appendChild(headTd)
     processRecordTable.appendChild(headTr)
-    printData.value.approveNodes.forEach((item) => {
+    printData.value.tasks.forEach((item) => {
       const tr = document.createElement('tr')
       const td1 = document.createElement('td')
-      td1.innerHTML = item.nodeName
+      td1.innerHTML = item.name
       const td2 = document.createElement('td')
-      td2.innerHTML = item.nodeDesc
+      td2.innerHTML = item.description
       tr.appendChild(td1)
       tr.appendChild(td2)
       processRecordTable.appendChild(tr)
@@ -114,6 +161,25 @@ const getPrintTemplateHTML = () => {
   return doc.body.innerHTML
 }
 
+const html = ref('')
+const handleDialogOpened = async () => {
+  const processInstance = printData.value.processInstance
+  const processDefinition = processInstance.processDefinition
+  let fcData = {
+    rule: [],
+    option: {},
+    value: {}
+  }
+  setConfAndFields2(
+    fcData,
+    processDefinition.formConf,
+    processDefinition.formFields,
+    processInstance.formVariables
+  )
+  const api = formCreate.create(fcData.rule,fcData.option)
+  console.log(api)
+}
+
 const printObj = ref({
   id: 'printDivTag',
   popTitle: '&nbsp',
@@ -128,26 +194,31 @@ const printObj = ref({
     <div id="printDivTag">
       <div v-if="printData.printTemplateEnable" v-html="getPrintTemplateHTML()"></div>
       <div v-else>
-        <h2 class="text-center">{{ printData.processName }}</h2>
+        <h2 class="text-center">{{ printData.processInstance.name }}</h2>
         <div class="text-right text-15px">{{ '打印人员: ' + userName }}</div>
         <div class="flex justify-between">
-          <div class="text-15px">{{ '流程编号: ' + printData.processInstanceId }}</div>
+          <div class="text-15px">{{ '流程编号: ' + printData.processInstance.id }}</div>
           <div class="text-15px">{{ '打印时间: ' + printTime }}</div>
         </div>
         <table class="mt-20px w-100%" border="1" style="border-collapse: collapse">
           <tbody>
             <tr>
               <td class="p-5px w-25%">发起人</td>
-              <td class="p-5px w-25%">{{ printData.startUser.nickname }}</td>
+              <td class="p-5px w-25%">{{ printData.processInstance.startUser.nickname }}</td>
               <td class="p-5px w-25%">发起时间</td>
-              <td class="p-5px w-25%">{{ printData.startTime }}</td>
+              <td class="p-5px w-25%">{{ formatDate(printData.processInstance.startTime) }}</td>
             </tr>
             <tr>
               <td class="p-5px w-25%">所属部门</td>
-              <td class="p-5px w-25%">{{ printData.startUser.deptName }}</td>
+              <td class="p-5px w-25%">{{ printData.processInstance.startUser.deptName }}</td>
               <td class="p-5px w-25%">流程状态</td>
               <td class="p-5px w-25%">
-                {{ getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, printData.processStatus) }}
+                {{
+                  getDictLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+                    printData.processInstance.status
+                  )
+                }}
               </td>
             </tr>
             <tr>
@@ -155,12 +226,14 @@ const printObj = ref({
                 <h4>表单内容</h4>
               </td>
             </tr>
-            <tr v-for="item in formFields" :key="item.id">
-              <td class="p-5px w-20%">
-                {{ item.name }}
-              </td>
-              <td class="p-5px w-80%" colspan="3">
-                <div v-html="item.html"></div>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <form-create
+                  v-model="detailForm.value"
+                  v-model:api="fApi"
+                  :option="detailForm.option"
+                  :rule="detailForm.rule"
+                />
               </td>
             </tr>
             <tr>
@@ -168,12 +241,12 @@ const printObj = ref({
                 <h4>流程节点</h4>
               </td>
             </tr>
-            <tr v-for="item in printData.approveNodes" :key="item.nodeId">
+            <tr v-for="item in printData.tasks" :key="item.id">
               <td class="p-5px w-20%">
-                {{ item.nodeName }}
+                {{ item.name }}
               </td>
               <td class="p-5px w-80%" colspan="3">
-                {{ item.nodeDesc }}
+                {{ item.description }}
                 <div v-if="item.signUrl !== ''">
                   <img class="w-90px h-40px" :src="item.signUrl" alt="" />
                 </div>
@@ -185,7 +258,7 @@ const printObj = ref({
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">取 消</el-button>
+        <el-button @click="handleDialogOpened">取 消</el-button>
         <el-button type="primary" v-print="printObj"> 打 印</el-button>
       </div>
     </template>