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 () => {
+                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,79 +1,52 @@
 <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="{
+        <a-table :dataSource="state.dataSourceList" :columns="state.sourceColumns" :row-selection="{
    selectedRowKeys: state.selectedRowKeys,
    onChange: onSelectChange,
-          }"
-          :pagination="paginationProps"
-          :scroll="{ y: '200px' }"
-        />
+  }" :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="{
+    <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' }"
-    />
+  }" :scroll="{ y: '420px' }" />
  </a-modal>
 </template>

@ -117,6 +90,7 @@
  },
  mainKey: String,
  subTableIndex: Number,
+  backPagination: { type: Boolean }
 });
 const emit = defineEmits([
  'update:multipleDialog',
@ -165,6 +139,12 @@
      return '';
  }
 });
+watch(() => props.multipleDialog,
+  (val) => {
+    if (val) {
+      getDatasourceList()
+    }
+  })

 watch(
  () => props.datasourceType,
@ -184,7 +164,7 @@
        state.sourceColumns.push({
          title: item.tableTitle,
          dataIndex: item.name,
-            align: 'center',
+          align: item.align | 'center',
          width: Number(item.width),
        });
      }
@ -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
        );
      }
    }
--- 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;