fix 菜单授权选择问题

web-react/src/components/authority-view/index.jsx

@@ -17,11 +17,11 @@ function getVisible() {
     const caseChildren = checked.filter(item => item.visibleParent || item.type != 2)
     const visibleParents = []
     // 递归寻找父级
-    const findVisibleParents = (children) => {
+    const findVisibleParents = children => {
         const parents = []
         children.forEach(item => {
             if (item.parentId) {
-                const parent = this.list.find(item => item.id === item.parentId)
+                const parent = this.list.find(p => p.id === item.parentId)
                 if (parent) {
                     parents.push(parent)
                     visibleParents.push(parent)
@@ -50,7 +50,9 @@ function getVisible() {
 
 function renderDescriptions(data) {
     return data.map(item => {
-        return item.children && item.children.length ? renderItem.call(this, item) : renderCheckbox.call(this, item)
+        return item.children && item.children.length
+            ? renderItem.call(this, item)
+            : renderCheckbox.call(this, item)
     })
 }
 
@@ -63,8 +65,10 @@ function renderItem(data) {
                         value={data.id}
                         checked={data.checked}
                         indeterminate={data.indeterminate}
-                        onChange={(e) => this.onChange(e, data)}
-                    >{data.title}</Checkbox>
+                        onChange={e => this.onChange(e, data)}
+                    >
+                        {data.title}
+                    </Checkbox>
                 }
             >
                 {renderDescriptions.call(this, data.children)}
@@ -76,26 +80,22 @@ function renderItem(data) {
 function renderCheckbox(data) {
     return (
         <div className="yo-authority-view--checkbox">
-            <Checkbox
-                value={data.id}
-                checked={data.checked}
-                onChange={(e) => this.onChange(e, data)}
-            >{data.title}</Checkbox>
-            {
-                data.visibleParent && data.type == 2 &&
+            <Checkbox value={data.id} checked={data.checked} onChange={e => this.onChange(e, data)}>
+                {data.title}
+            </Checkbox>
+            {data.visibleParent && data.type == 2 && (
                 <Tooltip placement="top" title="选中此项才会显示菜单">
                     <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
                 </Tooltip>
-            }
+            )}
         </div>
     )
 }
 
 export default class AuthorityView extends Component {
-
     state = {
         loading: false,
-        dataSource: []
+        dataSource: [],
     }
 
     list = []
@@ -104,7 +104,8 @@ export default class AuthorityView extends Component {
         super(props)
 
         this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}
     }
 
     /**
@@ -126,7 +127,10 @@ export default class AuthorityView extends Component {
 
         if (this.props.defaultSelectedKeys) {
             this.list.map(item => {
-                if (this.props.defaultSelectedKeys.includes(item.id) && (!item.children || !item.children.length)) {
+                if (
+                    this.props.defaultSelectedKeys.includes(item.id) &&
+                    (!item.children || !item.children.length)
+                ) {
                     this.onSelect(true, item)
                 }
             })
@@ -134,8 +138,10 @@ export default class AuthorityView extends Component {
 
         this.setState({
             dataSource: res,
-            loading: false
+            loading: false,
         })
+
+        this.onChange()
     }
 
     onReloadData = () => {
@@ -143,16 +149,18 @@ export default class AuthorityView extends Component {
     }
 
     onChange = (e, item) => {
-        this.onSelect(e.target.checked, item)
+        if (e && item) {
+            this.onSelect(e.target.checked, item)
+        }
 
         const visible = getVisible.call(this)
 
         if (this.props.onSelect) {
             this.props.onSelect(
                 // 返回所有选中
-                this.list.filter(item => item.checked).map(item => item.id),
+                this.list.filter(p => p.checked).map(p => p.id),
                 // 返回所有选中和半选
-                this.list.filter(item => item.checked || item.indeterminate).map(item => item.id),
+                this.list.filter(p => p.checked || p.indeterminate).map(p => p.id),
                 // 返回所有选中和半选,但是不返回没有子级选中visibleParent的半选
                 visible
             )
@@ -170,7 +178,7 @@ export default class AuthorityView extends Component {
         }
 
         this.setState({
-            dataSource: this.list.filter(item => item.parentId === EMPTY_ID)
+            dataSource: this.list.filter(p => p.parentId === EMPTY_ID),
         })
     }
 
@@ -210,31 +218,30 @@ export default class AuthorityView extends Component {
         return (
             <div className="yo-authority-view">
                 <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
-                    {
-                        !this.state.loading ?
-                            <Descriptions bordered column={1} className="yo-authority-view--container">
-                                {
-                                    this.state.dataSource.map(item => {
-                                        return (
-                                            <Descriptions.Item
-                                                label={
-                                                    <Checkbox
-                                                        value={item.id}
-                                                        checked={item.checked}
-                                                        indeterminate={item.indeterminate}
-                                                        onChange={(e) => this.onChange(e, item)}
-                                                    >{item.title}</Checkbox>
-                                                }
+                    {!this.state.loading ? (
+                        <Descriptions bordered column={1} className="yo-authority-view--container">
+                            {this.state.dataSource.map(item => {
+                                return (
+                                    <Descriptions.Item
+                                        label={
+                                            <Checkbox
+                                                value={item.id}
+                                                checked={item.checked}
+                                                indeterminate={item.indeterminate}
+                                                onChange={e => this.onChange(e, item)}
                                             >
-                                                {renderDescriptions.call(this, item.children)}
-                                            </Descriptions.Item>
-                                        )
-                                    })
-                                }
-                            </Descriptions>
-                            :
-                            <Empty className="mt-lg mb-lg" />
-                    }
+                                                {item.title}
+                                            </Checkbox>
+                                        }
+                                    >
+                                        {renderDescriptions.call(this, item.children)}
+                                    </Descriptions.Item>
+                                )
+                            })}
+                        </Descriptions>
+                    ) : (
+                        <Empty className="mt-lg mb-lg" />
+                    )}
                 </Spin>
             </div>
         )