添加用户页面 客户页面接口 等

src/views/admin/customer/index.vue

@@ -2,17 +2,22 @@
   <div class="customer-page">
     <!-- 顶部操作栏 -->
     <div class="customer-toolbar boxshadow">
-      <el-button type="primary" @click="goAdd" v-if="hasAuth('crm_customer@add')">
-        <el-icon><Plus /> </el-icon>
-        添加
-      </el-button>
       <div class="customer-search-group">
-        <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
-        <el-select v-model="selectValue">
-          <el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
+        <el-select
+          v-model="selectValue"
+          style="min-width: 120px"
+          filterable
+          multiple
+          collapse-tags
+          placeholder="请选择跟单人"
+        >
+          <el-option v-for="v in userOptions" :key="v.id" :label="v.name" :value="v.id">
           </el-option>
         </el-select>
       </div>
+      <el-button type="primary" @click="exportfn" v-if="hasAuth('customer@export')">
+        <i class="iconfont-sys">&#xe89f;</i> 导出
+      </el-button>
     </div>
 
     <!-- 筛选标签 -->
@@ -74,14 +79,13 @@
       </div>
     </div>
     <div class="boxshadow">
-      <!-- Tab切换 -->
-      <el-tabs v-model="activeTab" class="customer-tabs">
-        <el-tab-pane label="全部" name=""></el-tab-pane>
-        <el-tab-pane label="跟进中" name="0"></el-tab-pane>
-        <el-tab-pane label="已成交" name="1"></el-tab-pane>
-        <el-tab-pane label="已丢失" name="2"></el-tab-pane>
-      </el-tabs>
-
+      <el-button
+        type="primary"
+        @click="plzyDialogVisible = true"
+        v-if="hasAuth('customer@transfer') && selectedRows.length > 0"
+      >
+        <i class="iconfont-sys">&#xe794;</i> 批量转移
+      </el-button>
       <!-- 表格 -->
       <ArtTable
         ref="tableRef"
@@ -91,11 +95,13 @@
         :currentPage="pagination.currentPage"
         :pageSize="pagination.pageSize"
         :total="pagination.total"
+        @selection-change="handleSelectionChange"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         lass="customer-table"
       >
         <template #default>
+          <el-table-column type="selection" width="55px" align="center"></el-table-column>
           <el-table-column prop="contacts" label="客户名称" align="center" />
           <el-table-column prop="magnitude_txt" label="客户商机" align="center" />
           <el-table-column prop="channel_name" label="渠道" align="center" />
@@ -111,8 +117,9 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column prop="follow_next" label="下次跟进时间"></el-table-column>
           <el-table-column prop="enter_user_name" label="录单人"></el-table-column>
+          <el-table-column prop="user_name" label="跟单人"></el-table-column>
+          <el-table-column prop="follow_next" label="下次跟进时间"></el-table-column>
           <el-table-column prop="created_at" label="创建时间"></el-table-column>
           <el-table-column fixed="right" label="操作" width="200px" align="center">
             <template #default="scope">
@@ -121,7 +128,7 @@
                 underline="never"
                 style="margin-right: 8px"
                 @click="onDetail(scope.row)"
-                v-if="hasAuth('crm_customer@show')"
+                v-if="hasAuth('customer@detail')"
               >
                 <i class="iconfont-sys"> &#xe70f;</i>详情
               </el-link>
@@ -129,27 +136,10 @@
                 type="primary"
                 underline="never"
                 style="margin-right: 8px"
-                @click="goEdit(scope.row)"
-                v-if="hasAuth('crm_customer@show')"
+                @click="gotransfer(scope.row)"
+                v-if="hasAuth('customer@transfer')"
               >
-                <i class="iconfont-sys"> &#xe70f;</i>查看
-              </el-link>
-              <el-link
-                type="primary"
-                underline="never"
-                style="margin-right: 8px"
-                @click="goAddFollow(scope.row)"
-                v-if="hasAuth('crm_customer@follow_add')"
-              >
-                <i class="iconfont-sys">&#xe6bf;</i> 跟进
-              </el-link>
-              <el-link
-                type="danger"
-                underline="never"
-                @click="delectfn(scope.row)"
-                v-if="hasAuth('crm_customer@follow_delete')"
-              >
-                <i class="iconfont-sys">&#xe6d4;</i> 删除
+                <i class="iconfont-sys"> &#xe794;</i>转移
               </el-link>
             </template>
           </el-table-column>
@@ -157,35 +147,125 @@
       </ArtTable>
     </div>
   </div>
-  <el-dialog v-model="detailDialogVisible" title="详情">
+  <!-- 详情对话框 -->
+  <el-dialog v-model="detailDialogVisible" title="详情" width="700px">
+    <div class="detail-info-table">
+      <div class="row">
+        <div>客户名称：{{ detailRow.contacts }}</div>
+        <div>电话：{{ detailRow.phone }}</div>
+        <div>国家：{{ detailRow.country_name }}</div>
+      </div>
+      <div class="row">
+        <div>渠道：{{ detailRow.channel_name }}</div>
+        <div>邮箱：{{ detailRow.email }}</div>
+        <div>WhatsApp：{{ detailRow.WhatsApp }}</div>
+      </div>
+      <div class="row">
+        <div>发布人：{{ detailRow.enter_user_name }}</div>
+        <div>跟单人：{{ detailRow.user_name }}</div>
+        <div>录单时间：{{ detailRow.created_at }}</div>
+      </div>
+      <div class="row">
+        <div>
+          等级：
+          <span>
+            {{ detailRow.magnitude_txt }}
+          </span>
+        </div>
+        <div>
+          状态：<span>{{ detailRow.grade_txt }}</span>
+        </div>
+        <div>
+          跟进状态：<span>{{ detailRow.follow_txt }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="dtitle">详情内容</div>
     <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
   </el-dialog>
+  <!-- 转移跟单对话框 -->
+  <el-dialog v-model="zyDialogVisible" title="转移" width="360px">
+    <el-form :model="zyForm" label-width="0">
+      <el-form-item>
+        <el-select
+          v-model="zyForm.user_id"
+          filterable
+          placeholder="请选择转移人"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <div style="display: flex; justify-content: space-around; margin-top: 24px">
+        <el-button @click="zyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handlezySubmit">确定</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+  <!-- 批量转移对话框 -->
+  <el-dialog v-model="plzyDialogVisible" title="批量转移" width="360px">
+    <el-form :model="plzyForm" label-width="0">
+      <el-form-item>
+        <el-select
+          v-model="plzyForm.user_id"
+          filterable
+          placeholder="请选择转移人"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <div style="display: flex; justify-content: space-around; margin-top: 24px">
+        <el-button @click="plzyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleplzySubmit">确定</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
   import { ref, reactive, computed, onMounted, watch } from 'vue'
-  import { Plus } from '@element-plus/icons-vue'
   import { CrmService } from '@/api/crmApi'
+  import { manageService } from '@/api/adminApi'
   import { useAuth } from '@/composables/useAuth'
   const { hasAuth } = useAuth()
-  const searchValue = ref('')
-  const selectValue = ref('')
-  const activeTab = ref('')
+  const selectValue = ref<string[]>([])
   const showMore = ref(false)
   const loading = ref(false)
   const detailDialogVisible = ref(false)
+  const zyDialogVisible = ref(false)
+  const plzyDialogVisible = ref(false)
   const detailRow = ref<any>(null)
   const pagination = reactive({
     currentPage: 1,
     pageSize: 10,
     total: 0
   })
-  const selectOptions = [
-    { label: '全部', value: '' },
-    { label: '当天', value: '0' },
-    { label: '近三天', value: '1' },
-    { label: '近七天', value: '2' }
-  ]
+  const plzyForm = reactive({
+    customer_id: '',
+    user_id: ''
+  })
+  const zyForm = reactive({
+    customer_id: '',
+    user_id: ''
+  })
+  const userOptions = ref<any>()
+  const getuserList = async () => {
+    // 这里调用获取用户列表的接口
+    const res = await manageService.presetusers()
+    userOptions.value = res || []
+    // return res || []
+  }
   // 获取列表数据
   const tagActiveMap = reactive<{ [groupId: string]: string }>({})
   //获取标签
@@ -208,11 +288,12 @@
   // 表格数据
   const tableData = ref<any[]>([])
   onMounted(() => {
+    getuserList()
     gettableList()
     tagGrouplistfn()
   })
   // tabs 切换联动
-  watch([activeTab, searchValue, selectValue], () => {
+  watch([selectValue], () => {
     pagination.currentPage = 1
     gettableList()
   })
@@ -224,16 +305,16 @@
         current: currentPage,
         size: pageSize
       }
-      if (searchValue.value) params.keyword = searchValue.value
-      if (selectValue.value) params.follow_last = selectValue.value
-      if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
+      if (selectValue.value && selectValue.value.length) {
+        params.user_id = selectValue.value.join(',')
+      }
       // 标签参数，所有选中的标签id组成数组
       const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)
       if (selectedTagIds.length) {
         params.tag_id = selectedTagIds
       }
       console.log(params)
-      const { data, current, size, total } = await CrmService.getcustomerList(params)
+      const { data, current, size, total } = await manageService.getcrmCustomerList(params)
       tableData.value = data.map((item: any) => ({
         ...item
       }))
@@ -259,21 +340,36 @@
     if (status === 2) return 'status-lost'
     return ''
   }
-  const router = useRouter()
-  function goAdd() {
-    router.push('/crmpc/customer/add')
-  }
-  function goEdit(row: any) {
-    router.push({
-      path: '/crmpc/customer/show',
-      query: { id: row.id }
-    })
-  }
-  function goAddFollow(row: any) {
-    router.push({
-      path: '/crmpc/customer/followadd',
-      query: { id: row.id } // 可带客户名等参数
-    })
+  //导出
+  const exportfn = () => {
+    const { currentPage, pageSize } = pagination
+    const params: any = {
+      current: currentPage,
+      size: pageSize,
+      user_id: selectValue.value.join(','),
+      tag_id: Object.values(tagActiveMap).filter(Boolean)
+    }
+    // manageService.crmCustomerExport(params)
+    try {
+      // 1. 调用接口，获取blob
+      // const res = await manageService.crmCustomerExport(params)
+      const urls =
+        import.meta.env.VITE_API_URL +
+        `/admin/crm/customer/export?current=${params.currentPage}&size=${params.pageSize}&user_id=${params.user_id}&tag_id=${params.tag_id}`
+      // 2. 创建blob对象
+      // const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 或根据后端实际类型调整
+      // 3. 创建下载链接
+      const url = urls
+      const link = document.createElement('a')
+      link.href = url
+      link.download = '客户数据.xlsx' // 可自定义文件名
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+    } catch (e) {
+      ElMessage.error('导出失败')
+    }
   }
   // 标签选中状态，key为组id，值为选中的标签id
   function handleTagClick(groupId: string, tagId: string) {
@@ -285,23 +381,6 @@
     pagination.currentPage = 1
     gettableList()
   }
-  //删除
-  const delectfn = (row: any) => {
-    ElMessageBox.confirm('确定要删除此用户吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-      .then(async () => {
-        const res = await CrmService.getcustomerdelete({ id: row.id })
-        ElMessage.success(res?.message || '提交成功！')
-        gettableList()
-        // 你可以在这里调用接口或做后续处理
-      })
-      .catch(() => {
-        // 用户点击了取消
-      })
-  }
   function processImages(html: string) {
     const parser = new DOMParser()
     const doc = parser.parseFromString(html, 'text/html')
@@ -316,6 +395,38 @@
     detailRow.value = row
     detailDialogVisible.value = true
   }
+  const gotransfer = (row: any) => {
+    zyForm.customer_id = row.id
+    zyDialogVisible.value = true
+  }
+  // 转移
+  const handlezySubmit = async () => {
+    const res = await manageService.crmCustomerTransfer({
+      customer_id: zyForm.customer_id,
+      user_id: zyForm.user_id
+    })
+    ElMessage.success(res?.message || '转移成功！')
+    zyDialogVisible.value = false
+    gettableList()
+  }
+  // 选中的行数据
+  const selectedRows = ref<any[]>([])
+  // 处理表格行选择变化
+  const handleSelectionChange = (selection: any[]) => {
+    selectedRows.value = selection
+  }
+  // 批量转移
+  const handleplzySubmit = async () => {
+    if (selectedRows.value.length === 0) {
+      ElMessage.warning('请至少选择一条记录')
+      return
+    }
+    plzyForm.customer_id = selectedRows.value.map((item) => item.id).join(',')
+    const res = await manageService.crmCustomerTransfer(plzyForm)
+    ElMessage.success(res?.message || '批量转移成功！')
+    plzyDialogVisible.value = false
+    gettableList()
+  }
 </script>
 
 <style scoped lang="scss">
@@ -473,5 +584,35 @@
     color: #3471ff !important; /* 文字颜色 */
     background-color: #fff !important; /* 背景色 */
   }
+  .detail-info-table {
+    padding-left: 15px;
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 6px;
+
+      > div {
+        flex: 1;
+        min-width: 0;
+        margin-right: 16px;
+        overflow: hidden;
+        font-size: 14px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+  .dtitle {
+    line-height: 40px;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+    padding-left: 15px;
+  }
+  .detils-content {
+    padding-left: 15px;
+    img {
+      max-width: 100% !important;
+    }
+  }
 </style>
-