@jay.kou/rak-ssr
Version:
A react based UI components for admin system
120 lines (118 loc) • 4.3 kB
JavaScript
import { Button, Space } from 'antd';
import { useRef } from 'react';
import { SchemaForm } from "../../..";
import DisplayComponent from "../components/DisplayComponent";
/**
* 三层嵌套的约定式表单示例
* 演示:
* 1. 三层嵌套的约定式初始值
* 2. 多层级联显示
* 3. 表单操作(设置值/重置/提交)
*/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ConventionTripleNestDemo = function ConventionTripleNestDemo() {
var formRef = useRef();
/**
* 表单提交处理
*/
var handleFormFinish = function handleFormFinish(values) {
var resultElement = document.querySelector('[data-testid="convention-triple-nest-result"]');
if (resultElement) {
resultElement.textContent = JSON.stringify(values, null, 2);
}
};
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs(Space, {
direction: "vertical",
children: [/*#__PURE__*/_jsx(Button, {
"data-testid": "set-value-btn",
onClick: function onClick() {
var _formRef$current;
return (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.setFieldsValue({
level1Id: '2',
level1Name: 'Level 1-B'
});
},
children: "\u8BBE\u7F6E\u7B2C\u4E00\u5C42\u503C"
}), /*#__PURE__*/_jsx(Button, {
"data-testid": "reset-btn",
onClick: function onClick() {
var _formRef$current2;
return (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.resetFields();
},
children: "\u91CD\u7F6E"
}), /*#__PURE__*/_jsx(Button, {
"data-testid": "submit-btn",
onClick: function onClick() {
var _formRef$current3;
return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.submit();
},
children: "\u63D0\u4EA4"
})]
}), /*#__PURE__*/_jsx(SchemaForm, {
formRef: formRef,
onFinish: handleFormFinish,
initialValues: {
level1Id: '1',
level1Name: 'Level 1-A',
level2Id: '2',
level2Name: 'Level 2-A',
level3Id: '3',
level3Name: 'Level 3-A'
},
columns: [
// 第一层
{
title: '第一层',
dataIndex: 'level1Id,level1Name',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/_jsx(DisplayComponent, {});
}
},
// 第二层(依赖第一层)
{
valueType: 'dependency',
name: ['level1Id,level1Name'],
columns: function columns(values) {
var level1Value = values === null || values === void 0 ? void 0 : values['level1Id,level1Name'];
if ((level1Value === null || level1Value === void 0 ? void 0 : level1Value.value) === '1') {
return [{
title: '第二层',
dataIndex: 'level2Id,level2Name',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/_jsx(DisplayComponent, {
num: 2
});
}
},
// 第三层(依赖第二层)
{
valueType: 'dependency',
name: ['level2Id,level2Name'],
columns: function columns(values) {
var level2Value = values === null || values === void 0 ? void 0 : values['level2Id,level2Name'];
if ((level2Value === null || level2Value === void 0 ? void 0 : level2Value.value) === '2') {
return [{
title: '第三层',
dataIndex: 'level3Id,level3Name',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/_jsx(DisplayComponent, {
num: 3
});
}
}];
}
return [];
}
}];
}
return [];
}
}]
}), /*#__PURE__*/_jsx("div", {
"data-testid": "convention-triple-nest-result"
})]
});
};
export default ConventionTripleNestDemo;