Jelajahi Sumber

perf(table-select): 优化table-select组件单选模式下可能报错的问题

shizhongming 2 tahun lalu
induk
melakukan
5aa54528a3

+ 23 - 13
src/components/Form/src/smart-boot/components/base/SmartTableSelect.tsx

@@ -1,6 +1,6 @@
 import type { SmartTableProps } from '@/components/SmartTable';
 
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, toRefs, unref } from 'vue';
 import { Row, Col } from 'ant-design-vue';
 
 import { propTypes } from '@/utils/propTypes';
@@ -19,7 +19,7 @@ export default defineComponent({
   props: {
     // 是否支持多选
     multiple: propTypes.bool.def(true),
-    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    value: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.number]),
     // label字段
     labelField: propTypes.string.isRequired,
     // value字段
@@ -33,6 +33,7 @@ export default defineComponent({
   },
   emits: ['update:value', 'change'],
   setup(props, { emit }) {
+    const { value: valueRef, multiple: multipleRef } = toRefs(props);
     const [registerModal, { openModal }] = useModal();
     const optionsRef = ref<Array<any>>([]);
 
@@ -40,20 +41,27 @@ export default defineComponent({
       optionsRef.value = options;
     };
     const handleSelectData = (options: any[]) => {
-      emit(
-        'update:value',
-        options.map((item) => item.value),
-      );
-      emit(
-        'change',
-        options.map((item) => item.value),
-      );
+      handleEmit(options.map((item) => item.value));
     };
     const handleDeselect = (value) => {
       const data = (props.value as any[]).filter((item) => item !== value);
-      emit('update:value', data);
-      emit('change', data);
+      handleEmit(data);
     };
+    const handleEmit = (data: any[]) => {
+      let value: any | undefined = undefined;
+      if (data && data.length > 0) {
+        value = data;
+      }
+      if (value && !props.multiple) {
+        value = value[0];
+      }
+      emit('update:value', value);
+      emit('change', value);
+    };
+    const computedSelectValue = computed(() => {
+      const value = unref(valueRef);
+      return value ? (unref(multipleRef) ? value : [value]) : value;
+    });
     return {
       registerModal,
       openModal,
@@ -61,6 +69,7 @@ export default defineComponent({
       optionsRef,
       handleDeselect,
       handleOptionChange,
+      computedSelectValue,
     };
   },
   render() {
@@ -81,6 +90,7 @@ export default defineComponent({
       handleDeselect,
       handleOptionChange,
       size,
+      computedSelectValue,
     } = this;
     const modalSlots: any = {
       table: $slots.table,
@@ -120,7 +130,7 @@ export default defineComponent({
           onSelectData={handleSelectData}
           valueField={valueField}
           // @ts-ignore
-          selectValues={value}
+          selectValues={computedSelectValue}
           multiple={multiple}
           tableProps={tableProps}
         >

+ 0 - 1
src/components/Form/src/smart-boot/components/base/SmartTableSelectModal.tsx

@@ -187,7 +187,6 @@ const renderTable = (instance) => {
       <Col span={showSelect ? 12 : 24}>
         <SmartTable
           onRegister={registerTable}
-          checkboxConfig={getTableCheckboxConfig}
           onCheckboxChange={handleCheckboxChange}
           onCheckboxAll={handleCheckboxAll}
           {...tableAttrs}

+ 21 - 14
src/components/Form/src/smart-boot/components/user/SmartUserTableSelect.vue

@@ -12,6 +12,10 @@
   import { useI18n } from '@/hooks/web/useI18n';
   import { listUserApi } from '@/api/sys/SystemApi';
 
+  const props = defineProps({
+    parameterHandler: Function as PropType<(parameter?: Recordable) => Recordable>,
+  });
+
   const { t } = useI18n();
 
   const listUserById = (ids) => {
@@ -27,13 +31,19 @@
     useSearchForm: true,
     proxyConfig: {
       ajax: {
-        query: ({ ajaxParameter }) => listUserApi(ajaxParameter),
+        query: ({ ajaxParameter }) => {
+          let parameter = ajaxParameter;
+          if (props.parameterHandler) {
+            parameter = props.parameterHandler(ajaxParameter);
+          }
+          return listUserApi(parameter);
+        },
       },
     },
-    checkboxConfig: {
-      rowTrigger: 'multiple',
-      highlight: true,
-    },
+    // checkboxConfig: {
+    //   rowTrigger: 'multiple',
+    //   highlight: true,
+    // },
     rowConfig: {
       isHover: true,
     },
@@ -43,9 +53,6 @@
       layout: 'inline',
       searchWithSymbol: true,
       actionColOptions: { span: undefined },
-      baseColProps: {
-        span: 12,
-      },
       schemas: [
         {
           label: t('system.views.user.table.fullName'),
@@ -56,12 +63,12 @@
       ],
     },
     columns: [
-      {
-        type: 'checkbox',
-        width: 60,
-        align: 'center',
-        fixed: 'left',
-      },
+      // {
+      //   type: 'checkbox',
+      //   width: 60,
+      //   align: 'center',
+      //   fixed: 'left',
+      // },
       {
         title: '{system.views.user.table.username}',
         field: 'username',