n20-common-lib 1.3.35 → 1.3.38

package/src/utils/tableheaderFilterpanel.vue

@@ -0,0 +1,249 @@
+<template>
+  <transition name="el-zoom-in-top">
+    <div
+      v-if="multiple"
+      v-show="showPopper"
+      v-click-outside:capture="handleOutsideClick"
+      class="el-table-filter p-a m-t"
+    >
+      <el-input
+        v-model="searchVal"
+        class="input-w m-b"
+        placeholder="请输入"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <div>
+        <el-scrollbar>
+          <el-checkbox
+            v-model="allCheck"
+            :label="true"
+            :indeterminate="filteredValue.length > 0"
+            @change="allChange"
+            >{{ filters | alltextF }}</el-checkbox
+          >
+          <el-checkbox-group v-model="filteredValue" class="flex-column">
+            <template v-for="filter in filters">
+              <el-checkbox
+                v-if="filter.text.includes(searchVal)"
+                :key="filter.value"
+                class="m-t-s"
+                :label="filter.value"
+                >{{ filter | textF }}</el-checkbox
+              >
+            </template>
+          </el-checkbox-group>
+        </el-scrollbar>
+      </div>
+      <div class="flex-box flex-c m-t-m">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="
+            () => {
+              filteredValue.length ? handleConfirm() : handleReset()
+            }
+          "
+        >
+          确认
+        </el-button>
+        <el-button plain size="mini" @click="handleReset">清空</el-button>
+      </div>
+    </div>
+    <div
+      v-else
+      v-show="showPopper"
+      v-click-outside:capture="handleOutsideClick"
+      class="el-table-filter p-a m-t"
+    >
+      <el-input
+        v-model="searchVal"
+        class="input-w m-b-ss"
+        placeholder="请输入"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <ul class="el-table-filter__list">
+        <li
+          class="el-table-filter__list-item"
+          :class="{
+            'is-active': filterValue === undefined || filterValue === null
+          }"
+          @click="handleSelect(null)"
+        >
+          {{ filters | alltextF }}
+        </li>
+        <template v-for="filter in filters">
+          <li
+            v-if="filter.text.includes(searchVal)"
+            :key="filter.value"
+            class="el-table-filter__list-item"
+            :label="filter.value"
+            :class="{ 'is-active': isActive(filter) }"
+            @click="handleSelect(filter.value)"
+          >
+            {{ filter | textF }}
+          </li>
+        </template>
+      </ul>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popper from 'element-ui/lib/utils/vue-popper.js'
+export default {
+  name: 'ElTableFilterPanelPor',
+  filters: {
+    textF(item) {
+      if (item.count === undefined) {
+        return item.text
+      } else {
+        return item.text + ' (' + item.count + ')'
+      }
+    },
+    alltextF(list = []) {
+      if (list.some((c) => c.count !== undefined)) {
+        let total = 0
+        list.forEach((c) => {
+          if (!isNaN(c.count)) {
+            total = total + Number(c.count)
+          }
+        })
+        return '全部 (' + total + ')'
+      } else {
+        return '全部'
+      }
+    }
+  },
+  mixins: [Popper],
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-end'
+    }
+  },
+
+  data() {
+    return {
+      table: null,
+      cell: null,
+      column: null,
+      searchVal: '',
+      allCheck: false
+    }
+  },
+
+  computed: {
+    filters() {
+      return this.column && this.column.filters
+    },
+
+    filterValue: {
+      get() {
+        return (this.column.filteredValue || [])[0]
+      },
+      set(value) {
+        if (this.filteredValue) {
+          console.log(this.filteredValue, 567)
+          if (typeof value !== 'undefined' && value !== null) {
+            this.filteredValue.splice(0, 1, value)
+          } else {
+            this.filteredValue.splice(0, 1)
+          }
+        }
+      }
+    },
+
+    filteredValue: {
+      get() {
+        if (this.column) {
+          return this.column.filteredValue || []
+        }
+        return []
+      },
+      set(value) {
+        if (this.column) {
+          this.column.filteredValue = value
+        }
+      }
+    },
+
+    multiple() {
+      if (this.column) {
+        return this.column.filterMultiple
+      }
+      return true
+    }
+  },
+
+  mounted() {
+    this.popperElm = this.$el
+    this.referenceElm = this.cell
+    this.table.bodyWrapper.addEventListener('scroll', () => {
+      this.updatePopper()
+    })
+
+    this.$watch('showPopper', (value) => {
+      if (this.column) this.column.filterOpened = value
+      if (value) this.searchVal = ''
+      // if (value) {
+      //   Dropdown.open(this)
+      // } else {
+      //   Dropdown.close(this)
+      // }
+    })
+  },
+
+  methods: {
+    isActive(filter) {
+      return filter.value === this.filterValue
+    },
+
+    handleOutsideClick() {
+      setTimeout(() => {
+        this.showPopper = false
+      }, 16)
+    },
+
+    handleConfirm() {
+      this.confirmFilter(this.filteredValue)
+      this.handleOutsideClick()
+    },
+
+    handleReset() {
+      this.filteredValue = []
+      this.confirmFilter(this.filteredValue)
+      this.handleOutsideClick()
+    },
+
+    handleSelect(filterValue) {
+      this.filterValue = filterValue
+
+      if (typeof filterValue !== 'undefined' && filterValue !== null) {
+        this.confirmFilter(this.filteredValue)
+      } else {
+        this.confirmFilter([])
+      }
+
+      this.handleOutsideClick()
+    },
+
+    confirmFilter(filteredValue) {
+      this.table.store.commit('filterChange', {
+        column: this.column,
+        values: filteredValue
+      })
+      this.table.store.updateAllSelected()
+    },
+
+    allChange(val) {
+      if (val) {
+        this.filteredValue = this.filters.map((f) => f.value)
+      } else {
+        this.filteredValue = []
+      }
+    }
+  }
+}
+</script>