web/apps/bigmember_pc/src/composables/quick-monitor/component/QuickMonitor.vue

<script setup>
import commonDialog from '@/components/dialog/Dialog.vue'
import CollectInfo from '@/components/collect-info/CollectInfo.vue'
import MonitorPopover from '@/components/common/MonitorPopover.vue'
import MonitorGroup from '@/composables/quick-monitor/component/MonitorGroup.vue'
import { useQuickMonitorModel } from '@/composables/quick-monitor'
import { getCurrentInstance, ref } from 'vue'

const props = defineProps({
  type: String,
  params: String,
  // 如果需要多个监控复用一个 model，需要传递 true
  cache: {
    type: Boolean,
    default: false
  },
  // 自动调用 doFetch 获取状态接口
  auto: {
    type: Boolean,
    default: true
  },
  // 留资来源
  source: {
    type: Object,
    default: () => ({})
  }
})

const that = getCurrentInstance().proxy
const groupRef = ref('')

const {
  // 基础展示信息
  model,
  doFetch,
  doAddFollow,
  TextConfig,
  // popover 悬浮信息
  monitorPopoverConfig,
  doClickMonitorActions,
  // dialog 提示弹窗
  dialogConfig,
  // 留资
  collectElement,
  // 分组
  groupList,
  doChangeGroup,
  doUpdateGroup,
  eleLoading
} = useQuickMonitorModel({
  type: props.type,
  id: props.params,
  cache: props.cache,
  source: props.source
})

if (props.auto) {
  doFetch()
}

function getParams() {
  return props.params
}

function onGroupDisabled(val) {
  dialogConfig.value.footerActions.forEach((v) => (v.disabled = val))
  that.$forceUpdate()
}

// 新增分组
function onAddGroup(data) {
  doUpdateGroup({ type: 'add', name: data?.name })
}
// 编辑分组
function onEditGroup(data) {
  doUpdateGroup({ type: 'put', groupId: data?.groupId, name: data?.name })
}

// 选择分组组件change回调事件
function onChangeGroup(id) {
  doChangeGroup(id)
}

function doClickMonitorActionsFn(item) {
  //  未触发子组件change事件时，手动获取选中的分组
  if (groupRef.value) {
    const selected = groupRef.value.getSelected()
    doChangeGroup(selected)
  }
  doClickMonitorActions(item.action || 'doCloseDialog')
}

defineExpose({
  model,
  getParams
})
</script>
<template>
  <div class="quick-monitor" v-if="model.canFollow">
    <!--  icon + popover  -->
    <div class="quick-monitor-popover">
      <el-popover
        popper-class="monitor-popover"
        placement="bottom"
        :append-to-body="false"
        width="224"
        trigger="hover"
      >
        <div
          v-loading.lock="eleLoading"
          slot="reference"
          class="flex-r-c center action-icon"
          @click.stop="doAddFollow"
        >
          <i
            class="icon iconfont"
            :class="{
              'icon-yijiankong': model.follow,
              'icon-jiankong': !model.follow
            }"
          ></i>
          <span>{{
            model.follow ? TextConfig.follow : TextConfig.default
          }}</span>
        </div>
        <monitor-popover
          v-bind="monitorPopoverConfig"
          @click="doClickMonitorActions"
        ></monitor-popover>
      </el-popover>
    </div>
    <!-- 提示弹窗 -->
    <common-dialog
      center
      custom-class="monitor-class"
      :width="dialogConfig.width || '380px'"
      :destroy-on-close="true"
      :visible="dialogConfig.show"
      :title="dialogConfig.title"
    >
      <template #footer>
        <button
          v-for="(item, index) in dialogConfig.footerActions"
          :key="index"
          class="action-button"
          :class="item.class"
          :disabled="item.disabled"
          @click="doClickMonitorActionsFn(item)"
        >
          {{ item.label }}
        </button>
      </template>
      <!-- 选择监控分组 -->
      <MonitorGroup
        v-if="dialogConfig.template === 'group'"
        ref="groupRef"
        :list="groupList"
        @emitDisabled="onGroupDisabled"
        @onChange="onChangeGroup"
        @add="onAddGroup"
        @edit="onEditGroup"
      >
      </MonitorGroup>
      <div v-else>{{ dialogConfig.content }}</div>
    </common-dialog>
    <!-- 留资 -->
    <collect-info ref="collectElement"></collect-info>
  </div>
</template>

<style lang="scss" scoped>
.quick-monitor-popover {
  position: relative;
}
.action-icon {
  cursor: pointer;
  .iconfont {
    font-size: 18px;
    color: #9b9ca3;
    &.icon-yijiankong {
      color: #ff9f40;
    }
    & + span {
      margin-left: 2px;
    }
  }
  ::v-deep {
    .el-loading-spinner {
      margin-top: -12px;
      .circular {
        width: 24px;
        height: 24px;
      }
    }
  }
}
::v-deep {
  .monitor-class {
    padding: 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0px !important;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 20px 0 32px;
      text-align: center;
    }
    .el-dialog__footer {
      padding: 0;
    }
  }
  .action-button.cancel[disabled] {
    background-color: #e3e4e5;
    color: #999999;
  }
}
</style>