fix(cascader): 动态加载在value-type为full时支持回显 (#2225)

* feat(cascader): 动态加载在value-type为full时支持回显

* feat(cascader): 动态回显增加多选时的处理

* refactor: 删除多余代码

src/cascader/_example/load.vue

@@ -1,5 +1,16 @@
 <template>
-  <t-cascader v-model="value" :options="options" clearable :load="load" />
+  <t-space direction="vertical">
+    <t-cascader v-model="value" :options="options" clearable :load="load" @change="handleChange" />
+    <t-cascader
+      v-model="value1"
+      value-type="full"
+      clearable
+      :options="options"
+      :load="load"
+      :input-props="inputProps"
+      @change="handleChange1"
+    />
+  </t-space>
 </template>
 <script>
 export default {
@@ -18,6 +29,10 @@ export default {
         },
       ],
       value: '',
+      value1: ['1', '1-1.0', '1-1.0-1.1'],
+      inputProps: {
+        value: '选项1 / 选项1.1 / 选项1.1.1',
+      },
     };
   },
   methods: {
@@ -29,10 +44,12 @@ export default {
             nodes = [
               {
                 label: `${node.label}.1`,
+                value: `${node.value}-1.${node.level}`,
                 children: node.level < 1,
               },
               {
                 label: `${node.label}.2`,
+                value: `${node.value}-2.${node.level}`,
                 children: node.level < 1,
               },
             ];
@@ -41,6 +58,16 @@ export default {
         }, 1000);
       });
     },
+    handleChange(value) {
+      console.log('value', value);
+    },
+    handleChange1(value, context) {
+      const { node } = context;
+      const path = node.getPath();
+      const labelPath = path.map((item) => item.label).join(' / ');
+      this.inputProps.value = labelPath;
+      console.log('value1', value);
+    },
   },
 };
 </script>

src/cascader/components/Panel.tsx

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { defineComponent, computed } from '@vue/composition-api';
 import Item from './Item';
-import { TreeNode, CascaderContextType } from '../interface';
+import { TreeNode, CascaderContextType, CascaderValue } from '../interface';
 import CascaderProps from '../props';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { useTNodeDefault } from '../../hooks/tnode';
@@ -25,6 +25,10 @@ export default defineComponent({
     const renderTNodeJSXDefault = useTNodeDefault();
     const COMPONENT_NAME = usePrefixClass('cascader');
     const { global } = useConfig('cascader');
+    const {
+      valueType, cascaderValue, treeStore, multiple,
+    } = props.cascaderContext;
+    const { config } = treeStore;
 
     const panels = computed(() => getPanels(props.cascaderContext.treeNodes));
 
@@ -33,6 +37,13 @@ export default defineComponent({
       expendClickEffect(propsTrigger, trigger, node, cascaderContext);
     };
 
+    // 异步加载回显时默认触发第一个值
+    if (config.load && valueType === 'full' && (cascaderValue as Array<CascaderValue>).length > 0) {
+      const firstValue = multiple ? cascaderValue[0][0] : cascaderValue[0];
+      const firstExpandNode = treeStore.nodes.find((node: TreeNode) => node.value === firstValue);
+      handleExpand(firstExpandNode, 'click');
+    }
+
     return {
       global,
       panels,

src/cascader/hooks.ts

@@ -52,6 +52,7 @@ export const useContext = (
         showAllLevels,
         minCollapsedNum,
         valueType,
+        value,
       } = props;
       return {
         value: statusContext.scopeVal,
@@ -68,6 +69,7 @@ export const useContext = (
         minCollapsedNum,
         valueType,
         visible: innerPopupVisible.value,
+        cascaderValue: value,
         ...statusContext,
         setTreeNodes: (nodes: TreeNode[]) => {
           statusContext.treeNodes = nodes;
@@ -118,6 +120,34 @@ export const useCascaderContext = (props: TdCascaderProps) => {
     treeStore.replaceChecked(getTreeValue(value));
   };
 
+  // 根据已有的值异步加载子树
+  const loadChildrenByValue = () => {
+    const { value, multiple } = props;
+    const { treeStore } = statusContext;
+    // 异步加载时子级回显
+    if (value instanceof Array) {
+      // 单选
+      if (!multiple && value.length > treeStore.expandedMap.size) {
+        const expanded = value.slice(0, treeStore.expandedMap.size + 1);
+        treeStore.setExpanded(expanded);
+      }
+      // 多选, 展开选择了第一个数组的列
+      // todo 目前只是展开选择了第一个数组的列，其他选中的半选状态没有处理，且在取消时由于没有节点，数据会被误删除
+      if (multiple) {
+        if (value.length > 0) {
+          // 处理第一个数组的值
+          const firstValue = value[0] as Array<string | number>;
+          if (firstValue.length > treeStore.expandedMap.size) {
+            treeStore.setExpanded(firstValue.slice(0, treeStore.expandedMap.size + 1));
+          }
+        }
+        // 加载时给所有的选中列表重新设置value，以刷新已选择的值
+        const lastValues = value.map((item: Array<string | number>) => item[item.length - 1]);
+        treeStore.setChecked(lastValues);
+      }
+    }
+  };
+
   watch(
     () => props.options,
     () => {
@@ -145,6 +175,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
             nextTick(() => {
               store.refreshNodes();
               updatedTreeNodes();
+              loadChildrenByValue();
             });
           },
         });

src/cascader/interface.tsx

@@ -32,6 +32,7 @@ export interface CascaderContextType
   inputVal: TdSelectInputProps['inputValue'];
   setInputVal: (val: TdSelectInputProps['inputValue']) => void;
   setExpend: (val: TreeNodeValue[]) => void;
+  cascaderValue: CascaderValue;
 }
 
 export { TreeNode } from '../_common/js/tree/tree-node';