增加tree-select组件

package.json

@@ -19,7 +19,7 @@
     "dayjs": "^1.7.7",
     "echarts": "^4.0.4",
     "html2canvas": "^1.0.0-alpha.12",
-    "iview": "^3.1.3",
+    "iview": "^3.2.2",
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
     "simplemde": "^1.11.2",

src/api/data.js

@@ -42,3 +42,10 @@ export const getOrgData = () => {
     method: 'get'
   })
 }
+
+export const getTreeSelectData = () => {
+  return axios.request({
+    url: 'get_tree_select_data',
+    method: 'get'
+  })
+}

src/components/tree-select/index.js

@@ -0,0 +1 @@
+export { default } from './tree-select.vue'

src/components/tree-select/tree-select-tree.vue

@@ -0,0 +1,135 @@
+<template>
+  <Tree
+    :data="data"
+    @on-check-change="handleCheckSelect"
+    v-on="parent.$listeners"
+    v-bind="parent.$attrs"
+    :load-data="loadDataCallback"
+    show-checkbox
+  ></Tree>
+</template>
+
+<script>
+import Emitter from 'iview/src/mixins/emitter.js'
+
+const arrayEqual = (arr1, arr2) => {
+  // 判断数组的长度
+  if (arr1.length !== arr2.length) {
+    return false
+  } else {
+    // 循环遍历数组的值进行比较
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false
+      }
+    }
+    return true
+  }
+}
+
+export default {
+  name: 'TreeSelectTree',
+  mixins: [Emitter],
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    selectedArray: {
+      type: Array,
+      default: () => []
+    },
+    loadData: Function
+  },
+  data () {
+    return {
+      flatDic: {},
+      checkedArray: []
+    }
+  },
+  inject: ['parent'],
+  computed: {
+    expandAll () {
+      return this.parent.$attrs['expand-all']
+    }
+  },
+  watch: {
+    data (newData, oldVal) {
+      this.updateFlagDic(newData)
+      let selectArray = []
+      this.selectedArray.forEach(id => {
+        if (id in this.flatDic) selectArray.push(id)
+      })
+      this.$emit('on-check', selectArray.map(id => this.flatDic[id]))
+      if (this.expandAll) this.checkData(newData, false, true)
+    },
+    selectedArray (newVal, oldVal) {
+      if (arrayEqual(newVal, oldVal)) return
+      const filtedNewVal = newVal.filter(id => id in this.flatDic)
+      this.$emit('on-check', filtedNewVal.map(id => this.flatDic[id]))
+      this.$emit('on-clear')
+      this.$nextTick(() => {
+        this.checkData(this.data, true)
+      })
+    }
+  },
+  methods: {
+    checkEmit (value, label) {
+      this.dispatch('iSelect', 'on-select-selected', {
+        value,
+        label
+      })
+      this.$emit('on-select-selected', {
+        value,
+        label
+      })
+    },
+    updateFlagDic (newData) {
+      let newFlagDic = {}
+      this.setFlagDic(newData, item => {
+        newFlagDic[item.id] = item
+      })
+      this.flatDic = newFlagDic
+    },
+    setFlagDic (data, callback) {
+      data.forEach(item => {
+        if (item.children && item.children.length) { this.setFlagDic(item.children, callback) }
+        callback(item)
+      })
+    },
+    handleCheckSelect (selectArray, selectItem) {
+      this.$emit('on-check', selectArray)
+      this.parent.$emit('on-change', selectArray)
+    },
+    checkData (data, emit, expandAll) {
+      data.forEach(item => {
+        if (this.selectedArray.includes(item.id)) {
+          this.$set(item, 'checked', true)
+          this.checkedArray.push(item)
+          if (emit) this.checkEmit(item.id, item.title)
+        } else this.$set(item, 'checked', false)
+        if (item.children && item.children.length) {
+          if (this.expandAll && expandAll) this.$set(item, 'expand', true)
+          this.checkData(item.children, emit, expandAll)
+        }
+      })
+    },
+    loadDataCallback (item, callback) {
+      this.loadData(item, data => {
+        return (() => {
+          callback(data)
+          this.updateFlagDic(this.data)
+        })(data)
+      })
+    }
+  },
+  mounted () {
+    this.checkData(this.data, false, true)
+    this.$nextTick(() => {
+      this.$emit('on-check', this.checkedArray)
+    })
+  }
+}
+</script>
+
+<style></style>

src/components/tree-select/tree-select.vue

@@ -0,0 +1,72 @@
+<template>
+  <Select
+    ref="select"
+    class="tree-select"
+    v-bind="$attrs"
+    @on-change="handleChange"
+    multiple
+  >
+    <tree-select-tree-item
+      :selectedArray="value"
+      :data="data"
+      @on-clear="handleClear"
+      :load-data="loadData"
+      @on-check="handleTreeCheck"
+    ></tree-select-tree-item>
+  </Select>
+</template>
+
+<script>
+import Emitter from 'iview/src/mixins/emitter'
+import TreeSelectTreeItem from './tree-select-tree.vue'
+export default {
+  name: 'TreeSelect',
+  mixins: [Emitter],
+  components: {
+    TreeSelectTreeItem
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    loadData: Function
+  },
+  data () {
+    return {
+      isChangedByTree: true,
+      isInit: true
+    }
+  },
+  provide () {
+    return {
+      parent: this
+    }
+  },
+  methods: {
+    handleChange (selected) {
+      if (!this.isChangedByTree) this.$emit('input', selected)
+      this.isChangedByTree = false
+    },
+    handleTreeCheck (selectedArray) {
+      this.isChangedByTree = true
+      this.$emit('input', selectedArray.map(item => item.id))
+    },
+    handleClear () {
+      this.$refs.select.reset()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.tree-select {
+  .ivu-select-dropdown {
+    padding: 0 6px;
+  }
+}
+</style>

src/locale/lang/en-US.js

@@ -40,5 +40,6 @@ export default {
   message_page: 'Message Center',
   tree_table_page: 'Tree Table',
   org_tree_page: 'Org Tree',
-  drag_drawer_page: 'Draggable Drawer'
+  drag_drawer_page: 'Draggable Drawer',
+  tree_select_page: 'Tree Selector'
 }

src/locale/lang/zh-CN.js

@@ -40,5 +40,6 @@ export default {
   message_page: '消息中心',
   tree_table_page: '树状表格',
   org_tree_page: '组织结构树',
-  drag_drawer_page: '可拖动抽屉'
+  drag_drawer_page: '可拖动抽屉',
+  tree_select_page: '树状下拉选择器'
 }

src/locale/lang/zh-TW.js

@@ -40,5 +40,6 @@ export default {
   message_page: '消息中心',
   tree_table_page: '樹狀表格',
   org_tree_page: '組織結構樹',
-  drag_drawer_page: '可拖動抽屜'
+  drag_drawer_page: '可拖動抽屜',
+  tree_select_page: '樹狀下拉選擇器'
 }