mode

2022-04-02 16:53:30 +08:00 · 2022-04-02 16:53:30 +08:00 · df074ef4a8
parent c648b5210f
commit df074ef4a8
7 changed files with 86 additions and 36 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1932,6 +1932,21 @@
        }
      }
    },
+    "@react-dnd/asap": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/asap/-/asap-4.0.1.tgz",
+      "integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg=="
+    },
+    "@react-dnd/invariant": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/invariant/-/invariant-3.0.1.tgz",
+      "integrity": "sha512-blqduwV86oiKw2Gr44wbe3pj3Z/OsXirc7ybCv9F/pLAR+Aih8F3rjeJzK0ANgtYKv5lCpkGVoZAeKitKDaD/g=="
+    },
+    "@react-dnd/shallowequal": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/@react-dnd/shallowequal/-/shallowequal-3.0.1.tgz",
+      "integrity": "sha512-XjDVbs3ZU16CO1h5Q3Ew2RPJqmZBDE/EVf1LYp6ePEffs3V/MX9ZbL5bJr8qiK5SbGmUMuDoaFgyKacYz8prRA=="
+    },
    "@rollup/plugin-node-resolve": {
      "version": "7.1.3",
      "resolved": "https://registry.nlark.com/@rollup/plugin-node-resolve/download/@rollup/plugin-node-resolve-7.1.3.tgz",
@ -5543,6 +5558,16 @@
        "path-type": "^4.0.0"
      }
    },
+    "dnd-core": {
+      "version": "15.1.2",
+      "resolved": "https://registry.npmmirror.com/dnd-core/-/dnd-core-15.1.2.tgz",
+      "integrity": "sha512-EOec1LyJUuGRFg0LDa55rSRAUe97uNVKVkUo8iyvzQlcECYTuPblVQfRWXWj1OyPseFIeebWpNmKFy0h6BcF1A==",
+      "requires": {
+        "@react-dnd/asap": "4.0.1",
+        "@react-dnd/invariant": "3.0.1",
+        "redux": "^4.1.2"
+      }
+    },
    "dns-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/dns-equal/download/dns-equal-1.0.0.tgz",
@ -13567,6 +13592,26 @@
        }
      }
    },
+    "react-dnd": {
+      "version": "15.1.2",
+      "resolved": "https://registry.npmmirror.com/react-dnd/-/react-dnd-15.1.2.tgz",
+      "integrity": "sha512-EaSbMD9iFJDY/o48T3c8wn3uWU+2uxfFojhesZN3LhigJoAIvH2iOjxofSA9KbqhAKP6V9P853G6XG8JngKVtA==",
+      "requires": {
+        "@react-dnd/invariant": "3.0.1",
+        "@react-dnd/shallowequal": "3.0.1",
+        "dnd-core": "15.1.2",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "15.1.3",
+      "resolved": "https://registry.npmmirror.com/react-dnd-html5-backend/-/react-dnd-html5-backend-15.1.3.tgz",
+      "integrity": "sha512-HH/8nOEmrrcRGHMqJR91FOwhnLlx5SRLXmsQwZT3IPcBjx88WT+0pWC5A4tDOYDdoooh9k+KMPvWfxooR5TcOA==",
+      "requires": {
+        "dnd-core": "15.1.2"
+      }
+    },
    "react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmmirror.com/react-dom/download/react-dom-17.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Freact-dom%2Fdownload%2Freact-dom-17.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -57,6 +57,8 @@
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
    "react-dom": "^17.0.2",
    "react-flow-renderer": "^10.0.1",
    "react-pdf": "^5.6.0",
--- a/src/components/table.js
+++ b/src/components/table.js
@ -16,7 +16,9 @@ class FeTable extends Component {
      return {
        data: props.data,
        columns: props.columns,
-        total: props.total
+        total: props.total,
+        defaultPageSize: props.defaultPageSize ||10,
+        maxHeight: props.maxHeight || 'auto'
      }
    }
    return null
@ -26,8 +28,8 @@ class FeTable extends Component {
    return this.props.callback(e.target.innerText, value)
  }

-  onChange = e =>{
-    return this.props.pageChange(e)
+  onChange = (current,pageSize) =>{
+    return this.props.pageChange(current,pageSize)
  }

  onShowSizeChange = (current,pageSize) =>{
@ -37,11 +39,11 @@ class FeTable extends Component {
  render() {
    return (
      <React.Fragment>
-        <Table bordered style={{ marginBottom: 20 }} dataSource={this.state.data} columns={this.state.columns} onRow={record => {return {
+        <Table bordered style={{ marginBottom: 20 }} dataSource={this.state.data} columns={this.state.columns} scroll={{y:this.state.maxHeight}} onRow={record => {return {
            onClick: event => this.jumpRow(event, record)
          }
-        }} pagination={{total: this.state.total,onChange:this.onChange.bind(this),showSizeChanger:true,
-          onShowSizeChange:this.onShowSizeChange.bind(this)}}/>
+        }} pagination={{defaultPageSize:this.state.defaultPageSize,total: this.state.total,onChange:this.onChange.bind(this),showSizeChanger:true,
+          onShowSizeChange:this.onShowSizeChange.bind(this),pageSizeOptions:['5','10','15','20']}}/>
      </React.Fragment>
    )
  }
--- a/src/pages/home/branch/dashboard/dashboard.js
+++ b/src/pages/home/branch/dashboard/dashboard.js
@ -204,7 +204,7 @@ class Dashboard extends Component {
        return item.title === value["企业名称"] + '(' + value["企业ID"] + ')' ? false : true
      })
      if (state) {
-        newPanes.push({ title: value["企业名称"] + '(' + value["企业ID"] + ')', content: "/manager/company/details", key: (Number(newPanes[newPanes.length - 1].key) + 1).toString(),id: { cid: value["企业ID"] } });
+        newPanes.push({ title: value["企业名称"] + '(' + value["企业ID"] + ')', content: "/manager/company/details", key: (Number(newPanes[newPanes.length - 1].key) + 1).toString(), id: { cid: value["企业ID"] } });
        store.dispatch(operationAction(newPanes, (newPanes[newPanes.length - 1].key)))
      } else {
        return null
@ -212,8 +212,8 @@ class Dashboard extends Component {
    }
  }

-  pageChange = e =>{
-    api.get("/admin/board/get_new_companies", { page_no: e, page_size: 10 }).then(res => {
+  pageChange = (current, pageSize) => {
+    api.get("/admin/board/get_new_companies", { page_no: current, page_size: pageSize }).then(res => {
      this.setState({
        company: res.result.records,
        total: res.result.total
@ -221,14 +221,14 @@ class Dashboard extends Component {
    })
  }

-  // onShowSizeChange = (current,pageSize) =>{
-  //   api.get("/admin/board/get_new_companies", { page_no: current, page_size: pageSize }).then(res => {
-  //     this.setState({
-  //       company: res.result.records,
-  //       total: res.result.total
-  //     })
-  //   })
-  // }
+  onShowSizeChange = (current, pageSize) => {
+    api.get("/admin/board/get_new_companies", { page_no: current, page_size: pageSize }).then(res => {
+      this.setState({
+        company: res.result.records,
+        total: res.result.total
+      })
+    })
+  }

  render() {
    return (
@ -252,14 +252,14 @@ class Dashboard extends Component {
          </Col>
          <Col span={16}>
            <Card title='服务次数'>
-              <div id='line' style={{ width: '100%', height: '255%' }}></div>
+              <div id='line' style={{ height: '255%' }}></div>
            </Card>
          </Col>
        </Row>
        <Row gutter={32} style={{ paddingBottom: '20px' }}>
          <Col span={8}>
            <Card title='行业分布'>
-              <div id='pie' style={{ width: '100%', height: '300px' }}></div>
+              <div id='pie' style={{  height: '300px' }}></div>
              {
                this.state.industry && this.state.industry.map(item => {
                  return Object.keys(item).map((key, index) => {
@ -270,8 +270,8 @@ class Dashboard extends Component {
            </Card>
          </Col>
          <Col span={16}>
-            <Card title="新增企业信息">
-              <FeTable data={this.state.company} columns={this.state.columns} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)}></FeTable>
+            <Card title="新增企业信息" style={{ height: 575 }}>
+              <FeTable maxHeight={350} defaultPageSize={5} data={this.state.company} columns={this.state.columns} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)} onShowSizeChange={this.onShowSizeChange.bind(this)}></FeTable>
            </Card>
          </Col>
        </Row>
--- a/src/pages/home/branch/manage/company/company.js
+++ b/src/pages/home/branch/manage/company/company.js
@ -61,7 +61,7 @@ class ManageCompany extends Component {
    return (
      <React.Fragment>
        <Search placeholder="检索企业" onSearch={this.onSearch} enterButton style={{ width: 300, marginBottom: 20 }} />
-        <FeTable data={this.state.data} columns={this.state.columns} callback={this.callback.bind(this)}></FeTable>
+        <FeTable data={this.state.data} columns={this.state.columns} callback={this.callback.bind(this)} ></FeTable>
      </React.Fragment>
    )
  }
--- a/src/pages/home/branch/setting/user.js
+++ b/src/pages/home/branch/setting/user.js
@ -30,7 +30,6 @@ class UserSet extends Component {
        this.submit("")
    }

-
    setVisible = () => {
        this.setState({
            visible: true
@ -43,12 +42,12 @@ class UserSet extends Component {
        })
    }

-    submit = (search, sort) => {
+    submit = (search, sort, current, pageSize) => {
        const obj = {
            search: search || {},
            sort: sort || {},
-            page_size: 10,
-            page_no: 1
+            page_size: pageSize || 10,
+            page_no: current || 1
        }
        api.post("/admin/user/list_user", obj)
            .then(res => {
@ -64,7 +63,7 @@ class UserSet extends Component {
                            align: 'center',
                            sorter: item !== 'uid' ? (a, b, c) => { this.sort(c, item, search) } : null,
                            defaultSortOrder: 'descend',
-                            render: item === '状态' ? (record) => <Space><div className='badge' style={{ backgroundColor: record === '正常' ? '#1890ff' : '#ff4d4f' }}></div><span>{record}</span></Space> : item === '角色' ? (record) => <Space><UserOutlined style={{ color: record === '管理员' ? '#1890ff' : record === '分析师' ? '#87d068':record ==='开发者'?'#dfc243': '#3b5999' }} /><span>{record}</span></Space> : null
+                            render: item === '状态' ? (record) => <Space><div className='badge' style={{ backgroundColor: record === '正常' ? '#1890ff' : '#ff4d4f' }}></div><span>{record}</span></Space> : item === '角色' ? (record) => <Space><UserOutlined style={{ color: record === '管理员' ? '#1890ff' : record === '分析师' ? '#87d068' : record === '开发者' ? '#dfc243' : '#3b5999' }} /><span>{record}</span></Space> : null
                        } : {
                            title: "操作",
                            dataIndex: "操作",
@ -127,13 +126,12 @@ class UserSet extends Component {
        }
    }

-    pageChange = e => {
-        api.get("/admin/board/get_new_companies", { page_no: e, page_size: 10 }).then(res => {
-            this.setState({
-                data: res.result.records,
-                total: res.result.total
-            })
-        })
+    pageChange = (current, pageSize) => {
+        this.submit(null, null, current, pageSize)
+    }
+
+    onShowSizeChange = (current, pageSize) => {
+        this.submit(null, null, current, pageSize)
    }

    onAdd = () => {
@ -193,7 +191,7 @@ class UserSet extends Component {
                        </Button>
                    </Form>
                </Row>
-                <FeTable data={this.state.data} columns={this.state.columns} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)} />
+                <FeTable data={this.state.data} columns={this.state.columns} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)} onShowSizeChange={this.onShowSizeChange.bind(this)} />
                <Modal
                    visible={this.state.visible}
                    title="新增"
--- a/src/pages/home/content.js
+++ b/src/pages/home/content.js
@ -15,6 +15,8 @@ import Threshold from './branch/modal/threshold'
 import { connect } from 'react-redux';
 import { CloseOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd'

 import { Tabs, Empty } from 'antd';

@ -134,7 +136,7 @@ class Main extends Component {
                </span>
              } />
            } else {
-              return <Tabs
+              return <DndProvider backend={HTML5Backend}><Tabs
                hideAdd
                type="editable-card"
                onChange={this.onChange}
@ -153,6 +155,7 @@ class Main extends Component {
                  </TabPane>
                })}
              </Tabs>
+              </DndProvider>
            }
          })()
        }