From 53bb00191f0c46ccc1722bfb307206b81eaba66e Mon Sep 17 00:00:00 2001 From: wang_yp <357754663@qq.com> Date: Wed, 18 Sep 2024 17:59:47 +0800 Subject: [PATCH] fix(api):update store --- src/App.tsx | 29 ++++- src/components/ali_upload.tsx | 38 ++----- src/components/form/select.tsx | 4 +- src/components/form/simple_form.tsx | 22 +--- src/create.js | 4 +- src/model/userModel.ts | 10 +- src/pages/dep/index.tsx | 156 ++++++++++++++++++++++++++ src/pages/home/homeLeft/home_left.tsx | 13 +-- src/pages/tag/tag.tsx | 132 ++++++++++++++++++++++ src/pages/user/user.tsx | 85 ++++++++------ src/router/routers/home_router.tsx | 18 +++ src/service/apiConfig/user_config.ts | 2 +- src/service/base.ts | 13 ++- src/store/baseStore.ts | 23 ++-- src/store/dep.ts | 21 ++++ src/store/index.ts | 4 + src/store/tag.ts | 21 ++++ src/store/user/index.ts | 11 ++ 18 files changed, 490 insertions(+), 116 deletions(-) create mode 100644 src/pages/dep/index.tsx create mode 100644 src/pages/tag/tag.tsx create mode 100644 src/store/dep.ts create mode 100644 src/store/tag.ts diff --git a/src/App.tsx b/src/App.tsx index 8c77da7..28ddd3c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,31 @@ import { inject, observer } from "mobx-react"; import "antd/dist/antd.css"; -import Home from "./pages/home/home"; -const App = (props: any) => { - return +// import Home from "./pages/home/home"; +import { Modal } from "antd"; +import { Store } from "antd/lib/form/interface"; +import { Outlet } from "react-router"; +const App = (props: Store) => { + const { usrStore } = props; + return ( + <> + + {}} + onOk={() => { + usrStore.closeLoginDilog(); + }} + onCancel={() => { + usrStore.closeLoginDilog(); + }} + > + cascsa + + > + ); }; export default inject("usrStore")(observer(App)); diff --git a/src/components/ali_upload.tsx b/src/components/ali_upload.tsx index e5a4fb7..41e12d1 100644 --- a/src/components/ali_upload.tsx +++ b/src/components/ali_upload.tsx @@ -1,10 +1,7 @@ -import ossClie from "@/util/oss"; import Modal from "antd/lib/modal"; import { PlusOutlined } from "@ant-design/icons"; import Upload, { RcFile, UploadFile, UploadProps } from "antd/lib/upload"; import { useEffect, useState } from "react"; -import baseHttp from "@/service/base"; -import SystemConfig from "@/service/apiConfig/system_config"; interface UploadFileProps { imgList: Array; @@ -25,11 +22,11 @@ const getBase64 = (file: RcFile): Promise => reader.onerror = (error) => reject(error); }); -const AliUpload = (props:UploadFileProps) => { +const AliUpload = (props: UploadFileProps) => { const [previewOpen, setPreviewOpen] = useState(false); const [previewImage, setPreviewImage] = useState(""); const [previewTitle, setPreviewTitle] = useState(""); - const [fileList, setFileList] = useState([]); + const [files, setFileList] = useState([]); const handleCancel = () => setPreviewOpen(false); const handlePreview = async (file: UploadFile) => { if (!file.url && !file.preview) { @@ -47,30 +44,7 @@ const AliUpload = (props:UploadFileProps) => { }, [props.imgList]); const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => { - let isChange: Boolean = false; - newFileList.forEach(async (item) => { - if (item.originFileObj) { - isChange = true; - await ossClie(newFileList[newFileList.length - 1].originFileObj).then( - (resUploadFileEx: UploadFileEx) => { - resUploadFileEx.uid = resUploadFileEx.name; - resUploadFileEx.bannerName = resUploadFileEx.name; - baseHttp.post( SystemConfig.AddImages, { url: resUploadFileEx.url }).then((resp)=>{ - resUploadFileEx.systemImageId = resp.data.id; - resUploadFileEx.id = resp.data.id; - resUploadFileEx.redictUrl = ""; - fileList.push(resUploadFileEx); - props.onChnage(fileList); - setFileList(fileList); - }) - } - ); - } - }); - if (!isChange) { - props.onChnage(newFileList); - setFileList(newFileList); - } + console.log(newFileList); }; const uploadButton = ( @@ -78,15 +52,17 @@ const AliUpload = (props:UploadFileProps) => { Upload ); + return ( - {fileList.length >= 4 ? null : uploadButton} + {files.length >= 4 ? null : uploadButton} { baseHttp .get(`${v.selectUrl}/?pageSize=100&pageNum=1` ?? "", "") .then((res) => { - setList(res.data.list ?? []); + setList(res.data.record ?? []); }); }, [v.selectUrl]); return ( @@ -18,7 +18,7 @@ export const FormSelect = (v: FormDatas) => { {list?.map((v: any) => { return ( - {v.productTypeName} + {v.dep_name} ); })} diff --git a/src/components/form/simple_form.tsx b/src/components/form/simple_form.tsx index 75779cf..7b6abe5 100644 --- a/src/components/form/simple_form.tsx +++ b/src/components/form/simple_form.tsx @@ -31,13 +31,7 @@ const SimpleForm = (props: SimpleFormData) => { switch (v.type) { case "input": return ( - + ); @@ -84,6 +78,7 @@ const SimpleForm = (props: SimpleFormData) => { { + console.log(res); form.setFieldValue(v.name, res); }} /> @@ -91,17 +86,8 @@ const SimpleForm = (props: SimpleFormData) => { ); case "textArea": return ( - - + + ); case "Radio": diff --git a/src/create.js b/src/create.js index 90780fe..bb90b57 100644 --- a/src/create.js +++ b/src/create.js @@ -3,8 +3,8 @@ let fileName = "test.tsx"; let path = "pages/test" let storeName = "TestStore" let className = "Test" -let str = - ` + +let str =` import { Tooltip } from "antd"; import { inject, observer } from "mobx-react"; import type { ColumnsType } from 'antd/es/table'; diff --git a/src/model/userModel.ts b/src/model/userModel.ts index fa87635..1856ac9 100644 --- a/src/model/userModel.ts +++ b/src/model/userModel.ts @@ -20,5 +20,13 @@ export interface UserDataType { startTime: any; endTime: any; status: any; - +} + +export interface TagDataType { + key: React.Key; + tag_name: string; + tag_desc: string; + id: number; + status: any; + identity: string; } \ No newline at end of file diff --git a/src/pages/dep/index.tsx b/src/pages/dep/index.tsx new file mode 100644 index 0000000..b72ff5c --- /dev/null +++ b/src/pages/dep/index.tsx @@ -0,0 +1,156 @@ +import { Button, Space, Modal, FormInstance } from "antd"; +import { inject, observer } from "mobx-react"; +import type { ColumnsType } from "antd/es/table"; +import BTable from "@/components/b_table"; +import { useEffect, useState } from "react"; +import UserConfig from "@/service/apiConfig/user_config"; +import { UserDataType } from "@/model/userModel"; +import { Store } from "antd/lib/form/interface"; +import SimpleForm from "@/components/form/simple_form"; +import React from "react"; + +const Dep = (props: Store) => { + const { depStore } = props; + const [isModalOpen, setIsModalOpen] = useState(false); + const [projectConfig, setProjectConfig] = useState([]); + const formRef = React.useRef(null); + const [record, setRecord] = useState(null); + const [tagId, setId] = useState(null); + const columns: ColumnsType = [ + { title: "部门名称", dataIndex: "dep_name" }, + { title: "部门描述", dataIndex: "remark" }, + { + title: "操作", + dataIndex: "id", + render: (any, record) => ( + + + + { + edit(record); + }} + > + 编辑 + + { + depStore.deleteItem(record.id); + }} + > + 删除 + + + + + ), + }, + ]; + const edit = (record) => { + record = { + ...record, + imageUrl: [{ url: record.imageUrl }], + }; + setProjectConfig(defaultConfig); + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }; + const onFinish = (values: any) => { + console.log(values); + if (!tagId) { + depStore.add(values); + } else { + depStore.putItem(tagId, values); + } + setIsModalOpen(false); + }; + useEffect(() => { + depStore.getlist(UserConfig.LIST); + }, [depStore]); + const defaultConfig = [ + { + type: "select", + label: "上级部门名称", + name: "pdep_id", + value: "", + selectUrl: "dep/list", + rules: [{ required: false, message: "请输入上级部门!" }], + }, + { + type: "input", + label: "部门名称", + name: "dep_name", + value: "", + rules: [{ required: true, message: "请输入部门名称!" }], + }, + { + type: "input", + label: "部门描述", + name: "remark", + value: "", + rules: [{ required: true, message: "请输入部门描述" }], + }, + { + type: "upload", + label: "头像", + name: "head_img", + value: [], + rules: [{ required: false }], + }, + ]; + const onFinishFailed = () => {}; + return ( + + + + { + setProjectConfig(defaultConfig); + setId(null); + setIsModalOpen(true); + }} + > + 添加 + + + + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + onCancel={() => { + setId(null); + setIsModalOpen(false); + }} + > + { + formRef.current?.setFieldsValue(record); + }} + formName="card_basic" + colProps={4} + subBtnName="提交" + formDatas={projectConfig} + onFinish={onFinish} + initialValues={true} + onFinishFailed={onFinishFailed} + /> + + + + ); +}; + +export default inject("depStore")(observer(Dep)); diff --git a/src/pages/home/homeLeft/home_left.tsx b/src/pages/home/homeLeft/home_left.tsx index d29137e..22be6ec 100644 --- a/src/pages/home/homeLeft/home_left.tsx +++ b/src/pages/home/homeLeft/home_left.tsx @@ -1,11 +1,16 @@ import { useState } from "react"; import { Modal } from "antd"; import "./left.less"; +import { useNavigate } from "react-router"; const HomeLeft = () => { const [isModalOpen, setIsModalOpen] = useState(false); + const navigate = useNavigate(); const openDispatch = () => { setIsModalOpen(true); }; + const jumpToUser = () => { + navigate("/user") + }; return ( @@ -14,7 +19,7 @@ const HomeLeft = () => { 组织架构 - + 用户管理 @@ -24,12 +29,6 @@ const HomeLeft = () => { HomeLeft - {/* - 用户管理 - - - HomeLeft - */} { + const { tagStore } = props; + const [isModalOpen, setIsModalOpen] = useState(false); + const [projectConfig, setProjectConfig] = useState([]); + const formRef = React.useRef(null); + const [record, setRecord] = useState(null); + const [tagId, setId] = useState(null); + const columns: ColumnsType = [ + { title: "标签昵称", dataIndex: "tag_name" }, + { title: "标签描述", dataIndex: "tag_desc" }, + { + title: "操作", + dataIndex: "id", + render: (any, record) => ( + + + + {edit(record);}}>编辑 + { + tagStore.deleteItem(record.id); + }} + > + 删除 + + + + + ), + }, + ]; + const edit = (record) => { + record = { + ...record, + imageUrl: [{ url: record.imageUrl }], + }; + setProjectConfig(defaultConfig); + setIsModalOpen(true); + formRef.current?.setFieldsValue(record); + setRecord(record); + setId(record.id); + }; + const onFinish = (values: any) => { + if (!tagId) { + tagStore.add(values); + } else { + tagStore.putItem(tagId,values); + } + setIsModalOpen(false); + }; + useEffect(() => { + tagStore.getlist(UserConfig.LIST); + }, [tagStore]); + const defaultConfig = [ + { + type: "input", + label: "标签名称", + name: "tag_name", + value: "", + rules: [{ required: true, message: "请输入标签名称!" }], + }, + { + type: "input", + label: "标签描述", + name: "tag_desc", + value: "", + rules: [{ required: true, message: "请输入标签描述" }], + }, + ]; + const onFinishFailed = () => {}; + return ( + + + + { + setProjectConfig(defaultConfig); + setId(null); + setIsModalOpen(true); + }} + > + 添加 + + + + + formRef.current?.resetFields()} + onOk={() => formRef.current?.submit()} + onCancel={() => { + setId(null); + setIsModalOpen(false); + }} + > + { + formRef.current?.setFieldsValue(record); + }} + formName="card_basic" + colProps={4} + subBtnName="提交" + formDatas={projectConfig} + onFinish={onFinish} + initialValues={true} + onFinishFailed={onFinishFailed} + /> + + + + ); +}; + +export default inject("tagStore")(observer(Tag)); diff --git a/src/pages/user/user.tsx b/src/pages/user/user.tsx index 640e164..4b087df 100644 --- a/src/pages/user/user.tsx +++ b/src/pages/user/user.tsx @@ -1,4 +1,4 @@ -import { Button, Tooltip, Image, Space, Modal, FormInstance } from "antd"; +import { Button, Image, Space, Modal, FormInstance } from "antd"; import { inject, observer } from "mobx-react"; import type { ColumnsType } from "antd/es/table"; import BTable from "@/components/b_table"; @@ -9,10 +9,12 @@ import { Store } from "antd/lib/form/interface"; import "./user.less"; import SimpleForm from "@/components/form/simple_form"; import React from "react"; +import { useNavigate } from "react-router"; const User = (props: Store) => { const { usrStore } = props; const [isModalOpen, setIsModalOpen] = useState(false); + const nav = useNavigate() const [projectConfig, setProjectConfig] = useState([]); const formRef = React.useRef(null); const [record, setRecord] = useState(null); @@ -20,24 +22,12 @@ const User = (props: Store) => { const columns: ColumnsType = [ { title: "用户名", - dataIndex: "acount", + dataIndex: "user_name", }, { title: "年龄", dataIndex: "age", }, - { - title: "居住地", - dataIndex: "address", - ellipsis: { - showTitle: false, - }, - render: (address) => ( - - {address} - - ), - }, { title: "性别", dataIndex: "sex", @@ -45,17 +35,16 @@ const User = (props: Store) => { }, { title: "头像", - dataIndex: "headImg", + dataIndex: "head_img", render: (headImg) => , }, { - title: "角色", - dataIndex: "roleName", + title: "职位", + dataIndex: "position", }, { - title: "会员", - dataIndex: "level", - render: (level) => {level === "0" ? "包年" : "超级会员"}, + title: "备注", + dataIndex: "remark", }, { title: "操作", @@ -77,9 +66,14 @@ const User = (props: Store) => { 编辑 - { - usrStore.deleteItem(record.id) - }}> + { + usrStore.deleteItem(record.id); + }} + > 删除 @@ -106,12 +100,11 @@ const User = (props: Store) => { values = { ...values, - headImg:"cascas" //images.join(","), + headImg: "cascas", //images.join(","), }; if (!userId) { usrStore.add(values); } else { - } setIsModalOpen(false); }; @@ -165,16 +158,38 @@ const User = (props: Store) => { return ( - { - setProjectConfig(defaultConfig); - setId(null); - setIsModalOpen(true); - }} - > - 添加用户 - + + { + setProjectConfig(defaultConfig); + setId(null); + setIsModalOpen(true); + }} + > + 添加用户 + + + {nav("/tag")}}> + 标签管理 + + { nav("/dep")}}> + 部门管理 + + {}}> + 部门管理 + + {}}> + 档案管理 + + { + nav("/warehouse") + }}> + 仓库管理 + + + + }, + { + path: "/user", + index: true, + element: + }, + { + path: "/tag", + index: true, + element: + }, + { + path: "/dep", + index: true, + element: + }, ]; \ No newline at end of file diff --git a/src/service/apiConfig/user_config.ts b/src/service/apiConfig/user_config.ts index 55f5833..b5ef670 100644 --- a/src/service/apiConfig/user_config.ts +++ b/src/service/apiConfig/user_config.ts @@ -1,6 +1,6 @@ class UserConfig { static LOGINURI: string = "login" - static LIST: string = "user/list" + static LIST: string = "userMgmt/user/list" static ADD: string = "user" static DELETE: string = "user" static EDIT: string = "user" diff --git a/src/service/base.ts b/src/service/base.ts index f0e942c..07c3595 100644 --- a/src/service/base.ts +++ b/src/service/base.ts @@ -1,13 +1,14 @@ import store from "@/store"; import axios, { AxiosResponse } from "axios"; // 添加请求拦截器 -axios.defaults.headers.common["CommonType"] = "shouka"; +// axios.defaults.headers.common["CommonType"] = "shouka"; axios.defaults.headers.common["Content-Type"] = "application/json; charset=utf8"; +// axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; axios.interceptors.request.use((config) => { - config.baseURL = "http://quwanya.cn:8899/v1/api/"; + config.baseURL = "http://127.0.0.1:12214/v1/"; config.timeout = 5000; let token = window.localStorage.getItem("token") - config.headers.Authorization = 'Bearer ' + token + config.headers.Authorization = token return config; }, (error) => { // 对请求错误做些什么 @@ -17,10 +18,15 @@ axios.interceptors.request.use((config) => { // 添加响应拦截器 axios.interceptors.response.use((res: AxiosResponse) => { if (res.data.status === 401) { + store.usrStore.openLoginDilog() store.usrStore.logOut() } return res; }, (err) => { + if (err.status === 401) { + store.usrStore.openLoginDilog() + store.usrStore.logOut() + } return Promise.reject(err); }); class BaseHttp { @@ -75,4 +81,5 @@ class BaseHttp { }; } +// eslint-disable-next-line import/no-anonymous-default-export export default new BaseHttp() \ No newline at end of file diff --git a/src/store/baseStore.ts b/src/store/baseStore.ts index 93f445a..b4be7ef 100644 --- a/src/store/baseStore.ts +++ b/src/store/baseStore.ts @@ -58,34 +58,31 @@ class BaseStore implements BaseStoreInterface { async getlist() { this.listStatus = true; let res = await baseHttp.get(this.urlConfig.LIST, { - size: this.page?.Size | 1, - offset: this.page?.Offset | 20, - isSelf:0 + size: this.page?.Size | 20, + offset: this.page?.Offset | 1, }); - - this.page = { - Offset: res.data?.pageNum, - Size: res.data?.pageSize - } let data: Array = [] - if (!res.data.list) { + if (!res.data.record) { runInAction(() => { this.list = data; }) this.listStatus = false; return; } - for (let i = 0; i < res.data.list.length; i++) { + console.log(res.data.record); + for (let i = 0; i < res.data.record.length; i++) { data.push({ - key: res.data.list[i].id, - ...res.data.list[i] + key: res.data.record[i].id, + ...res.data.record[i] }) } + console.log(data); runInAction(() => { this.list = data; - this.total = res.data.total | res.data.totals + this.total = res.data.count }) + console.log(this.list); this.listStatus = false; } list!: Array; diff --git a/src/store/dep.ts b/src/store/dep.ts new file mode 100644 index 0000000..7d4a976 --- /dev/null +++ b/src/store/dep.ts @@ -0,0 +1,21 @@ +import { makeObservable } from "mobx"; +// 用户信息 +import BaseStore from "./baseStore"; +import { TagDataType } from "@/model/userModel"; + +class DepConfig { + static LIST: string = "dep/list" + static ADD: string = "dep" + static DELETE: string = "dep" + static EDIT: string = "dep" +} +class DepStore extends BaseStore { + constructor() { + super(DepConfig) + makeObservable(this, {}) + } +} + +// eslint-disable-next-line import/no-anonymous-default-export +export default new DepStore(); + \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index dfe0f9d..12358d5 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,7 +1,11 @@ import usrStore from '@/store/user' +import tagStore from '@/store/tag' +import depStore from '@/store/dep' const store = { usrStore, + tagStore, + depStore }; export default store; \ No newline at end of file diff --git a/src/store/tag.ts b/src/store/tag.ts new file mode 100644 index 0000000..333f1d2 --- /dev/null +++ b/src/store/tag.ts @@ -0,0 +1,21 @@ +import { makeObservable } from "mobx"; +// 用户信息 +import BaseStore from "./baseStore"; +import { TagDataType } from "@/model/userModel"; + +class TagConfig { + static LIST: string = "tag/list" + static ADD: string = "tag" + static DELETE: string = "tag" + static EDIT: string = "tag" +} +class TagStore extends BaseStore { + constructor() { + super(TagConfig) + makeObservable(this, {}) + } +} + +// eslint-disable-next-line import/no-anonymous-default-export +export default new TagStore(); + \ No newline at end of file diff --git a/src/store/user/index.ts b/src/store/user/index.ts index 6c1539a..93b9e99 100644 --- a/src/store/user/index.ts +++ b/src/store/user/index.ts @@ -7,12 +7,16 @@ import { UserDataType, UserInfos } from "@/model/userModel"; class UserStore extends BaseStore { _userinfo: UserInfos = {}; // 用户信息 + isNeedLogin: boolean = false; // 是否需要登录 + constructor() { super(UserConfig) makeObservable(this, { logOut: action, login: action, _userinfo: observable, + isNeedLogin: observable, + openLoginDilog: action, userInfo: computed, }) } @@ -43,6 +47,13 @@ class UserStore extends BaseStore { }; window.localStorage.setItem("token", data.data.token ?? ""); } + openLoginDilog(){ + this.isNeedLogin = true; + } + closeLoginDilog(){ + this.isNeedLogin = false; + } } +// eslint-disable-next-line import/no-anonymous-default-export export default new UserStore(); \ No newline at end of file
cascsa
组织架构
用户管理
HomeLeft