bsdgy-front/src/pages/activity/useActivityStepThree.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-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>
                <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>
    </div>
  </div>
</template>
<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager";
import store from "../../store/index";
export default {
  name: "useActivityStepThree",
  data () {
    return {
      indeterminate: false,
      allSelect: false,
      selected: [],
      shopList: [],
      isSelect: [],
      selectValue: [],
      shopListData: [],
      loading: false,
      block: 50,
      companys: store.getters.useData.company,
      orginShopList: [],
    };
  },
  props: {
    isModify: Boolean
  },
  mounted () {
    this.getShopInfo();
    let _this = this;
    if (store.getters.useData.stores) {
      store.getters.useData.stores.forEach((item) => {
        _this.isSelect.push(item.id);
      });
    }
  },
  computed: {
    userData () {
      return store.getters.userData || {};
    },
    store () {
      return store.getters.store || [];
    },
  },
  methods: {
    handleCheckAll () {
      let _this = this;
      if (this.indeterminate) {
        this.allSelect = false;
      } else {
        this.allSelect = !this.allSelect;
      }
      this.indeterminate = false;
      if (this.allSelect) {
        this.isSelect = [];
        this.shopList.forEach((item) => {
          if (this.isSelect.indexOf(item.value) < 0 && item.value) {
            this.isSelect.push(item.value);
          }
        });
      } else {
        this.isSelect = [];
      }
      store.getters.useData.stores = [];
      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)
          );
        }
      });
    },
    doSearch (e) {
      const keyword = e.target.value;
      let that = this;
      if (keyword.length > 0) {
        that.shopList.forEach((item) => {
          if (item.label.indexOf(keyword) == -1) {
            item.hide = true
          }
        });
      } else {
        that.shopList.forEach((item) => {
          item.hide = false
        });
      }
      this.isSelect = this._.filter(this.isSelect, item => item)
    },
    onChange (data) {
      let _this = this;
      data = this._.filter(data, item => item)
      if (data.length === this.shopListData.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.stores = [];
      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)
          );
        }
      });
    },
    loadMore () {
      this.block += 50;
    },
    getShopInfo () {
      let that = this;
      let companyIds = [];
      this.companys.forEach((item) => {
        companyIds.push(item.id);
      });
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
        customerIds: companyIds.join(","),
        scheduleId: store.getters.useData.scheduleId
      };
      if (this.isModify) {
        data.scheduleId = null;
      }
      that.loading = true;
      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) => {
          that.isSelect.push("");
          that.selectValue.push("");
          that.shopList.push({
            label: element.name,
            value: element.id,
          });
          that.orginShopList = that.shopList;
        });
        that.loading = false;
      });
    },
    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]);
          }
        }
      }
      store.getters.useData.selectShopValue = selectShopValueObject;
    },
  },
};
</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>