mali-applet-ui 1.0.69 → 1.0.71

package/lib/components/ml-checkbox-button/ml-checkbox-button.vue

@@ -41,7 +41,7 @@ export default {
 
 <style lang="scss">
 .ml-checkbox-button {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
 }
 .ml-checkbox-button-item {
@@ -51,6 +51,9 @@ export default {
   line-height: 60rpx;
   border-radius: $ml-border-radius;
   margin: 10rpx 20rpx 10rpx 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   // #ifdef H5
   cursor: pointer;
   // #endif

package/lib/components/ml-radio-button/ml-radio-button.vue

@@ -45,7 +45,7 @@ export default {
 
 <style lang="scss">
 .ml-radio-button {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
 }
 .ml-radio-button-item {
@@ -55,6 +55,9 @@ export default {
   line-height: 60rpx;
   border-radius: $ml-border-radius;
   margin: 10rpx 20rpx 10rpx 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   // #ifdef H5
   cursor: pointer;
   // #endif

package/lib/components/ml-tree-box/index.js

@@ -0,0 +1,58 @@
+export const findTreeKey = (list, props = { key: 'key', children: 'children' }) => {
+  let keys = []
+  const { key = 'key', children = 'children' } = props
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    if (item[key]) {
+      keys.push(item[key])
+    }
+    if (item[children] && item[children].length) {
+      const findKeys = findTreeKey(item[children], props)
+      keys = [...keys, ...findKeys]
+    }
+  }
+  return keys
+}
+
+// 根据节点ID找到对应节点
+export const findTreeByKey = (node, key, parent, props = { key: 'key', children: 'children' }) => {
+  const propsKey = props.key || 'key'
+  const propsChildren = props.children || 'children'
+  for (let i = 0; i < node.length; i++) {
+    const item = node[i]
+    if (item[propsKey] === key) {
+      return {
+        node: item,
+        parent: parent
+      }
+    }
+    if (item[propsChildren] && item[propsChildren].length) {
+      const children = item[propsChildren]
+      const findTree = findTreeByKey(children, key, item, props)
+      if (findTree) {
+        return findTree
+      }
+    }
+  }
+}
+
+// 根据节点ID找到对应节点
+export const findNodesByKeys = (node, keys, props = { key: 'key', children: 'children' }) => {
+  const propsKey = props.key || 'key'
+  const propsChildren = props.children || 'children'
+  let list = []
+  for (let i = 0; i < node.length; i++) {
+    const item = node[i]
+    if (keys.indexOf(item[propsKey]) > -1) {
+      list.push(item)
+    }
+    if (item[propsChildren] && item[propsChildren].length) {
+      const children = item[propsChildren]
+      const findTree = findNodesByKeys(children, keys, props)
+      if (findTree && findTree.length) {
+        list = [...list, ...findTree]
+      }
+    }
+  }
+  return list
+}

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

@@ -0,0 +1,350 @@
+<template>
+  <view class="ml-tree-box">
+    <view class="ml-tree-tool">
+      <view class="ml-tree-breadcrumb" v-if="breadcrumb">
+        <view class="breadcrumb-item" @click="handleToBreadcrumb()">
+          全部
+          <ml-icon v-if="cache && cache.length" name="arrow-right"></ml-icon>
+        </view>
+        <view class="breadcrumb-item" v-for="(item, index) in cache" :key="index" @click="handleToBreadcrumb(index)">
+          {{ item[useProps.label] || '' }}
+          <ml-icon v-if="index !== (cache.length - 1)" name="arrow-right"></ml-icon>
+        </view>
+      </view>
+    </view>
+    <view class="ml-tree-content">
+      <view class="ml-tree-node" v-if="cache && cache.length" @click="handleBack">
+        <view class="ml-tree-node__title back">
+          <ml-icon name="direction-left"></ml-icon>
+          <text class="ml-tree-node__text">返回</text>
+        </view>
+      </view>
+      <view class="ml-tree-node" v-for="(item, index) in showTree" :key="index">
+        <view class="ml-tree-node__action" v-if="check">
+          <ml-checkbox
+            :value="checkKey.indexOf(item[useProps.key]) > -1"
+            :indeterminate="indeterminate.indexOf(item[useProps.key]) > -1"
+            v-if="multiple"
+            @change="handleChangeCheckbox(item)"></ml-checkbox>
+          <ml-radio :value="checkIndex" :label="item[useProps.key]" v-else @change="handleChangeRadio"></ml-radio>
+        </view>
+        <MlTreeIcon @click="e => $emit('click-icon', 'prefix', item)" :info="getPrefixIcon(item)" :key="index"></MlTreeIcon>
+        <view class="ml-tree-node__title" @click="handleIntoChildren(item)">
+          <view>{{ item[useProps.label] || '' }}</view>
+          <view class="ml-tree-node__explain" v-if="item[useProps.explain]">{{ item[useProps.explain] }}</view>
+        </view>
+        <view class="ml-tree-node__extra">
+          <MlTreeIcon @click="e => $emit('click-icon', 'suffix', item)" :info="getSuffixIcon(item)" :key="index"></MlTreeIcon>
+          <MlTreeIcon @click="handleIntoChildren(item)" v-if="item.children && item.children.length" :info="{ icon: 'arrow-right' }" :key="index"></MlTreeIcon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import MlTreeIcon from './ml-tree-icon'
+import { findNodesByKeys, findTreeByKey } from '@/components/ml-tree-box/index'
+
+export default {
+  name: 'ml-tree-box',
+  components: { MlTreeIcon },
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [Array, String, Number],
+    check: Boolean,
+    multiple: Boolean,
+    breadcrumb: Boolean,
+    strictly: Boolean,
+    arbitrary: Boolean,
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    tree: {
+      type: Array,
+      default: () => []
+    },
+    prefixIcon: [String, Object, Function],
+    suffixIcon: [String, Object, Function]
+  },
+  watch: {
+    value (val) {
+      const { multiple } = this
+      if (multiple) {
+        this.checkKey = val
+      } else {
+        this.checkIndex = val
+      }
+    }
+  },
+  data () {
+    return {
+      cache: [],
+      checkIndex: 0,
+      checkKey: [],
+      indeterminate: [],
+      defaultProps: {
+        key: 'key',
+        label: 'label',
+        children: 'children',
+        explain: 'explain',
+        user: 'user'
+      }
+    }
+  },
+  computed: {
+    showTree () {
+      const { current, tree } = this
+      if (current) {
+        return current.children
+      }
+      return tree
+    },
+    current () {
+      const { cache } = this
+      if (cache && cache.length) {
+        return cache[cache.length - 1]
+      }
+      return null
+    },
+    useProps () {
+      return { ...this.defaultProps, ...this.props }
+    }
+  },
+  methods: {
+    handleIntoChildren (item) {
+      if (item.children && item.children.length) {
+        this.cache.push(item)
+      }
+    },
+    handleBack () {
+      const { cache } = this
+      cache.splice(cache.length - 1, 1)
+    },
+    handleToBreadcrumb (index) {
+      const { cache } = this
+      if (index === (cache.length - 1)) return false
+      if (isNaN(+index)) {
+        this.cache = []
+      } else {
+        cache.splice(index + 1)
+      }
+    },
+    handleChangeRadio (e) {
+      this.checkIndex = e.value
+      this.handleEvent()
+    },
+    handleChangeCheckbox (row) {
+      const { checkKey, useProps } = this
+      const key = row[useProps.key]
+      if (key) {
+        const findIndex = checkKey.findIndex(item => item === key)
+        if (findIndex > -1) {
+          this.handleCheckOff(key)
+        } else {
+          this.handleCheckOn(key)
+        }
+      }
+      this.handleEvent()
+    },
+    handleCheckOn (key) {
+      const { tree, useProps, checkKey } = this
+      const find = findTreeByKey(tree, key, null, useProps)
+      if (find) {
+        const { node, parent } = find
+        this.checkKey.push(key)
+        const children = node.children
+        if (children && children.length) {
+          for (let i = 0; i < children.length; i++) {
+            const item = children[i]
+            const findKey = item[useProps.key]
+            const findIndex = checkKey.findIndex(fd => fd === findKey)
+            if (findIndex === -1) {
+              this.handleCheckOn(findKey)
+            }
+          }
+        }
+        if (parent) {
+          this.handleIndeterminateOn(parent)
+        }
+      }
+    },
+    handleCheckOff (key) {
+      const { tree, useProps, checkKey } = this
+      const find = findTreeByKey(tree, key, null, useProps)
+      const { node, parent } = find
+      if (find) {
+        const findIndex = checkKey.findIndex(item => item === key)
+        this.checkKey.splice(findIndex, 1)
+        const children = node.children
+        if (children && children.length) {
+          this.handleIndeterminateChildrenOff(node)
+          for (let i = 0; i < children.length; i++) {
+            const item = children[i]
+            const findKey = item[useProps.key]
+            this.handleCheckOff(findKey)
+          }
+        }
+      }
+      if (parent) {
+        this.handleIndeterminateParentOff(parent)
+      }
+    },
+    handleIndeterminateOn (node) {
+      const { indeterminate, useProps, checkKey } = this
+      const key = node[useProps.key]
+      const findIndex = indeterminate.findIndex(item => item === key)
+      if (findIndex === -1) {
+        indeterminate.push(key)
+      }
+      const children = node[useProps.children]
+      if (children && children.length && children.every(item => checkKey.indexOf(item[useProps.key]) > -1)) {
+        if (checkKey.findIndex(item => item === key) === -1) {
+          this.handleCheckOn(key)
+        }
+      }
+    },
+    handleIndeterminateChildrenOff (node) {
+      const { indeterminate, useProps } = this
+      const key = node[useProps.key]
+      const indeterminateIndex = indeterminate.findIndex(item => item === key)
+      if (indeterminateIndex > -1) {
+        indeterminate.splice(indeterminateIndex, 1)
+      }
+    },
+    handleIndeterminateParentOff (node) {
+      const { indeterminate, checkKey, useProps } = this
+      const key = node[useProps.key]
+      const children = node[useProps.children]
+      if (!(children.every(item => checkKey.indexOf(item[useProps.key]) > -1))) {
+        const findIndex = checkKey.findIndex(item => item === key)
+        if (findIndex > -1) {
+          checkKey.splice(findIndex, 1)
+        }
+      }
+      if (children.every(item => checkKey.indexOf(item[useProps.key]) === -1)) {
+        const findIndex = indeterminate.findIndex(item => item === key)
+        if (findIndex > -1) {
+          indeterminate.splice(findIndex, 1)
+        }
+      }
+    },
+    handleEvent () {
+      const { tree, multiple, checkKey, checkIndex, useProps } = this
+      if (multiple) {
+        const checkRows = findNodesByKeys(tree, checkKey, useProps)
+        this.$emit('input', checkKey)
+        this.$emit('change', checkKey, checkRows)
+      } else {
+        const { node } = findTreeByKey(tree, checkIndex, null, useProps)
+        this.$emit('input', checkIndex)
+        this.$emit('change', checkIndex, node)
+      }
+    },
+    // 自定义图标
+    getPrefixIcon (row) {
+      const { prefixIcon } = this
+      let icon = ''
+      if (typeof prefixIcon === 'function') {
+        icon = prefixIcon(row)
+      } else {
+        icon = prefixIcon
+      }
+      if (typeof icon === 'object') {
+        return icon
+      } else if (typeof icon === 'string') {
+        return {
+          icon,
+          color: ''
+        }
+      }
+      return false
+    },
+    // 自定义图标
+    getSuffixIcon (row) {
+      const { suffixIcon } = this
+      let icon = ''
+      if (typeof suffixIcon === 'function') {
+        icon = suffixIcon(row)
+      } else {
+        icon = suffixIcon
+      }
+      if (typeof icon === 'object') {
+        return icon
+      } else if (typeof icon === 'string') {
+        return {
+          icon,
+          color: ''
+        }
+      }
+      return false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-tree-box {
+  background-color: #ffffff;
+
+  .ml-tree-content {
+    padding: 0 30rpx;
+
+    .ml-tree-node {
+      font-size: 34rpx;
+      display: flex;
+      align-items: center;
+      height: 116rpx;
+      border-bottom: 1rpx solid #efefef;
+
+      .ml-tree-node__title {
+        flex: 1;
+
+        &.back {
+          color: #6e6e6e;
+          font-size: 26rpx;
+        }
+
+        .ml-tree-node__text {
+          margin: 0 10rpx;
+        }
+        .ml-tree-node__explain {
+          color: #989898;
+          font-size: 26rpx;
+        }
+      }
+
+      .ml-tree-node__extra {
+        padding: 0 20rpx;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .ml-tree-tool {
+    .ml-tree-breadcrumb {
+      display: flex;
+      background-color: #f3f3f3;
+      padding: 0 30rpx;
+
+      .breadcrumb-item {
+        position: relative;
+        height: 50rpx;
+        line-height: 50rpx;
+        color: #afafaf;
+        font-size: 26rpx;
+
+        &:last-child {
+          color: #6e6e6e;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <view class="ml-tree-node__icon" :style="useStyle" v-if="info && info.icon" @click="e => $emit('click', e)">
+    <ml-icon :name="info.icon"></ml-icon>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ml-tree-icon',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    info: Object
+  },
+  computed: {
+    useStyle () {
+      const { info } = this
+      return `color: ${info?.color}; font-size: ${Number(info?.fontSize)}rpx`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-tree-node__icon {
+  display: inline-flex;
+  margin-right: 10rpx;
+}
+</style>

package/package.json

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