# rubber-friction **Repository Path**: ling_ser/rubber-friction ## Basic Information - **Project Name**: rubber-friction - **Description**: 橡胶-摩擦性能系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-10-23 - **Last Updated**: 2024-11-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 橡胶项目-基于 Ant design Pro ### 1.安装依赖 ```bash npm install ``` ### 2.本地运行 ```bash npm run dev ``` ### 3.打包 ```bash npm run build ``` 打包配置： `config/config.js` ### 4.代理 `config/proxy.js` ```js export default { dev: { // localhost:8000/api/** -> http://manage.pshytz.com/api/** "/api": { // 要代理的地址 target: "http://manage.pshytz.com", //测试 // target: "http://ewpr2z.natappfree.cc", // 代理 // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, }, }, }; ``` ### 5.权限 1.`src/access.js` 配置权限列表。 - permissionList 前端根据菜单和后端统一决定，每一个菜单对应一个 code。 - permissionCodes 登录成功后后端根据在后端配置的权限菜单进行返回，前端存储在 storage 里面。 - 前端将 permissionList 里面的每一项标记为 true(有菜单权限)/false(无该菜单权限) - 最后 return ```js /** * @see https://umijs.org/zh-CN/plugins/plugin-access * */ export default function access(initialState) { const { currentUser } = initialState ?? {}; console.log("----", JSON.stringify(currentUser?.permissionCodes)); const permissionCodes = currentUser?.permissionCodes || []; // 后端返回的权限code列表 const permissionList = [ "INDEX_PAGE", "AUCTION_MANAGE_PAGE", "USER_PAGE", "ORDER_PAGE", "CONTRACT_PAGE", "INFORMATION_PAGE", "PERMISSION_PAGE", "SYSTEM_SETTING_PAGE", "AUCTION_LIST_PAGE", "CATEGORY_LIST_PAGE", "ORDER_LIST_PAGE", "TAKE_ORDER_PAGE", "ROLE_PAGE", "ADMIN_LIST_PAGE", "ROTATION_PAGE", "LOGISTICS_PAGE", ]; if (currentUser?.account === "admin") { permissionCodes.push("ADMIN"); } let obj = {}; permissionList.forEach((item) => { obj[item] = permissionCodes.includes(item); }); console.log("obj===", obj); // {INDEX_PAGE:true,AUCTION_MANAGE_PAGE:false} return obj; } ``` 2.路由配置（配合 access.js） - 路由的每一项都配置：access ```js export default [ { path: "/admin", layout: false, routes: [ { path: "/admin", routes: [ { name: "login", path: "/admin/login", component: "./admin/Login", }, ], }, { component: "./404", }, ], }, { path: "/home", name: "首页", icon: "home", component: "./Home", access: "INDEX_PAGE", }, { path: "/goods", name: "拍品管理", icon: "codepen", access: "AUCTION_MANAGE_PAGE", routes: [ { path: "/goods/index", name: "拍品列表", component: "./Goods", access: "AUCTION_LIST_PAGE", }, { path: "/goods/edit", name: "编辑拍品", component: "./Goods/edit", hideInMenu: true, access: "AUCTION_LIST_PAGE", }, { path: "/goods/detail", name: "竞拍详情", component: "./Goods/detail", hideInMenu: true, access: "AUCTION_LIST_PAGE", }, { path: "/goods/recordDetail", name: "报名详情", component: "./Goods/recordDetail", hideInMenu: true, access: "AUCTION_LIST_PAGE", }, { path: "/goods/category", name: "分类列表", component: "./Goods/category", access: "CONTRACT_PAGE", }, { component: "./404", }, ], }, { path: "/user", name: "用户管理", icon: "user", component: "./User", access: "USER_PAGE", }, { path: "/user/detail", name: "用户详情", hideInMenu: true, component: "./User/detail", access: "USER_PAGE", }, { path: "/order", name: "订单管理", icon: "accountBook", access: "ORDER_PAGE", routes: [ { path: "/order/index", name: "订单列表", component: "./Order", access: "ORDER_LIST_PAGE", }, { path: "/order/detail", name: "订单详情", component: "./Order/detail", hideInMenu: true, access: "ORDER_LIST_PAGE", }, { path: "/order/takeGoods", name: "提货订单", component: "./Order/takeGoods", access: "TAKE_ORDER_PAGE", }, { component: "./404", }, ], }, { path: "/sign", name: "合同管理", icon: "book", component: "./Sign", access: "CONTRACT_PAGE", }, { path: "/news", name: "资讯管理", icon: "file", component: "./News", access: "INFORMATION_PAGE", }, { path: "/permission", name: "权限管理", icon: "cluster", access: "PERMISSION_PAGE", routes: [ { path: "/permission/role", name: "角色管理", component: "./Permission/role", access: "ROLE_PAGE", }, { path: "/permission/admin", name: "管理员列表", component: "./Permission/admin", access: "ADMIN_LIST_PAGE", }, ], }, { path: "/shop", name: "系统设置", icon: "picture", access: "SYSTEM_SETTING_PAGE", routes: [ { path: "/shop/banner", name: "轮播图管理", component: "./Banner", access: "ROTATION_PAGE", }, { path: "/shop/logistics", name: "物流管理", component: "./Logistics", access: "LOGISTICS_PAGE", }, { path: "/shop/setting", name: "全局设置", component: "./System", access: "GLOBAL_CONFIG", }, { component: "./404", }, ], }, { path: "/", redirect: "/home", }, { component: "./404", }, ]; ``` 3.登录成功后需要跳转到配置的权限列表里面的第一个菜单。 （详见：src/pages/Admin/Login/index.jsx）`fetchUserInfo`函数。 ### 6.上传图片/视频组件（UploadFile） - 详情见（src/components/UploadFile） - 并非基于 ant desing 的 upload 组件，该组件的 onChange 事件有问题，导致放弃，使用原生 input 实现。 - 支持上传图片，上传视频，图片视频混合上传 - 支持拖动排序（react-dnd，react-dnd-html5-backend） - 支持单张/批量上传 - 支持预览，删除 - 可直接使用在 Form.Item 中自动绑定 value 和 onChange - 支持格式，大小校验，错误提示 - 需要后端支持上传（后端返回成功后的 url） | 属性 | 类型 | 默认值 | 说明 | | :------- | --------------------------- | ------------ | ------------------------------------------------- | | fileType | number | 1 | 上传文件类型：1=图片，2=视频，3=图片+视频 | | maxCount | number | 1 | 上传文件最大数量，若大于 1 则可以批量选择 | | maxSize | number | MaxSizeProps | 上传文件限制大小：单位 M | | format | Array | FormatProps | 上传文件限制格式 | | value | string\|Array<{url:string}> | - | 如果 maxCount=1 则为：url，大于 1 则为：[{url:"}] | | onChange | Function(value) | - | value 同上 | | MaxSizeProps | 值（M） | | ------------ | ------- | | fileType=1 | 5 | | fileType=2 | 20 | | fileType=3 | 10 | | FormatProps | 值（Array） | | ----------- | :------------------------------------------------------------------- | | fileType=1 | ["image/jpg", "image/jpeg", "image/png", "image/gif"] | | fileType=2 | ["video/mp4", "video/x-flv", "video/flv", "video/webm", "video/ogg"] | | fileType=3 | 上面 2 个合并 | 使用案例： ```html // 上传图片，只能传1张 // 上传视频，只能传1张 // 批量上传图片，最多5张 // 图片视频混合，最多5张 // 上传图片，只能传1张，只能是png格式，1M大小 ``` ### 7.富文本组件（Editor） - 详情见（src/components/Editor） - 基于[wangEditor](https://www.wangeditor.com/v5/for-frame.html#%E5%AE%89%E8%A3%85-2) ### 8.腾讯地图组件（Map） - 详情见（src/components/Map） - [腾讯地图 JSAPI](https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview) - 使用见（src/pages/Goods/edit.jsx） ### 9.表格组件（根据业务自己封装） - 如何使用 ```jsx import useCommonTable from "@/hooks/useCommonTable"; useCommonTable({ title: "标准工艺从表", columns, renderFormItem, fetchList, addOrUpdate, updateStatus, remove, search: false, }); ``` - 列表，新增，编辑，修改状态，删除和后端约定好按固定方式即参数传递即可。 | 属性 | 类型 | 默认值 | 说明 | | :---------------- | -------- | ---------------------------- | ------------------------------------------------------------------------------------------------- | | title | string | - | 表格左上角标题内容：title+列表，新增按钮内容：新增+title | | columns | Array | 登记人、登记时间、状态、操作 | 同 antd 表格 colunms 配置 | | renderFormItem | Function | ({type,formRef,record})=>{} | 返回新增和编辑的表单内容项（JSX）type:1=新增 2=修改；formRef 表单 ref 对象；record 表格行数据对象 | | fetchList | Function | - | 当前表格接口方法 | | add | Function | - | 新增接口方法 | | update | Function | - | 修改接口方法 | | updateStatus | Function | - | 修改状态（启用/禁用）方法 | | remove | Function | - | 删除/批量删除方法 | | renderAdd | Function | - | 自定义添加按钮 | | insertPosition | Number | 2 | 自定义插入按钮位置配合 renderOtherAction 使用 | | renderOtherAction | Function | - | 自定义一个或多个操作方法 会插入到 insertPotion 位置 | | renderAction | Function | - | 完全自定义操作方法 | | actionColumnWidth | Number | 200 | 操作列的宽度 | | search | Boolean | true | 是否展示表格搜索区域 |