refactor: country selection in TaskView

src/enums/index.js

@@ -54,3 +54,12 @@ export const MatcherType = {
     in: '包含',
     notIn: '不包含'
 }
+export const TaskStatus = {
+    idle: '未发送',
+    pending: '发送中',
+    cutting: '插队中',
+    pause: '暂停',
+    completed: '已完成',
+    queued: '排队中',
+    error: '错误'
+}

src/main.js

@@ -10,6 +10,9 @@ import './styles/main.scss'
 import 'element-plus/theme-chalk/src/index.scss'
 import { useUserStore } from './stores/user'
 
+import countriesData from 'i18n-iso-countries'
+import zhLocale from 'i18n-iso-countries/langs/zh.json'
+
 const app = createApp(App)
 
 app.use(createPinia())
@@ -50,3 +53,5 @@ app.provide(
 )
 
 app.mount('#app')
+
+countriesData.registerLocale(zhLocale)

src/utils/formatter.js

@@ -1,4 +1,6 @@
 import { format } from 'date-fns'
+import countriesData from 'i18n-iso-countries'
+
 export function useTimeFormatter(pattern = 'yyyy-MM-dd HH:mm') {
     return function (row, column, value, index) {
         try {
@@ -14,3 +16,13 @@ export function useEnumFormatter(enumObj) {
         return enumObj[value]
     }
 }
+
+export function useCountryFormatter() {
+    return function (row, column, value, index) {
+        if (value) {
+            const name = countriesData.getName(value, 'zh')
+            return `${value} - ${name}`
+        }
+        return ''
+    }
+}

src/views/DeviceView.vue

@@ -57,7 +57,7 @@
     </PagingTable>
     <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
         <ElFormItem prop="pinCountry" label="固定国家">
-            <ElSelect v-model="model.pinCountry" placeholder="请输入国家" clearable>
+            <ElSelect v-model="model.pinCountry" placeholder="请输入国家" filterable clearable>
                 <ElOption v-for="i in counties" :key="i.value" :label="i.label" :value="i.value" />
             </ElSelect>
         </ElFormItem>

src/views/PhoneListView.vue

@@ -5,7 +5,7 @@
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
         <ElTableColumn prop="name" label="名称" show-overflow-tooltip />
-        <ElTableColumn prop="country" label="国家" show-overflow-tooltip />
+        <ElTableColumn prop="country" label="国家" :formatter="countryFormatter" />
         <ElTableColumn prop="remark" label="备注" show-overflow-tooltip />
         <ElTableColumn prop="userName" label="创建人" align="center" />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
@@ -68,14 +68,13 @@
 <script setup>
 import { inject, onMounted, ref } from 'vue'
 import PagingTable from '@/components/PagingTable.vue'
-import { useTimeFormatter } from '@/utils/formatter'
+import { useTimeFormatter, useCountryFormatter } from '@/utils/formatter'
 import { Plus } from '@vicons/tabler'
 import EditDialog from '@/components/EditDialog.vue'
 import { setupEditDialog } from '@/utils/editDialog'
 import { axiosInstance, http } from '@/plugins/http'
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import countriesData from 'i18n-iso-countries'
-import zhLocale from 'i18n-iso-countries/langs/zh.json'
 import { getCountryDialCodeFromCountryCodeOrNameOrFlagEmoji } from 'country-codes-flags-phone-codes'
 
 const countries = ref(null)
@@ -89,15 +88,15 @@ const rules = {
     country: [{ required: true, message: '请输入国家', trigger: 'blur' }]
 }
 const { showEditDialog, onEdit } = setupEditDialog(model)
+const countryFormatter = useCountryFormatter()
 
 onMounted(async () => {
     loadCountries()
 })
 
 function loadCountries() {
-    countriesData.registerLocale(zhLocale)
     const countryCodes = Object.keys(countriesData.getNames('zh'))
-    countries.value = countryCodes.map(code => {
+    countries.value = countryCodes.map((code) => {
         const countryName = countriesData.getName(code, 'zh')
         let callingCode = getCountryDialCodeFromCountryCodeOrNameOrFlagEmoji(code)
         return {
@@ -113,11 +112,9 @@ function filterCountries(query) {
         return
     }
 
-    countries.value.filter(country => {
+    countries.value.filter((country) => {
         return (
-            country.code.includes(query) ||
-            country.countryName.includes(query) ||
-            country.callingCode.includes(query)
+            country.code.includes(query) || country.countryName.includes(query) || country.callingCode.includes(query)
         )
     })
 }

src/views/RcsNumberView.vue

@@ -2,15 +2,15 @@
     <PagingTable url="/rcs-number" :where="where" ref="table" @cellClick="onCellClick">
         <template #filter>
             <ElButton :icon="Search" @click="table.refresh()"></ElButton>
-            <ElSelect v-model="country" placeholder="渠道" clearable value-key="country">
+            <ElSelect v-model="country" placeholder="渠道" clearable value-key="country" filterable>
                 <ElOption
                     v-for="country in countries"
                     :key="country.country"
-                    :label="country.country"
+                    :label="country.name"
                     :value="country"
                 />
             </ElSelect>
-            <ElSelect v-model="from" placeholder="平台" clearable value-key="from">
+            <ElSelect v-model="from" placeholder="平台" clearable value-key="from" filterable>
                 <ElOption lable="mwze167" value="mwze167"></ElOption>
                 <ElOption lable="durian" value="durian"></ElOption>
                 <ElOption lable="i18nvc" value="i18nvc"></ElOption>
@@ -59,6 +59,7 @@ import { Plus, Search, Copy } from '@vicons/tabler'
 import { http } from '@/plugins/http'
 import { ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
 import { useClipboard } from '@vueuse/core'
+import countriesData from 'i18n-iso-countries'
 
 const where = computed(() => ({ country: country.value?.country.toLowerCase(), from: from.value }))
 const timeFormatter = useTimeFormatter()
@@ -91,7 +92,10 @@ onMounted(() => {
         },
         page: { page: 1, limit: 100 }
     }).then((res) => {
-        countries.value = res.items
+        countries.value = res.items.map((item) => ({
+            country: item.country,
+            name: item.country + ' - ' + countriesData.getName(item.country, 'zh')
+        }))
     })
 })
 

src/views/TaskView.vue

@@ -2,15 +2,7 @@
     <PagingTable url="/task" :where="where" ref="table" @row-click="rowClick" :stripe="false">
         <template #filter>
             <ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
-            <ElSelect v-if="isSuperApi" v-model="status" placeholder="任务状态" @change="updateWhereAndRefresh()"
-                      clearable>
-                <ElOption lable="idle" value="idle">未发送</ElOption>
-                <ElOption lable="pending" value="pending">发送中</ElOption>
-                <ElOption lable="pause" value="pause">暂停</ElOption>
-                <ElOption lable="queued" value="queued">排队中</ElOption>
-                <ElOption lable="completed" value="completed">已完成</ElOption>
-                <ElOption lable="run" value="run">进行中</ElOption>
-            </ElSelect>
+            <EnumSelect v-if="isSuperApi" v-model="where.status" :enum="TaskStatus" placeholder="任务状态" clearable />
             <ElButton :icon="Plus" @click="onEdit({ checkConnection: true, useBackup: false }), getPhoneList()">
                 添加
             </ElButton>
@@ -88,7 +80,10 @@
                                     type="danger"
                                     size="small"
                                     @click="queueCutting(row)"
-                                    v-if="isSuperApi && (row.status === 'idle' || row.status === 'pause'||row.status ==='queued')"
+                                    v-if="
+                                        isSuperApi &&
+                                        (row.status === 'idle' || row.status === 'pause' || row.status === 'queued')
+                                    "
                                 >
                                     插队
                                 </ElButton>
@@ -96,7 +91,7 @@
                                     type="primary"
                                     size="small"
                                     @click="pause(row)"
-                                    v-if="row.status === 'pending'||row.status ==='cutting'"
+                                    v-if="row.status === 'pending' || row.status === 'cutting'"
                                 >
                                     暂停
                                 </ElButton>
@@ -104,7 +99,7 @@
                                     type="warning"
                                     size="small"
                                     @click="forceCompletion(row)"
-                                    v-if="row.status === 'queued'||row.status==='pause'"
+                                    v-if="row.status === 'queued' || row.status === 'pause'"
                                 >
                                     强制完成
                                 </ElButton>
@@ -129,7 +124,8 @@
         <ElTableColumn prop="name" label="名称" show-overflow-tooltip />
         <ElTableColumn prop="remark" label="备注" show-overflow-tooltip />
         <ElTableColumn prop="listId" label="发送列表" :formatter="phoneListFormatter" />
-        <ElTableColumn prop="userName" label="任务创建人" align="center" />
+        <ElTableColumn prop="country" label="国家" :formatter="countryFormatter" />
+        <ElTableColumn prop="userName" label="任务创建人" />
         <ElTableColumn prop="status" label="状态" align="center">
             <template #default="{ row }">
                 <ElTag v-if="row.status === 'idle'" type="info">未发送</ElTag>
@@ -142,14 +138,13 @@
                 <ElTag v-else>未知</ElTag>
             </template>
         </ElTableColumn>
-        <ElTableColumn prop="sent" label="已发送" align="center">
-            <template #default="{ row }"> {{ row.sent || 0 }} / {{ row.total || 0 }}</template>
+        <ElTableColumn prop="sent" label="已发/成功/总数" align="center" width="180">
+            <template #default="{ row }"> {{ row.sent || 0 }} / {{ row.successCount }} / {{ row.total || 0 }}</template>
         </ElTableColumn>
-        <ElTableColumn prop="successCount" label="发送成功数" align="center" />
-        <ElTableColumn prop="successRate" label="发送成功率" align="center" />
-        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
-        <ElTableColumn prop="startedAt" label="开始时间" :formatter="startedTimeFormatter" width="150" />
-        <ElTableColumn prop="updatedAt" label="结束时间" :formatter="updatedTimeFormatter" width="150" />
+        <ElTableColumn prop="successRate" label="成功率" align="center" width="80" />
+        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="100" />
+        <ElTableColumn prop="startedAt" label="开始时间" :formatter="timeFormatter" width="100" />
+        <ElTableColumn prop="updatedAt" label="结束时间" :formatter="timeFormatter" width="100" />
     </PagingTable>
     <EditDialog
         class="task-edit-dialog"
@@ -282,18 +277,17 @@
             />
         </div>
         <template #footer>
-      <span class="dialog-footer">
-        <ElButton @click="exportDialog()">取 消</ElButton>
-        <ElButton type="primary" @click="confirmExport()">确 定</ElButton>
-      </span>
+            <span class="dialog-footer">
+                <ElButton @click="exportDialog()">取 消</ElButton>
+                <ElButton type="primary" @click="confirmExport()">确 定</ElButton>
+            </span>
         </template>
     </ElDialog>
-
 </template>
 <script setup>
 import { computed, inject, ref, onMounted } from 'vue'
 import PagingTable from '@/components/PagingTable.vue'
-import { useTimeFormatter } from '@/utils/formatter'
+import { useTimeFormatter, useCountryFormatter } from '@/utils/formatter'
 import { Plus, Refresh, Trash, Download } from '@vicons/tabler'
 import EditDialog from '@/components/EditDialog.vue'
 import { setupEditDialog } from '@/utils/editDialog'
@@ -303,13 +297,16 @@ import { storeToRefs } from 'pinia'
 import { useUserStore } from '@/stores/user'
 import ExpandItem from '@/components/ExpandItem.vue'
 import { format } from 'date-fns'
+import { useStorage } from '@vueuse/core'
+import { TaskStatus } from '@/enums'
 
 const { user } = storeToRefs(useUserStore())
 const isAdmin = inject('isAdmin')
 const isAdminOrApi = inject('isAdminOrApi')
 const isSuperApi = inject('isSuperApi')
-const timeFormatter = useTimeFormatter()
-const where = ref({})
+const timeFormatter = useTimeFormatter('MM/dd HH:mm')
+const countryFormatter = useCountryFormatter()
+const where = useStorage('taskWhere', {})
 const table = ref(null)
 const model = ref({
     checkConnection: true,
@@ -350,20 +347,6 @@ function onEdit(row) {
     showEditDialog.value = true
 }
 
-const startedTimeFormatter = (row, column, value, index) => {
-    if (row.status !== 'idle') {
-        return timeFormatter(row, column, value, index)
-    }
-    return ''
-}
-
-const updatedTimeFormatter = (row, column, value, index) => {
-    if (row.status === 'completed') {
-        return timeFormatter(row, column, value, index)
-    }
-    return ''
-}
-
 function rowClick(row, column) {
     table.value.tableEl.toggleRowExpansion(row)
 }
@@ -394,7 +377,7 @@ async function getPhoneList() {
     phoneList.value = (
         await http.post('/phone-list', {
             page: { page: 1, limit: 100 },
-            search: { order: { createdAt: 'DESC' }, where: where.value }
+            search: { order: { createdAt: 'DESC' } }
         })
     ).items
 }
@@ -428,7 +411,7 @@ const shortcuts = [
         value: () => {
             const now = new Date()
             const startOfWeek = new Date(now)
-            startOfWeek.setDate(startOfWeek.getDate() - (now.getDay() + 6) % 7)
+            startOfWeek.setDate(startOfWeek.getDate() - ((now.getDay() + 6) % 7))
             return [startOfWeek, now]
         }
     },
@@ -445,7 +428,7 @@ const shortcuts = [
         value: () => {
             const now = new Date()
             const startOfWeek = new Date(now)
-            startOfWeek.setDate(startOfWeek.getDate() - (now.getDay() + 6) % 7 - 7)
+            startOfWeek.setDate(startOfWeek.getDate() - ((now.getDay() + 6) % 7) - 7)
             const endOfWeek = new Date(startOfWeek.getTime() + 6 * 24 * 3600 * 1000)
             return [startOfWeek, endOfWeek]
         }
@@ -655,7 +638,6 @@ function onInputChange(key) {
         hasSpaces.value = false
     }
 }
-
 </script>
 <style lang="less" scoped>
 .tip {