README.md · 刘勤/rubber-pore

# 橡胶项目-基于 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列表

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<string>               | 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<string>）                                                  |
| ----------- | :------------------------------------------------------------------- |
| 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
<UploadFile></UploadFile> // 上传图片，只能传1张

<UploadFile fileType={2}></UploadFile> // 上传视频，只能传1张

<UploadFile maxCount={5}></UploadFile> // 批量上传图片，最多5张

<UploadFile fileType={3} maxCount={5}></UploadFile> // 图片视频混合，最多5张

<UploadFile format={['image/png']} maxSize={1}></UploadFile> // 上传图片，只能传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                         | 是否展示表格搜索区域                                                                              |

刘勤/rubber-pore

简介

发行版

贡献者

近期动态

刘勤/rubber-pore .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

刘勤/rubber-pore