--添加测试模块

src/components/MultiplePopup/src/MultiplePopup.vue

@@ -1,7 +1,11 @@
 <template>
     <div :class="{ disabled }" class="multiple-popup">
+        <div v-if="disabled && !disabledShowBorder" :class="wordWrap ? '' : 'field-readonly'" :title="popupValue">
+            {{popupValue}}
+        </div>
         <a-input
             v-model:value="popupValue"
+            v-if="disabledShowBorder || !disabled"
             :addonAfter="addonAfter"
             :addonBefore="addonBefore"
             :bordered="bordered"
@@ -35,6 +39,7 @@
                 :mainKey="mainKey"
                 :params="params"
                 :popupType="popupType"
+                :popupTitle="popupTitle"
                 :subTableIndex="index"
                 :valueField="valueField"
                 :backPagination="backPagination"
@@ -68,6 +73,7 @@
 
     const props = defineProps({
         popupType: { type: String },
+        popupTitle: { type: String },
         value: { type: String },
         labelField: { type: String, default: 'label' },
         valueField: { type: String, default: 'value' },
@@ -247,3 +253,11 @@
         }
     };
 </script>
+
+<style lang="less" scoped>
+.field-readonly {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <a-modal centered :width="1250" :visible="props.multipleDialog" :title="title" :destroyOnClose="true"
-    @ok="submitDialog" @cancel="closeDialog" :okText="t('确认')" :cancelText="t('取消')" :bodyStyle="{ padding: '20px' }">
+    @ok="submitDialog" @cancel="closeDialog" :okText="t('确认')" :cancelText="t('取消')" :bodyStyle="{ padding: '20px' }" v-loading="loading">
     <a-row :gutter="12" style="margin-bottom: 10px">
       <a-col :span="8">
         <a-input v-model:value="state.searchText" :placeholder="t('请输入要查询的关键字')" />
@@ -28,10 +28,10 @@
         <a-table :dataSource="state.dataSourceList" :columns="state.sourceColumns" :row-selection="{
     selectedRowKeys: state.selectedRowKeys,
     onChange: onSelectChange,
-  }" :pagination="paginationProps" :scroll="{ y: '420px' }" />
+  }" :pagination="paginationProps" :scroll="{ y: '420px' }"  :loading="loading"/>
       </a-tab-pane>
       <a-tab-pane key="2" :tab="t('已选记录')" force-render>
-        <a-table :dataSource="selectedList" :columns="state.selectedColumns" :scroll="{ y: '400px' }">
+        <a-table :dataSource="selectedList" :columns="state.selectedColumns" :scroll="{ y: '400px' }"  :loading="loading">
           <template #bodyCell="{ column, record, index }">
             <template v-if="column.key === 'delete'">
               <Icon icon="ant-design:delete-outlined" color="#f56c6c" @click="deleteSelected(record, index)"
@@ -41,7 +41,7 @@
         </a-table>
       </a-tab-pane>
     </a-tabs>
-    <a-table v-else-if="popupType === 'associate'" :dataSource="state.dataSourceList" :columns="state.sourceColumns"
+    <a-table v-else-if="popupType === 'associate'" :dataSource="state.dataSourceList" :columns="state.sourceColumns" :loading="loading"
       :pagination="paginationProps" :row-selection="{
     selectedRowKeys: state.selectedRowKeys,
     onChange: onSelectChange,
@@ -64,6 +64,7 @@ const { t } = useI18n();
 const props = defineProps({
   multipleDialog: { type: Boolean },
   popupType: { type: String },
+  popupTitle: { type: String },
   dataSourceOptions: { type: Array },
   params: {
     type: [Array, Object, String, Number],
@@ -105,6 +106,7 @@ onMounted(async () => {
     await getDatasourceList(1);
   }
 });
+const loading = ref(false)
 
 const state = reactive({
   selectedRowKeys: [] as any[],
@@ -127,6 +129,9 @@ const paginationProps = reactive({
 const formModel = inject<any>('formModel', null);
 const isCamelCase = inject<boolean>('isCamelCase', false);
 const title = computed(() => {
+  if(props.popupTitle){
+     return t(props.popupTitle);
+  };
   switch (props.popupType) {
     case 'multiple':
       return t('多选弹层-选择记录');
@@ -214,6 +219,9 @@ const resetSearch = () => {
 };
 const closeDialog = () => {
   emit('update:multipleDialog', false);
+  selectedList.value = [];
+  state.selectedRowKeys = [];
+  state.dataSourceList = [];
 };
 
 const submitDialog = () => {
@@ -291,12 +299,18 @@ const setFormModel = (isNull?) => {
         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);
+      if (formModel[table]) {
+        formModel[table].push(dataObj)
+      } else {
+        formModel[table] = []
+        formModel[table].push(dataObj)
+      };
     });
   }
 };
 
 const getDatasourceList = async (limit = 1) => {
+  loading.value = true;
   paginationProps.current = limit;
   let api;
   if (props.datasourceType) {
@@ -342,8 +356,8 @@ const getDatasourceList = async (limit = 1) => {
       }
     }
   }
+  loading.value = false;
   if (!api || !isFunction(api)) return;
-  state.dataSourceList = [];
   try {
     let dataParams = {};
     const pageParams = { order: 'desc', size: 10, limit, keyword: state.searchText };
@@ -359,9 +373,11 @@ const getDatasourceList = async (limit = 1) => {
         pageParams,
       );
     }
+    loading.value = true;
     const res = await api(dataParams);
     state.dataSourceList = res.list;
     paginationProps.total = Number(res.total);
+    loading.value = false;
   } catch (error) {
     console.warn(error);
   }