1

src/App.vue

@@ -10,5 +10,5 @@ export default defineComponent({
 </script>
 <style lang="sass">
 @import url('./css/font.sass')
-@import url('//at.alicdn.com/t/font_2930340_td0kzqw2z1.css')
+@import url('//at.alicdn.com/t/font_2930340_dn2rgl17m5t.css')
 </style>

src/components/common/customRight.vue

 <template>
-  <q-dialog v-model="persistent" full-height maximized position="right" persistent @hide="closeShenheForm"
+  <q-dialog v-model="persistent" full-height maximized position="right" persistent @hide="closeCutomer"
     transition-show="slide-left">
     <div class="customMain">
       <div class="custom_Top">
@@ -14,7 +14,7 @@
           </div>
         </div>
         <div class="custom_HRight">
-          <q-btn color="primary" label="创建待办" />
+          <q-btn color="primary" size="sm" label="创建待办" />
         </div>
       </div>
       <div class="custom_Bottom">
@@ -43,7 +43,7 @@
                 </div>
               </div>
             </div>
-            <div class="customer_info_component" v-for="(item,index) in data.FiledDetailList">
+            <div class="customer_info_component" v-for="(item,index) in data.FiledDetailList" :key="index">
               <!-- 1单行文本 2多行文本 3单选 4多选 5日期 6日期时间 7数值 -->
               <template v-if="item.Type==1">
                 <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
@@ -54,13 +54,13 @@
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
                   <div class="edit_content">
                     <div class="edit_info_wrap">
-                      <q-input filled v-model="item.value" placeholder="请输入要修改的值"></q-input>
+                      <q-input filled v-model="item.Value" placeholder="请输入要修改的值"></q-input>
                     </div>
                   </div>
                 </div>
@@ -74,13 +74,13 @@
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
                   <div class="edit_content">
                     <div class="edit_info_wrap">
-                      <q-input filled v-model="item.value" maxlength="50" placeholder="请输入要修改的值"></q-input>
+                      <q-input filled v-model="item.Value" maxlength="50" placeholder="请输入要修改的值"></q-input>
                     </div>
                   </div>
                 </div>
@@ -88,19 +88,19 @@
               <template v-if="item.Type==3">
                 <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                   <div class="stage_label">{{item.Name}}</div>
-                  <div class="stage_value"></div>
+                  <div class="stage_value">{{getSingle(item)}}</div>
                 </div>
                 <div class="customer_info_edit" v-else>
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
                   <div class="edit_content">
                     <div class="edit_info_wrap">
-                      <q-select filled option-value="Id" size="sm" v-model="item.value" option-label="Name"
+                      <q-select filled option-value="Id" size="sm" v-model="item.Value" option-label="Name"
                         :options="item.OptionsList" emit-value map-options label="请选择" />
                     </div>
                   </div>
@@ -109,19 +109,19 @@
               <template v-if="item.Type==4">
                 <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                   <div class="stage_label">{{item.Name}}</div>
-                  <div class="stage_value"></div>
+                  <div class="stage_value">{{getMutipleCk(item)}}</div>
                 </div>
                 <div class="customer_info_edit" v-else>
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
                   <div class="edit_content">
                     <div class="edit_info_wrap">
-                      <q-select filled multiple use-chips option-value="Id" size="sm" v-model="item.CkValue"
+                      <q-select filled multiple use-chips option-value="Id" size="sm" v-model="data.multiArr"
                         option-label="Name" :options="item.OptionsList" emit-value map-options label="请选择" />
                     </div>
                   </div>
@@ -130,13 +130,14 @@
               <template v-if="item.Type==5">
                 <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                   <div class="stage_label">{{item.Name}}</div>
-                  <div class="stage_value"></div>
+                  <div class="stage_value">{{item.Value}}</div>
                 </div>
                 <div class="customer_info_edit" v-else>
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
+                    <div class=""></div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
@@ -162,13 +163,13 @@
               <template v-if="item.Type==6">
                 <div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
                   <div class="stage_label">{{item.Name}}</div>
-                  <div class="stage_value"></div>
+                  <div class="stage_value">{{item.Value}}</div>
                 </div>
                 <div class="customer_info_edit" v-else>
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
@@ -200,13 +201,13 @@
                   <div class="edit_bar">
                     <div class="item_label">{{item.Name}}</div>
                     <div>
-                      <q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
+                      <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)" />
                     </div>
                   </div>
                   <div class="edit_content">
                     <div class="edit_info_wrap">
-                      <q-input filled v-model="item.value" maxlength="20" placeholder="数值"></q-input>
+                      <q-input filled v-model="item.Value" maxlength="20" placeholder="数值"></q-input>
                     </div>
                   </div>
                 </div>
@@ -248,11 +249,10 @@
 
         </div>
       </div>
+      <div class="dialog-out-close" @click="closeCutomer">
+        <q-icon name="iconfont icon-close" size="15px" />
+      </div>
     </div>
-    <!-- <div class="dialog-out-close" @click="closeProcess"
-      style="position:absolute;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;top:0;left:-30px;">
-      <q-icon name="iconfont icon-target-full" size="26px" />
-    </div> -->
   </q-dialog>
 </template>
 <script lang="ts">
@@ -264,7 +264,7 @@
       //样式字符串
       CustomerId: {
         type: Number,
-        default: ''
+        default: 0
       },
     },
     setup(props, ctx) {
@@ -293,6 +293,7 @@
         customData: [],
         FiledDetailList: [],
         isShowEdit: false,
+        multiArr:[]
       })
       //获取详情数据
       const getCustomInfo = (param: msgParam) => {
@@ -302,11 +303,14 @@
           data.FiledDetailList.forEach(x => {
             x.isShowEdit = false;
             if(x.Type==4){
-              x.CkValue=x.Value.split(',');
-              x.CkValue = x.CkValue.map(item=>{
+              data.multiArr = x.Value.split(',')
+              data.multiArr = data.multiArr.map(item=>{
                 return +item;
               })
             }
+            if(x.Type==3){
+              x.Value = parseInt(x.Value);
+            }
           });
           cutomMsg.Value = data.dataList.StageId;
         })
@@ -314,12 +318,12 @@
       //获取客户阶段下拉
       const getCustomStage = (param: {}) => {
         customer2.getCustomStageList(param).then(res => {
-          console.log(res, '下拉数据');
           data.customData = res.data.Data;
         })
       }
       //点击切换编辑和查看
       const getCustomEdit = (type, e) => {
+        data.isShowEdit=false;
         data.FiledDetailList.forEach(x => {
           x.isShowEdit = false;
         });
@@ -328,32 +332,62 @@
         }
         if (type == 2) {
           e.isShowEdit = !e.isShowEdit;
-          console.log(e);
         }
       }
       //点击单个保存自定义客户信息
       const saveCustomInfo = (e) =>{
-        if(e.Type==4){
-          e.CkValue=e.CkValue.toString();
-        }
         cutomMsg.CustomerId = msg.CustomerId;
         cutomMsg.CustomId = e.Id;
         cutomMsg.Type = 2;
-        cutomMsg.Value = e.CkValue;
+        if(e.Type==4){
+          cutomMsg.Value = data.multiArr.toString();
+        }else{
+          cutomMsg.Value = e.Value;
+        }
         customer2.saveCustomInfo(cutomMsg).then(res => {
           getCustomInfo(msg);
           message.successMsg(res.data.Message);
         })        
       }
+      const getCustomCancel = (e) =>{
+        e.isShowEdit = !e.isShowEdit;
+      }
       const saveCustomGate = () =>{
         cutomMsg.CustomerId = msg.CustomerId;
         cutomMsg.Type = 1;
         cutomMsg.CustomId=0;
         customer2.saveCustomInfo(cutomMsg).then(res => {
           getCustomInfo(msg);
+          data.isShowEdit = false;
           message.successMsg(res.data.Message);
         })
       }
+      //获取单选值
+      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 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){
+                myArr.push(e.OptionsList[j].Name);
+              }
+            }
+          }
+          return myArr.toString();
+        }
+      }
       onMounted(() => {
         getCustomInfo(msg);
         getCustomStage({});
@@ -365,7 +399,10 @@
         cutomMsg,
         getCustomEdit,
         saveCustomInfo,
-        saveCustomGate
+        saveCustomGate,
+        getCustomCancel,
+        getSingle,
+        getMutipleCk
       }
     }
   }
@@ -384,7 +421,6 @@
     height: 100 vh;
     padding: 15px 17px 0 17px;
     background-color: #f4f4f6;
-    overflow: hidden;
   }
 
   .custom_Top {
@@ -547,5 +583,17 @@
     font-size: 12px;
     cursor: pointer;
   }
-
+  .dialog-out-close{
+    background-color: #3470ff;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    width: 20px;
+    height: 26px;
+    color:#fff;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: -20px;
+    text-align: center;
+  }
 </style>