联系方式页面增加搜索功能和导出表格功能

src/api/ContactInformation/index.ts

@@ -5,9 +5,29 @@ import request from '@/utils/request'
  * */
 
 // 查询所有联系记录（含电话、微信号）
-export const ApiContacts = (page: number, page_size: number) => {
+export const ApiContacts = (data: any) => {
+  let start_date = ''
+  let end_date = ''
+  if (data.times && data.times.length) {
+    start_date = data.times[0]
+    end_date = data.times[1]
+  }
   return request({
-    url: `/api/contacts?page=${page}&page_size=${page_size}`,
+    url: `/api/contacts?page=${data.pageNum}&page_size=${data.pageSize}&search=${data.search}&start_date=${start_date}&end_date=${end_date}`,
+    method: 'get'
+  })
+}
+
+// 导出联系记录为 Excel
+export const ApiContactsExport = (data: any) => {
+  let start_date = ''
+  let end_date = ''
+  if (data.times && data.times.length) {
+    start_date = data.times[0]
+    end_date = data.times[1]
+  }
+  return request({
+    url: `/api/contacts/export?search=${data.search}&start_date=${start_date}&end_date=${end_date}`,
     method: 'get'
   })
 }

src/views/ContactInformation/index.vue

@@ -1,47 +1,42 @@
 <template>
   <div class="app-container">
     <!-- 搜索区域 -->
-    <!--    <div class="search-container">-->
-    <!--      <el-form ref="queryFormRef" :model="queryParams" :inline="true">-->
-    <!--        <el-form-item prop="seal_type" label="用印用途">-->
-    <!--          <el-input-->
-    <!--            v-model="queryParams.seal_type"-->
-    <!--            placeholder="请输入"-->
-    <!--            clearable-->
-    <!--            @keyup.enter="handleQuery"-->
-    <!--          />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item prop="CaseNumber" label="合同编号">-->
-    <!--          <el-input-->
-    <!--            v-model="queryParams.CaseNumber"-->
-    <!--            placeholder="请输入"-->
-    <!--            clearable-->
-    <!--            @keyup.enter="handleQuery"-->
-    <!--          />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item label="创建时间" prop="times">-->
-    <!--          <el-date-picker-->
-    <!--            v-model="queryParams.times"-->
-    <!--            type="daterange"-->
-    <!--            value-format="YYYY-MM-DD"-->
-    <!--            placeholder="请选择创建时间"-->
-    <!--            range-separator="至"-->
-    <!--            start-placeholder="开始时间"-->
-    <!--            end-placeholder="结束时间"-->
-    <!--          />-->
-    <!--        </el-form-item>-->
-    <!--        <el-form-item class="search-buttons">-->
-    <!--          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>-->
-    <!--          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>-->
-    <!--        </el-form-item>-->
-    <!--      </el-form>-->
-    <!--    </div>-->
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item prop="search" label="姓名">
+          <el-input
+            v-model="queryParams.search"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="times">
+          <el-date-picker
+            v-model="queryParams.times"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择创建时间"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
+        </el-form-item>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
     <el-card shadow="hover" class="data-table">
-      <!--      <div class="data-table__toolbar">-->
-      <!--        <div class="data-table__toolbar&#45;&#45;actions">-->
-      <!--          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>-->
-      <!--        </div>-->
-      <!--      </div>-->
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <!--          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>-->
+        </div>
+        <div class="data-table__toolbar--actions">
+          <el-button type="success" icon="Download" @click="onApiContactsExport()">导出</el-button>
+        </div>
+      </div>
       <el-table
         ref="dataTableRef"
         v-loading="loading"
@@ -80,6 +75,11 @@
             {{ formatISOToDateTime(scope.row?.contacted_at || '') }}
           </template>
         </el-table-column>
+        <el-table-column label="创建时间" prop="created_at">
+          <template #default="scope">
+            {{ formatISOToDateTime(scope.row?.created_at || '') }}
+          </template>
+        </el-table-column>
         <!--        <el-table-column fixed="right" label="操作" width="140">-->
         <!--          <template #default="scope">-->
         <!--            <el-button-->
@@ -116,7 +116,7 @@
 </template>
 
 <script setup lang="ts">
-import { ApiContacts } from '@/api/ContactInformation'
+import { ApiContacts, ApiContactsExport } from '@/api/ContactInformation'
 import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
 
 defineOptions({
@@ -124,7 +124,7 @@ defineOptions({
   inheritAttrs: false
 })
 
-// const queryFormRef = ref()
+const queryFormRef = ref()
 
 const loading = ref(false)
 const ids = ref<number[]>([])
@@ -134,8 +134,7 @@ const queryParams = reactive<any>({
   pageNum: 1,
   pageSize: 10,
   times: [],
-  seal_type: '',
-  CaseNumber: ''
+  search: ''
 })
 
 // 表格数据
@@ -150,7 +149,7 @@ const roleList = ref<any[]>()
 // 获取数据
 function fetchData() {
   loading.value = true
-  ApiContacts(queryParams.pageNum, queryParams.pageSize)
+  ApiContacts(queryParams)
     .then((res: any) => {
       roleList.value = res.data.results
       total.value = res.data.total
@@ -167,17 +166,31 @@ function handleQuery() {
 }
 
 // // 重置查询
-// function handleResetQuery() {
-//   if (queryFormRef.value) queryFormRef.value?.resetFields()
-//   queryParams.pageNum = 1
-//   fetchData()
-// }
+function handleResetQuery() {
+  if (queryFormRef.value) queryFormRef.value?.resetFields()
+  queryParams.pageNum = 1
+  fetchData()
+}
 
 // 行复选框选中
 function handleSelectionChange(selection: any) {
   ids.value = selection.map((item: any) => item.id)
 }
 
+const onApiContactsExport = () => {
+  ApiContactsExport(queryParams).then((res: any) => {
+    if (res.data.download_url) {
+      const link = document.createElement('a')
+      link.href = res.data.download_url
+      link.download = res.data.filename || '联系人信息.xlsx'
+      link.target = '_blank'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  })
+}
+
 // // 打开角色弹窗
 // function handleOpenDialog(data: any = null) {
 //   dialog.visible = true