@jay.kou/rak-ssr/es/SchemaForm/cases/form-list-dependency/index.js

A react based UI components for admin system

import { Button, Space } from 'antd';
import { useRef } from 'react';
import { SchemaForm } from "../../..";
import DisplayComponent from "../components/DisplayComponent";
import SimpleComponent from "../components/SimpleComponent";

/**
 * FormList 约定式数据处理演示
 * 测试内容:
 * 1. 初始值展示
 * 2. 约定式赋值
 * 3. 重置操作
 * 4. 提交数据
 */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var FormListDependencyDemo = function FormListDependencyDemo() {
  var formRef = 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__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsxs(Space, {
      style: {
        marginBottom: 16
      },
      children: [/*#__PURE__*/_jsx(Button, {
        "data-testid": "set-value-btn",
        onClick: function onClick() {
          var _formRef$current;
          (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setFieldsValue({
            userList: [{
              userId: '2',
              userName: 'John',
              deptId: '20',
              deptName: 'IT'
            }, {
              userId: '3',
              userName: 'Mike',
              deptId: '30',
              deptName: 'HR'
            }]
          });
        },
        children: "\u8BBE\u7F6E\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,
      grid: true,
      initialValues: {
        userList: [{
          userId: '1',
          userName: 'Alice',
          deptId: '10',
          deptName: 'Dev'
        }]
      },
      columns: [{
        title: '用户列表',
        dataIndex: 'userList',
        valueType: 'formList',
        columns: [{
          valueType: 'group',
          rowProps: {
            gutter: [16, 16]
          },
          columns: [{
            title: '用户',
            dataIndex: 'userName',
            colProps: {
              span: 12
            },
            renderFormItem: function renderFormItem() {
              return /*#__PURE__*/_jsx(SimpleComponent, {
                testid: "user-name"
              });
            }
          }, {
            valueType: 'dependency',
            name: ['userName'],
            columns: function columns(values) {
              console.log('values', values);
              if (values.userName === 'Alice' || values.userName === 'John') {
                return [{
                  title: '部门',
                  dataIndex: 'deptId,deptName',
                  colProps: {
                    span: 12
                  },
                  renderFormItem: function renderFormItem() {
                    return /*#__PURE__*/_jsx(DisplayComponent, {});
                  }
                }];
              }
              return [];
            }
          }]
        }]
      }]
    }), /*#__PURE__*/_jsx("div", {
      "data-testid": "form-result"
    })]
  });
};
export default FormListDependencyDemo;