From 3de811e9d90830d056704356f5309c08e7d68385 Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Fri, 8 Mar 2024 14:33:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor-ops/log/data.ts             | 222 +++++++++---------
 src/views/monitor-ops/log/index.vue           |   6 +-
 .../list/SubscriptionFormModal.vue            |   4 +-
 src/views/subscription/list/data.ts           |  98 ++++----
 src/views/subscription/list/index.vue         |   6 +-
 5 files changed, 167 insertions(+), 169 deletions(-)

diff --git a/src/views/monitor-ops/log/data.ts b/src/views/monitor-ops/log/data.ts
index a490f783..14e6f2f6 100644
--- a/src/views/monitor-ops/log/data.ts
+++ b/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 type { Product } from '@/api/product/types'
-import { useSystemEnumStoreWithOut } from '@/store/modules/systemEnum'
+import { useSystemEnumStore } from '@/store/modules/systemEnum'
+import { useSharedProducts } from '@/views/subscription/list/data'
 
-let productsCache: Pick<Product, 'id' | 'productName'>[] = []
-async function getCachedProducts() {
-  if (productsCache.length)
-    return productsCache
+export function useColumns(): BasicColumn[] {
+  const { products } = useSharedProducts()
+  const { getSystemEnumLabel } = useSystemEnumStore()
 
-  try {
-    return productsCache = await getAllProducts()
-  }
-  catch {
-    return []
-  }
-}
-
-const { getSystemEnumLabel, getSystemEnums } = useSystemEnumStoreWithOut()
-
-export const columns: BasicColumn[] = [
-  {
-    title: '所属产品',
-    dataIndex: 'productId',
-    customRender({ value }) {
-      return productsCache.find(item => item.id === value)?.productName
+  return [
+    {
+      title: '所属产品',
+      dataIndex: 'productId',
+      customRender({ value }) {
+        return products.value.find(item => item.id === value)?.productName
+      },
     },
-  },
-  {
-    title: '设备序列号',
-    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: '设备序列号',
+      dataIndex: 'deviceSn',
     },
-  },
-  {
-    title: '操作',
-    dataIndex: 'operation',
-  },
-  {
-    title: '时间',
-    dataIndex: 'createTime',
-  },
-  {
-    title: '状态',
-    dataIndex: 'code',
-    width: 120,
-    customRender({ value }) {
-      return h('b', {
-        style: {
-          color: value === 200 ? '#16a34a' : '#dc2626',
-        },
-      }, value)
+    {
+      title: 'TraceID',
+      dataIndex: 'traceId',
     },
-  },
-]
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'productId',
-    label: '所属产品',
-    component: 'ApiSelect',
-    componentProps: {
-      api: getCachedProducts,
-      valueField: 'id',
-      labelField: 'productName',
-      showSearch: true,
+    {
+      title: '消息内容',
+      dataIndex: 'messageId',
+      width: 120,
     },
-    colProps: {
-      span: 6,
+    {
+      title: '业务类型',
+      dataIndex: 'bizType',
+      width: 150,
+      customRender({ value }) {
+        return h(Tag, () => getSystemEnumLabel('eDeviceLogBizType', value))
+      },
     },
-  },
-  {
-    field: 'deviceSn',
-    label: '设备序列号',
-    component: 'Input',
-    colProps: {
-      span: 6,
+    {
+      title: '操作',
+      dataIndex: 'operation',
     },
-  },
-  {
-    field: 'traceId',
-    label: 'TraceId',
-    component: 'Input',
-    colProps: {
-      span: 6,
+    {
+      title: '时间',
+      dataIndex: 'createTime',
     },
-  },
-  {
-    field: 'bizType',
-    label: '业务类型',
-    component: 'Select',
-    componentProps: {
-      options: getSystemEnums('eDeviceLogBizType'),
+    {
+      title: '状态',
+      dataIndex: 'code',
+      width: 120,
+      customRender({ value }) {
+        return h('b', {
+          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: 'time',
-    label: '日志时间',
-    component: 'RangePicker',
-    componentProps: {
-      showTime: true,
-      disabledDate(current) {
-        return current && current > dayjs().endOf('day')
+    {
+      field: 'traceId',
+      label: 'TraceId',
+      component: 'Input',
+      colProps: {
+        span: 6,
       },
     },
-    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,
+      },
+    },
+  ]
+}
diff --git a/src/views/monitor-ops/log/index.vue b/src/views/monitor-ops/log/index.vue
index 4577b513..c1ec13cc 100644
--- a/src/views/monitor-ops/log/index.vue
+++ b/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,
diff --git a/src/views/subscription/list/SubscriptionFormModal.vue b/src/views/subscription/list/SubscriptionFormModal.vue
index bc8dace0..abee291a 100644
--- a/src/views/subscription/list/SubscriptionFormModal.vue
+++ b/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 },
 })
diff --git a/src/views/subscription/list/data.ts b/src/views/subscription/list/data.ts
index d1c7c8fe..21b14d14 100644
--- a/src/views/subscription/list/data.ts
+++ b/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'>[] = []
-async function getCachedProducts() {
-  if (productsCache.length)
-    return productsCache
+export const useSharedProducts = createSharedComposable(() => {
+  const { state } = useAsyncState(getAllProducts, [])
+  return { products: state }
+})
 
-  try {
-    return productsCache = await getAllProducts()
-  }
-  catch {
-    return []
-  }
-}
+export function useColumns(): BasicColumn[] {
+  const { getSystemEnums } = useSystemEnumStore()
+  const { products } = useSharedProducts()
 
-export const columns: BasicColumn[] = [
-  {
-    title: '产品名称',
-    dataIndex: 'productId',
-    customRender({ value }) {
-      return productsCache.find(item => item.id === value)?.productName
+  return [
+    {
+      title: '产品名称',
+      dataIndex: 'productId',
+      customRender({ value }) {
+        return products.value.find(item => item.id === value)?.productName
+      },
     },
-  },
-  {
-    title: '推送消息类型',
-    dataIndex: 'messageType',
-    customRender({ value }) {
-      const values = value.split(',')
-      const types = getSystemEnums('eSubscribeMessageType')
-      return h(
-        Space,
-        () => types
-          .map(item => values.includes(item.value.toString()) ? item.label : null)
-          .filter(Boolean)
-          .map(name => h(Tag, () => name)),
-      )
+    {
+      title: '推送消息类型',
+      dataIndex: 'messageType',
+      customRender({ value }) {
+        const values = value.split(',')
+        const types = getSystemEnums('eSubscribeMessageType')
+        return h(
+          Space,
+          () => types
+            .map(item => values.includes(item.value.toString()) ? item.label : null)
+            .filter(Boolean)
+            .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,
-        valueField: 'id',
-        labelField: 'productName',
+        options: products as any,
         showSearch: true,
+        fieldNames: {
+          label: 'productName',
+          value: 'id',
+        },
       },
       dynamicDisabled: () => isUpload.value,
     },
diff --git a/src/views/subscription/list/index.vue b/src/views/subscription/list/index.vue
index 7da05d25..1eff580b 100644
--- a/src/views/subscription/list/index.vue
+++ b/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,