feat(picker): update

jd-opensource · eiinu · Aug 17, 2023 · Jul 28, 2023 · Jul 28, 2023 · Aug 2, 2023
commit cf0a04a95755e484969eb71a7061d4b52d379a5b
diff --git a/src/packages/__VUE/picker/Column.vue b/src/packages/__VUE/picker/Column.vue
@@ -6,23 +6,23 @@
       :style="threeDimensional ? touchRollerStyle : touchTileStyle"
       @transitionend="stopMomentum"
     >
-      <template v-for="(item, index) in column" :key="item.value ? item.value : index">
+      <template v-for="(item, index) in column" :key="item[fieldNames.value] ?? index">
         <!-- 3D 效果 -->
         <view
           class="nut-picker-roller-item"
           :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
           :style="setRollerStyle(index + 1)"
-          v-if="item && item.text && threeDimensional"
+          v-if="item && item[fieldNames.text] && threeDimensional"
         >
-          {{ item.text }}
+          {{ item[fieldNames.text] }}
         </view>
         <!-- 平铺 -->
         <view
           class="nut-picker-roller-item-tile"
           :style="{ height: pxCheck(optionHeight), lineHeight: pxCheck(optionHeight) }"
-          v-if="item && item.text && !threeDimensional"
+          v-if="item && item[fieldNames.text] && !threeDimensional"
         >
-          {{ item.text }}
+          {{ item[fieldNames.text] }}
         </view>
       </template>
     </view>
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { reactive, ref, watch, computed, toRefs, onMounted, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { PickerOption, TouchParams } from './types';
+import { PickerOption, TouchParams, PickerFieldNames } from './types';
 import { preventDefault, clamp } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -63,6 +63,10 @@ export default create({
     optionHeight: {
       type: [Number, String],
       default: 36
+    },
+    fieldNames: {
+      type: Object as PropType<Required<PickerFieldNames>>,
+      default: () => ({})
     }
   },
 
@@ -255,7 +259,7 @@ export default create({
 
     const modifyStatus = (type: boolean) => {
       const { column } = props;
-      let index = column.findIndex((columnItem) => columnItem.value === props.value);
+      let index = column.findIndex((columnItem) => columnItem[props.fieldNames.value] === props.value);
 
       state.currIndex = index === -1 ? 1 : (index as number) + 1;
       let move = index === -1 ? 0 : (index as number) * +props.optionHeight;

diff --git a/src/packages/__VUE/picker/baseProps.ts b/src/packages/__VUE/picker/baseProps.ts
@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { PickerOption, FieldNames } from './types';
+import { PickerOption, PickerFieldNames } from './types';
 export default {
   modelValue: {
     type: Array as PropType<(string | number)[]>,
@@ -44,7 +44,7 @@ export default {
     default: 36
   },
   fieldNames: {
-    type: Object as PropType<FieldNames>,
+    type: Object as PropType<PickerFieldNames>,
     default: () => ({})
   }
 };
diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
@@ -26,7 +26,7 @@
         children: 'list'
       }"
       :title="translate('chooseCity')"
-      @confirm="confirm"
+      @confirm="customCloumnConfirm"
     >
     </nut-picker>
 
@@ -203,6 +203,10 @@ const confirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions
   showToast.text(selectedOptions.map((val: any) => val.text).join(','));
 };
 
+const customCloumnConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
+  showToast.text(selectedOptions.map((val: any) => val.name).join(','));
+};
+
 const popupConfirm = ({ selectedOptions }: { selectedValue: string[]; selectedOptions: any }) => {
   popupDesc.value = selectedOptions.map((val: any) => val.text).join(',');
   show.value = false;

diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
@@ -30,9 +30,9 @@
             lineHeight: pxCheck(optionHeight)
           }"
           v-for="(item, index) in column"
-          :key="item.value ? item.value : index"
+          :key="item[columnFieldNames.value] ?? index"
         >
-          {{ item.text }}
+          {{ item[columnFieldNames.text] }}
         </view>
       </picker-view-column>
     </picker-view>
@@ -49,6 +49,7 @@
           :swipeDuration="swipeDuration"
           :visibleOptionNum="visibleOptionNum"
           :optionHeight="optionHeight"
+          :filedNames="columnFieldNames"
           @change="
             (option: any) => {
               changeHandler(columnIndex, option);

diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
@@ -14,6 +14,7 @@
           :ref="swipeRef"
           :column="column"
           :columnsType="columnsType"
+          :fieldNames="columnFieldNames"
           :value="defaultValues && defaultValues[columnIndex]"
           :threeDimensional="threeDimensional"
           :swipeDuration="swipeDuration"
@@ -46,7 +47,8 @@ export default create({
   props: baseProps,
   emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
   setup(props, { emit }) {
-    const { changeHandler, confirm, defaultValues, columnsList, columnsType, classes, cancel } = usePicker(props, emit);
+    const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, classes, cancel } =
+      usePicker(props, emit);
 
     const pickerColumn = ref<any[]>([]);
 
@@ -76,6 +78,7 @@ export default create({
       column,
       columnsType,
       columnsList,
+      columnFieldNames,
       cancel,
       changeHandler,
       confirmHandler,

diff --git a/src/packages/__VUE/picker/types.ts b/src/packages/__VUE/picker/types.ts
@@ -1,5 +1,5 @@
 export interface PickerOption {
-  [key: string]: any;
+  [key: PropertyKey]: any;
   text: string | number;
   value: string | number;
   disabled?: string;
@@ -24,7 +24,7 @@ export type TouchParams = {
   lastTime: number;
 };
 
-export interface FieldNames {
+export interface PickerFieldNames {
   text?: string;
   value?: string;
   children?: string;

diff --git a/src/packages/__VUE/picker/usePicker.ts b/src/packages/__VUE/picker/usePicker.ts
@@ -1,7 +1,7 @@
 import { ref, reactive, watch, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName } = createComponent('picker');
-import { PickerOption, FieldNames } from './types';
+import { PickerOption, PickerFieldNames } from './types';
 
 const DEFAULT_FILED_NAMES = {
   text: 'text',
@@ -17,7 +17,7 @@ export const usePicker = (props: any, emit: any) => {
   const columnFieldNames = computed(() => {
     return {
       ...DEFAULT_FILED_NAMES,
-      ...(props.fieldNames as FieldNames)
+      ...(props.fieldNames as PickerFieldNames)
     };
   });
 
@@ -41,7 +41,7 @@ export const usePicker = (props: any, emit: any) => {
 
   const selectedOptions = computed(() => {
     return (columnsList.value as PickerOption[][]).map((column: PickerOption[], index: number) => {
-      return column.find((item) => item.value === defaultValues.value[index]);
+      return column.find((item) => item[columnFieldNames.value.value] === defaultValues.value[index]);
     });
   });
 
@@ -78,7 +78,7 @@ export const usePicker = (props: any, emit: any) => {
         result = [state.formattedColumns] as PickerOption[][];
         break;
     }
-    return transformColumns(result, columnFieldNames.value);
+    return result;
   });
 
   // 级联数据格式化
@@ -105,22 +105,6 @@ export const usePicker = (props: any, emit: any) => {
     return formatted;
   };
 
-  const transformColumns = <T extends PickerOption[] | PickerOption[][]>(
-    column: T,
-    fieldNames: Required<FieldNames>
-  ): T => {
-    return column.map((item) => {
-      if (Array.isArray(item)) {
-        return transformColumns(item, fieldNames) as PickerOption[];
-      }
-      return {
-        ...item,
-        text: item[fieldNames.text],
-        value: item[fieldNames.value]
-      } as PickerOption;
-    }) as T;
-  };
-
   const cancel = () => {
     emit('cancel', {
       selectedValue: defaultValues.value,
@@ -133,7 +117,7 @@ export const usePicker = (props: any, emit: any) => {
       defaultValues.value = defaultValues.value ? defaultValues.value : [];
 
       if (columnsType.value === 'cascade') {
-        defaultValues.value[columnIndex] = option.value ? option.value : '';
+        defaultValues.value[columnIndex] = option[columnFieldNames.value.value] ?? '';
         let index = columnIndex;
         let cursor = option;
         while (cursor && cursor[childrenField.value] && cursor[childrenField.value][0]) {
@@ -147,7 +131,9 @@ export const usePicker = (props: any, emit: any) => {
           defaultValues.value = defaultValues.value.slice(0, index + 1);
         }
       } else {
-        defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, 'value') ? option.value : '';
+        defaultValues.value[columnIndex] = Object.prototype.hasOwnProperty.call(option, columnFieldNames.value.value)
+          ? option[columnFieldNames.value.value]
+          : '';
       }
 
       emit('change', {
@@ -161,7 +147,7 @@ export const usePicker = (props: any, emit: any) => {
   const confirm = () => {
     if (defaultValues.value && !defaultValues.value.length) {
       columnsList.value.forEach((columns) => {
-        defaultValues.value.push(columns[0].value);
+        defaultValues.value.push(columns[0][columnFieldNames.value.value]);
       });
     }
 
@@ -205,6 +191,7 @@ export const usePicker = (props: any, emit: any) => {
     ...toRefs(state),
     columnsType,
     columnsList,
+    columnFieldNames,
     cancel,
     changeHandler,
     confirm,