1

src/pages/activity/useActivityStepThree.vue

@@ -1,45 +1,35 @@
 <template>
   <div style="padding: 0 40px;">
     <div class="selectClass">
-      <Checkbox :indeterminate="indeterminate"
-                :value="allSelect"
-                @click.prevent.native="handleCheckAll">&nbsp;&nbsp;&nbsp;全选</Checkbox>
-      <i-input icon="search"
-               @on-change="doSearch"
-               placeholder="请输入店铺名称"
-               style="width: 250px"></i-input>
+      <Checkbox
+        :indeterminate="indeterminate"
+        :value="allSelect"
+        @click.prevent.native="handleCheckAll"
+      >&nbsp;&nbsp;&nbsp;全选</Checkbox>
+      <i-input icon="search" @on-change="doSearch" placeholder="请输入店铺名称" style="width: 250px"></i-input>
     </div>
     <div class="companyTable">
       <div class="companyListClass">
         <Row :gutter="10">
-          <div v-if="loading"
-               style="padding: 50px 0"
-               class="loading">
+          <div v-if="loading" style="padding: 50px 0" class="loading">
             <Spin fix>加载中...</Spin>
           </div>
-          <CheckboxGroup size="large"
-                         @on-change="onChange"
-                         v-model="isSelect">
-            <i-col span="8"
-                   v-if="!item.hide && index < block"
-                   :key="index"
-                   v-for="(item, index) in shopList">
-              <Checkbox size="large"
-                        :label="item.value"
-                        border>
+          <CheckboxGroup size="large" @on-change="onChange" v-model="isSelect">
+            <i-col
+              span="8"
+              v-if="!item.hide && index < block"
+              :key="index"
+              v-for="(item, index) in shopList"
+            >
+              <Checkbox size="large" :label="item.value" border>
                 <span :title="item.label">{{ item.label.substr(0, 18) }}</span>
               </Checkbox>
             </i-col>
           </CheckboxGroup>
         </Row>
       </div>
-      <Spin size="large"
-            fix
-            v-if="loading"></Spin>
-      <Button type="info"
-              long
-              v-if="block < orginShopList.length"
-              @click="loadMore">加载更多</Button>
+      <Spin size="large" fix v-if="loading"></Spin>
+      <Button type="info" long v-if="block < orginShopList.length" @click="loadMore">加载更多</Button>
     </div>
   </div>
 </template>
@@ -48,7 +38,7 @@ import ActivityManager from "../../services/ActivityManager/ActivityManager";
 import store from "../../store/index";
 export default {
   name: "useActivityStepThree",
-  data () {
+  data() {
     return {
       indeterminate: false,
       allSelect: false,
@@ -60,23 +50,23 @@ export default {
       loading: false,
       block: 50,
       companys: store.getters.useData.company,
-      orginShopList: [],
+      orginShopList: []
     };
   },
   props: {
     isModify: Boolean
   },
-  mounted () {
+  mounted() {
     this.getShopInfo();
     let _this = this;
     if (store.getters.useData.stores) {
-      store.getters.useData.stores.forEach((item) => {
+      store.getters.useData.stores.forEach(item => {
         _this.isSelect.push(item.id);
       });
     }
   },
   methods: {
-    handleCheckAll () {
+    handleCheckAll() {
       let _this = this;
       if (this.indeterminate) {
         this.allSelect = false;
@@ -86,7 +76,7 @@ export default {
       this.indeterminate = false;
       if (this.allSelect) {
         this.isSelect = [];
-        this.shopList.forEach((item) => {
+        this.shopList.forEach(item => {
           if (this.isSelect.indexOf(item.value) < 0 && item.value) {
             this.isSelect.push(item.value);
           }
@@ -95,34 +85,32 @@ export default {
         this.isSelect = [];
       }
       store.getters.useData.stores = [];
-      this.isSelect.forEach((item) => {
-        const s = _this._.find(_this.shopListData, (shop) => shop.id == item);
+      this.isSelect.forEach(item => {
+        const s = _this._.find(_this.shopListData, shop => shop.id == item);
         if (s) {
           store.getters.useData.stores.push(
-            _this._.find(_this.shopListData, (shop) => shop.id == item)
+            _this._.find(_this.shopListData, shop => shop.id == item)
           );
         }
       });
     },
-    doSearch (e) {
+    doSearch(e) {
       const keyword = e.target.value;
       let that = this;
+      taht.block = 50;
+      that.shopList = that.orginShopList;
       if (keyword.length > 0) {
-        that.shopList.forEach((item) => {
-          if (item.label.indexOf(keyword) == -1) {
-            item.hide = true
-          }
+        that.shopList = that._.filter(that.shopList, item => {
+          return item.label.indexOf(keyword) >= 0;
         });
       } else {
-        that.shopList.forEach((item) => {
-          item.hide = false
-        });
+        that.shopList = that.orginShopList;
       }
-      this.isSelect = this._.filter(this.isSelect, item => item)
+      this.isSelect = this._.filter(this.isSelect, item => item);
     },
-    onChange (data) {
+    onChange(data) {
       let _this = this;
-      data = this._.filter(data, item => item)
+      data = this._.filter(data, item => item);
       if (data.length === this.shopListData.length) {
         this.indeterminate = false;
         this.allSelect = true;
@@ -134,22 +122,22 @@ export default {
         this.allSelect = false;
       }
       store.getters.useData.stores = [];
-      data.forEach((item) => {
-        const s = _this._.find(_this.shopListData, (shop) => shop.id == item);
+      data.forEach(item => {
+        const s = _this._.find(_this.shopListData, shop => shop.id == item);
         if (s) {
           store.getters.useData.stores.push(
-            _this._.find(_this.shopListData, (shop) => shop.id == item)
+            _this._.find(_this.shopListData, shop => shop.id == item)
           );
         }
       });
     },
-    loadMore () {
+    loadMore() {
       this.block += 50;
     },
-    getShopInfo () {
+    getShopInfo() {
       let that = this;
       let companyIds = [];
-      this.companys.forEach((item) => {
+      this.companys.forEach(item => {
         companyIds.push(item.id);
       });
       let data = {
@@ -161,25 +149,25 @@ export default {
         data.scheduleId = null;
       }
       that.loading = true;
-      ActivityManager.getShop(data, function (data) {
+      ActivityManager.getShop(data, function(data) {
         that.shopList = [];
         that.shopListData = data.data.results;
         if (store.getters.useData.stores.length == that.shopListData.length) {
           that.allSelect = true;
         }
-        data.data.results.forEach((element) => {
+        data.data.results.forEach(element => {
           that.isSelect.push("");
           that.selectValue.push("");
           that.shopList.push({
             label: element.name,
-            value: element.id,
+            value: element.id
           });
           that.orginShopList = that.shopList;
         });
         that.loading = false;
       });
-    },
-  },
+    }
+  }
 };
 </script>