1

src/components/common/customRight.vue

@@ -5,8 +5,7 @@
       <div class="custom_Top">
         <div class="custom_HLeft">
           <div class="nameplate_avatar">
-            <img style="width:100%;height:100%;"
-              :src="data.dataList.WeChatPhoto" alt="" />
+            <img style="width:100%;height:100%;" :src="data.dataList.WeChatPhoto" alt="" />
           </div>
           <div class="Name_List">
             <div class="F_16">{{data.dataList.CustomerName}}</div>
@@ -37,8 +36,8 @@
                 </div>
                 <div class="edit_content">
                   <div class="edit_info_wrap">
-                    <q-select filled option-value="Id" size="sm" v-model="cutomMsg.Value" option-label="Name" :options="data.customData"
-                      emit-value map-options label="请选择客户阶段" />
+                    <q-select filled option-value="Id" size="sm" v-model="cutomMsg.Value" option-label="Name"
+                      :options="data.customData" emit-value map-options label="请选择客户阶段" />
                   </div>
                 </div>
               </div>
@@ -55,7 +54,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -75,7 +75,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -95,7 +96,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -116,7 +118,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -138,7 +141,8 @@
                     <div class=""></div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -170,7 +174,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -202,7 +207,8 @@
                     <div class="item_label">{{item.Name}}</div>
                     <div>
                       <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
-                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
+                      <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
+                        @click="saveCustomInfo(item)" />
                     </div>
                   </div>
                   <div class="edit_content">
@@ -220,7 +226,7 @@
           </div>
           <div class="customTag_component">
             <div class="custom_Edit" @click="isshowlabel=true">编辑</div>
-            <div v-for="(tItem,tIndex) in data.dataList.LableList">
+            <div v-for="(tItem,tIndex) in data.dataList.LableList" :key="tIndex">
               <q-chip square color="primary" text-color="white">{{tItem.Name}}</q-chip>
             </div>
           </div>
@@ -249,7 +255,7 @@
           </div>
         </div>
         <div class="detail-travel">
-          <div style="margin:0 22px;">
+          <div class="detail_first">
             <q-tabs v-model="data.ckedTab" dense align="left" class="text-teal">
               <q-tab name="1" label="客户旅程" />
               <q-tab name="2" label="商机" />
@@ -258,50 +264,64 @@
               <q-tab name="5" label="合同" />
               <q-tab name="6" label="工单" />
             </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="primary">
-                <q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
-                  <template v-slot:title>
-                    <div style="font-size:14px;">{{tItem.Description}}</div>
-                  </template>
-                  <template v-slot:subtitle>
-                    <div class="customUpdateTime">
-                      <div>{{tItem.UpdateTime}}</div>
-                      <div>{{tItem.UpdateByName}}</div>
-                    </div>
-                  </template>
-                  <div>
-                    {{tItem.Remark}}
+            <div style="flex:1;overflow:hidden;">
+              <div class="detail_Main">
+                <div class="tripTypeContent" style="flex-shrink:0">
+                  <div v-for="(qItem,qIndex) in data.tripTypeArr" :key="qIndex"
+                    :class="{'ckedClass':qIndex==customTripMsg.Type}" @click="getckedType(qItem)">{{qItem.Name}}</div>
+                </div>
+                <div class="follow_Component" style="flex-shrink:0">
+                  <fileUpload></fileUpload>
+                  <!-- <div class="editer_input">
+                    <q-input v-model="text" style="50px" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
+                  </div> -->
+                </div>
+                <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
+                  <div class="TimeLineDiv">
+                    <q-timeline color="primary">
+                      <q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
+                        <template v-slot:title>
+                          <div style="font-size:14px;">{{tItem.Description}}</div>
+                        </template>
+                        <template v-slot:subtitle>
+                          <div class="customUpdateTime">
+                            <div>{{tItem.UpdateTime}}</div>
+                            <div>{{tItem.UpdateByName}}</div>
+                          </div>
+                        </template>
+                        <div>
+                          {{tItem.Remark}}
+                        </div>
+                      </q-timeline-entry>
+                    </q-timeline>
                   </div>
-                </q-timeline-entry>
-              </q-timeline>
+                </div>
+                <div style="margin:20px 0;">
+                  <q-pagination class="full-width justify-end" v-model="customTripMsg.pageIndex" color="primary"
+                  :max="data.TripPageCount" input @update:model-value="changePage" />
+                </div>
+              </div>
             </div>
           </div>
-          <q-pagination class="full-width justify-end" v-model="customTripMsg.pageIndex" color="primary" :max="data.TripPageCount"
-              :input="true" @update:model-value ="changePage" />
         </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>
+      <labelgroup v-if="isshowlabel" :list="LableList" @close="isshowlabel = false" @submit="getlabel"></labelgroup>
     </div>
   </q-dialog>
 </template>
 <script lang="ts">
-  import {ref,reactive,onMounted} from 'vue'
+  import {
+    ref,
+    reactive,
+    onMounted
+  } from 'vue'
   import message from '@/utils/message'
   import customer2 from '@/api/customer2'
   import labelgroup from '@/components/customer/label-group.vue'
+  import fileUpload from '@/components/common/fileUpload.vue'
   export default {
     props: {
       //样式字符串
@@ -311,11 +331,12 @@
       },
     },
     components: {
-      labelgroup
+      labelgroup,
+      fileUpload
     },
     setup(props, ctx) {
       let isshowlabel = ref(false) //标签弹出显示
-      let LableList = ref<Array<any> | string>([]) //标签的数组
+      let LableList = ref < Array < any > | string > ([]) //标签的数组
 
       interface msgParam {
         CustomerId: number
@@ -327,18 +348,18 @@
         CustomerId: props.CustomerId
       })
       //客户信息保存数据
-      const cutomMsg = reactive <dataParam> ({
+      const cutomMsg = reactive < dataParam > ({
         CustomerId: 0,
         Type: 2,
         CustomId: 0, //自定义字段Id
         Value: ''
       })
       //客户旅程分页列表
-      const customTripMsg = reactive <dataParam>({
-        pageIndex:1,
-        pageSize:10,
-        CustomerId:0,
-        Type:0
+      const customTripMsg = reactive < dataParam > ({
+        pageIndex: 1,
+        pageSize: 10,
+        CustomerId: 0,
+        Type: 0
       })
       const persistent = ref(true)
       const closeCutomer = () => {
@@ -349,12 +370,12 @@
         customData: [],
         FiledDetailList: [],
         isShowEdit: false,
-        multiArr:[],
-        ckedTab:'1',
-        First:1,
-        tripTypeArr:[],
-        tripDataList:[],
-        TripPageCount:0
+        multiArr: [],
+        ckedTab: '1',
+        First: 1,
+        tripTypeArr: [],
+        tripDataList: [],
+        TripPageCount: 0
       })
       //获取详情数据
       const getCustomInfo = (param: msgParam) => {
@@ -363,13 +384,13 @@
           data.FiledDetailList = res.data.Data.FiledDetailList;
           data.FiledDetailList.forEach(x => {
             x.isShowEdit = false;
-            if(x.Type==4){
+            if (x.Type == 4) {
               data.multiArr = x.Value.split(',')
-              data.multiArr = data.multiArr.map(item=>{
+              data.multiArr = data.multiArr.map(item => {
                 return +item;
               })
             }
-            if(x.Type==3){
+            if (x.Type == 3) {
               x.Value = parseInt(x.Value);
             }
           });
@@ -384,7 +405,7 @@
       }
       //点击切换编辑和查看
       const getCustomEdit = (type, e) => {
-        data.isShowEdit=false;
+        data.isShowEdit = false;
         data.FiledDetailList.forEach(x => {
           x.isShowEdit = false;
         });
@@ -396,27 +417,27 @@
         }
       }
       //点击单个保存自定义客户信息
-      const saveCustomInfo = (e) =>{
+      const saveCustomInfo = (e) => {
         cutomMsg.CustomerId = msg.CustomerId;
         cutomMsg.CustomId = e.Id;
         cutomMsg.Type = 2;
-        if(e.Type==4){
+        if (e.Type == 4) {
           cutomMsg.Value = data.multiArr.toString();
-        }else{
+        } else {
           cutomMsg.Value = e.Value;
         }
         customer2.saveCustomInfo(cutomMsg).then(res => {
           getCustomInfo(msg);
           message.successMsg(res.data.Message);
-        })        
+        })
       }
-      const getCustomCancel = (e) =>{
+      const getCustomCancel = (e) => {
         e.isShowEdit = !e.isShowEdit;
       }
-      const saveCustomGate = () =>{
+      const saveCustomGate = () => {
         cutomMsg.CustomerId = msg.CustomerId;
         cutomMsg.Type = 1;
-        cutomMsg.CustomId=0;
+        cutomMsg.CustomId = 0;
         customer2.saveCustomInfo(cutomMsg).then(res => {
           getCustomInfo(msg);
           data.isShowEdit = false;
@@ -424,24 +445,24 @@
         })
       }
       //获取单选值
-      const getSingle = (e) =>{
-        if(e.Value&&e.OptionsList.length>0){
-         const ckedObj = e.OptionsList.find((x:any)=>{
-           return x.Id == e.Value
-         })
-         if(ckedObj){
-           return ckedObj.Name
-         }
+      const getSingle = (e) => {
+        if (e.Value && e.OptionsList.length > 0) {
+          const ckedObj = e.OptionsList.find((x: any) => {
+            return x.Id == e.Value
+          })
+          if (ckedObj) {
+            return ckedObj.Name
+          }
         }
       }
       //获取多选
-      const getMutipleCk = (e) =>{
-        if(e.Value&&e.OptionsList.length>0){
+      const getMutipleCk = (e) => {
+        if (e.Value && e.OptionsList.length > 0) {
           const ValArr = e.Value.split(',');
           let myArr: any[] = [];
-          for(let i=0;i<ValArr.length;i++){
-            for(let j=0;j<e.OptionsList.length;j++){
-              if(ValArr[i]==e.OptionsList[j].Id){
+          for (let i = 0; i < ValArr.length; i++) {
+            for (let j = 0; j < e.OptionsList.length; j++) {
+              if (ValArr[i] == e.OptionsList[j].Id) {
                 myArr.push(e.OptionsList[j].Name);
               }
             }
@@ -453,12 +474,12 @@
         isshowlabel.value = false;
         console.log(list);
         const labelMsg = reactive < dataParam > ({
-          CustomerIds:0,
-          LableIds:''
+          CustomerIds: 0,
+          LableIds: ''
         })
         labelMsg.CustomerIds = msg.CustomerId;
-        let ckedArr : any[] = [];
-        list.forEach(x=>{
+        let ckedArr: any[] = [];
+        list.forEach(x => {
           ckedArr.push(x.Id);
         })
         labelMsg.LableIds = ckedArr.toString();
@@ -468,28 +489,28 @@
         })
       }
       //获取客户旅程类型
-      const getCustomerTripType = (param: {}) =>{
+      const getCustomerTripType = (param: {}) => {
         customer2.getCustomerTripType(param).then(res => {
-          console.log(res,'trip数据');
+          console.log(res, 'trip数据');
           data.tripTypeArr = res.data.Data;
           let Obj = {
-            Id:0,
-            Name:'全部'
+            Id: 0,
+            Name: '全部'
           }
           data.tripTypeArr.unshift(Obj);
         })
       }
       //点击旅客类型
       const getckedType = (e) => {
-        console.log(e,'eee');
+        console.log(e, 'eee');
         customTripMsg.CustomerId = msg.CustomerId;
         customTripMsg.Type = e.Id;
         getCustomerPage();
       }
       //获取客户旅程分页列表
-      const getCustomerPage = () =>{
-        customer2.getCustomerTripPage(customTripMsg).then(res=>{
-          console.log(res,'旅程分页数据');
+      const getCustomerPage = () => {
+        customer2.getCustomerTripPage(customTripMsg).then(res => {
+          console.log(res, '旅程分页数据');
           data.tripDataList = res.data.Data.PageData;
           data.TripPageCount = res.data.Data.PageCount;
         })
@@ -603,9 +624,11 @@
     border-radius: 8px 8px 0 0;
     overflow: auto;
   }
-  .detail-info::-webkit-scrollbar{
+
+  .detail-info::-webkit-scrollbar {
     display: none;
   }
+
   .detail-travel {
     width: 100%;
     flex-grow: 1;
@@ -674,23 +697,27 @@
   .edit_info_wrap {
     padding: 0 22px 12px;
   }
-  .info_item{
+
+  .info_item {
     position: relative;
     display: flex;
     padding: 12px 22px;
   }
-  .item_value{
+
+  .item_value {
     flex: 1;
     font-size: 14px;
     word-break: break-all;
     overflow: hidden;
   }
-  .custom_Line{
+
+  .custom_Line {
     width: calc(100% - 44px);
     margin: 16px 22px;
     border-bottom: 1px solid #d7d7d7;
   }
-  .custom_Edit{
+
+  .custom_Edit {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -702,57 +729,99 @@
     font-size: 12px;
     cursor: pointer;
   }
-  .dialog-out-close{
+
+  .dialog-out-close {
     background-color: #3470ff;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     width: 20px;
     height: 26px;
-    color:#fff;
+    color: #fff;
     cursor: pointer;
     position: absolute;
     top: 0;
     left: -20px;
     text-align: center;
   }
-  .customTag_component{
-    margin-bottom:20px;
+
+  .customTag_component {
+    margin-bottom: 20px;
     display: flex;
-    flex-wrap:wrap;
+    flex-wrap: wrap;
     align-items: center;
-    padding:12px 22px;
+    padding: 12px 22px;
   }
-  .tripTypeContent{
+
+  .tripTypeContent {
     display: flex;
-    margin-top:20px;
+    margin-top: 20px;
     overflow-x: auto;
     white-space: nowrap;
   }
-  .ckedClass{
-    color:#3470ff;
+
+  .ckedClass {
+    color: #3470ff;
     font-weight: 700;
   }
-  .tripTypeContent div{
-    margin-right:20px;
+
+  .tripTypeContent div {
+    margin-right: 20px;
     cursor: pointer;
   }
-  .TimeLineDiv{
-    margin-top:20px;
+
+  .TimeLineDiv {
+    margin-top: 20px;
     overflow: auto;
-    height:620px;
-    padding-right:20px;
+    // height:620px;
+    flex: 1;
+    height: 100%;
+    padding-right: 20px;
   }
-  .q-timeline__title{
-    margin-bottom:5px;
+
+  .q-timeline__title {
+    margin-bottom: 5px;
   }
-  .customUpdateTime{
+
+  .customUpdateTime {
     display: flex;
     justify-content: space-between;
-    font-size:14px;
-    color:#9696a6;
+    font-size: 14px;
+    color: #9696a6;
   }
-  .q-timeline__subtitle{
+
+  .q-timeline__subtitle {
     opacity: 1;
     font-weight: normal;
   }
+
+  .follow_Component {
+    padding: 0 22px;
+    margin-top: 10px;
+    width: 100%;
+    background-color: #f6f6f6;
+    border-radius: 5px;
+  }
+
+
+  .q-textarea .q-field__native {
+    padding-top: 0;
+  }
+
+  // .q-field__native {
+  //   height: 50px;
+  // }
+  .detail_first{
+    margin:0 22px;
+    display:flex;
+    flex-direction:column;
+    height:100%;
+  }
+  .detail_Main{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding-top: 10px;
+    overflow: hidden;
+  }
 </style>