2

src/api/customer2.ts

@@ -89,7 +89,30 @@ class CustomerService {
       data
     })
   }
-
+  //保存客户标签
+  static async saveCustomLabel(data: any): Promise<HttpResponse> {
+    return Axios('/QYCustomer/SetCustomerLabelBatch', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
+  //获取客户旅程类型枚举列表
+  static async getCustomerTripType(data: any): Promise<HttpResponse> {
+    return Axios('/QYCustomer/GetCustomerTripTypeEnumList', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
+  //获取客户旅程分页列表
+  static async getCustomerTripPage(data: any): Promise<HttpResponse> {
+    return Axios('/QYCustomer/GetCustomerTripPageList', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
 }
 export {CutomerParams}
 export default CustomerService

src/components/common/customRight.vue

@@ -218,8 +218,11 @@
           <div class="info_item">
             <div class="item_label">客户标签</div>
           </div>
-          <div class="info_item" style="margin-bottom:20px;">
-            <div class="custom_Edit">编辑</div>
+          <div class="customTag_component">
+            <div class="custom_Edit" @click="isshowlabel=true">编辑</div>
+            <div v-for="(tItem,tIndex) in data.dataList.LableList">
+              <q-chip square color="primary" text-color="white">{{tItem.Name}}</q-chip>
+            </div>
           </div>
           <div class="info_title">客户跟进</div>
           <div class="info_content">
@@ -246,12 +249,49 @@
           </div>
         </div>
         <div class="detail-travel">
-
+          <div style="margin:0 22px;">
+            <q-tabs v-model="data.ckedTab" dense align="left" class="bg-grey-2 text-teal">
+              <q-tab name="1" label="客户旅程" />
+              <q-tab name="2" label="商机" />
+              <q-tab name="3" label="订单" />
+              <q-tab name="4" label="客户文件" />
+              <q-tab name="5" label="合同" />
+              <q-tab name="6" label="工单" />
+            </q-tabs>
+            <!-- <q-tabs v-model="data.First">
+              <q-tab v-for="(qItem,qIndex) in data.tripTypeArr" :name="qItem.Id" :label="qItem.Name" :key="qIndex"></q-tab>
+            </q-tabs> -->
+            <div class="tripTypeContent">
+              <div v-for="(qItem,qIndex) in data.tripTypeArr" :key="qIndex" :class="{'ckedClass':qIndex==customTripMsg.Type}" 
+              @click="getckedType(qItem)">{{qItem.Name}}</div>
+            </div>
+            <div class="TimeLineDiv">
+              <q-timeline color="secondary">
+                <q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
+                  <template v-slot:title>
+                    {{tItem.Remark}}
+                  </template>
+                  <template v-slot:subtitle>
+                    {{tItem.UpdateTime}}
+                  </template>
+                  <div>
+                    {{tItem.Description}}
+                  </div>
+                </q-timeline-entry>
+              </q-timeline>
+            </div>
+          </div>
         </div>
       </div>
       <div class="dialog-out-close" @click="closeCutomer">
         <q-icon name="iconfont icon-close" size="15px" />
       </div>
+      <labelgroup
+        v-if="isshowlabel"
+        :list="LableList"
+        @close="isshowlabel = false"
+        @submit="getlabel"
+      ></labelgroup>
     </div>
   </q-dialog>
 </template>
@@ -259,6 +299,7 @@
   import {ref,reactive,onMounted} from 'vue'
   import message from '@/utils/message'
   import customer2 from '@/api/customer2'
+  import labelgroup from '@/components/customer/label-group.vue'
   export default {
     props: {
       //样式字符串
@@ -267,7 +308,13 @@
         default: 0
       },
     },
+    components: {
+      labelgroup
+    },
     setup(props, ctx) {
+      let isshowlabel = ref(false) //标签弹出显示
+      let LableList = ref<Array<any> | string>([]) //标签的数组
+
       interface msgParam {
         CustomerId: number
       }
@@ -284,6 +331,13 @@
         CustomId: 0, //自定义字段Id
         Value: ''
       })
+      //客户旅程分页列表
+      const customTripMsg = reactive <dataParam>({
+        pageIndex:1,
+        pageSize:10,
+        CustomerId:0,
+        Type:0
+      })
       const persistent = ref(true)
       const closeCutomer = () => {
         ctx.emit('close');
@@ -293,7 +347,11 @@
         customData: [],
         FiledDetailList: [],
         isShowEdit: false,
-        multiArr:[]
+        multiArr:[],
+        ckedTab:'1',
+        First:1,
+        tripTypeArr:[],
+        tripDataList:[]
       })
       //获取详情数据
       const getCustomInfo = (param: msgParam) => {
@@ -388,9 +446,55 @@
           return myArr.toString();
         }
       }
+      const getlabel = (list) => {
+        isshowlabel.value = false;
+        console.log(list);
+        const labelMsg = reactive < dataParam > ({
+          CustomerIds:0,
+          LableIds:''
+        })
+        labelMsg.CustomerIds = msg.CustomerId;
+        let ckedArr : any[] = [];
+        list.forEach(x=>{
+          ckedArr.push(x.Id);
+        })
+        labelMsg.LableIds = ckedArr.toString();
+        customer2.saveCustomLabel(labelMsg).then(res => {
+          getCustomInfo(msg);
+          message.successMsg(res.data.Message);
+        })
+      }
+      //获取客户旅程类型
+      const getCustomerTripType = (param: {}) =>{
+        customer2.getCustomerTripType(param).then(res => {
+          console.log(res,'trip数据');
+          data.tripTypeArr = res.data.Data;
+          let Obj = {
+            Id:0,
+            Name:'全部'
+          }
+          data.tripTypeArr.unshift(Obj);
+        })
+      }
+      //点击旅客类型
+      const getckedType = (e) => {
+        console.log(e,'eee');
+        customTripMsg.CustomerId = msg.CustomerId;
+        customTripMsg.Type = e.Id;
+        getCustomerPage();
+      }
+      //获取客户旅程分页列表
+      const getCustomerPage = () =>{
+        customer2.getCustomerTripPage(customTripMsg).then(res=>{
+          console.log(res,'旅程分页数据');
+          data.tripDataList = res.data.Data.PageData;
+        })
+      }
       onMounted(() => {
         getCustomInfo(msg);
         getCustomStage({});
+        getCustomerTripType({})
+        getCustomerPage();
       })
       return {
         persistent,
@@ -402,7 +506,13 @@
         saveCustomGate,
         getCustomCancel,
         getSingle,
-        getMutipleCk
+        getMutipleCk,
+        isshowlabel,
+        LableList,
+        getlabel,
+        getCustomerTripType,
+        customTripMsg,
+        getckedType
       }
     }
   }
@@ -596,4 +706,40 @@
     left: -20px;
     text-align: center;
   }
+  .customTag_component{
+    margin-bottom:20px;
+    display: flex;
+    flex-wrap:wrap;
+    align-items: center;
+    padding:12px 22px;
+  }
+  .tripTypeContent{
+    display: flex;
+    margin-top:20px;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .tripTypeContent::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 5px;
+  }
+  .tripTypeContent::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 8px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: #dddddd;
+  }
+  .ckedClass{
+    color:#3470ff;
+    font-weight: 700;
+  }
+  .tripTypeContent div{
+    margin-right:20px;
+    cursor: pointer;
+  }
+  .TimeLineDiv{
+    margin-top:20px;
+    overflow: auto;
+    height:620px;
+  }
+  // .TimeLineDiv
 </style>