From 561c84f1a909ce5d27370c740c48af7a3f8c5ac9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E9=B9=8F?= <fanpeng@star-lock.cn>
Date: Tue, 14 Jan 2025 19:39:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=94=B3=E8=AF=B7?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/approval/components/Components.vue |  3 +
 src/pages/approval/components/Images.vue     | 61 ++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/pages/approval/components/Images.vue

diff --git a/src/pages/approval/components/Components.vue b/src/pages/approval/components/Components.vue
index 0cfb397..2b9bc94 100644
--- a/src/pages/approval/components/Components.vue
+++ b/src/pages/approval/components/Components.vue
@@ -60,6 +60,8 @@
         title="日期3"
         @change="changeDate"
       ></DatetimePicker>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <Images id="8" title="图片"></Images>
     </view>
   </view>
 </template>
@@ -69,6 +71,7 @@
   import Textarea from '@/pages/approval/components/Textarea.vue'
   import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
   import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
+  import Images from '@/pages/approval/components/Images.vue'
 
   const columns = ref<Record<number, any>>([
     {
diff --git a/src/pages/approval/components/Images.vue b/src/pages/approval/components/Images.vue
new file mode 100644
index 0000000..c1b3798
--- /dev/null
+++ b/src/pages/approval/components/Images.vue
@@ -0,0 +1,61 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view class="flex flex-items-center pos-relative">
+      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+      <view>{{ title }}</view>
+    </view>
+    <view class="pt-3">
+      <wd-upload
+        :file-list="fileList"
+        multiple
+        :limit="9"
+        image-mode="aspectFill"
+        :size-type="['original']"
+        action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
+        @change="handleChange"
+      ></wd-upload>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const fileList = ref<any[]>([])
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  onMounted(() => {
+    if (props.value.length > 0) {
+      fileList.value = props.value
+    }
+  })
+
+  const handleChange = ({ fileList: files }) => {
+    console.log('handleChange', files)
+    fileList.value = files
+  }
+</script>
+
+<style scoped lang="scss">
+  :deep(.wd-upload__evoke),
+  :deep(.wd-upload__status-content),
+  :deep(.wd-upload__picture) {
+    border-radius: 12rpx;
+  }
+</style>