Merge branch 'dev/v1.0.88_yf' of jianyu/web into feature/v1.0.88

apps/bigmember_pc/src/components/collect-info/CollectInfo.vue

@@ -613,7 +613,11 @@ export default {
         pc_dzbgxzb_customizedquantity:
           '请留下联系方式，我们会安排客户经理与您对接，下载更多市场分析定制报告！',
         pc_sunlightlist_viewdetails: '每天前10名开通权限的用户可免费开通',
-        pc_sunlight_viewdetails: '每天前10名开通权限的用户可免费开通'
+        pc_sunlight_viewdetails: '每天前10名开通权限的用户可免费开通',
+        pc_ent_more:
+          '请升级大会员，可实时监控最多500个企业中标动态，帮助你了解竞争对手和合作伙伴的动向。',
+        pc_ent_limit:
+          '您当前权限不足，请升级大会员，可实时监控最多500个企业中标动态，帮助你了解竞争对手和合作伙伴的动向。'
       },
       sourceTitleTopMap: {
         pc_Interfacedirectory_apply: '立即申请，获取剑鱼数据接口试用体验！',
@@ -642,7 +646,9 @@ export default {
         pc_dzbg_fullreport: '体验市场分析定制报告',
         pc_dzbgxzb_customizedquantity: '市场分析定制报告下载',
         pc_sunlightlist_viewdetails: '采购人联系方式等关键信息无权限查看',
-        pc_sunlight_viewdetails: '采购人联系方式等关键信息无权限查看'
+        pc_sunlight_viewdetails: '采购人联系方式等关键信息无权限查看',
+        pc_ent_more: '申请监控更多企业',
+        pc_ent_limit: '申请监控更多企业'
       },
       sourceDescMap: {
         pc_Interfacedirectory_apply: '接口目录页-申请接口-pc',
@@ -668,7 +674,9 @@ export default {
         pc_dzbg_fullreport: '申请免费体验-完整查看市场分析定制报告',
         pc_sunlightlist_viewdetails: '阳光直采采购信息列表-查看采购信息详情',
         pc_sunlight_viewdetails: '阳光直采-查看采购信息详情',
-        pc_dzbgxzb_customizedquantity: '市场分析定制报告下载包-定制报告份数'
+        pc_dzbgxzb_customizedquantity: '市场分析定制报告下载包-定制报告份数',
+        pc_ent_more: '企业画像页-申请监控更多企业',
+        pc_ent_limit: '企业画像页-申请监控更多企业（已达上限）'
       },
       isRefresh: false
     }

apps/bigmember_pc/src/components/common/MonitorPopover.vue

@@ -10,6 +10,27 @@
       >
         {{ textConfig.more }}
       </li>
+      <!-- <li
+        class="monitor-more-actions"
+        :class="{ 'b-style-none': !followedGroup }"
+        v-if="followedGroup"
+      >
+        <div style="color: #686868;">{{ textConfig.group }}</div>
+        <div
+          class="flex flex-(items-center justify-between)"
+          >
+          <span class="list-center ellipsis list-group-name">
+            {{ followedGroup }}
+          </span>
+          <span
+            class="flex-shrink-0 font-size-14px list-group-action"
+            @click="$emit('click', 'group')"
+          >
+            更改
+            <i class="el-icon-arrow-right"></i>
+          </span>
+        </div>
+      </li> -->
       <li v-if="showList">
         <div class="list-top" @click="$emit('click', 'list')">
           <span>{{ textConfig.list }}</span>
@@ -76,6 +97,10 @@ export default {
     textType: {
       type: String,
       default: 'unit'
+    },
+    followedGroup: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -99,6 +124,7 @@ export default {
         },
         ent: {
           tip: '关注企业一旦中标，会推送企业的中标项目、时间等公告信息。',
+          group: '当前分组',
           more: '查看监控动态',
           list: '查看监控列表',
           listNumTip: '已监控',
@@ -158,6 +184,12 @@ export default {
         background-color: #eaf8fa;
         border-radius: 4px;
       }
+      .list-group-name {
+        margin-right: 8px;
+      }
+      .list-group-action {
+        color: #2abed1;
+      }
     }
   }
 }

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

@@ -2,7 +2,9 @@
 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,
@@ -16,9 +18,17 @@ const props = defineProps({
   auto: {
     type: Boolean,
     default: true
+  },
+  // 留资来源
+  source: {
+    type: Object,
+    default: () => ({})
   }
 })
 
+const that = getCurrentInstance().proxy
+const groupId = ref('')
+
 const {
   // 基础展示信息
   model,
@@ -31,11 +41,16 @@ const {
   // dialog 提示弹窗
   dialogConfig,
   // 留资
-  collectElement
+  collectElement,
+  // 分组
+  groupList,
+  doChangeGroup,
+  doUpdateGroup
 } = useQuickMonitorModel({
   type: props.type,
   id: props.params,
-  cache: props.cache
+  cache: props.cache,
+  source: props.source
 })
 
 if (props.auto) {
@@ -46,6 +61,25 @@ 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)
+}
+
 defineExpose({
   model,
   getParams
@@ -88,7 +122,7 @@ defineExpose({
     <common-dialog
       center
       custom-class="monitor-class"
-      width="380px"
+      :width="dialogConfig.width || '380px'"
       :visible="dialogConfig.show"
       :title="dialogConfig.title"
     >
@@ -98,12 +132,23 @@ defineExpose({
           :key="index"
           class="action-button"
           :class="item.class"
+          :disabled="item.disabled"
           @click="doClickMonitorActions(item.action || 'doCloseDialog')"
         >
           {{ item.label }}
         </button>
       </template>
-      {{ dialogConfig.content }}
+      <!-- 选择监控分组 -->
+      <MonitorGroup
+        v-if="dialogConfig.template === 'group'"
+        :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>
@@ -130,6 +175,10 @@ defineExpose({
 ::v-deep {
   .monitor-class {
     padding: 32px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0px !important;
     .el-dialog__header {
       padding: 0;
     }
@@ -141,5 +190,9 @@ defineExpose({
       padding: 0;
     }
   }
+  .action-button.cancel[disabled] {
+    background-color: #e3e4e5;
+    color: #999999;
+  }
 }
 </style>

apps/bigmember_pc/src/composables/quick-monitor/use/base.js

@@ -63,32 +63,34 @@ export function useMonitorModel(
   { cache = false, stepTime = 500 } = {}
 ) {
   const useMonitor = useQuickMonitor({
-    type: type,
+    type,
     params: {
-      id: id
+      id
     }
   })
-  const { doFetch: doRunFetch, doChange } = useMonitor
+  const { doFetch: doRunFetch, doChange, doFetchGroup } = useMonitor
 
   function getId() {
     return useMonitor.id
   }
   const { model } = toRefs(reactive(useMonitor))
+  const { groupList } = toRefs(reactive(useMonitor))
 
   // 扩展支持缓存请求结果一定时间
   let lastTime = 0
   const doFetch = async () => {
     if (cache) {
-      let nowTime = Date.now()
+      const nowTime = Date.now()
       if (nowTime - lastTime > stepTime) {
         lastTime = nowTime
         return await doRunFetch()
-      } else {
+      }
+      else {
         return model.value
       }
     }
     return await doRunFetch()
   }
 
-  return { model, doChange, doFetch, getId }
+  return { model, doChange, doFetch, getId, doFetchGroup, groupList }
 }

apps/bigmember_pc/src/composables/quick-monitor/use/ent.js

@@ -1,6 +1,6 @@
-import { computed, ref, getCurrentInstance } from 'vue'
-import { useStore } from '@/store'
+import { computed, getCurrentInstance, ref } from 'vue'
 import { useMonitorModel, useMonitorTipDialog } from './base'
+import { useStore } from '@/store'
 import {
   doOpenPushSettingPage,
   doOpenWinnerListPage,
@@ -79,23 +79,42 @@ const DialogDataMap = {
       }
     ]
   },
-  'success-toast': '监控成功，您可前往“工作台-商机-企业情报监控”查看'
+  'success-toast': '监控成功，您可前往“工作台-商机-企业情报监控”查看',
+  'monitor-group': {
+    title: '选择分组',
+    width: '464px',
+    template: 'group',
+    footerActions: [
+      {
+        label: '确定',
+        class: 'confirm',
+        action: 'confirmChangeGroup'
+      },
+      {
+        label: '取消',
+        class: 'cancel',
+        action: ''
+      }
+    ]
+  }
 }
 
-function useEntQuickMonitorModel({ type, id }, options) {
+function useEntQuickMonitorModel({ type, id, source }, options) {
   const that = getCurrentInstance().proxy
   const collectElement = ref(null)
-  const { dialogConfig, doOpenDialog, doCloseDialog } =
-    useMonitorTipDialog(DialogDataMap)
+  // 当前选择的分组名称id
+  const checkedGroupId = ref('')
+  const { dialogConfig, doOpenDialog, doCloseDialog }
+    = useMonitorTipDialog(DialogDataMap)
   const IsFreeUser = computed(() => {
     const store = useStore()
     return store.getters['user/isFree']
   })
   const loading = ref(false)
-  const { model, doChange, doFetch, getId } = useMonitorModel(
-    { type, id },
-    options
-  )
+  const { model, doChange, doFetch, getId, doFetchGroup, groupList }
+    = useMonitorModel({ type, id }, options)
+  const { limit: limitSource, more: moreSource } = source
+
   const monitorPopoverConfig = computed(() => {
     return {
       showTip: !model.value.follow,
@@ -104,7 +123,8 @@ function useEntQuickMonitorModel({ type, id }, options) {
       showCancel: model.value.follow,
       alreadyNum: model.value.expands.used,
       remainNum: model.value.expands.surplus,
-      textType: type
+      textType: type,
+      followedGroup: model.value.followedGroup
     }
   })
 
@@ -118,6 +138,47 @@ function useEntQuickMonitorModel({ type, id }, options) {
     that?.contactCustomer(that)
   }
 
+  // 打开监控分组弹框（更改）
+  async function doOpenSelectGroup() {
+    // doOpenDialog('monitor-group')
+    await doFetchGroup({ type: 'get' }).then((res) => {
+      if (res.success) {
+        doOpenDialog('monitor-group', { groupList: res.data })
+      }
+      else {
+        if (res.data?.limit_count) {
+          if (IsFreeUser.value) {
+            return doOpenCollectDialog(limitSource || 'pc_article_ent_limit')
+          }
+          else {
+            return doOpenDialog('max-monitor', {
+              count: res.data?.limit_count
+            })
+          }
+        }
+      }
+    })
+  }
+
+  // 选择分组名称change事件
+  function doChangeGroup(groupId) {
+    checkedGroupId.value = groupId
+  }
+
+  // 新增、编辑分组
+  function doUpdateGroup(params) {
+    const { type, name, groupId } = params
+    const toastFn = () => {
+      if (type === 'add') {
+        that.$toast('新增分组成功')
+      }
+      else {
+        that.$toast('分组名称修改成功')
+      }
+    }
+    doFetchGroup({ type, name, groupId, callback: toastFn })
+  }
+
   /**
    * 监控操作业务流程
    * 0. 前置权益判断
@@ -136,36 +197,29 @@ function useEntQuickMonitorModel({ type, id }, options) {
    * @return {Promise<void>}
    */
   async function doAddFollow() {
-    if (loading.value) return
+    if (loading.value)
+      return
     loading.value = true
     // 业务流程
     if (!model.value.follow) {
-      await doChange()
-        .then((res) => {
-          if (res.success) {
-            // 判断是否开启推送提醒
-            if (!res.data?.msg_open) {
-              doOpenDialog('success-monitor')
-            } else {
-              that.$toast(DialogDataMap['success-toast'])
+      // 先弹出选择分组弹框
+      await doFetchGroup({ type: 'get' }).then((res) => {
+        if (res.success) {
+          doOpenDialog('monitor-group', { groupList: res.data })
+        }
+        else {
+          if (res.data?.limit_count) {
+            if (IsFreeUser.value) {
+              return doOpenCollectDialog(limitSource || 'pc_article_ent_limit')
             }
-          } else {
-            // 判断是否超出可监控项目个数
-            if (res.data?.limit_count) {
-              if (IsFreeUser.value) {
-                return doOpenCollectDialog('pc_article_ent_limit')
-              } else {
-                return doOpenDialog('max-monitor', {
-                  count: res.data?.limit_count
-                })
-              }
+            else {
+              return doOpenDialog('max-monitor', {
+                count: res.data?.limit_count
+              })
             }
-            that.$toast(res.msg)
           }
-        })
-        .finally(() => {
-          loading.value = false
-        })
+        }
+      })
     }
     loading.value = false
   }
@@ -174,6 +228,7 @@ function useEntQuickMonitorModel({ type, id }, options) {
    * 统一处理 dialog, popover emit 事件
    * @param {string} type
    *  // popover 事务
+   *  - group 当前分组
    *  - more 查看监控动态
    *  - list 查看监控列表
    *  - apply 申请监控更多
@@ -210,8 +265,9 @@ function useEntQuickMonitorModel({ type, id }, options) {
         break
       case 'apply':
         if (IsFreeUser.value) {
-          doOpenCollectDialog('pc_article_ent_more')
-        } else {
+          doOpenCollectDialog(moreSource || 'pc_article_ent_more')
+        }
+        else {
           doOpenDialog('apply-monitor')
         }
         break
@@ -226,6 +282,46 @@ function useEntQuickMonitorModel({ type, id }, options) {
       case 'list':
         doOpenWinnerListPage()
         break
+      case 'group':
+        doOpenSelectGroup()
+        break
+      case 'confirmChangeGroup':
+        if (loading.value)
+          return
+        loading.value = true
+        doChange(false, { groupId: checkedGroupId.value })
+          .then((res) => {
+            if (res.success) {
+              doCloseDialog()
+              // 关注成功，重新获取监控数据
+              doFetch()
+              // 判断是否开启推送提醒
+              if (!res.data?.msg_open) {
+                doOpenDialog('success-monitor')
+              }
+              else {
+                that.$toast(DialogDataMap['success-toast'])
+              }
+            }
+            else {
+              // 判断是否超出可监控项目个数
+              if (res.data?.limit_count) {
+                if (IsFreeUser.value) {
+                  return doOpenCollectDialog('pc_article_ent_limit')
+                }
+                else {
+                  return doOpenDialog('max-monitor', {
+                    count: res.data?.limit_count
+                  })
+                }
+              }
+              that.$toast(res.msg)
+            }
+          })
+          .finally(() => {
+            loading.value = false
+          })
+        break
       default:
         break
     }
@@ -243,7 +339,12 @@ function useEntQuickMonitorModel({ type, id }, options) {
     // dialog 提示弹窗
     dialogConfig,
     // 留资
-    collectElement
+    collectElement,
+    // 获取（新增、编辑、删除）分组
+    doFetchGroup,
+    groupList,
+    doChangeGroup,
+    doUpdateGroup
   }
 }
 

apps/bigmember_pc/src/views/portrayal/components/EntFollowStar.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="ent-follow-container" v-show="followCheck.isShow">
-    <div class="ent-follow" @click="setFollow()">
+    <quick-monitor
+      class="action-item"
+      :cache="true"
+      type="ent"
+      :params="id"
+      :source="sourceMap"
+    ></quick-monitor>
+    <!-- <div class="ent-follow" @click="setFollow()">
       <span class="iconfont" :class="follow.classActive"></span>
       <span class="follow_text">{{ follow.text }}</span>
-    </div>
+    </div> -->
     <!-- 监控分组选择dialog -->
     <el-dialog
       custom-class="sub-dialog"
@@ -26,12 +33,14 @@
 <script>
 import { getfollowCheck, setCancelEnt, setFollowEnt } from '@/api/modules'
 import GroupSelector from '@/components/selector/GroupSelector.vue'
+import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
 import { Dialog } from 'element-ui'
 export default {
   name: 'EntFollowStar',
   components: {
     [Dialog.name]: Dialog,
-    GroupSelector
+    GroupSelector,
+    QuickMonitor
   },
   props: {
     id: {
@@ -57,6 +66,10 @@ export default {
         groupInitData: ['A'],
         dialog: false,
         loading: false
+      },
+      sourceMap: {
+        limit: 'pc_ent_limit',
+        more: 'pc_ent_more'
       }
     }
   },
@@ -140,13 +153,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .sub-dialog {
-  background-color: transparent;
-  box-shadow: none;
+::v-deep {
+  .sub-dialog {
+    background-color: transparent;
+    box-shadow: none;
 
-  .el-dialog__header,
-  .el-dialog__body {
-    padding: 0;
+    .el-dialog__header,
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  .group-dialog {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0px !important;
+    border-radius: 8px;
+    .el-dialog__header {
+      padding: 32px 32px 20px;
+    }
+    .el-dialog__body {
+      padding: 0 32px;
+    }
+    .el-dialog__footer {
+      padding: 32px 0;
+      .el-button {
+        width: 132px;
+        height: 36px;
+        padding: 0;
+        border-radius: 6px;
+        font-size: 16px;
+        &.el-button--primary {
+          margin-right: 52px;
+          &.is-disabled {
+            background-color: #87dfea;
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+        &.el-button--default {
+          &:hover {
+            background: transparent;
+            border-color: #e0e0e0;
+          }
+          color: #1d1d1d;
+          &.is-disabled {
+            background-color: #e3e4e5;
+            color: #999999;
+          }
+        }
+      }
+    }
+  }
+  .quick-monitor-popover {
+    .action-icon > span {
+      font-size: 13px;
+      color: #686868;
+    }
   }
 }
 .ent-follow {