n20-common-lib 1.3.35 → 1.3.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/el-button.scss

@@ -1,7 +1,8 @@
 .el-button--primary,
 .el-button--default,
 .el-button--default.is-plain,
-.el-button--warning.is-plain {
+.el-button--warning.is-plain,
+.el-button--danger.is-plain {
   min-width: 72px;
 }
 

package/src/directives/VClickOutside/index.js

@@ -8,10 +8,10 @@ directive.install = (Vue) => {
           node.context[binding.expression](event)
         }
       }
-      document.body.addEventListener('click', el.clickOutsideEvent)
+      document.body.addEventListener('click', el.clickOutsideEvent, binding.arg === 'capture')
     },
-    unbind: function (el) {
-      document.body.removeEventListener('click', el.clickOutsideEvent)
+    unbind: function (el, binding) {
+      document.body.removeEventListener('click', el.clickOutsideEvent, binding.arg === 'capture')
     }
   })
 }

package/src/directives/VRules/index.js

@@ -0,0 +1,10 @@
+const directive = {}
+directive.install = (Vue) => {
+  Vue.directive('rules', {
+    bind(el, binding, vnode) {},
+    update(el, binding) {},
+    unbind(el, binding) {}
+  })
+}
+
+export default directive

package/src/utils/repairElementUI.js

@@ -1,6 +1,19 @@
 /* 对ElementUI硬优化 */
 import Popper from 'element-ui/lib/utils/popper.js'
 
+import Vue from 'vue'
+import FilterPanel from './tableheaderFilterpanel.vue'
+
+function hasClass(el, cls) {
+  if (!el || !cls) return false
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
+  if (el.classList) {
+    return el.classList.contains(cls)
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+}
+
 function setPropsDefault(component, props) {
   let c_props = component.props
   Object.keys(props).forEach((key) => {
@@ -69,7 +82,7 @@ export default function (ElementUI) {
       default: true
     }
   })
-
+  // 设置表头最小宽度,保证表头不换行
   setMethodsDefault(ElementUI.TableColumn, {
     setColumnWidth(column) {
       if (this.realWidth) {
@@ -92,4 +105,41 @@ export default function (ElementUI) {
       return column
     }
   })
+
+  // 美化表头搜索
+  if (ElementUI.Table.components.TableHeader) {
+    setMethodsDefault(ElementUI.Table.components.TableHeader, {
+      handleFilterClick(event, column) {
+        event.stopPropagation()
+        const target = event.target
+        let cell = target.tagName === 'TH' ? target : target.parentNode
+        if (hasClass(cell, 'noclick')) return
+        cell = cell.querySelector('.el-table__column-filter-trigger') || cell
+        const table = this.$parent
+
+        let filterPanel = this.filterPanels[column.id]
+
+        if (filterPanel && column.filterOpened) {
+          filterPanel.showPopper = false
+          return
+        }
+
+        if (!filterPanel) {
+          filterPanel = new Vue(FilterPanel)
+          this.filterPanels[column.id] = filterPanel
+          if (column.filterPlacement) {
+            filterPanel.placement = column.filterPlacement
+          }
+          filterPanel.table = table
+          filterPanel.cell = cell
+          filterPanel.column = column
+          !this.$isServer && filterPanel.$mount(document.createElement('div'))
+        }
+
+        setTimeout(() => {
+          filterPanel.showPopper = true
+        }, 16)
+      }
+    })
+  }
 }

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>