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

hookehuyr
Commit 29a3334a019017a20ba26b864f20f1a7e727671c 29a3334a 1 parent b0ab6302
Showing 3 changed files with 89 additions and 11 deletions
components.d.ts
src/main.js
src/views/index.vue
--- a/components.d.ts
View file @29a3334
+++ b/components.d.ts
View file @29a3334
@@ -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']
--- a/src/main.js
View file @29a3334
+++ b/src/main.js
View file @29a3334
@@ -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');
--- a/src/views/index.vue
View file @29a3334
+++ b/src/views/index.vue
View file @29a3334
 <!--
  * @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) => {
+  formData.value.forEach((item) => {
-  //   if (item.key === 'field_4') {
+    if (item.key === 'field_32') {
-  //     // 不同组件默认值可能获取方式设定不一样，需要检查下
+      // 不同组件默认值可能获取方式设定不一样，需要检查下
-  //     item.component_props.default = '123';
+      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;