新增表单审批意见显示

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-07 10:28:48
+ * @LastEditTime: 2024-07-30 17:21:26
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble, Collapse, CollapseItem } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble).use(Collapse).use(CollapseItem);
 app.use(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-29 17:11:14
+ * @LastEditTime: 2024-07-30 18:04:03
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -54,23 +54,54 @@
             流程操作
           </van-button>
         </div>
-        <!-- TODO: 显示审批意见 -->
-        <!-- <div v-if="page_type === 'info'" style="margin: 16px; padding-top: 1rem;">
+        <!-- 显示审批意见 -->
+        <div v-if="page_type === 'info' && form_flow_process_list.length" style="margin: 16px;">
           <div>
-            <p style="margin-bottom: 1rem; font-size: 0.85rem; font-weight: bold;">审批意见</p>
-            <div style="margin-bottom: 1rem; border: 1px solid #eee;">
-              <van-field
-                v-model="approval_note"
-                rows="3"
-                autosize
-                label=""
-                type="textarea"
-                placeholder=""
-                disabled
-              />
+            <p style="margin-bottom: 1rem; font-size: 0.85rem; font-weight: bold;">审批结果</p>
+            <div style="margin-bottom: 1rem; border-left: 1px solid #eee; border-right: 1px solid #eee;">
+              <van-collapse ref="collapseRef" v-model="active_flow_process">
+                <van-collapse-item v-for="(item, index) in form_flow_process_list" :value="item.node_action_id === 'commit' ? '提交' : '驳回'" :name="item.node_code">
+                  <template #title>
+                    <div style="display: flex; align-items: center;">
+                      <van-icon
+                        :name="item.node_action_id === 'commit' ? 'passed' : 'close'"
+                        :color="item.node_action_id === 'commit' ? '#05ae33' : 'red'" size="1rem"
+                      />&nbsp;
+                      <span v-if="item.node_action_id === 'commit'" class="van-ellipsis" style="color: #05ae33; width: 45vw; display: inline-block; line-height: 1rem;">
+                        {{ item.node_name }}
+                      </span>
+                      <span v-else class="van-ellipsis" style="color: red; width: 45vw; display: inline-block; line-height: 1rem;">
+                        {{ item.node_name }}
+                      </span>
+                    </div>
+                  </template>
+                  <div>
+                    <!-- <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
+                      <van-col span="8">审批操作</van-col>
+                      <van-col span="16" style="text-align: right;">commit=提交，reject=驳回</van-col>
+                    </van-row> -->
+                    <van-row v-if="item.node" gutter="" align="center" style="margin-bottom: 0.25rem;">
+                      <van-col span="8">审批意见</van-col>
+                      <van-col span="16" style="text-align: right;">{{ item.node }}</van-col>
+                    </van-row>
+                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
+                      <van-col span="8">节点名称</van-col>
+                      <van-col span="16" style="text-align: right;">{{ item.node_name }}</van-col>
+                    </van-row>
+                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
+                      <van-col span="8">审批人名称</van-col>
+                      <van-col span="16" style="text-align: right;">{{ item.created_by_name }}</van-col>
+                    </van-row>
+                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
+                      <van-col span="8">审批时间</van-col>
+                      <van-col span="16" style="text-align: right;">{{ formatDate(item.created_time) }}</van-col>
+                    </van-row>
+                  </div>
+                </van-collapse-item>
+              </van-collapse>
+            </div>
           </div>
         </div>
-        </div> -->
         <!-- <van-cell-group :border="false">
           <component
             v-for="(item, index) in mockData"
@@ -175,7 +206,7 @@ import { useRoute } from "vue-router";
 import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
 import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI, flowFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
-import { wxInfo, getUrlParams } from "@/utils/tools";
+import { wxInfo, getUrlParams, formatDate } from "@/utils/tools";
 import { styleColor } from "@/constant.js";
 import { sharePage } from '@/composables/useShare.js'
 import wx from 'weixin-js-sdk'
@@ -377,14 +408,30 @@ const onBindSubmit = (values) => {
 };
 
 const flow_node_code = $route.query.flow_node_code ? $route.query.flow_node_code :formSetting.value.flow_node_code; // flow_node_code 表示随机选择的流程节点的ID
+const form_flow_process_list = ref([]);
+const active_flow_process = ref([]);
+const collapseRef = ref(null);
 
 onMounted(async () => {
   // TAG: 全局背景色
   document
     .querySelector("body")
     .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
-  const { data } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code }); // flow_node_code 表示随机选择的流程节点的ID
+  const { data, flow_process_list, code } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code }); // flow_node_code 表示随机选择的流程节点的ID
   const form_data = data;
+  // 处理审批意见显示
+  if (code) {
+    setTimeout(() => {
+      form_flow_process_list.value = flow_process_list; // 上中下游节点的审批意见
+      if (flow_process_list?.length) {
+        // active_flow_process.value.push(flow_process_list[0]['node_code']);
+        nextTick(() => {
+          // 全部展开
+          collapseRef.value?.toggleAll(true);
+        })
+      }
+    }, 1000);
+  }
   // 缓存表单信息
   store.changeFormInfo(data);
   // 表单网页标题