@jay.kou/rak-ssr/lib/SchemaForm/cases/group-convention/index.js

A react based UI components for admin system

"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 _jsxRuntime = require("react/jsx-runtime");
/**
 * Group 模式下的约定式表单 Demo
 * 测试内容：
 *  1. 初始值展示：显示用户信息和部门信息
 *  2. 赋值：点击“设置字段值”按钮后更新显示
 *  3. 重置：点击“重置表单”后恢复初始值
 *  4. 提交：点击“提交表单”时返回表单内嵌结构以及经过约定式转换后的数据
 */var GroupConventionDemo = function GroupConventionDemo() {
  var formRef = (0, _react.useRef)();

  // 表单提交处理，将提交值显示于页面下方
  var handleFormFinish = function handleFormFinish(values) {
    var resultEle = document.querySelector('[data-testid="form-submit-result"]');
    if (resultEle) {
      resultEle.textContent = JSON.stringify(values, null, 2);
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
      direction: "vertical",
      style: {
        marginBottom: 16
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
        "data-testid": "set-fields-btn",
        onClick: function onClick() {
          var _formRef$current;
          (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setFieldsValue({
            id: '2',
            name: 'Bob',
            deptId: '20',
            deptName: 'IT'
          });
        },
        children: "\u8BBE\u7F6E\u5B57\u6BB5\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\u8868\u5355"
      }), /*#__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\u8868\u5355"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SchemaForm, {
      formRef: formRef,
      onFinish: handleFormFinish,
      initialValues: {
        id: '1',
        name: 'Alice',
        deptId: '10',
        deptName: 'HR'
      },
      columns: [{
        title: '用户信息',
        valueType: 'group',
        // group 模式下，columns 属性定义组内字段
        columns: [{
          title: '姓名',
          dataIndex: 'id,name',
          renderFormItem: function renderFormItem() {
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {});
          }
        }]
      }, {
        title: '部门信息',
        valueType: 'group',
        columns: [{
          title: '部门',
          dataIndex: 'deptId,deptName',
          renderFormItem: function renderFormItem() {
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {
              num: 2
            });
          }
        }]
      }]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "data-testid": "form-submit-result",
      style: {
        marginTop: 16
      }
    })]
  });
};
var _default = exports.default = GroupConventionDemo;