上传

src/views/Clue/Pool/Comp/DrawerClue.vue

@@ -39,55 +39,26 @@
       <el-tab-pane label="跟进记录" name="followRecord">
         <el-button class="mb-10px" type="primary" @click="addFollow">添加跟进记录</el-button>
         <el-timeline>
-          <el-timeline-item timestamp="2024-04-01" placement="top">
+          <el-timeline-item
+            v-for="item in followRecordList"
+            :key="item.recordId"
+            :timestamp="item.operateDate"
+            placement="top"
+          >
             <el-card shadow="always" :body-style="{ padding: '10px' }">
               <div>
-                <div class="flex justify-between" style="align-items: center">
-                  <div class="flex align-baseline">
-                    <b class="text-18px">张三</b>
-                    <span class="text-14 ml-10px">2024-04-01 09:00:00</span>
-                  </div>
-                  <div>
-                    <el-button type="primary" plain @click="updateFollow()">修改</el-button>
-                    <el-button type="danger" plain>删除</el-button>
-                  </div>
+                <div>
+                  <b class="text-18px" style="line-height: 36px">{{ item.operateUserName }}</b>
                 </div>
-                <div>{{ followContent }}</div>
+                <div>{{ item.centent }}</div>
                 <div class="flex mt-10px" style="align-items: center">
                   <div class="flex" style="color: #666; align-items: center">
                     <Icon icon="ep:clock" class="mr-5px" />
-                    <span>本次跟进时间：2024-04-05 10:57</span>
+                    <span>本次跟进时间：{{ item.followTime }}</span>
                   </div>
                   <div class="flex ml-50px" style="color: #666; align-items: center">
                     <Icon icon="ep:clock" class="mr-5px" />
-                    <span>下次跟进时间：2024-04-10 10:00</span>
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item timestamp="2024-02-01" placement="top">
-            <el-card shadow="always" :body-style="{ padding: '10px' }">
-              <div>
-                <div class="flex justify-between" style="align-items: center">
-                  <div class="flex align-baseline">
-                    <b class="text-18px">李四</b>
-                    <span class="text-14 ml-10px">2024-02-01 09:00:00</span>
-                  </div>
-                  <div>
-                    <el-button type="primary" plain>修改</el-button>
-                    <el-button type="danger" plain>删除</el-button>
-                  </div>
-                </div>
-                <div>{{ followContent2 }}</div>
-                <div class="flex mt-10px" style="align-items: center">
-                  <div class="flex" style="color: #666; align-items: center">
-                    <Icon icon="ep:clock" class="mr-5px" />
-                    <span>本次跟进时间：2024-02-05 10:57</span>
-                  </div>
-                  <div class="flex ml-50px" style="color: #666; align-items: center">
-                    <Icon icon="ep:clock" class="mr-5px" />
-                    <span>下次跟进时间：2024-02-10 10:00</span>
+                    <span>下次跟进时间：{{ item.nextFollowTime }}</span>
                   </div>
                 </div>
               </div>
@@ -96,74 +67,33 @@
         </el-timeline>
       </el-tab-pane>
       <el-tab-pane label="详细信息" name="infoDetail">
-        <Descriptions :data="info" :schema="schema" :columns="2" />
-        <el-checkbox v-model="showSchool" :label="true" @change="handleShowSchool"
-          >展示场地</el-checkbox
-        >
-        <div id="dialogMap" class="mt-20px" style="height: 400px; width: 100%"></div>
+        <Descriptions :data="info" :schema="showSchema" :columns="2" />
+        <div v-if="appStore.getAppInfo?.instanceType == 1">
+          <el-checkbox v-model="showSchool" :label="true" @change="handleShowSchool">
+            展示场地
+          </el-checkbox>
+          <div id="dialogMap" class="mt-20px" style="height: 400px; width: 100%"></div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="操作记录" name="operateRecord">
         <el-timeline>
-          <el-timeline-item timestamp="2024-04-01" placement="top">
+          <el-timeline-item
+            v-for="item in operateRecordList"
+            :key="item.recordId"
+            :timestamp="item.operateDate"
+            placement="top"
+          >
             <el-card shadow="always" :body-style="{ padding: '10px' }">
               <div style="color: #666">
                 <div class="pt-5px">
-                  <span>操作人：机器人1号</span>
+                  <span>操作人：{{ item.operateUserName }}</span>
                 </div>
                 <div class="pt-5px pb-5px">
-                  <span>成交线索</span>
+                  <span>{{ item.centent }}</span>
                 </div>
                 <div class="flex" style="align-items: center">
                   <Icon icon="ep:clock" class="mr-5px" />
-                  <span>操作时间：2024-04-05 10:57</span>
-                </div>
-              </div>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item timestamp="2024-02-01" placement="top">
-            <el-card shadow="always" :body-style="{ padding: '10px' }">
-              <div style="color: #666">
-                <div class="pt-5px">
-                  <span>操作人：机器人2号</span>
-                </div>
-                <div class="pt-5px pb-5px">
-                  <span>修改意向状态为：高意向</span>
-                </div>
-                <div class="flex" style="align-items: center">
-                  <Icon icon="ep:clock" class="mr-5px" />
-                  <span>操作时间：2024-04-1 10:57</span>
-                </div>
-              </div>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item timestamp="2024-02-01" placement="top">
-            <el-card shadow="always" :body-style="{ padding: '10px' }">
-              <div style="color: #666">
-                <div class="pt-5px">
-                  <span>操作人：机器人1号</span>
-                </div>
-                <div class="pt-5px pb-5px">
-                  <span>跟进线索</span>
-                </div>
-                <div class="flex" style="align-items: center">
-                  <Icon icon="ep:clock" class="mr-5px" />
-                  <span>操作时间：2024-04-1 10:57</span>
-                </div>
-              </div>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item timestamp="2024-02-01" placement="top">
-            <el-card shadow="always" :body-style="{ padding: '10px' }">
-              <div style="color: #666">
-                <div class="pt-5px">
-                  <span>操作人：机器人2号</span>
-                </div>
-                <div class="pt-5px pb-5px">
-                  <span>创建线索</span>
-                </div>
-                <div class="flex" style="align-items: center">
-                  <Icon icon="ep:clock" class="mr-5px" />
-                  <span>操作时间：2024-04-1 10:57</span>
+                  <span>操作时间：{{ item.followTime }}</span>
                 </div>
               </div>
             </el-card>
@@ -177,47 +107,50 @@
 </template>
 
 <script setup>
+import { useAppStore } from '@/store/modules/app'
 import * as ClueApi from '@/api/clue'
+import * as FollowApi from '@/api/clue/followRecord'
+import { getPlaceList } from '@/api/school/place'
+
 import DialogFollow from './DialogFollow.vue'
-import ImgFlag from '@/assets/imgs/flag/position_blue.png'
 import AMapLoader from '@amap/amap-jsapi-loader'
+import { formatDate } from '@/utils/formatTime'
+
+import ImgPostion from '@/assets/imgs/flag/position_blue.png'
+import FlagRed from '@/assets/imgs/flag/flag_red.png'
+import FlagYellow from '@/assets/imgs/flag/flag_yellow.png'
+import FlagPurple from '@/assets/imgs/flag/flag_purple.png'
+import FlagGreen from '@/assets/imgs/flag/flag_green.png'
+import FlagBlue from '@/assets/imgs/flag/flag_blue.png'
+import FlagBlack from '@/assets/imgs/flag/flag_black.png'
+
+const appStore = useAppStore()
+
 const show = ref(false)
 const info = ref(null)
 const loading = ref(false)
 
-const schema = ref([
-  {
-    field: 'name',
-    label: '线索名称'
-  },
-  {
-    field: 'contact',
-    label: '联系方式'
-  },
-  {
-    field: 'supplier',
-    label: '意向状态'
-  },
-  {
-    field: 'supplier',
-    label: '创建时间'
-  },
-  {
-    field: 'purchaseCount',
-    label: '诉求',
-    span: 2
-  },
-  {
-    field: 'remark',
-    label: '备注',
-    isEditor: true,
-    span: 2
+const props = defineProps({
+  schema: {
+    type: Array
   }
-])
+})
 
-const followContent = ``
-
-const followContent2 = ``
+const showSchema = computed(() => {
+  const arr = [
+    {
+      field: 'requirement',
+      label: '诉求',
+      span: 2
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      span: 2
+    }
+  ]
+  return [...props.schema, ...arr]
+})
 
 const followList = ref([
   {
@@ -234,17 +167,41 @@ const followList = ref([
   }
 ])
 
+const followRecordList = ref([])
+const operateRecordList = ref([])
+
 // 地图相关
 const dialogMap = ref(null)
 const aMap = ref(null)
 
 async function open(id) {
   try {
-    info.value = await ClueApi.getClue(id)
+    FollowApi.getFollowList({ clueId: id }).then((data) => {
+      followRecordList.value = data.map((item) => ({
+        operateUserName: item.operateUserName,
+        centent: item.centent,
+        operateDate: formatDate(item.operateTime),
+        followTime: formatDate(item.operateTime, 'YYYY-MM-DD HH:mm'),
+        nextFollowTime: formatDate(item.nextFollowTime)
+      }))
+    })
+    ClueApi.getOpearateRecord({ clueId: id }).then((data) => {
+      operateRecordList.value = data.map((item) => ({
+        operateUserName: item.operateUserName,
+        centent: item.centent,
+        operateDate: formatDate(item.operateTime),
+        followTime: formatDate(item.operateTime, 'YYYY-MM-DD HH:mm')
+      }))
+    })
+    const data = await ClueApi.getClue(id)
+    info.value = { ...data, ...data.diyParams }
     show.value = true
-    if (!dialogMap.value) {
+    infoIndex.value = 'followRecord'
+
+    if (appStore.getAppInfo?.instanceType == 1 && !dialogMap.value) {
       nextTick(() => {
-        initMap()
+        getSchoolPlace()
+        initMap(info.value)
       })
     }
   } catch (error) {
@@ -252,53 +209,89 @@ async function open(id) {
   }
 }
 
-function initMap() {
+const placeList = ref([])
+function getSchoolPlace() {
+  getPlaceList().then((data) => {
+    placeList.value = data.placeList
+  })
+}
+
+const defaultLatLng = ref({
+  lat: 31.86119,
+  lng: 117.283042
+})
+
+function initMap(data) {
   AMapLoader.load({
     key: '2ffb0e2ea90b1df0b8be48ed66e18fc8', //设置您的key
     version: '2.0'
   }).then((AMap) => {
     aMap.value = AMap
+    if (data.lng || data.lat) {
+      defaultLatLng.value = {
+        lng: data.lng,
+        lat: data.lat
+      }
+    }
     dialogMap.value = new AMap.Map('dialogMap', {
       zoom: 12,
       zooms: [2, 22],
-      center: [117.283042, 31.86119]
+      center: [defaultLatLng.value.lng, defaultLatLng.value.lat]
     })
+    if (data.lng || data.lat) {
+      addmark(data.lng, data.lat, AMap)
+    }
   })
 }
 
 const showSchool = ref(false)
 const schoolMarkers = ref([])
-
 function handleShowSchool() {
   if (showSchool.value) {
-    let marker1 = new aMap.value.Marker({
-      map: dialogMap.value,
-      position: [117.258001, 31.895216],
-      label: {
-        content: '慧安驾校桃花社区训练基地',
-        direction: 'left'
-      },
-      icon: ImgFlag,
-      // extData: element,
-      clickable: true
-    })
-    let marker2 = new aMap.value.Marker({
-      map: dialogMap.value,
-      position: [117.286731, 31.902396],
-      label: {
-        content: '（皖西）瑞星驾校总校（D）',
-        direction: 'left'
-      },
-      icon: ImgFlag,
-      // extData: element,
-      clickable: true
-    })
-    schoolMarkers.value = [marker1, marker2]
+    const flagMap = {
+      red: FlagRed,
+      yellow: FlagYellow,
+      purple: FlagPurple,
+      green: FlagGreen,
+      blue: FlagBlue,
+      black: FlagBlack
+    }
+    schoolMarkers.value = []
+    for (let i = 0; i < placeList.value.length; i++) {
+      const place = placeList.value[i]
+      const marker = new aMap.value.Marker({
+        map: dialogMap.value,
+        position: [place.lng, place.lat],
+        label: {
+          content: place.name,
+          direction: 'left'
+        },
+        icon: flagMap[place.flagColor || 'red'],
+        extData: place,
+        clickable: true
+      })
+      schoolMarkers.value.push(marker)
+    }
   } else {
     dialogMap.value.remove(schoolMarkers.value)
   }
 }
 
+let marker = ref(null)
+function addmark(lat, lng, AMap) {
+  marker.value && removeMarker()
+  marker.value = new AMap.Marker({
+    position: new AMap.LngLat(lat, lng),
+    zoom: 13,
+    icon: ImgPostion
+  })
+  dialogMap.value.add(marker.value)
+  dialogMap.value.setCenter([lat, lng], '', 500)
+}
+function removeMarker() {
+  dialogMap.value.remove(marker.value)
+}
+
 const infoIndex = ref('followRecord')
 
 defineExpose({
@@ -309,9 +302,6 @@ const followRef = ref()
 function addFollow() {
   followRef.value.open('create', null)
 }
-function updateFollow() {
-  followRef.value.open('update', { nextFollowTime: '2024-04-01 12:12' })
-}
 
 function destroyMap() {
   dialogMap.value = null