已有kb文档：PCM操作手册

一、工程初始化

二、使用说明

三、资源配置

一、工程初始化

a.设置CVTE仓库地址

npm config set @cvte:registry https://npm.gz.cvte.cn

b.启动node端

切换到backend目录,运行`npm install`安装依赖模块;
运行`node preloadconfig.js`去Apollo拉取配置信息,生成本地env文件;
运行`npm run dev`;

c.启动前端

切换到frontend目录,运行`npm install`安装依赖模块;
运行`./build.sh`编译项目;
运行`yarn start`(若未全局安装`yarn`,则先运行`npm install -g yarn`);

d.访问

`http://localhost:8011/pcm`进行登陆，登陆成功后切换到`http://localhost:3000/pcm`即可

二、使用说明

a.路由配置

import GatherManager from './products/GatherManager'';

export default [
	{
  	   　　　path: 'gathers',
	 	component: GatherManager,
                breadcrumbName: '标准选项集',
	}
]

b.子路由配置

import GatherManager from './products/GatherManager'';
import ProdConfigMananger from './products/ProdConfigMananger';

export default [
	{
  		path: 'gathers',
	 	component: GatherManager,
        breadcrumbName: '标准选项集',
	 	children: [
			{
				path: 'edit-gather/:bzId/:prodItem',  // 跳转时需要携带对应的参数
                component: ProdConfigMananger,
                breadcrumbName: '编辑',
            }
		]
	}
]

c.请求接口

node端

const baseConfig = require('../../../config/systemConfig');
const rootUrl = baseConfig.rootUrl;

module.exports = [
 	{
        path: "/config/templates",
        method: "get",
        description: "获取选项池列表",
        tags: ["api"],
    },
 	{
        path: "/config/templates/{tempId}",
        method: "put",
        description: "修改选项池",
        tags: ["api"],
        handler: {
            uri: req => `${rootUrl}/config/templates/${req.params.tempId}`, // 自定义请求
        },
    },
]

前端

type.js

export const FETCH_END_PRODUCTS_LIST = "fetch_end_products_list"; //获取选项池列表
export const FETCH_END_PRODUCTSLIST_UPTATE = "fetch_end_productsList_uptate"; //修改选项池

index.js

import { getData, putData } from "@src/libs/http";
import { FETCH_END_PRODUCTS_LIST, FETCH_END_PRODUCTSLIST_UPTATE} from './types';

export default {
	// 获取选项池列表
 	endProductsList: {
		type: FETCH_END_PRODUCTS_LIST,
		getter: [],
		setter: async (payload, state) => {
		 	const { data: { content }} = await getData("/config/templates", {...payload, type: 'pool'});

            return content;
		}
	},
	// 修改选项池
    updateEndProducts: {
        type: FETCH_END_PRODUCTSLIST_UPTATE,
        getter: {},
        setter: (payload, _state) => {
            return putData(`/config/templates/${payload.id}`, payload);
        },
    },
}

页面调接口

import { dispatch } from '@store';
import { FETCH_END_PRODUCTS_LIST, FETCH_END_PRODUCTSLIST_UPTATE } from '@store/types';

class EndProducts extends Component {
	async handleProductsList() {
		const params = {}; // 接口需要的参数

 		const content = await dispatch(FETCH_END_PRODUCTS_LIST, params);
	}

	handleUpdateProductList = async () => {
 		const params = {}; // 接口需要的参数

 		const res = await dispatch(FETCH_END_PRODUCTSLIST_UPTATE, params);
	}

	render(){
		return <div>接口调用</div>
	}
}

const mapStateToProps = state => {
    return {
        endProductsList: state.newAdmin.endProductsList,
	    updateEndProducts: state.newAdmin.updateEndProducts,
    }
}
// 可以通过this.props拿到endProductsList & updateEndProducts


export default connect(mapStateToProps)(EndProducts);

三、资源配置

a.菜单配置

b.页面按钮配置

c.前端按钮权限控制

// 页面编码
pageCodes.js

export const PCM_BACKEND_MODULE_GATHERS_OPTION_DETAILS = 'pcm_backend_module_gathers_option_details'; // 标准选项集-详情

// 使用按钮权限公共方法
import JurisdictionButton from '@common/components/JurisdictionButton';
import { PCM_BACKEND_MODULE_RECOMMEND_RECOMMEND_DETAILS } from '@common/constants/pageCodes';

class GatherConfig extends Component {
	get buttonList(){
  		const { tool, hasAuthButton } = this.props; // 公共方法可以拿到tool是所有工具条按钮列表，line是所有行按钮列表和hasAuthButton方法

		return [
    		hasAuthButton(tool, 'SetOptionJoint') && <Button>设置选项拼接</Button>,
    		hasAuthButton(tool, 'ClientAreaLimit') && <Button>客户区域限制</Button>,
      		hasAuthButton(tool, 'SetStandard') && <Button>设置标准品</Button>
		]
		// hasAuthButton方法传入两个参数，参数1:按钮列表，参数2:按钮标识，判断按钮标识是否存在按钮列表中
	}

	render(){
		return <div>{ this.buttonList }</div>
	}
}

export default connect()(JurisdictionButton(PCM_BACKEND_MODULE_RECOMMEND_RECOMMEND_DETAILS)(GatherConfig))