Przeglądaj źródła

feat(channel): 使用 Pinia channelStore 替代直接 HTTP 请求获取渠道列表

- 在 HomeView、OcrChannelView、OcrDeviceView、OcrFavoriteView 和 OcrView 中使用 channelStore 替代直接 HTTP 请求
- 移除了各组件中重复的 getChannelList 函数
- 优化了渠道列表数据的获取和展示逻辑
wui 6 miesięcy temu
rodzic
commit
eb0b6c7197

+ 4 - 14
src/views/HomeView.vue

@@ -3,7 +3,7 @@
         <div class="mb-4 flex items-center gap-2 flex-wrap">
             <el-select v-model="selectedChannel" placeholder="请选择渠道" @change="handleChannelChange" v-if="isAdmin">
                 <el-option label="全部渠道" value="" />
-                <el-option v-for="item in channelOptions" :key="item" :label="item" :value="item" />
+                <el-option v-for="item in channelStore.channelOptions" :key="item" :label="item" :value="item" />
             </el-select>
             <el-button :icon="Refresh" circle @click="refreshData" :loading="loading" />
         </div>
@@ -82,15 +82,16 @@ import { ref, onMounted, inject } from 'vue'
 import * as echarts from 'echarts'
 import { http } from '@/plugins/http'
 import { Refresh } from '@vicons/tabler'
+import { useChannelStore } from '@/stores/channel'
 
 const isAdmin = inject('isAdminAndOperator')
 const chartRef = ref(null)
 let chart = null
 const selectedChannel = ref('')
-const channelOptions = ref([])
 const loading = ref(false)
 const selectedDate = ref(null)
 const dateRange = ref(null)
+const channelStore = useChannelStore()
 const todayData = ref({
     date: '',
     total: 0,
@@ -107,7 +108,7 @@ onMounted(() => {
     })
 
     // 获取渠道列表并加载全部渠道数据
-    getChannelList()
+    channelStore.fetchChannelOptions()
     handleChannelChange('')
 })
 
@@ -130,17 +131,6 @@ async function getTodayData(channelName) {
     }
 }
 
-// 获取渠道列表
-async function getChannelList() {
-    try {
-        const response = await http.post('/ocrChannel/names')
-        console.log('获取渠道列表成功:', response.data)
-        channelOptions.value = response.data || []
-    } catch (error) {
-        console.error('获取渠道列表失败:', error)
-    }
-}
-
 // 处理日期变化
 function handleDateChange() {
     refreshData()

+ 4 - 4
src/views/OcrChannelView.vue

@@ -9,11 +9,11 @@
             <ElButton :icon="Plus" v-if="isAdmin" @click="onEdit()">添加</ElButton>
             <ElButton :icon="Refresh" v-if="isAdmin" @click="onUpdateStatistics()">更新统计数据</ElButton>
         </template>
-        <ElTableColumn prop="id" label="#" width="80" />
+        <ElTableColumn prop="id" v-if="isAdmin" label="#" width="80" />
         <ElTableColumn prop="name" label="渠道名" align="center" />
-        <ElTableColumn prop="deviceNum" label="设备安装数量" align="center" />
-        <ElTableColumn prop="recordNum" label="返回记录数量" align="center" />
-        <ElTableColumn prop="scanNum" label="扫描图片数量" align="center" />
+        <ElTableColumn prop="deviceNum" v-if="isAdmin" label="设备安装数量" align="center" />
+        <ElTableColumn prop="recordNum" v-if="isAdmin" label="返回记录数量" align="center" />
+        <ElTableColumn prop="scanNum" v-if="isAdmin" label="扫描图片数量" align="center" />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" align="center" />
         <ElTableColumn v-if="isAdmin" label="操作" align="center" width="120">
             <template #default="{ row }">

+ 18 - 1
src/views/OcrDeviceView.vue

@@ -1,6 +1,16 @@
 <template>
     <PagingTable url="/ocrDevice" :query="query" ref="table">
         <template #filter>
+            <ElSelect
+                class="!w-52 ml-2"
+                v-model="query.channel"
+                placeholder="请选择渠道"
+                clearable
+                @change="table.refresh(true)"
+            >
+                <ElOption label="全部渠道" value="" />
+                <ElOption v-for="item in channelStore.channelOptions" :key="item" :label="item" :value="item" />
+            </ElSelect>
             <ElInput
                 class="!w-52"
                 placeholder="请输入设备号"
@@ -28,15 +38,22 @@
     </PagingTable>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import PagingTable from '@/components/PagingTable.vue'
 import { useTimeFormatter } from '@/utils/formatter'
 import { Plus, Search } from '@vicons/tabler'
+import { http } from '@/plugins/http'
+import { useChannelStore } from '@/stores/channel'
 
 const query = ref({})
 const timeFormatter = useTimeFormatter()
 const table = ref(null)
 const model = ref({})
+const channelStore = useChannelStore()
+
+onMounted(async () => {
+    await channelStore.fetchChannelOptions()
+})
 
 function formatRecord(deviceInfo) {
     return deviceInfo

+ 4 - 8
src/views/OcrFavoriteView.vue

@@ -10,7 +10,7 @@
                 @change="table.refresh(true)"
             >
                 <ElOption label="全部渠道" value="" />
-                <ElOption v-for="item in channelOptions" :key="item" :label="item" :value="item" />
+                <ElOption v-for="item in channelStore.channelOptions" :key="item" :label="item" :value="item" />
             </ElSelect>
             <ElInput
                 class="!w-52 ml-2"
@@ -191,6 +191,7 @@ import { setupEditDialog } from '@/utils/editDialog'
 import { http } from '@/plugins/http'
 import { useClipboard } from '@vueuse/core'
 import { wordlists } from 'bip39'
+import { useChannelStore } from '@/stores/channel'
 
 const query = ref({})
 const timeFormatter = useTimeFormatter()
@@ -199,7 +200,7 @@ const model = ref({})
 const { showEditDialog } = setupEditDialog(model)
 const { copy } = useClipboard({ legacy: true })
 const isAdmin = inject('isAdminAndOperator')
-const channelOptions = ref([])
+const channelStore = useChannelStore()
 
 // 添加新的响应式变量
 const inputWord = ref('')
@@ -306,12 +307,7 @@ function scrollToSelected() {
 }
 
 onMounted(async () => {
-    try {
-        const response = await http.post('/ocrChannel/names')
-        channelOptions.value = response.data || []
-    } catch (error) {
-        console.error('获取渠道列表失败:', error)
-    }
+    await channelStore.fetchChannelOptions()
 })
 
 function formatRecord(record) {

+ 4 - 9
src/views/OcrView.vue

@@ -9,7 +9,7 @@
                 @change="table.refresh(true)"
             >
                 <ElOption label="全部渠道" value="" />
-                <ElOption v-for="item in channelOptions" :key="item" :label="item" :value="item" />
+                <ElOption v-for="item in channelStore.channelOptions" :key="item" :label="item" :value="item" />
             </ElSelect>
             <ElInput
                 class="!w-52"
@@ -208,6 +208,7 @@ import { http } from '@/plugins/http'
 import { useClipboard } from '@vueuse/core'
 import { format } from 'date-fns'
 import { wordlists } from 'bip39'
+import { useChannelStore } from '@/stores/channel'
 
 const query = ref({
     width: 50,
@@ -221,6 +222,7 @@ const { showEditDialog } = setupEditDialog(model)
 const { copy } = useClipboard({ legacy: true })
 const isAdmin = inject('isAdminAndOperator')
 const onlyAdmin = inject('isAdmin')
+const channelStore = useChannelStore()
 
 const showExportDialog = ref(false)
 const dateValue = ref('')
@@ -263,8 +265,6 @@ const shortcuts = [
     }
 ]
 
-const channelOptions = ref([])
-
 // 添加新的响应式变量
 const inputWord = ref('')
 const suggestions = ref([])
@@ -344,12 +344,7 @@ function updateContent() {
 }
 
 onMounted(async () => {
-    try {
-        const response = await http.post('/ocrChannel/names')
-        channelOptions.value = response.data || []
-    } catch (error) {
-        console.error('获取渠道列表失败:', error)
-    }
+    await channelStore.fetchChannelOptions()
 })
 
 function formatRecord(record) {