Merge branch 'test' into 'master'

src/assets/styles/element-ui.scss

@@ -84,6 +84,9 @@ $--color-danger: #ff3333;
 .el-loading-mask {
   z-index: 1000 !important;
 }
+.el-select-dropdown__item {
+  padding: 0 40px 0 20px;
+}
 @media screen and (min-width: $bigScreenWidth) {
   .el-submenu .el-menu-item,
   .el-submenu__title {

src/components/input/AreaDashboard/AreaSelect.vue

 <template>
   <el-select
+    popper-class="dashboard-area-popper"
     :clearable="clearable"
     :disabled="disabled"
     filterable
     :value="value"
     @change="changeHandle"
     :multiple="multiple"
+    ref="select"
   >
-    <slot></slot>
+
+    <slot>
+      <el-input
+        v-if="multiple"
+        class="out-input"
+        clearable
+        @click.stop
+        @input="debouncedQueryChange"
+      />
+      <el-option
+        v-if="multiple"
+        :value="-1"
+      >
+        <span>全选</span>
+        <span class="inner-input"> </span>
+      </el-option>
+    </slot>
     <el-option
-      v-for="(item, index) in dashboardArea"
+      v-for="(item, index) in filterList"
       :key="index"
       :value="item.id"
       :label="item.areaName"
@@ -18,6 +36,7 @@
 </template>
 
 <script>
+import debounce from 'throttle-debounce/debounce';
 import areaMixin from './mixin.js';
 
 export default {
@@ -40,27 +59,47 @@ export default {
   data() {
     return {
       selectedAll: false,
+      filterText: '',
     };
   },
+  created() {
+    this.debouncedQueryChange = debounce(this.debounce, value => {
+      this.handleQueryChange(value);
+    });
+  },
+  computed: {
+    filterList() {
+      return this.dashboardArea.filter(item => {
+        if (item.value == -1) return true;
+        if (this.filterText) {
+          return item.areaName.indexOf(this.filterText) > -1;
+        } else {
+          return true;
+        }
+      });
+    },
+  },
   mixins: [areaMixin],
   methods: {
     changeHandle(val) {
       if (val) {
-        if (val && val.length && val.indexOf(-1) > -1) {
-          if (val.length === this.dashboardArea.length) {
-            this.selectedAll = false;
+        if (this.selectedAll) {
+          if (val && val.length && val.indexOf(-1) > -1) {
             this.$emit('input', val.filter(id => id !== -1));
           } else {
+            this.$emit('input', []);
+          }
+          this.selectedAll = false;
+        } else {
+          if (val && val.length && val.indexOf(-1) > -1) {
             this.selectedAll = true;
             this.$emit('input', [
               ...this.dashboardArea.map(item => item.id),
               -1,
             ]);
-          }
-        } else {
-          if (this.selectedAll) {
-            this.selectedAll = false;
-            this.$emit('input', []);
+          } else if (val.length === this.dashboardArea.length) {
+            this.selectedAll = true;
+            this.$emit('input', [...val, -1]);
           } else {
             this.$emit('input', val);
           }
@@ -69,7 +108,33 @@ export default {
         this.$emit('input', null);
       }
     },
+    handleQueryChange(val) {
+      this.filterText = val;
+    },
   },
 };
 </script>
 
+<style lang="scss">
+.dashboard-area-popper {
+  .el-select-dropdown__list {
+    position: relative;
+  }
+  .out-input,
+  .inner-input {
+    display: inline-block;
+    width: 100px;
+    margin-left: 20px;
+  }
+  .out-input {
+    position: absolute;
+    right: 40px;
+    top: 23px;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+  .inner-input {
+    line-height: inherit;
+  }
+}
+</style>

src/components/input/AreaDashboard/mixin.js

@@ -17,7 +17,7 @@ export default {
   mounted() {
     if (this.dashboardArea && !this.dashboardArea.length) {
       this.fetchDashboardAreaList({
-        operateId: null,
+        operateId: this.operateId ? this.operateId : null,
       });
     }
   },

src/containers/Dashboard/CampusCustomerData/CampusCustomerData.vue

@@ -14,9 +14,7 @@
           :value="filters.choiceareaIds"
           multiple
           @input="val => updateFilters({choiceareaIds: val})"
-        >
-          <el-option :value="-1">全选</el-option>
-        </dashboard-area-select>
+        />
       </search-item>
       <el-radio-group
         class="Dashboard-Radio"

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -4,7 +4,9 @@
       id='CustomerRechargeChart'
       :style="`height: ${height}px;width: ${width?width+'px':'auto'}`"
     ></div>
-    <div id='CustomerRechangeSlider'></div>
+    <div class="CustomerRechangeSlider-wrap">
+      <div id='CustomerRechangeSlider'></div>
+    </div>
     <!-- <CustomerRechangeSlider
       class="CustomerRechangeSlider"
       :data="data"
@@ -334,6 +336,13 @@ export default {
 <style lang="scss">
 .CustomerRechargeChart {
   position: relative;
+  .CustomerRechangeSlider-wrap {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 26px;
+    height: 100%;
+  }
   #CustomerRechargeChart {
     width: 100%;
     // overflow-x: hidden;
@@ -347,12 +356,6 @@ export default {
     height: 100%;
     background-color: #eee;
   }
-  #CustomerRechangeSlider {
-    margin-left: -30px;
-    width: 100%;
-    height: 300px;
-    transform: translate(100%, -100%);
-  }
   .CustomerRechargeChart-areaTitle {
     color: #666;
     width: 85px;

src/containers/HomePage/Demo.vue

 <template>
-  <list-layout>
+  <list-layout class="Demo">
     <template slot="filterItem">
-      <search-item label="赠送类型">
-        <el-input></el-input>
+      <search-item label="运营商">
+        <operator-select
+          :accessType="1"
+          :value="filters.operateId"
+          @input="val => updateFilters({operateId: val,areaId:[]})"
+        />
+      </search-item>
+      <search-item label="区域">
+        <dashboard-area-select
+          :operateId="filters.operateId"
+          :value="filters.areaId"
+          multiple
+          @input="val => updateFilters({areaId: val})"
+        />
       </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-      <search-item label="会员ID">
-        <el-input></el-input>
-      </search-item>
-    </template>
-    <template slot="filterBtn">
-      <el-button @click="showSearchBarHandle">qiehuan</el-button>
     </template>
   </list-layout>
 </template>
 
 <script>
-import searchMixin from '@/mixins/searchBar';
-
 export default {
-  name: 'Demo',
-  mixins: [searchMixin],
+  data() {
+    return {
+      filters: {
+        operateId: undefined,
+        areaId: [],
+      },
+    };
+  },
+  methods: {
+    updateFilters(entity) {
+      this.filters = {
+        ...this.filters,
+        ...entity,
+      };
+    },
+  },
 };
 </script>
+
+<style lang="scss">
+.Demo {
+  .el-select {
+    .el-select__tags {
+      height: 90%;
+      overflow: hidden;
+      input {
+        display: none;
+      }
+    }
+    .el-input {
+      overflow: hidden;
+    }
+    .el-input__inner {
+      height: 100% !important;
+    }
+  }
+}
+</style>

src/containers/HomePage/SearchDemo.vue

+<template>
+  <list-layout>
+    <template slot="filterItem">
+      <search-item label="赠送类型">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+      <search-item label="会员ID">
+        <el-input></el-input>
+      </search-item>
+    </template>
+    <template slot="filterBtn">
+      <el-button @click="showSearchBarHandle">qiehuan</el-button>
+    </template>
+  </list-layout>
+</template>
+
+<script>
+import searchMixin from '@/mixins/searchBar';
+
+export default {
+  name: 'Demo',
+  mixins: [searchMixin],
+};
+</script>

src/containers/layout/IconMenu/IconMenu.vue

@@ -69,6 +69,7 @@
 import MenuItem from './components/MenuItem';
 import { mapGetters } from 'vuex';
 import { formatRouteLink, getMenuDataById } from '@/utils/route';
+import store from '@/containers/Dashboard/store';
 
 export default {
   name: 'IconMenus',
@@ -88,6 +89,9 @@ export default {
       type: Function,
     },
   },
+  created() {
+    store.install(this.$store);
+  },
   data() {
     return {
       collectRouteList: [],

src/router/index.js

@@ -10,6 +10,7 @@ const constantRouterMap = [
   { path: '/login', component: Login, hidden: true },
   { path: '/404', component: errorPage404, hidden: true },
   { path: '/401', component: errorPage401, hidden: true },
+  // { path: '/demo', component: _import('HomePage/Demo'), hidden: true },
 ];
 
 const asyncRouterMap = [{ path: '*', redirect: '/404', hidden: true }];