refactor: 重构产品数据获取方式

src/views/monitor-ops/log/data.ts

@@ -2,130 +2,126 @@ import { h } from 'vue'
 import { Tag } from 'ant-design-vue'
 import dayjs from 'dayjs'
 import type { BasicColumn, FormSchema } from '@/components/Table'
-import { getAllProducts } from '@/api/product'
+import { useSystemEnumStore } from '@/store/modules/systemEnum'
-import type { Product } from '@/api/product/types'
+import { useSharedProducts } from '@/views/subscription/list/data'
-import { useSystemEnumStoreWithOut } from '@/store/modules/systemEnum'
 
-let productsCache: Pick<Product, 'id' | 'productName'>[] = []
+export function useColumns(): BasicColumn[] {
-async function getCachedProducts() {
+  const { products } = useSharedProducts()
-  if (productsCache.length)
+  const { getSystemEnumLabel } = useSystemEnumStore()
-    return productsCache
 
-  try {
+  return [
-    return productsCache = await getAllProducts()
+    {
-  }
+      title: '所属产品',
-  catch {
+      dataIndex: 'productId',
-    return []
+      customRender({ value }) {
-  }
+        return products.value.find(item => item.id === value)?.productName
-}
+      },
-
-const { getSystemEnumLabel, getSystemEnums } = useSystemEnumStoreWithOut()
-
-export const columns: BasicColumn[] = [
-  {
-    title: '所属产品',
-    dataIndex: 'productId',
-    customRender({ value }) {
-      return productsCache.find(item => item.id === value)?.productName
     },
-  },
+    {
-  {
+      title: '设备序列号',
-    title: '设备序列号',
+      dataIndex: 'deviceSn',
-    dataIndex: 'deviceSn',
-  },
-  {
-    title: 'TraceID',
-    dataIndex: 'traceId',
-  },
-  {
-    title: '消息内容',
-    dataIndex: 'messageId',
-    width: 120,
-  },
-  {
-    title: '业务类型',
-    dataIndex: 'bizType',
-    width: 150,
-    customRender({ value }) {
-      return h(Tag, () => getSystemEnumLabel('eDeviceLogBizType', value))
     },
-  },
+    {
-  {
+      title: 'TraceID',
-    title: '操作',
+      dataIndex: 'traceId',
-    dataIndex: 'operation',
-  },
-  {
-    title: '时间',
-    dataIndex: 'createTime',
-  },
-  {
-    title: '状态',
-    dataIndex: 'code',
-    width: 120,
-    customRender({ value }) {
-      return h('b', {
-        style: {
-          color: value === 200 ? '#16a34a' : '#dc2626',
-        },
-      }, value)
     },
-  },
+    {
-]
+      title: '消息内容',
-
+      dataIndex: 'messageId',
-export const searchFormSchema: FormSchema[] = [
+      width: 120,
-  {
-    field: 'productId',
-    label: '所属产品',
-    component: 'ApiSelect',
-    componentProps: {
-      api: getCachedProducts,
-      valueField: 'id',
-      labelField: 'productName',
-      showSearch: true,
     },
-    colProps: {
+    {
-      span: 6,
+      title: '业务类型',
+      dataIndex: 'bizType',
+      width: 150,
+      customRender({ value }) {
+        return h(Tag, () => getSystemEnumLabel('eDeviceLogBizType', value))
+      },
     },
-  },
+    {
-  {
+      title: '操作',
-    field: 'deviceSn',
+      dataIndex: 'operation',
-    label: '设备序列号',
-    component: 'Input',
-    colProps: {
-      span: 6,
     },
-  },
+    {
-  {
+      title: '时间',
-    field: 'traceId',
+      dataIndex: 'createTime',
-    label: 'TraceId',
-    component: 'Input',
-    colProps: {
-      span: 6,
     },
-  },
+    {
-  {
+      title: '状态',
-    field: 'bizType',
+      dataIndex: 'code',
-    label: '业务类型',
+      width: 120,
-    component: 'Select',
+      customRender({ value }) {
-    componentProps: {
+        return h('b', {
-      options: getSystemEnums('eDeviceLogBizType'),
+          style: {
+            color: value === 200 ? '#16a34a' : '#dc2626',
+          },
+        }, value)
+      },
     },
-    colProps: {
+  ]
-      span: 6,
+}
+
+export function useSearchFormSchema(): FormSchema[] {
+  const { products } = useSharedProducts()
+  const { getSystemEnums } = useSystemEnumStore()
+
+  return [
+    {
+      field: 'productId',
+      label: '所属产品',
+      component: 'Select',
+      componentProps: {
+        options: products as any,
+        showSearch: true,
+        fieldNames: {
+          label: 'productName',
+          value: 'id',
+        },
+      },
+      colProps: {
+        span: 6,
+      },
+    },
+    {
+      field: 'deviceSn',
+      label: '设备序列号',
+      component: 'Input',
+      colProps: {
+        span: 6,
+      },
     },
-  },
+    {
-  {
+      field: 'traceId',
-    field: 'time',
+      label: 'TraceId',
-    label: '日志时间',
+      component: 'Input',
-    component: 'RangePicker',
+      colProps: {
-    componentProps: {
+        span: 6,
-      showTime: true,
-      disabledDate(current) {
-        return current && current > dayjs().endOf('day')
       },
     },
-    colProps: {
+    {
-      span: 6,
+      field: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        options: getSystemEnums('eDeviceLogBizType'),
+      },
+      colProps: {
+        span: 6,
+      },
     },
-  },
+    {
-]
+      field: 'time',
+      label: '日志时间',
+      component: 'RangePicker',
+      componentProps: {
+        showTime: true,
+        disabledDate(current) {
+          return current && current > dayjs().endOf('day')
+        },
+      },
+      colProps: {
+        span: 6,
+      },
+    },
+  ]
+}

src/views/monitor-ops/log/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { columns, searchFormSchema } from './data'
+import { useColumns, useSearchFormSchema } from './data'
 import MessageContentModal from './MessageContentModal.vue'
 import { getLogList } from '@/api/monitor-ops/log'
 import { BasicTable, useTable } from '@/components/Table'
@@ -16,10 +16,10 @@ const [register] = useTable({
       queryEndTime: params.time && params.time[1],
     })
   },
-  columns,
+  columns: useColumns(),
   formConfig: {
     labelWidth: 90,
-    schemas: searchFormSchema,
+    schemas: useSearchFormSchema(),
   },
   bordered: true,
   canResize: false,

src/views/subscription/list/SubscriptionFormModal.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { getFormSchema } from './data'
+import { useFormSchema } from './data'
 import { useMessage } from '@/hooks/web/useMessage'
 import { BasicForm, useForm } from '@/components/Form'
 import { BasicModal, useModalInner } from '@/components/Modal'
@@ -15,7 +15,7 @@ const isUpdate = ref(false)
 const [registerForm, { setFieldsValue, validate }] = useForm({
   labelWidth: 100,
   baseColProps: { span: 24 },
-  schemas: getFormSchema(isUpdate),
+  schemas: useFormSchema(isUpdate),
   showActionButtonGroup: false,
   actionColOptions: { span: 23 },
 })

src/views/subscription/list/data.ts

@@ -1,63 +1,60 @@
-import type { Ref } from 'vue'
 import { h } from 'vue'
+import type { Ref } from 'vue'
 import { Space, Tag } from 'ant-design-vue'
+import { createSharedComposable, useAsyncState } from '@vueuse/core'
 import type { BasicColumn, FormSchema } from '@/components/Table'
 import { useSystemEnumStore } from '@/store/modules/systemEnum'
 import { getAllProducts } from '@/api/product'
-import type { Product } from '@/api/product/types'
-
-const { getSystemEnums } = useSystemEnumStore()
 
-let productsCache: Pick<Product, 'id' | 'productName'>[] = []
+export const useSharedProducts = createSharedComposable(() => {
-async function getCachedProducts() {
+  const { state } = useAsyncState(getAllProducts, [])
-  if (productsCache.length)
+  return { products: state }
-    return productsCache
+})
 
-  try {
+export function useColumns(): BasicColumn[] {
-    return productsCache = await getAllProducts()
+  const { getSystemEnums } = useSystemEnumStore()
-  }
+  const { products } = useSharedProducts()
-  catch {
-    return []
-  }
-}
 
-export const columns: BasicColumn[] = [
+  return [
-  {
+    {
-    title: '产品名称',
+      title: '产品名称',
-    dataIndex: 'productId',
+      dataIndex: 'productId',
-    customRender({ value }) {
+      customRender({ value }) {
-      return productsCache.find(item => item.id === value)?.productName
+        return products.value.find(item => item.id === value)?.productName
+      },
     },
-  },
+    {
-  {
+      title: '推送消息类型',
-    title: '推送消息类型',
+      dataIndex: 'messageType',
-    dataIndex: 'messageType',
+      customRender({ value }) {
-    customRender({ value }) {
+        const values = value.split(',')
-      const values = value.split(',')
+        const types = getSystemEnums('eSubscribeMessageType')
-      const types = getSystemEnums('eSubscribeMessageType')
+        return h(
-      return h(
+          Space,
-        Space,
+          () => types
-        () => types
+            .map(item => values.includes(item.value.toString()) ? item.label : null)
-          .map(item => values.includes(item.value.toString()) ? item.label : null)
+            .filter(Boolean)
-          .filter(Boolean)
+            .map(name => h(Tag, () => name)),
-          .map(name => h(Tag, () => name)),
+        )
-      )
+      },
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
     },
-  },
+  ]
-  {
+}
-    title: '创建时间',
+
-    dataIndex: 'createTime',
+export function useSearchFormSchema(productId?: string): FormSchema[] {
-  },
+  const { products } = useSharedProducts()
-]
 
-export function getSearchFormSchema(productId?: string): FormSchema[] {
   return [
     {
       field: 'productId',
       label: '产品名称',
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getCachedProducts,
+        options: products as any,
         showSearch: true,
         fieldNames: {
           label: 'productName',
@@ -72,7 +69,10 @@ export function getSearchFormSchema(productId?: string): FormSchema[] {
   ]
 }
 
-export function getFormSchema(isUpload: Ref<boolean>): FormSchema[] {
+export function useFormSchema(isUpload: Ref<boolean>): FormSchema[] {
+  const { products } = useSharedProducts()
+  const { getSystemEnums } = useSystemEnumStore()
+
   return [
     {
       field: 'productId',
@@ -81,10 +81,12 @@ export function getFormSchema(isUpload: Ref<boolean>): FormSchema[] {
       required: true,
       component: 'ApiSelect',
       componentProps: {
-        api: getCachedProducts,
+        options: products as any,
-        valueField: 'id',
-        labelField: 'productName',
         showSearch: true,
+        fieldNames: {
+          label: 'productName',
+          value: 'id',
+        },
       },
       dynamicDisabled: () => isUpload.value,
     },

src/views/subscription/list/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PlusOutlined } from '@ant-design/icons-vue'
-import { columns, getSearchFormSchema } from './data'
+import { useColumns, useSearchFormSchema } from './data'
 import SubscriptionFormModal from './SubscriptionFormModal.vue'
 import { BasicTable, TableAction, useTable } from '@/components/Table'
 import { deleteSubscription, getSubscriptionList } from '@/api/subscription/list'
@@ -17,10 +17,10 @@ const { hasPermission } = usePermission()
 
 const [register, { reload }] = useTable({
   api: getSubscriptionList,
-  columns,
+  columns: useColumns(),
   formConfig: {
     labelWidth: 80,
-    schemas: getSearchFormSchema(history.state.productId),
+    schemas: useSearchFormSchema(history.state.productId),
   },
   bordered: true,
   canResize: false,