mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 14:13:40 +08:00
fix(table): fix table search criteria collapse failure
This commit is contained in:
@@ -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 @@
|
|||||||
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 @@
|
|||||||
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 => {
|
||||||
|
@@ -1,9 +1,11 @@
|
|||||||
|
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({
|
|||||||
{() => (
|
{() => (
|
||||||
<>
|
<>
|
||||||
{isAdvanced ? '收起' : '展开'}
|
{isAdvanced ? '收起' : '展开'}
|
||||||
{isAdvanced ? (
|
<BasicArrow expand={!isAdvanced} />
|
||||||
<UpOutlined class="advanced-icon" />
|
|
||||||
) : (
|
|
||||||
<DownOutlined class="advanced-icon" />
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
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({
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
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,23 +90,8 @@ 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 {
|
||||||
rules: defRules = [],
|
rules: defRules = [],
|
||||||
@@ -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({
|
|||||||
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)
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
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 ({
|
|||||||
actionColOptions,
|
actionColOptions,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
[() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
|
[() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
|
||||||
() => {
|
() => {
|
||||||
@@ -169,6 +170,7 @@ export default function ({
|
|||||||
itemColSum,
|
itemColSum,
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
emit('advanced-change');
|
emit('advanced-change');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
||||||
if (showLogo) {
|
|
||||||
offset += 54;
|
offset += 54;
|
||||||
}
|
}
|
||||||
|
if (showLogo) {
|
||||||
|
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 @@
|
|||||||
</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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
{ 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 @@
|
|||||||
|
|
||||||
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({
|
|||||||
<Badge
|
<Badge
|
||||||
count={errorStore.getErrorListCountState}
|
count={errorStore.getErrorListCountState}
|
||||||
offset={[0, 10]}
|
offset={[0, 10]}
|
||||||
|
dot
|
||||||
overflowCount={99}
|
overflowCount={99}
|
||||||
>
|
>
|
||||||
{() => (
|
{() => (
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
<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 @@
|
|||||||
|
|
||||||
.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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 80px;
|
width: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
Reference in New Issue
Block a user