n20-common-lib 1.3.5 → 1.3.8

package/src/components/SelectTree/SelectTreeLazy.vue

@@ -1,241 +1,241 @@
-<template>
-  <el-select
-    ref="select"
-    v-model="valueC"
-    :multiple="multiple"
-    :collapse-tags="collapseTags"
-    :clearable="clearable"
-    :disabled="disabled"
-    :filterable="true"
-    :filter-method="filterFn"
-    :size="size"
-    @visible-change="showOpt"
-    @change="(val) => $emit('change', val)"
-  >
-    <slot></slot>
-    <el-option label="null" :value="null" style="display: none" />
-    <el-option
-      v-for="(item, i) in optionList"
-      :key="i"
-      :label="item[props.label]"
-      :value="item[props.value]"
-      style="display: none"
-    />
-    <el-tree
-      ref="tree"
-      class="m-r"
-      :data="data"
-      :props="props"
-      :node-key="props.value"
-      :default-expanded-keys="expandedKeys"
-      :highlight-current="!multiple"
-      :show-checkbox="multiple"
-      :check-strictly="true"
-      :expand-on-click-node="multiple"
-      :filter-node-method="filterNode"
-      :lazy="lazy"
-      :load="load"
-      :size="size"
-      @node-click="nodeClick"
-      @check-change="checkChange"
-    />
-  </el-select>
-</template>
-
-<script>
-import forEachs from '../../utils/forEachs'
-
-export default {
-  name: 'SelectTreeLazy',
-  props: {
-    size: {
-      type: String,
-      default: undefined
-    },
-    // 懒加载回显的选项
-    lazyChecked: {
-      type: [Array, Object],
-      default: undefined
-    },
-    /* select */
-    value: {
-      type: [String, Number, Array],
-      default: undefined
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    collapseTags: {
-      type: Boolean,
-      default: false
-    },
-    filterMethod: {
-      type: Function,
-      default: undefined
-    },
-    /* tree */
-    data: {
-      type: Array,
-      default: () => []
-    },
-    props: {
-      type: Object,
-      default: () => ({
-        label: 'label',
-        children: 'children',
-        disabled: 'disabled',
-        isLeaf: 'isLeaf',
-        value: 'value'
-      })
-    },
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    load: {
-      type: Function,
-      default: undefined
-    }
-  },
-  data() {
-    return {
-      wCdList: [], // 监听value得到的选项
-      tCdList: [], // 临时选择得到的选项
-      expandedKeys: []
-    }
-  },
-  computed: {
-    valueC: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    optionList() {
-      let vK = this.props.value
-      let optionList = []
-
-      if (this.lazyChecked) {
-        if (Array.isArray(this.lazyChecked)) {
-          optionList.push.apply(optionList, this.lazyChecked)
-        } else {
-          optionList.push(this.lazyChecked)
-        }
-      }
-
-      this.wCdList.forEach((item) => {
-        if (!optionList.some((c) => c[vK] === item[vK])) {
-          optionList.push(item)
-        }
-      })
-
-      this.tCdList.forEach((item) => {
-        if (!optionList.some((c) => c[vK] === item[vK])) {
-          optionList.push(item)
-        }
-      })
-
-      return optionList
-    }
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (!val && !this.multiple) {
-          this.wCdList = []
-          this.$refs['tree']?.setCurrentKey(null)
-          return
-        }
-
-        let dataList = []
-        forEachs(this.data, (d) => dataList.push(d), this.props.children)
-
-        if (!this.multiple) {
-          let valueObj = dataList.find((d) => d[this.props.value] === val)
-          this.wCdList = valueObj ? [valueObj] : []
-          this.$refs['tree']?.setCurrentKey(val)
-        } else {
-          this.wCdList = dataList.filter((d) =>
-            val.includes(d[this.props.value])
-          )
-          this.$refs['tree']?.setCheckedKeys(val)
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    showOpt() {
-      if (this.showd) return
-
-      this.showd = true
-
-      this.expandedKeys = this.multiple ? [...this.value] : [this.value]
-
-      if (!this.multiple) {
-        this.$refs['tree'].setCurrentKey(this.value)
-      } else {
-        this.$refs['tree'].setCheckedKeys(this.value)
-      }
-    },
-    filterFn(val) {
-      this.$refs['tree'].filter(val)
-      this.filterMethod && this.filterMethod(val)
-    },
-    nodeClick(data) {
-      if (!this.multiple) {
-        this.lazy && (this.tCdList = [data])
-
-        let vK = this.props.value
-        this.$emit('input', data[vK])
-        this.$emit('change', data[vK], data)
-        this.$refs['select'].blur()
-      }
-    },
-    checkChange(data, check) {
-      let vK = this.props.value
-      if (check) {
-        if (this.lazy) {
-          let tV = this.tCdList.some((c) => c[vK] === data[vK])
-          if (!tV) {
-            this.tCdList.push(data)
-          }
-        }
-        let vV = this.value.includes(data[vK])
-        if (!vV) {
-          this.value.push(data[vK])
-        }
-      } else {
-        if (this.lazy) {
-          let tI = this.tCdList.findIndex((c) => c[vK] === data[vK])
-          if (tI !== -1) {
-            this.tCdList.splice(tI, 1)
-          }
-        }
-
-        let vI = this.value.indexOf(data[vK])
-        if (vI !== -1) {
-          this.value.splice(vI, 1)
-        }
-      }
-      this.$emit('change', this.value)
-    },
-    filterNode(value, data) {
-      if (!value) return true
-      let lK = this.props.label
-      return data[lK].indexOf(value) !== -1
-    }
-  }
-}
-</script>
+<template>
+  <el-select
+    ref="select"
+    v-model="valueC"
+    :multiple="multiple"
+    :collapse-tags="collapseTags"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="true"
+    :filter-method="filterFn"
+    :size="size"
+    @visible-change="showOpt"
+    @change="(val) => $emit('change', val)"
+  >
+    <slot></slot>
+    <el-option label="null" :value="null" style="display: none" />
+    <el-option
+      v-for="(item, i) in optionList"
+      :key="i"
+      :label="item[props.label]"
+      :value="item[props.value]"
+      style="display: none"
+    />
+    <el-tree
+      ref="tree"
+      class="m-r"
+      :data="data"
+      :props="props"
+      :node-key="props.value"
+      :default-expanded-keys="expandedKeys"
+      :highlight-current="!multiple"
+      :show-checkbox="multiple"
+      :check-strictly="true"
+      :expand-on-click-node="multiple"
+      :filter-node-method="filterNode"
+      :lazy="lazy"
+      :load="load"
+      :size="size"
+      @node-click="nodeClick"
+      @check-change="checkChange"
+    />
+  </el-select>
+</template>
+
+<script>
+import forEachs from '../../utils/forEachs'
+
+export default {
+  name: 'SelectTreeLazy',
+  props: {
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 懒加载回显的选项
+    lazyChecked: {
+      type: [Array, Object],
+      default: undefined
+    },
+    /* select */
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    filterMethod: {
+      type: Function,
+      default: undefined
+    },
+    /* tree */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        disabled: 'disabled',
+        isLeaf: 'isLeaf',
+        value: 'value'
+      })
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    load: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      wCdList: [], // 监听value得到的选项
+      tCdList: [], // 临时选择得到的选项
+      expandedKeys: []
+    }
+  },
+  computed: {
+    valueC: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    optionList() {
+      let vK = this.props.value
+      let optionList = []
+
+      if (this.lazyChecked) {
+        if (Array.isArray(this.lazyChecked)) {
+          optionList.push.apply(optionList, this.lazyChecked)
+        } else {
+          optionList.push(this.lazyChecked)
+        }
+      }
+
+      this.wCdList.forEach((item) => {
+        if (!optionList.some((c) => c[vK] === item[vK])) {
+          optionList.push(item)
+        }
+      })
+
+      this.tCdList.forEach((item) => {
+        if (!optionList.some((c) => c[vK] === item[vK])) {
+          optionList.push(item)
+        }
+      })
+
+      return optionList
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val && !this.multiple) {
+          this.wCdList = []
+          this.$refs['tree']?.setCurrentKey(null)
+          return
+        }
+
+        let dataList = []
+        forEachs(this.data, (d) => dataList.push(d), this.props.children)
+
+        if (!this.multiple) {
+          let valueObj = dataList.find((d) => d[this.props.value] === val)
+          this.wCdList = valueObj ? [valueObj] : []
+          this.$refs['tree']?.setCurrentKey(val)
+        } else {
+          this.wCdList = dataList.filter((d) =>
+            val.includes(d[this.props.value])
+          )
+          this.$refs['tree']?.setCheckedKeys(val)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showOpt() {
+      if (this.showd) return
+
+      this.showd = true
+
+      this.expandedKeys = this.multiple ? [...this.value] : [this.value]
+
+      if (!this.multiple) {
+        this.$refs['tree'].setCurrentKey(this.value)
+      } else {
+        this.$refs['tree'].setCheckedKeys(this.value)
+      }
+    },
+    filterFn(val) {
+      this.$refs['tree'].filter(val)
+      this.filterMethod && this.filterMethod(val)
+    },
+    nodeClick(data) {
+      if (!this.multiple) {
+        this.lazy && (this.tCdList = [data])
+
+        let vK = this.props.value
+        this.$emit('input', data[vK])
+        this.$emit('change', data[vK], data)
+        this.$refs['select'].blur()
+      }
+    },
+    checkChange(data, check) {
+      let vK = this.props.value
+      if (check) {
+        if (this.lazy) {
+          let tV = this.tCdList.some((c) => c[vK] === data[vK])
+          if (!tV) {
+            this.tCdList.push(data)
+          }
+        }
+        let vV = this.value.includes(data[vK])
+        if (!vV) {
+          this.value.push(data[vK])
+        }
+      } else {
+        if (this.lazy) {
+          let tI = this.tCdList.findIndex((c) => c[vK] === data[vK])
+          if (tI !== -1) {
+            this.tCdList.splice(tI, 1)
+          }
+        }
+
+        let vI = this.value.indexOf(data[vK])
+        if (vI !== -1) {
+          this.value.splice(vI, 1)
+        }
+      }
+      this.$emit('change', this.value)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      let lK = this.props.label
+      return data[lK].indexOf(value) !== -1
+    }
+  }
+}
+</script>