mali-applet-ui 1.0.64 → 1.0.65

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

@@ -2,14 +2,14 @@
   <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="toggleCheckboxRow()">全选</ml-checkbox>
+        <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 data" :key="index" :node-data="item"></ml-tree-node>
+    <ml-tree-node v-for="(item, index) in treeData" :key="index" :node-data="item"></ml-tree-node>
   </view>
 </template>
 
@@ -24,10 +24,7 @@ export default {
     checkStrictly: Boolean,
     showRadio: Boolean,
     showCheckbox: Boolean,
-    showAllCheckbox: {
-      type: Boolean,
-      default: true
-    },
+    showAllCheckbox: Boolean,
     indeterminateToChecked: Boolean,
     showCheckboxBtn: Boolean,
     checkRowKeys: Array,
@@ -40,6 +37,7 @@ export default {
   },
   data () {
     return {
+      treeData: [],
       isAllCheckboxChecked: false,
       isAllCheckboxIndeterminate: false,
       indeterminateRowKeys: [],
@@ -70,19 +68,72 @@ export default {
     }
   },
   watch: {
-    checkRowKeys () {
-
+    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 nodeIndex = this.selectCheckboxRowKeys.indexOf(nodeKey)
-      const checked = nodeIndex === -1
+      const { keyField, childrenField } = this
+      const checked = this.selectCheckboxRowKeys.indexOf(nodeKey) === -1
       if (checked) {
-        this.selectCheckboxRowKeys.push(nodeKey)
+        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 {
-        this.selectCheckboxRowKeys.splice(nodeIndex, 1)
+        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])
     },
@@ -96,27 +147,86 @@ export default {
       }
       this.$emit('expand-change', { row: nodeData, expanded, expandedKeys: this.expandRowKeys })
     },
-    setCheckboxRow (row) {
-      // let rows = row
-      // if (!XEUtils.isArray(row)) {
-      //   rows = [row]
-      // }
+    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])
     },
-    toggleCheckboxRow () {
+    toggleAllCheckboxRow () {
       const { keyField, childrenField } = this
       const rowKeys = []
       if (this.isAllCheckboxChecked) {
-        XEUtils.eachTree(this.data, (item) => {
+        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.data, (item) => {
+        XEUtils.eachTree(this.treeData, (item) => {
           if (item[childrenField] && item[childrenField].length > 0) {
             rowKeys.push(item[keyField])
           }

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

@@ -1,7 +1,7 @@
 <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}">
+      <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>
@@ -122,7 +122,8 @@ export default {
   .ml-tree-node-checkbox {
     width: 50rpx;
     text-align: center;
-    &.is-checked {
+    &.is-checked,
+    &.is-indeterminate {
       color: $uni-color-primary;
     }
   }

package/package.json

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