fix(table): fix table search criteria collapse failure

vben
1 parent da4aea13
Showing 9 changed files with 57 additions and 51 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/FormAction.tsx
src/components/Form/src/FormItem.tsx
src/components/Form/src/hooks/useAdvanced.ts
src/components/Menu/src/BasicMenu.tsx
src/components/Table/src/BasicTable.vue
src/layouts/default/LayoutHeader.tsx
src/layouts/default/actions/notice/NoticeActionItem.vue
src/views/sys/login/Login.vue
@@ -24,9 +24,9 @@
 </template>
 <script lang="ts">
   import type { FormActionType, FormProps, FormSchema } from './types/form';
-  import type { Form as FormType, ValidateFields } from 'ant-design-vue/types/form/form';
   import type { AdvanceState } from './types/hooks';
   import type { Ref } from 'vue';
+  import type { ValidateFields } from 'ant-design-vue/lib/form/interface';
  
   import {
     defineComponent,
@@ -41,12 +41,13 @@
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './FormItem';
   import { basicProps } from './props';
-  import { deepMerge } from '/@/utils';
   import FormAction from './FormAction';
  
   import { dateItemType } from './helper';
   import moment from 'moment';
   import { cloneDeep } from 'lodash-es';
+  import { deepMerge } from '/@/utils';
+
   import { useFormValues } from './hooks/useFormValues';
   import useAdvanced from './hooks/useAdvanced';
   import { useFormAction } from './hooks/useFormAction';
@@ -75,7 +76,7 @@
       const defaultValueRef = ref<any>({});
       const propsRef = ref<Partial<FormProps>>({});
       const schemaRef = ref<FormSchema[] | null>(null);
-      const formElRef = ref<Nullable<FormType>>(null);
+      const formElRef = ref<Nullable<FormActionType>>(null);
  
       const getMergePropsRef = computed(
         (): FormProps => {
+import type { ColEx } from './types/index';
+
 import { defineComponent, unref, computed, PropType } from 'vue';
 import { Form, Col } from 'ant-design-vue';
-import type { ColEx } from './types/index';
-import { getSlot } from '/@/utils/helper/tsxHelper';
 import Button from '/@/components/Button/index.vue';
-import { UpOutlined, DownOutlined } from '@ant-design/icons-vue';
+import { BasicArrow } from '/@/components/Basic/index';
+
+import { getSlot } from '/@/utils/helper/tsxHelper';
  
 export default defineComponent({
   name: 'BasicFormAction',
@@ -107,11 +109,7 @@ export default defineComponent({
                       {() => (
                         <>
                           {isAdvanced ? '收起' : '展开'}
-                          {isAdvanced ? (
-                            <UpOutlined class="advanced-icon" />
-                          ) : (
-                            <DownOutlined class="advanced-icon" />
-                          )}
+                          <BasicArrow expand={!isAdvanced} />
                         </>
                       )}
                     </Button>
-import type { ValidationRule } from 'ant-design-vue/types/form/form';
 import type { PropType } from 'vue';
 import type { FormProps } from './types/form';
 import type { FormSchema } from './types/form';
+import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
  
 import { defineComponent, computed, unref, toRef } from 'vue';
 import { Form, Col } from 'ant-design-vue';
@@ -54,10 +54,25 @@ export default defineComponent({
       };
     });
  
-    const getShowRef = computed(() => {
-      const { show, ifShow, isAdvanced } = props.schema;
+    const getDisableRef = computed(() => {
+      const { disabled: globDisabled } = props.formProps;
+      const { dynamicDisabled } = props.schema;
+      let disabled = !!globDisabled;
+      if (isBoolean(dynamicDisabled)) {
+        disabled = dynamicDisabled;
+      }
+
+      if (isFunction(dynamicDisabled)) {
+        disabled = dynamicDisabled(unref(getValuesRef));
+      }
+
+      return disabled;
+    });
+
+    function getShow() {
+      const { show, ifShow } = props.schema;
       const { showAdvancedButton } = props.formProps;
-      const itemIsAdvanced = showAdvancedButton ? !!isAdvanced : true;
+      const itemIsAdvanced = showAdvancedButton ? !!props.schema.isAdvanced : true;
       let isShow = true;
       let isIfShow = true;
  
@@ -75,22 +90,7 @@ export default defineComponent({
       }
       isShow = isShow && itemIsAdvanced;
       return { isShow, isIfShow };
-    });
-
-    const getDisableRef = computed(() => {
-      const { disabled: globDisabled } = props.formProps;
-      const { dynamicDisabled } = props.schema;
-      let disabled = !!globDisabled;
-      if (isBoolean(dynamicDisabled)) {
-        disabled = dynamicDisabled;
-      }
-
-      if (isFunction(dynamicDisabled)) {
-        disabled = dynamicDisabled(unref(getValuesRef));
-      }
-
-      return disabled;
-    });
+    }
  
     function handleRules(): ValidationRule[] {
       const {
@@ -246,7 +246,7 @@ export default defineComponent({
         <Form.Item
           name={field}
           colon={colon}
-          {...itemProps}
+          {...(itemProps as any)}
           label={renderLabelHelpMessage()}
           rules={handleRules()}
           labelCol={labelCol}
@@ -261,7 +261,7 @@ export default defineComponent({
       if (!componentMap.has(component)) return null;
       const { baseColProps = {} } = props.formProps;
       const realColProps = { ...baseColProps, ...colProps };
-      const { isIfShow, isShow } = unref(getShowRef);
+      const { isIfShow, isShow } = getShow();
       const getContent = () => {
         return colSlot
           ? getSlot(slots, colSlot)
 import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
-import type { ComputedRef, Ref } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
  
 import { computed, unref, watch } from 'vue';
@@ -69,6 +69,7 @@ export default function ({
       actionColOptions,
     };
   });
+
   watch(
     [() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
     () => {
@@ -169,6 +170,7 @@ export default function ({
       itemColSum,
       true
     );
+
     emit('advanced-change');
   }
  
@@ -60,13 +60,13 @@ export default defineComponent({
       const { showLogo, search } = props;
       let offset = 0;
       if (search) {
-        offset += 60;
+        offset += 54;
       }
       if (showLogo) {
-        offset += 54;
+        offset += 46;
       }
       return {
-        height: `calc(100% - ${offset - 38}px)`,
+        height: `calc(100% - ${offset - 10}px)`,
         position: 'relative',
         overflow: 'auto',
       };
@@ -21,11 +21,9 @@
     </BasicForm>
     <Table
       ref="tableElRef"
-      v-bind="getBindValues"
       :rowClassName="getRowClassName"
-      :class="{
-        hidden: !getEmptyDataIsShowTable,
-      }"
+      v-bind="getBindValues"
+      v-show="getEmptyDataIsShowTable"
       @change="handleTableChange"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -44,6 +42,8 @@
     GetColumnsParams,
     TableActionType,
     SizeType,
+    SorterResult,
+    TableCustomRecord,
   } from './types/table';
  
   import { isFunction, isString } from '/@/utils/is';
@@ -64,7 +64,6 @@
   import { ROW_KEY } from './const';
   import { PaginationProps } from './types/pagination';
   import { deepMerge } from '/@/utils';
-  import { SorterResult, TableCustomRecord } from 'ant-design-vue/types/table/table';
   import { useEvent } from '/@/hooks/event/useEvent';
  
   import './style/index.less';
@@ -199,7 +198,7 @@
         { immediate: true }
       );
  
-      function getRowClassName(record: TableCustomRecord<any>, index: number) {
+      function getRowClassName(record: TableCustomRecord, index: number) {
         const { striped, rowClassName } = unref(getMergeProps);
         if (!striped) return;
         if (rowClassName && isFunction(rowClassName)) {
@@ -218,6 +217,7 @@
  
       function handleTableChange(
         pagination: PaginationProps,
+        // @ts-ignore
         filters: Partial<Record<string, string[]>>,
         sorter: SorterResult<any>
       ) {
@@ -145,6 +145,7 @@ export default defineComponent({
                         <Badge
                           count={errorStore.getErrorListCountState}
                           offset={[0, 10]}
+                          dot
                           overflowCount={99}
                         >
                           {() => (
 <template>
   <div class="layout-header__action-item notify-action">
     <Popover title="" trigger="click">
-      <Badge :count="count" :numberStyle="numberStyle">
+      <Badge :count="count" dot :numberStyle="numberStyle">
         <BellOutlined class="layout-header__action-icon" />
       </Badge>
       <template #content>
@@ -56,7 +56,7 @@
  
       .ant-badge-multiple-words {
         padding: 0 4px;
-        transform: translate(26%, -40%);
+        // transform: translate(26%, -40%);
       }
  
       svg {
@@ -134,16 +134,17 @@
       display: none;
       height: 100%;
       background: url(../../../assets/images/login/login-in.png) no-repeat;
-      background-size: 100% 100%;
+      background-position: 50% 30%;
+      background-size: 80% 80%;
  
-      .respond-to(large, { display: block;});
+      .respond-to(xlarge, { display: block;});
     }
  
     &-form {
       width: 100%;
       background: @white;
       border: 10px solid rgba(255, 255, 255, 0.5);
-      border-width: 10px;
+      border-width: 8px;
       border-radius: 4px;
       background-clip: padding-box;
       .respond-to(xlarge, { margin: 0 56px});
@@ -157,8 +158,11 @@
         height: 100%;
         justify-content: center;
         align-items: center;
-        .respond-to(large, { width: 40%;});
-        .respond-to(xlarge, { width: 33.3%;});
+        .respond-to(large, {
+          width: 520px;
+          right: calc(50% - 260px);
+          });
+        .respond-to(xlarge, { width: 520px; right:0});
       }
  
       &__content {
@@ -174,7 +178,7 @@
  
           img {
             display: inline-block;
-            width: 80px;
+            width: 64px;
           }
  
           h1 {