From 53d212ba33a7676a781ad049aa1b50a75f5ba2f3 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 18:17:24 +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=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E7=BB=84=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  |  22 ++
 .../approval/components/DatetimePicker.vue    | 196 ++++++++++++++++++
 2 files changed, 218 insertions(+)
 create mode 100644 src/pages/approval/components/DatetimePicker.vue

diff --git a/src/pages/approval/components/Components.vue b/src/pages/approval/components/Components.vue
index 212d071..0cfb397 100644
--- a/src/pages/approval/components/Components.vue
+++ b/src/pages/approval/components/Components.vue
@@ -43,6 +43,23 @@
         placeholder="数字"
         @change="inputChange"
       ></Input>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePicker :id="5" title="日期1" @change="changeDate"></DatetimePicker>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePicker
+        :id="6"
+        title="日期2"
+        type="dateHalfDay"
+        @change="changeDate"
+      ></DatetimePicker>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePicker
+        :id="7"
+        type="datetime"
+        :value="1737043380000"
+        title="日期3"
+        @change="changeDate"
+      ></DatetimePicker>
     </view>
   </view>
 </template>
@@ -51,6 +68,7 @@
   import Input from '@/pages/approval/components/Input.vue'
   import Textarea from '@/pages/approval/components/Textarea.vue'
   import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
+  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
 
   const columns = ref<Record<number, any>>([
     {
@@ -74,6 +92,10 @@
   const textareaChange = e => {
     console.log('textareaChange', e)
   }
+
+  const changeDate = e => {
+    console.log('changeDate', e)
+  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/approval/components/DatetimePicker.vue b/src/pages/approval/components/DatetimePicker.vue
new file mode 100644
index 0000000..95fc9c5
--- /dev/null
+++ b/src/pages/approval/components/DatetimePicker.vue
@@ -0,0 +1,196 @@
+<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="py-2" @click="openDialog">
+      <view class="flex flex-items-center flex-justify-between">
+        <view>{{ text || placeholder }}</view>
+        <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
+      </view>
+    </view>
+  </view>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    custom-style="border-radius:12rpx;"
+    @after-leave="afterLeave"
+  >
+    <view>
+      <view class="p-4 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center">
+        <view class="font-bold">日期：</view>
+        <view class="font-bold ml-a" v-if="type !== 'dateHalfDay'">{{ date }}</view>
+      </view>
+      <view v-if="(type === 'date' || type === 'datetime') && showPicker">
+        <wd-datetime-picker-view
+          :formatter="formatter"
+          :type="type"
+          v-model="timestamp"
+          label="日期选择"
+          @change="change"
+        />
+      </view>
+      <view v-if="type === 'dateHalfDay' && showPicker">
+        <wd-tabs v-model="tab">
+          <wd-tab :title="index === 0 ? date : halfDay" v-for="(item, index) in 2" :key="index">
+            <view v-show="index === 0">
+              <wd-datetime-picker-view
+                :formatter="formatter"
+                type="date"
+                v-model="timestamp"
+                @change="change"
+              />
+            </view>
+            <view v-show="index === 1">
+              <wd-picker-view :columns="['上午', '下午']" v-model="halfDay" @change="change" />
+            </view>
+          </wd-tab>
+        </wd-tabs>
+      </view>
+      <view class="pb-safe">
+        <view class="flex py-3 flex-items-center flex-justify-around text-3.5 px-2 font-bold">
+          <view
+            class="w-45% bg-#eeeff4 custom-color-blue py-2.5 rounded-2 text-center"
+            @click="show = false"
+          >
+            取消
+          </view>
+          <view
+            class="w-45% custom-bg-blue color-white py-2.5 rounded-2 text-center"
+            @click="confirm"
+          >
+            确定
+          </view>
+        </view>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script setup lang="ts">
+  import dayjs from 'dayjs'
+
+  const show = ref<boolean>(false)
+  const timestamp = ref<number>(0)
+  const text = ref<string>('')
+  const date = ref<string>('')
+  const halfDay = ref<string>('')
+  const showPicker = ref<boolean>(false)
+  const returnTimestamp = ref<number>(0)
+
+  const tab = ref<number>(0)
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'date'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [Number, null],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  })
+
+  const formatter = (type, value) => {
+    switch (type) {
+      case 'year':
+        return value + '年'
+      case 'month':
+        return value + '月'
+      case 'date':
+        return value + '日'
+      case 'hour':
+        return value + '时'
+      case 'minute':
+        return value + '分'
+      default:
+        return value
+    }
+  }
+
+  const emits = defineEmits(['change'])
+
+  onMounted(() => {
+    if (props.value) {
+      timestamp.value = props.value
+      if (props.type === 'date') {
+        date.value = dayjs(props.value).format('YYYY-M-D')
+        text.value = date.value
+      } else if (props.type === 'datetime') {
+        date.value = dayjs(props.value).format('YYYY-M-D HH:mm')
+        text.value = date.value
+      } else if (props.type === 'dateHalfDay') {
+        date.value = dayjs(props.value).format('YYYY年M月D日')
+        halfDay.value = dayjs(props.value).hour() < 12 ? '上午' : '下午'
+        text.value = `${date.value} ${halfDay.value}`
+      }
+    }
+  })
+
+  const change = ({ value }) => {
+    if (props.type === 'date') {
+      date.value = dayjs(value).format('YYYY-M-D')
+    } else if (props.type === 'datetime') {
+      date.value = dayjs(value).format('YYYY-M-D HH:mm')
+    } else if (props.type === 'dateHalfDay') {
+      if (tab.value === 0) {
+        date.value = dayjs(value).format('YYYY年M月D日')
+      } else {
+        halfDay.value = value
+      }
+    }
+  }
+
+  const openDialog = () => {
+    if (!props.value) {
+      if (text.value === '') {
+        timestamp.value = new Date().getTime()
+      } else {
+        timestamp.value = returnTimestamp.value
+      }
+
+      if (props.type === 'date') {
+        date.value = dayjs(timestamp.value).format('YYYY-M-D')
+      } else if (props.type === 'datetime') {
+        date.value = dayjs(timestamp.value).format('YYYY-M-D HH:mm')
+      } else if (props.type === 'dateHalfDay') {
+        date.value = dayjs(timestamp.value).format('YYYY年M月D日')
+        halfDay.value = dayjs(timestamp.value).hour() < 12 ? '上午' : '下午'
+      }
+    }
+    showPicker.value = true
+    show.value = true
+  }
+
+  const confirm = () => {
+    show.value = false
+    returnTimestamp.value = timestamp.value
+    if (props.type === 'dateHalfDay') {
+      text.value = `${date.value} ${halfDay.value}`
+    } else {
+      text.value = date.value
+    }
+    emits('change', { id: props.id, value: returnTimestamp.value, text: text.value })
+  }
+
+  const afterLeave = () => {
+    showPicker.value = false
+  }
+</script>