feat: 增加ProForm相关示例

src/pages/Role/System/index.tsx

@@ -1,6 +1,6 @@
 import Icon from '@/components/IconPark'
 import { DownOutlined, PlusOutlined } from '@ant-design/icons'
-import ProForm, { ProFormSwitch } from '@ant-design/pro-form'
+import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
 import { Button, Col, Row, Table, Tabs, List, Popover } from 'antd'
 import React from 'react'
 
@@ -39,6 +39,7 @@ const index = () => {
       key: 'address'
     }
   ]
+
   const content = (
     <div className="popoverList">
       <ul>
@@ -86,8 +87,14 @@ const index = () => {
                 <Table dataSource={dataSource} columns={columns} />
               </TabPane>
               <TabPane tab="角色权限" key="2">
-                <ProForm layout="horizontal">
+                <ProForm
+                  layout="horizontal"
+                  onFinish={values => {
+                    console.log(values)
+                  }}
+                  initialValues={{ staff: ['1', '2'] }}>
                   <ProFormSwitch
+                    name="showHome"
                     label={
                       <span className="flex items-center">
                         <Icon type="home" className="mr-1" className="flex items-baseline mr-1" />
@@ -95,6 +102,90 @@ const index = () => {
                       </span>
                     }
                   />
+
+                  <ProFormSwitch
+                    name="showAuth"
+                    label={
+                      <span className="flex items-center">
+                        <Icon
+                          type="every-user"
+                          className="mr-1"
+                          className="flex items-baseline mr-1"
+                        />
+                        角色权限管理
+                      </span>
+                    }
+                  />
+                  <ProFormDependency name={['showAuth']}>
+                    {({ showAuth }) => (
+                      <ProFormCheckbox.Group
+                        wrapperCol={{ offset: 1 }}
+                        name="staff"
+                        options={[
+                          { value: '1', label: '系统管理', disabled: !showAuth },
+                          { value: '2', label: '客户', disabled: !showAuth },
+                          { value: '3', label: '产品', disabled: !showAuth },
+                          { value: '4', label: '开票合同', disabled: !showAuth },
+                          { value: '5', label: '考勤', disabled: !showAuth },
+                          { value: '6', label: '人资', disabled: !showAuth },
+                          { value: '7', label: '财务费用', disabled: !showAuth }
+                        ]}
+                      />
+                    )}
+                  </ProFormDependency>
+                  <ProFormSwitch
+                    name="showAudit"
+                    label={
+                      <span className="flex items-center">
+                        <Icon
+                          type="inspection"
+                          className="mr-1"
+                          className="flex items-baseline mr-1"
+                        />
+                        审批流程
+                      </span>
+                    }
+                  />
+                  <ProFormDependency name={['showAudit']}>
+                    {({ showAudit }) => (
+                      <ProFormCheckbox.Group
+                        wrapperCol={{ offset: 1 }}
+                        name="audit"
+                        options={[
+                          { value: '1', label: '流程角色', disabled: !showAudit },
+                          { value: '2', label: '开票合同', disabled: !showAudit },
+                          { value: '3', label: '财务费用', disabled: !showAudit },
+                          { value: '4', label: '人资管理', disabled: !showAudit },
+                          { value: '5', label: '考勤', disabled: !showAudit }
+                        ]}
+                      />
+                    )}
+                  </ProFormDependency>
+                  <ProFormSwitch
+                    name="reset"
+                    label={
+                      <span className="flex items-center">
+                        <Icon
+                          type="association"
+                          className="mr-1"
+                          className="flex items-baseline mr-1"
+                        />
+                        业务参数
+                      </span>
+                    }
+                  />
+                  <ProFormDependency name={['reset']}>
+                    {({ reset }) => (
+                      <ProFormCheckbox.Group
+                        wrapperCol={{ offset: 1 }}
+                        name="audit"
+                        options={[
+                          { value: '1', label: '客户', disabled: !reset },
+                          { value: '2', label: '产品', disabled: !reset }
+                        ]}
+                      />
+                    )}
+                  </ProFormDependency>
                 </ProForm>
               </TabPane>
             </Tabs>