Merge branch 'MultiplePopupChange-gaoang' into 'dev'

feat: 联想弹层，反显不经过接口及翻页显示修改

See merge request itc-framework/ma/2024/front!4

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;
             }

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: {

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 () => {
+                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?) => {

src/components/MultiplePopup/src/components/MultipleSelect.vue

@@ -1,94 +1,67 @@
 <template>
-  <a-modal
+  <a-modal centered :width="1250" :visible="props.multipleDialog" :title="title" :destroyOnClose="true"
-    :width="800"
+    @ok="submitDialog" @cancel="closeDialog" :okText="t('确认')" :cancelText="t('取消')" :bodyStyle="{ padding: '20px' }">
-    :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
+    <a-tabs v-model:activeKey="state.activeKey"
-      v-model:activeKey="state.activeKey"
+      v-if="popupType === 'multiple' || popupType === 'preload' || popupType === 'button'">
-      v-if="popupType === 'multiple' || popupType === 'preload' || popupType === 'button'"
-    >
       <a-tab-pane key="1" :tab="t('数据选择')" style="overflow-y: auto">
-        <a-table
+        <a-table :dataSource="state.dataSourceList" :columns="state.sourceColumns" :row-selection="{
-          :dataSource="state.dataSourceList"
-          :columns="state.sourceColumns"
-          :row-selection="{
     selectedRowKeys: state.selectedRowKeys,
     onChange: onSelectChange,
-          }"
+  }" :pagination="paginationProps" :scroll="{ y: '420px' }" />
-          :pagination="paginationProps"
-          :scroll="{ y: '200px' }"
-        />
       </a-tab-pane>
       <a-tab-pane key="2" :tab="t('已选记录')" force-render>
-        <a-table
+        <a-table :dataSource="selectedList" :columns="state.selectedColumns" :scroll="{ y: '400px' }">
-          :dataSource="selectedList"
-          :columns="state.selectedColumns"
-          :scroll="{ y: '200px' }"
-        >
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.key === 'delete'">
-              <Icon
+              <Icon icon="ant-design:delete-outlined" color="#f56c6c" @click="deleteSelected(record, index)"
-                icon="ant-design:delete-outlined"
+                style="cursor: pointer" />
-                color="#f56c6c"
-                @click="deleteSelected(record, index)"
-                style="cursor: pointer"
-              />
             </template>
           </template>
         </a-table>
       </a-tab-pane>
     </a-tabs>
-    <a-table
+    <a-table v-else-if="popupType === 'associate'" :dataSource="state.dataSourceList" :columns="state.sourceColumns"
-      v-else-if="popupType === 'associate'"
+      :pagination="paginationProps" :row-selection="{
-      :dataSource="state.dataSourceList"
-      :columns="state.sourceColumns"
-      :pagination="paginationProps"
-      :row-selection="{
     selectedRowKeys: state.selectedRowKeys,
     onChange: onSelectChange,
     type: 'radio',
-      }"
+  }" :scroll="{ y: '420px' }" />
-      :scroll="{ y: '200px' }"
-    />
   </a-modal>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
+import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
-  import { cloneDeep } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
-  import { Icon } from '/@/components/Icon';
+import { Icon } from '/@/components/Icon';
-  import { getDatasourceById } from '/@/api/system/datasource';
+import { getDatasourceById } from '/@/api/system/datasource';
-  import { getDicDetailPageList } from '/@/api/system/dic';
+import { getDicDetailPageList } from '/@/api/system/dic';
-  import { isFunction } from '/@/utils/is';
+import { isFunction } from '/@/utils/is';
-  import type { ColumnProps } from 'ant-design-vue/lib/table';
+import type { ColumnProps } from 'ant-design-vue/lib/table';
-  import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
+import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
-  import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
+const { t } = useI18n();
-  const props = defineProps({
+const props = defineProps({
   multipleDialog: { type: Boolean },
   popupType: { type: String },
   dataSourceOptions: { type: Array },
@@ -117,22 +90,23 @@
   },
   mainKey: String,
   subTableIndex: Number,
-  });
+  backPagination: { type: Boolean }
-  const emit = defineEmits([
+});
+const emit = defineEmits([
   'update:multipleDialog',
   'update:popupValue',
   'update:selectedDataSource',
   'getList',
   'submit',
-  ]);
+]);
 
-  onMounted(async () => {
+onMounted(async () => {
   if (props.isSubFormUse) {
     await getDatasourceList(1);
   }
-  });
+});
 
-  const state = reactive({
+const state = reactive({
   selectedRowKeys: [] as any[],
   activeKey: '1',
   searchText: '',
@@ -140,19 +114,19 @@
   selectedColumns: [] as ColumnProps[],
   dataSourceList: [] as any[],
   assoComponent: {},
-  });
+});
 
-  const selectedList = ref(props.selectedDataSource);
+const selectedList = ref(props.selectedDataSource);
 
-  const paginationProps = reactive({
+const paginationProps = reactive({
   current: 1,
   total: 0,
   pageSize: 10,
   onChange: (page) => getDatasourceList(page),
-  });
+});
-  const formModel = inject<any>('formModel', null);
+const formModel = inject<any>('formModel', null);
-  const isCamelCase = inject<boolean>('isCamelCase', false);
+const isCamelCase = inject<boolean>('isCamelCase', false);
-  const title = computed(() => {
+const title = computed(() => {
   switch (props.popupType) {
     case 'multiple':
       return t('多选弹层-选择记录');
@@ -164,9 +138,15 @@
     default:
       return '';
   }
-  });
+});
+watch(() => props.multipleDialog,
+  (val) => {
+    if (val) {
+      getDatasourceList()
+    }
+  })
 
-  watch(
+watch(
   () => props.datasourceType,
   (val) => {
     let options = [] as any[];
@@ -184,7 +164,7 @@
         state.sourceColumns.push({
           title: item.tableTitle,
           dataIndex: item.name,
-            align: 'center',
+          align: item.align | 'center',
           width: Number(item.width),
         });
       }
@@ -202,9 +182,9 @@
     deep: true,
     immediate: true,
   },
-  );
+);
 
-  watch(
+watch(
   () => [state.dataSourceList, props.selectedDataSource, props.value],
   () => {
     emit('getList', state.dataSourceList);
@@ -226,17 +206,17 @@
   {
     deep: true,
   },
-  );
+);
 
-  const resetSearch = () => {
+const resetSearch = () => {
   state.searchText = '';
   getDatasourceList(1);
-  };
+};
-  const closeDialog = () => {
+const closeDialog = () => {
   emit('update:multipleDialog', false);
-  };
+};
 
-  const submitDialog = () => {
+const submitDialog = () => {
   let saveValueArr: string[] = [];
   let showValueArr: string[] = [];
   let saveValue = '';
@@ -255,9 +235,9 @@
   emit('update:popupValue', showValue);
   emit('update:selectedDataSource', selectedList.value);
   emit('submit', props.isSubFormUse ? selectedList.value : saveValue);
-  };
+};
 
-  const setFormModel = (isNull?) => {
+const setFormModel = (isNull?) => {
   if (props.popupType === 'associate') {
     let assoConfig;
     switch (props.datasourceType) {
@@ -314,9 +294,9 @@
       if (formModel[table]) formModel[table].push(dataObj);
     });
   }
-  };
+};
 
-  const getDatasourceList = async (limit = 1) => {
+const getDatasourceList = async (limit = 1) => {
   paginationProps.current = limit;
   let api;
   if (props.datasourceType) {
@@ -347,6 +327,8 @@
           isCamelCase,
           formModel,
           props.subTableIndex,
+          paginationProps,
+          props.backPagination
         );
       } else {
         state.dataSourceList = await apiConfigFunc(
@@ -354,6 +336,8 @@
           isCamelCase,
           formModel,
           props.subTableIndex,
+          paginationProps,
+          props.backPagination
         );
       }
     }
@@ -381,20 +365,20 @@
   } catch (error) {
     console.warn(error);
   }
-  };
+};
 
-  const onSelectChange = (rowKeys, selectedRows) => {
+const onSelectChange = (rowKeys, selectedRows) => {
   state.selectedRowKeys = rowKeys;
   selectedList.value = selectedRows;
-  };
+};
 
-  const deleteSelected = (record, index) => {
+const deleteSelected = (record, index) => {
   selectedList.value.splice(index, 1);
   state.selectedRowKeys = state.selectedRowKeys.filter((item) => {
     return item !== record.key;
   });
-  };
+};
-  defineExpose({ getDatasourceList, setFormModel });
+defineExpose({ getDatasourceList, setFormModel });
 </script>
 
 <style scoped lang="less"></style>

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>

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;