fix: 优化后台角色权限switch开关与表单项的联动

src/pages/Role/Product/index.tsx

@@ -18,6 +18,7 @@ import ConnectModal from '../System/components/ConnectModal'
 import FormItem from 'antd/lib/form/FormItem'
 import { permData } from '../Customer'
 import styles from './index.less'
+import classNames from 'classnames'
 
 const Product = () => {
   const { TabPane } = Tabs
@@ -62,6 +63,22 @@ const Product = () => {
         enterprise: [],
         ...formatPermission('init', result.permission)
       }
+      // 特殊处理云版switch
+      if (values.showBuilding || values.showCuring || values.showHighway || values.showGs) {
+        values.showCloud = true
+        delete values.showBuilding
+        delete values.showCuring
+        delete values.showHighway
+        delete values.showGs
+      }
+
+      // 特殊处理大司空2.0
+      if (values.showPersonal || values.showEnterprise) {
+        values.showRoad = true
+        delete values.showPersonal
+        delete values.showEnterprise
+      }
+
       setState({
         ...state,
         rolePermission: values,
@@ -136,8 +153,7 @@ const Product = () => {
           title="确认删除吗？"
           okText="确认"
           cancelText="取消"
-          onConfirm={() => tryDeleteStaff({ id: state.id, staffId: record.staffId })}
-        >
+          onConfirm={() => tryDeleteStaff({ id: state.id, staffId: record.staffId })}>
           <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
             <Delete />
           </div>
@@ -165,8 +181,7 @@ const Product = () => {
           <Tabs
             defaultActiveKey="1"
             type="card"
-            onChange={key => setState({ ...state, activeKey: key })}
-          >
+            onChange={key => setState({ ...state, activeKey: key })}>
             <TabPane tab="员工列表" key="1">
               <Table<API.RoleStaffListItem>
                 dataSource={state.roleStaff}
@@ -187,8 +202,7 @@ const Product = () => {
                         id: state.id
                       })
                       message.success('设置成功')
-                    }}
-                  >
+                    }}>
                     <ProFormSwitch
                       fieldProps={{
                         onChange(checked) {
@@ -200,11 +214,7 @@ const Product = () => {
                       name="showLockstore"
                       label={
                         <span className="flex items-center">
-                          <DataLock
-                            theme="outline"
-                            className="mr-1"
-                            className="flex items-baseline mr-1"
-                          />
+                          <DataLock theme="outline" className="flex items-baseline mr-1" />
                           软件锁-公共锁库
                         </span>
                       }
@@ -237,7 +247,7 @@ const Product = () => {
                       name="showCloud"
                       label={<span className="flex items-center">云版管理</span>}
                     />
-                    <div className={['ml-6', styles.laberContent].join(' ')}>
+                    <div className={classNames('ml-6', styles.laberContent)}>
                       <ProFormDependency name={['showCloud']}>
                         {({ showCloud }) => (
                           <>
@@ -323,8 +333,7 @@ const Product = () => {
                     }
                     message.success('设置成功')
                     return true
-                  }}
-                >
+                  }}>
                   <FormItem name="access" label="客户模块可见" required>
                     <Radio.Group>
                       <Space direction="vertical">

src/pages/Role/Statistic/index.tsx

@@ -60,6 +60,24 @@ const Statistic = () => {
         business: [],
         ...formatPermission('init', result.permission)
       }
+
+      if (
+        values['showSoftware-usage'] ||
+        values['showInvoice-aggregate'] ||
+        values['showInvoice-trends'] ||
+        values['showInvoice-receivables']
+      ) {
+        values.showProduct = true
+        delete values['showSoftware-usage']
+        delete values['showInvoice-aggregate']
+        delete values['showInvoice-trends']
+        delete values['showInvoice-receivables']
+      }
+
+      if (values['showCustomer-additions']) {
+        values.showCustomer = true
+        delete values['showCustomer-additions']
+      }
       setState({
         ...state,
         rolePermission: values,
@@ -209,40 +227,28 @@ const Statistic = () => {
                     <div className="ml-25px">
                       <ProFormDependency name={['showProduct']}>
                         {({ showProduct }) => (
-                          <ProFormCheckbox.Group
-                            name="software-usage"
-                            label="软件锁用量"
-                            options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
-                          />
-                        )}
-                      </ProFormDependency>
-
-                      <ProFormDependency name={['showProduct']}>
-                        {({ showProduct }) => (
-                          <ProFormCheckbox.Group
-                            name="invoice-aggregate"
-                            label="发票收款入账汇总"
-                            options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
-                          />
-                        )}
-                      </ProFormDependency>
-                      <ProFormDependency name={['showProduct']}>
-                        {({ showProduct }) => (
-                          <ProFormCheckbox.Group
-                            name="invoice-trends"
-                            label="发票收款入账趋势"
-                            options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
-                          />
-                        )}
-                      </ProFormDependency>
-
-                      <ProFormDependency name={['showProduct']}>
-                        {({ showProduct }) => (
-                          <ProFormCheckbox.Group
-                            name="invoice-receivables"
-                            label="应收款统计"
-                            options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
-                          />
+                          <>
+                            <ProFormCheckbox.Group
+                              name="software-usage"
+                              label="软件锁用量"
+                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                            />
+                            <ProFormCheckbox.Group
+                              name="invoice-aggregate"
+                              label="发票收款入账汇总"
+                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                            />
+                            <ProFormCheckbox.Group
+                              name="invoice-trends"
+                              label="发票收款入账趋势"
+                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                            />
+                            <ProFormCheckbox.Group
+                              name="invoice-receivables"
+                              label="应收款统计"
+                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
+                            />
+                          </>
                         )}
                       </ProFormDependency>
                     </div>

src/pages/Role/System/components/RoleMenu/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { PlusOutlined, DownOutlined } from '@ant-design/icons'
-import { Button, message, Popconfirm, Popover, Input } from 'antd'
+import { Button, message, Popconfirm, Popover, Input, Switch } from 'antd'
 import { useRequest } from 'umi'
 import {
   createRoleWithMenuId,
@@ -9,6 +9,7 @@ import {
   updateStaff
 } from '@/services/user/api'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import classNames from 'classnames'
 
 type RoleMenuProps = {
   menuId: string
@@ -91,6 +92,7 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
         <ModalForm<{ name: string; backstageMenuId: string }>
           title="添加新的角色"
           width="500px"
+          layout="horizontal"
           trigger={
             <Button size="small" type="primary" ghost>
               <PlusOutlined />
@@ -104,7 +106,13 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
           }}
           initialValues={{ backstageMenuId: menuId }}>
           <ProFormText name="backstageMenuId" hidden />
-          <ProFormText name="name" rules={[{ required: true, message: '请输入角色名' }]} />
+          <ProFormText
+            name="name"
+            label="名称"
+            placeholder="请输入角色名称"
+            rules={[{ required: true, message: '请输入角色名' }]}
+          />
+          <Switch onChange={checked => {}} />
         </ModalForm>
       </div>
       <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
@@ -112,10 +120,9 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
           {menuRoles.map(item => (
             <li
               key={item.id}
-              className={[
-                'flex justify-between items-center py-2 px-5 cursor-pointer',
-                item.id === activeId ? 'scale-up-center' : ''
-              ].join(' ')}
+              className={classNames('flex justify-between items-center py-2 px-5 cursor-pointer', {
+                'scale-up-center': item.id === activeId
+              })}
               onClick={() => handleItemClick(item.id)}>
               <span>{item.name}</span>
               <Popover

src/utils/utils.ts

@@ -20,6 +20,7 @@ export const isAntDesignProOrDev = (): boolean => {
   return isAntDesignPro()
 }
 
+/** 不支持三级菜单的格式化 */
 export const formatPermission = (type: 'init' | 'submit', values: any) => {
   if (type === 'init') {
     const newValues = (values && { ...JSON.parse(values) }) || {}