fix:修改多选弹层，修改单表组件

src/components/CreateCodeStep/src/ViewDesignStep.vue

@@ -1182,6 +1182,10 @@
       label: '创建时间',
       value: 'create_date',
     });
+    list.unshift({
+      label: t('主键ID'),
+      value: 'id',
+    });
     return list;
   });
 

src/components/Designer/src/components/componentProperty/PropertyOption.vue

@@ -336,6 +336,9 @@
           <a-select-option value="YYYY" />
         </a-select>
       </a-form-item>
+      <a-form-item :label="t('显示时间')" v-if="hasKey('showTime') && (data.type == 'date-range')">
+        <a-switch v-model:checked="data.options.showTime"></a-switch>
+      </a-form-item>
 
       <template v-if="data.type === 'time'">
         <a-form-item :label="t('默认值')">

src/components/Form/src/components/SubForm.vue

@@ -110,7 +110,11 @@
         :datasourceType="preloadType"
         :dicOptions="dicOptions"
         :apiConfig="apiConfig"
+        :labelField="labelField"
+        :valueField="valueField"
         :isSubFormUse="true"
+        :uniqueKey="uniqueKey"
+        v-model:selectedDataSource="selectedDataSourceVal"
         @submit="renderSubFormList"
         popupType="preload"
       />
@@ -141,6 +145,7 @@
   const MultipleSelectRef = ref();
   //const prereloadData = ref<Recordable[] | undefined>(undefined);
   const multipleDialog = ref<boolean>(false);
+  const selectedDataSourceVal = ref<any[]>([]);
   const emit = defineEmits(['change', 'update:value']);
 
   const props = defineProps({
@@ -179,6 +184,9 @@
       type: Boolean,
       default: false,
     },
+    // 格式化标题
+    labelField: { type: String, default: 'label' },
+    valueField: { type: String, default: 'value' },
     /**
      * 预加载数据为api时使用
      */
@@ -276,6 +284,7 @@
       //要保证在预加载之后在emit  不然预加载数据不会绑定到表单数据中
       emit('change', unref(data));
       emit('update:value', unref(data));
+      selectedDataSourceVal.value = data.value;
     },
     { deep: true },
   );
@@ -387,6 +396,7 @@
         data.value.push(dataObj);
       }
     });
+    console.log(data.value, 'valeu');
     emit('change', unref(data));
     emit('update:value', unref(data));
   };

src/components/MultiplePopup/src/MultiplePopup.vue

@@ -130,11 +130,9 @@
         }
       });
     });
-
     showValueArr = selectedDataSourceVal.value?.map((item: any) => {
       return item[props.labelField!];
     });
-
     popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
   };
 

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

@@ -79,15 +79,16 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
+  import { computed, inject, nextTick, onMounted, reactive, ref, watch } 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 { camelCaseString, apiConfigFunc } from '/@/utils/event/design';
+  import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
   import { useI18n } from '/@/hooks/web/useI18n';
+
   const { t } = useI18n();
   const props = defineProps({
     multipleDialog: { type: Boolean },
@@ -110,6 +111,7 @@
       type: Array as PropType<any[]>,
       default: () => [],
     },
+    uniqueKey: { type: String },
     dicOptions: { type: Array as PropType<any[]> },
     //数据来源 默认为空  如果不为空
     datasourceType: String,
@@ -135,6 +137,9 @@
     if (props.isSubFormUse) {
       await getDatasourceList(1);
     }
+    await nextTick(() => {
+      console.log(props.selectedDataSource);
+    });
   });
 
   const state = reactive({
@@ -208,14 +213,42 @@
       immediate: true,
     },
   );
-
+  watch(
+    () => props.multipleDialog,
+    () => {
+      if (props.multipleDialog) {
+        selectedList.value = [];
+        state.selectedRowKeys = [];
+        initData();
+      } else {
+        selectedList.value = [];
+        state.selectedRowKeys = [];
+      }
+    },
+  );
   watch(
     () => [state.dataSourceList, props.selectedDataSource, props.value],
     () => {
       emit('getList', state.dataSourceList);
       if (!state.dataSourceList.length) return;
-      selectedList.value = [];
-      state.selectedRowKeys = [];
+      initData();
+      const seenIds = new Map();
+      selectedList.value = selectedList.value.filter((item) => {
+        const id = item[props.valueField!] || item[props.uniqueKey!];
+        if (!seenIds.has(id)) {
+          seenIds.set(id, true);
+          return true;
+        }
+        return false;
+      });
+      state.selectedRowKeys = [...new Set(state.selectedRowKeys)];
+    },
+    {
+      deep: true,
+    },
+  );
+  const initData = () => {
+    if (!props.isSubFormUse) {
       state.dataSourceList.map((data: any, index: number) => {
         data.key = index + 1;
         if (props.value) {
@@ -227,12 +260,19 @@
           });
         }
       });
-    },
-    {
-      deep: true,
-    },
-  );
-
+    }
+    if (props.isSubFormUse) {
+      state.dataSourceList.map((data: any, index: number) => {
+        data.key = index + 1;
+        props.selectedDataSource.map((select: any) => {
+          if (select[props.uniqueKey!] === data[props.valueField!]) {
+            selectedList.value.push(data);
+            state.selectedRowKeys.push(data.key);
+          }
+        });
+      });
+    }
+  };
   const resetSearch = () => {
     state.searchText = '';
     getDatasourceList(1);
@@ -389,18 +429,15 @@
   };
 
   const onSelectChange = (rowKeys, selectedRows) => {
-    if (!props.multiple){
+    if (!props.multiple) {
       selectedRows = selectedRows.slice(selectedRows.length - 1);
       rowKeys = rowKeys.slice(rowKeys.length - 1);
       state.selectedRowKeys = rowKeys;
       selectedList.value = selectedRows;
-
-    }
-    else {
+    } else {
       state.selectedRowKeys = rowKeys;
       selectedList.value = selectedRows;
     }
-
   };
 
   const deleteSelected = (record, index) => {

src/utils/helper/exportHelper.ts

@@ -219,7 +219,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
       ? `{
       field: '${camelCaseString(item.fieldName)}',
       label: '${schema!.label}',
-      component: 'RangePicker',
+      component: 'DatePicker',
       componentProps:{
         format:'${option.format}',
         style: { width: '100%' },
@@ -231,7 +231,7 @@ export const handleSearchForm = (option, schema, item, isNeedTrans, convertCamel
       : {
           field: item.fieldName,
           label: schema!.label,
-          component: 'RangePicker',
+          component: 'DatePicker',
           componentProps: {
             format: option.format,
             style: { width: '100%' },

src/views/form/template/index.vue

@@ -323,80 +323,79 @@
   const [registerImportModal, { openModal: openImportModal }] = useModal();
   const [registerRuleUserModal, { openModal: openRuleUserModal }] = useModal();
 
-  const [
-    registerTable,
-    { reload, setProps, setSelectedRowKeys, getRawDataSource, setColumns },
-  ] = useTable({
-    title: '',
-    columns,
-    formConfig: {
-      rowProps: {
-        gutter: 16,
+  const [registerTable, { reload, setProps, setSelectedRowKeys, getRawDataSource, setColumns }] =
+    useTable({
+      title: '',
+      columns,
+      formConfig: {
+        rowProps: {
+          gutter: 16,
+        },
+        schemas: searchFormSchema,
       },
-      schemas: searchFormSchema,
-    },
-    beforeFetch: (pageParams) => {
-      //发送请求默认新增  左边树结构所选机构id
-      const newParams = {
-        releaseId: menuId.value,
-        params: pageParams,
-        order: pageParams.order,
-        field: pageParams.field,
-      };
-      pageParamsInfo.value = {
-        releaseId: menuId.value,
-        params: pageParams,
-      };
-      //如果有左侧菜单 需要加上左侧树 所选项  作为参数
-      if (listConfig.value.isLeftMenu) {
-        newParams[listConfig.value.leftMenuConfig?.listFieldName as string] =
-          pageParams[listConfig.value.leftMenuConfig?.listFieldName as string] || selectId.value;
-      }
-      newParams['headers'] = {
-        FormId: formIdComputedRef.value,
-        PK: pkField.value,
-      };
-      return newParams;
-    },
-    afterFetch: (res) => {
-      filterColumns.value.map((column: any) => {
-        if (column.onFilter) {
-          const info = res.map((item) => item[column.dataIndex!]);
-          column.filters = [...new Set(info)].map((item) => {
-            return {
-              text: item,
-              value: item,
-            };
-          });
-          column.customHeaderCell = () => {
-            return {
-              onmouseenter: () => {
-                isShowFilter.value = true;
-                showColumnIndex.value = column.dataIndex;
-                clickColumnIndex.value = '';
-              },
-              onmouseleave: () => {
-                isShowFilter.value = false;
-                showColumnIndex.value = '';
-              },
-            };
-          };
+      bordered: true,
+      beforeFetch: (pageParams) => {
+        //发送请求默认新增  左边树结构所选机构id
+        const newParams = {
+          releaseId: menuId.value,
+          params: pageParams,
+          order: pageParams.order,
+          field: pageParams.field,
+        };
+        pageParamsInfo.value = {
+          releaseId: menuId.value,
+          params: pageParams,
+        };
+        //如果有左侧菜单 需要加上左侧树 所选项  作为参数
+        if (listConfig.value.isLeftMenu) {
+          newParams[listConfig.value.leftMenuConfig?.listFieldName as string] =
+            pageParams[listConfig.value.leftMenuConfig?.listFieldName as string] || selectId.value;
         }
-      });
-      setColumns(filterColumns.value);
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    striped: false,
-    isFilterByDataSoure: true,
-    actionColumn: {
-      width: 160,
-      title: t('操作'),
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-    },
-    customRow,
-  });
+        newParams['headers'] = {
+          FormId: formIdComputedRef.value,
+          PK: pkField.value,
+        };
+        return newParams;
+      },
+      afterFetch: (res) => {
+        filterColumns.value.map((column: any) => {
+          if (column.onFilter) {
+            const info = res.map((item) => item[column.dataIndex!]);
+            column.filters = [...new Set(info)].map((item) => {
+              return {
+                text: item,
+                value: item,
+              };
+            });
+            column.customHeaderCell = () => {
+              return {
+                onmouseenter: () => {
+                  isShowFilter.value = true;
+                  showColumnIndex.value = column.dataIndex;
+                  clickColumnIndex.value = '';
+                },
+                onmouseleave: () => {
+                  isShowFilter.value = false;
+                  showColumnIndex.value = '';
+                },
+              };
+            };
+          }
+        });
+        setColumns(filterColumns.value);
+      },
+      useSearchForm: true,
+      showTableSetting: true,
+      striped: false,
+      isFilterByDataSoure: true,
+      actionColumn: {
+        width: 160,
+        title: t('操作'),
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+      },
+      customRow,
+    });
 
   function handleFilterClick(column) {
     clickColumnIndex.value = column.dataIndex;
@@ -789,15 +788,15 @@
       formConfig: {
         labelWidth: 100,
         schemas: searchFormSchema,
-        fieldMapToTime: searchDate.map((date) => {
-          return [
-            date.fieldName!,
-            [date.fieldName + 'Start', date.fieldName + 'End'],
-            date.format,
-            true,
-          ];
-          // [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM-DD']],
-        }),
+        // fieldMapToTime: searchDate.map((date) => {
+        //   return [
+        //     date.fieldName!,
+        //     [date.fieldName + 'Start', date.fieldName + 'End'],
+        //     date.format,
+        //     true,
+        //   ];
+        //   // [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM-DD']],
+        // }),
       },
     });
     reload();
@@ -881,20 +880,18 @@
   async function fetchLeftData() {
     //如果是数据字典
     if (listConfig.value.leftMenuConfig?.datasourceType === 'dic') {
-      treeData.value =
-        ((await getDicDetailList({
-          itemId: listConfig.value.leftMenuConfig.dictionaryItemId,
-        })) as
-          unknown) as
-        TreeItem[];
+      treeData.value = (await getDicDetailList({
+        itemId: listConfig.value.leftMenuConfig.dictionaryItemId,
+      })) as unknown as TreeItem[];
     } else if (listConfig.value.leftMenuConfig?.datasourceType === 'static') {
       //如果是静态数据
       treeData.value = listConfig.value.leftMenuConfig.staticData!;
     } else if (listConfig.value.leftMenuConfig?.datasourceType === 'api') {
       //如果是api
-      treeData.value =
-        ((await apiConfigFunc(listConfig.value.leftMenuConfig?.apiConfig, false)) as unknown) as
-        TreeItem[];
+      treeData.value = (await apiConfigFunc(
+        listConfig.value.leftMenuConfig?.apiConfig,
+        false,
+      )) as unknown as TreeItem[];
     }
     addRenderIcon(treeData.value);
   }