n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcDropdownTree/NstcDropdownTree.vue

@@ -1,396 +1,396 @@
-<!--
-  功能：    下拉树
-  作者：    nstc
-  创建时间： 2021-02-05
--->
-
-<template>
-  <div class="form-create-dropdown-tree">
-    <el-popover
-      v-model="showPopoverFlag"
-      placement="bottom-start"
-      trigger="click"
-    >
-      <el-input
-        :ref="inputRefName"
-        v-model="filterText"
-        suffix-icon="el-icon-search"
-        :placeholder="placeholder || placeholderTemp"
-        :style="{ width: inputWidth }"
-        clearable
-        @input="inputChange"
-        @blur="clearFilterText"
-        @focus="inputFocus"
-        @change="inputChangeAction"
-      />
-      <el-tree
-        :ref="treeRefName"
-        class="filter-tree"
-        :data="treeData"
-        :props="defaultProps"
-        :node-key="nodeKey"
-        default-expand-all
-        :show-checkbox="showCheckbox"
-        :check-strictly="showCheckbox"
-        v-bind="$attrs"
-        v-on="$listeners"
-        @node-click="treeNodeClick"
-        @check="handleCheckChange"
-      />
-      <span slot="reference" class="el-dropdown-link">
-        {{ unitNameText }}
-        <i class="el-icon-arrow-down el-icon--right"></i>
-      </span>
-    </el-popover>
-  </div>
-</template>
-
-<script>
-import axios from '../../utils/axios'
-export default {
-  name: 'NstcDropdownTree', // 单位按树模块查询
-  props: {
-    value: {
-      type: [String, Number, Array, Object],
-      default: () => {
-        return ''
-      }
-    },
-
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-
-    inputWidth: {
-      type: String,
-      default: ''
-    },
-
-    showCheckbox: {
-      type: Boolean,
-      default: false
-    },
-
-    url: {
-      type: String,
-      default: ''
-    },
-
-    nodeKey: {
-      type: String,
-      default: 'id'
-    },
-
-    defaultProps: {
-      type: Object,
-      default: () => {
-        return {
-          children: 'children',
-          label: 'label'
-        }
-      }
-    },
-
-    params: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-
-    queryKey: {
-      type: String,
-      default: 'query'
-    },
-
-    label: {
-      type: [String, Number],
-      default: ''
-    },
-
-    // 额外的查询参数
-    query: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-
-    // 组件的大小
-    size: {
-      type: String,
-      default: () => {
-        return 'normal'
-      }
-    },
-    //是否添加 无
-    showNull: {
-      type: Boolean,
-      default: false
-    },
-    dropUnitName: {
-      type: String,
-      default: '全部单位'
-    },
-    placeholderTemp: {
-      type: String,
-      default: '请输入关键字进行过滤'
-    }
-  },
-  data() {
-    return {
-      showPopoverFlag: false,
-      filterText: null,
-      treeData: [],
-      treeRefName: '',
-      inputRefName: this.getRefName(),
-      queryFlag: true,
-      placeholder: '',
-      windowEventFlag: false,
-      timeTemp: null,
-      unitNameText: '全部单位'
-    }
-  },
-  computed: {
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  },
-  watch: {
-    label(val) {
-      this.filterText = val
-    },
-    value(val) {
-      if (['', null].includes(val)) {
-        this.filterText = null
-        this.placeholder = null
-      }
-    },
-    dropUnitName: {
-      handler(val) {
-        this.unitNameText = val
-      },
-      deep: true
-    }
-  },
-
-  created() {
-    //
-    this.treeRefName = this.getRefName()
-    this.unitNameText = this.dropUnitName
-    // 默认加载一次
-    this.remoteMethod()
-
-    this.filterText = this.label
-
-    // 点击其他地方关闭关闭下拉
-    const that = this
-    document.documentElement.onclick = function () {
-      that.windowEventFlag && that.clearFilterText()
-    }
-  },
-  methods: {
-    /**
-     * input 输入框变化事件
-     */
-    inputChange() {
-      const that = this
-      this.timeTemp && clearTimeout(that.timeTemp)
-      this.timeTemp = setTimeout(() => {
-        console.log('input change', this.filterText)
-        this.queryFlag && this.remoteMethod()
-        this.queryFlag = true
-      }, 300)
-    },
-
-    inputChangeAction(val) {
-      console.log('change')
-      this.$emit('inputChangeAction', val)
-    },
-
-    /**
-     * 本地模糊查询
-     */
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-
-    /**
-     * 随机生成 formId
-     */
-    getRefName() {
-      return `ref_${new Date().getTime()}_${Math.random()
-        .toString()
-        .slice(5, 13)}`
-    },
-
-    /**
-     * 远程查询
-     */
-    remoteMethod() {
-      const that = this
-      //担保的需求化，默认是树，搜索时为列表
-      // if(this.filterText){
-      //   this.params.resultType = 0
-      // }else{
-      //   this.params.resultType = 1
-      // }
-      console.log(this.params, 'this.params')
-      axios({
-        url: that.url,
-        method: 'get',
-        loading: false,
-        params: {
-          [that.queryKey]: that.filterText,
-          ...that.params
-        }
-      })
-        .then((data) => {
-          that.treeData = data.list ? data.list : data
-          if (that.showNull) {
-            let map = {
-              treeNo: '',
-              unitName: '全部单位',
-              unitNo: ''
-            }
-            // eslint-disable-next-line no-debugger
-            // debugger;
-            that.treeData.unshift(map)
-          }
-          that.$nextTick(() => {
-            that.$forceUpdate()
-          })
-        })
-        .catch(() => {})
-    },
-
-    /**
-     * 树节点点击事件
-     *  回调参数： data, node, tree
-     */
-    treeNodeClick(data) {
-      if (!this.showCheckbox) {
-        this.queryFlag = false
-
-        const k = this.defaultProps.label || 'label'
-
-        this.filterText = data[k]
-        this.unitNameText = data[k]
-        this.placeholder = this.filterText
-
-        this._value = data[this.nodeKey]
-
-        // 主动让input框失去交单
-        this.$refs[this.inputRefName].blur()
-        this.showPopoverFlag = false
-        this.$emit('treeNodeClick', data)
-      }
-    },
-
-    /**
-     * 多选树 -- 只支持查询不支持回显
-     * 回调参数： data, node, tree
-     */
-    handleCheckChange(checkedNodes, checkedKeys) {
-      console.log(checkedNodes, checkedKeys)
-
-      this.queryFlag = false
-
-      // const k = this.defaultProps.label || "label";
-      // this.filterText = checkedKeys[k];
-      let newText = []
-      checkedKeys['checkedNodes'].forEach((item) => {
-        checkedKeys['checkedKeys'].forEach((el) => {
-          if (item.unitNo === el) {
-            newText.push(item.unitName)
-          }
-        })
-      })
-
-      this.filterText = newText.toString()
-
-      this.placeholder = this.filterText
-
-      this._value = checkedKeys['checkedKeys']
-
-      this.$emit('checkedClick', checkedKeys)
-    },
-
-    /**
-     * input框失去焦点
-     */
-    clearFilterText() {
-      if (!this.showCheckbox) {
-        this.filterText = this.placeholder
-        this.placeholder = null
-        this.showPopoverFlag = false
-        this.$nextTick(() => {
-          this.$forceUpdate()
-        })
-        this.$emit('filterText', this.filterText)
-        console.log(
-          'TreeSelect关闭弹框...',
-          this.showPopoverFlag,
-          this.filterText
-        )
-      }
-    },
-
-    /**
-     * input聚焦时
-     */
-    inputFocus() {
-      if (!this.showCheckbox) {
-        this.timeTemp && clearTimeout(this.timeTemp)
-        this.windowEventFlag = false
-        this.placeholder = this.filterText
-        this.filterText = ''
-        this.queryFlag = true
-        console.log('input focus...')
-        this.remoteMethod()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.form-create-dropdown-tree {
-  display: inline-block;
-  .select-tree-el-popover {
-    overflow-y: auto;
-  }
-  .temp-input {
-    width: 100%;
-    border: 1px solid #ccc;
-    padding-right: 10px;
-    margin-right: 15px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    height: 29px;
-    > span {
-      padding-left: 10px;
-      width: calc(100% - 10px);
-      height: 100%;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-    }
-  }
-  .el-popper {
-    min-width: 264px;
-  }
-
-  .el-tree-node__content:hover {
-    background-color: rgba(0, 122, 255, 0.1) !important;
-  }
-}
-</style>
+<!--
+  功能：    下拉树
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+
+<template>
+  <div class="form-create-dropdown-tree">
+    <el-popover
+      v-model="showPopoverFlag"
+      placement="bottom-start"
+      trigger="click"
+    >
+      <el-input
+        :ref="inputRefName"
+        v-model="filterText"
+        suffix-icon="el-icon-search"
+        :placeholder="placeholder || placeholderTemp"
+        :style="{ width: inputWidth }"
+        clearable
+        @input="inputChange"
+        @blur="clearFilterText"
+        @focus="inputFocus"
+        @change="inputChangeAction"
+      />
+      <el-tree
+        :ref="treeRefName"
+        class="filter-tree"
+        :data="treeData"
+        :props="defaultProps"
+        :node-key="nodeKey"
+        default-expand-all
+        :show-checkbox="showCheckbox"
+        :check-strictly="showCheckbox"
+        v-bind="$attrs"
+        v-on="$listeners"
+        @node-click="treeNodeClick"
+        @check="handleCheckChange"
+      />
+      <span slot="reference" class="el-dropdown-link">
+        {{ unitNameText }}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+export default {
+  name: 'NstcDropdownTree', // 单位按树模块查询
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return ''
+      }
+    },
+
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+
+    inputWidth: {
+      type: String,
+      default: ''
+    },
+
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+
+    url: {
+      type: String,
+      default: ''
+    },
+
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'label'
+        }
+      }
+    },
+
+    params: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+
+    queryKey: {
+      type: String,
+      default: 'query'
+    },
+
+    label: {
+      type: [String, Number],
+      default: ''
+    },
+
+    // 额外的查询参数
+    query: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+
+    // 组件的大小
+    size: {
+      type: String,
+      default: () => {
+        return 'normal'
+      }
+    },
+    //是否添加 无
+    showNull: {
+      type: Boolean,
+      default: false
+    },
+    dropUnitName: {
+      type: String,
+      default: '全部单位'
+    },
+    placeholderTemp: {
+      type: String,
+      default: '请输入关键字进行过滤'
+    }
+  },
+  data() {
+    return {
+      showPopoverFlag: false,
+      filterText: null,
+      treeData: [],
+      treeRefName: '',
+      inputRefName: this.getRefName(),
+      queryFlag: true,
+      placeholder: '',
+      windowEventFlag: false,
+      timeTemp: null,
+      unitNameText: '全部单位'
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  watch: {
+    label(val) {
+      this.filterText = val
+    },
+    value(val) {
+      if (['', null].includes(val)) {
+        this.filterText = null
+        this.placeholder = null
+      }
+    },
+    dropUnitName: {
+      handler(val) {
+        this.unitNameText = val
+      },
+      deep: true
+    }
+  },
+
+  created() {
+    //
+    this.treeRefName = this.getRefName()
+    this.unitNameText = this.dropUnitName
+    // 默认加载一次
+    this.remoteMethod()
+
+    this.filterText = this.label
+
+    // 点击其他地方关闭关闭下拉
+    const that = this
+    document.documentElement.onclick = function () {
+      that.windowEventFlag && that.clearFilterText()
+    }
+  },
+  methods: {
+    /**
+     * input 输入框变化事件
+     */
+    inputChange() {
+      const that = this
+      this.timeTemp && clearTimeout(that.timeTemp)
+      this.timeTemp = setTimeout(() => {
+        console.log('input change', this.filterText)
+        this.queryFlag && this.remoteMethod()
+        this.queryFlag = true
+      }, 300)
+    },
+
+    inputChangeAction(val) {
+      console.log('change')
+      this.$emit('inputChangeAction', val)
+    },
+
+    /**
+     * 本地模糊查询
+     */
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+
+    /**
+     * 随机生成 formId
+     */
+    getRefName() {
+      return `ref_${new Date().getTime()}_${Math.random()
+        .toString()
+        .slice(5, 13)}`
+    },
+
+    /**
+     * 远程查询
+     */
+    remoteMethod() {
+      const that = this
+      //担保的需求化，默认是树，搜索时为列表
+      // if(this.filterText){
+      //   this.params.resultType = 0
+      // }else{
+      //   this.params.resultType = 1
+      // }
+      console.log(this.params, 'this.params')
+      axios({
+        url: that.url,
+        method: 'get',
+        loading: false,
+        params: {
+          [that.queryKey]: that.filterText,
+          ...that.params
+        }
+      })
+        .then((data) => {
+          that.treeData = data.list ? data.list : data
+          if (that.showNull) {
+            let map = {
+              treeNo: '',
+              unitName: '全部单位',
+              unitNo: ''
+            }
+            // eslint-disable-next-line no-debugger
+            // debugger;
+            that.treeData.unshift(map)
+          }
+          that.$nextTick(() => {
+            that.$forceUpdate()
+          })
+        })
+        .catch(() => {})
+    },
+
+    /**
+     * 树节点点击事件
+     *  回调参数： data, node, tree
+     */
+    treeNodeClick(data) {
+      if (!this.showCheckbox) {
+        this.queryFlag = false
+
+        const k = this.defaultProps.label || 'label'
+
+        this.filterText = data[k]
+        this.unitNameText = data[k]
+        this.placeholder = this.filterText
+
+        this._value = data[this.nodeKey]
+
+        // 主动让input框失去交单
+        this.$refs[this.inputRefName].blur()
+        this.showPopoverFlag = false
+        this.$emit('treeNodeClick', data)
+      }
+    },
+
+    /**
+     * 多选树 -- 只支持查询不支持回显
+     * 回调参数： data, node, tree
+     */
+    handleCheckChange(checkedNodes, checkedKeys) {
+      console.log(checkedNodes, checkedKeys)
+
+      this.queryFlag = false
+
+      // const k = this.defaultProps.label || "label";
+      // this.filterText = checkedKeys[k];
+      let newText = []
+      checkedKeys['checkedNodes'].forEach((item) => {
+        checkedKeys['checkedKeys'].forEach((el) => {
+          if (item.unitNo === el) {
+            newText.push(item.unitName)
+          }
+        })
+      })
+
+      this.filterText = newText.toString()
+
+      this.placeholder = this.filterText
+
+      this._value = checkedKeys['checkedKeys']
+
+      this.$emit('checkedClick', checkedKeys)
+    },
+
+    /**
+     * input框失去焦点
+     */
+    clearFilterText() {
+      if (!this.showCheckbox) {
+        this.filterText = this.placeholder
+        this.placeholder = null
+        this.showPopoverFlag = false
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+        this.$emit('filterText', this.filterText)
+        console.log(
+          'TreeSelect关闭弹框...',
+          this.showPopoverFlag,
+          this.filterText
+        )
+      }
+    },
+
+    /**
+     * input聚焦时
+     */
+    inputFocus() {
+      if (!this.showCheckbox) {
+        this.timeTemp && clearTimeout(this.timeTemp)
+        this.windowEventFlag = false
+        this.placeholder = this.filterText
+        this.filterText = ''
+        this.queryFlag = true
+        console.log('input focus...')
+        this.remoteMethod()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.form-create-dropdown-tree {
+  display: inline-block;
+  .select-tree-el-popover {
+    overflow-y: auto;
+  }
+  .temp-input {
+    width: 100%;
+    border: 1px solid #ccc;
+    padding-right: 10px;
+    margin-right: 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 29px;
+    > span {
+      padding-left: 10px;
+      width: calc(100% - 10px);
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .el-popper {
+    min-width: 264px;
+  }
+
+  .el-tree-node__content:hover {
+    background-color: rgba(0, 122, 255, 0.1) !important;
+  }
+}
+</style>