github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-01-24 04:10:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(table): fix table search criteria collapse failure

Browse Source
This commit is contained in:
vben 2020-11-01 01:07:41 +08:00
parent da4aea1399
commit 84b8302c09
9 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Form/src/BasicForm.vue
View File

@ -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 => {

14
src/components/Form/src/FormAction.tsx
View File

@ -1,9 +1,11 @@
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>

44
src/components/Form/src/FormItem.tsx
View File

@ -1,7 +1,7 @@
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)

4
src/components/Form/src/hooks/useAdvanced.ts
View File

@ -1,6 +1,6 @@
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');
}

8
src/components/Menu/src/BasicMenu.tsx
View File

@ -60,13 +60,13 @@ export default defineComponent({
const { showLogo, search } = props;
let offset = 0;
if (search) {
offset += 60;
}
if (showLogo) {
offset += 54;
}
if (showLogo) {
offset += 46;
}
return {
height: `calc(100% - ${offset - 38}px)`,
height: `calc(100% - ${offset - 10}px)`,
position: 'relative',
overflow: 'auto',
};

12
src/components/Table/src/BasicTable.vue
View File

@ -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>
) {

1
src/layouts/default/LayoutHeader.tsx
View File

@ -145,6 +145,7 @@ export default defineComponent({
<Badge
count={errorStore.getErrorListCountState}
offset={[0, 10]}
dot
overflowCount={99}
>
{() => (

4
src/layouts/default/actions/notice/NoticeActionItem.vue
View File

@ -1,7 +1,7 @@
<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 {

16
src/views/sys/login/Login.vue
View File

@ -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 {