update 大量细节处理

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

@@ -3,6 +3,94 @@ import { Checkbox, Descriptions, Empty, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 import { EMPTY_ID } from 'util/global'
 
+function generateList(data) {
+    data.forEach(item => {
+        if (item.children && item.children.length) {
+            generateList.call(this, item.children)
+        }
+        this.list.push(item)
+    })
+}
+
+function getVisible() {
+    const checked = this.list.filter(item => item.checked)
+    const caseChildren = checked.filter(item => item.visibleParent || item.type != 2)
+    const visibleParents = []
+    // 递归寻找父级
+    const findVisibleParents = (children) => {
+        const parents = []
+        children.forEach(item => {
+            if (item.parentId) {
+                const parent = this.list.find(item => item.id === item.parentId)
+                if (parent) {
+                    parents.push(parent)
+                    visibleParents.push(parent)
+                }
+            }
+        })
+        if (parents.length) {
+            findVisibleParents(parents)
+        }
+    }
+
+    findVisibleParents(caseChildren)
+
+    const checkedIds = checked.map(item => item.id)
+    const visibleParentsIds = visibleParents.map(item => item.id)
+
+    const result = checkedIds
+    visibleParentsIds.forEach(item => {
+        if (!result.includes(item)) {
+            result.push(item)
+        }
+    })
+
+    return result
+}
+
+function renderDescriptions(data) {
+    return data.map(item => {
+        return item.children && item.children.length ? renderItem.call(this, item) : renderCheckbox.call(this, item)
+    })
+}
+
+function renderItem(data) {
+    return (
+        <Descriptions bordered column={1}>
+            <Descriptions.Item
+                label={
+                    <Checkbox
+                        value={data.id}
+                        checked={data.checked}
+                        indeterminate={data.indeterminate}
+                        onChange={(e) => this.onChange(e, data)}
+                    >{data.title}</Checkbox>
+                }
+            >
+                {renderDescriptions.call(this, data.children)}
+            </Descriptions.Item>
+        </Descriptions>
+    )
+}
+
+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 &&
+                <Tooltip placement="top" title="选中此项才会显示菜单">
+                    <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
+                </Tooltip>
+            }
+        </div>
+    )
+}
+
 export default class AuthorityView extends Component {
 
     state = {
@@ -28,13 +116,13 @@ export default class AuthorityView extends Component {
         }
     }
 
-    async onLoadData() {
+    onLoadData = async () => {
         this.setState({ loading: true })
 
         const res = await this.loadData()
 
         this.list = []
-        this.generateList(res)
+        generateList.call(this, res)
 
         if (this.props.defaultSelectedKeys) {
             this.list.map(item => {
@@ -50,14 +138,14 @@ export default class AuthorityView extends Component {
         })
     }
 
-    onReloadData() {
+    onReloadData = () => {
         this.onLoadData()
     }
 
-    onChange(e, item) {
+    onChange = (e, item) => {
         this.onSelect(e.target.checked, item)
 
-        const visible = this.getVisible()
+        const visible = getVisible.call(this)
 
         if (this.props.onSelect) {
             this.props.onSelect(
@@ -71,7 +159,7 @@ export default class AuthorityView extends Component {
         }
     }
 
-    onSelect(check, item) {
+    onSelect = (check, item) => {
         item.checked = check
         item.indeterminate = false
         if (item.children && item.children.length) {
@@ -86,7 +174,7 @@ export default class AuthorityView extends Component {
         })
     }
 
-    onChangeParent(checked, parentId) {
+    onChangeParent = (checked, parentId) => {
         const parent = this.list.find(p => p.id === parentId)
         if (parent) {
             const checkedCount = parent.children.filter(p => p.checked).length
@@ -108,7 +196,7 @@ export default class AuthorityView extends Component {
         }
     }
 
-    onChangeChildren(checked, children) {
+    onChangeChildren = (checked, children) => {
         children.forEach(p => {
             p.checked = checked
             p.indeterminate = false
@@ -118,101 +206,13 @@ export default class AuthorityView extends Component {
         })
     }
 
-    generateList(data) {
-        data.forEach(item => {
-            if (item.children && item.children.length) {
-                this.generateList(item.children)
-            }
-            this.list.push(item)
-        })
-    }
-
-    getVisible() {
-        const checked = this.list.filter(item => item.checked)
-        const caseChildren = checked.filter(item => item.visibleParent || item.type != 2)
-        const visibleParents = []
-        // 递归寻找父级
-        const findVisibleParents = (children) => {
-            const parents = []
-            children.forEach(item => {
-                if (item.parentId) {
-                    const parent = this.list.find(item => item.id === item.parentId)
-                    if (parent) {
-                        parents.push(parent)
-                        visibleParents.push(parent)
-                    }
-                }
-            })
-            if (parents.length) {
-                findVisibleParents(parents)
-            }
-        }
-
-        findVisibleParents(caseChildren)
-
-        const checkedIds = checked.map(item => item.id)
-        const visibleParentsIds = visibleParents.map(item => item.id)
-
-        const result = checkedIds
-        visibleParentsIds.forEach(item => {
-            if (!result.includes(item)) {
-                result.push(item)
-            }
-        })
-
-        return result
-    }
-
-    renderDescriptions(data) {
-        return data.map(item => {
-            return item.children && item.children.length ? this.renderItem(item) : this.renderCheckbox(item)
-        })
-    }
-
-    renderItem(data) {
-        return (
-            <Descriptions bordered column={1}>
-                <Descriptions.Item
-                    label={
-                        <Checkbox
-                            value={data.id}
-                            checked={data.checked}
-                            indeterminate={data.indeterminate}
-                            onChange={(e) => this.onChange(e, data)}
-                        >{data.title}</Checkbox>
-                    }
-                >
-                    {this.renderDescriptions(data.children)}
-                </Descriptions.Item>
-            </Descriptions>
-        )
-    }
-
-    renderCheckbox(data) {
-        return (
-            <div className="yo-authority-view--checkbox">
-                {
-                    data.visibleParent && data.type == 2 &&
-                    <Tooltip placement="top" title="选中此项才会显示父节点">
-                        <AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
-                    </Tooltip>
-                }
-                <Checkbox
-                    value={data.id}
-                    checked={data.checked}
-                    onChange={(e) => this.onChange(e, data)}
-                >{data.title}</Checkbox>
-            </div>
-        )
-    }
-
     render() {
         return (
             <div className="yo-authority-view">
                 <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                     {
                         !this.state.loading ?
-                            <Descriptions bordered column={1}>
+                            <Descriptions bordered column={1} className="yo-authority-view--container">
                                 {
                                     this.state.dataSource.map(item => {
                                         return (
@@ -226,7 +226,7 @@ export default class AuthorityView extends Component {
                                                     >{item.title}</Checkbox>
                                                 }
                                             >
-                                                {this.renderDescriptions(item.children)}
+                                                {renderDescriptions.call(this, item.children)}
                                             </Descriptions.Item>
                                         )
                                     })