diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 17b9b2c2..4e4556a6 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -4,6 +4,7 @@
- 重构 hook,引入 `@vueuse`,删除其中已有的`hook`,优化现有的 hook
- `useEvent` 更名->`useEventListener`
+- 表单`ComponentType`删除 `SelectOptGroup`,`SelectOption`,`Transfer`,`Radio`,四个类型。修改`RadioButtonGroup`组件
### ✨ Features
@@ -12,10 +13,15 @@
- 新增菜单及顶栏颜色选择配色
- 增加示例结果页
+### ⚡ Wip
+
+- 上传组件(未完成,测试中...)
+
### ⚡ Performance Improvements
- 优化 settingDrawer 代码
- 优化多标签页切换速度
+- 增加表单自定义及动态能力
### 🐛 Bug Fixes
@@ -23,6 +29,7 @@
- 修复登录过期后重新登录未跳转原来页面的
- 修复 window 系统动态引入错误
- 修复页面类型错误
+- 修复表单 switch 和 checkBox 单独使用报错
## 2.0.0-rc.9 (2020-11-9)
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index d48b3410..f11b7eef 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -5,6 +5,7 @@
= {
+ const formActionType: Partial = {
getFieldsValue,
setFieldsValue,
resetFields,
@@ -179,7 +180,7 @@
onMounted(() => {
initDefault();
- emit('register', methods);
+ emit('register', formActionType);
});
return {
@@ -191,7 +192,8 @@
getProps,
formElRef,
getSchema,
- ...methods,
+ formActionType,
+ ...formActionType,
};
},
});
diff --git a/src/components/Form/src/FormItem.tsx b/src/components/Form/src/FormItem.tsx
index 567d7703..16acb76d 100644
--- a/src/components/Form/src/FormItem.tsx
+++ b/src/components/Form/src/FormItem.tsx
@@ -1,5 +1,5 @@
import type { PropType } from 'vue';
-import type { FormProps } from './types/form';
+import type { FormActionType, FormProps } from './types/form';
import type { FormSchema } from './types/form';
import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
import type { TableActionType } from '/@/components/Table';
@@ -41,6 +41,9 @@ export default defineComponent({
tableAction: {
type: Object as PropType,
},
+ formActionType: {
+ type: Object as PropType,
+ },
},
setup(props, { slots }) {
const itemLabelWidthRef = useItemLabelWidth(toRef(props, 'schema'), toRef(props, 'formProps'));
@@ -61,12 +64,12 @@ export default defineComponent({
});
const getComponentsPropsRef = computed(() => {
- const { schema, tableAction, formModel } = props;
+ const { schema, tableAction, formModel, formActionType } = props;
const { componentProps = {} } = schema;
if (!isFunction(componentProps)) {
return componentProps;
}
- return componentProps({ schema, tableAction, formModel }) || {};
+ return componentProps({ schema, tableAction, formModel, formActionType }) || {};
});
const getDisableRef = computed(() => {
@@ -179,17 +182,27 @@ export default defineComponent({
}
function renderComponent() {
- const { renderComponentContent, component, field, changeEvent = 'change' } = props.schema;
+ const {
+ renderComponentContent,
+ component,
+ field,
+ changeEvent = 'change',
+ valueField,
+ } = props.schema;
- const isCheck = component && ['Switch'].includes(component);
+ const isCheck = component && ['Switch', 'Checkbox'].includes(component);
const eventKey = `on${upperFirst(changeEvent)}`;
+
const on = {
[eventKey]: (e: any) => {
if (propsData[eventKey]) {
propsData[eventKey](e);
}
- (props.formModel as any)[field] = e && e.target ? e.target.value : e;
+
+ const target = e ? e.target : null;
+ const value = target ? (isCheck ? target.checked : target.value) : e;
+ (props.formModel as any)[field] = value;
},
};
const Comp = componentMap.get(component);
@@ -215,17 +228,20 @@ export default defineComponent({
propsData.codeField = field;
propsData.formValues = unref(getValuesRef);
const bindValue = {
- [isCheck ? 'checked' : 'value']: handleValue(component, field),
+ [valueField || (isCheck ? 'checked' : 'value')]: handleValue(component, field),
};
if (!renderComponentContent) {
return ;
}
+ const compSlot = isFunction(renderComponentContent)
+ ? { ...renderComponentContent(unref(getValuesRef)) }
+ : {
+ default: () => renderComponentContent,
+ };
return (
- {{
- ...renderComponentContent(unref(getValuesRef)),
- }}
+ {compSlot}
);
}
@@ -249,7 +265,7 @@ export default defineComponent({
const { colon } = props.formProps;
const getContent = () => {
return slot
- ? getSlot(slots, slot)
+ ? getSlot(slots, slot, unref(getValuesRef))
: render
? render(unref(getValuesRef))
: renderComponent();
@@ -276,7 +292,7 @@ export default defineComponent({
const { isIfShow, isShow } = getShow();
const getContent = () => {
return colSlot
- ? getSlot(slots, colSlot)
+ ? getSlot(slots, colSlot, unref(getValuesRef))
: renderColContent
? renderColContent(unref(getValuesRef))
: renderItem();
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 44f67ecc..9bfc0197 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -14,8 +14,8 @@ import {
Switch,
TimePicker,
TreeSelect,
- Transfer,
} from 'ant-design-vue';
+import RadioButtonGroup from './components/RadioButtonGroup.vue';
import { ComponentType } from './types/index';
@@ -30,13 +30,13 @@ componentMap.set('InputNumber', InputNumber);
componentMap.set('AutoComplete', AutoComplete);
componentMap.set('Select', Select);
-componentMap.set('SelectOptGroup', Select.OptGroup);
-componentMap.set('SelectOption', Select.Option);
+// componentMap.set('SelectOptGroup', Select.OptGroup);
+// componentMap.set('SelectOption', Select.Option);
componentMap.set('TreeSelect', TreeSelect);
-componentMap.set('Transfer', Transfer);
-componentMap.set('Radio', Radio);
+// componentMap.set('Transfer', Transfer);
+// componentMap.set('Radio', Radio);
componentMap.set('Switch', Switch);
-componentMap.set('RadioButton', Radio.Button);
+componentMap.set('RadioButtonGroup', RadioButtonGroup);
componentMap.set('RadioGroup', Radio.Group);
componentMap.set('Checkbox', Checkbox);
componentMap.set('CheckboxGroup', Checkbox.Group);
diff --git a/src/components/Form/src/components/RadioButtonGroup.vue b/src/components/Form/src/components/RadioButtonGroup.vue
new file mode 100644
index 00000000..5585a623
--- /dev/null
+++ b/src/components/Form/src/components/RadioButtonGroup.vue
@@ -0,0 +1,61 @@
+
+
+
+ {{ item.label }}
+
+
+
+
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 6e2814e0..e2bae6ad 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -7,6 +7,10 @@ import { TableActionType } from '../../../Table/src/types/table';
export type FieldMapToTime = [string, [string, string], string?][];
+export type Rule = RuleObject & {
+ trigger?: 'blur' | 'change' | ['change', 'blur'];
+};
+
export interface RenderCallbackParams {
schema: FormSchema;
values: any;
@@ -98,7 +102,10 @@ export interface FormProps {
export interface FormSchema {
// 字段名
field: string;
+ // 内部值更改触发的事件名,默认 change
changeEvent?: string;
+ // v-model绑定的变量名 默认 value
+ valueField?: string;
// 标签名
label: string;
// 文本右侧帮助文本
@@ -113,13 +120,18 @@ export interface FormSchema {
component: ComponentType;
// 组件参数
componentProps?:
- | ((opt: { schema: FormSchema; tableAction: TableActionType; formModel: any }) => any)
+ | ((opt: {
+ schema: FormSchema;
+ tableAction: TableActionType;
+ formActionType: FormActionType;
+ formModel: any;
+ }) => any)
| object;
// 必填
required?: boolean;
// 校验规则
- rules?: RuleObject[];
+ rules?: Rule[];
// 校验信息是否加入label
rulesMessageJoinLabel?: boolean;
@@ -146,7 +158,11 @@ export interface FormSchema {
// 渲染 col内容,需要外层包裹 form-item
renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
- renderComponentContent?: (renderCallbackParams: RenderCallbackParams) => any;
+ renderComponentContent?:
+ | ((renderCallbackParams: RenderCallbackParams) => any)
+ | VNode
+ | VNode[]
+ | string;
// 自定义slot, 在 from-item内
slot?: string;
@@ -156,7 +172,7 @@ export interface FormSchema {
dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
- dynamicRules?: (renderCallbackParams: RenderCallbackParams) => RuleObject[];
+ dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
}
export interface HelpComponentProps {
maxWidth: string;
diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts
index 55d7c577..c742beb7 100644
--- a/src/components/Form/src/types/index.ts
+++ b/src/components/Form/src/types/index.ts
@@ -93,8 +93,8 @@ export type ComponentType =
| 'SelectOption'
| 'TreeSelect'
| 'Transfer'
- | 'Radio'
- | 'RadioButton'
+ // | 'Radio'
+ | 'RadioButtonGroup'
| 'RadioGroup'
| 'Checkbox'
| 'CheckboxGroup'
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index e218a3b8..b80118b5 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -87,7 +87,7 @@ export interface GetColumnsParams {
export type SizeType = 'default' | 'middle' | 'small' | 'large';
export interface TableActionType {
- reload: (opt?: FetchParams) => Promise;
+ // reload: (opt?: FetchParams) => Promise;
getSelectRows: () => any[];
clearSelectedRowKeys: () => void;
getSelectRowKeys: () => string[];
diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts
index 5169b2cb..908beeff 100644
--- a/src/router/menus/modules/demo/comp.ts
+++ b/src/router/menus/modules/demo/comp.ts
@@ -38,10 +38,10 @@ const menu: MenuModule = {
path: 'strength-meter',
name: '密码强度组件',
},
- {
- path: 'upload',
- name: '上传组件',
- },
+ // {
+ // path: 'upload',
+ // name: '上传组件',
+ // },
{
path: 'scroll',
name: '滚动组件',
diff --git a/src/router/menus/modules/demo/form.ts b/src/router/menus/modules/demo/form.ts
index 01a8e321..8ac9125b 100644
--- a/src/router/menus/modules/demo/form.ts
+++ b/src/router/menus/modules/demo/form.ts
@@ -4,10 +4,18 @@ const menu: MenuModule = {
menu: {
path: '/form',
name: 'Form',
+ tag: {
+ type: 'warn',
+ dot: true,
+ },
children: [
{
path: 'basic',
name: '基础表单',
+ tag: {
+ type: 'warn',
+ content: 'updated',
+ },
},
{
path: 'useForm',
@@ -24,14 +32,26 @@ const menu: MenuModule = {
{
path: 'ruleForm',
name: '表单校验',
+ tag: {
+ type: 'warn',
+ content: 'updated',
+ },
},
{
path: 'dynamicForm',
name: '动态表单',
+ tag: {
+ type: 'warn',
+ content: 'updated',
+ },
},
{
path: 'customerForm',
name: '自定义组件',
+ tag: {
+ type: 'warn',
+ content: 'updated',
+ },
},
],
},
diff --git a/src/views/demo/form/CustomerForm.vue b/src/views/demo/form/CustomerForm.vue
index 741813af..9e4892e2 100644
--- a/src/views/demo/form/CustomerForm.vue
+++ b/src/views/demo/form/CustomerForm.vue
@@ -1,7 +1,11 @@
@@ -15,7 +19,7 @@
{
field: 'field1',
component: 'Input',
- label: '字段1',
+ label: 'render方式',
colProps: {
span: 8,
},
@@ -33,7 +37,7 @@
{
field: 'field2',
component: 'Input',
- label: '字段2',
+ label: 'render组件slot',
colProps: {
span: 8,
},
@@ -44,6 +48,16 @@
};
},
},
+ {
+ field: 'field3',
+ component: 'Input',
+ label: '自定义Slot',
+ slot: 'f3',
+ colProps: {
+ span: 8,
+ },
+ rules: [{ required: true }],
+ },
];
export default defineComponent({
components: { BasicForm, CollapseContainer },
diff --git a/src/views/demo/form/DynamicForm.vue b/src/views/demo/form/DynamicForm.vue
index 127ec336..c6d424f6 100644
--- a/src/views/demo/form/DynamicForm.vue
+++ b/src/views/demo/form/DynamicForm.vue
@@ -9,6 +9,10 @@
+
+
+
+