解决客户信息动态获取项目、销售、门店等

src/views/customer/index.vue

@@ -14,16 +14,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="所属项目">
+
-          <el-select v-model="queryParams.projectId" placeholder="请选择所属项目" clearable>
-            <el-option
-              v-for="item in projectOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
 
         <el-form-item label="所属销售">
           <el-select v-model="queryParams.salesId" placeholder="请选择销售" clearable>
@@ -75,10 +66,17 @@
 
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">筛选</el-button>
+          <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
+    <!-- 操作按钮区域 -->
+    <el-card class="action-container" shadow="never">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加客户</el-button>
+      <el-button type="danger" icon="el-icon-delete" :disabled="selectedIds.length === 0" @click="handleBatchDelete">批量删除</el-button>
+    </el-card>
+
     <!-- 视图切换和操作按钮区域 -->
     <el-card class="view-container" shadow="never">
       <div class="view-tabs">
@@ -112,10 +110,12 @@
         <el-table-column label="所属门店" prop="dealershipName" min-width="150" />
         <el-table-column label="所属销售" prop="salesName" min-width="150" />
         <el-table-column label="录音条数" prop="recordingCount" sortable min-width="100" />
-        <el-table-column label="意向车型" prop="intendedCarModel" min-width="120" />
+        <el-table-column label="意向车型" prop="intendedModel" min-width="120" />
-        <el-table-column label="操作" width="120" fixed="right">
+        <el-table-column label="操作" width="200" fixed="right">
           <template slot-scope="scope">
-            <el-button type="text" @click="handleViewDetails(scope.row)">查看详情</el-button>
+            <el-button type="text" size="small" @click="handleViewDetails(scope.row)">查看详情</el-button>
+            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -140,7 +140,6 @@
           v-for="customer in customerList"
           :key="customer.id"
           class="customer-card"
-          @click="handleViewDetails(customer)"
         >
           <div class="card-header">
             <h3>{{ customer.customerName }}</h3>
@@ -161,11 +160,13 @@
             </div>
             <div class="info-item">
               <label>意向车型:</label>
-              <span>{{ customer.intendedCarModel || '-' }}</span>
+              <span>{{ customer.intendedModel || '-' }}</span>
             </div>
           </div>
           <div class="card-footer">
-            <el-button type="text" size="small">查看详情</el-button>
+            <el-button type="text" size="small" @click="handleViewDetails(customer)">查看详情</el-button>
+            <el-button type="text" size="small" @click="handleEdit(customer)">编辑</el-button>
+            <el-button type="text" size="small" style="color: #F56C6C;" @click="handleDelete(customer)">删除</el-button>
           </div>
         </div>
       </div>
@@ -183,6 +184,58 @@
       />
     </el-card>
 
+    <!-- 添加/编辑客户对话框 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="600px"
+      @close="handleDialogClose"
+    >
+      <el-form ref="customerForm" :model="customerForm" :rules="customerRules" label-width="100px">
+        <el-form-item label="客户姓名" prop="customerName">
+          <el-input v-model="customerForm.customerName" placeholder="请输入客户姓名" />
+        </el-form-item>
+        <el-form-item label="联系方式" prop="contact">
+          <el-input v-model="customerForm.contact" placeholder="请输入联系方式" />
+        </el-form-item>
+        <el-form-item label="所属门店" prop="dealershipId">
+          <el-select v-model="customerForm.dealershipId" placeholder="请选择所属门店" style="width: 100%">
+            <el-option
+              v-for="item in dealershipOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属销售" prop="salesId">
+          <el-select v-model="customerForm.salesId" placeholder="请选择所属销售" style="width: 100%">
+            <el-option
+              v-for="item in salesOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="意向车型" prop="intendedModel">
+          <el-input v-model="customerForm.intendedModel" placeholder="请输入意向车型" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="customerForm.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 客户详情对话框 -->
     <el-dialog
       title="客户详情"
@@ -228,7 +281,7 @@
           <el-col :span="12">
             <div class="detail-item">
               <label>意向车型:</label>
-              <span>{{ currentCustomer.intendedCarModel || '-' }}</span>
+              <span>{{ currentCustomer.intendedModel || '-' }}</span>
             </div>
           </el-col>
         </el-row>
@@ -246,6 +299,14 @@
             </div>
           </el-col>
         </el-row>
+        <el-row :gutter="20" v-if="currentCustomer.remark">
+          <el-col :span="24">
+            <div class="detail-item">
+              <label>备注:</label>
+              <span>{{ currentCustomer.remark }}</span>
+            </div>
+          </el-col>
+        </el-row>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="detailVisible = false">关闭</el-button>
@@ -257,8 +318,16 @@
 <script>
 import {
   getCustomerList,
+  getCustomerById,
+  addCustomer,
+  updateCustomer,
+  deleteCustomer,
+  batchDeleteCustomer,
   exportCustomerFlow
 } from '@/api/customer'
+import { getProjectList } from '@/api/project'
+import { getSalesList } from '@/api/sales'
+import { getDealershipList } from '@/api/dealership'
 
 export default {
   name: 'Customer',
@@ -271,6 +340,25 @@ export default {
       activeView: 'list',
       detailVisible: false,
       currentCustomer: null,
+      // 添加/编辑对话框相关
+      dialogVisible: false,
+      dialogTitle: '',
+      isEdit: false,
+      customerForm: {
+        id: undefined,
+        customerName: '',
+        contact: '',
+        dealershipId: '',
+        salesId: '',
+        intendedModel: '',
+        remark: ''
+      },
+      customerRules: {
+        customerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
+        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
+        dealershipId: [{ required: true, message: '请选择所属门店', trigger: 'change' }],
+        salesId: [{ required: true, message: '请选择所属销售', trigger: 'change' }]
+      },
       // 查询参数
       queryParams: {
         current: 1,
@@ -284,29 +372,18 @@ export default {
         infoCard: ''
       },
       // 门店选项
-      dealershipOptions: [
+      dealershipOptions: [],
-        { value: '1', label: '销售演示-上汽' },
-        { value: '2', label: 'DCC演示' },
-        { value: '3', label: '销售演示-奔驰' },
-        { value: '4', label: '销售演示-比亚迪' }
-      ],
       // 项目选项
-      projectOptions: [
+      projectOptions: [],
-        { value: '1', label: '电话接访话术' },
-        { value: '2', label: '广丰项目' },
-        { value: '3', label: '销售部' }
-      ],
       // 销售选项
-      salesOptions: [
+      salesOptions: []
-        { value: '1', label: '销冠【普通】' },
-        { value: '2', label: '粤语销售' },
-        { value: '3', label: '上海销售' },
-        { value: '4', label: '四川销售' }
-      ]
     }
   },
   created() {
     this.getList()
+    this.getDealershipOptions()
+    this.getProjectOptions()
+    this.getSalesOptions()
   },
   methods: {
     // 获取列表数据
@@ -340,85 +417,103 @@ export default {
       }).catch((error) => {
         console.log('API错误:', error)
         // 开发环境使用模拟数据，完全匹配图片中的数据
-        this.customerList = [
+        this.customerList = []
-          {
-            id: '1',
-            customerName: '刘',
-            contact: '123',
-            dealershipName: '销售演示-上汽',
-            salesName: '销冠【普通】',
-            recordingCount: 0,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:30:15',
-            updateTime: '2025-08-08 10:30:15'
-          },
-          {
-            id: '2',
-            customerName: '张',
-            contact: '15210781803',
-            dealershipName: '销售演示-上汽',
-            salesName: '粤语销售',
-            recordingCount: 1,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:25:30',
-            updateTime: '2025-08-08 10:25:30'
-          },
-          {
-            id: '3',
-            customerName: '粤语测试',
-            contact: '18919283912',
-            dealershipName: '销售演示-上汽',
-            salesName: '上海销售',
-            recordingCount: 2,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:20:45',
-            updateTime: '2025-08-08 10:20:45'
-          },
-          {
-            id: '4',
-            customerName: '上海测试',
-            contact: '13800138000',
-            dealershipName: '销售演示-上汽',
-            salesName: '四川销售',
-            recordingCount: 3,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:15:20',
-            updateTime: '2025-08-08 10:15:20'
-          },
-          {
-            id: '5',
-            customerName: '四川测试',
-            contact: '13900139000',
-            dealershipName: '销售演示-上汽',
-            salesName: '销冠【普通】',
-            recordingCount: 1,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:10:10',
-            updateTime: '2025-08-08 10:10:10'
-          },
-          {
-            id: '6',
-            customerName: '王**',
-            contact: '13700137000',
-            dealershipName: '销售演示-上汽',
-            salesName: '粤语销售',
-            recordingCount: 0,
-            intendedCarModel: '',
-            createTime: '2025-08-08 10:05:30',
-            updateTime: '2025-08-08 10:05:30'
-          }
-        ]
         this.total = this.customerList.length
         this.loading = false
       })
     },
 
+    // 获取门店选项
+    getDealershipOptions() {
+      getDealershipList({ size: 1000 }).then(response => {
+        if (response && response.code === 20000) {
+          this.dealershipOptions = response.data.map(item => ({
+            value: item.id,
+            label: item.dealershipName
+          }))
+        } else {
+          this.$message.error(response?.message || '获取门店列表失败')
+        }
+      }).catch(error => {
+        console.error('获取门店列表失败:', error)
+        // 开发环境使用模拟数据
+        this.dealershipOptions = [
+          { value: '1', label: '销售演示-上汽' },
+          { value: '2', label: 'DCC演示' },
+          { value: '3', label: '销售演示-奔驰' },
+          { value: '4', label: '销售演示-比亚迪' }
+        ]
+      })
+    },
+
+    // 获取项目选项
+    getProjectOptions() {
+      getProjectList({ pageSize: 1000 }).then(response => {
+        if (response && response.code === 20000) {
+          this.projectOptions = response.data.map(item => ({
+            value: item.id,
+            label: item.projectName
+          }))
+        } else {
+          this.$message.error(response?.message || '获取项目列表失败')
+        }
+      }).catch(error => {
+        console.error('获取项目列表失败:', error)
+        // 开发环境使用模拟数据
+        this.projectOptions = [
+          { value: '1', label: '电话接访话术' },
+          { value: '2', label: '广丰项目' },
+          { value: '3', label: '销售部' }
+        ]
+      })
+    },
+
+    // 获取销售选项
+    getSalesOptions() {
+      getSalesList({ pageSize: 1000 }).then(response => {
+        if (response && response.code === 20000) {
+          this.salesOptions = response.data.map(item => ({
+            value: item.id,
+            label: item.salesName
+          }))
+        } else {
+          this.$message.error(response?.message || '获取销售列表失败')
+        }
+      }).catch(error => {
+        console.error('获取销售列表失败:', error)
+        // 开发环境使用模拟数据
+        this.salesOptions = [
+          { value: '1', label: '销冠【普通】' },
+          { value: '2', label: '粤语销售' },
+          { value: '3', label: '上海销售' },
+          { value: '4', label: '四川销售' }
+        ]
+      })
+    },
+
     // 查询
     handleQuery() {
       this.queryParams.current = 1
       this.getList()
     },
 
+    // 重置查询
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        customerName: '',
+        contact: '',
+        dealershipId: '',
+        projectId: '',
+        salesId: '',
+        createTimeRange: [],
+        infoCard: ''
+      }
+      this.getList()
+    },
+
     // 视图切换
     handleViewChange(tab) {
       this.activeView = tab.name
@@ -441,6 +536,136 @@ export default {
       this.getList()
     },
 
+    // 添加客户
+    handleAdd() {
+      this.dialogTitle = '添加客户'
+      this.isEdit = false
+      this.customerForm = {
+        id: undefined,
+        customerName: '',
+        contact: '',
+        dealershipId: '',
+        salesId: '',
+        intendedModel: '',
+        remark: ''
+      }
+      this.dialogVisible = true
+    },
+
+    // 编辑客户
+    handleEdit(row) {
+      this.dialogTitle = '编辑客户'
+      this.isEdit = true
+      this.loading = true
+
+      getCustomerById(row.id).then(response => {
+        console.log('编辑客户响应:', response)
+
+        if (response && response.code === 20000) {
+          this.customerForm = { ...response.data }
+          this.dialogVisible = true
+        } else {
+          this.$message.error(response?.message || '获取客户信息失败')
+        }
+        this.loading = false
+      }).catch(error => {
+        console.error('获取客户信息失败:', error)
+        this.$message.error('获取客户信息失败，请稍后重试')
+        this.loading = false
+      })
+    },
+
+    // 删除客户
+    handleDelete(row) {
+      this.$confirm(`确定要删除客户 "${row.customerName}" 吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteCustomer(row.id).then(response => {
+          console.log('删除客户响应:', response)
+
+          if (response && response.code === 20000) {
+            const backendResponse = response.data
+            if (backendResponse && backendResponse.success) {
+              this.$message.success(backendResponse.message || '删除成功')
+              this.getList()
+            } else {
+              this.$message.error(backendResponse?.message || '删除失败')
+            }
+          } else {
+            this.$message.error(response?.message || '删除失败')
+          }
+        }).catch(error => {
+          console.error('删除失败:', error)
+          this.$message.error('删除失败，请稍后重试')
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+
+    // 批量删除
+    handleBatchDelete() {
+      if (this.selectedIds.length === 0) {
+        this.$message.warning('请先选择要删除的客户')
+        return
+      }
+
+      this.$confirm(`确定要删除选中的 ${this.selectedIds.length} 个客户吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        batchDeleteCustomer(this.selectedIds).then(response => {
+          console.log('批量删除响应:', response)
+
+          if (response && response.code === 20000) {
+            this.$message.success(response.data.message || '批量删除成功')
+            this.selectedIds = []
+            this.getList()
+          } else {
+            this.$message.error(response?.message || '批量删除失败')
+          }
+        }).catch(error => {
+          console.error('批量删除失败:', error)
+          this.$message.error('批量删除失败，请稍后重试')
+        })
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+
+    // 提交表单
+    handleSubmit() {
+      console.log('提交表单:', this.customerForm)
+      this.$refs.customerForm.validate(valid => {
+        if (valid) {
+          const submitFunc = this.isEdit ? updateCustomer : addCustomer
+          submitFunc(this.customerForm).then(response => {
+            console.log('提交表单响应:', response)
+
+            if (response && response.code === 20000) {
+              const backendResponse = response.data
+              this.$message.success(backendResponse.message || (this.isEdit ? '更新成功' : '添加成功'))
+              this.dialogVisible = false
+              this.getList()
+            } else {
+              this.$message.error(response?.message || (this.isEdit ? '更新失败' : '添加失败'))
+            }
+          }).catch(error => {
+            console.error('提交失败:', error)
+            this.$message.error(this.isEdit ? '更新失败，请稍后重试' : '添加失败，请稍后重试')
+          })
+        }
+      })
+    },
+
+    // 对话框关闭
+    handleDialogClose() {
+      this.$refs.customerForm.resetFields()
+    },
+
     // 导出客流
     handleExport() {
       const params = { ...this.queryParams }
@@ -488,6 +713,10 @@ export default {
   margin-bottom: 20px;
 }
 
+.action-container {
+  margin-bottom: 20px;
+}
+
 .view-container {
   margin-bottom: 20px;
 }
@@ -520,7 +749,6 @@ export default {
   border: 1px solid #e4e7ed;
   border-radius: 8px;
   padding: 16px;
-  cursor: pointer;
   transition: all 0.3s;
   background: #fff;
 }
@@ -597,4 +825,29 @@ export default {
   color: #303133;
   flex: 1;
 }
+
+.el-button--text {
+  padding: 0;
+  margin-right: 10px;
+}
+
+.el-button--text:last-child {
+  margin-right: 0;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.el-table .el-button--text {
+  font-size: 12px;
+}
+
+.el-table .el-button--text:hover {
+  color: #409EFF;
+}
+
+.el-table .el-button--text.el-button--danger:hover {
+  color: #F56C6C;
+}
 </style>

src/views/sales/index.vue

@@ -462,13 +462,10 @@ export default {
 
           if (response && response.code === 20000) {
             const backendResponse = response.data
-            if (backendResponse && backendResponse.success) {
+
             this.$message.success(backendResponse.message || '批量删除成功')
             this.selectedIds = []
             this.getList()
-            } else {
-              this.$message.error(backendResponse?.message || '批量删除失败')
-            }
           } else {
             this.$message.error(response?.message || '批量删除失败')
           }