11

src/components/selectTree/index.vue

@@ -1,216 +0,0 @@
-<template>
-  <el-select
-    ref="test"
-    :size="size"
-    :disabled="isBindPlan"
-    :value="valueTitle"
-    :clearable="clearable"
-    @clear="clearHandle"
-    :placeholder="placeholder"
-  >
-    <el-option :value="valueTitle" :label="valueTitle" class="options">
-      <slot :pHandleNodeClick="handleNodeClick">
-        <el-tree
-          id="tree-option"
-          ref="selectTree"
-          :key="treeKey"
-          :accordion="accordion"
-          :data="options"
-          :props="props"
-          :node-key="props.value"
-          :default-expand-all="true"
-          :default-expanded-keys="defaultExpandedKey"
-          @node-click="handleNodeClick"
-        >
-        </el-tree>
-      </slot>
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  props: {
-    // 配置项
-    props: {
-      type: Object,
-      default () {
-        return {
-          value: 'value', // ID字段名
-          label: 'label', // 显示名称
-          children: 'children' // 子级字段名
-        }
-      }
-    },
-    // 选项列表数据(树形结构的对象数组)
-    options: { type: Array, default: () => [] },
-    // 初始值
-    value: { type: [String, Number], default: null },
-    // 可清空选项
-    clearable: { type: Boolean, default: false },
-    // 自动收起
-    accordion: { type: Boolean, default: false },
-    // // 可清空选项
-    // disabled: { type: Boolean, default: false },
-    // 多选
-    multiple: { type: Boolean, default: false },
-    //
-
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    size: {
-      type: String,
-      default: 'mini'
-    },
-    dialogType: {
-      type: String,
-      default: ''
-    },
-    tableIndex: { type: Number, default: null },
-    initStr: {
-      type: String,
-      default: ''
-    },
-    isBindPlan: {
-      type: Boolean,
-      default: function () {
-        return false
-      }
-    },
-  },
-  data () {
-    return {
-      valueId: null,
-      treeKey: true,
-      valueTitle: '',
-      defaultExpandedKey: []
-    }
-  },
-  watch: {
-    // 这个需要用深度监听，不然回显有时会失效
-    value: {
-      handler (val) {
-        this.valueId = this.value
-        this.initHandle()
-      },
-      deep: true,
-      immediate: true
-    },
-    options:{
-      handler (val) {
-        this.initHandle()
-      },
-      deep: true,
-      immediate: true
-    },
-    initStr: {
-      handler (newVal, oldVal) {
-        if (this.initStr) {
-          // console.log(newVal);
-          this.valueTitle = newVal
-        }
-      },
-      immediate: true
-    }
-  },
-  // mounted() {
-  //   this.valueId = this.value; // 初始值
-  //   setTimeout(() => {
-  //     this.initHandle();
-  //   },300)
-  // },
-  methods: {
-    // 初始化值
-    async initHandle () {
-      if (this.valueId) {
-        this.$nextTick(async () => {
-          const tempValue = await this.$refs.selectTree.getNode(this.valueId)
-          setTimeout(() => {
-            if (tempValue) {
-              this.valueTitle = tempValue.data[this.props.label] // 初始化显示
-              this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
-              this.defaultExpandedKey = [this.valueId] // 设置默认展开
-            }
-          }, 300)
-        })
-      } else {
-        this.valueTitle = ''
-      }
-      this.initScroll()
-    },
-    // 初始化滚动条
-    initScroll () {
-      this.$nextTick(() => {
-        let scrollWrap = document.querySelectorAll(
-          '.el-scrollbar .el-select-dropdown__wrap'
-        )[0]
-        let scrollBar = document.querySelectorAll(
-          '.el-scrollbar .el-scrollbar__bar'
-        )
-        scrollWrap.style.cssText =
-          'margin: 0px; max-height: none; overflow: hidden;'
-        scrollBar.forEach(ele => (ele.style.width = 0))
-      })
-    },
-    // 切换选项
-    handleNodeClick (node) {
-      // 多选
-      if (this.multiple) {
-        this.valueTitle += `${node[this.props.label]} , `
-        this.valueId = node[this.props.value]
-        this.$emit('getValue', node)
-        this.defaultExpandedKey = []
-        return
-      }
-      this.valueTitle = node[this.props.label]
-      this.valueId = node[this.props.value]
-      this.$emit('getValue', node)
-      this.defaultExpandedKey = []
-      this.$refs.test.handleClose()
-    },
-    // 清除选中
-    clearHandle () {
-      this.valueTitle = ''
-      this.valueId = null
-      this.defaultExpandedKey = []
-      // this.clearSelected()
-      this.treeKey = !this.treeKey
-      this.$emit('getValue', null)
-    },
-    // 清空选中样式
-    clearSelected () {
-      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
-      allNode.forEach(element => element.classList.remove('is-current'))
-    }
-  }
-}
-</script>
-<style scoped>
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  max-height: 274px;
-  padding: 0;
-  overflow: hidden;
-  overflow-y: auto;
-}
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-ul li >>> .el-tree .el-tree-node__content {
-  height: auto;
-  padding: 0 20px;
-}
-.el-tree-node__label {
-  font-weight: normal;
-}
-.el-tree >>> .is-current .el-tree-node__label {
-  color: #157a2c;
-  font-weight: 700;
-}
-.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
-  color: #606266;
-  font-weight: normal;
-}
-</style>