n20-common-lib 1.2.43 → 1.3.0

package/src/components/NstcG6Components/NstcSelectTreeList/NstcSelectTreeList.vue

@@ -0,0 +1,676 @@
+<!--
+  功能：    下拉树
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+
+<template>
+  <div class="form-create-select-tree">
+    <el-popover
+      v-model="showPopoverFlag"
+      popper-class="select-tree-el-popover"
+      placement="bottom-end"
+      v-bind="$attrs"
+      :disabled="disabled"
+    >
+      <el-tree
+        v-if="treeRefName"
+        :ref="treeRefName"
+        v-clickoutside="onClickOutside"
+        class="filter-tree"
+        :data="treeData"
+        highlight-current
+        :props="defaultProps"
+        :node-key="nodeKey"
+        :check-strictly="checkStrictly"
+        default-expand-all
+        :expand-on-click-node="false"
+        :show-checkbox="multiple"
+        v-bind="$attrs"
+        @click="popoverShowFlag = true"
+        @node-click="treeNodeClick"
+        @check="handleCheckChange"
+        v-on="$listeners"
+      >
+        <div
+          slot-scope="{ data }"
+          class="custom-tree-node"
+          :class="{
+            'not-allow': defaultProps.disabled && !!data[defaultProps.disabled]
+          }"
+        >
+          <span v-if="nodeKey === 'cashFlowNo'">
+            {{ `${data[tagProps.value]}   ${data[tagProps.label]}` }}
+          </span>
+          <span v-else>{{ data[defaultProps.label] }}</span>
+        </div>
+      </el-tree>
+      <InputTag
+        v-if="multiple"
+        slot="reference"
+        v-model="checkedValue"
+        class="input-tag input-w"
+        :props="tagProps"
+        @clearFilterText="clearFilterText"
+        @input-value="
+          (val) => {
+            filterText = val
+            inputChange()
+          }
+        "
+      />
+      <!-- :suffix-icon="!changeSuffix ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" -->
+      <el-input
+        v-else-if="iconType === 'drop'"
+        :ref="inputRefName"
+        slot="reference"
+        v-model="filterText"
+        :placeholder="placeholder || '请选择'"
+        :disabled="disabled"
+        :style="{ width: inputWidth }"
+        :class="({ 'nstc-input-small': size === 'small' }, 'input-w')"
+        v-bind="$attrs"
+        @input="inputChange"
+        @blur="clearFilterText"
+        @focus="inputFocus"
+        @change="inputChangeAction"
+        @mouseenter.native="isHover = true"
+        @mouseleave.native="isHover = false"
+        v-on="$listeners"
+      >
+        <span
+          v-if="
+            clearable &&
+            (disabled ? false : checkedValue && (changeSuffix || isHover))
+          "
+          slot="suffix"
+          class="input-icon el-icon-circle-close"
+          @click.stop="clear"
+        ></span>
+        <span
+          v-else
+          slot="suffix"
+          class="input-icon el-icon-arrow-down"
+          :class="[changeSuffix ? 'up' : 'down']"
+        ></span>
+      </el-input>
+      <el-input
+        v-else
+        :ref="inputRefName"
+        slot="reference"
+        v-model="filterText"
+        :disabled="disabled"
+        suffix-icon="el-icon-search"
+        :placeholder="placeholder"
+        :style="{ width: inputWidth }"
+        :class="({ 'nstc-input-small': size === 'small' }, 'input-w')"
+        :clearable="clearable"
+        v-bind="$attrs"
+        @input="inputChange"
+        @blur="clearFilterText"
+        @focus="inputFocus"
+        @change="inputChangeAction"
+        v-on="$listeners"
+      />
+      <!--  <i class="el-icon-arrow-down" />  -->
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/axios'
+// import InputTag from "../../InputTag/index";
+import clickoutside from 'element-ui/src/utils/clickoutside'
+export default {
+  name: 'NstcSelectTreeList', // 单位按树模块查询
+  components: {
+    // InputTag,
+  },
+  directives: {
+    clickoutside
+  },
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return ''
+      }
+    },
+
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+
+    inputWidth: {
+      type: String,
+      default: ''
+    },
+
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+
+    url: {
+      type: [String, Object],
+      default: ''
+    },
+
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          children: 'children',
+          label: 'cashName'
+        }
+      }
+    },
+
+    tagProps: {
+      type: Object,
+      default: () => {
+        return {
+          label: 'label',
+          value: 'value'
+        }
+      }
+    },
+
+    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
+    },
+    // 只能点击叶子节点
+    onlyClickLeaf: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可清空
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 图标类型：搜索(任意)、下拉(drop)
+    iconType: {
+      type: String,
+      default: ''
+    },
+    disableUnclickLeaf: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      //false：上下级节点有联动；true：上下级节点没有联动
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      checkedValue: [],
+      isHover: false,
+      isFocus: false,
+      changeSuffix: false,
+      showPopoverFlag: false,
+      filterText: null,
+      treeData: [
+        // {
+        //   unitName: "全部单位",
+        //   unitNo: "",
+        // },
+      ],
+      treeRefName: '',
+      inputRefName: this.getRefName(),
+      queryFlag: true,
+      placeholder: '请选择',
+      windowEventFlag: false,
+      timeTemp: null,
+      treeDataAll: []
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.checkedValue = val
+        this.$emit('input', val)
+      }
+    }
+  },
+  watch: {
+    label: {
+      handler(val) {
+        this.$nextTick(() => {
+          console.log(val, '999')
+          this.filterText = val
+          !val && (this.placeholder = null)
+        })
+      },
+      immediate: true,
+      deep: true
+    },
+    value: {
+      handler(val) {
+        if (['', null].includes(val)) {
+          this.filterText = null
+          this.placeholder = null
+          this.checkedValue = []
+          this.treeRefName && this.$refs[this.treeRefName].setCheckedKeys([])
+        } else {
+          this.$nextTick(() => {
+            if (typeof val === 'object') {
+              if (!Array.isArray(val)) {
+                this.filterText = val.label
+              } else {
+                this.checkedValue = this.value
+                const val = this.value.map((item) => item[this.nodeKey])
+                this.$refs[this.treeRefName].setCheckedKeys(val)
+              }
+            } else {
+              this.filterText = this.filterText || this.label
+            }
+          })
+        }
+      },
+      immediate: true
+    },
+    showPopoverFlag(val) {
+      if (val) {
+        const value = this.checkedValue === '' ? null : this.checkedValue
+        this.$refs[this.treeRefName].setCurrentKey(value)
+        this.treeData = this.treeDataAll
+        console.log(this.treeData)
+      }
+    }
+  },
+
+  created() {
+    //
+    this.treeRefName = this.getRefName()
+
+    // 默认加载一次
+    this.remoteMethod('first')
+
+    this.filterText = this.label
+
+    // 点击其他地方关闭关闭下拉
+    const that = this
+    document.documentElement.onclick = function () {
+      if (that.windowEventFlag) {
+        that.clearFilterText()
+        this.showPopoverFlag = false
+      }
+    }
+  },
+  mounted() {
+    // 关闭筛选弹窗中的二级popover
+    this.$bus.$on('closePopoverInSearch', () => {
+      this.showPopoverFlag = false
+    })
+  },
+  methods: {
+    clear() {
+      this.$emit('input', '')
+      this.filterText = null
+      this.placeholder = null
+      this.checkedValue = []
+    },
+    /**
+     * 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)}`
+    },
+    /**
+     * 获取url
+     */
+    getUrl(type) {
+      let url = ''
+      let temp = ''
+      if (typeof this.url === 'string') {
+        temp = this.url.replaceAll('{', '').replaceAll('}', '')
+        temp = temp.split(',')
+        for (let i of temp) {
+          if (type && i.includes('urlTree')) {
+            url = i.split(':')[1]
+            break
+          }
+          if (!type && i.includes('urlList')) {
+            url = i.split(':')[1]
+            break
+          }
+        }
+      } else {
+        if (type) {
+          url = this.url.urlTree
+        } else {
+          url = this.url.urlList
+        }
+      }
+
+      return url
+    },
+    /**
+     * 远程查询
+     */
+    remoteMethod(type) {
+      const that = this
+      let url = ''
+      //担保的需求化，默认是树，搜索时为列表
+
+      if (this.filterText) {
+        url = this.getUrl(false)
+      } else {
+        url = this.getUrl(true)
+      }
+      console.log(this.url, url)
+      console.log(this.params, 'this.params', that.queryKey)
+      axios({
+        url: url,
+        method: 'post',
+        loading: false,
+        data: {
+          [that.queryKey]: type === 'first' ? '' : that.filterText,
+          ...that.params
+        }
+      })
+        .then((data) => {
+          console.log(data, 'data')
+          if (type === 'first') {
+            that.treeDataAll = data.list
+              ? data.list
+              : data.data
+              ? data.data
+              : data
+          }
+          that.treeData = data.list ? data.list : data.data ? data.data : data
+          if (that.showNull) {
+            let map = {
+              treeNo: '',
+              [this.defaultProps.label]: '全部单位',
+              [this.nodeKey]: ''
+            }
+            that.treeData.unshift(map)
+          }
+          if (this.multiple && this.onlyClickLeaf && this.disableUnclickLeaf) {
+            this.setOnlyLeafChecked(that.treeData)
+          }
+          that.$nextTick(() => {
+            that.$forceUpdate()
+          })
+        })
+        .catch(() => {})
+    },
+
+    /**
+     * 设置非叶子节点的不可选择
+     */
+    setOnlyLeafChecked(treeData) {
+      treeData.forEach((item) => {
+        if (item.children && item.children.length) {
+          item.disabled = true
+          this.setOnlyLeafChecked(item.children)
+        } else {
+          item.disabled = false
+        }
+      })
+    },
+
+    /**
+     * 树节点点击事件
+     *  回调参数： data, node, tree
+     */
+    treeNodeClick(data, node, tree) {
+      console.log(data)
+      if (!this.multiple) {
+        if (this.onlyClickLeaf && !node.isLeaf) return
+        if (this.defaultProps.disabled && !!data[this.defaultProps.disabled])
+          return
+        this.queryFlag = false
+
+        const k = this.defaultProps.label || 'label'
+        console.log(data, 'data', k, 'K')
+
+        this.filterText = data[k]
+        this.placeholder = this.filterText
+
+        this._value = data[this.nodeKey]
+
+        // 主动让input框失去交单
+        this.$refs[this.inputRefName].blur()
+        this.showPopoverFlag = false
+        this.$emit('treeNodeClick', data, node, tree)
+      }
+    },
+
+    /**
+     * 多选树 -- 只支持查询不支持回显
+     * 回调参数： data, node, tree
+     */
+    handleCheckChange(data, checked) {
+      console.log(data, checked)
+      this.queryFlag = false
+
+      // const k = this.defaultProps.label || "label";
+      // this.filterText = checkedKeys[k];
+      let newText = []
+      if (this.onlyClickLeaf && !this.checkStrictly) {
+        //如果是增加父子节点联动性并且只能点击子节点
+        checked['checkedNodes'].forEach((item) => {
+          checked['checkedKeys'].forEach((el) => {
+            if (item.unitNo === el && !item.children) {
+              newText.push(item.unitName)
+            }
+          })
+        })
+      } else {
+        checked['checkedNodes'].forEach((item) => {
+          checked['checkedKeys'].forEach((el) => {
+            if (item.unitNo === el) {
+              newText.push(item.unitName)
+            }
+          })
+        })
+      }
+      this.filterText = newText.toString()
+
+      this.placeholder = this.filterText
+
+      if (this.onlyClickLeaf && !this.checkStrictly) {
+        this._value = checked.checkedNodes
+          .filter((item) => {
+            return !item.children
+          })
+          .map((item) => {
+            return {
+              [this.nodeKey]: item[this.nodeKey],
+              [this.queryKey]: item[this.queryKey]
+            }
+          })
+      } else {
+        this._value = checked.checkedNodes.map((item) => {
+          return {
+            [this.nodeKey]: item[this.nodeKey],
+            [this.queryKey]: item[this.queryKey]
+          }
+        })
+      }
+
+      this.$emit('checkedClick', checked)
+    },
+
+    /**
+     * input框失去焦点
+     */
+    clearFilterText() {
+      this.changeSuffix = false
+      this.filterText = this.placeholder
+      this.placeholder = null
+      // this.showPopoverFlag = false;
+      this.$nextTick(() => {
+        this.$forceUpdate()
+      })
+      this.$emit('filterText', this.filterText)
+    },
+
+    /**
+     * input聚焦时
+     */
+    inputFocus() {
+      this.changeSuffix = true
+      if (this.filterText) {
+        this.timeTemp && clearTimeout(this.timeTemp)
+        this.windowEventFlag = false
+        this.placeholder = this.filterText
+        this.filterText = ''
+        this.queryFlag = true
+      } else {
+        this.remoteMethod()
+      }
+    },
+    onClickOutside() {
+      this.showPopoverFlag = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.custom-tree-node {
+  flex: 1;
+}
+.not-allow {
+  color: #ddd;
+}
+.not-allow:hover {
+  cursor: not-allowed;
+}
+.form-create-select-tree {
+  .input-tag > .el-select__tags:hover + .el-input > .el-input__inner {
+    border: 1px solid #007aff;
+  }
+  display: inline-block;
+  .el-input__suffix:hover {
+    cursor: pointer;
+  }
+  .select-tree-el-popover {
+    padding: 0;
+    overflow-y: auto;
+  }
+  .filter-tree {
+    padding: 12px;
+  }
+  .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;
+  }
+  .input-icon {
+    width: 25px;
+    text-align: center;
+    cursor: pointer;
+    &.up {
+      transform: rotateZ(-180deg);
+      transition: 0.3s;
+    }
+    &.down {
+      transform: rotateZ(0deg);
+      transition: 0.3s;
+    }
+  }
+}
+</style>