feat(tree-select): [tree-select] add data init and optimize demo docs

examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue

@@ -6,7 +6,7 @@
 import { ref } from 'vue'
 import { TinyTreeSelect } from '@opentiny/vue'
 
-const value = ref('')
+const value = ref(4)
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/basic-usage.vue

@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value: '',
+      value: 10,
       treeOp: {
         data: [
           {

examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue

@@ -17,7 +17,7 @@
 import { ref } from 'vue'
 import { TinyTreeSelect } from '@opentiny/vue'
 
-const value = ref([])
+const value = ref([9, 6])
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/collapse-tags.vue

@@ -22,7 +22,7 @@ export default {
   },
   data() {
     return {
-      value: [],
+      value: [9, 6],
       treeOp: {
         data: [
           {

examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue

@@ -6,7 +6,7 @@
 import { ref } from 'vue'
 import { TinyTreeSelect } from '@opentiny/vue'
 
-const value = ref([])
+const value = ref([9, 6])
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/multiple.vue

@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value: [],
+      value: [9, 6],
       treeOp: {
         data: [
           {

examples/sites/demos/pc/app/tree-select/size-composition-api.vue

@@ -2,10 +2,10 @@
   <div>
     <p>medium</p>
     <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
-    <p>small</p>
-    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
     <p>默认</p>
     <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
     <p>mini</p>
     <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
   </div>

examples/sites/demos/pc/app/tree-select/size.vue

@@ -2,10 +2,10 @@
   <div>
     <p>medium</p>
     <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
-    <p>small</p>
-    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
     <p>默认</p>
     <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
     <p>mini</p>
     <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
   </div>

packages/renderless/src/tree-select/index.ts

@@ -1,9 +1,17 @@
+import { find } from '../common/array'
+
+/**
+ * 树节点过滤事件
+ */
 export const filter =
   ({ vm }) =>
   (value) => {
     vm.$refs.treeRef.filter(value)
   }
 
+/**
+ * 单选，节点选择事件
+ */
 export const nodeClick =
   ({ props, vm, emit }) =>
   (data) => {
@@ -24,6 +32,9 @@ export const nodeClick =
     }
   }
 
+/**
+ * 多选，勾选事件
+ */
 export const check =
   ({ props, vm, emit }) =>
   (data, { checkedNodes }) => {
@@ -47,3 +58,115 @@ export const check =
       emit('update:modelValue', currentValue)
     }
   }
+
+/**
+ * 嵌套树结构转成扁平树结构
+ * @params data 嵌套树结构 示例：[{ children: [ { label: '二级 1-1', value: 4 }, ... ], label: '一级 1', value: 1 }, ...]
+ * @return 扁平树结构 示例：[{ label: '一级 1', value: 1, pId: null }, { label: '二级 1-1', value: 4, pId: 1 }, ...]
+ */
+export const getTreeData =
+  ({ props, state }) =>
+  (data) => {
+    const nodes = []
+    const getChild = (data, pId) => {
+      data.forEach((node) => {
+        node.pId = pId
+        nodes.push(node)
+
+        if (node[state.childrenName] && node[state.childrenName].length > 0) {
+          getChild(node[state.childrenName], node[props.valueField])
+        }
+      })
+    }
+
+    getChild(data, null)
+
+    return nodes
+  }
+
+/**
+ * 多选，获取匹配的树节点
+ * @params value 树节点 value
+ * @return 完整的树节点 示例：[{ label: "三级 1-1-2", value: 10, pId: 1, children: [...] }]
+ */
+export const getPluginOption =
+  ({ api, props, state }) =>
+  (value) => {
+    const isRemote =
+      (props.filterable || props.searchable) &&
+      props.remote &&
+      (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
+    const { textField, valueField } = props
+    const sourceData = isRemote ? state.remoteData : api.getTreeData(state.treeData)
+    const selNode = find(sourceData, (item) => item[valueField] === value)
+    const items = []
+
+    if (selNode) {
+      selNode.currentLabel = selNode[textField]
+      items.push(selNode)
+    }
+
+    return items
+  }
+
+/**
+ * 多选，获取选中的树节点 value 数组，用于初始化树节点的勾选状态
+ * @return 示例：[9, 6]
+ */
+export const getCheckedData =
+  ({ props, state }) =>
+  () => {
+    const checkedKey = []
+
+    if (!Array.isArray(state.selected)) {
+      return props.modelValue ? [props.modelValue] : [state.selected[props.valueField]]
+    } else {
+      state.selected.length > 0 &&
+        state.selected.forEach((item) => {
+          checkedKey.push(item[props.valueField])
+        })
+
+      return checkedKey
+    }
+  }
+
+export const mounted =
+  ({ api, state, props, vm }) =>
+  () => {
+    if (!state.value || state.value.length === 0) return
+
+    if (props.multiple) {
+      let initialNodes = []
+      if (Array.isArray(state.value)) {
+        state.value.forEach((value) => {
+          const option = api.getPluginOption(value)
+          initialNodes = initialNodes.concat(option)
+        })
+      }
+
+      vm.$refs.baseSelectRef.updateSelectedData(
+        initialNodes.map((node) => {
+          return {
+            ...node,
+            currentLabel: node[props.textField],
+            value: node[props.valueField],
+            isTree: true
+          }
+        })
+      )
+
+      state.defaultCheckedKeys = api.getCheckedData()[0]
+    } else {
+      const data = api.getPluginOption(state.value)[0]
+      vm.$refs.baseSelectRef.updateSelectedData({
+        ...data,
+        currentLabel: data[props.textField],
+        value: data[props.valueField],
+        state: {
+          currentLabel: data[props.textField]
+        }
+      })
+
+      state.currentKey = data[props.valueField]
+    }
+  }

packages/renderless/src/tree-select/vue.ts

@@ -1,20 +1,28 @@
-import { filter, nodeClick, check } from './index'
+import { check, filter, getCheckedData, getPluginOption, getTreeData, mounted, nodeClick } from './index'
 
-export const api = ['state', 'filter', 'nodeClick', 'check']
+export const api = ['state', 'check', 'filter', 'nodeClick']
 
-export const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {
+export const renderless = (props, { reactive, computed, watch, onMounted }, { vm, emit }) => {
   const api = {}
 
   const state = reactive({
-    value: computed(() => props.modelValue),
-    treeData: props.treeOp.data
+    childrenName: computed(() => (props.treeOp.props && props.treeOp.props.children) || 'children'),
+    currentKey: props.modelValue,
+    defaultCheckedKeys: [],
+    remoteData: [],
+    treeData: props.treeOp.data,
+    value: computed(() => props.modelValue)
   })
 
   Object.assign(api, {
     state,
+    check: check({ props, vm, emit }),
     filter: filter({ vm }),
-    nodeClick: nodeClick({ props, vm, emit }),
-    check: check({ props, vm, emit })
+    getCheckedData: getCheckedData({ props, state }),
+    getPluginOption: getPluginOption({ api, props, state }),
+    getTreeData: getTreeData({ props, state }),
+    mounted: mounted({ api, state, props, vm }),
+    nodeClick: nodeClick({ props, vm, emit })
   })
 
   watch(
@@ -23,5 +31,7 @@ export const renderless = (props, { reactive, computed, watch }, { vm, emit }) =
     { immediate: true, deep: true }
   )
 
+  onMounted(api.mounted)
+
   return api
 }

packages/vue/src/tree-select/src/pc.vue

@@ -3,24 +3,26 @@
     ref="baseSelectRef"
     class="tiny-tree-select"
     v-model="state.value"
-    :multiple="multiple"
-    :filterable="filterable"
     :clearable="clearable"
+    :filterable="filterable"
     :filter-method="filter"
+    :multiple="multiple"
   >
     <template #panel>
       <tiny-tree
         ref="treeRef"
+        :current-node-key="!multiple ? state.currentKey : ''"
         :data="state.treeData"
+        :default-checked-keys="multiple ? state.defaultCheckedKeys : treeOp.defaultCheckedKeys || []"
+        :default-expand-all="true"
         :expand-on-click-node="false"
+        :filter-node-method="filterMethod"
         :icon-trigger-click-node="false"
-        :default-expand-all="true"
-        :props="{ label: textField }"
         :node-key="valueField"
+        :props="{ label: textField }"
         :show-checkbox="multiple"
-        :filter-node-method="filterMethod"
-        @node-click="nodeClick"
         @check="check"
+        @node-click="nodeClick"
       ></tiny-tree>
     </template>
   </tiny-base-select>