web/data/data-models/modules/quick-monitor/README.md

useQuickMonitor

监控（项目监控、企业监控、客户监控）业务

::: tip 该业务模型已集成 API 接口请求。 :::

前置要求

• 使用 interceptors-data-models.js，将 service axios 实例中注入

  // interceptors-data-models.js
  import service from './interceptors-anti'
  import { injectRequest } from '@jy/data-models'
  
  injectRequest(service)
  

业务模型使用

// 导入监控业务模型
import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'

const useMonitor = useQuickMonitor({
  type: 'project',
  params: {
    id: '项目ID'
  }
})

// 监控状态
// useMonitor.model
// useMonitor.id
// useMonitor.fid
// useMonitor.loading

// async 初始化，获取当前监控状态信息
useMonitor.doFetch()

// async 改变监控状态
useMonitor.doChange()

useQuickMonitor()

参数文档

参数	描述	类型	默认值
type	用于监控的类型 (project - 项目	ent - 企业	client - 客户)
params.id	对应的监控项目ID、企业ID、客户ID	String	''

model 数据模型

• 可通过 useMonitor.model 获取实时数据

• 或者 useMonitor.createModel() 创建初始默认值

  return {
  // 是否可以展示监控按钮
  canFollow: false,
  // 当前监控状态
  follow: false,
  // 可扩展字段
  expands: {
  // 剩余可用数量
  surplus: 0,
  // 已用数量
  used: 0
  }
  }
  

async doFetch()

初始化，获取当前监控数据

返回值

返回值等于 model

async doChange()

改变监控状

返回值

{
  // 操作是否成功
  success: false,
  msg: '',
  // 接口返回值
  data: {}
}

Setup 用法

组合式

<script setup>
  import { reactive, toRefs } from 'vue'
  import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'

  const useMonitor = useQuickMonitor({
    type: props.type,
    params: {
      id: props.params
    }
  })

  const { doFetch, doChange } = useMonitor

  const { model } = toRefs(reactive(useMonitor))

  // 未监控时可点击监控
  function changeFollow() {
    if (!model.value.follow) {
      doChange()
    }
  }
  
<script>