up

src/pages/activity/useActivityStepOne.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+    <Form ref="formValidate" :model="formValidate" :label-width="80">
       <Row>
         <i-col span="20" offset="2">
           <FormItem label="活动名称" prop="activityName">
@@ -8,17 +8,18 @@
           </FormItem>
           <div class="dateClass">
             <Form-item label="活动时间" prop="activityStartDate">
-              <Date-picker @on-change="storeStartDate" type="date" v-model="formValidate.activityStartDate" format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 200px"></Date-picker>
+              <Date-picker @on-change="storeStartDate" type="date" v-model="userData.activityStartDate" format="yyyy-MM-dd" placeholder="请选择开始日期" style="width: 200px"></Date-picker>
             </Form-item>
             <div class="text">至</div>
             <Form-item label="" prop="activityEndDate">
-              <Date-picker @on-change="storeEndDate" type="date" v-model="formValidate.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker>
+              <Date-picker @on-change="storeEndDate" type="date" v-model="userData.activityEndDate" format="yyyy-MM-dd" placeholder="请选择结束日期" style="width: 200px"></Date-picker>
             </Form-item>
           </div>
           <FormItem label="活动类型" prop="activityStyle">
             <div v-for="(item, index) in formValidate.activityStyle" :key="index">
               <i-input class="inputClass" disabled type="text" v-model="item.name" placeholder=""></i-input>
-              <i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.defaultVal" placeholder=""></i-input>
+              <i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.defaultVal"
+                       placeholder=""></i-input>
             </div>
           </FormItem>
         </i-col>
@@ -65,6 +66,11 @@
         this.formValidate.activityStyle = store.getters.useData.inputActivityList
       },
     },
+    computed: {
+      userData() {
+        return store.getters.useData;
+      }
+    },
     mounted() {
       this.formValidate.activityName = store.getters.useData.name
       this.formValidate.activityStyle = store.getters.useData.inputActivityList

src/pages/activity/useActivityStepThree.vue

@@ -6,8 +6,9 @@
     </div>
     <div class="companyTable">
       <div class="companyListClass">
-          <div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in shopList" :key="index" >{{item.label}}</div>
+          <div :class="selected[i] === true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(v)" v-for="(v, i) in store" :key="i" >{{v.name}}</div>
       </div>
+      <Spin size="large" fix v-if="loading"></Spin>
     </div>
   </div>
 </template>
@@ -18,7 +19,9 @@ export default {
   name: "useActivityStepThree",
   data() {
 		return {
+		  loading: false,
       allSelect: false,
+      selected: [],
       shopList: [],
       isSelect:[],
       selectValue: [],
@@ -28,64 +31,54 @@ export default {
 	mounted() {
     this.getShopInfo()
   },
+  computed: {
+    userData() {
+      return store.getters.userData || {};
+    },
+    store() {
+      return store.getters.store || [];
+    },
+  },
   methods: {
     getShopInfo() {
-      let that = this
+      const me = this;
       let data = {
         userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
-      }
+      };
+      this.loading = true;
       ActivityManager.getShop(data, function (data) {
-          that.shopList = []
+        store.commit('set_store', data.data.results || []);
-          that.shopListData = data.data.results
+        me.updateTag();
-          data.data.results.forEach(element => {
+        this.loading = false;
-            that.isSelect.push('')
-            that.selectValue.push('')
-            that.shopList.push({
-              label: element.name,
-              value: element.id
       })
+    },
+    updateTag() {
+      let map = {};
+      const values = store.getters.useData.selectShopValue || [];
+      values.forEach(row => {
+        map[row.id] = true;
       });
-			})
+      let list = [];
+      this.store.forEach((row, i) => {
+        list[i] = !!map[row.id];
+      });
+      this.selected = list;
     },
     isSelectAllCompany() {
-      if(this.allSelect === true) {
-        this.isSelect.forEach((element,index) => {
-          this.isSelect.splice(index,1,true)
-        })
-        this.shopList.forEach((element,index) => {
-          this.selectValue.splice(index,1,element.id)
-        })
-      } else {
-        this.isSelect.forEach((element,index) => {
-          this.isSelect.splice(index,1,'')
-        })
-        this.shopList.forEach((element,index) => {
-          this.selectValue.splice(index,1,'')
-        })
-      }
     },
-    selectTag(value,index) {
+    selectTag(v) {
-      this.isSelect.splice(index,1,!this.isSelect[index])
+      let list = store.getters.useData.selectShopValue || [];
-      if(this.isSelect[index] === true) {
+      let exist = -1;
-        this.selectValue.splice(index, 1, value.value)
+      list.forEach((row, i) => {
-      } else if(this.isSelect[index] === false) {
+        if (row.id === v.id) exist = i;
-        this.selectValue.splice(index, 1, '')
+      });
-      }
+      if (exist >= 0) {
-      let selectShopValue = []
+        list.splice(exist, 1);
-      this.isSelect.forEach((element,index) => {
+      } else {
-        if(element === true) {
+        list.push(v);
-          selectShopValue.push(this.selectValue[index])
-        }
-      })
-      let selectShopValueObject = []
-      for(let j=0; j< selectShopValue.length; j++) {
-        for(let i = 0; i< this.shopList.length; i++){
-          if(this.shopList[i].value === selectShopValue[j]) {
-            selectShopValueObject.push(this.shopListData[i])
-          }
-        }
       }
-      store.getters.useData.selectShopValue = selectShopValueObject
+      store.getters.useData.selectShopValue = list;
+      this.updateTag();
     }
   }
 }

src/pages/activity/useActivityStepTwo.vue

@@ -6,8 +6,9 @@
     </div>
     <div class="companyTable">
       <div class="companyListClass">
-          <div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in companyList" :key="index" >{{item.label}}</div>
+          <div :class="selected[i] === true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(v)" v-for="(v, i) in company" :key="i">{{v.name}}</div>
       </div>
+      <Spin size="large" fix v-if="loading"></Spin>
     </div>
   </div>
 </template>
@@ -18,74 +19,68 @@ export default {
   name: "useActivityStepTwo",
   data() {
 		return {
+		  loading: false,
       allSelect: false,
-      companyList: [],
+      selected: [],
-      isSelect:[],
-      selectValue: [],
-      companyListdata:[]
 		}
   },
 	mounted() {
-    this.getCompanyInfo()
+    this.getCompanyInfo();
+    this.updateTag();
+  },
+  computed: {
+    userData() {
+      return store.getters.userData || {};
+    },
+    company() {
+      return store.getters.company || [];
+    },
   },
   methods: {
     getCompanyInfo() {
-      let that = this
+      const me = this;
+      this.loading = true;
+      if (this.company.length === 0) {
         let data = {
           userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
-      }
+        };
         ActivityManager.getCompany(data, function (data) {
-          that.companyList = []
+          store.commit('set_company', data.data.results || []);
-          that.companyListdata = data.data.results
+          me.updateTag();
-          data.data.results.forEach(element => {
+          this.loading = false;
-            that.isSelect.push('')
-            that.selectValue.push('')
-            that.companyList.push({
-              label: element.name,
-              value: element.id
         })
+      }
+    },
+    isSelectAllCompany(e) {
+      this.allSelect = e;
+      store.getters.useData.selectCompanyValue = e ? this.company : [];
+      this.updateTag();
+    },
+    updateTag() {
+      let map = {};
+      const values = store.getters.useData.selectCompanyValue || [];
+      values.forEach(row => {
+        map[row.id] = true;
       });
-			})
+      let list = [];
+      this.company.forEach((row, i) => {
+        list[i] = !!map[row.id];
+      });
+      this.selected = list;
     },
-    isSelectAllCompany() {
+    selectTag(v) {
-      if(this.allSelect === true) {
+      let list = store.getters.useData.selectCompanyValue || [];
-        this.isSelect.forEach((element,index) => {
+      let exist = -1;
-          this.isSelect.splice(index,1,true)
+      list.forEach((row, i) => {
-        })
+        if (row.id === v.id) exist = i;
-        this.companyList.forEach((element,index) => {
+      });
-          this.selectValue.splice(index,1,element.id)
+      if (exist >= 0) {
-        })
+        list.splice(exist, 1);
       } else {
-        this.isSelect.forEach((element,index) => {
+        list.push(v);
-          this.isSelect.splice(index,1,'')
-        })
-        this.companyList.forEach((element,index) => {
-          this.selectValue.splice(index,1,'')
-        })
-      }
-    },
-    selectTag(value, index) {
-      this.isSelect.splice(index,1,!this.isSelect[index])
-      if(this.isSelect[index] === true) {
-        this.selectValue.splice(index, 1, value.value)
-      } else if(this.isSelect[index] === false) {
-        this.selectValue.splice(index, 1, '')
-      }
-      let selectCompanyValue = []
-      this.isSelect.forEach((element,index) => {
-        if(element === true) {
-          selectCompanyValue.push(this.selectValue[index])
-        }
-      })
-      let selectCompanyValueObject = []
-      for(let j=0; j< selectCompanyValue.length; j++) {
-        for(let i = 0; i< this.companyList.length; i++){
-          if(this.companyList[i].value === selectCompanyValue[j]) {
-            selectCompanyValueObject.push(this.companyListdata[i])
-          }
-        }
       }
-      store.getters.useData.selectCompanyValue = selectCompanyValueObject
+      store.getters.useData.selectCompanyValue = list;
+      this.updateTag();
     }
   }
 }

src/store/modules/activity.js

@@ -16,6 +16,12 @@ const activity = {
     },
     [types.SET_ID](state, id) {
       state.id = id
+    },
+    set_store(state, store) {
+      state.store = store;
+    },
+    set_company(state, company) {
+      state.company = company;
     }
   },
   actions: {},
@@ -28,6 +34,12 @@ const activity = {
     },
     id: state => {
       return state.id
+    },
+    store: state => {
+      return state.store;
+    },
+    company: state => {
+      return state.company;
     }
   }