优化流程流转记录

src/views/demo/workflow/task/process/audit.vue

@@ -7,13 +7,13 @@
       <a-button type="primary" @click="closePage" class="ml-2" danger>关闭 </a-button>
     </div>
 
-    <div :class="mapConfig?.isShowMap?'form-container':''">
+    <div :class="mapConfig?.isShowMap ? 'form-container' : ''">
       <a-layout>
         <a-layout>
-          <a-layout-content> 
+          <a-layout-content>
             <a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
               <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
-                <div :class="mapConfig?.isShowMap?'form-container':''">
+                <div :class="mapConfig?.isShowMap ? 'form-container' : ''">
                   <FormViewer
                     ref="formBoxRef"
                     :formConfig="formConfig"
@@ -49,31 +49,33 @@
                 </div>
               </a-tab-pane>
               <a-tab-pane key="record" tab="流转记录" force-render>
-                <a-timeline>
-                  <a-timeline-item
-                    v-for="(item, index) in designerData.logs"
-                    :key="index"
-                    :color="item.type"
-                  >
-                    <div class="title">{{ item.time }}</div>
-                    <a-card hoverable size="small">
-                      <div class="type-title">{{ item.name }}</div>
-                      <div class="content">
-                        <span
-                          class="link"
-                          v-for="(userName, index2) in item.userNames"
-                          :key="index2"
-                          >{{ userName }}</span
-                        >
-                        {{ item.des }}
-                      </div>
-                    </a-card>
-                  </a-timeline-item>
-                </a-timeline>
+                <div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
+                  <a-timeline>
+                    <a-timeline-item
+                      v-for="(item, index) in designerData.logs"
+                      :key="index"
+                      :color="item.type"
+                    >
+                      <div class="title">{{ item.time }}</div>
+                      <a-card hoverable size="small">
+                        <div class="type-title">{{ item.name }}</div>
+                        <div class="content">
+                          <span
+                            class="link"
+                            v-for="(userName, index2) in item.userNames"
+                            :key="index2"
+                            >{{ userName }}</span
+                          >
+                          {{ item.des }}
+                        </div>
+                      </a-card>
+                    </a-timeline-item>
+                  </a-timeline>
+                </div>
               </a-tab-pane>
             </a-tabs>
           </a-layout-content>
-          <a-layout-footer :style="footerStyle" > 
+          <a-layout-footer :style="footerStyle">
             <a-tabs v-if="props.isRead == 0" v-model:activeKey="auditName">
               <a-tab-pane key="audit" :tab="auditTitleVal">
                 <div class="approval-column">
@@ -123,8 +125,6 @@
       />
     </div>
 
-    
-
     <!-- 节点记录信息 -->
     <div class="info-box" v-if="designerData.nodeLogs.length > 0">
       <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
@@ -235,7 +235,6 @@
     des: [{ required: true, message: '请填写审批意见', trigger: 'blur' }],
   });
 
-  
   if (props.type == 4) {
     rules.value = {};
   }
@@ -257,7 +256,7 @@
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
-    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    height: document.documentElement.clientHeight - 300.5 + 'px;',
     midVisible: false,
     isCustmerTitle: false,
     nodeUsers: [],
@@ -290,19 +289,19 @@
   const auditName = ref('audit');
   const auditTitleVal = ref('审批栏');
   const auditNameVal = ref('审批意见');
-  const rejectOpen = ref(false);      
+  const rejectOpen = ref(false);
   const footerStyle = ref({
-        height:"220px",
-        width:mapConfig.value.isShowMap ? '100%':'60%',
-        overFlow:"auto",
-        color: '#fff',
-        backgroundColor: '#ffffff',
-        zIndex:"9999999999",
-        padding:"0px 100px",
-        position:"fixed",
-        bottom:"0px",
-        left:"0px"
-      })
+    height: '220px',
+    width: mapConfig.value.isShowMap ? '100%' : '60%',
+    overFlow: 'auto',
+    color: '#fff',
+    backgroundColor: '#ffffff',
+    zIndex: '9999999999',
+    padding: '0px 100px',
+    position: 'fixed',
+    bottom: '0px',
+    left: '0px',
+  });
 
   function changeActive(activeKey) {
     if (activeKey == 'flow') {
@@ -350,14 +349,14 @@
       currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
       mapConfig.value = currentNode.mapConfig;
 
-      footerStyle.value.width = mapConfig.value?.isShowMap ? "60%":"100%"
-      if(mapConfig.value?.isShowMap){}
-
+      footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
+      if (mapConfig.value?.isShowMap) {
+      }
     } else {
       currentNode = auditNode;
       let currentMapNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
       mapConfig.value = currentMapNode.mapConfig;
-      footerStyle.value.width = mapConfig.value?.isShowMap ? "60%":"100%"
+      footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
     }
     if (currentNode.authFields.length > 0) {
       formVisble.value = true;
@@ -470,7 +469,7 @@
     for (let key in nodeMap) {
       nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
     }
-
+    logs.reverse();
     logs.forEach(
       (log: {
         unitId: string;
@@ -754,13 +753,11 @@
     }
   }
 
-
-
-  async function handlerShowGeomtrys(currentNode){
-    let info = currentNode.authFields?.find((item,index)=>{
-      return item.component == "MapGeom"
-    })
-    let layer:string="";
+  async function handlerShowGeomtrys(currentNode) {
+    let info = currentNode.authFields?.find((item, index) => {
+      return item.component == 'MapGeom';
+    });
+    let layer: string = '';
 
     // let layer:string="drone_shp_data";
     if (info) {
@@ -772,7 +769,7 @@
     }
     let geomfiledValue = info.field.toLowerCase();
 
-    let gids = "";
+    let gids = '';
 
     try {
       await formBoxRef.value.getForm().then((res) => {
@@ -818,9 +815,7 @@
     }
   }
 
-
-  function onMapboxLoad(){
-
+  function onMapboxLoad() {
     handlerShowGeomtrys(designerData.formCurrentNode);
   }
   // 驳回到指定节点

src/views/demo/workflow/task/process/look.vue

@@ -57,27 +57,29 @@
               </div>
             </a-tab-pane>
             <a-tab-pane key="record" tab="流转记录" force-render>
-              <a-timeline>
-                <a-timeline-item
-                  v-for="(item, index) in designerData.logs"
-                  :key="index"
-                  :color="item.type"
-                >
-                  <div class="title">{{ item.time }}</div>
-                  <a-card hoverable size="small">
-                    <div class="type-title">{{ item.name }}</div>
-                    <div class="content">
-                      <span
-                        class="link"
-                        v-for="(userName, index2) in item.userNames"
-                        :key="index2"
-                        >{{ userName }}</span
-                      >
-                      {{ item.des }}
-                    </div>
-                  </a-card>
-                </a-timeline-item>
-              </a-timeline>
+              <div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
+                <a-timeline>
+                  <a-timeline-item
+                    v-for="(item, index) in designerData.logs"
+                    :key="index"
+                    :color="item.type"
+                  >
+                    <div class="title">{{ item.time }}</div>
+                    <a-card hoverable size="small">
+                      <div class="type-title">{{ item.name }}</div>
+                      <div class="content">
+                        <span
+                          class="link"
+                          v-for="(userName, index2) in item.userNames"
+                          :key="index2"
+                          >{{ userName }}</span
+                        >
+                        {{ item.des }}
+                      </div>
+                    </a-card>
+                  </a-timeline-item>
+                </a-timeline>
+              </div>
             </a-tab-pane>
           </a-tabs>
         </a-layout-content>
@@ -173,7 +175,7 @@
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
-    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    height: document.documentElement.clientHeight - 300.5 + 'px;',
     midVisible: false,
     isCustmerTitle: false,
     nodeUsers: [],
@@ -343,7 +345,7 @@
     for (let key in nodeMap) {
       nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
     }
-
+    logs.reverse();
     logs.forEach(
       (log: {
         unitId: string;