saas-dynamic-component-ihs v0.1.7

saas-dynamic-component-ihs

saas平台动态引擎组件库，目前包括查询引擎、表格引擎，后续待增加...

安装

npm install saas-dynamic-component-ihs --save-dev

试用范围

NornJ+React+Mobx-state-tree项目模板

使用说明

1. store文件注入

import { SearchEngineStore, TableEngineStore } from 'saas-dynamic-component-ihs';

const RootStore = types.model("RootStore", {

  searchEngine: types.optional(SearchEngineStore, {
    hostDomain: `${__HOST_DYNAMIC}`
  }),
  tableEngine: types.optional(TableEngineStore, {
    hostDomain: `${__HOST_DYNAMIC}`,
    isBuild: `${__IS_BUILD}` == true ? true : false,
  }),
  
})

2. 修改webpack配置文件webpack.config.js，具体关注注释部分

new webpack.DefinePlugin({
    __ENV: (isProd || isTest) ? "'pro'" : "'dev'",
    __HOST: (isProd || isTest) ? "''" : "'http://localhost:8089/'",
    __HOST_DYNAMIC: (isProd || isTest) ? `'//raas.jd.com/'` : "'http://localhost:8080/'", // 同域跨应用调用数据
    __IS_BUILD: (isProd || isTest) ? true : false, //标识是否构建
    'process.env': {  
      'NODE_ENV': JSON.stringify(isProd ? 'production' : 'development')
    },
    __JSPATH: JSON.stringify((isProd || isTest) ? '/' + process.env.Project + '/js/' : `/dist/${process.env.Project}/js/`),
    __COMMONHOST: (isProd || isTest) ? `'${commonDomain}'` : "'http://localhost:8089/'",
  }),

3. 页面使用（举例）

   1) js文件，注意：flarej里面的组件引入不可缺少，否则影响正常使用

import 'flarej/lib/components/antd/button';
import 'flarej/lib/components/antd/cascader';
import 'flarej/lib/components/antd/input';
import 'flarej/lib/components/antd/select';
import 'flarej/lib/components/antd/datePicker';
import 'flarej/lib/components/antd/table';
import 'flarej/lib/components/antd/spin';

import 'saas-dynamic-component-ihs/dist/saas-dynamic-component-ihs.min.css'; 
import { SearchEngine, TableEngine } from 'saas-dynamic-component-ihs';

2) html文件，举例如下

<SearchEngine
  searchText="查询"
  appCode="pbs"
  menuUrl="ReplenishmentDesk"
  onBuried={buriedClick}
/>

<TableEngine 
  rowSelection={rowSelection}
  tableAction={tableAction} 
  rowKey=id
  scroll={tableScroll}
  onChangeEdit={onChangeEditRecord}
  onRef={refTableEngine}
  showQuickJumper={true}
  showSizeChanger={true}
  appCode="pbs"
  menuUrl="ReplenishmentDesk"
/>

4. 组件API

1) 查询引擎

2) 表格引擎

3) 表格引擎内置方法

本地开发-调用测试环境接口方案

1. 配置测试环境host

   // 模板引擎举例
   192.168.153.99 passport.jd.com
   10.182.48.16 raas.jd.com

2. Chrome 浏览器安装插件 EditThisCookie

可自行去chrome应用商店搜索，并添加至浏览器，用于管理chookie信息，添加完后，会在浏览器地址栏右侧出现插件图标-小饼干。

1. webpack.config.js配置文件中增加反向代理

// 将ypub-pass-web(用于模板引擎的服务)的接口全部代理到raas.jd.com
devServer: {
    port: 8080,
    proxy: {
      '/mockjs': {
        target: 'http://rap.jd.com',
        secure: false,
        changeOrigin: true
      },
      '/ypub-paas-web': {
        target: 'http://raas.jd.com/',
        secure: false,
        changeOrigin: true,
      }
    },
  },

new webpack.DefinePlugin({
    __ENV: (isProd || isTest) ? "'pro'" : "'dev'",
    __HOST: (isProd || isTest) ? "''" : "'http://localhost:8089/'",
    __HOST_DYNAMIC: (isProd || isTest) ? `'//raas.jd.com/'` : "'http://localhost:8080/'", // 将需要代理的接口配置为监听端口
    __IS_BUILD: (isProd || isTest) ? true : false,
    'process.env': {  
      'NODE_ENV': JSON.stringify(isProd ? 'production' : 'development')
    },
    __JSPATH: JSON.stringify((isProd || isTest) ? '/' + process.env.Project + '/js/' : `/dist/${process.env.Project}/js/`),
    __COMMONHOST: (isProd || isTest) ? `'${commonDomain}'` : "'http://localhost:8089/'",
  }),

注意：上方代码只需关注含注释的部分。

1. 具体操作流程（模板引擎服务举例，其他同理）

   1) 登录租户端应用 raas.jd.com/tenant/ (使用配置的host环境账号进行登录)。

   2) 点击浏览器地址栏右侧EditThisChookie（小饼干）图标，粘贴出登录租户标识saassessionid的值。

   3) 通过npm run dev-web启动你的本地项目，浏览器访问，点击EditThisChookie图标，点击+新增cookie，名称为saassessionid，值为上一步粘贴的值，点击保存。

   4) 重新刷新页面，即可看到本地服务调取测试环境接口成功后的返回值。

说明：若一段时间后接口数据报错，可能为登陆过期，需要按具体操作流程重新操作一遍。

API具体使用

查询模板

1. appCode和menuUrl

appCode为应用标识——即在SaaS运营端系统维护的标识编码

menuUrl为菜单标识——即在SaaS运营端系统维护的菜单编码

作用：这两个参数为后台接口提供，用于唯一确定在PaaS平台配置的模板信息，获取到模板信息完成组件渲染

2. searchText按钮文字

如果使用react-intl-universal作为国际化工具，系统需要支持国际化，则使用如下：

<SearchEngine
  searchText="{intl('btnCode')}"
  appCode="pbs"
  menuUrl="ReplenishmentDesk"
  onBuried={buriedClick}
  onChange={changeForm}/>

语言变量keybtnCode需要在locales文件加下语言文件里添加，key可自定义。

3. scroll使用样例

// 根据配置列动态适应总宽度，可根据实际需求改动
@computed get tableScroll() {
  const { store: { tableEngine } } = this.props;
  let length = tableEngine.tableColumns.length;
  tableEngine.tableColumns.map(item => {
    if (item.children) {
      length += item.children.length;
    }
  })
  return {
    x: length * 120 + 300,
  }
}

4. onChange返回查询列表form，举例

@observable formEngine = null;
@autobind
changeSearch(form) {
  this.formEngine = form;
}

/* 
* 自定义按钮需要获取form数据时，如需进行虚拟字段（品牌、品类、地址）/时间格式翻译
* 可调用searchEngine.translateForm方法，返回翻译后的form信息，如下
*/
@autobind
searchButtonFunc() {
  const { store: { searchEngine } } = this.props;
  let params = searchEngine.translateForm(this.formEngine);
}

5. onBuried点击查询按钮的回调，举例（增加操作埋点）

import AnalysisGather from '../../../utils/analysis';

@autobind
buriedClick() {
  AnalysisGather('test_search'); // test_search为埋点标识，根据业务自行修改
}

表格模板

1. appCode和menuUrl同查询模板，不再赘述。
2. onRef获取表格模板组件this

@observable refTable = null; //用于存储表格组件this

@autobind
refTableEngine(ref) {
  this.refTable = ref;
}

3. tableAction为表格操作栏

@computed get tableAction() {
  return {
    width: 150,
    fixed: 'right',
    title: '操作',
    dataIndex: 'handler',
    render: (text, record, index) => nj `
      <#if ${record.editable}}>
        <span>
          <a href="javascript:;" onClick=${()=>this.onSaveTable(record, index)} className="btn-link">保存</a>
          <a href="javascript:;" onClick=${()=>this.onCancelTable(record, index)} className="btn-link">取消</a>
        </span>
      <#else>
        <span>
          <a href="javascript:;" onClick=${()=>this.onEditTable(record, index)} className="btn-link">编辑</a>
        </span>
      </#else>
      </#if>
  ` (),
  }
}

@observable editLine = null;
@autobind
onEditTable(record, index) {
  const { store: { tableEngine } } = this.props;
  this.editLine = record;
  tableEngine.setTableEdit(true, record);
}

@autobind
onCancelTable(record, index) {
  const { store: { tableEngine } } = this.props;
  tableEngine.setTableEdit(false, record);
  this.editLine = null
}

@autobind
onSaveTable(record, index) {
  const { store: { tableEngine } } = this.props;
  tableEngine.setTableEdit(false, record);
  // 调取保存接口，保存数据
  this.refTable.loadData(); // 保存成功后，刷新表格数据，this.refTable参考上一条说明
}

4. onChangeEdit编辑项在编辑态时，改变值回调函数

@autobind
onChangeEditRecord(e, code, text, record, index, callback, oldRecord) {
  /*
  * e 为ant design控件onChange的返回
  * code 为 修改列的字段编码
  * text，record, index 同表格操作render
  * callback 为表格模板分组 目标字段根据分组成员动态计算扩展回调，具体使用如下
  * oldRecord 改变前的record值
  */
  // 此处例子说明：只能输入数字，否则出现错误提示，判定为数字，则分组内汇总字段（目标字段）根据填入的数字做动态求和。
  if (/^(0|[1-9][0-9]*)$/.test(e.target.value)) {
      callback('sum'); // 参数说明：sum 为求和，avg 为求平均
  } else {
      Message.error('请输入数字');
  }
  e.target.value = e.target.value.replace(/\D/g,'')
}

5. onChangePage为点击分页回调

// 如分页埋点
@autobind
changePage(){
  AnalysisGather('test_table_paging');
}

表格内置方法

1. loadData刷新表格，使用可参考表格模板tableAction说明。

2. changeGroupMember改变分组表格的显示效果，即切换表格分组成员的默认显示/显示全部。

<ant-Button onClick={changeShow}>{show ? ('折叠分组', '展开分组')}</ant-Button>

@observable show = false;
@autobind
changeShow() {
  this.show = !this.show;
  this.refTable.changeGroupMember(this.show);
}