页面修改

src/components/activity/CouponList.vue

@@ -30,7 +30,7 @@
     text-align: left;
     padding: 0 10px;
   }
-  
+
   ._TravelPricePopover .ScenicDiv {
     width: 100%;
     max-height: 300px;
@@ -242,10 +242,10 @@
                 @click="outerVisible=true,EditItem(item)"></el-button>
             </el-tooltip>
 
-            <!-- <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top">
+            <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top">
               <el-button v-if="EditBtn" type="danger" icon="iconfont icon-caidan-fill" circle style="padding:4px;"
                 @click="autoCouponDialog=true,AutoGrantCounItem(item)"></el-button>
-            </el-tooltip> -->
+            </el-tooltip>
           </td>
         </tr>
       </tbody>
@@ -468,13 +468,13 @@
     </el-dialog>
 
 
-    <el-dialog custom-class='w500' title="发放优惠券" :visible.sync="autoCouponDialog" center >
+    <el-dialog custom-class='w500' title="发放优惠券" :visible.sync="autoCouponDialog" center>
       <el-form :model="grantCouponMsg" :rules="rules" ref="grantCouponMsg" label-width="100px" class="addBox">
         <el-form-item label="优惠券名称">
           <p>{{grantCouponMsg.couponsName}}</p>
         </el-form-item>
         <el-form-item label="优惠券类型">
-       <p>{{grantCouponMsg.couponsType==1?"抵用券":(grantCouponMsg.couponsType==2?"折扣卷":"")}}</p>
+          <p>{{grantCouponMsg.couponsType==1?"抵用券":(grantCouponMsg.couponsType==2?"折扣卷":"")}}</p>
         </el-form-item>
         <el-form-item label="使用条件">
           <p>{{grantCouponMsg.useCondition}}</p>
@@ -486,43 +486,48 @@
           <el-input class="w180" v-model="grantCouponMsg.customerInfo" @keyup.enter.native="getCustomerBrandByKeyWord">
           </el-input>
        </el-form-item> -->
-       <el-form-item label="选择人员" prop="customerIds">
-        
-          <div>
-          
-            <el-popover trigger="click" placement="bottom-start">
-            <div class="_TravelPricePopover" style="height: 300px;overflow: auto;width: 350px;" v-="xuanzeCustomer">
-              <div class="ScenicDiv"  >
-                <table width="100%" border="0" cellspacing="0" cellpadding="0"  >
-                            <tr>
-                              <td class="_color_666">选择</td>
-                              <td class="_color_666">客户名称</td>
-                              <td class="_color_666">联系电话</td>
-                            </tr>
-                            <tr v-for="fitem in customerList">
-                              <td>
-                                <el-checkbox  @change="getSelect(fitem)"></el-checkbox>
-                              </td>
-                              <td>
-                                {{fitem.customerName}}
-                              </td>
-                              <td>
-                              {{fitem.contact}}
-                              </td>
-                            </tr>
-                          </table>
-              </div>
-            </div>
-            <div slot="reference" style="padding: 0 4px;">
-              <el-input class="w180" v-model="grantCouponMsg.customerInfo" >
-               </el-input>
-               <el-button size="small" type="danger" @click="getCustomerBrandByKeyWord()">查询</el-button>
-            </div>
-          </el-popover>
-        </div>
-       </el-form-item> 
-       
-     
+        <el-form-item label="选择人员" prop="customerIds">
+          <template v-if="customerList&&customerList.length>0">
+            <template v-for="(item,index) in customerList">
+              <template v-if="item.ischecked">
+                <el-tag :key="index+10000" closable @close="deleteTag(item)">{{item.customerName}}({{item.contact}})
+                </el-tag>
+              </template>
+
+            </template>
+          </template>
+          <!--v-if="xuanzeCustomer"-->
+          <el-popover trigger="click" placement="bottom-start">
+            <div class="_TravelPricePopover" style="height: 300px;overflow: auto;width: 350px;">
+              <div class="ScenicDiv">
+                <el-input class="w180" v-model="grantCouponMsg.customerInfo"
+                  @keypress.native.enter="getCustomerBrandByKeyWord" placeholder="请输入关键字，'回车'查询">
+                </el-input>
+                <table width="100%" border="0" cellspacing="0" cellpadding="0" v-loading="xuanzeCustomerLoading">
+                  <tr>
+                    <td class="_color_666">选择</td>
+                    <td class="_color_666">客户名称</td>
+                    <td class="_color_666">联系电话</td>
+                  </tr>
+                  <tr v-for="(fitem,fIndex) in customerList" :key="fIndex">
+                    <td>
+                      <el-checkbox @change="getSelect(fitem)" v-model="fitem.ischecked"></el-checkbox>
+                    </td>
+                    <td>
+                      {{fitem.customerName}}
+                    </td>
+                    <td>
+                      {{fitem.contact}}
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+            <div slot="reference" style="padding: 0 4px;">
+              <el-button size="small" type="danger">查询</el-button>
+            </div>
+          </el-popover>
+        </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="autoCouponDialog = false">取 消</el-button>
@@ -575,8 +580,8 @@
         outerVisible: false,
         innerVisible: false,
         updateKucundialog: false,
-        autoCouponDialog:false,
-        xuanzeCustomer:false,
+        autoCouponDialog: false,
+        xuanzeCustomerLoading: false,
         isRight: true,
         dialogTitle: "",
         insideDialogTxt: "",
@@ -696,7 +701,7 @@
         CouponPlatformEnumList: [],
         companyList: [],
         customerList: [],
-        layerCustomerList:[],
+        layerCustomerList: [],
         layerDepartMentList: [],
         departMentList: [],
         PostList: [],
@@ -718,12 +723,12 @@
           couponsUseScope: 1,
           couponStatus: 1,
           redemptionPrice: '',
-          denomination:0,
+          denomination: 0,
           isExpansion: 0,
-          customerIds:'',
-          customerIdList:[],
-          customerType:0,
-          customerInfo:""
+          customerIds: '',
+          customerIdList: [],
+          customerType: 0,
+          customerInfo: ""
         },
         EditBtn: false,
       };
@@ -743,6 +748,13 @@
 
     },
     methods: {
+      //删除客户标签
+      deleteTag(item) {
+        item.ischecked=false;
+      },
+      getSelect(item) {
+
+      },
       getcouponPriceList() {
         this.addMsg.couponPriceList = []
         this.addMsg.couponPriceLists.forEach(item => {
@@ -802,9 +814,8 @@
       },
       //发放优惠券
       AutoGrantCounItem(item) {
-        
         this.grantCouponMsg = Object.assign({}, item);
-console.log("grantCouponMsg", this.grantCouponMsg);
+        console.log("grantCouponMsg", this.grantCouponMsg);
       },
       //点击确定修改库存
       sureUpdatekucun() {
@@ -831,17 +842,23 @@ console.log("grantCouponMsg", this.grantCouponMsg);
           }
         );
       },
+      //查询客户
       getCustomerBrandByKeyWord() {
-        
+        this.xuanzeCustomerLoading = true;
+        this.customerList = [];
         this.apipost(
           "app_post_GetCustomerBrandByKeyWord",
           this.grantCouponMsg,
           res => {
+            this.xuanzeCustomerLoading = false;
             if (res.data.resultCode == 1) {
-              this.layerCustomerList = res.data.data;
-              this.customerList = res.data.data;
-              this.xuanzeCustomer=true;
-              console.log("customerList",this.xuanzeCustomer);
+              var tempData = res.data.data;
+              if (tempData && tempData.length > 0) {
+                tempData.forEach(item => {
+                  item.ischecked = false;
+                })
+              }
+              this.customerList = tempData;
             }
           }
         );