n20-common-lib 1.2.2 → 1.2.5

package/src/components/Filters/index.vue

@@ -1,358 +1,363 @@
-<template>
-  <el-popover
-    v-model="showPop"
-    trigger="manual"
-    :width="width"
-    title="筛选"
-    placement="bottom-end"
-    @show="showPopC = true"
-    @after-leave="
-      showPopC = false
-      showMore = false
-    "
-  >
-    <template slot="reference">
-      <el-button
-        icon="n20-icon-iconfontshaixuan"
-        plain
-        onlyicon
-        size="mini"
-        @click="clickBtn"
-      />
-    </template>
-
-    <el-form
-      v-if="showPopC"
-      v-click-outside="clickOut"
-      class="n20-filter p-a-s p-b-0"
-      :label-width="labelWidth"
-      @submit.native.prevent
-    >
-      <el-form-item v-for="(item, i) in minList" :key="i" :label="item.label">
-        <slot v-if="item.slotName" :name="item.slotName"></slot>
-        <el-input
-          v-else-if="item.type === 'text' || item.type === undefined"
-          v-model="form[item.value]"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <el-select
-          v-else-if="item.type === 'select'"
-          v-model="form[item.value]"
-          :clearable="item | clearableF"
-          :multiple="item.multiple"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        >
-          <template
-            v-if="item.props && item.props.labelKey && item.props.valueKey"
-          >
-            <el-option
-              v-for="(c, i) in item.options"
-              :key="i"
-              :label="c[item.props.labelKey]"
-              :value="c[item.props.valueKey]"
-              :disabled="c.disabled"
-            />
-          </template>
-          <template v-else>
-            <el-option
-              v-for="c in item.options"
-              :key="c.value + '_' + c.label"
-              :label="c.label"
-              :value="c.value"
-              :disabled="c.disabled"
-            />
-          </template>
-        </el-select>
-        <inputNumber
-          v-else-if="item.type === 'number'"
-          v-model="form[item.value]"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <inputNumberRange
-          v-else-if="item.type === 'numberrange'"
-          :start-value.sync="form[item.startValue]"
-          :end-value.sync="form[item.endValue]"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <datePickerPor
-          v-else-if="item.type === 'date'"
-          v-model="form[item.value]"
-          type="date"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <datePickerPor
-          v-else-if="item.type === 'daterange'"
-          type="daterange"
-          :start-date.sync="form[item.startDate]"
-          :end-date.sync="form[item.endDate]"
-          :clearable="item | clearableF"
-          style="width: 100%"
-          v-bind="item.props"
-          v-on="item.on"
-        />
-        <el-checkbox-group
-          v-else-if="item.type === 'checkbox'"
-          v-model="form[item.value]"
-          v-bind="item.props"
-          v-on="item.on"
-        >
-          <el-checkbox
-            v-for="c in item.options"
-            :key="c.value"
-            :label="c.value"
-            :disabled="c.disabled"
-            >{{ c.label }}</el-checkbox
-          >
-        </el-checkbox-group>
-        <el-radio-group
-          v-else-if="item.type === 'radio'"
-          v-model="form[item.value]"
-          v-bind="item.props"
-          v-on="item.on"
-        >
-          <el-radio
-            v-for="c in item.options"
-            :key="c.value"
-            :label="c.value"
-            :disabled="c.disabled"
-            >{{ c.label }}</el-radio
-          >
-        </el-radio-group>
-      </el-form-item>
-      <template v-if="filterList.length > defaultShow">
-        <div :style="{ paddingLeft: labelWidth }">
-          <el-button
-            class="p-t-0 m-b-s color-primary"
-            type="text"
-            @click="showMore = !showMore"
-            ><span>更多条件</span
-            ><i
-              :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
-            ></i
-          ></el-button>
-        </div>
-        <el-collapse-transition>
-          <div v-if="showMore">
-            <el-form-item
-              v-for="(item, i) in moreList"
-              :key="i"
-              :label="item.label"
-            >
-              <slot v-if="item.slotName" :name="item.slotName"></slot>
-              <el-input
-                v-else-if="item.type === 'text' || item.type === undefined"
-                v-model="form[item.value]"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <el-select
-                v-else-if="item.type === 'select'"
-                v-model="form[item.value]"
-                :clearable="item | clearableF"
-                :multiple="item.multiple"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <template
-                  v-if="
-                    item.props && item.props.labelKey && item.props.valueKey
-                  "
-                >
-                  <el-option
-                    v-for="(c, i) in item.options"
-                    :key="i"
-                    :label="c[item.props.labelKey]"
-                    :value="c[item.props.valueKey]"
-                    :disabled="c.disabled"
-                  />
-                </template>
-                <template v-else>
-                  <el-option
-                    v-for="c in item.options"
-                    :key="c.value + '_' + c.label"
-                    :label="c.label"
-                    :value="c.value"
-                    :disabled="c.disabled"
-                  />
-                </template>
-              </el-select>
-              <inputNumber
-                v-else-if="item.type === 'number'"
-                v-model="form[item.value]"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <inputNumberRange
-                v-else-if="item.type === 'numberrange'"
-                :start-value.sync="form[item.startValue]"
-                :end-value.sync="form[item.endValue]"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <datePickerPor
-                v-else-if="item.type === 'date'"
-                v-model="form[item.value]"
-                type="date"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <datePickerPor
-                v-else-if="item.type === 'daterange'"
-                type="daterange"
-                :start-date.sync="form[item.startDate]"
-                :end-date.sync="form[item.endDate]"
-                :clearable="item | clearableF"
-                style="width: 100%"
-                v-bind="item.props"
-                v-on="item.on"
-              />
-              <el-checkbox-group
-                v-else-if="item.type === 'checkbox'"
-                v-model="form[item.value]"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <el-checkbox
-                  v-for="c in item.options"
-                  :key="c.value"
-                  :label="c.value"
-                  :disabled="c.disabled"
-                  >{{ c.label }}</el-checkbox
-                >
-              </el-checkbox-group>
-              <el-radio-group
-                v-else-if="item.type === 'radio'"
-                v-model="form[item.value]"
-                v-bind="item.props"
-                v-on="item.on"
-              >
-                <el-radio
-                  v-for="c in item.options"
-                  :key="c.value"
-                  :label="c.value"
-                  :disabled="c.disabled"
-                  >{{ c.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-          </div>
-        </el-collapse-transition>
-      </template>
-      <footerBox class="text-c">
-        <el-button type="primary" @click="filter">筛选</el-button>
-        <el-button plain @click="clear">重置</el-button>
-      </footerBox>
-    </el-form>
-  </el-popover>
-</template>
-
-<script>
-import inputNumber from '../InputNumber/index.vue'
-import inputNumberRange from '../InputNumber/numberRange.vue'
-import datePickerPor from '../DatePicker/por.vue'
-import footerBox from '../FooterBox/index.vue'
-export default {
-  name: 'Filters',
-  components: {
-    inputNumber,
-    inputNumberRange,
-    datePickerPor,
-    footerBox
-  },
-  filters: {
-    clearableF(item) {
-      if (item.props && item.props.clearable === false) {
-        return false
-      } else {
-        return true
-      }
-    }
-  },
-  props: {
-    width: {
-      type: Number,
-      default: 310
-    },
-    defaultShow: {
-      type: Number,
-      default: 5
-    },
-    filterList: {
-      type: Array,
-      default: () => []
-    },
-    form: {
-      type: Object,
-      default: () => ({})
-    },
-    labelWidth: {
-      type: [String, Number],
-      default: '5em'
-    }
-  },
-  data() {
-    return {
-      showPop: false,
-      showPopC: false,
-      showMore: false
-    }
-  },
-  computed: {
-    minList() {
-      return this.filterList.slice(0, this.defaultShow)
-    },
-    moreList() {
-      return this.filterList.slice(this.defaultShow)
-    }
-  },
-  methods: {
-    clear() {
-      this.$emit('clear')
-    },
-    filter() {
-      this.$emit('filter')
-      this.$nextTick(() => {
-        this.showPop = false
-      })
-    },
-    clickBtn() {
-      if (!this.showPop) {
-        setTimeout(() => {
-          this.showPop = true
-        }, 60)
-      }
-    },
-    clickOut() {
-      let elPoppers = []
-      document
-        .querySelectorAll('.el-popper,.el-dialog__wrapper')
-        .forEach((e) => {
-          e.style.display !== 'none' && elPoppers.push(e)
-        })
-
-      if (elPoppers.length <= 1) {
-        this.showPop = false
-      }
-    }
-  }
-}
-</script>
+<template>
+  <el-popover
+    v-model="showPop"
+    trigger="manual"
+    :width="width"
+    title="筛选"
+    placement="bottom-end"
+    @show="showPopC = true"
+    @after-leave="
+      showPopC = false
+      showMore = false
+    "
+  >
+    <template slot="reference">
+      <el-button
+        icon="n20-icon-iconfontshaixuan"
+        plain
+        onlyicon
+        size="mini"
+        @click="clickBtn"
+      />
+    </template>
+
+    <el-form
+      v-if="showPopC"
+      v-click-outside="clickOut"
+      class="n20-filter p-a-s p-b-0"
+      :label-width="labelWidth"
+      @submit.native.prevent
+    >
+      <el-form-item
+        v-for="(item, i) in minList"
+        :key="i"
+        class="m-b"
+        :label="item.label"
+      >
+        <slot v-if="item.slotName" :name="item.slotName"></slot>
+        <el-input
+          v-else-if="item.type === 'text' || item.type === undefined"
+          v-model="form[item.value]"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <el-select
+          v-else-if="item.type === 'select'"
+          v-model="form[item.value]"
+          :clearable="item | clearableF"
+          :multiple="item.multiple"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <template
+            v-if="item.props && item.props.labelKey && item.props.valueKey"
+          >
+            <el-option
+              v-for="(c, i) in item.options"
+              :key="i"
+              :label="c[item.props.labelKey]"
+              :value="c[item.props.valueKey]"
+              :disabled="c.disabled"
+            />
+          </template>
+          <template v-else>
+            <el-option
+              v-for="c in item.options"
+              :key="c.value + '_' + c.label"
+              :label="c.label"
+              :value="c.value"
+              :disabled="c.disabled"
+            />
+          </template>
+        </el-select>
+        <inputNumber
+          v-else-if="item.type === 'number'"
+          v-model="form[item.value]"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <inputNumberRange
+          v-else-if="item.type === 'numberrange'"
+          :start-value.sync="form[item.startValue]"
+          :end-value.sync="form[item.endValue]"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <datePickerPor
+          v-else-if="item.type === 'date'"
+          v-model="form[item.value]"
+          type="date"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <datePickerPor
+          v-else-if="item.type === 'daterange'"
+          type="daterange"
+          :start-date.sync="form[item.startDate]"
+          :end-date.sync="form[item.endDate]"
+          :clearable="item | clearableF"
+          style="width: 100%"
+          v-bind="item.props"
+          v-on="item.on"
+        />
+        <el-checkbox-group
+          v-else-if="item.type === 'checkbox'"
+          v-model="form[item.value]"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <el-checkbox
+            v-for="c in item.options"
+            :key="c.value"
+            :label="c.value"
+            :disabled="c.disabled"
+            >{{ c.label }}</el-checkbox
+          >
+        </el-checkbox-group>
+        <el-radio-group
+          v-else-if="item.type === 'radio'"
+          v-model="form[item.value]"
+          v-bind="item.props"
+          v-on="item.on"
+        >
+          <el-radio
+            v-for="c in item.options"
+            :key="c.value"
+            :label="c.value"
+            :disabled="c.disabled"
+            >{{ c.label }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="filterList.length > defaultShow">
+        <div :style="{ paddingLeft: labelWidth }">
+          <el-button
+            class="p-t-0 m-b-s color-primary"
+            type="text"
+            @click="showMore = !showMore"
+            ><span>更多条件</span
+            ><i
+              :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+            ></i
+          ></el-button>
+        </div>
+        <el-collapse-transition>
+          <div v-if="showMore">
+            <el-form-item
+              v-for="(item, i) in moreList"
+              :key="i"
+              :label="item.label"
+            >
+              <slot v-if="item.slotName" :name="item.slotName"></slot>
+              <el-input
+                v-else-if="item.type === 'text' || item.type === undefined"
+                v-model="form[item.value]"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <el-select
+                v-else-if="item.type === 'select'"
+                v-model="form[item.value]"
+                :clearable="item | clearableF"
+                :multiple="item.multiple"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <template
+                  v-if="
+                    item.props && item.props.labelKey && item.props.valueKey
+                  "
+                >
+                  <el-option
+                    v-for="(c, i) in item.options"
+                    :key="i"
+                    :label="c[item.props.labelKey]"
+                    :value="c[item.props.valueKey]"
+                    :disabled="c.disabled"
+                  />
+                </template>
+                <template v-else>
+                  <el-option
+                    v-for="c in item.options"
+                    :key="c.value + '_' + c.label"
+                    :label="c.label"
+                    :value="c.value"
+                    :disabled="c.disabled"
+                  />
+                </template>
+              </el-select>
+              <inputNumber
+                v-else-if="item.type === 'number'"
+                v-model="form[item.value]"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <inputNumberRange
+                v-else-if="item.type === 'numberrange'"
+                :start-value.sync="form[item.startValue]"
+                :end-value.sync="form[item.endValue]"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <datePickerPor
+                v-else-if="item.type === 'date'"
+                v-model="form[item.value]"
+                type="date"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <datePickerPor
+                v-else-if="item.type === 'daterange'"
+                type="daterange"
+                :start-date.sync="form[item.startDate]"
+                :end-date.sync="form[item.endDate]"
+                :clearable="item | clearableF"
+                style="width: 100%"
+                v-bind="item.props"
+                v-on="item.on"
+              />
+              <el-checkbox-group
+                v-else-if="item.type === 'checkbox'"
+                v-model="form[item.value]"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <el-checkbox
+                  v-for="c in item.options"
+                  :key="c.value"
+                  :label="c.value"
+                  :disabled="c.disabled"
+                  >{{ c.label }}</el-checkbox
+                >
+              </el-checkbox-group>
+              <el-radio-group
+                v-else-if="item.type === 'radio'"
+                v-model="form[item.value]"
+                v-bind="item.props"
+                v-on="item.on"
+              >
+                <el-radio
+                  v-for="c in item.options"
+                  :key="c.value"
+                  :label="c.value"
+                  :disabled="c.disabled"
+                  >{{ c.label }}</el-radio
+                >
+              </el-radio-group>
+            </el-form-item>
+          </div>
+        </el-collapse-transition>
+      </template>
+      <footerBox class="text-c">
+        <el-button type="primary" @click="filter">筛选</el-button>
+        <el-button plain @click="clear">重置</el-button>
+      </footerBox>
+    </el-form>
+  </el-popover>
+</template>
+
+<script>
+import inputNumber from '../InputNumber/index.vue'
+import inputNumberRange from '../InputNumber/numberRange.vue'
+import datePickerPor from '../DatePicker/por.vue'
+import footerBox from '../FooterBox/index.vue'
+export default {
+  name: 'Filters',
+  components: {
+    inputNumber,
+    inputNumberRange,
+    datePickerPor,
+    footerBox
+  },
+  filters: {
+    clearableF(item) {
+      if (item.props && item.props.clearable === false) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  props: {
+    width: {
+      type: Number,
+      default: 310
+    },
+    defaultShow: {
+      type: Number,
+      default: 5
+    },
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    form: {
+      type: Object,
+      default: () => ({})
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: '5em'
+    }
+  },
+  data() {
+    return {
+      showPop: false,
+      showPopC: false,
+      showMore: false
+    }
+  },
+  computed: {
+    minList() {
+      return this.filterList.slice(0, this.defaultShow)
+    },
+    moreList() {
+      return this.filterList.slice(this.defaultShow)
+    }
+  },
+  methods: {
+    clear() {
+      this.$emit('clear')
+    },
+    filter() {
+      this.$emit('filter')
+      this.$nextTick(() => {
+        this.showPop = false
+      })
+    },
+    clickBtn() {
+      if (!this.showPop) {
+        setTimeout(() => {
+          this.showPop = true
+        }, 60)
+      }
+    },
+    clickOut() {
+      let elPoppers = []
+      document
+        .querySelectorAll('.el-popper,.el-dialog__wrapper')
+        .forEach((e) => {
+          e.style.display !== 'none' && elPoppers.push(e)
+        })
+
+      if (elPoppers.length <= 1) {
+        this.showPop = false
+      }
+    }
+  }
+}
+</script>