@jay.kou/rak-ssr
Version:
A react based UI components for admin system
123 lines (121 loc) • 4.31 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _antd = require("antd");
var _react = require("react");
var _ = require("../../..");
var _DisplayComponent = _interopRequireDefault(require("../components/DisplayComponent"));
var _SimpleComponent = _interopRequireDefault(require("../components/SimpleComponent"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* 内嵌模式功能演示
* 测试:
* 1. 内嵌表单的初始值
* 2. 内嵌表单的赋值
* 3. 内嵌表单的约定式数据处理
* 4. 内嵌表单的值获取
*/var EmbedConventionDemo = function EmbedConventionDemo() {
var formRef = (0, _react.useRef)();
/**
* 表单提交处理
*/
var handleFormFinish = function handleFormFinish(values) {
var resultElement = document.querySelector('[data-testid="form-result"]');
if (resultElement) {
resultElement.textContent = JSON.stringify(values, null, 2);
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
"data-testid": "set-value-btn",
onClick: function onClick() {
var _formRef$current;
(_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setFieldsValue({
baseInfo: {
userId: '2',
userName: 'John',
phone: 8
},
business: {
deptId: '2',
deptName: 'IT'
}
});
},
children: "\u8BBE\u7F6E\u503C"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.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__*/(0, _jsxRuntime.jsx)(_antd.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__*/(0, _jsxRuntime.jsxs)(_.ProForm, {
formRef: formRef,
onFinish: handleFormFinish,
initialValues: {
baseInfo: {
userId: '1',
userName: 'Tom',
phone: 4
},
business: {
deptId: '1',
deptName: 'HR'
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
title: "\u57FA\u672C\u4FE1\u606F",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
embed: true,
columns: [{
title: '用户',
dataIndex: 'userId,userName',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {});
}
}, {
title: '手机',
dataIndex: 'phone',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleComponent.default, {
testid: "phone-value"
});
}
}],
valueBaseName: "baseInfo"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
title: "\u4E1A\u52A1\u4FE1\u606F",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
embed: true,
columns: [{
title: '部门',
dataIndex: 'deptId,deptName',
renderFormItem: function renderFormItem() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {
num: 2
});
}
}],
valueBaseName: "business"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "form-result"
})]
});
};
var _default = exports.default = EmbedConventionDemo;