已有kb文档：PDM/IPM系统操作手册

一、练习DEMO

使用如下技术栈完成图示的demo

1. create-react-app 搭建前端项目（端口3000）
2. antd 作为UI框架
3. mobx 作为状态管理工具
4. koa/express 启动Node服务（端口3001）

功能描述：

1. 前端创建一个具有「搜索-列表-分页」功能的页面，前端请求 Node 服务，Node 服务转发该请求到 https://cnodejs.org/api 提供的开放接口服务获取数据。渲染内容参考 CNode 首页；
2. 完成一个上传/下载功能，上传后的文件保存在 Node 服务中，可以在前端访问并下载；
3. 使用 Antd 的 Form 功能完成一个表单页，填写的数据发送到 Node 服务，Node 中打印出来即可

二、检查账号开通情况

1. 企业微信账号；
2. gitlab 权限（https://gitlab.gz.cvte.cn/），先确保本地 git 已安装；
3. KB 权限（https://kb.cvte.com/），用于查看项目文档；
4. cplm权限（https://cplmtest.gz.cvte.cn/），负责开发的项目；

三、运行代码

1. 负责人开通 gitlab 项目权限（pdm-front / cat-master / rich-table / wuli-react-dynamic-form-render）；
2. 按 README.md 指引在本地运行 pdm(pdm-front) / pcm(cat-master) 项目；
3. 使用 wuli-react-dynamic-form-render 组件搭建一个表单页，可参考文档及其他页面代码（新建测试页面方法查看6.1）；

四、项目架构简介

五、代码提交规范

01_Git协同开发规范 - 前端

六、如何新建一个页面

6.1 本地测试页面

{
  name: "新品流程放行规则配置",
  path: "prod_flow_approval_conf",
  component: LoadableComponent(() => import('~/pages/admin/prodConfiguration/newProdFlowApprovalConf')),
},
{
  name: "测试页面",
  path: "test",
  component: LoadableComponent(() => import('~/pages/admin/test')),
},

在 frontend/src/routers 目录下新建一行路由数据后，到页面中手动修改 url 为当前路由进行访问。

6.2 正式页面

1. 到 https://cplmadtest.gz.cvte.cn/ 中，基础配置 > 页面资源配置 页面下，找到对应位置新建页面数据（其中「页面编码」和「访问地址」要一一对应，用尽可能准确的英文描述路径）；
2. 返回项目代码中新建路由及页面，同 6.1 ；
3. 到项目页面中，点 清空缓存刷新 页面；
4. 若菜单对应位置显示新建菜单，并且可点击进入，说明新建页面成功；

七、如何对接一个新接口

7.1 PDM的接口

1. Nodejs 中，找到对应模块，配置接口映射：

'use strict';

const OBJECT_CLASS_SERVER = process.env.OBJECT_CLASS_SERVER || ''; // 到 .cvte_env 文件中，找域名对应的变量

module.exports = {
  // 产品生命周期管控-列表
  PUT_PROD_LIFECYCLE_RULE_LIST: {	// 映射名全大写
    method: 'POST',					// 请求方法类型
    uri: `${OBJECT_CLASS_SERVER}/product/ctrl/lifecycle/search`,	// 后端提供的接口地址
  },
}

2. frontend/src/_stores/models 目录下（即mobx配置目录），找到对应模块，增加请求方法

import { observable } from 'mobx';
import { asyncAction } from 'mobx-utils';
import { fetch, createService } from '~/_utils/http';

class NewProdFlowApprovalConf {
  @observable stateForCVTECerList = 'done';  // 某一状态

  // 列表
  postProdReleaseInfoSearch = asyncAction(function* (payload) {
    try {
      const { data } = yield fetch('POST_PROD_RELEASE_INFO_SEARCH', 'post', payload || {});
      return data;
    } catch (error) {
      return Promise.reject(error);
    }
  });

}

export default new NewProdFlowApprovalConf();

3. 页面代码中，使用装饰器引入 mobx

import React, { Component, Fragment } from "react";
import { observer, inject } from 'mobx-react';

@inject('newProdFlowApprovalConf')	// 这里写对应mobx文件名
@observer
export default class NewProdFlowApprovalConf extends Component {
  componentDidMount() {
    this.props.newProdFlowApprovalConf.postProdReleaseInfoSearch({ data: {} });	// 使用 props 调用方法
  }
}

八、对象管理

8.1 配置对象（基本信息、通用视图）

8.2 创建通用视图页面

九、流程/任务

十、数据字典

十一、代码风格

11.1 类组件

11.2 Hook