From 619311dfbed9f6228500862dda116058a8a2bb31 Mon Sep 17 00:00:00 2001
From: chenlan <suya123456>
Date: Fri, 8 Aug 2025 22:13:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0crm=20=20=E5=BD=92=E5=B1=9E?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crmApi.ts                          |  15 ++
 src/views/crmpc/customer/team_customer.vue | 297 +++++++++++++++++++++
 2 files changed, 312 insertions(+)
 create mode 100644 src/views/crmpc/customer/team_customer.vue

diff --git a/src/api/crmApi.ts b/src/api/crmApi.ts
index 9cc3cbb..28dcbc2 100644
--- a/src/api/crmApi.ts
+++ b/src/api/crmApi.ts
@@ -161,4 +161,19 @@ export class CrmService {
       params
     })
   }
+  //从属客户列表
+  static getCustomercsList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/crm/customer/index',
+      params
+    })
+  }
+  //从属客户转移
+  static cedeCustomer(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/customer/cede',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
 }
diff --git a/src/views/crmpc/customer/team_customer.vue b/src/views/crmpc/customer/team_customer.vue
new file mode 100644
index 0000000..1d13a8d
--- /dev/null
+++ b/src/views/crmpc/customer/team_customer.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="customer-page">
+    <div class="customer-toolbar boxshadow">
+      <div class="customer-search-group">
+        <el-input v-model="keyword" placeholder="请输入关键字" />
+        <el-select
+          v-model="selectValue"
+          style="min-width: 120px"
+          filterable
+          placeholder="请选择用户"
+        >
+          <el-option v-for="v in userOptions" :key="v.id" :label="v.name" :value="v.id"></el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="table boxshadow">
+      <el-button type="primary" @click="gotransfer" :disabled="selectedRows.length === 0">
+        <i class="iconfont-sys">&#xe794;</i> 批量转移
+      </el-button>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        :marginTop="10"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <el-table-column type="selection" width="55px" align="center"></el-table-column>
+          <el-table-column prop="contacts" label="客户名称"></el-table-column>
+          <el-table-column prop="phone" label="电话"></el-table-column>
+          <el-table-column prop="WhatsApp" label="WhatsApp"></el-table-column>
+          <el-table-column prop="email" label="邮箱"></el-table-column>
+          <el-table-column prop="magnitude_txt" label="客户商机"></el-table-column>
+          <el-table-column prop="channel_name" label="渠道"></el-table-column>
+          <el-table-column prop="country_name" label="国家"></el-table-column>
+          <el-table-column prop="user_name" label="跟单人"></el-table-column>
+          <el-table-column prop="created_at" label="创建时间"></el-table-column>
+        </template>
+      </ArtTable>
+    </div>
+  </div>
+  <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>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
+  import { CrmService } from '@/api/crmApi'
+  import { useAuth } from '@/composables/useAuth'
+  import { manageService } from '@/api/adminApi'
+  const selectValue = ref<string[]>([])
+  const keyword = ref<string>('')
+  const { hasAuth } = useAuth()
+  const loading = ref(false)
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+  const zyForm = reactive({
+    customer_id: '',
+    user_id: ''
+  })
+  watch([selectValue, keyword], () => {
+    pagination.currentPage = 1
+    gettableList()
+  })
+  const userOptions = ref<any>()
+  const getuserList = async () => {
+    // 这里调用获取用户列表的接口
+    const res = await manageService.presetusers()
+    userOptions.value = res || []
+    // return res || []
+  }
+  const remindRange = ref('')
+  const tableData = ref<any[]>([])
+  watch([remindRange], () => {
+    pagination.currentPage = 1
+    gettableList()
+  })
+  // 获取列表数据
+  const gettableList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params: any = {
+        current: currentPage,
+        size: pageSize
+      }
+      if (selectValue.value) {
+        params.user_id = selectValue.value
+      }
+      if (keyword.value) {
+        params.keyword = keyword.value
+      }
+      const { records, current, size, total } = await CrmService.getCustomercsList(params)
+      tableData.value = records.map((item: any) => ({
+        ...item
+      }))
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取用户列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+  // 选中的行数据
+  const selectedRows = ref<any[]>([])
+  // 处理表格行选择变化
+  const handleSelectionChange = (selection: any[]) => {
+    selectedRows.value = selection
+  }
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    gettableList()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    gettableList()
+  }
+  const timer = ref(0)
+  const refreshKey = ref(0)
+  const zyDialogVisible = ref(false)
+
+  onMounted(() => {
+    getuserList()
+    gettableList()
+    timer.value = window.setInterval(() => {
+      refreshKey.value++
+    }, 1000)
+  })
+
+  onUnmounted(() => {
+    if (timer.value) {
+      clearInterval(timer.value)
+    }
+  })
+  const gotransfer = () => {
+    zyDialogVisible.value = true
+  }
+  // 转移
+  const handlezySubmit = async () => {
+    if (selectedRows.value.length === 0) {
+      ElMessage.warning('请至少选择一条记录')
+      return
+    }
+    zyForm.customer_id = selectedRows.value.map((item) => item.id).join(',')
+    const res = await CrmService.cedeCustomer(zyForm)
+    ElMessage.success(res?.message || '批量转移成功！')
+    zyDialogVisible.value = false
+    gettableList()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .customer-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+
+  .customer-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px 20px;
+    background: var(--art-main-bg-color);
+  }
+
+  .customer-search-group {
+    display: flex;
+    gap: 12px;
+  }
+  .detils-content {
+    padding-left: 15px;
+    img {
+      max-width: 100% !important;
+    }
+  }
+  .boxshadow {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
+    background: var(--el-card-bg-color);
+    padding: 20px;
+    margin-bottom: 10px;
+  }
+
+  .heard {
+    margin-bottom: 10px;
+  }
+
+  .dark {
+    .card-list {
+      .art-custom-card {
+        .iconfont-sys {
+          background-color: #232323 !important;
+        }
+      }
+    }
+  }
+  .table {
+    margin-top: 10px;
+    :deep(.el-table__empty-block) {
+      height: 300px !important;
+    }
+    :deep(.el-table__header th) {
+      background: #f7f9fa !important;
+      color: #333;
+      font-weight: bold;
+    }
+    :deep(.el-table__body tr.custom-table-row td) {
+      border-bottom: 1px solid #f7f9fa !important;
+      border-right: 1px solid #f7f9fa !important;
+    }
+    :deep(.el-table__body tr td:last-child) {
+      border-right: none !important;
+    }
+    :deep(.el-table__body tr:last-child td) {
+      border-bottom: none !important;
+    }
+    :deep(.el-table__header-wrapper th) {
+      border-bottom: 1px solid #f7f9fa !important;
+      border-right: 1px solid #f7f9fa !important;
+    }
+    :deep(.el-table__header-wrapper th:last-child) {
+      border-right: none !important;
+    }
+    :deep(.el-table) {
+      border: 1px solid #f7f9fa !important;
+      border-radius: 6px;
+    }
+    :deep(.el-table th),
+    :deep(.el-table td) {
+      text-align: center !important;
+    }
+  }
+  .countdown-danger {
+    color: #ff0000 !important;
+  }
+  .countdown-success {
+    color: #00a43f !important;
+  }
+  .follow-detli {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: #00a43f;
+    padding: 4px 10px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    &:hover {
+      background: #f5f7fa;
+    }
+  }
+  .follow-action {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: #409eff;
+    padding: 4px 10px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    &:hover {
+      background: #f5f7fa;
+    }
+  }
+</style>
+  
\ No newline at end of file