@aliretail/react-materials-components
Version:
201 lines (188 loc) • 6.63 kB
Markdown
---
title: ServiceArea-Usage
order: 1
---
本 Demo 演示查看物流的用法。
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
SettlementConfigurationTable,
FormComponents,
} from '@aliretail/react-materials-components';
const { setup, SchemaForm, createFormActions } = FormComponents;
setup();
const actions = createFormActions();
class App extends Component {
constructor(props) {
super(props);
this.state = {
url: {
selectUrl:
'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/getSelectList',
tableUrl:
'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/getTableList',
deleteUrl:
'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/delete',
saveUrl:
'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/save',
disabledUrl:
'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/disabled',
},
requestMap: {
// table: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// relateSelect: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// deleted: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// save: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// disabled: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
},
};
}
handleSave = () => {
console.log('保存');
};
handleDelete = () => {
console.log('删除');
};
handleChange = () => {
console.log('onChange');
};
render() {
const { requestMap, url } = this.state;
return (
<div style={{ width: 1000 }}>
<SettlementConfigurationTable
columns={[
{
title: '明细标识',
dataIndex: 'id',
width: '100px',
type: 'text',
},
{
title: '关联主对象',
dataIndex: 'mainModelCode',
width: '200px',
type: 'select',
},
{
title: '计费公式名称',
dataIndex: 'name',
width: '200px',
type: 'input',
},
{
title: '启用/禁用',
dataIndex: 'isDisabled',
width: '120px',
type: 'switch',
},
]}
requestMap={requestMap}
url={url}
handleChange={this.handleChange}
handleSave={this.handleSave}
handleDelete={this.handleDelete}
/>
</div>
// <SchemaForm
// actions={actions}}
// components={{ SettlementConfigurationTable }}
// schema={{
// type: 'object',
// properties: {
// gridLayout: {
// type: 'object',
// 'x-component': 'GridLayout',
// 'x-component-props': {
// isForm: true,
// align: 'left',
// },
// properties: {
// SettlementConfigurationTable: {
// title: '关联主对象',
// required: true,
// 'x-component': 'SettlementConfigurationTable',
// 'x-component-props': {
// columns: [
// {
// title: '关联主对象',
// dataIndex: 'mainModelCode',
// width: '200px',
// type: 'select',
// },
// // {
// // title: '计费公式名称',
// // dataIndex: 'name',
// // width: '100px',
// // type: 'input',
// // },
// // {
// // title: '启用/禁用',
// // dataIndex: 'isDisabled',
// // width: '120px',
// // type: 'switch',
// // },
// ],
// requestMap: {
// table: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// relateSelect: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// deleted: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// save: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// disabled: {
// appCode: 'retailforce_oms',
// apiCode: 'distribution_item_authorized_items_search',
// params: { name: 'test', id: '1212' },
// },
// },
// handleChange: this.handleChange,
// handleSave: this.handleSave,
// handleDelete: this.handleDelete,
// },
// },
// },
// },
// },
// }}
// />
);
}
}
ReactDOM.render(<App />, mountNode);
```