客户公海认领

src/api/customer/customerInfo/index.ts

@@ -54,7 +54,10 @@ export function listValidCustomer(query?: any) {
   return request({
     url: '/customer/customerInfo/customerList',
     method: 'get',
-    params: query
+    params: {
+      ...query,
+      isHighSeas: 'false'
+    }
   });
 }
 /**

src/views/customer/contactPerson/index.vue

@@ -1,101 +1,66 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-      <el-form-item label="姓名" prop="contactName">
-        <el-input
-          v-model="queryParams.contactName"
-          placeholder="请输入姓名"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="人员编号" prop="contactNo">
-        <el-input
-          v-model="queryParams.contactNo"
-          placeholder="请输入人员编号"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="手机号码" prop="phone">
-        <el-input
-          v-model="queryParams.phone"
-          placeholder="请输入手机号码"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+    <!-- 搜索区域 -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="queryParams" ref="queryRef" inline label-width="90px">
+        <el-form-item label="客户名称" prop="customerName" class="custom-form-item">
+          <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable />
+        </el-form-item>
+        <el-form-item label="联系人类型" prop="roleId" class="custom-form-item">
+          <el-select v-model="queryParams.roleId" placeholder="请选择" clearable>
+            <el-option
+              v-for="dict in contactTypeOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="性别" prop="gender" class="custom-form-item">
+          <el-select v-model="queryParams.gender" placeholder="请选择" clearable>
+            <el-option label="男" value="0" />
+            <el-option label="女" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机" prop="phone" class="custom-form-item">
+          <el-input v-model="queryParams.phone" placeholder="请输入手机" clearable />
+        </el-form-item>
+      </el-form>
+
+      <div class="search-btns-area">
+        <el-button icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+      </div>
+    </el-card>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <div class="title-container">
+      <span class="list-title">联系人信息列表</span>
+    </div>
 
-    <el-table v-loading="loading" :data="contactPersonList" @selection-change="handleSelectionChange" border>
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="联系人" align="center" prop="contactName">
-        <template #default="scope">
-          <span class="contact-name-text">{{ scope.row.contactName }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="部门" align="center" prop="deptName" />
-      <el-table-column label="客户名称" align="left" prop="customerName" :show-overflow-tooltip="true" />
-      <el-table-column label="职位" align="center" prop="roleName" />
-      <el-table-column label="手机号码" align="center" prop="phone" />
-      <el-table-column label="办公电话" align="center" prop="officePhone" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-button link type="primary" @click="handleUpdate(scope.row)">详情</el-button>
-          <el-button link type="info" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 列表区域 -->
+    <el-card shadow="never" class="table-card">
+      <el-table v-loading="loading" :data="contactPersonList" border class="custom-table" :header-cell-style="{ background: '#f8fafc', color: '#333' }">
+        <el-table-column label="联系人" align="center" prop="contactName">
+          <template #default="scope">
+            <span class="contact-name-text">{{ scope.row.contactName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="部门" align="center" prop="deptName" />
+        <el-table-column label="客户名称" align="center" prop="customerName" show-overflow-tooltip />
+        <el-table-column label="职位" align="center" prop="roleName" />
+        <el-table-column label="手机号码" align="center" prop="phone" />
+        <el-table-column label="办公电话" align="center" prop="officePhone" />
+        <el-table-column label="操作" align="center" width="120" fixed="right">
+          <template #default="scope">
+            <el-button link type="primary" @click="handleUpdate(scope.row)">详情</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
 
     <!-- 添加或修改联系人对话框 -->
     <el-dialog :title="title" v-model="open" width="800px" append-to-body>
@@ -195,31 +160,27 @@
 <script setup name="ContactPerson">
 import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
 import { listContactPerson, getContactPerson, delContactPerson, addContactPerson, updateContactPerson } from "@/api/customer/contactPerson";
+import { listCommonDict } from "@/api/customer/customerDict";
 
 const { proxy } = getCurrentInstance();
 
 const contactPersonList = ref([]);
 const open = ref(false);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const activeTab = ref("basic");
+const contactTypeOptions = ref([]);
 
 const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    contactName: null,
-    contactNo: null,
-    phone: null,
-    customerId: null,
     customerName: null,
-    roleId: null
+    roleId: null,
+    gender: null,
+    phone: null
   },
   rules: {
     contactName: [
@@ -281,13 +242,6 @@ function resetQuery() {
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
@@ -298,7 +252,7 @@ function handleAdd() {
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
-  const _id = row.id || ids.value
+  const _id = row.id
   getContactPerson(_id).then(response => {
     form.value = response.data;
     open.value = true;
@@ -329,46 +283,85 @@ function submitForm() {
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const _ids = row.id || ids.value;
-  proxy.$modal.confirm('是否确认删除联系人编号为"' + _ids + '"的数据项？').then(function() {
-    return delContactPerson(_ids);
+  const _id = row.id;
+  proxy.$modal.confirm('是否确认删除联系人编号为"' + _id + '"的数据项？').then(function() {
+    return delContactPerson(_id);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
   }).catch(() => {});
 }
 
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('/customer/customerContact/export', {
-    ...queryParams.value
-  }, `contactPerson_${new Date().getTime()}.xlsx`)
+onMounted(() => {
+  getList();
+  listCommonDict("contact_type").then(res => { contactTypeOptions.value = res.data || []; });
+});
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
 }
 
-getList();
-</script>
+.search-card {
+  border: none;
+  margin-bottom: 20px;
+  :deep(.el-card__body) {
+    padding: 15px 20px;
+  }
+}
+
+:deep(.el-form--inline) {
+  display: flex;
+  align-items: center;
+}
+
+.custom-form-item {
+  margin-bottom: 0 !important;
+  margin-right: 0px;
+  :deep(.el-form-item__label) {
+    padding-right: 12px;
+    color: #606266;
+  }
+  :deep(.el-input), :deep(.el-select), :deep(.el-date-editor) {
+    width: 220px;
+  }
+}
 
-<style scoped>
-/* 表头背景色和文字样式 */
-:deep(.el-table th.el-table__cell) {
-  background-color: #f8f9fb !important;
-  color: #333 !important;
-  height: 50px;
-  font-weight: normal !important;
+.search-btns-area {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-container {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-bottom: 1px solid #ebeef5;
+  border-radius: 4px 4px 0 0;
+  .list-title { font-size: 15px; color: #333;}
+}
+
+.table-card {
+  border: none;
+  border-radius: 0 0 4px 4px;
+  :deep(.el-card__body) { padding: 10px 20px 20px; }
+}
+
+:deep(.el-table__header th .cell) {
+  font-weight: normal;
 }
 
-/* 联系人名称颜色（原型图中为橙色） */
 .contact-name-text {
   color: #ff9900;
 }
 
-/* 表格行高调整 */
-:deep(.el-table .el-table__cell) {
-  padding: 8px 0;
+:deep(.el-button--primary.is-link) {
+  color: #409eff;
 }
-
-/* 操作按钮间距 */
-.el-button--link {
-  margin: 0 5px;
+:deep(.el-button--danger.is-link) {
+  color: #f56c6c;
 }
 </style>

src/views/customer/valid/index.vue

@@ -213,18 +213,20 @@ const queryParams = reactive({
   serviceStaffId: undefined,
   belongingDepartmentId: undefined,
   cooperation: undefined,
-  enterpriseTypeId: undefined,
-  'params[isHighSeas]': 'false'
+  enterpriseTypeId: undefined
 });
 
 const getList = () => {
   loading.value = true;
-  // 核心逻辑：有效客户必须是非公海客户（即已分配负责人和客服）
-  queryParams['params[isHighSeas]'] = 'false';
-  
+
   listValidCustomer(queryParams).then(res => {
-    dataList.value = res.rows;
-    total.value = res.total;
+    const allRows = res.rows || [];
+    console.log('有效客户原始数据:', allRows.map(r => ({ id: r.id, name: r.customerName, salesPersonId: r.salesPersonId, serviceStaffId: r.serviceStaffId })));
+    dataList.value = allRows.filter(item => {
+      return (item.salesPersonId != null && item.salesPersonId !== 0) ||
+             (item.serviceStaffId != null && item.serviceStaffId !== 0);
+    });
+    total.value = dataList.value.length;
     loading.value = false;
   }).catch(() => {
     loading.value = false;