线索

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px" style="height: 90vh">
     <el-tabs v-model="tabName">
       <el-tab-pane label="线索信息" name="info">
         <Form

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

@@ -28,6 +28,12 @@
         </el-collapse>
       </div>
     </div>
+    <template #footer>
+      <span>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
@@ -256,6 +262,11 @@ const activeQues = ref('')
 function filterList() {
   showList.value = resultList.filter((it) => it.question.includes(keyword.value))
 }
+
+function handleSave() {
+  console.log('保存成功')
+  dialogVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="成交登记" v-model="show" width="800px">
+  <el-dialog title="成交登记" v-model="show" width="800px" style="height: 90vh">
     <Descriptions :data="info" :schema="schema" :columns="2" />
     <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" class="mt-20px">
       <el-row :gutter="20">

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

@@ -8,6 +8,7 @@
     :destroy-on-close="true"
     :show-close="true"
     :wrapperClosable="true"
+    @close="destroyMap"
   >
     <!-- header -->
     <el-skeleton :loading="loading" animated>
@@ -51,7 +52,7 @@
                     <el-button type="danger" plain>删除</el-button>
                   </div>
                 </div>
-                <div v-dompurify-html="followContent"></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" />
@@ -78,7 +79,7 @@
                     <el-button type="danger" plain>删除</el-button>
                   </div>
                 </div>
-                <div key="followContent" v-dompurify-html="followContent2"></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" />
@@ -95,22 +96,11 @@
         </el-timeline>
       </el-tab-pane>
       <el-tab-pane label="详细信息" name="infoDetail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item min-width="150px" label="线索名称">{{
-            info.name
-          }}</el-descriptions-item>
-          <el-descriptions-item min-width="150px" label="联系方式"
-            >18888888888</el-descriptions-item
-          >
-          <el-descriptions-item min-width="150px" label="线索来源">驾考宝典</el-descriptions-item>
-          <el-descriptions-item min-width="150px" label="意向状态">高意向</el-descriptions-item>
-          <el-descriptions-item min-width="150px" :span="2" label="诉求"
-            >这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容这是诉求内容</el-descriptions-item
-          >
-          <el-descriptions-item min-width="150px" :span="2" label="备注"
-            >这是备注内容</el-descriptions-item
-          >
-        </el-descriptions>
+        <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>
@@ -188,10 +178,42 @@
 
 <script setup>
 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 = `<p style="color: red;">这是本次跟进的内容。</p><br/><p>我还能放图片，但需要你自己排版：</p><br/><img style="width: 200px;" src="https://q6.itc.cn/images01/20240407/0e6be21aebc847648109304f20370790.jpeg">`
 
 const followContent2 = `<p style="color: red;">这是本次跟进的内容。</p>`
@@ -211,9 +233,65 @@ const followList = ref([
   }
 ])
 
+// 地图相关
+const dialogMap = ref(null)
+const aMap = ref(null)
+
 function open(row) {
   info.value = row
   show.value = true
+  if (!dialogMap.value) {
+    nextTick(() => {
+      initMap()
+    })
+  }
+}
+
+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')
@@ -229,6 +307,11 @@ function addFollow() {
 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>

src/views/Clue/Pool/Comp/follow.data.js

@@ -18,7 +18,7 @@ const crudSchemas = reactive([
         type: 'datetime',
         format: 'YYYY-MM-DD HH:mm',
         valueFormat: 'YYYY-MM-DD HH:mm',
-        placeholder: '创建时间'
+        placeholder: '本次跟进时间'
       }
     }
   },
@@ -45,7 +45,11 @@ const crudSchemas = reactive([
     field: 'remark',
     isTable: true,
     form: {
-      component: 'Editor',
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        autosize: { minRows: 5, maxRows: 10 }
+      },
       colProps: {
         span: 24
       }

src/views/Clue/Pool/cluePool.data.js

@@ -28,6 +28,12 @@ const crudSchemas = reactive([
     isSearch: true,
     isTable: true
   },
+  {
+    label: '线索位置',
+    field: 'address',
+    isSearch: true,
+    isTable: true
+  },
   {
     label: '线索来源',
     field: 'resource',
@@ -183,6 +189,11 @@ const crudSchemas = reactive([
         placeholder: '创建时间'
       }
     }
+  },
+  {
+    label: '跟进记录',
+    field: 'followRecord',
+    isTable: true
   }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)

src/views/Clue/Pool/index.vue

@@ -31,7 +31,7 @@
       </el-tabs>
       <div class="absolute" style="right: 10px; top: 0">
         <el-button plain>导入</el-button>
-        <el-button type="primary" @click="handleInsert">新增</el-button>
+        <el-button type="primary" @click="handleInsert">新增线索</el-button>
       </div>
     </div>
     <!-- 搜索工作栏 -->
@@ -47,14 +47,28 @@
       v-model:tableObject="tableObject"
       :tableColumns="allSchemas.tableColumns"
       @get-list="getTableList"
+      @get-checked-columns="getCheckedColumns"
     >
       <el-table-column
-        v-for="item in allSchemas.tableColumns"
+        v-for="item in showColumns"
         :key="item.field"
         :prop="item.field"
         :label="item.label"
         min-width="120px"
-      />
+      >
+        <template #default="{ row }">
+          <div v-if="item.field == 'followRecord'">
+            <el-button type="primary" text style="padding: 0" @click="handleFollow(row)"
+              >快速新增</el-button
+            >
+          </div>
+          <div v-else-if="item.field == 'contact'">
+            <span>{{ row[item.field] }}</span>
+            <Icon class="ml-5px" icon="ep:phone" @click="makeCall(row.contact)" />
+          </div>
+          <span v-else>{{ row[item.field] }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="200px" fixed="right">
         <template #default="scope">
           <el-button type="primary" link @click="handleDetail(scope.row)">详情</el-button>
@@ -68,6 +82,7 @@
     <DialogClue ref="formRef" />
     <DrawerClue ref="drawerRef" />
     <DialogSuccess ref="successRef" />
+    <DialogFollow ref="followRef" />
   </div>
 </template>
 
@@ -76,6 +91,7 @@ import { allSchemas } from './cluePool.data'
 import DialogClue from './Comp/DialogClue.vue'
 import DrawerClue from './Comp/DrawerClue.vue'
 import DialogSuccess from './Comp/DialogSuccess.vue'
+import DialogFollow from './Comp/DialogFollow.vue'
 
 const searchForm = ref({
   mode: '2'
@@ -83,6 +99,7 @@ const searchForm = ref({
 const formRef = ref()
 const drawerRef = ref()
 const successRef = ref()
+const followRef = ref()
 
 // const { tableObject, tableMethods } = useTable({
 //   getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
@@ -90,12 +107,20 @@ const successRef = ref()
 // })
 
 const tableObject = ref({
-  tableList: [{ name: '测试', contact: '18888888888' }],
+  tableList: [{ name: '测试', contact: '17318531354' }],
   loading: false,
   total: 1,
   pageSize: 20,
   currentPage: 1
 })
+
+const showColumns = ref([])
+
+// 初始化表格
+function getCheckedColumns(list) {
+  showColumns.value = list
+}
+
 const setSearchParams = function () {
   // 方法体
 }
@@ -117,6 +142,14 @@ function handleDetail(row) {
   drawerRef.value.open(row)
 }
 
+function handleFollow(row) {
+  followRef.value.open('create', row)
+}
+
+async function makeCall(phone) {
+  console.log('打电话:' + phone)
+}
+
 // 登记
 function handleSuccess(row) {
   successRef.value.open(row)