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>
@@ -27,57 +28,62 @@
   </div>
 </template>
 <script>
-    import store from "../../store/index"
+  import store from "../../store/index"
 
-    export default {
-        name: "useActivityStepOne",
-        data() {
-            return {
-                formValidate: {
-                    activityName: '',
-                    activityStartDate: '',
-                    activityEndDate: '',
-                    activityStyle: [],
-                },
-                flag: store.getters.useModal,
-                ruleValidate: {
-                    activityName: [
-                        {required: true, message: '活动名称不能为空', trigger: 'blur'}
-                    ],
-                    activityStartDate: [
-                        {required: true, type: 'date', message: '开始时间不能为空', trigger: 'change'}
-                    ],
-                    activityEndDate: [
-                        {required: true, type: 'date', message: '结束时间不能为空', trigger: 'change'}
-                    ],
-                    activityStyle: [
-                        {required: true, message: '', trigger: 'blur'}
-                    ],
-                }
-            }
+  export default {
+    name: "useActivityStepOne",
+    data() {
+      return {
+        formValidate: {
+          activityName: '',
+          activityStartDate: '',
+          activityEndDate: '',
+          activityStyle: [],
         },
-        props: {
-            displayUseModal: Boolean
-        },
-        watch: {
-            displayUseModal() {
-                this.formValidate.activityName = store.getters.useData.name
-                this.formValidate.activityStyle = store.getters.useData.inputActivityList
-            },
-        },
-        mounted() {
-            this.formValidate.activityName = store.getters.useData.name
-            this.formValidate.activityStyle = store.getters.useData.inputActivityList
-        },
-        methods: {
-            storeStartDate(date) {
-                store.getters.useData.activityStartDate = date
-            },
-            storeEndDate(date) {
-                store.getters.useData.activityEndDate = date
-            }
+        flag: store.getters.useModal,
+        ruleValidate: {
+          activityName: [
+            {required: true, message: '活动名称不能为空', trigger: 'blur'}
+          ],
+          activityStartDate: [
+            {required: true, type: 'date', message: '开始时间不能为空', trigger: 'change'}
+          ],
+          activityEndDate: [
+            {required: true, type: 'date', message: '结束时间不能为空', trigger: 'change'}
+          ],
+          activityStyle: [
+            {required: true, message: '', trigger: 'blur'}
+          ],
         }
+      }
+    },
+    props: {
+      displayUseModal: Boolean
+    },
+    watch: {
+      displayUseModal() {
+        this.formValidate.activityName = store.getters.useData.name
+        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
+    },
+    methods: {
+      storeStartDate(date) {
+        store.getters.useData.activityStartDate = date
+      },
+      storeEndDate(date) {
+        store.getters.useData.activityEndDate = date
+      }
     }
+  }
 </script>
 
 <style scoped>

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
-      }
-			ActivityManager.getShop(data, function (data) {
-          that.shopList = []
-          that.shopListData = data.data.results
-          data.data.results.forEach(element => {
-            that.isSelect.push('')
-            that.selectValue.push('')
-            that.shopList.push({
-              label: element.name,
-              value: element.id
-            })
-          });
-			})
+      };
+      this.loading = true;
+      ActivityManager.getShop(data, function (data) {
+        store.commit('set_store', data.data.results || []);
+        me.updateTag();
+        this.loading = false;
+      })
+    },
+    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) {
-      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 selectShopValue = []
-      this.isSelect.forEach((element,index) => {
-        if(element === true) {
-          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])
-          }
-        }
+    selectTag(v) {
+      let list = store.getters.useData.selectShopValue || [];
+      let exist = -1;
+      list.forEach((row, i) => {
+        if (row.id === v.id) exist = i;
+      });
+      if (exist >= 0) {
+        list.splice(exist, 1);
+      } else {
+        list.push(v);
       }
-      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: [],
-      isSelect:[],
-      selectValue: [],
-      companyListdata:[]
+      selected: [],
 		}
   },
 	mounted() {
-    this.getCompanyInfo()
+    this.getCompanyInfo();
+    this.updateTag();
+  },
+  computed: {
+    userData() {
+      return store.getters.userData || {};
+    },
+    company() {
+      return store.getters.company || [];
+    },
   },
   methods: {
     getCompanyInfo() {
-      let that = this
-      let data = {
-        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
-      }
-			ActivityManager.getCompany(data, function (data) {
-          that.companyList = []
-          that.companyListdata = data.data.results
-          data.data.results.forEach(element => {
-            that.isSelect.push('')
-            that.selectValue.push('')
-            that.companyList.push({
-              label: element.name,
-              value: element.id
-            })
-          });
-			})
-    },
-    isSelectAllCompany() {
-      if(this.allSelect === true) {
-        this.isSelect.forEach((element,index) => {
-          this.isSelect.splice(index,1,true)
-        })
-        this.companyList.forEach((element,index) => {
-          this.selectValue.splice(index,1,element.id)
-        })
-      } else {
-        this.isSelect.forEach((element,index) => {
-          this.isSelect.splice(index,1,'')
-        })
-        this.companyList.forEach((element,index) => {
-          this.selectValue.splice(index,1,'')
+      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) {
+          store.commit('set_company', data.data.results || []);
+          me.updateTag();
+          this.loading = false;
         })
       }
     },
-    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])
-          }
-        }
+    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;
+    },
+    selectTag(v) {
+      let list = store.getters.useData.selectCompanyValue || [];
+      let exist = -1;
+      list.forEach((row, i) => {
+        if (row.id === v.id) exist = i;
+      });
+      if (exist >= 0) {
+        list.splice(exist, 1);
+      } else {
+        list.push(v);
       }
-      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;
     }
   }