t20-common-lib 0.9.14 → 0.10.0

package/src/utils/tableheaderFilterpanel.vue

@@ -1,257 +1,257 @@
-<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="'请输入' | $lc"
-        clearable
-        suffix-icon="el-icon-search"
-      />
-      <div>
-        <el-checkbox v-model="allCheck" :label="true" :indeterminate="indeterminate"
-          >{{ '全部' | $lc }}{{ filters | alltextF }}</el-checkbox
-        >
-      </div>
-      <el-checkbox-group v-model="filteredValue" class="input-w p-b-s" style="max-height: 226px; overflow: auto">
-        <template v-for="filter in filters">
-          <el-checkbox
-            v-if="filter.text.includes(searchVal)"
-            :key="filter.value"
-            class="m-t-s m-r-0"
-            :label="filter.value"
-            style="display: block"
-          >
-            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
-            <span class="align-bottom">{{ filter.text }}</span>
-            <span>{{ filter | countF }}</span>
-          </el-checkbox>
-        </template>
-      </el-checkbox-group>
-      <div class="flex-box flex-c m-t-s">
-        <el-button
-          type="primary"
-          size="mini"
-          @click="
-            () => {
-              filteredValue.length ? handleConfirm() : handleReset()
-            }
-          "
-        >
-          {{ '确认' | $lc }}
-        </el-button>
-        <el-button plain size="mini" @click="handleReset">{{ '清空' | $lc }}</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="'请输入' | $lc"
-        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)"
-        >
-          {{ '全部' | $lc }}{{ filters | alltextF }}
-        </li>
-      </ul>
-      <ul class="el-table-filter__list" style="max-height: 226px; overflow: auto">
-        <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)"
-          >
-            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
-            <span class="text-ellipsis align-bottom" style="display: inline-block; max-width: 12em">{{
-              filter.text
-            }}</span>
-            <span>{{ filter | countF }}</span>
-          </li>
-        </template>
-      </ul>
-    </div>
-  </transition>
-</template>
-
-<script>
-// import { $lc } from './i18n/index'
-import Popper from 'element-ui/lib/utils/vue-popper.js'
-export default {
-  name: 'ElTableFilterPanelPor',
-  filters: {
-    countF(item) {
-      if (item.count === undefined) {
-        return ''
-      } else {
-        return ' (' + 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) {
-          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
-        }
-      }
-    },
-
-    allCheck: {
-      get() {
-        return this.filteredValue.length === 0 ? false : this.filteredValue.length === this.filters.length
-      },
-      set(val) {
-        if (val) {
-          this.filteredValue = this.filters.map((f) => f.value)
-        } else {
-          this.filteredValue = []
-        }
-      }
-    },
-
-    indeterminate() {
-      return this.filteredValue.length > 0 && this.filteredValue.length !== this.filters.length
-    },
-
-    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()
-    }
-  }
-}
-</script>
+<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="'请输入' | $lc"
+        clearable
+        suffix-icon="el-icon-search"
+      />
+      <div>
+        <el-checkbox v-model="allCheck" :label="true" :indeterminate="indeterminate"
+          >{{ '全部' | $lc }}{{ filters | alltextF }}</el-checkbox
+        >
+      </div>
+      <el-checkbox-group v-model="filteredValue" class="input-w p-b-s" style="max-height: 226px; overflow: auto">
+        <template v-for="filter in filters">
+          <el-checkbox
+            v-if="filter.text.includes(searchVal)"
+            :key="filter.value"
+            class="m-t-s m-r-0"
+            :label="filter.value"
+            style="display: block"
+          >
+            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
+            <span class="align-bottom">{{ filter.text }}</span>
+            <span>{{ filter | countF }}</span>
+          </el-checkbox>
+        </template>
+      </el-checkbox-group>
+      <div class="flex-box flex-c m-t-s">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="
+            () => {
+              filteredValue.length ? handleConfirm() : handleReset()
+            }
+          "
+        >
+          {{ '确认' | $lc }}
+        </el-button>
+        <el-button plain size="mini" @click="handleReset">{{ '清空' | $lc }}</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="'请输入' | $lc"
+        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)"
+        >
+          {{ '全部' | $lc }}{{ filters | alltextF }}
+        </li>
+      </ul>
+      <ul class="el-table-filter__list" style="max-height: 226px; overflow: auto">
+        <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)"
+          >
+            <!-- v-title="filter.text" :show-overflow-tooltip="true" -->
+            <span class="text-ellipsis align-bottom" style="display: inline-block; max-width: 12em">{{
+              filter.text
+            }}</span>
+            <span>{{ filter | countF }}</span>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </transition>
+</template>
+
+<script>
+// import { $lc } from './i18n/index'
+import Popper from 'element-ui/lib/utils/vue-popper.js'
+export default {
+  name: 'ElTableFilterPanelPor',
+  filters: {
+    countF(item) {
+      if (item.count === undefined) {
+        return ''
+      } else {
+        return ' (' + 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) {
+          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
+        }
+      }
+    },
+
+    allCheck: {
+      get() {
+        return this.filteredValue.length === 0 ? false : this.filteredValue.length === this.filters.length
+      },
+      set(val) {
+        if (val) {
+          this.filteredValue = this.filters.map((f) => f.value)
+        } else {
+          this.filteredValue = []
+        }
+      }
+    },
+
+    indeterminate() {
+      return this.filteredValue.length > 0 && this.filteredValue.length !== this.filters.length
+    },
+
+    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()
+    }
+  }
+}
+</script>

package/style/index.css

@@ -1,26 +1,26 @@
-.el-table__empty-block {
-  position: sticky;
-  width: 100% !important;
-  left: 0 !important;
-}
-.n20-empty img {
-  display: none !important;
-}
-
-@media only screen and (max-width: 1600px) {
-  .col-span-24-custom .el-textarea {
-    width: calc(50% + 8em + 224px) !important;
-  }
-}
-
-@media only screen and (max-width: 1024px) {
-  .col-span-24-custom .el-textarea {
-    width: 100% !important;
-  }
-}
-
-@media only screen and (min-width: 1601px) {
-  .col-span-24-custom .el-textarea {
-    width: calc(33.3% + 6em + 224px) !important;
-  }
+.el-table__empty-block {
+  position: sticky;
+  width: 100% !important;
+  left: 0 !important;
+}
+.n20-empty img {
+  display: none !important;
+}
+
+@media only screen and (max-width: 1600px) {
+  .col-span-24-custom .el-textarea {
+    width: calc(50% + 8em + 224px) !important;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .col-span-24-custom .el-textarea {
+    width: 100% !important;
+  }
+}
+
+@media only screen and (min-width: 1601px) {
+  .col-span-24-custom .el-textarea {
+    width: calc(33.3% + 6em + 224px) !important;
+  }
 }