bsdgy-front/src/pages/activity/useActivityStepTwo.vue

<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>
    </div>
    <div class="companyTable">
      <div class="companyListClass">
        <Row :gutter="10">
          <div v-show="loading" style="padding: 50px 0" class="loading">
            <Spin fix>加载中...</Spin>
          </div>
          <CheckboxGroup size="large" @on-change="onChange" v-model="checkCompanys">
            <i-col span="8" v-if="!item.hide" :key="index" v-for="(item, index) in companyList">
              <Checkbox size="large" :label="item.value" border>
                <span>{{ item.label }}</span>
              </Checkbox>
            </i-col>
          </CheckboxGroup>
        </Row>
      </div>
      <Spin size="large" fix v-if="loading"></Spin>
    </div>
  </div>
</template>
<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index";
export default {
  name: "useActivityStepTwo",
  data() {
    return {
      indeterminate: false,
      allSelect: false,
      companyList: [],
      companyListdata: [],
      checkCompanys: [],
      orginCompanyList: [],
      loading: false
    };
  },
  mounted() {
    let _this = this;
    console.log(1, store.getters.useData);
    if (
      store.getters.useData.company &&
      store.getters.useData.company.length > 0
    ) {
      store.getters.useData.company.forEach(item => {
        if (_this.checkCompanys.indexOf(item.id) == -1) {
          _this.checkCompanys.push(item.id);
        }
      });
    } else if (
      store.getters.useData.stores &&
      store.getters.useData.stores.length > 0
    ) {
      store.getters.useData.stores.forEach(item => {
        if (item.parentId && _this.checkCompanys.indexOf(item.parentId) == -1) {
          _this.checkCompanys.push(item.parentId);
        }
      });
    }
    this.getCompanyInfo();
  },
  methods: {
    onChange(data) {
      console.log(2, store.getters.useData);
      let _this = this;
      if (data.length === this.companyList.length) {
        this.indeterminate = false;
        this.allSelect = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.allSelect = false;
      } else {
        this.indeterminate = false;
        this.allSelect = false;
      }
      store.getters.useData.company = [];
      data.forEach(item => {
        const c = _this._.find(_this.companyListdata, shop => shop.id == item);
        if (c) {
          store.getters.useData.company.push(c);
        }
      });
      console.log(3, store.getters.useData);
    },
    doSearch(e) {
      const keyword = e.target.value;
      let that = this;
      if (keyword.length > 0) {
        that.companyList.forEach(item => {
          if (item.label.indexOf(keyword) == -1) {
            item.hide = true;
          }
        });
      } else {
        that.companyList.forEach(item => {
          item.hide = false;
        });
      }
      this.$forceUpdate();
      console.log(1, that.companyList);
    },
    getCompanyInfo() {
      let that = this;
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
      };
      this.loading = true;
      ActivityManager.getCompany(data, function(data) {
        that.companyList = [];
        that.companyListdata = data.data.results;
        if (
          store.getters.useData.company &&
          store.getters.useData.company.length == that.companyListdata.length
        ) {
          that.allSelect = true;
        }
        data.data.results.forEach(element => {
          that.companyList.push({
            label: element.name,
            value: element.id
          });
          that.orginCompanyList = that.companyList;
        });
        store.getters.useData.company = [];
        that.checkCompanys.forEach(item => {
          const c = that._.find(
            that.companyListdata,
            company => company.id == item
          );
          if (c) {
            store.getters.useData.company.push(c);
          }
        });
        that.loading = false;
      });
    },
    handleCheckAll() {
      let _this = this;
      if (this.indeterminate) {
        this.allSelect = false;
      } else {
        this.allSelect = !this.allSelect;
      }
      this.indeterminate = false;

      if (this.allSelect) {
        this.checkCompanys = [];
        this.companyList.forEach(item => {
          this.checkCompanys.push(item.value);
        });
      } else {
        this.checkCompanys = [];
      }
      store.getters.useData.company = [];
      this.checkCompanys.forEach(item => {
        const c = _this._.find(
          _this.companyListdata,
          company => company.id == item
        );
        if (c) {
          store.getters.useData.company.push(c);
        }
      });
    }
  }
};
</script>

<style scoped>
.selectClass {
  display: flex;
  justify-content: space-between;
}
.companyTable {
  height: 250px;
  overflow-y: scroll;
  width: 100%;
  overflow-x: hidden;
  margin-top: 10px;
}
.ivu-checkbox-wrapper.ivu-checkbox-large {
  width: 100%;
  font-size: 12px;
  margin-bottom: 10px;
}
.ivu-checkbox + span {
  margin-left: 4px;
}
.tagClass {
  width: 31%;
  margin-bottom: 30px;
  height: 120px;
  line-height: 120px;
  border: 1px solid #e3e8ee !important;
  color: #657180 !important;
  background: #fff;
  padding: 0 12px;
  cursor: pointer;
}
.tagColorClass {
  background: #6ac1d1;
}
</style>