新增流程审核输入框和操作按钮测试

@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppointmentField: typeof import('./src/components/AppointmentField/index.vue')['default']
+    ApprovalField: typeof import('./src/components/ApprovalField/index.vue')['default']
     AreaPickerField: typeof import('./src/components/AreaPickerField/index.vue')['default']
     ButtonField: typeof import('./src/components/ButtonField/index.vue')['default']
     CalendarField: typeof import('./src/components/CalendarField/index.vue')['default']
@@ -44,6 +45,7 @@ declare module '@vue/runtime-core' {
     TextareaField: typeof import('./src/components/TextareaField/index.vue')['default']
     TextField: typeof import('./src/components/TextField/index.vue')['default']
     TimePickerField: typeof import('./src/components/TimePickerField/index.vue')['default']
+    VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanArea: typeof import('vant/es')['Area']
     VanButton: typeof import('vant/es')['Button']
     VanCalendar: typeof import('vant/es')['Calendar']
@@ -55,6 +57,7 @@ declare module '@vue/runtime-core' {
     VanDatePicker: typeof import('vant/es')['DatePicker']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
+    VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-06 16:36:43
+ * @LastEditTime: 2024-06-07 10:28:48
  * @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 } 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, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble } 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);
+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(vueEsign)
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-04 17:19:56
+ * @LastEditTime: 2024-06-07 15:05:43
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -22,16 +22,34 @@
     <div v-if="PHeader.label" class="table-title" v-html="PHeader.label" />
     <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
     <van-config-provider :theme-vars="themeVars">
-      <van-form @submit="onSubmit" :scroll-to-error="true">
+      <van-form ref="myForm" @submit="onSubmit" :scroll-to-error="true">
         <van-cell-group :border="false">
           <component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
             :is="item.component" :item="item" @active="onActive" @remove="onRemove" />
         </van-cell-group>
+        <!-- 非流程版表单 -->
         <div v-if="formData.length && PCommit.visible" style="margin: 16px">
           <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
             {{ PCommit.text ? PCommit.text : '提交' }}
           </van-button>
         </div>
+        <!-- 流程表单 -->
+        <div v-if="formSetting.is_flow" style="margin: 16px; border-top: 1px dashed #eee; padding-top: 1rem;">
+          <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=""
+            />
+          </div>
+          <van-button round block type="primary" @click="approval_show=true" style="margin-bottom: 1rem;">
+            审核操作
+          </van-button>
+        </div>
         <!-- <van-cell-group :border="false">
           <component
             v-for="(item, index) in mockData"
@@ -49,6 +67,12 @@
           </van-button>
         </div> -->
       </van-form>
+      <!-- <van-floating-bubble
+        axis="xy"
+        icon="records-o"
+        magnetic="x"
+        @click="onClickFloatingBubble"
+      /> -->
     </van-config-provider>
   </div>
   <div style="text-align: center; color: #545454; font-size: 0.85rem; padding-bottom: 2rem">
@@ -77,6 +101,14 @@
       </div>
     </div>
   </van-overlay>
+  <van-action-sheet
+    v-model:show="approval_show"
+    :actions="actions"
+    @select="onApprovalSelect"
+    cancel-text="取消"
+    close-on-click-action
+    @cancel="onApprovalCancel"
+  />
 </template>
 
 <script setup>
@@ -190,6 +222,36 @@ const onSubmitPwd = async () => {
   }
 }
 
+const approval_show = ref(false);
+const approval_note = ref('');
+// 审批组件点击
+const onClickFloatingBubble = () => {
+  approval_show.value = true;
+}
+const myForm = ref(null);
+const actions = [
+  { name: '提交', id: 'commit', },
+  { name: '撤回', id: 'withdraw', disabled: true },
+  { name: '驳回', id: 'reject', },
+  { name: '结束流程', key: 'terminate', },
+];
+const onApprovalSelect = (item) => {
+  switch (item.id) {
+    case 'commit':
+      myForm.value.submit()
+      break;
+    case 'withdraw':
+      break;
+    case 'reject':
+      break;
+    case 'terminate':
+      break;
+  }
+};
+const onApprovalCancel = () => {
+
+}
+
 onMounted(async () => {
   // TAG: 全局背景色
   document
@@ -379,12 +441,18 @@ onMounted(async () => {
   // })
   formData.value = formatData(page_form);
   // TODO：再次提交测试, 需要获取原来表单数据
-  // formData.value.forEach((item) => {
-  //   if (item.key === 'field_4') {
-  //     // 不同组件默认值可能获取方式设定不一样，需要检查下
-  //     item.component_props.default = '123';
-  //   }
-  // });
+  formData.value.forEach((item) => {
+    if (item.key === 'field_32') {
+      // 不同组件默认值可能获取方式设定不一样，需要检查下
+      item.component_props.default = '12345657';
+    }
+  });
+  // TODO: 设置读写权限 read_only read_write
+  formData.value.forEach((item) => {
+    if (item.key === 'field_32') {
+      item.component_props.readonly = true;
+    }
+  });
   // TAG: mock数据
   mockData.value = [
     {
@@ -489,6 +557,8 @@ onMounted(async () => {
       submitStatus.value = true;
     }
   }
+  // TODO: 判断是否流程表单
+  formSetting.value.is_flow = false;
 });
 
 // 打开轮询用户是否关注
@@ -800,6 +870,11 @@ const onSubmit = async (values) => {
 </script>
 
 <style lang="less">
+
+:root:root {
+  --van-floating-bubble-background: #C2915F;
+}
+
 .table-title {
   padding: 1rem;
   font-size: 1.15rem;