fix(picker): 修复 field-names 在级联模式下的问题

jdf2e · Aug 25, 2023 · 9e453c2 · 9e453c2
1 parent 15da1c2
commit 9e453c2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 55 deletions.
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, reactive, watch, computed, CSSProperties, toRefs } from 'vue';
+import { ref, reactive, computed, CSSProperties, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { translate } = createComponent('picker');
@@ -79,8 +79,8 @@ export const componentWeapp = {
       changeHandler,
       confirm,
       defaultValues,
+      defaultIndexes,
       columnsList,
-      isSameValue,
       columnsType,
       columnFieldNames,
       classes,
@@ -93,54 +93,27 @@ export const componentWeapp = {
       ENV_TYPE: Taro.ENV_TYPE
     });
 
-    // 选中项的位置  taro
-    const defaultIndexes = ref<number[]>([]);
-
     const pickerViewStyles = computed(() => {
       const styles: CSSProperties = {};
       styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
       styles['--lineHeight'] = `${+props.optionHeight}px`;
       return styles;
     });
 
-    const defaultValuesConvert = () => {
-      const defaultIndexs: number[] = [];
-      const fields = columnFieldNames.value;
-      if (defaultValues.value.length > 0) {
-        defaultValues.value.forEach((value, index) => {
-          for (let i = 0; i < columnsList.value[index].length; i++) {
-            if (columnsList.value[index][i][fields.value] === value) {
-              defaultIndexs.push(i);
-              break;
-            }
-          }
-        });
-      } else {
-        if (columnsList && columnsList.value.length > 0) {
-          columnsList.value.forEach((item) => {
-            defaultIndexs.push(0);
-            item.length > 0 && defaultValues.value.push(item[0][fields.value]);
-          });
-        }
-      }
-
-      return defaultIndexs;
-    };
-
     // 平铺展示时，滚动选择
     const tileChange = (data: any) => {
       const prevDefaultValue = defaultIndexes.value;
       let changeIndex = 0;
       // 判断变化的是第几个
-      data.detail.value.forEach((col: number, index: number) => {
-        if (prevDefaultValue[index] !== col) changeIndex = index;
-      });
+      for (let i = 0; i < data.detail.value?.length; i++) {
+        if (prevDefaultValue[i] !== data.detail.value?.[i]) {
+          changeIndex = i;
+          break;
+        }
+      }
 
       // 选择的是哪个 option
       changeHandler(changeIndex, columnsList.value[changeIndex][data.detail.value[changeIndex]]);
-      // console.log('设置默认值');
-
-      defaultIndexes.value = defaultValuesConvert();
     };
 
     // 确定
@@ -163,24 +136,6 @@ export const componentWeapp = {
       state.picking = false;
     };
 
-    onMounted(() => {
-      if (defaultValues.value.length > 0) {
-        defaultIndexes.value = defaultValuesConvert();
-      }
-    });
-
-    watch(
-      () => props.modelValue,
-      (newValues) => {
-        if (!isSameValue(newValues, defaultValues.value)) {
-          setTimeout(() => {
-            defaultIndexes.value = defaultValuesConvert();
-          }, 100);
-        }
-      },
-      { deep: true }
-    );
-
     return {
       classes,
       ...toRefs(state),

diff --git a/src/packages/__VUE/picker/usePicker.ts b/src/packages/__VUE/picker/usePicker.ts
@@ -23,6 +23,13 @@ export const usePicker = (props: any, emit: any) => {
 
   // 选中项
   const defaultValues = ref<(number | string)[]>([]);
+  const defaultIndexes = computed(() => {
+    const fields = columnFieldNames.value;
+    return (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
+      const targetIndex = column.findIndex((item) => item[fields.value] === defaultValues.value[index]);
+      return targetIndex === -1 ? 0 : targetIndex;
+    });
+  });
 
   const pickerColumn = ref<any[]>([]);
 
@@ -96,7 +103,7 @@ export const usePicker = (props: any, emit: any) => {
     while (cursor && cursor[fields.children]) {
       const options: PickerOption[] = cursor[fields.children];
       const value = defaultValues[columnIndex];
-      let index = options.findIndex((columnItem) => columnItem.value === value);
+      let index = options.findIndex((columnItem) => columnItem[fields.value] === value);
       if (index === -1) index = 0;
       cursor = cursor[fields.children][index];
 
@@ -123,7 +130,7 @@ export const usePicker = (props: any, emit: any) => {
         let index = columnIndex;
         let cursor = option;
         while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
-          defaultValues.value[index + 1] = cursor[fields.children][0].value;
+          defaultValues.value[index + 1] = cursor[fields.children][0][fields.value];
           index++;
           cursor = cursor[fields.children][0];
         }
@@ -199,6 +206,7 @@ export const usePicker = (props: any, emit: any) => {
     changeHandler,
     confirm,
     defaultValues,
+    defaultIndexes,
     pickerColumn,
     swipeRef,
     selectedOptions,