feat: 添加审批流程创建UI

src/pages/approval/components/ApprovalCreate.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="bg-white rounded-2 py-3 px-4 mx-4 my-2 shadow-sm">
+    <view class="text-4">审批流程</view>
+    <view v-if="false" class="text-3 color-#838589 mt-2">必填信息填写完整后，将显示审批流程</view>
+    <view v-else class="mt-4 color-#838589">
+      <wd-steps :active="3" vertical>
+        <wd-step>
+          <template v-slot:icon>
+            <view
+              class="custom-bg-blue w-5 h-5 rounded-50% flex flex-items-center flex-justify-center"
+            >
+              <view class="w-2.5 h-2.5 bg-white rounded-50%"></view>
+            </view>
+          </template>
+          <template v-slot:title>
+            <view class="custom-color-black text-3.5">
+              <view class="flex-items-center flex">
+                <view>发起人</view>
+              </view>
+              <view class="my-2">
+                <view>
+                  <image
+                    src="https://file.hikmall.com/prod/image/4921b7596d2344088f8611f503b011dc.png"
+                    class="h-10 w-10 rounded-2"
+                    mode="aspectFill"
+                  ></image>
+                  <view class="mx-2">xxx</view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </wd-step>
+        <wd-step>
+          <template v-slot:icon>
+            <view class="bg-#f0801e w-5 h-5 rounded-50% flex flex-items-center flex-justify-center">
+              <image src="/static/images/icon_approval.png" class="w-3 h-3"></image>
+            </view>
+          </template>
+          <template v-slot:title>
+            <view class="custom-color-black text-3.5">
+              <view class="flex-items-center flex">
+                <view>审批节点</view>
+              </view>
+              <view class="pt-2 color-#7e807f text-3">1人通过即可</view>
+              <view class="my-2 flex flex-wrap">
+                <view v-for="item in 8" :key="item" class="mb-2 w-fit mr-2">
+                  <view>
+                    <image
+                      src="https://file.hikmall.com/prod/image/4921b7596d2344088f8611f503b011dc.png"
+                      class="h-10 w-10 rounded-2"
+                      mode="aspectFill"
+                    ></image>
+                    <view class="mx-2">xxx</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </wd-step>
+        <wd-step>
+          <template v-slot:icon>
+            <view class="bg-#2ab6c7 w-5 h-5 rounded-50% flex flex-items-center flex-justify-center">
+              <image src="/static/images/icon_airplane.png" class="w-3 h-3"></image>
+            </view>
+          </template>
+          <template v-slot:title>
+            <view class="custom-color-black text-3.5">
+              <view class="flex-items-center flex">
+                <view>抄送节点</view>
+              </view>
+              <view class="my-2 flex flex-wrap">
+                <view v-for="item in 3" :key="item" class="mb-2 w-fit mr-2">
+                  <view>
+                    <image
+                      src="https://file.hikmall.com/prod/image/4921b7596d2344088f8611f503b011dc.png"
+                      class="h-10 w-10 rounded-2"
+                      mode="aspectFill"
+                    ></image>
+                    <view class="mx-2">xxx</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </wd-step>
+      </wd-steps>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  :deep(.wd-step__header) {
+    width: 1.25rem;
+  }
+
+  :deep(.wd-step__line) {
+    background: #255cf7;
+  }
+</style>

src/pages/approval/components/Form.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="pb-3">
+  <view class="pb-3 mb-2">
     <Visitor></Visitor>
-    <view class="bg-white mx-4 p-2 rounded-2">
+    <view class="bg-white mx-4 p-2 rounded-2 shadow-sm">
       <Input
         :id="0"
         value="单行"

src/pages/approval/components/Visitor.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="bg-white mx-4 p-2 rounded-2 mb-2">
+  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
     <Input :id="0" title="访客姓名" :required="true" @change="inputChange" inline></Input>
     <wd-divider color="#bcbfbe"></wd-divider>
     <Input
@@ -16,10 +16,10 @@
     <wd-divider color="#bcbfbe"></wd-divider>
     <NavigatorSelector :id="3" title="通行门禁点" type="accessControl" inline></NavigatorSelector>
   </view>
-  <view class="bg-white mx-4 p-2 rounded-2 mb-2">
+  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
     <Keyboard :id="4" title="车牌号码" type="car" :maxlength="8" inline></Keyboard>
   </view>
-  <view class="bg-white mx-4 p-2 rounded-2 mb-2">
+  <view class="bg-white mx-4 p-2 rounded-2 mb-2 shadow-sm">
     <DatetimePicker
       :id="5"
       ref="startDatetimePicker"

src/pages/approval/create-application.vue

@@ -10,7 +10,8 @@
   <view class="h-100vh flex flex-col">
     <TopNavigation :title="title"></TopNavigation>
     <scroll-view class="flex-1 box-border" :scroll-y="true">
-      <Components></Components>
+      <ApprovalCreate></ApprovalCreate>
+      <Form></Form>
     </scroll-view>
     <view class="pb-safe border-#eef0f5 border-t-solid">
       <view class="flex flex-items-center flex-justify-around py-3 px-3">
@@ -24,7 +25,8 @@
 </template>
 
 <script setup lang="ts">
-  import Components from '@/pages/approval/components/Components.vue'
+  import Form from '@/pages/approval/components/Form.vue'
+  import ApprovalCreate from '@/pages/approval/components/ApprovalCreate.vue'
 
   const title = ref<string>('')
   const id = ref<number>(null)