From fa7c4de6956db4b6e1b9ec80f7b1c3832d26de92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E9=B9=8F?= <fanpeng@star-lock.cn>
Date: Fri, 17 Jan 2025 14:52:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=88=9B=E5=BB=BAUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../approval/components/ApprovalCreate.vue    | 101 ++++++++++++++++++
 .../components/{Components.vue => Form.vue}   |   4 +-
 src/pages/approval/components/Visitor.vue     |   6 +-
 src/pages/approval/create-application.vue     |   6 +-
 src/static/images/icon_airplane.png           | Bin 0 -> 1949 bytes
 src/static/images/icon_approval.png           | Bin 0 -> 1627 bytes
 6 files changed, 110 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/approval/components/ApprovalCreate.vue
 rename src/pages/approval/components/{Components.vue => Form.vue} (98%)
 create mode 100644 src/static/images/icon_airplane.png
 create mode 100644 src/static/images/icon_approval.png

diff --git a/src/pages/approval/components/ApprovalCreate.vue b/src/pages/approval/components/ApprovalCreate.vue
new file mode 100644
index 0000000..ab6071f
--- /dev/null
+++ b/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>
diff --git a/src/pages/approval/components/Components.vue b/src/pages/approval/components/Form.vue
similarity index 98%
rename from src/pages/approval/components/Components.vue
rename to src/pages/approval/components/Form.vue
index 167026c..3538184 100644
--- a/src/pages/approval/components/Components.vue
+++ b/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="单行"
diff --git a/src/pages/approval/components/Visitor.vue b/src/pages/approval/components/Visitor.vue
index e9fa668..1f8ac23 100644
--- a/src/pages/approval/components/Visitor.vue
+++ b/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"
diff --git a/src/pages/approval/create-application.vue b/src/pages/approval/create-application.vue
index c7fd5a4..fcb0d49 100644
--- a/src/pages/approval/create-application.vue
+++ b/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)
diff --git a/src/static/images/icon_airplane.png b/src/static/images/icon_airplane.png
new file mode 100644
index 0000000000000000000000000000000000000000..090beac47d176e327d249d6fb5fdde268554264b
GIT binary patch
literal 1949
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

literal 0
HcmV?d00001

diff --git a/src/static/images/icon_approval.png b/src/static/images/icon_approval.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c4943fea2f24125079a7d6037e9aeef4ace25ac
GIT binary patch
literal 1627
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
Z{SQxU)}JuPX{rDK002ovPDHLkV1g!t&07Ef

literal 0
HcmV?d00001