github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-02-02 18:08:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(form): fix updateSchema error #100

Browse Source
This commit is contained in:
vben 2020-11-28 14:27:26 +08:00
parent 81baf1d5c4
commit 4982786601
9 changed files with 114 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Form/index.ts
View File

@ -1,7 +1,10 @@
export { default as BasicForm } from './src/BasicForm.vue';
import BasicFormLib from './src/BasicForm.vue';
import { withInstall } from '../util';
export * from './src/types/form';
export * from './src/types/formItem';
export { useComponentRegister } from './src/hooks/useComponentRegister';
export { useForm } from './src/hooks/useForm';
export const BasicForm = withInstall(BasicFormLib);

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

@ -16,6 +16,7 @@
</template>
</FormItem>
</template>
<FormAction
v-bind="{ ...getActionPropsRef, ...advanceState }"
@toggle-advanced="handleToggleAdvanced"
@ -30,7 +31,17 @@
import type { Ref, WatchStopHandle } from 'vue';
import type { ValidateFields } from 'ant-design-vue/lib/form/interface';
import { defineComponent, reactive, ref, computed, unref, toRef, onMounted, watch } from 'vue';
import {
defineComponent,
reactive,
ref,
computed,
unref,
toRef,
onMounted,
watch,
toRefs,
} from 'vue';
import { Form, Row } from 'ant-design-vue';
import FormItem from './FormItem';
import { basicProps } from './props';
@ -103,6 +114,7 @@
const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
for (const schema of schemas) {
const { defaultValue, component } = schema;
// handle date type
if (defaultValue && dateItemType.includes(component)) {
if (!Array.isArray(defaultValue)) {
schema.defaultValue = moment(defaultValue);
@ -127,10 +139,10 @@
formModel,
defaultValueRef,
});
const { transformDateFunc, fieldMapToTime } = toRefs(props);
const { handleFormValues, initDefault } = useFormValues({
transformDateFuncRef: toRef(props, 'transformDateFunc') as Ref<Fn<any>>,
fieldMapToTimeRef: toRef(props, 'fieldMapToTime'),
transformDateFuncRef: transformDateFunc as Ref<Fn<any>>,
fieldMapToTimeRef: fieldMapToTime,
defaultValueRef,
getSchema,
formModel,

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

@ -7,28 +7,17 @@ import { BasicArrow } from '/@/components/Basic/index';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';
const { t } = useI18n('component.form');
export default defineComponent({
name: 'BasicFormAction',
props: {
show: {
type: Boolean,
default: true,
},
showResetButton: {
type: Boolean,
default: true,
},
showSubmitButton: {
type: Boolean,
default: true,
},
showAdvancedButton: {
type: Boolean,
default: true,
},
show: propTypes.bool.def(true),
showResetButton: propTypes.bool.def(true),
showSubmitButton: propTypes.bool.def(true),
showAdvancedButton: propTypes.bool.def(true),
resetButtonOptions: {
type: Object as PropType<any>,
default: {},
@ -41,18 +30,9 @@ export default defineComponent({
type: Object as PropType<any>,
default: {},
},
actionSpan: {
type: Number,
default: 6,
},
isAdvanced: {
type: Boolean,
default: false,
},
hideAdvanceBtn: {
type: Boolean,
default: false,
},
actionSpan: propTypes.number.def(6),
isAdvanced: propTypes.bool,
hideAdvanceBtn: propTypes.bool,
},
emits: ['toggle-advanced'],
setup(props, { slots, emit }) {
@ -87,19 +67,53 @@ export default defineComponent({
emit('toggle-advanced');
}
function renderAdvanceButton() {
const { showAdvancedButton, hideAdvanceBtn, isAdvanced } = props;
if (!showAdvancedButton || !!hideAdvanceBtn) {
return null;
}
return (
<Button type="default" class="mr-2" onClick={toggleAdvanced}>
{() => (
<>
{isAdvanced ? t('putAway') : t('unfold')}
<BasicArrow expand={!isAdvanced} top />
</>
)}
</Button>
);
}
function renderResetButton() {
const { showResetButton } = props;
if (!showResetButton) {
return null;
}
return (
<Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
{() => unref(getResetBtnOptionsRef).text}
</Button>
);
}
function renderSubmitButton() {
const { showSubmitButton } = props;
if (!showSubmitButton) {
return null;
}
return (
<Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
{() => unref(getSubmitBtnOptionsRef).text}
</Button>
);
}
return () => {
if (!props.show) {
return;
return null;
}
const {
showAdvancedButton,
hideAdvanceBtn,
isAdvanced,
showResetButton,
showSubmitButton,
} = props;
return (
<Col {...unref(actionColOpt)} style={{ textAlign: 'right' }}>
{() => (
@ -107,30 +121,13 @@ export default defineComponent({
{() => (
<>
{getSlot(slots, 'advanceBefore')}
{showAdvancedButton && !hideAdvanceBtn && (
<Button type="default" class="mr-2" onClick={toggleAdvanced}>
{() => (
<>
{isAdvanced ? t('putAway') : t('unfold')}
<BasicArrow expand={!isAdvanced} top />
</>
)}
</Button>
)}
{renderAdvanceButton()}
{getSlot(slots, 'resetBefore')}
{showResetButton && (
<Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
{() => unref(getResetBtnOptionsRef).text}
</Button>
)}
{renderResetButton()}
{getSlot(slots, 'submitBefore')}
{showSubmitButton && (
<Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
{() => unref(getSubmitBtnOptionsRef).text}
</Button>
)}
{renderSubmitButton()}
{getSlot(slots, 'submitAfter')}
</>

2
src/components/Form/src/props.ts
View File

@ -5,7 +5,7 @@ import { TableActionType } from '/@/components/Table';
export const basicProps = {
model: {
type: Object as PropType<any>,
type: Object as PropType<Record<string, any>>,
default: {},
},
// 标签宽度 固定宽度

5
src/router/menus/index.ts
View File

@ -13,7 +13,9 @@ import modules from 'globby!/@/router/menus/modules/**/*.@(ts)';
const menuModules: MenuModule[] = [];
Object.keys(modules).forEach((key) => {
menuModules.push(modules[key]);
const moduleItem = modules[key];
const menuModule = Array.isArray(moduleItem) ? [...moduleItem] : [moduleItem];
menuModules.push(...menuModule);
});
// ===========================
@ -25,6 +27,7 @@ const staticMenus: Menu[] = [];
menuModules.sort((a, b) => {
return (a.orderNo || 0) - (b.orderNo || 0);
});
for (const menu of menuModules) {
staticMenus.push(transformMenuModule(menu));
}

49
src/router/menus/modules/dashboard.ts
View File

@ -1,24 +1,33 @@
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 10,
menu: {
name: 'routes.dashboard.dashboard',
path: '/dashboard',
children: [
{
path: '/workbench',
name: 'routes.dashboard.workbench',
},
{
path: '/analysis',
name: 'routes.dashboard.analysis',
},
{
path: '/welcome',
name: 'routes.dashboard.welcome',
},
],
const menu: MenuModule[] = [
{
orderNo: 0,
menu: {
path: '/dashboard/welcome',
name: 'routes.dashboard.welcome',
},
},
};
{
orderNo: 10,
menu: {
name: 'routes.dashboard.dashboard',
path: '/dashboard',
children: [
{
path: '/workbench',
name: 'routes.dashboard.workbench',
},
{
path: '/analysis',
name: 'routes.dashboard.analysis',
},
// {
// path: '/welcome',
// name: 'routes.dashboard.welcome',
// },
],
},
},
];
export default menu;

5
src/router/routes/modules/dashboard.ts
View File

@ -7,7 +7,7 @@ const dashboard: AppRouteModule = {
path: '/dashboard',
name: 'Dashboard',
component: PAGE_LAYOUT_COMPONENT,
redirect: '/dashboard/workbench',
redirect: '/dashboard/welcome',
meta: {
icon: 'ant-design:home-outlined',
title: 'routes.dashboard.dashboard',
@ -21,6 +21,8 @@ const dashboard: AppRouteModule = {
component: () => import('/@/views/dashboard/welcome/index.vue'),
meta: {
title: 'routes.dashboard.welcome',
affix: true,
icon: 'ant-design:home-outlined',
},
},
{
@ -29,7 +31,6 @@ const dashboard: AppRouteModule = {
component: () => import('/@/views/dashboard/workbench/index.vue'),
meta: {
title: 'routes.dashboard.workbench',
affix: true,
},
},
{

6
src/utils/index.ts
View File

@ -1,4 +1,5 @@
export const timestamp = () => +Date.now();
import { isObject } from '/@/utils/is';
export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
export const noop = () => {};
export const now = () => Date.now();
@ -40,10 +41,7 @@ export function setObjToUrlParams(baseUrl: string, obj: any): string {
export function deepMerge<T = any>(src: any, target: any): T {
let key: string;
for (key in target) {
src[key] =
src[key] && src[key].toString() === '[object Object]'
? deepMerge(src[key], target[key])
: (src[key] = target[key]);
src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
}
return src;
}

2
vite.config.ts
View File

@ -89,7 +89,7 @@ const viteConfig: UserConfig = {
* Transpile target for esbuild.
* @default 'es2020'
*/
esbuildTarget: 'es2020',
esbuildTarget: 'es2019',
/**
* Whether to log asset info to console
* @default false