feat：【system】短信管理的增加 100%

src/pages-system/sms/components/channel-list.vue

@@ -58,17 +58,13 @@
 <script lang="ts" setup>
 import type { SmsChannel } from '@/api/system/sms'
 import type { LoadMoreState } from '@/http/types'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { getSmsChannelPage } from '@/api/system/sms'
 import { useAccess } from '@/hooks/useAccess'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 import ChannelSearchForm from './channel-search-form.vue'
 
-const props = defineProps<{
-  active?: boolean
-}>()
-
 const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<SmsChannel[]>([])
@@ -77,7 +73,6 @@ const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
 })
-const initialized = ref(false)
 
 /** 查询列表 */
 async function getList() {
@@ -132,15 +127,13 @@ function handleDetail(item: SmsChannel) {
   })
 }
 
-/** 监听 active 变化，首次激活时加载数据 */
-watch(
-  () => props.active,
-  (val) => {
-    if (val && !initialized.value) {
-      initialized.value = true
-      getList()
-    }
-  },
-  { immediate: true },
-)
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>

src/pages-system/sms/components/channel-search-form.vue

@@ -51,7 +51,42 @@
           </wd-radio>
         </wd-radio-group>
       </view>
-      <!-- TODO @AI：缺了“创建时间” -->
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          创建时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
+        <view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
+        <view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
       <view class="yd-search-form-actions">
         <wd-button class="flex-1" plain @click="handleReset">
           重置
@@ -69,6 +104,7 @@ import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions, getStrDictOptions } from '@/hooks/useDict'
 import { getNavbarHeight } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
   search: [data: Record<string, any>]
@@ -80,6 +116,7 @@ const formData = reactive({
   signature: undefined as string | undefined,
   code: '',
   status: -1,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
@@ -94,9 +131,28 @@ const placeholder = computed(() => {
   if (formData.status !== -1) {
     conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
+  }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索短信渠道'
 })
 
+// 时间范围选择器状态
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 创建时间[0]确认 */
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[1]确认 */
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
 /** 搜索 */
 function handleSearch() {
   visible.value = false
@@ -104,6 +160,7 @@ function handleSearch() {
     signature: formData.signature || undefined,
     code: formData.code || undefined,
     status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
   })
 }
 
@@ -112,6 +169,7 @@ function handleReset() {
   formData.signature = undefined
   formData.code = ''
   formData.status = -1
+  formData.createTime = [undefined, undefined]
   visible.value = false
   emit('reset')
 }

src/pages-system/sms/components/log-list.vue

@@ -53,7 +53,7 @@
 <script lang="ts" setup>
 import type { SmsLog } from '@/api/system/sms'
 import type { LoadMoreState } from '@/http/types'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { getSmsLogPage } from '@/api/system/sms'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
@@ -70,7 +70,6 @@ const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
 })
-const initialized = ref(false)
 
 /** 查询列表 */
 async function getList() {
@@ -118,15 +117,13 @@ function handleDetail(item: SmsLog) {
   })
 }
 
-/** 监听 active 变化，首次激活时加载数据 */
-watch(
-  () => props.active,
-  (val) => {
-    if (val && !initialized.value) {
-      initialized.value = true
-      getList()
-    }
-  },
-  { immediate: true },
-)
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>

src/pages-system/sms/components/log-search-form.vue

@@ -51,7 +51,42 @@
           </wd-radio>
         </wd-radio-group>
       </view>
-      <!-- TODO @AI：参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/sms/log/data.ts 很多搜搜项，没搞过来 -->
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          发送时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleSendTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.sendTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleSendTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.sendTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleSendTime[0]" v-model="tempSendTime[0]" type="date" />
+        <view v-if="visibleSendTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleSendTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleSendTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleSendTime[1]" v-model="tempSendTime[1]" type="date" />
+        <view v-if="visibleSendTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleSendTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleSendTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
       <view class="yd-search-form-actions">
         <wd-button class="flex-1" plain @click="handleReset">
           重置
@@ -69,6 +104,7 @@ import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { getNavbarHeight } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
   search: [data: Record<string, any>]
@@ -80,6 +116,7 @@ const formData = reactive({
   mobile: undefined as string | undefined,
   sendStatus: -1,
   receiveStatus: -1,
+  sendTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
@@ -94,9 +131,28 @@ const placeholder = computed(() => {
   if (formData.receiveStatus !== -1) {
     conditions.push(`接收:${getDictLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, formData.receiveStatus)}`)
   }
+  if (formData.sendTime?.[0] && formData.sendTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.sendTime[0])}~${formatDate(formData.sendTime[1])}`)
+  }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索短信日志'
 })
 
+// 时间范围选择器状态
+const visibleSendTime = ref<[boolean, boolean]>([false, false])
+const tempSendTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 发送时间[0]确认 */
+function handleSendTime0Confirm() {
+  formData.sendTime = [tempSendTime.value[0], formData.sendTime?.[1]]
+  visibleSendTime.value[0] = false
+}
+
+/** 发送时间[1]确认 */
+function handleSendTime1Confirm() {
+  formData.sendTime = [formData.sendTime?.[0], tempSendTime.value[1]]
+  visibleSendTime.value[1] = false
+}
+
 /** 搜索 */
 function handleSearch() {
   visible.value = false
@@ -104,6 +160,7 @@ function handleSearch() {
     mobile: formData.mobile || undefined,
     sendStatus: formData.sendStatus === -1 ? undefined : formData.sendStatus,
     receiveStatus: formData.receiveStatus === -1 ? undefined : formData.receiveStatus,
+    sendTime: formatDateRange(formData.sendTime),
   })
 }
 
@@ -112,6 +169,7 @@ function handleReset() {
   formData.mobile = undefined
   formData.sendStatus = -1
   formData.receiveStatus = -1
+  formData.sendTime = [undefined, undefined]
   visible.value = false
   emit('reset')
 }

src/pages-system/sms/components/template-list.vue

@@ -62,17 +62,13 @@
 <script lang="ts" setup>
 import type { SmsTemplate } from '@/api/system/sms'
 import type { LoadMoreState } from '@/http/types'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { getSmsTemplatePage } from '@/api/system/sms'
 import { useAccess } from '@/hooks/useAccess'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 import TemplateSearchForm from './template-search-form.vue'
 
-const props = defineProps<{
-  active?: boolean
-}>()
-
 const { hasAccessByCodes } = useAccess()
 const total = ref(0)
 const list = ref<SmsTemplate[]>([])
@@ -81,7 +77,6 @@ const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
 })
-const initialized = ref(false)
 
 /** 查询列表 */
 async function getList() {
@@ -136,15 +131,13 @@ function handleDetail(item: SmsTemplate) {
   })
 }
 
-/** 监听 active 变化，首次激活时加载数据 */
-watch(
-  () => props.active,
-  (val) => {
-    if (val && !initialized.value) {
-      initialized.value = true
-      getList()
-    }
-  },
-  { immediate: true },
-)
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>

src/pages-system/sms/components/template-search-form.vue

@@ -7,7 +7,6 @@
   <!-- 搜索弹窗 -->
   <wd-popup v-model="visible" position="top" @close="visible = false">
     <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
-      <!-- TODO @AI：参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/sms/template/data.ts 很多搜搜项，没搞过来 -->
       <view class="yd-search-form-item">
         <view class="yd-search-form-label">
           模板名称
@@ -62,6 +61,42 @@
           </wd-radio>
         </wd-radio-group>
       </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          创建时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
+        <view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
+        <view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
       <view class="yd-search-form-actions">
         <wd-button class="flex-1" plain @click="handleReset">
           重置
@@ -79,6 +114,7 @@ import { computed, reactive, ref } from 'vue'
 import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
 import { getNavbarHeight } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
 
 const emit = defineEmits<{
   search: [data: Record<string, any>]
@@ -91,6 +127,7 @@ const formData = reactive({
   code: undefined as string | undefined,
   type: -1,
   status: -1,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
 })
 
 /** 搜索条件 placeholder 拼接 */
@@ -108,9 +145,28 @@ const placeholder = computed(() => {
   if (formData.status !== -1) {
     conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
   }
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
+  }
   return conditions.length > 0 ? conditions.join(' | ') : '搜索短信模板'
 })
 
+// 时间范围选择器状态
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 创建时间[0]确认 */
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[1]确认 */
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
 /** 搜索 */
 function handleSearch() {
   visible.value = false
@@ -119,6 +175,7 @@ function handleSearch() {
     code: formData.code || undefined,
     type: formData.type === -1 ? undefined : formData.type,
     status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
   })
 }
 
@@ -128,6 +185,7 @@ function handleReset() {
   formData.code = undefined
   formData.type = -1
   formData.status = -1
+  formData.createTime = [undefined, undefined]
   visible.value = false
   emit('reset')
 }

src/pages-system/sms/index.vue

@@ -17,9 +17,9 @@
     </view>
 
     <!-- 列表内容 -->
-    <ChannelList v-show="tabType === 'channel'" :active="tabType === 'channel'" />
-    <TemplateList v-show="tabType === 'template'" :active="tabType === 'template'" />
-    <LogList v-show="tabType === 'log'" :active="tabType === 'log'" />
+    <ChannelList v-show="tabType === 'channel'" />
+    <TemplateList v-show="tabType === 'template'" />
+    <LogList v-show="tabType === 'log'" />
   </view>
 </template>