(this.el = el)}
- style={{
- ...styles,
- height,
- width,
- }}
- />
- );
- }
-}
+BarChart.defaultProps = {
+ width: "100%",
+ height: "300px",
+ styles: {},
+ className: "",
+};
-export default connect((state) => state.app)(BarChart);
+export default BarChart;
diff --git a/src/views/dashboard/components/BoxCard/index.jsx b/src/views/dashboard/components/BoxCard/index.jsx
index deddb87..5e936d4 100644
--- a/src/views/dashboard/components/BoxCard/index.jsx
+++ b/src/views/dashboard/components/BoxCard/index.jsx
@@ -1,48 +1,49 @@
-import React, { Component } from "react";
+
+import { useSelector } from "react-redux";
+
import { Card, Progress } from "antd";
-import { connect } from "react-redux";
import PanThumb from '@/components/PanThumb'
import Mallki from '@/components//Mallki'
import './index.less'
-class BoxCard extends Component {
- state = {};
- render() {
- const {avatar} = this.props
- return (
-
-
- }
- >
-
-
-
-
-
-
-
+
+const BoxCard = (props) => {
+ // const { avatar } = props
+ const { avatar } = useSelector(state => state.user);
+ return (
+
+
+
+ );
}
-export default connect((state) => state.user)(BoxCard);
\ No newline at end of file
+// state.user
+export default BoxCard;
\ No newline at end of file
diff --git a/src/views/dashboard/components/LineBarChart/index.jsx b/src/views/dashboard/components/LineBarChart/index.jsx
new file mode 100644
index 0000000..6d1304c
--- /dev/null
+++ b/src/views/dashboard/components/LineBarChart/index.jsx
@@ -0,0 +1,227 @@
+import { useEffect, useRef } from "react";
+
+import echarts from "@/lib/echarts";
+
+
+
+function LineBarChart() {
+
+ const chartRef = useRef(null);
+
+
+
+ useEffect(() => {
+
+ let chartInstance = echarts.init(chartRef.current);
+
+ const option = {
+
+ legend: {
+
+ data: [
+
+ "3-11岁任务数",
+
+ "3-11岁全程接种量",
+
+ "60岁任务数",
+
+ "60岁全程接种量",
+
+ "80岁任务数",
+
+ "80岁全程接种量",
+
+ "完成率",
+
+ ],
+
+ },
+
+ xAxis: {
+
+ type: "category",
+
+ data: ["街道1", "街道2", "街道3", "街道4", "街道5", "街道6", "街道7"],
+
+ },
+
+ yAxis: [
+
+ { type: "value" },
+
+ {
+
+ type: "value",
+
+ name: "%",
+
+ nameTextStyle: {
+
+ color: "#ccc",
+
+ padding: [0, 0, 10, -30],
+
+ },
+
+ splitNumber: 5,
+
+ splitLine: {
+
+ show: true,
+
+ lineStyle: {
+
+ type: "dashed",
+
+ width: 1,
+
+ color: ["#ccc", "#ccc"],
+
+ },
+
+ },
+
+ axisLabel: {
+
+ show: true,
+
+ textStyle: {
+
+ fontSize: 12,
+
+ },
+
+ },
+
+ },
+
+ ],
+
+ tooltip: {
+
+ trigger: "axis",
+
+ axisPointer: {
+
+ type: "shadow",
+
+ },
+
+ textStyle: {
+
+ color: "#fff",
+
+ align: "left",
+
+ fontSize: 14,
+
+ },
+
+ backgroundColor: "rgba(0,0,0,0.8)",
+
+ },
+
+ series: [
+
+ {
+
+ name: "3-11岁任务数",
+
+ data: [150, 230, 224, 218, 135, 147, 260],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "3-11岁全程接种量",
+
+ data: [150, 230, 224, 218, 135, 147, 260],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "60岁任务数",
+
+ data: [150, 230, 224, 218, 135, 147, 260],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "60岁全程接种量",
+
+ data: [880, 30, 124, 118, 35, 47, 160],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "80岁任务数",
+
+ data: [660, 30, 124, 118, 35, 47, 160],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "80岁全程接种量",
+
+ data: [880, 30, 124, 118, 35, 47, 160],
+
+ type: "bar",
+
+ },
+
+ {
+
+ name: "完成率",
+
+ data: [50, 130, 124, 18, 35, 47, 160],
+
+ yAxisIndex: 1,
+
+ type: "line",
+
+ smooth: true,
+
+ },
+
+ ],
+
+ };
+
+ chartInstance.setOption(option);
+
+ }, []);
+
+
+
+ return (
+
+
+
+
React Echarts 折线+柱状图
+
+
+
+
+
+ );
+
+}
+
+
+
+export default LineBarChart;
\ No newline at end of file
diff --git a/src/views/dashboard/components/LineChart/index.jsx b/src/views/dashboard/components/LineChart/index.jsx
index d70b2be..4b30d3c 100644
--- a/src/views/dashboard/components/LineChart/index.jsx
+++ b/src/views/dashboard/components/LineChart/index.jsx
@@ -1,61 +1,12 @@
-import React, { Component } from "react";
+import React from "react";
+import Chart from "@/components/Chart";
import { PropTypes } from "prop-types";
-import { connect } from "react-redux";
-import echarts from "@/lib/echarts";
-import { debounce } from "@/utils";
-class LineChart extends Component {
- static propTypes = {
- width: PropTypes.string,
- height: PropTypes.string,
- className: PropTypes.string,
- styles: PropTypes.object,
- chartData: PropTypes.object.isRequired,
- };
- static defaultProps = {
- width: "100%",
- height: "350px",
- styles: {},
- className: "",
- };
- state = {
- chart: null,
- };
+const LineChart = ({chartData}) => {
- componentDidMount() {
- debounce(this.initChart.bind(this), 300)();
- window.addEventListener("resize", () => this.resize());
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
- this.resize();
- }
- if (nextProps.chartData !== this.props.chartData) {
- debounce(this.initChart.bind(this), 300)();
- }
- }
+ const {expectedData, actualData} = chartData;
- componentWillUnmount() {
- this.dispose();
- }
-
- resize() {
- const chart = this.state.chart;
- if (chart) {
- debounce(chart.resize.bind(this), 300)();
- }
- }
-
- dispose() {
- if (!this.state.chart) {
- return;
- }
- window.removeEventListener("resize", () => this.resize()); // 移除窗口，变化时重置图表
- this.setState({ chart: null });
- }
-
- setOptions({ expectedData, actualData } = {}) {
- this.state.chart.setOption({
+ const options = {
backgroundColor: "#fff",
xAxis: {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@@ -90,18 +41,18 @@ class LineChart extends Component {
{
name: "expected",
itemStyle: {
- normal: {
+
color: "#FF005A",
lineStyle: {
color: "#FF005A",
width: 2,
},
- },
+
},
smooth: true,
type: "line",
data: expectedData,
- animationDuration: 2800,
+ animationDuration: 800,
animationEasing: "cubicInOut",
},
{
@@ -109,7 +60,7 @@ class LineChart extends Component {
smooth: true,
type: "line",
itemStyle: {
- normal: {
+
color: "#3888fa",
lineStyle: {
color: "#3888fa",
@@ -118,37 +69,32 @@ class LineChart extends Component {
areaStyle: {
color: "#f3f8ff",
},
- },
+
},
data: actualData,
- animationDuration: 2800,
+ animationDuration: 800,
animationEasing: "quadraticOut",
},
],
- });
- }
+ };
+
+ return (
+
+ );
+}
- initChart() {
- if (!this.el) return;
- this.setState({ chart: echarts.init(this.el,"macarons") }, () => {
- this.setOptions(this.props.chartData);
- });
- }
+LineChart.propTypes = {
+ width: PropTypes.string,
+ height: PropTypes.string,
+ className: PropTypes.string,
+ styles: PropTypes.object,
+ chartData: PropTypes.object.isRequired,
+};
- render() {
- const { className, height, width,styles } = this.props;
- return (
- (this.el = el)}
- style={{
- ...styles,
- height,
- width,
- }}
- />
- );
- }
-}
+// LineChart.defaultProps = {
+// height: "350px",
+// styles: {},
+// className: "",
+// };
-export default connect(state=>state.app)(LineChart);
+export default LineChart; //state.app
diff --git a/src/views/dashboard/components/PanelGroup/index.jsx b/src/views/dashboard/components/PanelGroup/index.jsx
index 9aa3464..2084b51 100644
--- a/src/views/dashboard/components/PanelGroup/index.jsx
+++ b/src/views/dashboard/components/PanelGroup/index.jsx
@@ -1,30 +1,33 @@
import React from "react";
-import { Row, Col, Icon } from "antd";
+import { Row, Col } from "antd";
+import Icon from '@ant-design/icons'
import CountUp from "react-countup";
+
+import * as icons from '@ant-design/icons';
import "./index.less";
const chartList = [
{
type: "New Visits",
- icon: "user",
+ icon: "UserOutlined",
num: 102400,
color: "#40c9c6",
},
{
type: "Messages",
- icon: "message",
+ icon: "MessageOutlined",
num: 81212,
color: "#36a3f7",
},
{
type: "Purchases",
- icon: "pay-circle",
+ icon: "PayCircleOutlined",
num: 9280,
color: "#f4516c",
},
{
type: "Shoppings",
- icon: "shopping-cart",
+ icon: "ShoppingCartOutlined",
num: 13600,
color: "#f6ab40",
},
@@ -41,15 +44,15 @@ const PanelGroup = (props) => {
lg={6}
sm={12}
xs={12}
- onClick={handleSetLineChartData.bind(this, chart.type)}
+ onClick={handleSetLineChartData.bind(null, chart.type)}
className="card-panel-col"
>
-
diff --git a/src/views/dashboard/components/PieChart/index.jsx b/src/views/dashboard/components/PieChart/index.jsx
index 52b1f3d..8568672 100644
--- a/src/views/dashboard/components/PieChart/index.jsx
+++ b/src/views/dashboard/components/PieChart/index.jsx
@@ -1,61 +1,14 @@
-import React, { Component } from "react";
+import React from "react";
+import Chart from "@/components/Chart";
import { PropTypes } from "prop-types";
-import { connect } from "react-redux";
-import echarts from "@/lib/echarts";
-import { debounce } from "@/utils";
-class PieChart extends Component {
- static propTypes = {
- width: PropTypes.string,
- height: PropTypes.string,
- className: PropTypes.string,
- styles: PropTypes.object,
- };
- static defaultProps = {
- width: "100%",
- height: "300px",
- styles: {},
- className: "",
- };
- state = {
- chart: null,
- };
- componentDidMount() {
- debounce(this.initChart.bind(this), 300)();
- window.addEventListener("resize", () => this.resize());
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
- this.resize();
- }
- if (nextProps.chartData !== this.props.chartData) {
- debounce(this.initChart.bind(this), 300)();
- }
- }
- componentWillUnmount() {
- this.dispose();
- }
+const PieChart = (props) => {
- resize() {
- const chart = this.state.chart;
- if (chart) {
- debounce(chart.resize.bind(this), 300)();
- }
- }
- dispose() {
- if (!this.state.chart) {
- return;
- }
- window.removeEventListener("resize", () => this.resize()); // 移除窗口，变化时重置图表
- this.setState({ chart: null });
- }
-
- setOptions() {
const animationDuration = 3000;
- this.state.chart.setOption({
+ const options = {
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)",
@@ -84,30 +37,35 @@ class PieChart extends Component {
animationDuration
},
],
- });
- }
+ };
+
+ const { className, height, width, styles } = props;
+ return (
+
+
+
+ );
+}
- initChart() {
- if (!this.el) return;
- this.setState({ chart: echarts.init(this.el, "macarons") }, () => {
- this.setOptions(this.props.chartData);
- });
- }
+PieChart.propTypes = {
+ width: PropTypes.string,
+ height: PropTypes.string,
+ className: PropTypes.string,
+ styles: PropTypes.object,
+};
- render() {
- const { className, height, width, styles } = this.props;
- return (
-
(this.el = el)}
- style={{
- ...styles,
- height,
- width,
- }}
- />
- );
- }
-}
+PieChart.defaultProps = {
+ width: "100%",
+ height: "300px",
+ styles: {},
+ className: "",
+};
-export default connect((state) => state.app)(PieChart);
+export default PieChart;
diff --git a/src/views/dashboard/components/RaddarChart/index.jsx b/src/views/dashboard/components/RaddarChart/index.jsx
index 741d668..4a2daca 100644
--- a/src/views/dashboard/components/RaddarChart/index.jsx
+++ b/src/views/dashboard/components/RaddarChart/index.jsx
@@ -1,61 +1,13 @@
-import React, { Component } from "react";
+import React from "react";
+import Chart from "@/components/Chart";
import { PropTypes } from "prop-types";
-import { connect } from "react-redux";
-import echarts from "@/lib/echarts";
-import { debounce } from "@/utils";
-class RaddarChart extends Component {
- static propTypes = {
- width: PropTypes.string,
- height: PropTypes.string,
- className: PropTypes.string,
- styles: PropTypes.object,
- };
- static defaultProps = {
- width: "100%",
- height: "300px",
- styles: {},
- className: "",
- };
- state = {
- chart: null,
- };
- componentDidMount() {
- debounce(this.initChart.bind(this), 300)();
- window.addEventListener("resize", () => this.resize());
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
- this.resize();
- }
- if (nextProps.chartData !== this.props.chartData) {
- debounce(this.initChart.bind(this), 300)();
- }
- }
+const RaddarChart = (props) => {
- componentWillUnmount() {
- this.dispose();
- }
-
- resize() {
- const chart = this.state.chart;
- if (chart) {
- debounce(chart.resize.bind(this), 300)();
- }
- }
-
- dispose() {
- if (!this.state.chart) {
- return;
- }
- window.removeEventListener("resize", () => this.resize()); // 移除窗口，变化时重置图表
- this.setState({ chart: null });
- }
-
- setOptions() {
const animationDuration = 3000;
- this.state.chart.setOption({
+
+ const options = {
tooltip: {
trigger: "axis",
axisPointer: {
@@ -96,13 +48,13 @@ class RaddarChart extends Component {
type: "radar",
symbolSize: 0,
areaStyle: {
- normal: {
+
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
- },
+
},
data: [
{
@@ -121,30 +73,38 @@ class RaddarChart extends Component {
animationDuration,
},
],
- });
- }
+ };
+
+ const { className, height, width, styles } = props;
- initChart() {
- if (!this.el) return;
- this.setState({ chart: echarts.init(this.el, "macarons") }, () => {
- this.setOptions(this.props.chartData);
- });
- }
- render() {
- const { className, height, width, styles } = this.props;
- return (
-
(this.el = el)}
- style={{
- ...styles,
- height,
- width,
- }}
- />
- );
- }
+ return (
+
+
+
+ );
}
-export default connect((state) => state.app)(RaddarChart);
+
+
+RaddarChart.propTypes = {
+ width: PropTypes.string,
+ height: PropTypes.string,
+ className: PropTypes.string,
+ styles: PropTypes.object,
+};
+
+RaddarChart.defaultProps ={
+ width: "400px",
+ height: "300px",
+ styles: {},
+ className: "",
+};
+
+export default RaddarChart;
diff --git a/src/views/dashboard/components/TransactionTable/index.jsx b/src/views/dashboard/components/TransactionTable/index.jsx
index 632f51a..ad0b321 100644
--- a/src/views/dashboard/components/TransactionTable/index.jsx
+++ b/src/views/dashboard/components/TransactionTable/index.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import { Table, Tag } from "antd";
import { transactionList } from "@/api/remoteSearch";
@@ -29,35 +29,32 @@ const columns = [
},
];
-class TransactionTable extends Component {
- _isMounted = false; // 这个变量是用来标志当前组件是否挂载
- state = {
+const TransactionTable = (props) => {
+
+ const [state, setState] = useState({
list: [],
- };
- fetchData = () => {
+ });
+
+
+ const fetchData = () => {
transactionList().then((response) => {
const list = response.data.data.items.slice(0, 13);
- if (this._isMounted) {
- this.setState({ list });
- }
+ setState({ list });
});
};
- componentDidMount() {
- this._isMounted = true;
- this.fetchData();
- }
- componentWillUnmount() {
- this._isMounted = false;
- }
- render() {
- return (
-
- );
- }
+
+ useEffect(() => {
+ fetchData();
+
+ }, []);
+
+ return (
+
+ );
}
export default TransactionTable;
diff --git a/src/views/dashboard/index.jsx b/src/views/dashboard/index.jsx
index 7bd1c8a..f4d1349 100644
--- a/src/views/dashboard/index.jsx
+++ b/src/views/dashboard/index.jsx
@@ -9,6 +9,9 @@ import PieChart from "./components/PieChart";
import TransactionTable from "./components/TransactionTable";
import BoxCard from "./components/BoxCard";
+
+import LineBarChart from "./components/LineBarChart";
+
const lineChartDefaultData = {
"New Visits": {
expectedData: [100, 120, 161, 134, 105, 160, 165],
@@ -33,7 +36,9 @@ const Dashboard = () => {
lineChartDefaultData["New Visits"]
);
- const handleSetLineChartData = (type) => setLineChartData(lineChartDefaultData[type]);
+ const handleSetLineChartData = (type) => {
+ setLineChartData(lineChartDefaultData[type]);
+ }
return (
@@ -55,6 +60,13 @@ const Dashboard = () => {
}}
/>
+
+
+
@@ -62,7 +74,7 @@ const Dashboard = () => {
-
+
@@ -71,6 +83,7 @@ const Dashboard = () => {
diff --git a/src/views/dashboard/index.less b/src/views/dashboard/index.less
index 8e0b4df..02ee254 100644
--- a/src/views/dashboard/index.less
+++ b/src/views/dashboard/index.less
@@ -1,20 +1,24 @@
.app-container {
background-color: rgb(240, 242, 245);
position: relative;
+
.github-corner {
position: absolute;
top: 0px;
right: 0px;
- background-image: url('~@/assets/images/githubCorner.png');
+ background-image: url('@/assets/images/githubCorner.png');
background-size: 100% 100%;
width: 120px;
height: 120px;
z-index: 9;
cursor: pointer;
}
+
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
+ width: 400px;
+ height: 300px;
}
}
\ No newline at end of file
diff --git a/src/views/error/404/index.jsx b/src/views/error/404/index.jsx
index e77b0f4..258d99a 100644
--- a/src/views/error/404/index.jsx
+++ b/src/views/error/404/index.jsx
@@ -1,11 +1,14 @@
import React from "react";
+import { useNavigate } from 'react-router-dom'
import { Button, Row, Col } from "antd";
import errImg from "@/assets/images/404.png";
import "./index.less";
const NotFound = (props) => {
- const { history } = props;
- const goHome = () => history.replace("/");
+
+ const navigate = useNavigate()
+
+ const goHome = () => navigate("/");
return (
diff --git a/src/views/excel/exportExcel/index.jsx b/src/views/excel/exportExcel/index.jsx
index 145af30..f25301d 100644
--- a/src/views/excel/exportExcel/index.jsx
+++ b/src/views/excel/exportExcel/index.jsx
@@ -1,9 +1,8 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import {
Table,
Tag,
Form,
- Icon,
Button,
Input,
Radio,
@@ -12,7 +11,13 @@ import {
Collapse,
} from "antd";
+import Icon from '@ant-design/icons';
+import * as icons from '@ant-design/icons';
+
import { excelList } from "@/api/excel";
+// import { icons } from "antd/es/image/PreviewGroup";
+
+
const { Panel } = Collapse;
const columns = [
{
@@ -52,9 +57,10 @@ const columns = [
align: "center",
},
];
-class Excel extends Component {
- _isMounted = false; // 这个变量是用来标志当前组件是否挂载
- state = {
+const Excel = (props) => {
+
+ const [isMounted, setMounted] = useState(false);
+ const [state, setState] = useState({
list: [],
filename: "excel-file",
autoWidth: true,
@@ -62,144 +68,149 @@ class Excel extends Component {
downloadLoading: false,
selectedRows: [],
selectedRowKeys: [],
- };
- fetchData = () => {
+ });
+
+
+ const fetchData = () => {
excelList().then((response) => {
const list = response.data.data.items;
- if (this._isMounted) {
- this.setState({ list });
- }
+ setState({ ...state, list });
});
};
- componentDidMount() {
- this._isMounted = true;
- this.fetchData();
- }
- componentWillUnmount() {
- this._isMounted = false;
- }
- onSelectChange = (selectedRowKeys, selectedRows) => {
- this.setState({ selectedRows, selectedRowKeys });
+
+ useEffect(() => {
+ setMounted(true);
+ fetchData();
+ return () => {
+ setMounted(false);
+ };
+ }, []);
+
+ const onSelectChange = (selectedRowKeys, selectedRows) => {
+ setState({ ...state, selectedRows, selectedRowKeys });
};
- handleDownload = (type) => {
- if (type === "selected" && this.state.selectedRowKeys.length === 0) {
+ const handleDownload = (type) => {
+ if (type === "selected" && state.selectedRowKeys.length === 0) {
message.error("至少选择一项进行导出");
return;
}
- this.setState({
+ setState({
+ ...state,
downloadLoading: true,
});
import("@/lib/Export2Excel").then((excel) => {
const tHeader = ["Id", "Title", "Author", "Readings", "Date"];
const filterVal = ["id", "title", "author", "readings", "date"];
- const list = type === "all" ? this.state.list : this.state.selectedRows;
- const data = this.formatJson(filterVal, list);
+ const list = type === "all" ? state.list : state.selectedRows;
+ const data = formatJson(filterVal, list);
excel.export_json_to_excel({
header: tHeader,
data,
- filename: this.state.filename,
- autoWidth: this.state.autoWidth,
- bookType: this.state.bookType,
+ filename: state.filename,
+ autoWidth: state.autoWidth,
+ bookType: state.bookType,
});
- this.setState({
+ setState({
+ ...state,
selectedRowKeys: [], // 导出完成后将多选框清空
downloadLoading: false,
});
});
};
- formatJson(filterVal, jsonData) {
+ const formatJson = (filterVal, jsonData) => {
return jsonData.map(v => filterVal.map(j => v[j]))
}
- filenameChange = (e) => {
- this.setState({
+ const filenameChange = (e) => {
+ setState({
+ ...state,
filename: e.target.value,
});
};
- autoWidthChange = (e) => {
- this.setState({
+ const autoWidthChange = (e) => {
+ setState({
+ ...state,
autoWidth: e.target.value,
});
};
- bookTypeChange = (value) => {
- this.setState({
+ const bookTypeChange = (value) => {
+ setState({
+ ...state,
bookType: value,
});
};
- render() {
- const { selectedRowKeys } = this.state;
- const rowSelection = {
- selectedRowKeys,
- onChange: this.onSelectChange,
- };
- return (
-
-
-
-
-
-
-
-
record.id}
- dataSource={this.state.list}
- pagination={false}
- rowSelection={rowSelection}
- loading={this.state.downloadLoading}
- />
-
- );
- }
+ const { selectedRowKeys } = state;
+ const rowSelection = {
+ selectedRowKeys,
+ onChange: onSelectChange,
+ };
+ return (
+
+
+
+
+
+
+
+
record.id}
+ dataSource={state.list}
+ pagination={false}
+ rowSelection={rowSelection}
+ loading={state.downloadLoading}
+ />
+
+ );
}
export default Excel;
diff --git a/src/views/excel/uploadExcel/index.jsx b/src/views/excel/uploadExcel/index.jsx
index 55d727f..ea3f817 100644
--- a/src/views/excel/uploadExcel/index.jsx
+++ b/src/views/excel/uploadExcel/index.jsx
@@ -1,36 +1,37 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import { Table } from "antd";
import UploadExcelComponent from "@/components/UploadExcel";
-class UploadExcel extends Component {
- state = {
+const UploadExcel = (props) => {
+
+ const [state, setState] = useState({
tableData: [],
tableHeader: [],
- };
- handleSuccess = ({ results, header }) => {
- this.setState({
+ });
+
+ const handleSuccess = ({ results, header }) => {
+ setState({
+ ...state,
tableData: results,
tableHeader: header,
});
};
- render() {
- return (
-
-
-
-
({
- title: item,
- dataIndex: item,
- key: item,
- width: 195,
- align: "center",
- }))}
- dataSource={this.state.tableData}
- />
-
- );
- }
+ return (
+
+
+
+
({
+ title: item,
+ dataIndex: item,
+ key: item,
+ width: 195,
+ align: "center",
+ }))}
+ dataSource={state.tableData}
+ />
+
+ );
}
export default UploadExcel;
diff --git a/src/views/guide/index.jsx b/src/views/guide/index.jsx
index a120d10..e02855e 100644
--- a/src/views/guide/index.jsx
+++ b/src/views/guide/index.jsx
@@ -1,30 +1,30 @@
import React from "react";
-import Driver from "driver.js"; // import driver.js
-import "driver.js/dist/driver.min.css"; // import driver.js css
+import { driver } from "driver.js"; // import driver.js
+import "driver.js/dist/driver.css"; // import driver.js css
import { Button } from "antd";
import TypingCard from '@/components/TypingCard'
import steps from "./steps";
-const driver = new Driver({
+const driverObj = driver({
animate: true, // 在更改突出显示的元素时是否设置动画，
- // 当header的position为fixed时，会覆盖元素，这是driver.js的bug，
- // 详细内容见https://github.com/kamranahmedse/driver.js/issues/97
- opacity: 0.75, // 背景不透明度（0表示只有弹出窗口，没有覆盖）
- doneBtnText: "完成", // 最后一个按钮上的文本
- closeBtnText: "关闭", // 此步骤的“关闭”按钮上的文本
- nextBtnText: "下一步", // 此步骤的下一步按钮文本
- prevBtnText: "上一步", // 此步骤的上一个按钮文本
+ // 当header的position为fixed时，会覆盖元素，这是driver.js的bug，
+ // 详细内容见https://github.com/kamranahmedse/driver.js/issues/97
+ overlayOpacity: 0.75, // 背景不透明度（0表示只有弹出窗口，没有覆盖）
+ // doneBtnText: "完成", // 最后一个按钮上的文本
+ // closeBtnText: "关闭", // 此步骤的“关闭”按钮上的文本
+ // nextBtnText: "下一步", // 此步骤的下一步按钮文本
+ // prevBtnText: "上一步", // 此步骤的上一个按钮文本
+ steps: steps,
});
const guide = function () {
- driver.defineSteps(steps);
- driver.start();
+ driverObj.drive();
};
const Guide = function () {
const cardContent = `引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。
本Demo是基于driver.js`
return (
-
+
diff --git a/src/views/layout/Content/index.jsx b/src/views/layout/Content/index.jsx
index d2e2bc4..0079e0e 100644
--- a/src/views/layout/Content/index.jsx
+++ b/src/views/layout/Content/index.jsx
@@ -1,7 +1,7 @@
import React from "react";
-import { Redirect, withRouter, Route, Switch } from "react-router-dom";
+import { useLocation, Route, Routes, Navigate, useRoutes, Outlet } from "react-router-dom";
+import { useSelector } from 'react-redux'
import DocumentTitle from "react-document-title";
-import { connect } from "react-redux";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Layout } from "antd";
import { getMenuItemInMenuListByProperty } from "@/utils";
@@ -19,14 +19,31 @@ const getPageTitle = (menuList, pathname) => {
};
const LayoutContent = (props) => {
- const { role, location } = props;
+
+
+ const location = useLocation();
+ const userState = useSelector(state => state.user);
+
+ const { role } = userState;
+
+ // console.log(`LayoutContent role:${role}`)
+
const { pathname } = location;
const handleFilter = (route) => {
// 过滤没有权限的页面
- return role === "admin" || !route.roles || route.roles.includes(role);
+ let result = role === "admin" || !route.roles || route.roles.includes(role);
+ // console.log(`location:${pathname},role:${role},handleFilter for ${route.path}, result:${result}`)
+ return result;
};
+
+
+
return (
-
+
+
+ );
+
+ {/*
{
timeout={500}
classNames="fade"
exit={false}
- >
-
-
- {routeList.map((route) => {
- return (
- handleFilter(route) && (
-
- )
- );
- })}
-
-
-
+ >*/}
+ {
+ /*
+ } />
+ {routeList.map((route) => {
+ return (
+ handleFilter(route) ? (
+
+ ) : null
+ );
+ })}
+ } />
+ */
+ }
+
+
+ {/*
-
-
- );
+ */}
+ {/* */ }
+
+
};
-export default connect((state) => state.user)(withRouter(LayoutContent));
+export default LayoutContent;
\ No newline at end of file
diff --git a/src/views/layout/Header/index.jsx b/src/views/layout/Header/index.jsx
index 3231fbe..fdb7561 100644
--- a/src/views/layout/Header/index.jsx
+++ b/src/views/layout/Header/index.jsx
@@ -1,26 +1,45 @@
-import React from "react";
-import { connect } from "react-redux";
-import { Icon, Menu, Dropdown, Modal, Layout, Avatar } from "antd";
+import React, { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Menu, Dropdown, Modal, Layout, Avatar } from "antd";
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons';
+
import { Link } from "react-router-dom";
import { logout, getUserInfo } from "@/store/actions";
import FullScreen from "@/components/FullScreen";
import Settings from "@/components/Settings";
import Hamburger from "@/components/Hamburger";
import BreadCrumb from "@/components/BreadCrumb";
+
+
import "./index.less";
const { Header } = Layout;
const LayoutHeader = (props) => {
+
+ const dispatch = useDispatch();
+
+ const state = {
+ ...useSelector(state => state.app),
+ ...useSelector(state => state.user),
+ ...useSelector(state => state.settings),
+ };
+
+
const {
token,
avatar,
sidebarCollapsed,
- logout,
- getUserInfo,
showSettings,
fixedHeader,
- } = props;
- token && getUserInfo(token);
+ } = state;
+
+ useEffect(() => {
+ dispatch(getUserInfo(token));
+ }, [token]);
+
+
+ // token && dispatch(getUserInfo(token));
const handleLogout = (token) => {
Modal.confirm({
title: "注销",
@@ -28,7 +47,7 @@ const LayoutHeader = (props) => {
okText: "确定",
cancelText: "取消",
onOk: () => {
- logout(token);
+ dispatch(logout(token));
},
});
};
@@ -93,10 +112,10 @@ const LayoutHeader = (props) => {
{showSettings ? : null}
@@ -106,11 +125,4 @@ const LayoutHeader = (props) => {
);
};
-const mapStateToProps = (state) => {
- return {
- ...state.app,
- ...state.user,
- ...state.settings,
- };
-};
-export default connect(mapStateToProps, { logout, getUserInfo })(LayoutHeader);
+export default LayoutHeader;
diff --git a/src/views/layout/RightPanel/index.jsx b/src/views/layout/RightPanel/index.jsx
index ba81b91..7cec65a 100644
--- a/src/views/layout/RightPanel/index.jsx
+++ b/src/views/layout/RightPanel/index.jsx
@@ -1,36 +1,55 @@
import React, { useState } from "react";
-import { connect } from "react-redux";
-import { Drawer, Switch, Row, Col, Divider, Alert, Icon, Button } from "antd";
+import { useSelector, useDispatch } from "react-redux";
+import { Drawer, Switch, Row, Col, Divider, Alert, Button } from "antd";
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons';
+
import { toggleSettingPanel, changeSetting } from "@/store/actions";
import clip from "@/utils/clipboard";
const RightPanel = (props) => {
+
+ const state = {
+ ...useSelector(state => state.app),
+ ...useSelector(state => state.settings),
+ };
+
+
const {
settingPanelVisible,
- toggleSettingPanel,
- changeSetting,
sidebarLogo: defaultSidebarLogo,
fixedHeader: defaultFixedHeader,
tagsView: defaultTagsView,
- } = props;
+ } = state;
+
+ const dispatch = useDispatch();
const [sidebarLogo, setSidebarLogo] = useState(defaultSidebarLogo);
const [fixedHeader, setFixedHeader] = useState(defaultFixedHeader);
const [tagsView, setTagsView] = useState(defaultTagsView);
+
+ const handleToggleSettingPanel = () => {
+ dispatch(toggleSettingPanel())
+ };
+
+ const handleChangeSetting = (setting) => {
+ dispatch(changeSetting(setting))
+ }
+
const sidebarLogoChange = (checked) => {
setSidebarLogo(checked);
- changeSetting({ key: "sidebarLogo", value: checked });
+ handleChangeSetting({ key: "sidebarLogo", value: checked });
};
const fixedHeaderChange = (checked) => {
setFixedHeader(checked);
- changeSetting({ key: "fixedHeader", value: checked });
+ handleChangeSetting({ key: "fixedHeader", value: checked });
};
const tagsViewChange = (checked) => {
setTagsView(checked);
- changeSetting({ key: "tagsView", value: checked });
+ handleChangeSetting({ key: "tagsView", value: checked });
};
const handleCopy = (e) => {
@@ -51,8 +70,8 @@ const RightPanel = (props) => {
title="系统设置"
placement="right"
width={350}
- onClose={toggleSettingPanel}
- visible={settingPanelVisible}
+ onClose={handleToggleSettingPanel}
+ open={settingPanelVisible}
>
@@ -103,10 +122,10 @@ const RightPanel = (props) => {
description="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改/src/defaultSettings.js配置文件"
type="warning"
showIcon
- icon={}
+ icon={}
style={{ marginBottom: "16px" }}
/>
-
@@ -116,13 +135,6 @@ const RightPanel = (props) => {
);
};
-const mapStateToProps = (state) => {
- return {
- ...state.app,
- ...state.settings,
- };
-};
-export default connect(mapStateToProps, { toggleSettingPanel, changeSetting })(
- RightPanel
-);
+
+export default RightPanel;
diff --git a/src/views/layout/Sider/Menu/index.jsx b/src/views/layout/Sider/Menu/index.jsx
index fba92e6..6650fb4 100644
--- a/src/views/layout/Sider/Menu/index.jsx
+++ b/src/views/layout/Sider/Menu/index.jsx
@@ -1,8 +1,12 @@
-import React, { Component } from "react";
-import { Menu, Icon } from "antd";
-import { Link, withRouter } from "react-router-dom";
-import { Scrollbars } from "react-custom-scrollbars";
-import { connect } from "react-redux";
+import React, { useState, useEffect } from "react";
+import { Menu } from "antd";
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons';
+import { useLocation, Link } from "react-router-dom";
+
+import withRouter from "@/utils/router";
+// import { Scrollbars } from "react-custom-scrollbars";
+import { useDispatch, useSelector } from "react-redux";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { addTag } from "@/store/actions";
import { getMenuItemInMenuListByProperty } from "@/utils";
@@ -17,16 +21,39 @@ const reorder = (list, startIndex, endIndex) => {
return result;
};
-class Meun extends Component {
- state = {
+const Menu0 = () => {
+ const location = useLocation();
+ const dispatch = useDispatch();
+ const userState = useSelector(state => state.user);
+ // let state = {
+ // menuTreeNode: null,
+ // openKey: [],
+ // };
+
+ const [state, setState] = useState({
menuTreeNode: null,
openKey: [],
- };
+ });
+
+
+ const [isMounted, setIsMounted] = useState(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+
+ const menuTreeNode = getMenuNodes(menuList);
+ setState({
+ ...state,
+ menuTreeNode,
+ });
+ handleMenuSelect(state.openKey);
+ }, []);
+
// filterMenuItem用来根据配置信息筛选可以显示的菜单项
- filterMenuItem = (item) => {
+ const filterMenuItem = (item) => {
const { roles } = item;
- const { role } = this.props;
+ const { role } = userState;
if (role === "admin" || !roles || roles.includes(role)) {
return true;
} else if (item.children) {
@@ -35,45 +62,55 @@ class Meun extends Component {
}
return false;
};
+
+ const handleMenuItemClick = (menuItem) => {
+ // console.log('handleMenuItemClick:%0', menuItem);
+ dispatch(addTag(menuItem));
+ }
// 菜单渲染
- getMenuNodes = (menuList) => {
+ const getMenuNodes = (menuList) => {
// 得到当前请求的路由路径
- const path = this.props.location.pathname;
+ const path = location.pathname;
return menuList.reduce((pre, item) => {
- if (this.filterMenuItem(item)) {
+ if (filterMenuItem(item)) {
if (!item.children) {
+ // console.log('item has no children:%0', item);
pre.push(
-
+
- {item.icon ? : null}
+ {item.icon ? : null}
{item.title}
);
} else {
+ // console.log('item has children:%0', item);
// 查找一个与当前请求路径匹配的子Item
const cItem = item.children.find(
(cItem) => path.indexOf(cItem.path) === 0
);
// 如果存在, 说明当前item的子列表需要打开
if (cItem) {
- this.setState((state) => ({
+ setState({
+ ...state,
openKey: [...state.openKey, item.path],
- }));
+ });
}
+ // console.log('向pre添加:%0', item);
+
// 向pre添加
pre.push(
- {item.icon ? : null}
+ {item.icon ? : null}
{item.title}
}
>
- {this.getMenuNodes(item.children)}
+ {getMenuNodes(item.children)}
);
}
@@ -83,75 +120,84 @@ class Meun extends Component {
}, []);
};
- onDragEnd = (result) => {
+ const onDragEnd = (result) => {
if (!result.destination) {
return;
}
const _items = reorder(
- this.state.menuTreeNode,
+ state.menuTreeNode,
result.source.index,
result.destination.index
);
- this.setState({
+ setState({
menuTreeNode: _items,
});
};
- handleMenuSelect = ({ key = "/dashboard" }) => {
+ const handleMenuSelect = ({ key = "/dashboard" }) => {
+ // console.log(`handleMenuSelect key:${key}`);
let menuItem = getMenuItemInMenuListByProperty(menuList, "path", key);
- this.props.addTag(menuItem);
+ if (!menuItem.children) {
+ dispatch(addTag(menuItem));
+ }
+
};
- componentWillMount() {
- const menuTreeNode = this.getMenuNodes(menuList);
- this.setState({
- menuTreeNode,
- });
- this.handleMenuSelect(this.state.openKey);
- }
- render() {
- const path = this.props.location.pathname;
- const openKey = this.state.openKey;
- return (
-
-
-
-
- {(provided, snapshot) => (
-
- {this.state.menuTreeNode.map((item, index) => (
-
+ {/* */}
+
+
+ {(provided, snapshot) => (
+
+ {state.menuTreeNode && state.menuTreeNode.map((item, index) => (
+
+ {(provided, snapshot) => (
+
- {(provided, snapshot) => (
-
-
-
- )}
-
- ))}
-
+ {taglist.map((tag) => (
+ -
+
+ {tag.title}
+
+
+ ))}
+
+ {/* */}
+ {menuVisible ? (
+
-
- {taglist.map((tag) => (
- -
-
- {tag.title}
-
-
- ))}
-
-
- {menuVisible ? (
-
- ) : null}
-
- );
- }
+ 关闭其他
+ 关闭所有
+
+ ) : null}
+
+ );
}
-export default withRouter(
- connect((state) => state.tagsView, {
- deleteTag,
- emptyTaglist,
- closeOtherTags,
- })(TagList)
-);
+
+export default TagList;
diff --git a/src/views/layout/index.jsx b/src/views/layout/index.jsx
index 0ea158e..f0656bb 100644
--- a/src/views/layout/index.jsx
+++ b/src/views/layout/index.jsx
@@ -1,5 +1,9 @@
import React from "react";
-import { connect } from "react-redux";
+
+import { Suspense } from 'react';
+
+
+import { useSelector } from "react-redux";
import Content from "./Content";
import Header from "./Header";
import RightPanel from "./RightPanel";
@@ -7,17 +11,20 @@ import Sider from "./Sider";
import TagsView from "./TagsView";
import { Layout } from "antd";
const Main = (props) => {
- const { tagsView } = props;
+ const { tagsView } = useSelector(state => state.settings);
return (
{tagsView ? : null}
-
+
+
+
+
);
};
-export default connect((state) => state.settings)(Main);
+export default Main;
diff --git a/src/views/login/index.jsx b/src/views/login/index.jsx
index a5de78e..63e0a0a 100644
--- a/src/views/login/index.jsx
+++ b/src/views/login/index.jsx
@@ -1,26 +1,36 @@
import React, { useState } from "react";
-import { Redirect } from "react-router-dom";
-import { Form, Icon, Input, Button, message, Spin } from "antd";
-import { connect } from "react-redux";
+import { Navigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { Form, Input, Button, message, Spin } from "antd";
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons';
import DocumentTitle from "react-document-title";
import "./index.less";
-import { login, getUserInfo } from "@/store/actions";
+// import login from "../../mock/login";
-const Login = (props) => {
- const { form, token, login, getUserInfo } = props;
- const { getFieldDecorator } = form;
+import { login, getUserInfo } from '@/store/actions'
+
+
+const Login = ({ login, getUserInfo }) => {
+ const { token } = useSelector(state => state.user);
+ const dispatch = useDispatch();
+ const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const handleLogin = (username, password) => {
+
+ // console.log(`handleLogin, username:${username}, password:${password}, login:${login}`);
// 登录完成后 发送请求 调用接口获取用户信息
setLoading(true);
- login(username, password)
+ dispatch(login(username, password))
.then((data) => {
+ console.log(`登录成功，data:${data}`)
message.success("登录成功");
handleUserInfo(data.token);
})
.catch((error) => {
+ console.log("登录失败，error:${error}")
setLoading(false);
message.error(error);
});
@@ -28,8 +38,8 @@ const Login = (props) => {
// 获取用户信息
const handleUserInfo = (token) => {
- getUserInfo(token)
- .then((data) => {})
+ dispatch(getUserInfo(token))
+ .then((data) => { })
.catch((error) => {
message.error(error);
});
@@ -39,73 +49,67 @@ const Login = (props) => {
// 阻止事件的默认行为
event.preventDefault();
+ // console.log("handleSubmit!");
+
// 对所有表单字段进行检验
- form.validateFields((err, values) => {
+ form.validateFields().then((values) => {
// 检验成功
- if (!err) {
- const { username, password } = values;
- handleLogin(username, password);
- } else {
- console.log("检验失败!");
- }
- });
+ console.log("handleSubmit! fields no error");
+ const { username, password } = values;
+ handleLogin(username, password);
+
+ })
+
};
if (token) {
- return ;
+ return
}
return (
-
+
-
-