客户管理AI分析改为侧边栏展示

src/views/crm/customer/customerDetail.vue

@@ -294,6 +294,17 @@ import {listByCustomerId} from "../../../api/crm/customerProperty";
 import {listAnalyze} from "../../../api/crm/customerAnalyze";
 
 export default {
+    props: {
+        // 抽屉模式下由父页面传入；路由模式下可不传
+        customerId: {
+            type: [String, Number],
+            default: null
+        },
+        customerRow: {
+            type: Object,
+            default: null
+        }
+    },
     data() {
         return {
             customerUserId: null, // 客户 ID，从路由参数获取
@@ -372,23 +383,43 @@ export default {
         }
     },
     created() {
-        // 从路由参数获取客户 ID
-        this.customerUserId = this.$route.params.customerId || this.$route.query.customerUserId;
-
-        // 从 query 参数获取列表页传递的完整客户数据
-        if (this.$route.query.customerData) {
-            try {
-                this.customerData = JSON.parse(this.$route.query.customerData);
-            } catch (error) {
-                console.error('解析客户数据失败:', error);
+        this.initFromParentOrRoute();
+    },
+    watch: {
+        customerId: {
+            immediate: false,
+            handler() {
+                // 抽屉重复打开/切换客户时刷新
+                this.initFromParentOrRoute();
             }
         }
-        // 获取客户标签
-        this.loadCustomerTags();
-        //加载客户分析信息
-        this.getCustomerInfoList();
     },
     methods: {
+        initFromParentOrRoute() {
+            // 优先用父组件传参（抽屉模式）
+            const idFromParent = this.customerId;
+            if (idFromParent !== null && idFromParent !== undefined && idFromParent !== '') {
+                this.customerUserId = idFromParent;
+                this.customerData = this.customerRow || null;
+            } else {
+                // 路由模式兜底
+                this.customerUserId = this.$route.params.customerId || this.$route.query.customerUserId;
+                if (this.$route.query.customerData) {
+                    try {
+                        this.customerData = JSON.parse(this.$route.query.customerData);
+                    } catch (error) {
+                        console.error('解析客户数据失败:', error);
+                    }
+                }
+            }
+
+            // 重置分页（切换客户时）
+            this.communicationRecordsPageNum = 1;
+            // 获取客户标签
+            this.loadCustomerTags();
+            // 加载客户分析信息
+            this.getCustomerInfoList();
+        },
         loadCustomerTags() {
             listByCustomerId(this.customerUserId).then((response) => {
                 if (response.code === 200) {

src/views/crm/customer/index.vue

@@ -304,7 +304,7 @@
                 v-if="scope.row.attritionLevel !== null && scope.row.attritionLevel !== undefined"
                 size="mini"
                 type="text"
-                @click="toDetailPage(scope.row)"
+                @click="openAiDrawer(scope.row)"
                 v-hasPermi="['crm:analyze:list']"
               >AI 分析</el-button>
               <el-button
@@ -338,6 +338,19 @@
         <customer-details  ref="customerDetails" />
     </el-drawer>
 
+    <el-drawer
+      size="75%"
+      :title="aiAnalyze.title"
+      :visible.sync="aiAnalyze.open"
+      append-to-body
+    >
+      <customer-detail
+        ref="customerAiDetail"
+        :customer-id="aiAnalyze.customerId"
+        :customer-row="aiAnalyze.customerRow"
+      />
+    </el-drawer>
+
 
 
     <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="1000px" append-to-body>
@@ -385,6 +398,7 @@
 import { assignToUser,recover,receive,getCustomerList ,addCustomer,updateCustomer,getCustomerDetails,exportCustomer,importVisitTemplate } from "@/api/crm/customer";
 import { getToken } from "@/utils/auth";
 import customerDetails from '../components/customerDetails.vue';
+import customerDetail from './customerDetail.vue';
 import {getCitys} from "@/api/store/city";
 import { treeselect } from "@/api/company/companyDept";
 import Treeselect from "@riophae/vue-treeselect";
@@ -396,7 +410,7 @@ import customerAssignList from '../components/customerAssignList.vue';
 import assignUser from '../components/assignUser.vue';
 export default {
   name: "Customer",
-  components: {assignUser,customerAssignList,addBatchSms,editSource, customerDetails,Treeselect,customerSource },
+  components: {assignUser,customerAssignList,addBatchSms,editSource, customerDetails, customerDetail, Treeselect,customerSource },
   data() {
     return {
       upload: {
@@ -462,6 +476,12 @@ export default {
         title:"客户详情",
         open:false,
       },
+      aiAnalyze: {
+        title: "AI 分析",
+        open: false,
+        customerId: null,
+        customerRow: null,
+      },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -579,13 +599,10 @@ export default {
     this.getList();
   },
   methods: {
-    toDetailPage(row) {
-      this.$router.push({
-        path: '/crm/customer/detail/' + row.customerId,
-        query: {
-          customerData: JSON.stringify(row)
-        }
-      });
+    openAiDrawer(row) {
+      this.aiAnalyze.customerId = row.customerId;
+      this.aiAnalyze.customerRow = row;
+      this.aiAnalyze.open = true;
     },
     handleShow(row){
       this.show.open=true;