n20-common-lib 1.3.3 → 1.3.6

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

@@ -1,676 +0,0 @@
-<!--
-  功能：    下拉树
-  作者：    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>