feat: 增加查看事件详情

src/modules/home/api.ts

@@ -13,4 +13,9 @@ export function getMembersList() {
 // 事件
 export function getEventList(params: { member_id: string }) {
   return httpRequest.get('/api/lab/v1/experiment/index/events', { params })
-}
+}
\ No newline at end of file
+
+// 事件属性列表
+export function getMetaEventList() {
+  return httpRequest.get('/api/lab/v1/experiment/member/events')
+}

src/modules/home/components/ViewEvent.vue

+<script setup lang="ts">
+import { getMetaEventList } from '../api'
+const props = defineProps<{ event: any; user: any }>()
+
+const metaEventList = ref([])
+async function fetchMetaEventList() {
+  const res = await getMetaEventList()
+  metaEventList.value = res.data
+}
+onMounted(fetchMetaEventList)
+
+const currentMetaEvent = computed<any>(() => {
+  return metaEventList.value.find((item: any) => item.id === props.event.experiment_meta_event_id)
+})
+
+const fields = computed(() => {
+  try {
+    return JSON.parse(props.event.fields)
+  } catch (error) {
+    console.error(error)
+    return {}
+  }
+})
+
+const fieldList = computed(() => {
+  return Object.keys(fields.value).map((id: string) => {
+    const label = currentMetaEvent.value?.attributes?.find((item: any) => item.id === id)?.name || ''
+    return { id, value: fields.value[id], label }
+  })
+})
+</script>
+
+<template>
+  <el-dialog title="事件详情" width="500">
+    <el-descriptions :column="2">
+      <el-descriptions-item label="姓名:">{{ user.name }}</el-descriptions-item>
+      <el-descriptions-item label="来源链接:">{{ event.connection_name }}</el-descriptions-item>
+      <el-descriptions-item label="事件名称:" :span="2">{{ event.event_name }}</el-descriptions-item>
+      <el-descriptions-item :label="item.label + ':'" :span="2" v-for="item in fieldList" :key="item.id">
+        {{ item.value }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>

src/modules/home/views/Index.vue

@@ -2,6 +2,7 @@
 import { getExperimentData, getMembersList, getEventList } from '../api'
 import Icon from '@/components/ConnectionIcon.vue'
 // import { useMapStore } from '@/stores/map'
+const ViewEvent = defineAsyncComponent(() => import('../components/ViewEvent.vue'))
 
 // 左边展示数据
 let leftData = $ref<{
@@ -52,32 +53,42 @@ const getDate = function (date: string) {
 // const getIcon = function (id: any) {
 //   return experimentTypeList.find((item: any) => item.id === id)?.value as string
 // }
+const currentUser = computed(() => {
+  return userList?.find(item => item.isActive)
+})
+
+const viewEventVisible = ref(false)
+const currentViewEvent = ref()
+function handleViewEvent(item: any) {
+  viewEventVisible.value = true
+  currentViewEvent.value = item
+}
 </script>
 
 <template>
   <div class="home">
     <div class="home-left_content">
       <div class="content-card">
-        <AppCard class="card" title="我的客户："
-          ><p>{{ leftData?.members }}</p></AppCard
-        >
-        <AppCard class="card" style="margin: 0 10px" title="我的标签："
-          ><p>{{ leftData?.tags }}</p></AppCard
-        >
-        <AppCard class="card" title="我的群组："
-          ><p>{{ leftData?.groups }}</p></AppCard
-        >
+        <AppCard class="card" title="我的客户：">
+          <p>{{ leftData?.members }}</p>
+        </AppCard>
+        <AppCard class="card" title="我的标签：">
+          <p>{{ leftData?.tags }}</p>
+        </AppCard>
+        <AppCard class="card" title="我的群组：">
+          <p>{{ leftData?.groups }}</p>
+        </AppCard>
       </div>
       <div class="content-card">
-        <AppCard class="card" title="我的营销资料："
-          ><p>{{ leftData?.files }}</p></AppCard
-        >
-        <AppCard class="card" style="margin: 0 10px" title="我的旅程："
-          ><p>{{ leftData?.itineraries }}</p></AppCard
-        >
-        <AppCard class="card" title="我的链接："
-          ><p>{{ leftData?.connections }}</p></AppCard
-        >
+        <AppCard class="card" title="我的营销资料：">
+          <p>{{ leftData?.files }}</p>
+        </AppCard>
+        <AppCard class="card" title="我的旅程：">
+          <p>{{ leftData?.itineraries }}</p>
+        </AppCard>
+        <AppCard class="card" title="我的链接：">
+          <p>{{ leftData?.connections }}</p>
+        </AppCard>
       </div>
       <AppCard title="当前用户旅程模板数量："><el-empty :image-size="120" /></AppCard>
       <AppCard title="旅程转化目标分析："><el-empty :image-size="120" /></AppCard>
@@ -88,21 +99,19 @@ const getDate = function (date: string) {
           <div
             :class="item.isActive ? 'content-user_item active' : 'content-user_item'"
             v-for="item in userList"
-            @click="handleUser(item)"
-          >
+            :key="item.id"
+            @click="handleUser(item)">
             <img
               :src="
-                item?.gender === '1'
+                item.gender === '1'
                   ? 'https://webapp-pub.ezijing.com/pages/assa/dml_boy.png'
                   : 'https://webapp-pub.ezijing.com/pages/assa/dml_girl.png'
-              "
-              alt=""
-            />
+              " />
             <div class="name">{{ item.name }}</div>
           </div>
         </div>
         <el-empty v-if="!eventData?.list || !eventData?.list.length" description="暂无数据" :image-size="80" />
-        <div class="event-box" v-for="item in eventData?.list" v-else>
+        <div class="event-box" v-for="item in eventData?.list" :key="item.id" v-else>
           <div class="date">{{ item.updated_time?.slice(0, item.updated_time.indexOf(' ')) }}</div>
           <div class="event-content">
             <div class="time">
@@ -113,13 +122,20 @@ const getDate = function (date: string) {
             <div class="event">
               <Icon class="icon" :name="item.connection_type" :multicolour="true" w="24" h="24"></Icon>
               在
-              <span>"{{ item.connection_name }}"</span> 上 <span>"{{ item.event_name }}"</span>
+              <span>"{{ item.connection_name }}"</span> 上
+              <span style="cursor: pointer" @click="handleViewEvent(item)">"{{ item.event_name }}"</span>
             </div>
           </div>
         </div>
       </AppCard>
     </div>
   </div>
+  <!-- 事件详情 -->
+  <ViewEvent
+    v-model="viewEventVisible"
+    :event="currentViewEvent"
+    :user="currentUser"
+    v-if="viewEventVisible && currentViewEvent"></ViewEvent>
 </template>
 
 <style lang="scss" scoped>
@@ -130,6 +146,7 @@ const getDate = function (date: string) {
     .content-card {
       display: flex;
       margin-bottom: 10px;
+      gap: 10px;
       .card {
         flex: 1;
         margin: 0;