Parcourir la source

[Mod 0000] 修改基础表格组件的默认配置并修改布局方式

houzekong il y a 4 mois
Parent
commit
1914695645

+ 3 - 1
src/components/Form/src/TableForm.vue

@@ -1,6 +1,8 @@
 <template>
   <Flex class="mb-6px" align="center" justify="space-between">
-    <FormGroup v-model:value="currentGroup" :groups="getBindValue.schemaGroupNames"></FormGroup>
+    <slot name="formTitle">
+      <FormGroup v-model:value="currentGroup" :groups="getBindValue.schemaGroupNames"></FormGroup>
+    </slot>
 
     <FormAction v-bind="getFormActionBindProps" :form-item-props="{ noStyle: true }" @toggle-advanced="handleToggleAdvanced">
       <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">

+ 3 - 3
src/components/Form/src/components/FormAction.vue

@@ -3,17 +3,17 @@
     <div class="btnArea" style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
       <FormItem v-bind="formItemProps">
         <slot name="submitBefore"></slot>
-        <a-button type="primary" class="mr-2" v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
+        <a-button type="primary" v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
           {{ getSubmitBtnOptions.text }}
         </a-button>
 
         <slot name="resetBefore"></slot>
-        <a-button type="default" class="mr-2" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
+        <a-button type="default" class="ml-2" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
           {{ getResetBtnOptions.text }}
         </a-button>
 
         <slot name="advanceBefore"></slot>
-        <a-button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
+        <a-button class="ml-2" type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
           {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
           <BasicArrow class="ml-1" :expand="!isAdvanced" up />
         </a-button>

+ 2 - 0
src/components/Form/src/components/FormGroup.vue

@@ -8,6 +8,8 @@
         {{ item }}
       </AButton>
     </template>
+    <!-- 占位符,避免没有组别时没有内容导致父组件的Flex布局受影响 -->
+    <span></span>
   </Space>
 </template>
 <script lang="ts">

+ 1 - 5
src/components/Table/src/BasicTable.vue

@@ -11,11 +11,7 @@
       @submit="handleSearchInfoChange"
       @advanced-change="redoHeight"
     >
-      <template #formTitle>
-        <slot v-if="$slots.formTitle" name="formTitle"></slot>
-        <component v-else :is="getBindValues.formTitle" />
-      </template>
-      <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
+      <template #[item]="data" v-for="item in ['formTitle', 'resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
       <component :is="getBindValues.formTitle"></component>

+ 1 - 2
src/components/Table/src/hooks/useTableScroll.ts

@@ -135,8 +135,7 @@ export function useTableScroll(
     let height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - paginationHeight - footerHeight - headerHeight;
     // update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
     // 10+6(外层边距padding:10 + 内层padding-bottom:6)
-    // 根据新布局进行了微调,现为43
-    height -= 43;
+    height -= 16;
     // 代码逻辑说明: 【issues/8880】BasicTable组件在modal中适应高度
     try {
       // 当BasicTable在BasicModal容器中时,扣减容器底部高度

+ 25 - 25
src/hooks/system/useListPage.ts

@@ -69,7 +69,7 @@ export function useListPage(options: ListPageOptions) {
     if (realUrl) {
       const title = typeof name === 'function' ? name() : name;
       // 代码逻辑说明: erp代码生成 子表 导出报错,原因未知-
-      let paramsForm:any = {};
+      let paramsForm: any = {};
       try {
         //当useSearchFor不等于false的时候,才去触发validate
         if (options?.tableProps?.useSearchForm !== false) {
@@ -81,8 +81,8 @@ export function useListPage(options: ListPageOptions) {
       }
 
       // 代码逻辑说明: [/issues/409]导出功能没有按排序结果导出,设置导出默认排序,创建时间倒序
-      if(!paramsForm?.column){
-         Object.assign(paramsForm,{column:'createTime',order:'desc'});
+      if (!paramsForm?.column) {
+        Object.assign(paramsForm, { column: 'createTime', order: 'desc' });
       }
 
       //如果参数不为空,则整合到一起
@@ -102,13 +102,13 @@ export function useListPage(options: ListPageOptions) {
       }
 
       //是否显示表格设置
-      if(options?.tableProps?.showTableSetting !== false){
+      if (options?.tableProps?.showTableSetting !== false) {
         //是否显示配置字段
-        if(options?.tableProps?.tableSetting?.setting !== false){
-          await exportColumns(paramsForm)
+        if (options?.tableProps?.tableSetting?.setting !== false) {
+          await exportColumns(paramsForm);
         }
       }
-    
+
       return handleExportXls(title as string, realUrl, filterObj(paramsForm));
     } else {
       $message.createMessage.warn('没有传递 exportConfig.url 参数');
@@ -118,30 +118,30 @@ export function useListPage(options: ListPageOptions) {
 
   /**
    * 设置导出的列
-   * 
+   *
    * @param paramsForm
    */
   async function exportColumns(paramsForm: any) {
     //获取表格的列
     const columns = getColumns();
-    if(columns && columns.length >0){
+    if (columns && columns.length > 0) {
       //需要导出的字段
-      const exportFields:any = [];
+      const exportFields: any = [];
       //是否有隐藏列
       let hiddenColumns = false;
       for (const column of columns) {
-        if(!column.defaultHidden){
+        if (!column.defaultHidden) {
           let dataIndex = column?.dataIndex;
-          if(column?.dataIndex!.toString().indexOf('_dictText')){
-            dataIndex = column?.dataIndex!.toString().replace('_dictText','')
+          if (column?.dataIndex!.toString().indexOf('_dictText')) {
+            dataIndex = column?.dataIndex!.toString().replace('_dictText', '');
           }
           exportFields.push(dataIndex);
         } else {
           hiddenColumns = true;
         }
       }
-      if(hiddenColumns){
-        paramsForm['exportFields'] = exportFields.join(",");
+      if (hiddenColumns) {
+        paramsForm['exportFields'] = exportFields.join(',');
       }
     }
   }
@@ -233,7 +233,7 @@ export function useListTable(tableProps: TableProps): [
     rowSelection: any;
     selectedRows: Ref<Recordable[]>;
     selectedRowKeys: Ref<any[]>;
-  }
+  },
 ] {
   // 自适应列配置
   const adaptiveColProps: Partial<ColEx> = {
@@ -272,17 +272,17 @@ export function useListTable(tableProps: TableProps): [
       },
       wrapperCol: {},
       // 是否显示 展开/收起 按钮
-      showAdvancedButton: true,
+      showAdvancedButton: false,
       // 超过指定列数默认折叠
       autoAdvancedCol: 3,
       // 操作按钮配置
       actionColOptions: {
         ...adaptiveColProps,
-        style: { textAlign: 'left' },
+        style: { textAlign: 'right' },
       },
     },
     // 斑马纹
-    striped: false,
+    striped: true,
     // 是否可以自适应高度
     canResize: true,
     // 表格最小高度
@@ -296,7 +296,7 @@ export function useListTable(tableProps: TableProps): [
     // 是否显示序号列
     showIndexColumn: false,
     // 显示表格设置
-    showTableSetting: true,
+    showTableSetting: false,
     // 表格全屏设置
     tableSetting: {
       fullScreen: false,
@@ -316,7 +316,7 @@ export function useListTable(tableProps: TableProps): [
   // 合并用户个性化配置
   if (tableProps) {
     // 代码逻辑说明: 【issues/6180】前端代码配置表变查询条件显示列不生效---
-    if(tableProps.formConfig){
+    if (tableProps.formConfig) {
       setTableProps(tableProps.formConfig);
     }
     // merge 方法可深度合并对象
@@ -370,11 +370,11 @@ export function useListTable(tableProps: TableProps): [
    * @param formConfig
    */
   function setTableProps(formConfig: any) {
-    const replaceAttributeArray: string[] = ['baseColProps','labelCol'];
+    const replaceAttributeArray: string[] = ['baseColProps', 'labelCol'];
     for (const item of replaceAttributeArray) {
-      if(formConfig && formConfig[item]){
-        if(defaultTableProps.formConfig){
-          const defaultFormConfig:any = defaultTableProps.formConfig;
+      if (formConfig && formConfig[item]) {
+        if (defaultTableProps.formConfig) {
+          const defaultFormConfig: any = defaultTableProps.formConfig;
           defaultFormConfig[item] = formConfig[item];
         }
         formConfig[item] = {};