update 大量细节处理

web-react/src/assets/style/lib/authority-view.less

@@ -1,5 +1,10 @@
 @import (reference) '../extend.less';
 .yo-authority-view {
+  &--container {
+    >.ant-descriptions-view {
+      border: 0;
+    }
+  }
   .ant-descriptions-item-label {
     width: 150px;
   }
@@ -11,7 +16,7 @@
   }
   .ant-descriptions-item-content {
     padding: @padding-sm @padding-md;
-    >.yo-authority-view--checkbox {
+    .yo-authority-view--checkbox {
       display: inline-block;
 
       width: 150px;

web-react/src/assets/style/lib/text-color.less

@@ -21,6 +21,9 @@
 .text-warning {
   color: @warning-color;
 }
+.text-gray {
+  color: gray;
+}
 .text-normal {
   color: @normal-color;
 }

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>
                                         )
                                     })

web-react/src/components/icon-selector/index.jsx

@@ -11,7 +11,7 @@ export default class IconSelector extends Component {
         selected: ''
     }
 
-    open(icon) {
+    open = (icon) => {
         if (icon) {
             const activeKey = (icons.find(p => p.icons.includes(icon)) || icons[0]).key
             this.setState({
@@ -24,11 +24,11 @@ export default class IconSelector extends Component {
         }
     }
 
-    close() {
+    close = () => {
         this.setState({ visible: false })
     }
 
-    onSelectIcon(icon) {
+    onSelectIcon = (icon) => {
         if (this.props.onSelect) {
             this.props.onSelect(icon)
         }

web-react/src/components/image/index.jsx

@@ -11,14 +11,14 @@ const getSrc = async (id) => {
     return ''
 }
 
-let id = ''
-
 export default class Image extends Component {
 
     state = {
         src: ''
     }
 
+    id = ''
+
     constructor(props) {
         super(props)
 
@@ -31,15 +31,15 @@ export default class Image extends Component {
     }
 
     componentDidUpdate() {
-        if (id !== this.props.id && this.props.id) {
+        if (this.id !== this.props.id && this.props.id) {
             this.setSrc()
         }
     }
 
     setSrc = async () => {
         if (this.props.id) {
-            id = this.props.id
+            this.id = this.props.id
-            const src = await getSrc(id)
+            const src = await getSrc(this.id)
             this.setState({ src })
         }
     }

web-react/src/components/modal-form/index.jsx

@@ -2,6 +2,50 @@ import React, { Component } from 'react'
 import { Button, Drawer, message as Message, Modal } from 'antd'
 import { cloneDeep, isEqual } from 'lodash'
 
+/**
+     * 渲染对话框
+     * @param {*} props 
+     * @param {*} on 
+     * @param {*} childWithProps 
+     * @returns 
+     */
+function renderModal(props, on, childWithProps) {
+
+    on = {
+        ...on,
+        onCancel: () => this.onClose()
+    }
+
+    return <Modal className="yo-modal-form" {...props} {...on}>
+        {childWithProps}
+    </Modal>
+
+}
+
+/**
+ * 渲染抽屉
+ * @param {*} props 
+ * @param {*} on 
+ * @param {*} childWithProps 
+ * @returns 
+ */
+function renderDrawer(props, on, childWithProps) {
+    on = {
+        ...on,
+        onClose: () => this.onClose()
+    }
+
+    return <Drawer className="yo-drawer-form" {...props} {...on}>
+        <div class="yo-drawer-form--body">
+            {childWithProps}
+        </div>
+        <div className="ant-drawer-footer">
+            <Button onClick={on.onClose}>取消</Button>
+            <Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
+        </div>
+    </Drawer>
+}
+
 export default class ModalForm extends Component {
 
     state = {
@@ -51,7 +95,7 @@ export default class ModalForm extends Component {
      * 打开弹窗
      * @param {*} data 
      */
-    open(data = {}) {
+    open = (data = {}) => {
         this.data = data
         this.setState({ visible: true })
     }
@@ -59,7 +103,7 @@ export default class ModalForm extends Component {
     /**
      * 关闭弹窗
      */
-    close() {
+    close = () => {
         this.setState({ visible: false })
     }
 
@@ -68,7 +112,7 @@ export default class ModalForm extends Component {
      * 对子元素数据进行填充,(如需关闭时对比)之后再获取结构调整后的数据快照
      * @returns 
      */
-    async onCreated() {
+    onCreated = async () => {
         const body = this.childNode.current
         if (!body || !body.fillData) return
 
@@ -84,7 +128,7 @@ export default class ModalForm extends Component {
      * (如需关闭时对比)获取当前数据结构与快照对比
      * @returns 
      */
-    async onClose() {
+    onClose = async () => {
         const body = this.childNode.current
         if (!body) {
             this.close()
@@ -113,7 +157,7 @@ export default class ModalForm extends Component {
      * 校验并获取结构调整后的数据,调用this.action进行操作
      * @returns 
      */
-    async onOk() {
+    onOk = async () => {
         const body = this.childNode.current
         if (!body || !this.action || !body.getData) return
 
@@ -137,50 +181,6 @@ export default class ModalForm extends Component {
         }
     }
 
-    /**
-     * 渲染对话框
-     * @param {*} props 
-     * @param {*} on 
-     * @param {*} childWithProps 
-     * @returns 
-     */
-    renderModal(props, on, childWithProps) {
-
-        on = {
-            ...on,
-            onCancel: () => this.onClose()
-        }
-
-        return <Modal className="yo-modal-form" {...props} {...on}>
-            {childWithProps}
-        </Modal>
-
-    }
-
-    /**
-     * 渲染抽屉
-     * @param {*} props 
-     * @param {*} on 
-     * @param {*} childWithProps 
-     * @returns 
-     */
-    renderDrawer(props, on, childWithProps) {
-        on = {
-            ...on,
-            onClose: () => this.onClose()
-        }
-
-        return <Drawer className="yo-drawer-form" {...props} {...on}>
-            <div class="yo-drawer-form--body">
-                {childWithProps}
-            </div>
-            <div className="ant-drawer-footer">
-                <Button onClick={on.onClose}>取消</Button>
-                <Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
-            </div>
-        </Drawer>
-    }
-
     render() {
 
         const props = {
@@ -206,8 +206,8 @@ export default class ModalForm extends Component {
         )
 
         return this.type === 'modal' ?
-            this.renderModal(props, on, childWithProps)
+            renderModal.call(this, props, on, childWithProps)
             :
-            this.renderDrawer(props, on, childWithProps)
+            renderDrawer.call(this, props, on, childWithProps)
     }
 }

web-react/src/components/query-list/index.jsx

@@ -2,6 +2,39 @@ import React, { Component } from 'react'
 import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
+/**
+    * 渲染查询栏
+    * @returns 
+    */
+function renderQueryBar() {
+
+    const { query, moreQuery } = this.props
+
+    return (
+        <div className="yo-query-bar">
+            <Form
+                layout="inline"
+                ref={this.form}
+                onFinish={(value) => this.onQuery(value)}
+                initialValues={this.props.queryInitialValues}
+            >
+                {query}
+                <Form.Item>
+                    <Button.Group className="mr-xs">
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Tooltip placement="bottom" title="重置查询">
+                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                        </Tooltip>
+                    </Button.Group>
+                    {
+                        moreQuery && <Button>更多查询条件</Button>
+                    }
+                </Form.Item>
+            </Form>
+        </div>
+    )
+}
+
 export default class QueryList extends Component {
 
     state = {
@@ -60,7 +93,7 @@ export default class QueryList extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.props.loadData({
@@ -80,14 +113,14 @@ export default class QueryList extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({ loading: true })
     }
 
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
@@ -96,7 +129,7 @@ export default class QueryList extends Component {
      * 返回表单字段值,加载数据,并且返回到第一页
      * @param {*} values 
      */
-    onQuery(values) {
+    onQuery = (values) => {
         this.query = values
         this.onReloadData(true)
     }
@@ -105,7 +138,7 @@ export default class QueryList extends Component {
      * 重置查询
      * 初始化表单字段值,加载数据,并返回到第一页
      */
-    onResetQuery() {
+    onResetQuery = () => {
         this.form.current.resetFields()
         this.query = {}
         this.onReloadData(true)
@@ -115,7 +148,7 @@ export default class QueryList extends Component {
      * 重新加载表格数据
      * @param {Boolean} resetPage 是否重置页码
      */
-    onReloadData(resetPage = false) {
+    onReloadData = (resetPage = false) => {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
@@ -125,7 +158,7 @@ export default class QueryList extends Component {
         this.onLoadData()
     }
 
-    onListChange(current, pageSize) {
+    onListChange = (current, pageSize) => {
         this.pagination = {
             ...this.pagination,
             current,
@@ -134,39 +167,6 @@ export default class QueryList extends Component {
         this.onLoadData()
     }
 
-    /**
-    * 渲染查询栏
-    * @returns 
-    */
-    renderQueryBar() {
-
-        const { query, moreQuery } = this.props
-
-        return (
-            <div className="yo-query-bar">
-                <Form
-                    layout="inline"
-                    ref={this.form}
-                    onFinish={(value) => this.onQuery(value)}
-                    initialValues={this.props.queryInitialValues}
-                >
-                    {query}
-                    <Form.Item>
-                        <Button.Group className="mr-xs">
-                            <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
-                            <Tooltip placement="bottom" title="重置查询">
-                                <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
-                            </Tooltip>
-                        </Button.Group>
-                        {
-                            moreQuery && <Button>更多查询条件</Button>
-                        }
-                    </Form.Item>
-                </Form>
-            </div>
-        )
-    }
-
     render() {
 
         const props = {
@@ -177,7 +177,7 @@ export default class QueryList extends Component {
 
         return (
             <section>
-                {this.props.query && this.renderQueryBar()}
+                {this.props.query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
                     <div className="yo-action-bar--actions">
                         {this.props.operator}

web-react/src/components/query-table-actions/index.jsx

@@ -1,29 +1,29 @@
 import React, { Component } from 'react'
 import { Divider } from 'antd'
 
+function renderActions() {
+    const { children } = this.props
+    const actions = []
+
+    Array.isArray(children) ? children
+        .filter(action => action)
+        .forEach((action, i) => {
+            actions.push(action)
+            if (i < this.props.children.length - 1) {
+                actions.push(<Divider type="vertical" key={i} />)
+            }
+        }) : (actions.push(children))
+
+    return actions
+}
+
 export default class QueryTableActions extends Component {
 
-    renderActions() {
-        const { children } = this.props
-        const actions = []
-
-        Array.isArray(children) ? children
-            .filter(action => action)
-            .forEach((action, i) => {
-                actions.push(action)
-                if (i < this.props.children.length - 1) {
-                    actions.push(<Divider type="vertical" key={i} />)
-                }
-            }) : (actions.push(children))
-
-        return actions
-    }
-
     render() {
         return (
             <div className="yo-table-actions">
                 <div className="yo-table-actions--inner">
-                    {this.renderActions()}
+                    {renderActions.call(this)}
                 </div>
             </div>
         )

web-react/src/components/query-table/index.jsx

@@ -15,6 +15,43 @@ const clearChildren = (data) => {
     return data
 }
 
+/**
+     * 渲染查询栏
+     * @returns 
+     */
+function renderQueryBar() {
+
+    const { query, moreQuery } = this.props
+
+    return (
+        <div className="yo-query-bar">
+            <Form
+                layout="inline"
+                ref={this.form}
+                onFinish={(value) => this.onQuery(value)}
+                initialValues={this.props.queryInitialValues}
+            >
+                {query}
+                <Form.Item>
+                    <Button.Group className="mr-xs">
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Tooltip placement="bottom" title="重置查询">
+                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                        </Tooltip>
+                    </Button.Group>
+                    {
+                        moreQuery && <Button>更多查询条件</Button>
+                    }
+                </Form.Item>
+            </Form>
+        </div>
+    )
+}
+
+function renderTable(props, on) {
+    return <Table className="yo-table" {...props} {...on} />
+}
+
 export default class QueryTable extends Component {
 
     state = {
@@ -84,7 +121,7 @@ export default class QueryTable extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.loadData({
@@ -114,7 +151,7 @@ export default class QueryTable extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({
             loading: {
                 indicator: <AntIcon type="loading" />
@@ -125,7 +162,7 @@ export default class QueryTable extends Component {
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
@@ -134,7 +171,7 @@ export default class QueryTable extends Component {
      * 返回表单字段值,加载数据,并且返回到第一页
      * @param {*} values 
      */
-    onQuery(values) {
+    onQuery = (values) => {
         this.query = values
         this.onReloadData(true)
     }
@@ -143,7 +180,7 @@ export default class QueryTable extends Component {
      * 重置查询
      * 初始化表单字段值,加载数据,并返回到第一页
      */
-    onResetQuery() {
+    onResetQuery = () => {
         this.form.current.resetFields()
         this.query = {
             ...this.props.queryInitialValues
@@ -155,7 +192,7 @@ export default class QueryTable extends Component {
      * 重新加载表格数据
      * @param {Boolean} resetPage 是否重置页码
      */
-    onReloadData(resetPage = false) {
+    onReloadData = (resetPage = false) => {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
@@ -171,7 +208,7 @@ export default class QueryTable extends Component {
      * @param {*} filters 
      * @param {*} sorter 
      */
-    onTableChange(pagination, filters, sorter) {
+    onTableChange = (pagination, filters, sorter) => {
         this.pagination = {
             ...pagination,
             showTotal: (total) => `总共${total}条数据`
@@ -183,7 +220,7 @@ export default class QueryTable extends Component {
         this.onLoadData()
     }
 
-    onAddRow(record = {}) {
+    onAddRow = (record = {}) => {
         let { dataSource } = this.state
         if (!dataSource.find(item => !item.id)) {
             dataSource = [...dataSource, record]
@@ -195,43 +232,6 @@ export default class QueryTable extends Component {
         return false
     }
 
-    /**
-     * 渲染查询栏
-     * @returns 
-     */
-    renderQueryBar() {
-
-        const { query, moreQuery } = this.props
-
-        return (
-            <div className="yo-query-bar">
-                <Form
-                    layout="inline"
-                    ref={this.form}
-                    onFinish={(value) => this.onQuery(value)}
-                    initialValues={this.props.queryInitialValues}
-                >
-                    {query}
-                    <Form.Item>
-                        <Button.Group className="mr-xs">
-                            <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
-                            <Tooltip placement="bottom" title="重置查询">
-                                <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
-                            </Tooltip>
-                        </Button.Group>
-                        {
-                            moreQuery && <Button>更多查询条件</Button>
-                        }
-                    </Form.Item>
-                </Form>
-            </div>
-        )
-    }
-
-    renderTable(props, on) {
-        return <Table className="yo-table" {...props} {...on} />
-    }
-
     render() {
 
         const { loading, dataSource } = this.state
@@ -256,7 +256,7 @@ export default class QueryTable extends Component {
 
         return (
             <section>
-                {query && this.renderQueryBar()}
+                {query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
                     <div className="yo-action-bar--actions">
                         {operator}
@@ -272,10 +272,10 @@ export default class QueryTable extends Component {
                 {
                     this.props.editable ?
                         <Form ref={this.props.form}>
-                            {this.renderTable(props, on)}
+                            {renderTable.call(this, props, on)}
                         </Form>
                         :
-                        this.renderTable(props, on)
+                        renderTable.call(this, props, on)
                 }
             </section>
         )

web-react/src/components/query-tree-layout/index.jsx

@@ -2,6 +2,94 @@ import React, { Component } from 'react'
 import { Breadcrumb, Empty, Input, Layout, Spin, Tooltip, Tree } from 'antd'
 import { AntIcon, Container } from 'components'
 
+function generateKey(data, level) {
+    const n = level || [0]
+    n.push(0)
+    data.forEach((p, i) => {
+        n[n.length - 1] = i
+        p.key = n.join('-')
+        p.scopedSlots = { title: 'title' }
+        if (p[this.replaceFields.children]) {
+            generateKey.call(this, p[this.replaceFields.children], Object.assign([], n))
+        }
+    })
+    return data
+}
+
+function generateList(data) {
+    // 这里获取不到Key
+    for (let i = 0; i < data.length; i++) {
+        const { key } = data[i]
+        this.list.push({
+            key,
+            [this.replaceFields.value]: data[i][this.replaceFields.value],
+            [this.replaceFields.title]: data[i][this.replaceFields.title]
+        })
+        if (data[i][this.replaceFields.children]) {
+            generateList.call(this, data[i][this.replaceFields.children])
+        }
+    }
+}
+
+function getParentKey(key, tree) {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i]
+        if (node[this.replaceFields.children]) {
+            if (node[this.replaceFields.children].some(item => item.key === key)) {
+                parentKey = node.key
+            } else if (getParentKey.call(this, key, node[this.replaceFields.children])) {
+                parentKey = getParentKey.call(this, key, node[this.replaceFields.children])
+            }
+        }
+    }
+    return parentKey;
+}
+
+function renderTitle(nodeData) {
+    const title = nodeData[this.replaceFields.title]
+    if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
+        return <>
+            {title.substr(0, title.indexOf(this.state.searchValue))}
+            <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
+            {title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
+        </>
+    }
+    return <>{title}</>
+}
+
+function renderBreadcrumbItem() {
+
+    const path = ['顶级']
+
+    const findPath = (data, level) => {
+        level = level || 1
+        for (let i = 0; i < data.length; i++) {
+            const item = data[i]
+
+            path[level] = item[this.replaceFields.title]
+
+            if (item[this.replaceFields.value] === this.state.selectedKey) {
+                path.length = level + 1
+                return true
+            }
+
+            if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
+                const found = findPath(item[this.replaceFields.children], level + 1)
+                if (found) {
+                    return true
+                }
+            }
+        }
+    }
+
+    if (this.state.selectedKey) {
+        findPath(this.state.dataSource)
+    }
+
+    return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
+}
+
 export default class QueryTreeLayout extends Component {
 
     state = {
@@ -49,13 +137,13 @@ export default class QueryTreeLayout extends Component {
      * 加载数据
      * 调用外部传入的loadData函数,可在loadData中自行改变参数
      */
-    async onLoadData() {
+    onLoadData = async () => {
         this.onLoading()
 
         const res = await this.props.loadData()
-        const data = this.generateKey(res)
+        const data = generateKey.call(this, res)
         this.list = []
-        this.generateList(data)
+        generateList.call(this, data)
 
         let expandedKeys = []
         if (this.defaultExpanded) {
@@ -71,7 +159,7 @@ export default class QueryTreeLayout extends Component {
     /**
      * 数据开始加载
      */
-    onLoading() {
+    onLoading = () => {
         this.setState({
             loading: {
                 indicator: <AntIcon type="loading" />
@@ -82,22 +170,22 @@ export default class QueryTreeLayout extends Component {
     /**
      * 数据加载完成
      */
-    onLoaded() {
+    onLoaded = () => {
         this.setState({ loading: false })
     }
 
-    onReloadData() {
+    onReloadData = () => {
         this.onLoadData()
     }
 
-    onExpand(expandedKeys) {
+    onExpand = (expandedKeys) => {
         this.setState({
             expandedKeys,
             autoExpandParent: false
         })
     }
 
-    onSelect(selectedKeys) {
+    onSelect = (selectedKeys) => {
         const selectedIds = []
         selectedKeys.forEach(p => {
             const data = this.list.find(m => m.key === p)
@@ -111,11 +199,11 @@ export default class QueryTreeLayout extends Component {
         }
     }
 
-    onSearch(value) {
+    onSearch = (value) => {
         const expandedKeys = this.list
             .map(p => {
                 if (p[this.replaceFields.title].indexOf(value) > -1) {
-                    return this.getParentKey(p.key, this.state.dataSource)
+                    return getParentKey.call(this, p.key, this.state.dataSource)
                 }
                 return null
             })
@@ -128,94 +216,6 @@ export default class QueryTreeLayout extends Component {
         })
     }
 
-    generateKey(data, level) {
-        const n = level || [0]
-        n.push(0)
-        data.forEach((p, i) => {
-            n[n.length - 1] = i
-            p.key = n.join('-')
-            p.scopedSlots = { title: 'title' }
-            if (p[this.replaceFields.children]) {
-                this.generateKey(p[this.replaceFields.children], Object.assign([], n))
-            }
-        })
-        return data
-    }
-
-    generateList(data) {
-        // 这里获取不到Key
-        for (let i = 0; i < data.length; i++) {
-            const { key } = data[i]
-            this.list.push({
-                key,
-                [this.replaceFields.value]: data[i][this.replaceFields.value],
-                [this.replaceFields.title]: data[i][this.replaceFields.title]
-            })
-            if (data[i][this.replaceFields.children]) {
-                this.generateList(data[i][this.replaceFields.children])
-            }
-        }
-    }
-
-    getParentKey(key, tree) {
-        let parentKey;
-        for (let i = 0; i < tree.length; i++) {
-            const node = tree[i]
-            if (node[this.replaceFields.children]) {
-                if (node[this.replaceFields.children].some(item => item.key === key)) {
-                    parentKey = node.key
-                } else if (this.getParentKey(key, node[this.replaceFields.children])) {
-                    parentKey = this.getParentKey(key, node[this.replaceFields.children])
-                }
-            }
-        }
-        return parentKey;
-    }
-
-    titleRender(nodeData) {
-        const title = nodeData[this.replaceFields.title]
-        if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
-            return <>
-                {title.substr(0, title.indexOf(this.state.searchValue))}
-                <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
-                {title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
-            </>
-        }
-        return <>{title}</>
-    }
-
-    renderBreadcrumbItem() {
-
-        const path = ['顶级']
-
-        const findPath = (data, level) => {
-            level = level || 1
-            for (let i = 0; i < data.length; i++) {
-                const item = data[i]
-
-                path[level] = item[this.replaceFields.title]
-
-                if (item[this.replaceFields.value] === this.state.selectedKey) {
-                    path.length = level + 1
-                    return true
-                }
-
-                if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
-                    const found = findPath(item[this.replaceFields.children], level + 1)
-                    if (found) {
-                        return true
-                    }
-                }
-            }
-        }
-
-        if (this.state.selectedKey) {
-            findPath(this.state.dataSource)
-        }
-
-        return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
-    }
-
     render() {
 
         const { dataSource, expandedKeys, autoExpandParent } = this.state
@@ -268,7 +268,7 @@ export default class QueryTreeLayout extends Component {
                                     <Tree
                                         {...props}
                                         {...on}
-                                        titleRender={(nodeData) => this.titleRender(nodeData)}
+                                        titleRender={(nodeData) => renderTitle.call(this, nodeData)}
                                     />
                             }
                         </Spin>
@@ -277,7 +277,7 @@ export default class QueryTreeLayout extends Component {
                 <Layout.Content>
                     <Container mode="fluid">
                         <Breadcrumb className="mt-md mb-md">
-                            {this.renderBreadcrumbItem()}
+                            {renderBreadcrumbItem.call(this)}
                         </Breadcrumb>
                     </Container>
                     {this.props.children}

web-react/src/pages/system/app/index.jsx

@@ -133,12 +133,13 @@ export default class index extends Component {
      * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
      */
     componentDidMount() {
-        this.table.current.onLoading()
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
         getDictData('common_status').then(res => {
             this.setState({
                 codes: res
             }, () => {
-                this.table.current.onLoadData()
+                onLoadData()
             })
         })
     }
@@ -194,13 +195,18 @@ export default class index extends Component {
      * @param {*} successMessage 
      */
     async onAction(action, successMessage) {
-        this.table.current.onLoading()
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
         try {
-            await action
+            if (action) {
-            Message.success(successMessage)
+                await action
-            this.table.current.onReloadData()
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
         } catch {
-            this.table.current.onLoaded()
+            onLoaded()
         }
     }
 
@@ -245,31 +251,37 @@ export default class index extends Component {
                             </Auth>
                         }
                         operator={
-                            <Button
+                            <Auth auth="sysApp:add">
-                                icon={<AntIcon type="plus" />}
+                                <Button
-                                onClick={() => this.onOpen(this.addForm)}
+                                    icon={<AntIcon type="plus" />}
-                            >新增{name}</Button>
+                                    onClick={() => this.onOpen(this.addForm)}
+                                >新增{name}</Button>
+                            </Auth>
                         }
                     />
                 </Card>
 
-                <ModalForm
+                <Auth auth="sysApp:add">
-                    title={`新增${name}`}
+                    <ModalForm
-                    action={apiAction.add}
+                        title={`新增${name}`}
-                    ref={this.addForm}
+                        action={apiAction.add}
-                    onSuccess={() => this.table.current.onReloadData()}
+                        ref={this.addForm}
-                >
+                        onSuccess={() => this.table.current.onReloadData()}
-                    <FormBody />
+                    >
-                </ModalForm>
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
 
-                <ModalForm
+                <Auth auth="sysApp:edit">
-                    title={`编辑${name}`}
+                    <ModalForm
-                    action={apiAction.edit}
+                        title={`编辑${name}`}
-                    ref={this.editForm}
+                        action={apiAction.edit}
-                    onSuccess={() => this.table.current.onReloadData()}
+                        ref={this.editForm}
-                >
+                        onSuccess={() => this.table.current.onReloadData()}
-                    <FormBody />
+                    >
-                </ModalForm>
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
             </Container>
         )
     }

web-react/src/views/main/_layout/content/index.jsx

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
-import { Layout, Tabs, Menu, Dropdown } from 'antd'
+import { Divider, Layout, Tabs, Menu, Dropdown } from 'antd'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import AntIcon from 'components/ant-icon'
+import { Container } from 'components'
 
 NProgress.configure({ parent: '.ant-layout-content > .yo-tab-external-mount > .yo-tab-external-mount-content' });
 
@@ -52,7 +53,17 @@ class ComponentDynamic extends Component {
 
     render() {
         if (this.state.component) {
-            return <this.state.component key={this.state.key} {...this.props} />
+            return <this.state.component
+                key={this.state.key}
+                {...this.props}
+                supportInfo={
+                    <Container>
+                        <Divider>
+                            <span className="h6 text-gray">技术支持: 宽易科技</span>
+                        </Divider>
+                    </Container>
+                }
+            />
         }
         return <></>
     }