@jay.kou/rak-ssr/lib/SchemaForm/cases/convention-initial-value-triple-nest/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");
/**
 * 三层嵌套的约定式表单示例
 * 演示:
 * 1. 三层嵌套的约定式初始值
 * 2. 多层级联显示
 * 3. 表单操作(设置值/重置/提交)
 */var ConventionTripleNestDemo = function ConventionTripleNestDemo() {
  var formRef = (0, _react.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__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
      direction: "vertical",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.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__*/(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.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__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {});
        }
      },
      // 第二层(依赖第一层)
      {
        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__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {
                  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__*/(0, _jsxRuntime.jsx)(_DisplayComponent.default, {
                        num: 3
                      });
                    }
                  }];
                }
                return [];
              }
            }];
          }
          return [];
        }
      }]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "data-testid": "convention-triple-nest-result"
    })]
  });
};
var _default = exports.default = ConventionTripleNestDemo;