上传

src/views/Clue/Pool/index.vue

@@ -1,30 +1,33 @@
 <template>
   <div>
     <div class="relative">
-      <el-tabs v-model="searchForm.mode" size="small">
+      <el-tabs v-model="queryType" size="small">
         <el-tab-pane label="全部" name="0" />
         <el-tab-pane name="1">
           <template #label>
             <Tooltip message="除了无效线索和已成交的线索" />
-            <el-badge :value="123" :max="9999">
+            <el-badge v-if="clueCount.unSignNum" :value="clueCount.unSignNum" :max="9999">
               <span class="ml-3px">未成交</span>
             </el-badge>
+            <span v-else class="ml-3px">未成交</span>
           </template>
         </el-tab-pane>
         <el-tab-pane name="2">
           <template #label>
             <Tooltip message="下次跟进时间在今日之前的未成交线索" />
-            <el-badge :value="234" :max="9999">
+            <el-badge v-if="clueCount.followNum" :value="clueCount.followNum" :max="9999">
               <span class="ml-3px">待跟进</span>
             </el-badge>
+            <span v-else class="ml-3px">待跟进</span>
           </template>
         </el-tab-pane>
         <el-tab-pane name="3">
           <template #label>
             <Tooltip message="只有创建时间，无下次跟进时间的未成交线索" />
-            <el-badge :value="423" :max="9999">
+            <el-badge v-if="clueCount.newNum" :value="clueCount.newNum" :max="9999">
               <span class="ml-3px">新线索</span>
             </el-badge>
+            <span v-else class="ml-3px">新线索</span>
           </template>
         </el-tab-pane>
         <el-tab-pane label="公海" name="4" />
@@ -37,7 +40,7 @@
       </div>
     </div>
     <!-- 搜索工作栏 -->
-    <Search :schema="allSchemas.searchSchema" labelWidth="0">
+    <Search v-if="!loading" ref="searchRef" :schema="allSchemas.searchSchema" labelWidth="0">
       <template #actionMore>
         <el-button @click="getTableList" v-hasPermi="['clue:pool:search']"> 搜索 </el-button>
         <el-button @click="resetQuery" v-hasPermi="['clue:pool:reset']"> 重置 </el-button>
@@ -45,6 +48,7 @@
     </Search>
     <!-- 列表 -->
     <SSTable
+      v-if="!loading"
       class="mt-20px"
       v-model:tableObject="tableObject"
       :tableColumns="allSchemas.tableColumns"
@@ -74,6 +78,9 @@
             <span>{{ row[item.field] }}</span>
             <Icon class="ml-5px" icon="ep:phone" @click="makeCall(row.contact)" />
           </div>
+          <div v-else-if="item.form?.component == 'DatePicker'">
+            <span>{{ formatDate(row[item.field]) }}</span>
+          </div>
           <span v-else>{{ row[item.field] }}</span>
         </template>
       </el-table-column>
@@ -116,27 +123,44 @@
 </template>
 
 <script setup name="CluePool">
-import { allSchemas } from './cluePool.data'
+import { getSimpleFieldList } from '@/api/clue/clueField'
 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'
-})
+import { removeNullField } from '@/utils'
+import { formatDate } from '@/utils/formatTime'
+
+import * as ClueApi from '@/api/clue'
+
+const searchRef = ref()
+const queryType = ref('2')
+
 const formRef = ref()
 const drawerRef = ref()
 const successRef = ref()
 const followRef = ref()
 
-// const { tableObject, tableMethods } = useTable({
-//   getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
-//   delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
-// })
+const loading = ref(true)
+
+const allSchemas = ref({})
+
+async function getCurdSchemas() {
+  loading.value = true
+  try {
+    const data = await getSimpleFieldList()
+    allSchemas.value = useCrudSchemas(data).allSchemas
+  } finally {
+    loading.value = false
+    nextTick(() => {
+      getTableList()
+    })
+  }
+}
 
 const tableObject = ref({
-  tableList: [{ name: '测试', contact: '17318531354' }],
+  tableList: [],
   loading: false,
   total: 1,
   pageSize: 20,
@@ -151,15 +175,39 @@ function getCheckedColumns(list) {
 }
 
 function resetQuery() {
-  searchForm.value = {
-    pageNo: 1,
-    pageSize: 10
-  }
+  searchRef.value.reset()
+  tableObject.value.currentPage = 1
   getTableList()
 }
 
-function getTableList() {
+async function getTableList() {
   // 查询
+  tableObject.value.loading = true
+  try {
+    const queryParams = await searchRef.value.getFormModel()
+    const params = {
+      ...queryParams,
+      pageNo: tableObject.value.currentPage,
+      pageSize: tableObject.value.pageSize,
+      queryType: queryType.value
+    }
+    const data = await ClueApi.getCluePage(removeNullField(params))
+    tableObject.value.tableList = data.list
+    tableObject.value.total = data.total
+  } finally {
+    tableObject.value.loading = false
+  }
+}
+
+const clueCount = ref({
+  unSignNum: 0,
+  followNum: 0,
+  newNum: 0
+})
+function getSearchCount() {
+  ClueApi.getClueCount().then((data) => {
+    clueCount.value = data
+  })
 }
 
 // 新增
@@ -172,7 +220,7 @@ function handleEdit(row) {
 }
 // 详情
 function handleDetail(row) {
-  drawerRef.value.open(row)
+  drawerRef.value.open(row.clueId)
 }
 
 function handleFollow(row) {
@@ -187,6 +235,11 @@ async function makeCall(phone) {
 function handleSuccess(row) {
   successRef.value.open(row)
 }
+
+onMounted(() => {
+  getSearchCount()
+  getCurdSchemas()
+})
 </script>
 
 <style lang="scss" scoped></style>