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

2025-12-20 15:15:57 +08:00
parent 71f99e0f64
commit 221790f2c7
7 changed files with 210 additions and 53 deletions
--- a/src/pages-system/sms/components/channel-list.vue
+++ b/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>
--- a/src/pages-system/sms/components/channel-search-form.vue
+++ b/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')
 }
--- a/src/pages-system/sms/components/log-list.vue
+++ b/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>
--- a/src/pages-system/sms/components/log-search-form.vue
+++ b/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')
 }
--- a/src/pages-system/sms/components/template-list.vue
+++ b/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>
--- a/src/pages-system/sms/components/template-search-form.vue
+++ b/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')
 }
--- a/src/pages-system/sms/index.vue
+++ b/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>