mali-applet-ui 1.0.63 → 1.0.65

package/lib/components/ml-text/ml-text.vue

@@ -67,9 +67,8 @@ export default {
 
 <style lang="scss">
 .ml-text {
-  display: inline-block;
+  display: inline-flex;
   padding: 0 4rpx;
-  vertical-align: middle;
   &.is-underline {
     text-decoration: underline;
     // #ifdef H5

package/lib/components/ml-tree/ml-tree.vue

@@ -1,5 +1,15 @@
 <template>
   <view class="ml-tree" :class="[className || '']">
+    <view v-if="showCheckbox && (showAllCheckbox || showCheckboxBtn)" class="ml-tree-checkbox-btns">
+      <view v-if="showAllCheckbox" class="ml-tree-checkbox-btns-left">
+        <ml-checkbox v-model="isAllCheckboxChecked" :indeterminate="isAllCheckboxIndeterminate" @change="toggleAllCheckboxEvent">全选</ml-checkbox>
+      </view>
+      <view v-if="showCheckboxBtn" class="ml-tree-checkbox-btns-right">
+        <ml-button size="mini" status="primary" @click="setAllTreeExpand(true)">一键展开</ml-button>
+        <ml-button size="mini" status="primary" @click="setAllTreeExpand(false)">一键收起</ml-button>
+      </view>
+    </view>
+    <ml-tree-node v-for="(item, index) in treeData" :key="index" :node-data="item"></ml-tree-node>
   </view>
 </template>
 
@@ -9,12 +19,247 @@ import XEUtils from 'xe-utils'
 export default {
   name: 'MlTree',
   props: {
-    value: Array
+    data: Array,
+    height: String,
+    checkStrictly: Boolean,
+    showRadio: Boolean,
+    showCheckbox: Boolean,
+    showAllCheckbox: Boolean,
+    indeterminateToChecked: Boolean,
+    showCheckboxBtn: Boolean,
+    checkRowKeys: Array,
+    nodeProps: Object
+  },
+  provide () {
+    return {
+      mlTree: this
+    }
+  },
+  data () {
+    return {
+      treeData: [],
+      isAllCheckboxChecked: false,
+      isAllCheckboxIndeterminate: false,
+      indeterminateRowKeys: [],
+      selectCheckboxRowKeys: [],
+      expandRowKeys: []
+    }
+  },
+  computed: {
+    styles () {
+      return this.height ? `height: ${this.height};` : ''
+    },
+    nodeOpts () {
+      const nodeProps = this.nodeProps || {}
+      return {
+        title: nodeProps.name || 'name',
+        key: nodeProps.key || 'key',
+        children: nodeProps.children || 'children'
+      }
+    },
+    titleField () {
+      return this.nodeOpts.title
+    },
+    keyField () {
+      return this.nodeOpts.key
+    },
+    childrenField () {
+      return this.nodeOpts.children
+    }
+  },
+  watch: {
+    data (value) {
+      this.treeData = value
+    },
+    checkRowKeys (value) {
+      if (!this.isCheckboxModelUpdate) {
+        this.selectCheckboxRowKeys = []
+        this.setCheckboxRow(value, true)
+      }
+      this.isCheckboxModelUpdate = false
+    }
+  },
+  created () {
+    this.treeData = this.data
   },
   methods: {
+    selectCheckboxNodeEvent ({ nodeData, nodeKey }) {
+      const { keyField, childrenField } = this
+      const checked = this.selectCheckboxRowKeys.indexOf(nodeKey) === -1
+      if (checked) {
+        if (this.checkStrictly) {
+          if (!this.selectCheckboxRowKeys.includes(nodeKey)) {
+            this.selectCheckboxRowKeys.push(nodeKey)
+          }
+          const halfIndex = this.indeterminateRowKeys.indexOf(nodeKey)
+          if (halfIndex > -1) {
+            this.indeterminateRowKeys.splice(halfIndex, 1)
+          }
+        } else {
+          XEUtils.eachTree([nodeData], (item) => {
+            if (!this.selectCheckboxRowKeys.includes(item[keyField])) {
+              this.selectCheckboxRowKeys.push(item[keyField])
+            }
+            const halfIndex = this.indeterminateRowKeys.indexOf(item[keyField])
+            if (halfIndex > -1) {
+              this.indeterminateRowKeys.splice(halfIndex, 1)
+            }
+          }, { children: childrenField })
+        }
+      } else {
+        if (this.checkStrictly) {
+          const nodeIndex = this.selectCheckboxRowKeys.indexOf(nodeKey)
+          if (nodeIndex > -1) {
+            this.selectCheckboxRowKeys.splice(nodeIndex, 1)
+          }
+          const halfIndex = this.indeterminateRowKeys.indexOf(nodeKey)
+          if (halfIndex > -1) {
+            this.indeterminateRowKeys.splice(halfIndex, 1)
+          }
+        } else {
+          XEUtils.eachTree([nodeData], (item) => {
+            const nodeIndex = this.selectCheckboxRowKeys.indexOf(item[keyField])
+            if (nodeIndex > -1) {
+              this.selectCheckboxRowKeys.splice(nodeIndex, 1)
+            }
+            const halfIndex = this.indeterminateRowKeys.indexOf(item[keyField])
+            if (halfIndex > -1) {
+              this.indeterminateRowKeys.splice(halfIndex, 1)
+            }
+          }, { children: childrenField })
+        }
+      }
+      if (!this.checkStrictly) {
+        this.updateParentIndeterminateStatus(nodeData)
+      }
+      this.updateCheckStatus()
+      this.isCheckboxModelUpdate = true
+      this.$emit('checkbox-change', { row: nodeData, checked, checkedKeys: this.selectCheckboxRowKeys })
+      this.$emit('update:checkRowKeys', [...this.selectCheckboxRowKeys])
+    },
+    expandNodeEvent ({ nodeData, nodeKey }) {
+      const nodeIndex = this.expandRowKeys.indexOf(nodeKey)
+      const expanded = nodeIndex === -1
+      if (expanded) {
+        this.expandRowKeys.push(nodeKey)
+      } else {
+        this.expandRowKeys.splice(nodeIndex, 1)
+      }
+      this.$emit('expand-change', { row: nodeData, expanded, expandedKeys: this.expandRowKeys })
+    },
+    updateParentIndeterminateStatus (nodeData) {
+      const { keyField, childrenField } = this
+      const rest = XEUtils.findTree(this.treeData, item => item[keyField] === nodeData[keyField])
+      if (rest) {
+        XEUtils.lastEach(rest.nodes.slice(0, rest.nodes.length - 1), (item) => {
+          const currKey = item[keyField]
+          const childs = item[childrenField]
+          const isAllChecked = childs.every(item => this.selectCheckboxRowKeys.includes(item[keyField]))
+          const isAllIndeterminate = !isAllChecked && childs.some(item => this.selectCheckboxRowKeys.includes(item[keyField]) || this.indeterminateRowKeys.includes(item[keyField]))
+          const nodeIndex = this.selectCheckboxRowKeys.indexOf(currKey)
+          if (isAllChecked) {
+            if (nodeIndex === -1) {
+              this.selectCheckboxRowKeys.push(currKey)
+            }
+          } else {
+            if (nodeIndex > -1) {
+              this.selectCheckboxRowKeys.splice(nodeIndex, 1)
+            }
+          }
+          const halfIndex = this.indeterminateRowKeys.indexOf(currKey)
+          if (isAllIndeterminate) {
+            if (halfIndex === -1) {
+              this.indeterminateRowKeys.push(currKey)
+            }
+          } else {
+            if (halfIndex > -1) {
+              this.indeterminateRowKeys.splice(halfIndex, 1)
+            }
+          }
+        }, { children: childrenField })
+      }
+    },
+    updateCheckStatus () {
+      const { keyField } = this
+      this.isAllCheckboxChecked = this.treeData.every(item => this.selectCheckboxRowKeys.includes(item[keyField]))
+      this.isAllCheckboxIndeterminate = !this.isAllCheckboxChecked && this.treeData.some(item => this.selectCheckboxRowKeys.includes(item[keyField]))
+    },
+    setCheckboxRow (key, checked) {
+      let keys = key
+      if (!XEUtils.isArray(key)) {
+        keys = [key]
+      }
+      if (checked) {
+        keys.forEach(nodeKey => {
+          if (!this.selectCheckboxRowKeys.includes(nodeKey)) {
+            this.selectCheckboxRowKeys.push(nodeKey)
+          }
+        })
+      } else {
+        keys.forEach(nodeKey => {
+          const nodeIndex = this.selectCheckboxRowKeys.indexOf(nodeKey)
+          if (nodeIndex > -1) {
+            this.selectCheckboxRowKeys.splice(nodeIndex, 1)
+          }
+        })
+      }
+      this.updateCheckStatus()
+    },
+    toggleAllCheckboxEvent () {
+      this.toggleAllCheckboxRow()
+      this.isCheckboxModelUpdate = true
+      this.$emit('checkbox-all', { checkedKeys: this.selectCheckboxRowKeys, checkedRows: [] })
+      this.$emit('update:checkRowKeys', [...this.selectCheckboxRowKeys])
+    },
+    toggleAllCheckboxRow () {
+      const { keyField, childrenField } = this
+      const rowKeys = []
+      if (this.isAllCheckboxChecked) {
+        XEUtils.eachTree(this.treeData, (item) => {
+          rowKeys.push(item[keyField])
+        }, { children: childrenField })
+      }
+      this.selectCheckboxRowKeys = rowKeys
+      this.updateCheckStatus()
+    },
+    setAllTreeExpand (expanded) {
+      const { keyField, childrenField } = this
+      const rowKeys = []
+      if (expanded) {
+        XEUtils.eachTree(this.treeData, (item) => {
+          if (item[childrenField] && item[childrenField].length > 0) {
+            rowKeys.push(item[keyField])
+          }
+        }, { children: childrenField })
+      }
+      this.expandRowKeys = rowKeys
+    }
   }
 }
 </script>
 
 <style lang="scss">
+.ml-tree {
+  padding-left: 16rpx;
+  overflow: auto;
+  .ml-tree-checkbox-btns {
+    position: sticky;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 80rpx;
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
+  }
+  .ml-tree-checkbox-btns-left {
+    flex-grow: 1;
+  }
+  .ml-tree-checkbox-btns-right {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+  }
+}
 </style>

package/lib/components/ml-tree-node/ml-tree-node.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="ml-tree-node" :class="[className || '']">
+    <view class="ml-tree-node-warpper">
+      <view v-if="showCheckbox" class="ml-tree-node-checkbox" :class="{'is-checked': checkCheckbox, 'is-indeterminate': indeterminate}">
+        <view class="ml-tree-node-checkbox-icon" @click="changeCheckboxEvent">
+          <ml-icon :name="checkCheckbox ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
+        </view>
+      </view>
+      <view class="ml-tree-node-expand" :class="{'is-expand': hasExpand}">
+        <view v-if="hasChild" class="ml-tree-node-expand-icon" @click="expandEvent">
+          <ml-icon name="arrow-right-filling"></ml-icon>
+        </view>
+      </view>
+      <view class="ml-tree-node-name">{{ nodeContent }}</view>
+    </view>
+    <view v-if="hasChild && hasExpand" class="ml-tree-node-childs">
+      <ml-tree-node v-for="(item, index) in nodeChilds" :key="index" :node-data="item"></ml-tree-node>
+    </view>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+export default {
+  props: {
+    nodeData: Object,
+    nodeProps: Object
+  },
+  inject: {
+    tree: {
+      from: 'mlTree',
+      default: null
+    }
+  },
+  data () {
+    return {
+      treeData: []
+    }
+  },
+  computed: {
+    nodeKey () {
+      return this.nodeData ? this.nodeData[this.keyField] : null
+    },
+    nodeContent () {
+      return this.nodeData ? XEUtils.toValueString(this.nodeData[this.titleField]) : ''
+    },
+    nodeChilds () {
+      return this.nodeData ? (this.nodeData[this.childrenField] || []) : []
+    },
+    titleField () {
+      return this.tree ? this.tree.titleField : 'name'
+    },
+    keyField () {
+      return this.tree ? this.tree.keyField : 'key'
+    },
+    childrenField () {
+      return this.tree ? this.tree.childrenField : 'children'
+    },
+    indeterminateRowKeys () {
+      return this.tree ? (this.tree.indeterminateRowKeys || []) : []
+    },
+    selectCheckboxRowKeys () {
+      return this.tree ? (this.tree.selectCheckboxRowKeys || []) : []
+    },
+    expandRowKeys () {
+      return this.tree ? (this.tree.expandRowKeys || []) : []
+    },
+    showRadio () {
+      return this.tree ? this.tree.showRadio : false
+    },
+    showCheckbox () {
+      return this.tree ? this.tree.showCheckbox : false
+    },
+    hasChild () {
+      return this.nodeChilds.length > 0
+    },
+    hasExpand () {
+      return this.expandRowKeys.includes(this.nodeKey)
+    },
+    indeterminate () {
+      return this.showCheckbox ? this.indeterminateRowKeys.includes(this.nodeKey) : false
+    },
+    checkCheckbox () {
+      return this.showCheckbox ? this.selectCheckboxRowKeys.includes(this.nodeKey) : false
+    }
+  },
+  methods: {
+    changeCheckboxEvent () {
+      if (this.tree) {
+        this.tree.selectCheckboxNodeEvent({
+          nodeData: this.nodeData,
+          nodeKey: this.nodeKey
+        })
+      }
+    },
+    expandEvent () {
+      if (this.tree) {
+        this.tree.expandNodeEvent({
+          nodeData: this.nodeData,
+          nodeKey: this.nodeKey
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-tree-node {
+  .ml-tree-node-warpper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 80rpx;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .ml-tree-node-checkbox-icon,
+  .ml-tree-node-expand-icon {
+    font-size: 1.3em;
+  }
+  .ml-tree-node-checkbox {
+    width: 50rpx;
+    text-align: center;
+    &.is-checked,
+    &.is-indeterminate {
+      color: $uni-color-primary;
+    }
+  }
+  .ml-tree-node-expand {
+    width: 50rpx;
+    text-align: center;
+    &.is-expand {
+      .ml-tree-node-expand-icon {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  .ml-tree-node-expand-icon {
+    display: inline-block;
+    width: 40rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    transition: transform .1s ease-in-out;
+  }
+  .ml-tree-node-childs {
+    padding-left: 24rpx;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "码里云小程序组件库",
   "files": [
     "lib",