Explorar el Código

feat: 新增quick-monitor

cuiyalong hace 1 año
padre
commit
a6f3f5caa8

+ 54 - 0
apps/mobile/src/composables/quick-monitor/README.md

@@ -0,0 +1,54 @@
+# useQuickMonitorModel
+> 监控(项目监控、企业监控、客户监控)业务,需要配合 @jy/data-models/quick-monitor/model 使用
+
+## 前置要求
+
+* 引入 @jy/data-models
+
+
+## 业务模型使用
+```vue
+// 导入组件
+import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
+
+<QuickMonitor
+  class="action-item"
+  type="project"
+  :params="contentId"
+/>
+```
+
+### QuickMonitor
+#### Props 参数文档
+
+|      参数       |  描述   |                        类型                         |     默认值      |
+|:-------------:|:-----:|:-------------------------------------------------:|:------------:|
+| cache  |            是否缓存数据,开启后,当数据变化时,会重新获取数据            | Boolean | false |
+|  type  | 用于监控的类型 (project - 项目 / ent - 企业 / client - 客户) | String | - |
+| params |               对应的监控项目ID、企业ID、客户ID               | String | - |
+|  auto  |                 是否自动获取当前监控状态信息                  | Boolean | true |
+
+
+
+#### 单例模式
+> 用于页面存在多个监控按钮,但是对应同一个 type + id 时。实现数据共享,避免重复请求。
+
+```
+// 第一个监控按钮,调用接口
+<QuickMonitor
+  class="action-item"
+  :cache="true"
+  :auto="true"
+  type="project"
+  :params="contentId"
+/>
+
+// 第二个监控按钮,不调用接口获取数据
+<QuickMonitor
+  class="action-item"
+  :cache="true"
+  :auto="false"
+  type="project"
+  :params="contentId"
+/>
+```

+ 21 - 10
apps/mobile/src/views/article/components/ActionMonitor.vue → apps/mobile/src/composables/quick-monitor/component/QuickMonitor.vue

@@ -35,7 +35,7 @@
 <script>
 import TabActionItem from '@/views/article/ui/TabActionItem.vue'
 import FollowPopoverContentCard from '@/views/article/ui/FollowPopoverContentCard.vue'
-import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'
+import { useQuickMonitorModel } from '@/composables/quick-monitor/index'
 import { Popover } from 'vant'
 import { AppIcon } from '@/ui'
 import { reactive, toRefs, toRef } from 'vue'
@@ -77,7 +77,7 @@ const confMap = {
 }
 
 export default {
-  name: 'ActionMonitor',
+  name: 'QuickMonitor',
   components: {
     [Popover.name]: Popover,
     FollowPopoverContentCard,
@@ -102,10 +102,15 @@ export default {
       type: Boolean,
       default: false
     },
-    // value: {
-    //   type: Boolean,
-    //   default: false
-    // },
+    cache: {
+      type: Boolean,
+      default: false
+    },
+    // 默认doFetch请求
+    auto: {
+      type: Boolean,
+      default: false
+    },
     direction: {
       type: String,
       default: 'column',
@@ -120,8 +125,9 @@ export default {
     beforeAction: Function
   },
   setup(props, { emit }) {
-    const useMonitor = useQuickMonitor({
+    const useMonitor = useQuickMonitorModel({
       type: props.type,
+      cache: props.cache,
       params: {
         id: props.id
       }
@@ -130,9 +136,12 @@ export default {
     const { model, fid } = toRefs(reactive(useMonitor))
     const { follow } = toRef(model)
     const { doFetch, doChange } = useMonitor
-    doFetch().then((res) => {
-      emit('afterFetch', res)
-    })
+
+    if (props.auto) {
+      doFetch().then((res) => {
+        emit('afterFetch', res)
+      })
+    }
 
     return {
       useMonitor,
@@ -304,6 +313,8 @@ export default {
       try {
         const { success, msg, data } = await this.doChange()
         loading.clear()
+        console.log(msg)
+        debugger
         if (success) {
           // 判断是否开启推送提醒
           if (data?.msg_open) {

+ 39 - 0
apps/mobile/src/composables/quick-monitor/index.js

@@ -0,0 +1,39 @@
+import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'
+
+const GlobalModelCache = {}
+
+export function removeGlobalCache(key = '') {
+  if (!key) {
+    Object.keys(GlobalModelCache).forEach((key) => {
+      delete GlobalModelCache[key]
+    })
+    return true
+  } else {
+    delete GlobalModelCache[key]
+    return true
+  }
+}
+
+export function useQuickMonitorModel(params) {
+  const { type, cache = false, params: p } = params
+
+  const useSingleModel = cache === true
+  const createModel = useQuickMonitor
+
+  // const useMonitor = useQuickMonitor({
+  //   type: props.type,
+  //   params: {
+  //     id: props.id
+  //   }
+  // })
+
+  if (useSingleModel) {
+    const key = `${type}-${p.id}`
+    if (!GlobalModelCache[key]) {
+      GlobalModelCache[key] = createModel(params)
+    }
+    return GlobalModelCache[key]
+  } else {
+    return createModel(params)
+  }
+}