新增表单审批意见显示

hookehuyr
Commit 4f9964d6bfc8a5e775d425abb4f7b919a04aa7b0 4f9964d6 1 parent 8a38d966
Showing 2 changed files with 67 additions and 20 deletions
src/main.js
src/views/index.vue
--- a/src/main.js
View file @4f9964d
+++ b/src/main.js
View file @4f9964d
@@ -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');
--- a/src/views/index.vue
View file @4f9964d
+++ b/src/views/index.vue
View file @4f9964d
 <!--
  * @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>
+            <p style="margin-bottom: 1rem; font-size: 0.85rem; font-weight: bold;">审批结果</p>
-            <div style="margin-bottom: 1rem; border: 1px solid #eee;">
+            <div style="margin-bottom: 1rem; border-left: 1px solid #eee; border-right: 1px solid #eee;">
-              <van-field
+              <van-collapse ref="collapseRef" v-model="active_flow_process">
-                v-model="approval_note"
+                <van-collapse-item v-for="(item, index) in form_flow_process_list" :value="item.node_action_id === 'commit' ? '提交' : '驳回'" :name="item.node_code">
-                rows="3"
+                  <template #title>
-                autosize
+                    <div style="display: flex; align-items: center;">
-                label=""
+                      <van-icon
-                type="textarea"
+                        :name="item.node_action_id === 'commit' ? 'passed' : 'close'"
-                placeholder=""
+                        :color="item.node_action_id === 'commit' ? '#05ae33' : 'red'" size="1rem"
-                disabled
+                      />&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);
   // 表单网页标题