fix(tree-select): fix deleteTag not working

Author: kagol

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

@@ -319,7 +319,7 @@ export const setSelected =
           : 'halfselect'
         : 'check'
 
-      if (!state.selected?.[0]?.isTree && !state.selected?.[0]?.isGrid) {
+      if (state.selected.length !== 0 && !state.selected?.[0]?.isTree && !state.selected?.[0]?.isGrid) {
         state.selected = result
       }
       state.selected.length && (state.selectedLabel = '')

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

@@ -115,49 +115,73 @@ export const getPluginOption =
  */
 export const getCheckedData =
   ({ props, state }) =>
-  () => {
+  (selected) => {
     const checkedKey = []
 
-    if (!Array.isArray(state.selected)) {
-      return props.modelValue ? [props.modelValue] : [state.selected[props.valueField]]
+    if (!Array.isArray(selected)) {
+      return props.modelValue ? [props.modelValue] : [selected[props.valueField]]
     } else {
-      state.selected.length > 0 &&
-        state.selected.forEach((item) => {
+      selected.length > 0 &&
+        selected.forEach((item) => {
           checkedKey.push(item[props.valueField])
         })
 
       return checkedKey
     }
   }
 
+/**
+ * 递归获取树节点的所有子节点 id 数组
+ * @params childNodes 树节点的子节点
+ * @params key value 映射字段（valueField）
+ * @return 示例：[{ value: 4, children: [{ value: 6 }, { value: 9 }] }] => [4, 6, 9]（其中 childNodes 的结构做了简化处理）
+ */
+export const getChildValue = () => (childNodes, key) => {
+  const ids = []
+
+  const getChild = (nodes) => {
+    nodes.forEach((node) => {
+      ids.push(node.data[key])
+
+      if (node.childNodes.length > 0) {
+        getChild(node.childNodes)
+      }
+    })
+  }
+
+  getChild(childNodes)
+
+  return ids
+}
+
 export const mounted =
   ({ api, state, props, vm }) =>
   () => {
-    if (!state.value || state.value.length === 0) return
+    if (!state.modelValue || state.modelValue.length === 0) return
 
     if (props.multiple) {
       let initialNodes = []
-      if (Array.isArray(state.value)) {
-        state.value.forEach((value) => {
+      if (Array.isArray(state.modelValue)) {
+        state.modelValue.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
-          }
-        })
-      )
+      const selected = initialNodes.map((node) => {
+        return {
+          ...node,
+          currentLabel: node[props.textField],
+          value: node[props.valueField],
+          isTree: true
+        }
+      })
 
-      state.defaultCheckedKeys = api.getCheckedData()[0]
+      vm.$refs.baseSelectRef.updateSelectedData(selected)
+
+      state.defaultCheckedKeys = api.getCheckedData(selected)
     } else {
-      const data = api.getPluginOption(state.value)[0]
+      const data = api.getPluginOption(state.modelValue)[0]
       vm.$refs.baseSelectRef.updateSelectedData({
         ...data,
         currentLabel: data[props.textField],
@@ -170,3 +194,55 @@ export const mounted =
       state.currentKey = data[props.valueField]
     }
   }
+
+export const watchValue =
+  ({ api, props, vm, state }) =>
+  (newValue, oldValue) => {
+    if (props.multiple) {
+      // 取新旧值的差集，用来判断是否是删除标签的操作，如果差值只有一个值，说明是删除操作
+      // 如果是删除操作，且不是父子严格模式，则需要将父节点的值也删除（严格模式下父子节点勾选相互独立，不会相互影响）
+      const xorResult = oldValue.filter((item) => !newValue.includes(item))
+      const tagId = xorResult[0]
+      const treeIds = [tagId]
+      let checkedKeys = newValue
+
+      // 处理输入框中删除选中标签时，联动下拉面板的逻辑
+      if (xorResult.length === 1 && !props.treeOp.checkStrictly) {
+        let node = vm.$refs.treeRef.getNode(tagId)
+
+        if (!node.isLeaf) {
+          treeIds.push(...api.getChildValue(node.childNodes, props.valueField))
+        }
+
+        while (node.parent && !Array.isArray(node.parent.data)) {
+          node.parent.data && treeIds.push(node.parent.data[props.valueField])
+          node = node.parent
+        }
+
+        checkedKeys = newValue.filter((item) => !treeIds.includes(item))
+      }
+
+      let initialNodes = []
+      if (Array.isArray(checkedKeys)) {
+        checkedKeys.forEach((value) => {
+          const option = api.getPluginOption(value)
+          initialNodes = initialNodes.concat(option)
+        })
+      }
+
+      const selected = initialNodes.map((node) => {
+        return {
+          ...node,
+          currentLabel: node[props.textField],
+          value: node[props.valueField],
+          isTree: true
+        }
+      })
+
+      // 更新输入框中选中的标签
+      vm.$refs.baseSelectRef.updateSelectedData(selected)
+
+      // 更新下拉面板中选中的树节点
+      vm.$refs.treeRef.setCheckedKeys(checkedKeys)
+    }
+  }

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

@@ -1,4 +1,14 @@
-import { check, filter, getCheckedData, getPluginOption, getTreeData, mounted, nodeClick } from './index'
+import {
+  check,
+  filter,
+  getCheckedData,
+  getPluginOption,
+  getTreeData,
+  mounted,
+  nodeClick,
+  watchValue,
+  getChildValue
+} from './index'
 
 export const api = ['state', 'check', 'filter', 'nodeClick']
 
@@ -11,7 +21,7 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm
     defaultCheckedKeys: [],
     remoteData: [],
     treeData: props.treeOp.data,
-    value: computed(() => props.modelValue)
+    modelValue: []
   })
 
   Object.assign(api, {
@@ -22,7 +32,9 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm
     getPluginOption: getPluginOption({ api, props, state }),
     getTreeData: getTreeData({ props, state }),
     mounted: mounted({ api, state, props, vm }),
-    nodeClick: nodeClick({ props, vm, emit })
+    nodeClick: nodeClick({ props, vm, emit }),
+    watchValue: watchValue({ api, props, vm, state }),
+    getChildValue: getChildValue()
   })
 
   watch(
@@ -31,6 +43,20 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm
     { immediate: true, deep: true }
   )
 
+  watch(
+    () => props.modelValue,
+    () => {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        state.modelValue = [...props.modelValue]
+      } else {
+        state.modelValue = props.modelValue
+      }
+    },
+    { immediate: true, deep: true }
+  )
+
+  watch(() => state.modelValue, api.watchValue)
+
   onMounted(api.mounted)
 
   return api

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

@@ -2,7 +2,7 @@
   <tiny-base-select
     ref="baseSelectRef"
     class="tiny-tree-select"
-    v-model="state.value"
+    v-model="state.modelValue"
     :clearable="clearable"
     :filterable="filterable"
     :filter-method="filter"
@@ -11,6 +11,7 @@
     <template #panel>
       <tiny-tree
         ref="treeRef"
+        :check-strictly="treeOp.checkStrictly"
         :current-node-key="!multiple ? state.currentKey : ''"
         :data="state.treeData"
         :default-checked-keys="multiple ? state.defaultCheckedKeys : treeOp.defaultCheckedKeys || []"