ss-crm-manage-web/src/views/Clue/Pool/Comp/DrawerClue.vue

<template>
  <el-drawer
    v-model="show"
    direction="rtl"
    size="60%"
    style="min-width: 700px"
    :with-header="false"
    :destroy-on-close="true"
    :show-close="true"
    :wrapperClosable="true"
    @close="destroyMap"
  >
    <!-- header -->
    <el-skeleton :loading="loading" animated>
      <div class="flex justify-between" style="height: 32px">
        <div class="flex" style="align-items: center">
          <b class="mr-5px text-24px">{{ info.name }}</b>
          <div class="mr-5px text-16px">{{ info.phone }}</div>
          <el-tag type="success">{{ info.intentionState }}</el-tag>
        </div>
        <div>
          <el-button type="primary" plain>修改</el-button>
          <el-button type="danger" plain>删除</el-button>
        </div>
      </div>
    </el-skeleton>
    <!-- 基础信息 -->
    <el-skeleton :loading="loading" animated>
      <el-table :data="followList" size="small" border class="mt-10px">
        <el-table-column prop="name" label="跟进人" />
        <el-table-column prop="latestFollowTime" label="最新跟进时间" />
        <el-table-column prop="nextFollowTime" label="下次跟进时间" />
        <el-table-column prop="saleStatus" label="成交状态" />
      </el-table>
    </el-skeleton>
    <el-divider direction="horizontal" />
    <!-- 详细信息 -->
    <el-tabs v-model="infoIndex" type="border-card">
      <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-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>
                <div>{{ followContent }}</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>
                  </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>
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </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>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="operateRecord">
        <el-timeline>
          <el-timeline-item timestamp="2024-04-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-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>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
    <!-- 新建编辑跟进信息 -->
    <DialogFollow ref="followRef" />
  </el-drawer>
</template>

<script setup>
import * as ClueApi from '@/api/clue'
import DialogFollow from './DialogFollow.vue'
import ImgFlag from '@/assets/imgs/flag/position_blue.png'
import AMapLoader from '@amap/amap-jsapi-loader'
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 followContent = ``

const followContent2 = ``

const followList = ref([
  {
    name: '李四',
    latestFollowTime: '2024-02-01',
    nextFollowTime: '2024-04-01',
    saleStatus: '未成交'
  },
  {
    name: '王二',
    latestFollowTime: '2024-03-01',
    nextFollowTime: '2024-04-11',
    saleStatus: '已成交'
  }
])

// 地图相关
const dialogMap = ref(null)
const aMap = ref(null)

async function open(id) {
  try {
    info.value = await ClueApi.getClue(id)
    show.value = true
    if (!dialogMap.value) {
      nextTick(() => {
        initMap()
      })
    }
  } catch (error) {
    console.log(error)
  }
}

function initMap() {
  AMapLoader.load({
    key: '2ffb0e2ea90b1df0b8be48ed66e18fc8', //设置您的key
    version: '2.0'
  }).then((AMap) => {
    aMap.value = AMap
    dialogMap.value = new AMap.Map('dialogMap', {
      zoom: 12,
      zooms: [2, 22],
      center: [117.283042, 31.86119]
    })
  })
}

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]
  } else {
    dialogMap.value.remove(schoolMarkers.value)
  }
}

const infoIndex = ref('followRecord')

defineExpose({
  open
})

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
  aMap.value = null
}
</script>

<style lang="scss" scoped></style>