|
|
@@ -1,56 +1,9 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <el-popover placement="left" width="224" trigger="click">
|
|
|
- <div
|
|
|
- slot="reference"
|
|
|
- class="flex-r-c center"
|
|
|
- @click.stop="changeFollow()"
|
|
|
- >
|
|
|
- <i
|
|
|
- class="icon iconfont"
|
|
|
- :class="{
|
|
|
- 'icon-yijiankong': follow,
|
|
|
- 'icon-jiankong': !follow
|
|
|
- }"
|
|
|
- ></i>
|
|
|
- <span>{{ follow ? '取消' : '' }}监控</span>
|
|
|
- </div>
|
|
|
- <monitor
|
|
|
- @showNeedSubmit="showNeedSubmit"
|
|
|
- @show="monitorInfo.showD4 = true"
|
|
|
- :already-num="monitorInfo.alreadyNum"
|
|
|
- :remain-num="monitorInfo.remainNum"
|
|
|
- :show-list="monitorInfo.showList"
|
|
|
- ></monitor>
|
|
|
- </el-popover>
|
|
|
- <common-dialog
|
|
|
- center
|
|
|
- custom-class="monitor-class"
|
|
|
- width="380px"
|
|
|
- :visible="dialog.show"
|
|
|
- :title="dialog.title"
|
|
|
- >
|
|
|
- <template #footer>
|
|
|
- <button
|
|
|
- v-for="(item, index) in dialog.footerActions"
|
|
|
- :key="index"
|
|
|
- class="action-button"
|
|
|
- :class="item.class"
|
|
|
- @click="doClickAction(item)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </button>
|
|
|
- </template>
|
|
|
- {{ dialog.content }}
|
|
|
- </common-dialog>
|
|
|
- <CollectInfo ref="collectRef"></CollectInfo>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
import commonDialog from '@/components/dialog/Dialog.vue'
|
|
|
import CollectInfo from '@/components/collect-info/CollectInfo.vue'
|
|
|
-import monitor from '@/components/common/Monitor.vue'
|
|
|
+import MonitorPopover from '@/components/common/MonitorPopover.vue'
|
|
|
+import { computed, ref, defineProps, reactive } from 'vue'
|
|
|
+import useQuickMonitor from '@jy/data-models/modules/quick-monitor/model'
|
|
|
|
|
|
// 监控 + 监控成功
|
|
|
// 未监控 + 取消监控
|
|
|
@@ -118,63 +71,143 @@ const dialogDataMap = {
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
+const collectElement = ref(null)
|
|
|
+const follow = ref(false)
|
|
|
+const dialogShow = ref(false)
|
|
|
+const dialogConfig = computed(() => dialogDataMap['monitor-success'])
|
|
|
|
|
|
-export default {
|
|
|
- name: 'QuickMonitor',
|
|
|
- components: {
|
|
|
- monitor,
|
|
|
- CollectInfo,
|
|
|
- commonDialog
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- follow: false,
|
|
|
- monitorInfo: {
|
|
|
- showD1: false,
|
|
|
- showD2: false,
|
|
|
- showD3: false,
|
|
|
- showD4: false,
|
|
|
- showList: [1, 3],
|
|
|
- remainNum: 0,
|
|
|
- alreadyNum: 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- dialog() {
|
|
|
- return {
|
|
|
- show: false,
|
|
|
- title: '1',
|
|
|
- content: '1',
|
|
|
- footerActions: [
|
|
|
- {
|
|
|
- label: '去开启',
|
|
|
- class: 'confirm',
|
|
|
- action: '1'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '暂不开启',
|
|
|
- class: 'cancel',
|
|
|
- action: '2'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeFollow() {},
|
|
|
- // 显示留资弹窗
|
|
|
- showNeedSubmit() {
|
|
|
- this.$refs.collectRef.noCallApiFn('pc_buyer_monitor_more', true)
|
|
|
- },
|
|
|
- setMonitorConfirm() {},
|
|
|
- setMonitorCancel() {},
|
|
|
- doClickAction() {}
|
|
|
+// monitor-popover click emit
|
|
|
+function doClickMonitorActions(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 'more':
|
|
|
+ break
|
|
|
+ case 'list':
|
|
|
+ break
|
|
|
+ case 'apply':
|
|
|
+ break
|
|
|
+ case 'cancel':
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+function doClickAction() {}
|
|
|
+function changeFollow() {}
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ type: String,
|
|
|
+ params: String,
|
|
|
+ config: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({
|
|
|
+ default: '监控',
|
|
|
+ follow: '已监控'
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const useMonitor = reactive(
|
|
|
+ useQuickMonitor({
|
|
|
+ type: props.type,
|
|
|
+ params: {
|
|
|
+ id: props.params
|
|
|
+ }
|
|
|
+ })
|
|
|
+)
|
|
|
+
|
|
|
+console.log(useMonitor)
|
|
|
+const { doFetch, doChange } = useMonitor
|
|
|
+
|
|
|
+const model = computed(() => {
|
|
|
+ return useMonitor.model
|
|
|
+})
|
|
|
+
|
|
|
+const monitorPopoverConfig = computed(() => {
|
|
|
+ return {
|
|
|
+ showTip: !model.value.follow,
|
|
|
+ showMore: model.value.follow,
|
|
|
+ showList: true,
|
|
|
+ showCancel: model.value.follow,
|
|
|
+ alreadyNum: model.value.expands.alreadyNum,
|
|
|
+ remainNum: model.value.expands.remainNum,
|
|
|
+ textType: props.type
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+doFetch()
|
|
|
</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="click"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="reference"
|
|
|
+ class="flex-r-c center action-icon"
|
|
|
+ @click.stop="changeFollow()"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="icon iconfont"
|
|
|
+ :class="{
|
|
|
+ 'icon-yijiankong': model.follow,
|
|
|
+ 'icon-jiankong': !model.follow
|
|
|
+ }"
|
|
|
+ ></i>
|
|
|
+ <span>{{ model.follow ? config.follow : config.default }}</span>
|
|
|
+ </div>
|
|
|
+ <monitor-popover
|
|
|
+ v-bind="monitorPopoverConfig"
|
|
|
+ @click="doClickMonitorActions"
|
|
|
+ ></monitor-popover>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <!-- 提示弹窗 -->
|
|
|
+ <common-dialog
|
|
|
+ center
|
|
|
+ custom-class="monitor-class"
|
|
|
+ width="380px"
|
|
|
+ :visible="dialogShow"
|
|
|
+ :title="dialogConfig.title"
|
|
|
+ >
|
|
|
+ <template #footer>
|
|
|
+ <button
|
|
|
+ v-for="(item, index) in dialogConfig.footerActions"
|
|
|
+ :key="index"
|
|
|
+ class="action-button"
|
|
|
+ :class="item.class"
|
|
|
+ @click="doClickAction(item)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ {{ dialogConfig.content }}
|
|
|
+ </common-dialog>
|
|
|
+ <!-- 留资 -->
|
|
|
+ <collect-info ref="collectElement"></collect-info>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.quick-monitor-popover {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.action-icon {
|
|
|
+ .iconfont {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #9b9ca3;
|
|
|
+ &.icon-yijiankong {
|
|
|
+ color: #ff9f40;
|
|
|
+ }
|
|
|
+ & + span {
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
::v-deep {
|
|
|
.monitor-class {
|
|
|
padding: 32px;
|
