Merge branch 'MultiplePopupChange-gaoang' into 'dev'

feat: 联想弹层，反显不经过接口及翻页显示修改 See merge request itc-framework/ma/2024/front!4
2024-07-03 09:12:14 +00:00
parent 105c8cb768 d72eec1a1b
commit 770e14e724
6 changed files with 392 additions and 361 deletions
--- a/src/components/Designer/src/components/componentProperty/PropertyOption.vue
+++ b/src/components/Designer/src/components/componentProperty/PropertyOption.vue
@ -426,13 +426,18 @@
                    </template>
                </a-input>
            </a-form-item>
-            <template v-if="data.isSubFormChild">
+            <template v-if="data.isSubFormChild || data.type === 'associate-popup'">
                <a-form-item v-if="hasKey('sepTextField')" label="文本存储字段">
                    <a-select v-model:value="data.options.sepTextField" :allow-clear="true" :placeholder="t('请选择文本字段')" size="mini">
                        <a-select-option v-for="fItem in findTableFields(data)" :key="fItem.key" :value="fItem.bindField">{{ fItem.label }}</a-select-option>
                    </a-select>
                </a-form-item>
            </template>
+            <template v-if="data.type === 'associate-popup'">
+                <a-form-item v-if="hasKey('backPagination')" label="后端分页">
+                    <a-switch v-model:checked="data.options.backPagination" />
+                </a-form-item>
+            </template>
            <!-- 响应式布局只对主表字段生效 -->
            <template v-if="!data.isSubFormChild">
                <a-form-item v-if="hasKey('responsive')" label="响应式">
@ -1576,13 +1581,15 @@
            }

            function findTableFields(obj) {
+
                if (!props.widgetForm?.list) {
                    return [];
                }
                const bTable = obj.bindTable;
                const pTable = props.widgetForm.list.find((item) => item.type === 'form' && item.bindTable === bTable);
                if (!pTable) {
-                    return [];
+                    const tableFormList = props.widgetForm.list.filter(item => item.type !== 'form' && item.type !== 'associate-popup')
+                    return tableFormList;
                }
                return pTable.children;
            }
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@ -373,6 +373,8 @@ export const advanceComponents = [
            datasourceType: 'api',
            dataSource: undefined,
            dataSourceId: undefined,
+            sepTextField: '',
+            backPagination: false,
            labelField: 'label',
            valueField: 'value',
            apiConfig: {
--- a/src/components/MultiplePopup/src/MultiplePopup.vue
+++ b/src/components/MultiplePopup/src/MultiplePopup.vue
@ -37,6 +37,7 @@
                :popupType="popupType"
                :subTableIndex="index"
                :valueField="valueField"
+                :backPagination="backPagination"
                @submit="handleSubmit"
                @get-list="getList"
            />
@ -59,7 +60,7 @@
    }
 </style>
 <script lang="ts" setup>
-    import { ref, watch, nextTick, inject, onMounted } from 'vue';
+    import { ref, watch, nextTick, inject, onMounted, unref } from 'vue';
    import { Form } from 'ant-design-vue';
    import { Icon } from '/@/components/Icon';
    import MultipleSelect from './components/MultipleSelect.vue';
@ -88,7 +89,11 @@
        },
        mainKey: String,
        index: Number,
-        size: String
+        sepTextField: String, // 将文字描述存在独立字段，增加首次渲染速度
+        size: String,
+        row: Object,
+        formData: Object,
+        backPagination: { type: Boolean, default: false }
    });
    const FormItemRest = Form.ItemRest;
    const formModel = inject<any>('formModel', null);
@ -99,6 +104,7 @@
    const selectedDataSourceVal = ref<any[]>([]);
    const MultipleSelectRef = ref();
    const dataSourceList = ref<string[]>([]);
+    const valChanged = ref(false);

    const emit = defineEmits(['update:value', 'change']);

@ -106,16 +112,38 @@
        () => props.value,
        () => {
            popupValue.value = '';
+            if (!props.value) {
+                return
+            }
            nextTick(async () => {
-                await getSubDatasourceList();
-                setFormModel();
-                MultipleSelectRef.value.setFormModel(false);
+                if (props.sepTextField) {
+                    const formData = props.row ? props.row : props.formData
+                    defaultVal.value = props.value;
+                    popupValue.value = formData[camelCaseString(props.sepTextField)];
+                } else if (!props.sepTextField) {
+                    await getSubDatasourceList();
+                    setFormModel();
+                    MultipleSelectRef.value.setFormModel(false);
+                }
            });
        },
        {
            immediate: true
        }
    );
+    function updateSepTextField(arr) {
+        const formData = props.row ? props.row : props.formData
+        if (!props.sepTextField || !formData) {
+            return;
+        }
+        const options = unref(selectedDataSourceVal.value);
+        const txtArr = options
+            .filter((opt) => {
+                return arr.includes(opt.id);
+            })
+            .map((item) => item[props.labelField]);
+        formData[camelCaseString(props.sepTextField)] = txtArr.join(',');
+    }

    const getList = (list) => {
        dataSourceList.value = list;
@ -126,6 +154,8 @@
    };

    const handleSubmit = (saveValue) => {
+        valChanged.value = true;
+        updateSepTextField(saveValue)
        emit('update:value', saveValue);
        emit('change');
    };
@ -182,7 +212,7 @@
                    }
                });
            });
-            getSubDatasourceList();
+            // getSubDatasourceList();
        }
    });
    const setFormModel = (isNull?) => {
--- a/src/components/MultiplePopup/src/components/MultipleSelect.vue
+++ b/src/components/MultiplePopup/src/components/MultipleSelect.vue
@ -1,400 +1,384 @@
 <template>
-  <a-modal
-    :width="800"
-    :visible="props.multipleDialog"
-    :title="title"
-    :destroyOnClose="true"
-    @ok="submitDialog"
-    @cancel="closeDialog"
-    :okText="t('确认')"
-    :cancelText="t('取消')"
-    :bodyStyle="{ padding: '20px' }"
-  >
+  <a-modal centered :width="1250" :visible="props.multipleDialog" :title="title" :destroyOnClose="true"
+    @ok="submitDialog" @cancel="closeDialog" :okText="t('确认')" :cancelText="t('取消')" :bodyStyle="{ padding: '20px' }">
    <a-row :gutter="12" style="margin-bottom: 10px">
      <a-col :span="8">
        <a-input v-model:value="state.searchText" :placeholder="t('请输入要查询的关键字')" />
      </a-col>
      <a-col>
        <a-button type="primary" @click="getDatasourceList(1)">
-          <template #icon><Icon icon="ant-design:search-outlined" /></template>
+          <template #icon>
+            <Icon icon="ant-design:search-outlined" />
+          </template>
          {{ t('搜索') }}
        </a-button>
      </a-col>
      <a-col>
        <a-button @click="resetSearch">
-          <template #icon><Icon icon="ant-design:sync-outlined" /></template>
+          <template #icon>
+            <Icon icon="ant-design:sync-outlined" />
+          </template>
          {{ t('重置') }}
        </a-button>
      </a-col>
    </a-row>
-    <a-tabs
-      v-model:activeKey="state.activeKey"
-      v-if="popupType === 'multiple' || popupType === 'preload' || popupType === 'button'"
-    >
+    <a-tabs v-model:activeKey="state.activeKey"
+      v-if="popupType === 'multiple' || popupType === 'preload' || popupType === 'button'">
      <a-tab-pane key="1" :tab="t('数据选择')" style="overflow-y: auto">
-        <a-table
-          :dataSource="state.dataSourceList"
-          :columns="state.sourceColumns"
-          :row-selection="{
-            selectedRowKeys: state.selectedRowKeys,
-            onChange: onSelectChange,
-          }"
-          :pagination="paginationProps"
-          :scroll="{ y: '200px' }"
-        />
+        <a-table :dataSource="state.dataSourceList" :columns="state.sourceColumns" :row-selection="{
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+  }" :pagination="paginationProps" :scroll="{ y: '420px' }" />
      </a-tab-pane>
      <a-tab-pane key="2" :tab="t('已选记录')" force-render>
-        <a-table
-          :dataSource="selectedList"
-          :columns="state.selectedColumns"
-          :scroll="{ y: '200px' }"
-        >
+        <a-table :dataSource="selectedList" :columns="state.selectedColumns" :scroll="{ y: '400px' }">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'delete'">
-              <Icon
-                icon="ant-design:delete-outlined"
-                color="#f56c6c"
-                @click="deleteSelected(record, index)"
-                style="cursor: pointer"
-              />
+              <Icon icon="ant-design:delete-outlined" color="#f56c6c" @click="deleteSelected(record, index)"
+                style="cursor: pointer" />
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
-    <a-table
-      v-else-if="popupType === 'associate'"
-      :dataSource="state.dataSourceList"
-      :columns="state.sourceColumns"
-      :pagination="paginationProps"
-      :row-selection="{
-        selectedRowKeys: state.selectedRowKeys,
-        onChange: onSelectChange,
-        type: 'radio',
-      }"
-      :scroll="{ y: '200px' }"
-    />
+    <a-table v-else-if="popupType === 'associate'" :dataSource="state.dataSourceList" :columns="state.sourceColumns"
+      :pagination="paginationProps" :row-selection="{
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+    type: 'radio',
+  }" :scroll="{ y: '420px' }" />
  </a-modal>
 </template>

 <script lang="ts" setup>
-  import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
-  import { cloneDeep } from 'lodash-es';
-  import { Icon } from '/@/components/Icon';
-  import { getDatasourceById } from '/@/api/system/datasource';
-  import { getDicDetailPageList } from '/@/api/system/dic';
-  import { isFunction } from '/@/utils/is';
-  import type { ColumnProps } from 'ant-design-vue/lib/table';
-  import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
-  const props = defineProps({
-    multipleDialog: { type: Boolean },
-    popupType: { type: String },
-    dataSourceOptions: { type: Array },
-    params: {
-      type: [Array, Object, String, Number],
-    },
-    value: {
-      type: String,
-    },
-    popupValue: { type: String },
-    labelField: { type: String },
-    valueField: { type: String },
-    selectedDataSource: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    dicOptions: { type: Array as PropType<any[]> },
-    //数据来源 默认为空  如果不为空
-    datasourceType: String,
-    apiConfig: Object,
-    tableColumns: { type: Array },
-    //是否子表按钮选数据使用
-    isSubFormUse: {
-      type: Boolean,
-      default: false,
-    },
-    mainKey: String,
-    subTableIndex: Number,
-  });
-  const emit = defineEmits([
-    'update:multipleDialog',
-    'update:popupValue',
-    'update:selectedDataSource',
-    'getList',
-    'submit',
-  ]);
+import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { Icon } from '/@/components/Icon';
+import { getDatasourceById } from '/@/api/system/datasource';
+import { getDicDetailPageList } from '/@/api/system/dic';
+import { isFunction } from '/@/utils/is';
+import type { ColumnProps } from 'ant-design-vue/lib/table';
+import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+const props = defineProps({
+  multipleDialog: { type: Boolean },
+  popupType: { type: String },
+  dataSourceOptions: { type: Array },
+  params: {
+    type: [Array, Object, String, Number],
+  },
+  value: {
+    type: String,
+  },
+  popupValue: { type: String },
+  labelField: { type: String },
+  valueField: { type: String },
+  selectedDataSource: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  dicOptions: { type: Array as PropType<any[]> },
+  //数据来源 默认为空  如果不为空
+  datasourceType: String,
+  apiConfig: Object,
+  tableColumns: { type: Array },
+  //是否子表按钮选数据使用
+  isSubFormUse: {
+    type: Boolean,
+    default: false,
+  },
+  mainKey: String,
+  subTableIndex: Number,
+  backPagination: { type: Boolean }
+});
+const emit = defineEmits([
+  'update:multipleDialog',
+  'update:popupValue',
+  'update:selectedDataSource',
+  'getList',
+  'submit',
+]);

-  onMounted(async () => {
-    if (props.isSubFormUse) {
-      await getDatasourceList(1);
+onMounted(async () => {
+  if (props.isSubFormUse) {
+    await getDatasourceList(1);
+  }
+});
+
+const state = reactive({
+  selectedRowKeys: [] as any[],
+  activeKey: '1',
+  searchText: '',
+  sourceColumns: [] as ColumnProps[],
+  selectedColumns: [] as ColumnProps[],
+  dataSourceList: [] as any[],
+  assoComponent: {},
+});
+
+const selectedList = ref(props.selectedDataSource);
+
+const paginationProps = reactive({
+  current: 1,
+  total: 0,
+  pageSize: 10,
+  onChange: (page) => getDatasourceList(page),
+});
+const formModel = inject<any>('formModel', null);
+const isCamelCase = inject<boolean>('isCamelCase', false);
+const title = computed(() => {
+  switch (props.popupType) {
+    case 'multiple':
+      return t('多选弹层-选择记录');
+    case 'associate':
+      return t('联想弹层-联想数据配置');
+    case 'preload':
+    case 'button':
+      return t('选择数据');
+    default:
+      return '';
+  }
+});
+watch(() => props.multipleDialog,
+  (val) => {
+    if (val) {
+      getDatasourceList()
    }
-  });
+  })

-  const state = reactive({
-    selectedRowKeys: [] as any[],
-    activeKey: '1',
-    searchText: '',
-    sourceColumns: [] as ColumnProps[],
-    selectedColumns: [] as ColumnProps[],
-    dataSourceList: [] as any[],
-    assoComponent: {},
-  });
-
-  const selectedList = ref(props.selectedDataSource);
-
-  const paginationProps = reactive({
-    current: 1,
-    total: 0,
-    pageSize: 10,
-    onChange: (page) => getDatasourceList(page),
-  });
-  const formModel = inject<any>('formModel', null);
-  const isCamelCase = inject<boolean>('isCamelCase', false);
-  const title = computed(() => {
-    switch (props.popupType) {
-      case 'multiple':
-        return t('多选弹层-选择记录');
-      case 'associate':
-        return t('联想弹层-联想数据配置');
-      case 'preload':
-      case 'button':
-        return t('选择数据');
-      default:
-        return '';
+watch(
+  () => props.datasourceType,
+  (val) => {
+    let options = [] as any[];
+    if (val === 'datasource' && props.dataSourceOptions?.length) {
+      options = props.dataSourceOptions as any[];
    }
-  });
-
-  watch(
-    () => props.datasourceType,
-    (val) => {
-      let options = [] as any[];
-      if (val === 'datasource' && props.dataSourceOptions?.length) {
-        options = props.dataSourceOptions as any[];
-      }
-      if (val === 'dic' && props.dicOptions?.length) {
-        options = props.dicOptions as any[];
-      }
-      if (val === 'api') {
-        options = props.apiConfig?.outputParams as any[];
-      }
-      options?.map((item: any) => {
-        if (item.show || !Object.keys(item).includes('show')) {
-          state.sourceColumns.push({
-            title: item.tableTitle,
-            dataIndex: item.name,
-            align: 'center',
-            width: Number(item.width),
-          });
-        }
-      });
-      state.selectedColumns = cloneDeep(state.sourceColumns);
-      state.selectedColumns.unshift({
-        align: 'center',
-        title: '',
-        dataIndex: 'delete',
-        key: 'delete',
-        width: 50,
-      });
-    },
-    {
-      deep: true,
-      immediate: true,
-    },
-  );
-
-  watch(
-    () => [state.dataSourceList, props.selectedDataSource, props.value],
-    () => {
-      emit('getList', state.dataSourceList);
-      if (!state.dataSourceList.length) return;
-      selectedList.value = [];
-      state.selectedRowKeys = [];
-      state.dataSourceList.map((data: any, index: number) => {
-        data.key = index + 1;
-        if (props.value) {
-          props.selectedDataSource.map((select: any) => {
-            if (data.key === select.key) {
-              selectedList.value.push(data);
-              state.selectedRowKeys.push(data.key);
-            }
-          });
-        }
-      });
-    },
-    {
-      deep: true,
-    },
-  );
-
-  const resetSearch = () => {
-    state.searchText = '';
-    getDatasourceList(1);
-  };
-  const closeDialog = () => {
-    emit('update:multipleDialog', false);
-  };
-
-  const submitDialog = () => {
-    let saveValueArr: string[] = [];
-    let showValueArr: string[] = [];
-    let saveValue = '';
-    let showValue = '';
-    selectedList.value?.map((item: any) => {
-      saveValueArr.push(item[props.valueField!]);
-      showValueArr.push(item[props.labelField!]);
-    });
-    //value相同去重
-    saveValue = [...new Set(saveValueArr)].join(',');
-    showValue = showValueArr.join(',');
-
-    setFormModel();
-
-    emit('update:multipleDialog', false);
-    emit('update:popupValue', showValue);
-    emit('update:selectedDataSource', selectedList.value);
-    emit('submit', props.isSubFormUse ? selectedList.value : saveValue);
-  };
-
-  const setFormModel = (isNull?) => {
-    if (props.popupType === 'associate') {
-      let assoConfig;
-      switch (props.datasourceType) {
-        case 'datasource':
-          assoConfig = props.dataSourceOptions;
-          break;
-        case 'dic':
-          assoConfig = props.dicOptions;
-          break;
-        case 'api':
-          assoConfig = props.apiConfig?.outputParams;
-          break;
-      }
-      if (!formModel) return;
-      assoConfig?.map((item: any) => {
-        if (item.bindField) {
-          const value = selectedList.value.length ? selectedList.value![0][item.name] : '';
-          let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
-          let bindTable = '';
-          if (item.bindTable) {
-            bindTable = !isCamelCase
-              ? item.bindTable + 'List'!
-              : camelCaseString(item.bindTable + '_List')!;
-          }
-          let val = isNull ? '' : value;
-          if (props.mainKey) {
-            if (!item.bindTable) {
-              formModel[bindField!] = val;
-            } else {
-              formModel[props.mainKey][props.subTableIndex!][bindField!] = val;
-            }
-          } else {
-            if (item.bindTable) {
-              formModel[bindTable][0][bindField!] = val;
-            } else {
-              formModel[bindField!] = val;
-            }
-          }
-        }
-      });
-    } else if (props.popupType === 'button') {
-      let table = '';
-      selectedList.value?.forEach((x) => {
-        const dataObj = {};
-        props.tableColumns?.map((item: any) => {
-          if (!item?.bindField) return;
-          if (item.bindTable && !table)
-            table = !isCamelCase
-              ? item.bindTable + 'List'!
-              : camelCaseString(item.bindTable + '_List')!;
-          let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
-          dataObj[bindField as string] = item.prestrainField ? x[item.prestrainField] : null;
+    if (val === 'dic' && props.dicOptions?.length) {
+      options = props.dicOptions as any[];
+    }
+    if (val === 'api') {
+      options = props.apiConfig?.outputParams as any[];
+    }
+    options?.map((item: any) => {
+      if (item.show || !Object.keys(item).includes('show')) {
+        state.sourceColumns.push({
+          title: item.tableTitle,
+          dataIndex: item.name,
+          align: item.align | 'center',
+          width: Number(item.width),
        });
-        if (formModel[table]) formModel[table].push(dataObj);
-      });
-    }
-  };
+      }
+    });
+    state.selectedColumns = cloneDeep(state.sourceColumns);
+    state.selectedColumns.unshift({
+      align: 'center',
+      title: '',
+      dataIndex: 'delete',
+      key: 'delete',
+      width: 50,
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);

-  const getDatasourceList = async (limit = 1) => {
-    paginationProps.current = limit;
-    let api;
-    if (props.datasourceType) {
-      if (props.datasourceType === 'dic') {
-        api = getDicDetailPageList;
-      }
-      if (props.datasourceType === 'datasource') {
-        api = getDatasourceById;
-      }
-      if (props.datasourceType === 'api') {
-        const apiConfigParams = cloneDeep(props.apiConfig);
-        if (!!state.searchText) {
-          const keywordInfo = apiConfigParams!.apiParams[0].tableInfo?.find(
-            (item) => item.name === 'keyword',
-          );
-          if (keywordInfo) {
-            keywordInfo.value = state.searchText;
-            keywordInfo.bindType = 'value';
-          } else {
-            apiConfigParams!.apiParams[0].tableInfo.push({
-              name: 'keyword',
-              value: state.searchText,
-              bindType: 'value',
-            });
+watch(
+  () => [state.dataSourceList, props.selectedDataSource, props.value],
+  () => {
+    emit('getList', state.dataSourceList);
+    if (!state.dataSourceList.length) return;
+    selectedList.value = [];
+    state.selectedRowKeys = [];
+    state.dataSourceList.map((data: any, index: number) => {
+      data.key = index + 1;
+      if (props.value) {
+        props.selectedDataSource.map((select: any) => {
+          if (data.key === select.key) {
+            selectedList.value.push(data);
+            state.selectedRowKeys.push(data.key);
+          }
+        });
+      }
+    });
+  },
+  {
+    deep: true,
+  },
+);
+
+const resetSearch = () => {
+  state.searchText = '';
+  getDatasourceList(1);
+};
+const closeDialog = () => {
+  emit('update:multipleDialog', false);
+};
+
+const submitDialog = () => {
+  let saveValueArr: string[] = [];
+  let showValueArr: string[] = [];
+  let saveValue = '';
+  let showValue = '';
+  selectedList.value?.map((item: any) => {
+    saveValueArr.push(item[props.valueField!]);
+    showValueArr.push(item[props.labelField!]);
+  });
+  //value相同去重
+  saveValue = [...new Set(saveValueArr)].join(',');
+  showValue = showValueArr.join(',');
+
+  setFormModel();
+
+  emit('update:multipleDialog', false);
+  emit('update:popupValue', showValue);
+  emit('update:selectedDataSource', selectedList.value);
+  emit('submit', props.isSubFormUse ? selectedList.value : saveValue);
+};
+
+const setFormModel = (isNull?) => {
+  if (props.popupType === 'associate') {
+    let assoConfig;
+    switch (props.datasourceType) {
+      case 'datasource':
+        assoConfig = props.dataSourceOptions;
+        break;
+      case 'dic':
+        assoConfig = props.dicOptions;
+        break;
+      case 'api':
+        assoConfig = props.apiConfig?.outputParams;
+        break;
+    }
+    if (!formModel) return;
+    assoConfig?.map((item: any) => {
+      if (item.bindField) {
+        const value = selectedList.value.length ? selectedList.value![0][item.name] : '';
+        let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
+        let bindTable = '';
+        if (item.bindTable) {
+          bindTable = !isCamelCase
+            ? item.bindTable + 'List'!
+            : camelCaseString(item.bindTable + '_List')!;
+        }
+        let val = isNull ? '' : value;
+        if (props.mainKey) {
+          if (!item.bindTable) {
+            formModel[bindField!] = val;
+          } else {
+            formModel[props.mainKey][props.subTableIndex!][bindField!] = val;
          }
-          state.dataSourceList = await apiConfigFunc(
-            apiConfigParams,
-            isCamelCase,
-            formModel,
-            props.subTableIndex,
-          );
        } else {
-          state.dataSourceList = await apiConfigFunc(
-            props.apiConfig,
-            isCamelCase,
-            formModel,
-            props.subTableIndex,
-          );
+          if (item.bindTable) {
+            formModel[bindTable][0][bindField!] = val;
+          } else {
+            formModel[bindField!] = val;
+          }
        }
      }
+    });
+  } else if (props.popupType === 'button') {
+    let table = '';
+    selectedList.value?.forEach((x) => {
+      const dataObj = {};
+      props.tableColumns?.map((item: any) => {
+        if (!item?.bindField) return;
+        if (item.bindTable && !table)
+          table = !isCamelCase
+            ? item.bindTable + 'List'!
+            : camelCaseString(item.bindTable + '_List')!;
+        let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
+        dataObj[bindField as string] = item.prestrainField ? x[item.prestrainField] : null;
+      });
+      if (formModel[table]) formModel[table].push(dataObj);
+    });
+  }
+};
+
+const getDatasourceList = async (limit = 1) => {
+  paginationProps.current = limit;
+  let api;
+  if (props.datasourceType) {
+    if (props.datasourceType === 'dic') {
+      api = getDicDetailPageList;
    }
-    if (!api || !isFunction(api)) return;
-    state.dataSourceList = [];
-    try {
-      let dataParams = {};
-      const pageParams = { order: 'desc', size: 10, limit, keyword: state.searchText };
-      if (props.datasourceType === 'dic') {
-        Object.assign(dataParams, props.params, pageParams);
-      }
-      if (props.datasourceType === 'datasource') {
-        Object.assign(
-          dataParams,
-          {
-            id: props.params as string,
-          },
-          pageParams,
+    if (props.datasourceType === 'datasource') {
+      api = getDatasourceById;
+    }
+    if (props.datasourceType === 'api') {
+      const apiConfigParams = cloneDeep(props.apiConfig);
+      if (!!state.searchText) {
+        const keywordInfo = apiConfigParams!.apiParams[0].tableInfo?.find(
+          (item) => item.name === 'keyword',
+        );
+        if (keywordInfo) {
+          keywordInfo.value = state.searchText;
+          keywordInfo.bindType = 'value';
+        } else {
+          apiConfigParams!.apiParams[0].tableInfo.push({
+            name: 'keyword',
+            value: state.searchText,
+            bindType: 'value',
+          });
+        }
+        state.dataSourceList = await apiConfigFunc(
+          apiConfigParams,
+          isCamelCase,
+          formModel,
+          props.subTableIndex,
+          paginationProps,
+          props.backPagination
+        );
+      } else {
+        state.dataSourceList = await apiConfigFunc(
+          props.apiConfig,
+          isCamelCase,
+          formModel,
+          props.subTableIndex,
+          paginationProps,
+          props.backPagination
        );
      }
-      const res = await api(dataParams);
-      state.dataSourceList = res.list;
-      paginationProps.total = Number(res.total);
-    } catch (error) {
-      console.warn(error);
    }
-  };
+  }
+  if (!api || !isFunction(api)) return;
+  state.dataSourceList = [];
+  try {
+    let dataParams = {};
+    const pageParams = { order: 'desc', size: 10, limit, keyword: state.searchText };
+    if (props.datasourceType === 'dic') {
+      Object.assign(dataParams, props.params, pageParams);
+    }
+    if (props.datasourceType === 'datasource') {
+      Object.assign(
+        dataParams,
+        {
+          id: props.params as string,
+        },
+        pageParams,
+      );
+    }
+    const res = await api(dataParams);
+    state.dataSourceList = res.list;
+    paginationProps.total = Number(res.total);
+  } catch (error) {
+    console.warn(error);
+  }
+};

-  const onSelectChange = (rowKeys, selectedRows) => {
-    state.selectedRowKeys = rowKeys;
-    selectedList.value = selectedRows;
-  };
+const onSelectChange = (rowKeys, selectedRows) => {
+  state.selectedRowKeys = rowKeys;
+  selectedList.value = selectedRows;
+};

-  const deleteSelected = (record, index) => {
-    selectedList.value.splice(index, 1);
-    state.selectedRowKeys = state.selectedRowKeys.filter((item) => {
-      return item !== record.key;
-    });
-  };
-  defineExpose({ getDatasourceList, setFormModel });
+const deleteSelected = (record, index) => {
+  selectedList.value.splice(index, 1);
+  state.selectedRowKeys = state.selectedRowKeys.filter((item) => {
+    return item !== record.key;
+  });
+};
+defineExpose({ getDatasourceList, setFormModel });
 </script>

 <style scoped lang="less"></style>
--- a/src/components/SimpleForm/src/components/SimpleFormItem.vue
+++ b/src/components/SimpleForm/src/components/SimpleFormItem.vue
@ -5,6 +5,7 @@
            <Row v-show="getIsShow(schema)" :align="(schema.componentProps as any).align" :gutter="(schema.componentProps as any).gutter ?? 0" :justify="(schema.componentProps as any).justify" type="flex">
                <Col v-for="(col, colIndex) in schema.children" :key="colIndex" :span="col.span">
                    <template v-for="childSchema in col.list" :key="childSchema.field">
+
                        <SimpleFormItem v-if="showComponent(childSchema)" v-model:value="formModel![childSchema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :label-col="labelCol" :refreshFieldObj="refreshFieldObj" :schema="childSchema" />
                    </template>
                </Col>
@ -168,7 +169,7 @@
                    <readonly :schema="schema" :value="formModel![schema.field]" />
                </template>
                <template v-else>
-                    <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" />
+                    <component :is="defaultComponent(schema)" :key="refreshFieldObj[schema.field]" v-model:value="formModel![schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="getComponentsProps" :formData="formModel"/>
                </template>
            </FormItem>
        </template>
--- a/src/utils/event/design.ts
+++ b/src/utils/event/design.ts
@ -45,7 +45,7 @@ export function camelCaseString(string: string) {
  return str;
 }

-export async function apiConfigFunc(apiConfig, isCustomForm = false, formModel?, index?) {
+export async function apiConfigFunc(apiConfig, isCustomForm = false, formModel?, index?, paginationProps?, backPagination) {
  if (!apiConfig?.path) return [];
  const queryParam = {};
  const headerParam = {};
@ -57,6 +57,10 @@ export async function apiConfigFunc(apiConfig, isCustomForm = false, formModel?,
        for (const query of param.tableInfo) {
          queryParam[query.name] = apiConfig.input||getParamsValue(query, formModel, isCustomForm, index);
        }
+        if (backPagination) {
+          queryParam.limit = paginationProps.current
+          queryParam.size = paginationProps.pageSize
+        }
      }
      //header
      if (param.key === '2' && param.tableInfo && param.tableInfo.length) {
@ -79,6 +83,9 @@ export async function apiConfigFunc(apiConfig, isCustomForm = false, formModel?,
    body: bodyParam,
    query: queryParam,
  });
+  if(paginationProps) {
+    paginationProps.total = res?.total || res?.length || 0
+  }
  if (res && Array.isArray(res)) return res; //不分页接口
  if (res && Array.isArray(res.list)) return res.list; //分页接口
  return res;