From 637bf90d64c73b56610a36f9355b83d0da9b876b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8C=83=E7=8E=89=E7=90=B3?= <1584592841@qq.com> Date: Sat, 9 Jul 2022 17:32:12 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=A6=E6=88=B7=E6=B3=A8=E9=94=80=20?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=AA=8C=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LoginReg/LoginCard.jsx | 88 ++++++++- src/components/Selector.jsx | 6 +- .../System/AuthManage/AlterAuth.jsx | 10 +- src/components/System/AuthManage/Auth.jsx | 70 ++++--- src/components/System/Customer/Custom.jsx | 64 +++++- .../System/Employee/AddEmployee.jsx | 129 ++++++++++-- src/components/System/Employee/Employee.jsx | 156 +++++++++++++-- src/components/System/Order/Order.jsx | 13 +- src/components/WareManager/Analysis.jsx | 183 +++++++----------- src/components/WareManager/Stock.jsx | 6 +- src/components/WareManager/WareQuery.jsx | 104 +++++++--- src/mock/index.js | 2 +- src/pages/LoginReg.jsx | 28 +-- 13 files changed, 617 insertions(+), 242 deletions(-) diff --git a/src/components/LoginReg/LoginCard.jsx b/src/components/LoginReg/LoginCard.jsx index 0a998ec..dffb11b 100644 --- a/src/components/LoginReg/LoginCard.jsx +++ b/src/components/LoginReg/LoginCard.jsx @@ -1,31 +1,76 @@ -import React, { useState } from "react"; -import { AiOutlineUser } from "react-icons/ai"; +import React, { useState, useEffect } from "react"; +import { AiOutlineUser, AiOutlineCheck } from "react-icons/ai"; import { Navigate } from "react-router-dom"; +import { motion } from "framer-motion"; + import InputArea from "../InputArea"; import LoginBtn from "./LoginBtn"; import PwArea from "./PwArea"; import RememberPw from "./RememberPw"; import { onLogin } from "../../utils/adminCookie"; import { accounts } from "../../utils/data"; +import axios from "axios"; const LoginCard = () => { const [userInput, setUserInput] = useState(""); const [pwInput, setPwInput] = useState(""); + const [codeInput, setCodeInput] = useState(""); + + const [imgCode, setImgCode] = useState(""); + const [loginSucc, setLoginSucc] = useState(false); + const [loginFail, setLoginFail] = useState(false); + + const getCode = (e) => { + e.stopPropagation(); + axios + .get("http://localhost:8081/code", { withCredentials: true }) + .then((res) => { + setImgCode(res.data); + }) + .catch((error) => { + console.log(error); + }); + }; + const handleSubmit = (e) => { e.preventDefault(); - const [uname, upw] = document.forms[0]; + const [uname, upw, ucode] = document.forms[0]; if (uname.value === "12" && upw.value === "12") { setLoginSucc(true); - onLogin(accounts.filter(item=>item.username===uname.value)) - }else if (uname.value === "34" && upw.value === "34"){ + onLogin(accounts.filter((item) => item.username === uname.value)); + } else if (uname.value === "34" && upw.value === "34") { setLoginSucc(true); - onLogin(accounts.filter(item=>item.username===uname.value)) + onLogin(accounts.filter((item) => item.username === uname.value)); } + axios + .get( + "http://localhost:8081/login", + { params: { username: uname, password: upw, code: ucode } }, + { withCredentials: true } + ) + .then((res) => { + setLoginSucc(true); + }) + .catch((error) => { + setLoginFail(true); + console.log(error); + }); }; + useEffect(() => { + axios + .get("http://localhost:8081/code", { withCredentials: true }) + .then((res) => { + setImgCode(res.data); + }) + .catch((error) => { + console.log(error); + }); + }, []); + return loginSucc ? ( - + ) : (
@@ -44,7 +89,36 @@ const LoginCard = () => { value={pwInput} onChange={(e) => setPwInput(e.target.value)} > +
+ + setCodeInput(e.target.value)} + > + 验证码 +
+ {/* Login Fail */} + {loginFail && ( + + + + )} +
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx index 4d1b288..cf26efd 100644 --- a/src/components/Selector.jsx +++ b/src/components/Selector.jsx @@ -3,6 +3,7 @@ import React from "react"; const Selector = ({ value, onChange, className, categories }) => { return ( + female + + + + + + + + + 账号状态 + +
+
+ + +
+
+ + +
+
+ + + + ); }; diff --git a/src/components/System/Employee/Employee.jsx b/src/components/System/Employee/Employee.jsx index 8bf6bc8..ae04bef 100644 --- a/src/components/System/Employee/Employee.jsx +++ b/src/components/System/Employee/Employee.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; import { FiSearch } from "react-icons/fi"; -import { Table, Modal } from "antd"; +import { Table, Modal, Button } from "antd"; import InputArea from "../../InputArea"; import AddEmployee from "./AddEmployee"; @@ -12,30 +12,43 @@ const Employee = () => { const [info, setInfo] = useState(""); const [curData, setCurData] = useState(""); const [searchRes, setSearchRes] = useState([]); + const [employeeData, setEmployeeData] = useState([]); + + const [loading, setLoading] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false); + const [isAddModalVisible, setIsAddModalVisible] = useState(false); + const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); const [isCancelModalVisible, setIsCancelModalVisible] = useState(false); - const [mockEmployee, setMockEmployee] = useState([]); - const [formSex, setFormSex] = useState(null); - const [formStatus, setFormStatus] = useState(null); + const [editSex, setEditSex] = useState(0); + const [editStatus, setEditStatus] = useState(0); + + const [addSex, setAddSex] = useState(null); + const [addStatus, setAddStatus] = useState(null); const updateSex = (sex) => { - setFormSex(sex); + setEditSex(sex); }; const updateStatus = (status) => { - setFormStatus(status); + setEditStatus(status); }; const showModal = (item) => { setCurData(item); setIsModalVisible(true); - setFormSex(item.sex); - setFormStatus(item.status); + setEditSex(item.sex); + setEditStatus(item.status); + }; + + const showAddModal = () => { + setAddSex(0); + setAddStatus(0); + setIsAddModalVisible(true); }; const handleOk = (e) => { - setIsModalVisible(false); + setLoading(true); handleEditSubmit(e); }; @@ -46,44 +59,78 @@ const Employee = () => { const secondHandleOk = () => { setIsCancelModalVisible(false); setIsModalVisible(false); + setIsAddModalVisible(false); }; const secondHandleCancel = () => { setIsCancelModalVisible(false); }; + const showDeleteModal = (item) => { + console.log(item) + setIsDeleteModalVisible(true); + }; + + const deleteHandleOk = () => { + setIsDeleteModalVisible(false); + }; + + const deleteHandleCancel = () => { + setIsDeleteModalVisible(false); + }; + + const handleAddOk = (e) => { + // todo 输入为空阻止提交 + setLoading(true); + handleAddSubmit(e); + }; + const searchHandler = (e) => { e.preventDefault(); const [employeeInfo] = document.forms[0]; // console.log(employeeInfo.value); if (employeeInfo.value !== "") { setSearchRes( - mockEmployee.filter( + employeeData.filter( (item) => item.id === employeeInfo.value || priority[item.priority] === employeeInfo.value ) ); } else { - setSearchRes(mockEmployee); + setSearchRes(employeeData); } }; const handleEditSubmit = (e) => { e.preventDefault(); - const [name, username, password, , ] = document.forms[1]; + const [name, username, password, ,] = document.forms[1]; console.log( name.value, username.value, password.value, - formSex, - formStatus + editSex, + editStatus ); + setTimeout(() => { + setLoading(false); + setIsModalVisible(false); + }, 1500); + }; + + const handleAddSubmit = (e) => { + e.preventDefault(); + const [name, username, password] = document.forms[1]; + console.log(name.value, username.value, password.value, addSex, addStatus); + setTimeout(() => { + setLoading(false); + setIsAddModalVisible(false); + }, 1500); }; useEffect(() => { axios.get("/admin/system/employee-manage").then((res) => { - setMockEmployee(res.data.result.list); + setEmployeeData(res.data.result.list); setSearchRes(res.data.result.list); }); }, []); @@ -142,7 +189,12 @@ const Employee = () => { > 编辑 - + ); }, @@ -169,7 +221,10 @@ const Employee = () => { - @@ -199,8 +254,21 @@ const Employee = () => { closable={false} onOk={handleOk} onCancel={handleCancel} - okText={"确认"} - cancelText={"放弃修改"} + // okText={"确认"} + // cancelText={"放弃修改"} + footer={[ + , + , + ]} >
{ )} + {/* Add Modal */} + {isAddModalVisible && ( + + {"取消"} + , + , + ]} + > + + { + setAddSex(sex); + }} + addStatus={(status) => { + setAddStatus(status); + }} + /> + + + )} + + {/* Delete Modal */} + {isDeleteModalVisible && ( + + ⚠️ 确定注销该账号吗？ + + )} + + {/* Cancel Modal */} {isCancelModalVisible && ( { - const [cate, setCate] = useState("全部"); - const [status, setStatus] = useState("全部"); + const [cate, setCate] = useState(5); + const [status, setStatus] = useState(3); const [curData, setCurData] = useState(""); const [searchRes, setSearchRes] = useState([]); const [mockOrderData, setMockOrderData] = useState([]); @@ -48,15 +48,14 @@ const Order = () => { const searchHandler = (e) => { e.preventDefault(); const [type, status, input] = document.forms[0]; + console.log((type.value),status.value) // todo - if (type.value === "全部" && status.value === "全部") { + if (+(type.value) === 5 && +(status.value) === 3) { setSearchRes(mockOrderData); - } else if (type.value !== "全部" && status.value !== "全部") { + } else if (type.value !== 5 && status.value !== 3) { setSearchRes( mockOrderData.filter( - (data) => - orderType[data.type] === type.value && - orderStatus[data.status] === status.value + (data) => data.type === type.value && data.status === status.value ) ); } diff --git a/src/components/WareManager/Analysis.jsx b/src/components/WareManager/Analysis.jsx index 5d22775..df775d4 100644 --- a/src/components/WareManager/Analysis.jsx +++ b/src/components/WareManager/Analysis.jsx @@ -1,123 +1,9 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import * as echarts from "echarts"; const Analysis = () => { const inOutRef = useRef(null); - const data = [ - { - type: "入库", - value: 65, - }, - { - type: "出库", - value: 35, - }, - ]; - const config = { - appendPadding: 10, - data, - angleField: "value", - colorField: "type", - radius: 1, - innerRadius: 0.6, - label: { - type: "inner", - offset: "-50%", - content: function content(_ref) { - return "".concat(_ref.value, "%"); - }, - style: { - textAlign: "center", - fontSize: 14, - }, - }, - interactions: [ - { - type: "element-selected", - }, - { - type: "element-active", - }, - ], - statistic: { - title: false, - content: { - style: { - whiteSpace: "pre-wrap", - overflow: "hidden", - textOverflow: "ellipsis", - }, - content: "次数", - }, - }, - }; - - const data2 = [ - { - type: "家具家电", - sales: 38, - }, - { - type: "粮油副食", - sales: 52, - }, - { - type: "生鲜水果", - sales: 61, - }, - { - type: "美容洗护", - sales: 145, - }, - { - type: "母婴用品", - sales: 48, - }, - { - type: "进口食品", - sales: 38, - }, - { - type: "食品饮料", - sales: 38, - }, - { - type: "家庭清洁", - sales: 38, - }, - ]; - const config2 = { - data: data2, - xField: "type", - yField: "sales", - columnStyle: { - radius: [8, 8, 8, 8], - }, - label: { - // 可手动配置 label 数据标签位置 - position: "middle", - // 'top', 'bottom', 'middle', - // 配置样式 - style: { - fill: "#FFFFFF", - opacity: 0.6, - }, - }, - xAxis: { - label: { - autoHide: true, - autoRotate: false, - }, - }, - meta: { - type: { - alias: "类别", - }, - sales: { - alias: "销售额", - }, - }, - }; + const inOutRefBar = useRef(null); useEffect(() => { let chartInstance = echarts.init(inOutRef.current); @@ -158,6 +44,68 @@ const Analysis = () => { ], }; chartInstance.setOption(option); + + let chartInstanceBar = echarts.init(inOutRefBar.current); + const optionBar = { + tooltip: { + trigger: "axis", + backgroundColor: "rgba(32, 33, 36,.7)", + borderColor: "rgba(32, 33, 36,0.20)", + borderWidth: 1, + textStyle: { + // 文字提示样式 + color: "#fff", + fontSize: "12", + }, + formatter: "{c}%", + }, + grid: { + top: "15%", + + left: "15%", + + right: "10%", + + bottom: "10%", + }, + xAxis: { + axisTick: { + show: false, //不显示坐标轴刻度线 + }, + axisLine: { + show: false, //不显示坐标轴线 + }, + type: "category", + data: ["01", "02", "03", "04", "05", "06", "07", "08"], + }, + yAxis: { + type: "value", + max: 100, + splitNumber: 5, + axisLabel: { + show: true, + interval: 0, + formatter: "{value} %", // 给每个数值添加% + }, + }, + color: ["#5459BC"], + series: [ + { + data: [26, 20, 16, 42, 90, 40, 65, 50], + type: "bar", + barWidth: 20, + itemStyle: { + emphasis: { + barBorderRadius: 6, + }, + normal: { + barBorderRadius: 6, + }, + }, + }, + ], + }; + chartInstanceBar.setOption(optionBar); }, []); return ( @@ -185,8 +133,7 @@ const Analysis = () => { -

13:00~14:00

- {/* */} +
- ({ - ...item, - key: item.id, - }))} - pagination={{ - pageSize: 20, - }} - scroll={{ - y: 440, - }} - /> +
+
+ + + + + + + + + + + + + + +
+
+
({ + ...item, + key: item.id, + }))} + pagination={{ + pageSize: 20, + }} + scroll={{ + y: 440, + }} + /> + diff --git a/src/mock/index.js b/src/mock/index.js index 944b079..ba94252 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -104,7 +104,7 @@ Mock.mock("/admin/ware-manager/query", { result: { "list|10": [ { - "id|+1": 10001, + "type|1": [0,1], owner: /IC\d{4}/, repository: /\d{2}/, position: /\d{2}/, diff --git a/src/pages/LoginReg.jsx b/src/pages/LoginReg.jsx index 86c14c0..a21c7db 100644 --- a/src/pages/LoginReg.jsx +++ b/src/pages/LoginReg.jsx @@ -1,14 +1,15 @@ -import React, { useState } from "react"; -import AdminRegCard from "../components/LoginReg/AdminRegCard"; +import React from "react"; import LoginCard from "../components/LoginReg/LoginCard"; // import UserRegCard from "./UserRegCard"; +// import AdminRegCard from "../components/LoginReg/AdminRegCard"; const showCSS = "text-blue-500 relative outline-none focus:outline-none before:absolute before:rounded-lg before:w-6 before:h-1 before:left-0 before:bg-gradient-to-tr from-orange-400 to-orange-600 transition-all ease-in-out duration-200"; const LoginReg = () => { - const [loginShow, setLoginShow] = useState(true); - const [adminRegShow, setAdminRegShow] = useState(false); + // 只保留登录功能 + // const [loginShow, setLoginShow] = useState(true); + // const [adminRegShow, setAdminRegShow] = useState(false); return (
@@ -19,15 +20,15 @@ const LoginReg = () => {
- {loginShow && } + + {/* {loginShow && } */} {/* {userRegShow && } */} - {adminRegShow && } + {/* {adminRegShow && } */}
); -- Gitee