mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-24 18:40:22 +08:00
feat: 添加更多配置项 (#2607)
This commit is contained in:
luocong2016
GitHub
parent
b66a83c10f
commit
f2ec2ca273
@ -49,6 +49,17 @@
|
||||
{ value: 'default', label: 'defualt' },
|
||||
];
|
||||
|
||||
const layoutList = [
|
||||
{ value: 'vertical', label: 'vertical' },
|
||||
{ value: 'inline', label: 'inline' },
|
||||
{ value: 'horizontal', label: 'horizontal' },
|
||||
];
|
||||
|
||||
const labelAlignList = [
|
||||
{ value: 'left', label: 'left' },
|
||||
{ value: 'right', label: 'right' },
|
||||
];
|
||||
|
||||
const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'field1',
|
||||
@ -157,10 +168,9 @@
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const formSchemas: FormSchema[] = [
|
||||
{
|
||||
field: '',
|
||||
field: 'd1',
|
||||
component: 'Divider',
|
||||
label: '基础属性',
|
||||
colProps: { span: 24 },
|
||||
@ -168,15 +178,39 @@
|
||||
orientation: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
defaultValue: 'useForm',
|
||||
component: 'Input',
|
||||
label: 'name',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'layout',
|
||||
defaultValue: 'horizontal',
|
||||
component: 'RadioButtonGroup',
|
||||
label: 'layout',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: layoutList,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'labelAlign',
|
||||
defaultValue: 'right',
|
||||
component: 'RadioButtonGroup',
|
||||
label: 'labelAlign',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: labelAlignList,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'labelWidth',
|
||||
defaultValue: 120,
|
||||
component: 'InputNumber',
|
||||
label: 'labelWidth',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'size',
|
||||
@ -186,18 +220,21 @@
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: sizeList,
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'colon',
|
||||
defaultValue: false,
|
||||
component: 'Switch',
|
||||
label: 'colon',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'disabled',
|
||||
defaultValue: false,
|
||||
component: 'Switch',
|
||||
label: 'disabled',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'compact',
|
||||
@ -205,32 +242,99 @@
|
||||
component: 'Switch',
|
||||
label: 'compact',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: '',
|
||||
field: 'autoSetPlaceHolder',
|
||||
defaultValue: true,
|
||||
component: 'Switch',
|
||||
label: 'autoSetPlaceHolder',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'autoSubmitOnEnter',
|
||||
defaultValue: false,
|
||||
component: 'Switch',
|
||||
label: 'autoSubmitOnEnter',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'showAdvancedButton',
|
||||
defaultValue: false,
|
||||
component: 'Switch',
|
||||
label: 'showAdvancedButton',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
|
||||
{
|
||||
field: 'd2',
|
||||
component: 'Divider',
|
||||
label: '网格布局',
|
||||
label: '网格布局(rowProps)',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
orientation: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'actionColOptions.span',
|
||||
component: 'Slider',
|
||||
defaultValue: 24,
|
||||
label: 'span',
|
||||
field: 'rowProps.gutter.0',
|
||||
component: 'InputNumber',
|
||||
defaultValue: 0,
|
||||
label: 'Horizontal Gutter',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
min: 1,
|
||||
max: 24,
|
||||
addonAfter: 'px',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: '',
|
||||
field: 'rowProps.gutter.1',
|
||||
component: 'InputNumber',
|
||||
defaultValue: 0,
|
||||
label: 'Vertical Gutter',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
addonAfter: 'px',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'rowProps.align',
|
||||
defaultValue: 'top',
|
||||
component: 'Select',
|
||||
label: 'align',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ value: 'stretch', label: 'stretch' },
|
||||
{ value: 'bottom', label: 'bottom' },
|
||||
{ value: 'top', label: 'top' },
|
||||
{ value: 'middle', label: 'middle' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'rowProps.justify',
|
||||
defaultValue: 'start',
|
||||
component: 'Select',
|
||||
label: 'justify',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ value: 'space-around', label: 'space-around' },
|
||||
{ value: 'space-between', label: 'space-between' },
|
||||
{ value: 'center', label: 'center' },
|
||||
{ value: 'end', label: 'end' },
|
||||
{ value: 'start', label: 'start' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'wrap',
|
||||
defaultValue: true,
|
||||
component: 'Switch',
|
||||
label: 'wrap',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
|
||||
{
|
||||
field: 'd3',
|
||||
component: 'Divider',
|
||||
label: '操作按钮',
|
||||
colProps: { span: 24 },
|
||||
@ -242,11 +346,10 @@
|
||||
field: 'showActionButtonGroup',
|
||||
defaultValue: true,
|
||||
component: 'Switch',
|
||||
label: '操作按钮',
|
||||
label: 'showActionButtonGroup',
|
||||
colProps: { span: 24 },
|
||||
componentProps: ({ formActionType }) => {
|
||||
return {
|
||||
size: 'small',
|
||||
onChange: async (val: boolean) => {
|
||||
formActionType.updateSchema([
|
||||
{ field: 'showResetButton', componentProps: { disabled: !val } },
|
||||
@ -254,6 +357,10 @@
|
||||
field: 'showSubmitButton',
|
||||
componentProps: { disabled: !val },
|
||||
},
|
||||
{
|
||||
field: 'actionColOptions.span',
|
||||
componentProps: { disabled: !val },
|
||||
},
|
||||
]);
|
||||
},
|
||||
};
|
||||
@ -263,24 +370,36 @@
|
||||
field: 'showResetButton',
|
||||
defaultValue: true,
|
||||
component: 'Switch',
|
||||
label: '重置按钮',
|
||||
label: 'showResetButton',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
size: 'small',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'showSubmitButton',
|
||||
defaultValue: true,
|
||||
component: 'Switch',
|
||||
label: '提交按钮',
|
||||
label: 'showSubmitButton',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
|
||||
{
|
||||
field: 'd4',
|
||||
component: 'Divider',
|
||||
label: '操作按钮网格布局(actionColOptions)',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
size: 'small',
|
||||
orientation: 'center',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: '',
|
||||
field: 'actionColOptions.span',
|
||||
component: 'Slider',
|
||||
defaultValue: 24,
|
||||
label: 'span',
|
||||
colProps: { span: 24 },
|
||||
componentProps: { min: 0, max: 24 },
|
||||
},
|
||||
{
|
||||
field: 'd5',
|
||||
component: 'Divider',
|
||||
label: '其他事件',
|
||||
colProps: { span: 24 },
|
||||
@ -309,32 +428,29 @@
|
||||
const visible = ref<boolean>(false);
|
||||
const settingFormRef = ref();
|
||||
const [registerSetting] = useForm({
|
||||
labelWidth: 80,
|
||||
size: 'small',
|
||||
schemas: formSchemas,
|
||||
compact: true,
|
||||
actionColOptions: { span: 24 },
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
|
||||
const resetSettings = async () => {
|
||||
setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
|
||||
setProps({ submitButtonOptions: { disabled: false, loading: false } });
|
||||
await setFieldsValue({ field9: [] });
|
||||
await settingFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
const handleSubmitSetting = async (values: Recordable) => {
|
||||
console.log(values);
|
||||
await setProps(values);
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
|
||||
labelWidth: 120,
|
||||
schemas,
|
||||
actionColOptions: { span: 24 },
|
||||
fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
|
||||
});
|
||||
|
||||
async function handleLoad() {
|
||||
const promiseFn = function () {
|
||||
return new Promise((resolve) => {
|
||||
@ -348,9 +464,7 @@
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
const item = await promiseFn();
|
||||
|
||||
const { field9, province, city, district } = item as any;
|
||||
await updateSchema({
|
||||
field: 'field9',
|
||||
@ -359,16 +473,14 @@
|
||||
},
|
||||
});
|
||||
await setFieldsValue({ field9 });
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const showDrawer = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const onSettings = () => {
|
||||
settingFormRef.value?.submit();
|
||||
};
|
||||
|
||||
const withClose = (formProps: Partial<FormProps>) => {
|
||||
setProps(formProps);
|
||||
visible.value = false;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user