提交 84b8302c 作者: vben

fix(table): fix table search criteria collapse failure

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