v1.0.2 更新内容

src/views/crmpc/customer/index.vue

@@ -7,11 +7,25 @@
         添加
       </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-option>
-        </el-select>
+        <el-form-item label="关键字:" label-width="70px">
+          <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
+        </el-form-item>
+        <el-form-item label="国家" label-width="70px">
+          <el-select v-model="country_id" filterable placeholder="请选择国家">
+            <el-option
+              v-for="item in countryOptions"
+              :key="item.id"
+              :label="item.cn_addr"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间" label-width="70px">
+          <el-select v-model="selectValue" placeholder="请选择时间" style="width: 120px">
+            <el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
       </div>
     </div>
 
@@ -96,6 +110,7 @@
         lass="customer-table"
       >
         <template #default>
+          <el-table-column prop="code" label="编号" align="center" />
           <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" />
@@ -175,6 +190,7 @@
   const searchValue = ref('')
   const selectValue = ref('')
   const activeTab = ref('')
+  const country_id = ref('')
   const showMore = ref(false)
   const loading = ref(false)
   const detailDialogVisible = ref(false)
@@ -190,6 +206,15 @@
     { label: '近三天', value: '1' },
     { label: '近七天', value: '2' }
   ]
+  const countryOptions = ref<any>()
+  //国家
+  const getarea = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getCountry()
+      countryOptions.value = res||[]
+    } catch (error) { countryOptions.value = [] }
+  }
   // 获取列表数据
   const tagActiveMap = reactive<{ [groupId: string]: string }>({})
   //获取标签
@@ -212,11 +237,12 @@
   // 表格数据
   const tableData = ref<any[]>([])
   onMounted(() => {
+    getarea()
     gettableList()
     tagGrouplistfn()
   })
   // tabs 切换联动
-  watch([activeTab, searchValue, selectValue], () => {
+  watch([activeTab, searchValue, selectValue, country_id], () => {
     pagination.currentPage = 1
     gettableList()
   })
@@ -230,6 +256,7 @@
       }
       if (searchValue.value) params.keyword = searchValue.value
       if (selectValue.value) params.follow_last = selectValue.value
+      if (country_id.value) params.country_id = country_id.value
       if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
       // 标签参数，所有选中的标签id组成数组
       const selectedTagIds = Object.values(tagActiveMap).filter(Boolean)

src/views/crmpc/team/team_customer.vue

@@ -2,15 +2,24 @@
   <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>
+        <el-form-item label="关键字:" label-width="70px">
+          <el-input v-model="keyword" placeholder="请输入关键字" />
+        </el-form-item>
+        <el-form-item label="组员:" label-width="70px">
+          <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>
+        </el-form-item>
       </div>
     </div>
     <div class="table boxshadow">
@@ -32,6 +41,7 @@
       >
         <template #default>
           <el-table-column type="selection" width="55px" align="center"></el-table-column>
+          <el-table-column prop="code" label="编号" align="center" />
           <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>

src/views/crmpc/team/user_customer.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="customer-page">
+    <!-- 顶部操作栏 -->
+    <div class="customer-toolbar boxshadow">
+      <div class="customer-search-group">
+        <el-form-item label="关键字:" label-width="70px">
+          <el-input style="min-width: 120px" v-model="keyword" placeholder="请输入关键字" />
+        </el-form-item>
+        <el-form-item label="状态:" label-width="50px">
+          <el-select v-model="selectValue" style="min-width: 120px">
+            <el-option label="全部" value="" />
+            <el-option label="正常" value="1" />
+            <el-option label="离职" value="2" />
+          </el-select>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="boxshadow">
+      <!-- 表格 -->
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        lass="customer-table"
+      >
+        <template #default>
+          <!-- <el-table-column prop="id" label="用户ID" align="center" /> -->
+          <el-table-column prop="sn" label="SN" align="center" />
+          <el-table-column prop="follow" label="头像" align="center">
+            <template #default="scope">
+              <img
+                :src="scope.row.avatar"
+                alt="头像"
+                class="avatar"
+                @click="handleAvatarClick(scope.row.avatar)"
+                style="cursor: pointer"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="名字" align="center" />
+          <el-table-column prop="phone" label="电话" align="center" />
+          <el-table-column prop="email" label="邮箱" align="center" />
+          <!-- <el-table-column prop="corp_name" label="所属公司" align="center" /> -->
+          <el-table-column prop="follow" label="状态" align="center">
+            <template #default="scope">
+              <span :class="statusClass(scope.row.status)">
+                {{ scope.row.status == 1 ? '在职' : '离职' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="customer_count" label="客户数量" align="center" />
+          <el-table-column fixed="right" label="操作" width="200px" align="center">
+            <template #default="scope">
+              <el-link
+                type="warning"
+                underline="never"
+                style="margin-right: 8px"
+                @click="statusfn(scope.row)"
+                v-if="hasAuth('crm_customer@status') && scope.row.status == 1"
+              >
+                <i class="iconfont-sys">&#xe641;</i>标记离职
+              </el-link>
+            </template>
+          </el-table-column>
+        </template>
+      </ArtTable>
+    </div>
+    <!-- 图片预览组件 -->
+    <ElImageViewer
+      v-if="showImageViewer"
+      :url-list="[currentImageUrl]"
+      :hide-on-click-modal="true"
+      @close="showImageViewer = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch } from 'vue'
+  import { ElImageViewer } from 'element-plus'
+  import { CrmService } from '@/api/crmApi'
+  import { useAuth } from '@/composables/useAuth'
+  const { hasAuth } = useAuth()
+  const selectValue = ref<string[]>([])
+  const keyword = ref<string>('')
+  const loading = ref(false)
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+  // 表格数据
+  const tableData = ref<any[]>([])
+  onMounted(() => {
+    gettableList()
+  })
+  // tabs 切换联动
+  watch([selectValue, keyword], () => {
+    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.status = selectValue.value
+      }
+      if (keyword.value) {
+        params.keyword = keyword.value
+      }
+      const { records, current, size, total } = await CrmService.getCustomerUserList(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 handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    gettableList()
+  }
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    gettableList()
+  }
+  function statusClass(status: any) {
+    if (status === 1) return 'status-following'
+    if (status === 0) return 'status-lost'
+    return ''
+  }
+  // 图片预览相关
+  const showImageViewer = ref(false)
+  const currentImageUrl = ref('')
+
+  const handleAvatarClick = (avatarUrl: string) => {
+    if (avatarUrl) {
+      currentImageUrl.value = avatarUrl
+      showImageViewer.value = true
+    }
+  }
+  const statusfn = (row?: any) => {
+    ElMessageBox.confirm('确定标记离职吗？', '标记确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(async () => {
+      const { message } = await CrmService.markLeave({
+        user_id: row.id
+      })
+      ElMessage.success(message)
+      gettableList()
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-badge) {
+    --el-badge-size: 16px;
+  }
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    transition: opacity 0.2s;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  .itemtag {
+    margin-top: -16px;
+    margin-left: -13px;
+  }
+  :deep(.el-table__header th) {
+    background: #f7f9fa !important;
+    color: #333;
+    font-weight: bold;
+  }
+  :deep(.el-table__empty-block) {
+    height: 450px !important;
+  }
+  :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;
+  }
+
+  .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;
+  }
+
+  .customer-tags {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 16px;
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+
+  .filter-label {
+    width: 120px;
+    color: #666;
+    margin-right: 8px;
+    flex-shrink: 0;
+    font-size: 14px;
+  }
+
+  .filter-tags {
+    flex: 1;
+    color: #333;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .customer-tabs {
+    margin-bottom: 8px;
+  }
+
+  .status-following {
+    color: #00a43f;
+    font-weight: bold;
+  }
+
+  .status-dealed {
+    color: #3471ff;
+    font-weight: bold;
+  }
+
+  .status-lost {
+    color: #ff0000;
+    font-weight: bold;
+  }
+
+  .customer-table {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    margin-top: 0;
+  }
+
+  .filter-more-btn {
+    text-align: center;
+    margin-top: 8px;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  .form-submit-row {
+    text-align: center;
+  }
+</style>