Skip to content

S
swifteditor
Commit ae45e3b9 by bert
Options

学习自动构建

parent 38da07fa
Showing with 2845 additions and 0 deletions
package.json
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
"babel-plugin-antd": "0.4.x", "babel-plugin-antd": "0.4.x",
"babel-plugin-transform-runtime": "^6.8.0", "babel-plugin-transform-runtime": "^6.8.0",
"babel-runtime": "^6.6.1", "babel-runtime": "^6.6.1",
"bce-sdk-js": "^0.1.8",
"classnames": "^2.2.3", "classnames": "^2.2.3",
"echarts-for-react": "^1.1.2",
"es3ify-loader": "^0.2.0", "es3ify-loader": "^0.2.0",
"fetch-ie8": "^1.4.0", "fetch-ie8": "^1.4.0",
"history": "^2.0.1", "history": "^2.0.1",
......
src/common/config.js 0 → 100644
/**
* [Config description]
* @type {Object}
*
* header 管理后台头部配置
* title String 标题
* icon String 标题图标
* style Object 自定义样式
*
* sider 管理后台侧栏配置
* menu Array sider列表
* openKeys Array 默认展开的sider区
* selectedKey String 默认打开的功能区
* style Object 自定义样式
*
* main 功能区域配置
* components Object 配置sider对应功能区域组件
* Feature1 Object 对应sider menu 中的功能key对 应功能组件
* style Object 配置样式
*/
const Config = {
header: {
title: "测试配置管理后台",
icon: "appstore",
style: {
padding: "15px 15px 15px 25px",
borderBottom: "1px solid #E9E9E9",
backgroundColor: "#F5F5F5"
}
},
sider: {
menu: [
{
title: "数据展示项",
key: "dataShow",
icon: "bars",
items: [
{title: "table数据展示项", key: "Feature1-1"},
{title: "simple对象数据展示项", key: "Feature1-2"},
{title: "数据可视化展示项", key: "Feature1-3"},
{title: "综合数据展示", key: "Feature1-4"}
]
},
{
title: "数据操作项目",
key: "dataOperate",
icon: "bars",
items: [
{title: "table数据搜索操作", key: "Feature2-1"},
{title: "table数据增删改操作", key: "Feature2-2"},
{title: "simple对象数据修改操作", key: "Feature2-3"}
]
},
{
title: "自定义操作项目",
key: "customOperate",
icon: "bars",
items: [
{title: "富文本编辑功能", key: "Feature3-1"}
]
},
{
title: "导航1",
key: "subTitle1",
icon: "setting",
items: [
{title: "选项1", key: "Feature1"},
{title: "选项2", key: "Feature2"},
{title: "选项3", key: "Feature3"},
{
title: "导航3",
key: "subTitle3",
icon: "",
items: [
{title: "选项6", key: "Feature6"},
{title: "选项7", key: "Feature7"},
{title: "选项8", key: "Feature8"}
]
}
]
},{
title: "导航2",
key: "subTitle2",
icon: "delete",
items: [
{title: "选项4", key: "Feature4"}
]
},{
title: "选项5",
key: "Feature5"
}
],
openKeys:['dataShow','dataOperate'],
selectedKey: "Feature1",
style: {}
},
main: {
components: {
"Feature1-1": {
title: 'table 数据展示',
component: require('../feature/Feature1-1')
},
"Feature1-2": {
title: 'simple对象 数据展示',
component: require('../feature/Feature1-2')
},
"Feature1-3": {
title: '数据可视化 数据展示',
component: require('../feature/Feature1-3')
},
"Feature1-4": {
title: '综合数据展示',
component: require('../feature/Feature1-4')
},
"Feature2-1": {
title: 'table 数据搜索操作',
component: require('../feature/Feature2-1')
},
"Feature2-2": {
title: 'table 数据增删改操作',
component: require('../feature/Feature2-2')
},
"Feature2-3": {
title: 'simple对象数据修改操作',
component: require('../feature/Feature2-3')
},
"Feature3-1": {
title: '富文本编辑区域',
component: require('../feature/Feature3-1')
},
"Feature1": {
title: '这是功能区域标题1',
component: require('../feature/Feature1')
}, // 纯数据展示
"Feature2": {
title: '这是功能区域标题2',
component: require('../feature/Feature2')
}, // 添加操作
"Feature3": {
title: '这是功能区域标题3',
component: require('../feature/Feature3')
},
"Feature4": {
title: '这是功能区域标题4',
component: require('../feature/Feature4')
},
"Feature5": {
title: '这是功能区域标题5',
component: require('../feature/Feature5')
},
"Feature6": {
title: '这是功能区域标题6',
component: require('../feature/Feature6')
},
"Feature7": {
title: '这是功能区域标题7',
component: require('../feature/Feature7')
},
"Feature8": {
title: '这是功能区域标题8',
component: require('../feature/Feature2')
}
},
style: {}
},
permission: BaiduInfo.permission,
loginUrl: BaiduInfo.loginUrl
}
export default Config;
\ No newline at end of file
src/common/util.js 0 → 100644
// 自定义的配置数据
const DateFormat = function(date, fmt) {
let o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小时
"H+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
let week = {
"0" : "/u65e5",
"1" : "/u4e00",
"2" : "/u4e8c",
"3" : "/u4e09",
"4" : "/u56db",
"5" : "/u4e94",
"6" : "/u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[date.getDay()+""]);
}
for(let k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
export default {
DateFormat : DateFormat
};
\ No newline at end of file
src/components/BDUploader.jsx 0 → 100644
import React from 'react';
import { Button, Icon, message } from 'antd';
import baidubce from 'bce-sdk-js';
let config = {
endpoint: 'http://bj.bcebos.com', //传入Bucket所在区域域名
credentials: {
ak: 'e4a6dcc47a3b46f3a5ebf0f81d0e4928', //您的AccessKey
sk: '8d26035b87e14989a4343f0e43c0ce71' //您的SecretAccessKey
}
};
let client = new baidubce.BosClient(config);
const createKey = function(ext){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
month = (month < 10) ? '0' + month: month;
let day = date.getDate();
day = (day < 10) ? '0' + day: day;
return year + '/' + month + '/' + day + '/' + (+new Date())+ '.'+ext;
}
// 百度浏览器特定文件上传组件
let BDUploader = React.createClass({
getInitialState: function() {
return {
};
},
render: function() {
return <div>
<Button type="ghost" onClick={this.openFileInput}>
<Icon type="upload" /> 文件上传
</Button>
<input type="file" ref="fileInput" style={{display:"none"}} onChange={this.uploadImg} />
</div>;
},
openFileInput: function(e){
this.refs.fileInput.click();
},
uploadImg: function(e){
let self = this;
let file = e.target.files[0]; // 获取要上传的文件
let ext = file.name.split(/\./g).pop();
let key = createKey(ext); // 保存到bos时的key，您可更改，默认以文件名作为key
let mimeType = baidubce.MimeType.guess(ext);
client.putObjectFromBlob("mbrowser", key, file, {
'Content-Type': /^text\//.test(mimeType)? mimeType+'; charset=UTF-8': mimeType
}).then(function (res) {
// 上传完成，添加您的代码
let imgUrl = config.endpoint+'/v1/mbrowser/'+key;
console.log('上传成功', imgUrl);
self.props.success&&self.props.success(imgUrl);
}).catch(function (err) {
// 上传失败，添加您的代码
self.props.error&&self.props.error(error);
});
}
});
export default BDUploader;
src/components/CreateForm.jsx 0 → 100644
import React from 'react';
import { Form, Modal, Button } from 'antd';
import CFormItem from './CreateFormItem';
let CForm = React.createClass({
getInitialState: function() {
return { visible: false };
},
render: function() {
const self = this;
const CType = this.props.CType;
const { getFieldProps } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
return CType ?
<div className="f-create">
<Button type="primary" icon="plus-circle-o" onClick={this.showModal}>添加</Button>
<Modal title="添加新对象" visible={this.state.visible} onOk={this.handleCreate} onCancel={this.hideModal}>
<Form horizontal form={this.props.form}>
{
CType.map(function(item){
//return self.dealConfigCType(item);
return <CFormItem key={item.name} getFieldProps={getFieldProps} formItemLayout={formItemLayout} item={item}/>
})
}
</Form>
</Modal>
</div>:
<div></div>
},
handleCreate: function(){
console.log('收到表单值：', this.props.form.getFieldsValue());
this.props.form.validateFields((errors, values) => {
if (!!errors) {
console.log('Errors in form!!!');
return;
}else{
console.log('Submit!!!');
this.props.submit(values);
this.hideModal();
}
});
//this.props.submit(this.props.form.getFieldsValue());
},
handleReset: function() {
this.props.form.resetFields();
},
showModal: function() {
this.setState({ visible: true });
},
hideModal: function() {
this.setState({ visible: false });
this.handleReset();
}
});
CForm = Form.create()(CForm);
export default CForm;
src/components/CreateFormItem.jsx 0 → 100644
import React from 'react';
import { Form, Select, Input, Button, Icon , DatePicker, TimePicker, Radio, Switch} from 'antd';
import { Upload, Modal, message } from 'antd';
import BDUploader from './BDUploader';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
let CFormItem = React.createClass({
getInitialState: function() {
return {
img_url:''
};
},
render: function() {
const getFieldProps = this.props.getFieldProps;
const formItemLayout = this.props.formItemLayout || {};
const item = this.props.item || {};
const defaultValue = item.defaultValue || '';
const defaultTimeValue = item.defaultValue || new Date();
const defaultImgValue = this.state.img_url || item.defaultValue || '';
switch (item.type){
case 'string':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<Input placeholder={item.placeholder||''}
{...getFieldProps(item.name, {rules:item.rules, initialValue:defaultValue})} />
</FormItem>
break;
case 'date':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" {...getFieldProps(item.name, { initialValue:defaultTimeValue})} />
</FormItem>
break;
case 'select':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<Select {...getFieldProps(item.name, { initialValue: defaultValue })} >
{
item.options.map(function(item){
return <Option key={item.value} value={item.value}>{item.text}</Option>
})
}
</Select>
</FormItem>
break;
case 'radio':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<RadioGroup {...getFieldProps(item.name, { initialValue: defaultValue })}>
{
item.options.map(function(item){
return <Radio key={item.value} value={item.value}>{item.text}</Radio>
})
}
</RadioGroup>
</FormItem>
break;
case 'switch':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<Switch {...getFieldProps(item.name, { initialValue: defaultValue})} />
</FormItem>
break;
case 'imageUpload':
return <FormItem
label={item.label}
key={item.name}
{...formItemLayout}>
<Input
{...getFieldProps(item.name, { initialValue:defaultImgValue})} />
<img className="uploadImg" src={defaultImgValue} />
<BDUploader success={this.uploadSuccess} />
</FormItem>
break;
default:
return '';
break;
}
},
uploadSuccess: function(url){
console.log(url)
this.setState({
img_url: url
})
}
});
export default CFormItem;
src/components/RetrieveForm.jsx 0 → 100644
import React from 'react';
import { Form, Select, Input, Button, Icon , DatePicker, TimePicker, Radio, Switch} from 'antd';
import { Upload, Modal, message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
let RForm = React.createClass({
render: function() {
const self = this;
const RType = this.props.RType;
return RType ?
(<div className="f-search">
<Form inline>
{
RType.map(function(item){
return self.dealConfigRType(item);
})
}
<FormItem key="search-btn">
<Button type="primary" onClick={this.handleRetrieve}>查询</Button>
</FormItem>
</Form>
</div>):
<div></div>;
},
dealConfigRType: function(item){
const { getFieldProps } = this.props.form;
switch (item.type){
case 'string':
return <FormItem
label={item.label}
key={item.name}>
<Input placeholder={item.placeholder||''}
{...getFieldProps(item.name)} />
</FormItem>
break;
case 'date':
return <FormItem
label={item.label}
key={item.name}>
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" {...getFieldProps(item.name)} />
</FormItem>
break;
case 'select':
return <FormItem
label={item.label}
key={item.name}>
<Select {...getFieldProps(item.name, { initialValue: item.defaultValue||item.options[0].value })} >
{
item.options.map(function(item){
return <Option key={item.value} value={item.value}>{item.text}</Option>
})
}
</Select>
</FormItem>
break;
case 'radio':
return <FormItem
label={item.label}
key={item.name}>
<RadioGroup {...getFieldProps(item.name, { initialValue: item.defaultValue||item.options[0].value })}>
{
item.options.map(function(item){
return <Radio key={item.value} value={item.value}>{item.text}</Radio>
})
}
</RadioGroup>
</FormItem>
break;
case 'switch':
return <FormItem
label={item.label}
key={item.name}>
<Switch {...getFieldProps(item.name, { initialValue: item.defaultValue|| false })} />
</FormItem>
break;
default:
return '';
break;
}
},
handleRetrieve: function(){
console.log('收到表单值：', this.props.form.getFieldsValue());
this.props.submit(this.props.form.getFieldsValue());
}
});
RForm = Form.create()(RForm);
export default RForm;
src/components/UpdateForm.jsx 0 → 100644
import React from 'react';
import { Form, Modal, message } from 'antd';
import CFormItem from './CreateFormItem';
let UForm = React.createClass({
getInitialState: function() {
return {
};
},
render: function() {
const self = this;
const UType = this.props.UType;
const updateItem = this.props.updateItem;
// 详情见antd form 文档
const { getFieldProps } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
return UType ?
<div className="f-update">
<Modal title="更新对象" visible={this.props.isShow} onOk={this.handleUpdate} onCancel={this.hideModal}>
<Form horizontal form={this.props.form}>
{
UType.map(function(item){
item.defaultValue = updateItem[item.name]||'';
//return self.dealConfigUType(item, defaultValue);
return <CFormItem key={item.name} getFieldProps={getFieldProps} formItemLayout={formItemLayout} item={item}/>
})
}
</Form>
</Modal>
</div>:
<div></div>
},
handleUpdate: function(){
this.props.submit(this.props.form.getFieldsValue());
},
handleReset: function() {
this.props.form.resetFields();
},
hideModal: function() {
this.props.hideForm();
this.handleReset();
}
});
UForm = Form.create()(UForm);
export default UForm;
src/feature/Feature1-1.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
// 增加(Create)、重新取得数据(Retrieve)、更新(Update)和删除(Delete)
const table_conf = {
type: 'tableList', // tableList graphList simpleObject complexObject
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 接口调用数据形式
/*
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
*/
// 模拟数据
setTimeout(function(){
let list = testData.tableList;
list.forEach(function(ele) {
ele.key = ele.docid;
});
callback(list);
}, 1000)
},
// table 列表展现配置
// {
// title table显示表题
// dataIndex 显示数据中的key
// type 展现形式 （string image link）
// render 自定义展现形式 参数 （当前数据，当前对象数据）
// sort 是否需要排序功能
// width 自定义该列宽度 否则等分
// }
//
// table 列表头标题
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link',
render: (text) => ( <span>
<a href={text}>链接</a>
</span>),
width: 50
},{
title: '日期',
dataIndex: 'date',
type: 'string',
width: 150
},{
title: '图片',
dataIndex: 'img',
type: 'image'
}
]
};
const Feature1 = FeatureSetConfig(table_conf);
export default Feature1;
src/feature/Feature1-2.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
const simple_conf = {
type: 'simpleObject',
initData: function(callback){
// 模拟数据
setTimeout(function(){
let object = testData.simpleObject;
object.key = object.docid;
callback(object);
}, 1000)
},
operate:[
{
text: '确认数据',
style: {
'marginRight': '30px'
},
callback: function(item){
console.log(item)
}
}, {
text: '展示数据',
callback: function(item){
console.log(item)
}
}
],
UType:[
{
name: 'docid',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'title',
label: '标题',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'link',
label: '链接',
type: 'string'
},{
name: 'date',
label: '日期',
type: 'date'
},{
name: 'img',
label: '图片',
type: 'imageUpload'
}
]
}
const Feature1 = FeatureSetConfig(simple_conf);
export default Feature1;
src/feature/Feature1-3.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
const graph_conf = {
type: 'graphList', // tableList graphList simpleObject complexObject
EchartStyle: {
width: '100%',
height: '450px'
},
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 模拟数据
setTimeout(function(){
let series = testData.graphList;
series.forEach(function(item) {
item.type = 'line';
item.stack = '总量'
});
callback(series);
}, 1000)
},
// 参考echarts 参数
option : {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
]
}
};
const graph_conf2 = {
type: 'graphList', // tableList graphList simpleObject complexObject
style: {
width: '100%',
height: '450px'
},
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 模拟数据
setTimeout(function(){
let series = [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
callback(series);
}, 1000)
},
// 参考echarts 参数
option : {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
}
}
};
const Feature = FeatureSetConfig(graph_conf2);
export default Feature;
src/feature/Feature1-4.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
const graph_conf = {
type: 'graphList', // tableList graphList simpleObject complexObject
EchartStyle: {
width: '100%',
height: '450px'
},
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 模拟数据
setTimeout(function(){
let series = testData.graphList;
series.forEach(function(item) {
item.type = 'line';
item.stack = '总量'
});
callback(series);
}, 1000)
},
// 参考echarts 参数
option : {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
]
}
};
const graph_conf2 = {
type: 'graphList', // tableList graphList simpleObject complexObject
EchartStyle: {
width: '100%',
height: '450px'
},
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 模拟数据
setTimeout(function(){
let series = [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
callback(series);
}, 1000)
},
// 参考echarts 参数
option : {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
}
}
};
const table_conf = {
type: 'tableList', // tableList graphList simpleObject complexObject
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 模拟数据
setTimeout(function(){
let list = testData.tableList;
list.forEach(function(ele) {
ele.key = ele.docid;
});
callback(list);
}, 1000)
},
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link',
render: (text) => ( <span>
<a href={text}>链接</a>
</span>),
width: 50
},{
title: '日期',
dataIndex: 'date',
type: 'string',
width: 150
},{
title: '图片',
dataIndex: 'img',
type: 'image'
}
]
};
const Feature1 = FeatureSetConfig(graph_conf2);
const Feature2 = FeatureSetConfig(graph_conf);
const Feature3 = FeatureSetConfig(table_conf);
const Feature = React.createClass({
render: function() {
return <div>
<Feature1 />
<Feature2 />
<Feature3 />
</div>
}
});
export default Feature;
src/feature/Feature1.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
// 增加(Create)、重新取得数据(Retrieve)、更新(Update)和删除(Delete)
const table_conf = {
type: 'tableList', // tableList graphList simpleObject complexObject
// 初始化展现的数据，使用callback 回传列表数据
// 需要手动添加唯一id key
// callback 组件数据的回调函数(接受列表数据参数)
initData: function(callback){
// 接口调用数据形式
/*
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
*/
// 模拟数据
setTimeout(function(){
let list = testData.tableList;
list.forEach(function(ele) {
ele.key = ele.docid;
});
callback(list);
}, 1000)
},
// table 列表展现配置
// {
// title table显示表题
// dataIndex 显示数据中的key
// type 展现形式 （string image link）
// render 自定义展现形式 参数 （当前数据，当前对象数据）
// sort 是否需要排序功能
// width 自定义该列宽度 否则等分
// }
//
columns: [
{
title: 'DOCID',
dataIndex: 'docid',
type: 'string'
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link',
render: (text, item) => (<span><a href={text}>{item.title}</a></span>) // 可自定义
}
]
};
const simple_conf = {
type: 'simpleObject',
initData: function(callback){
// 模拟数据
setTimeout(function(){
let object = testData.simpleObject;
object.key = object.docid;
callback(object);
}, 1000)
},
operate:[
{
text: '确认数据',
style: {
'marginRight': '30px',
'marginLeft': '80px'
},
callback: function(item){
console.log(item)
}
}, {
text: '展示数据',
callback: function(item){
console.log(item)
}
}
],
UType:[
{
name: 'docid',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'title',
label: '标题',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'link',
label: '链接',
type: 'string'
},{
name: 'date',
label: '日期',
type: 'date'
},{
name: 'img',
label: '图片',
type: 'imageUpload'
}
]
}
const Feature1 = FeatureSetConfig(simple_conf);
export default Feature1;
src/feature/Feature2-1.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(){},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(){},
Retrieve: function(data, callback){
console.log(data);
let dataI = Immutable.fromJS({
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}).merge(data);
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: dataI.toJS(),
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 可设置的查询字段
// RType 查询字段
// CType 创建字段
// UType 更新字段
RType:[
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'date',
label: '项目开始时间',
type: 'date'
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch',
defaultValue: false
}
],
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 80,
btns: [{
text: '删除',
type: 'delete'
}, {
text: '展示',
callback: function(item){
console.log(item)
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
],
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature2-2.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
let CUTpye = [
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
},{
name: 'id2',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
},{
name: 'date',
label: '项目开始时间',
type: 'date',
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch'
},{
name: 'image',
label: '背景图片',
type: 'imageUpload'
}
];
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作添加数据的请求
console.log(dataI.toJS());
let item = {
docid: (Math.random()*10000000000)|0,
title: '院依法对原省安监局局长陈炎生决定逮捕',
link: 'sdfghjcvbnmertfheiuwfhsdh'
}
// 需要设置key
item.key = item.docid;
// 模拟请求创建成功的回调
setTimeout(function(){
callback(item);
}, 1000);
},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(data, callback){
console.log(data);
},
// 创建项目所需的字段 与 更新项目所需的字段
// rules 规范可见 https://github.com/yiminghe/async-validator
CType: Immutable.fromJS(CUTpye).toJS(),
UType: Immutable.fromJS(CUTpye).toJS(),
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 120,
btns: [{
text: '更新',
type: 'update'
},{
text: '删除',
type: 'delete'
},{
text: '展示',
callback: function(item){
console.log(item)
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
],
uploadfile: function(data){
}
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature2-3.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
import Reqwest from 'reqwest';
import testData from '../common/test-data';
const simple_conf = {
type: 'simpleObject',
initData: function(callback){
// 模拟数据
setTimeout(function(){
let object = testData.simpleObject;
object.key = object.docid;
callback(object);
}, 1000)
},
Update:function(data, callback){
console.log(data);
callback(data);
},
operate:[
{
text: '确认修改',
type: 'update',
style: {
'marginRight': '30px',
'marginLight': '80px'
}
}, {
text: '展示数据',
callback: function(item){
console.log(item)
}
}
],
UType:[
{
name: 'docid',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'title',
label: '标题',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'link',
label: '链接',
type: 'string'
},{
name: 'date',
label: '日期',
type: 'date'
},{
name: 'img',
label: '图片',
type: 'imageUpload'
}
]
}
const Feature1 = FeatureSetConfig(simple_conf);
export default Feature1;
src/feature/Feature2.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200 // 列宽 可选 不填为默认均分
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 80,
btns: [{
text: '删除',
type: 'delete'
}, {
text: '展示',
callback: function(item){
alert(JSON.stringify(item));
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
]
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature3-1.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import Immutable from 'immutable';
import TinyMCE from 'react-tinymce';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const Feature = React.createClass({
getInitialState: function(){
return {
value: ''
}
},
render: function() {
let config = {
content: "<p>This is the initial content of the editor</p>",
config: {
height: '250',
plugins: [
"advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
"save table contextmenu directionality emoticons paste textcolor"
],
toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l | print preview fullpage | forecolor backcolor",
},
onChange: this.handleEditorChange
}
return <div>
<p style={{margin:'10px'}}>html文本：{this.state.value}</p>
<TinyMCE className="editor" {...config} />
</div>
},
handleEditorChange(e) {
window.e = e;
this.setState({
value: e.target.getContent()
});
},
});
export default Feature;
src/feature/Feature3.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(){},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(){},
Retrieve: function(data, callback){
console.log(data);
let dataI = Immutable.fromJS({
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}).merge(data);
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: dataI.toJS(),
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 可设置的查询字段
RType:[
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'date',
label: '项目开始时间',
type: 'date'
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch',
defaultValue: false
}
],
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 80,
btns: [{
text: '删除',
type: 'delete'
}, {
text: '展示',
callback: function(item){
console.log(item)
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
],
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature4.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作添加数据的请求
console.log(dataI.toJS());
let item = {
docid: (Math.random()*10000000000)|0,
title: '院依法对原省安监局局长陈炎生决定逮捕',
link: 'sdfghjcvbnmertfheiuwfhsdh'
}
// 需要设置key
item.key = item.docid;
// 模拟请求创建成功的回调
setTimeout(function(){
callback(item);
}, 1000);
},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(data, callback){
console.log(data);
},
Retrieve: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}).merge(data);
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: dataI.toJS(),
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 创建项目所需的字段
// rules 规范可见 https://github.com/yiminghe/async-validator
CType:[
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
},{
name: 'id2',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
},{
name: 'date',
label: '项目开始时间',
type: 'date',
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch'
},{
name: 'image',
label: '背景图片',
type: 'imageUpload'
}
],
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 120,
btns: [{
text: '删除',
type: 'delete'
}, {
text: '展示',
callback: function(item){
console.log(item)
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
]
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature5.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(data, callback){
console.log(data);
data.key = data.docid;
callback(data);
},
Retrieve: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}).merge(data);
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: dataI.toJS(),
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 更新项目所需的字段
UType:[
{
name: 'docid',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'title',
label: '标题',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'link',
label: '链接',
type: 'string'
},{
name: 'date',
label: '日期',
type: 'date'
},{
name: 'img',
label: '图片',
type: 'imageUpload'
}
],
// table 列表头标题
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link',
render: (text) => ( <span>
<a href={text}>链接</a>
</span>),
width: 50
},{
title: '日期',
dataIndex: 'date',
type: 'string',
width: 150
},{
title: '图片',
dataIndex: 'img',
type: 'image'
},{
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 120,
btns: [{
text: '更新',
type: 'update'
},{
text: '删除',
type: 'delete'
}, {
text: '展示',
callback: function(item){
console.log(item)
}
}] // 可选
}
],
uploadfile: '/umis/pushc/uploadfile'
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature6.jsx 0 → 100644
// 含有可操作 table 栏的数据展示
import React from 'react';
import FeatureSetConfig from '../component/FeatureSetConfig';
import Immutable from 'immutable';
//https://github.com/ded/reqwest
import Reqwest from 'reqwest';
const conf = {
// 初始化页面的数据 回调函数传入 items 列表
initData: function(callback){
let data = {
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: data,
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 功能模块需要时 添加 CRUD 4方法
Create: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作添加数据的请求
console.log(dataI.toJS());
let item = {
docid: (Math.random()*10000000000)|0,
title: '院依法对原省安监局局长陈炎生决定逮捕',
link: 'sdfghjcvbnmertfheiuwfhsdh'
}
// 需要设置key
item.key = item.docid;
// 模拟请求创建成功的回调
setTimeout(function(){
callback(item);
}, 1000);
},
Delete: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list'
}).merge({id: data.key});
// ... 操作删除请求
console.log(dataI.toJS());
// 模拟请求删除成功的回调
setTimeout(function(){
callback();
}, 1000)
},
Update:function(data, callback){
console.log(data);
},
Retrieve: function(data, callback){
let dataI = Immutable.fromJS({
type: 'entry_list',
num: 20,
ua: 'bd_1_1_1_5-5-0-0_1',
cuid: '00000000000000000000000000000000%7C0000000000000000',
channel: 'AA_0',
dir: 'up'
}).merge(data);
Reqwest({
url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
data: dataI.toJS(),
type: 'jsonp',
jsonpCallback: 'fn',
success: function (data) {
let lists = data.data.stream_data;
// 必须要向数据中 添加唯一的 key
lists.forEach(function(ele) {
ele.key = ele.docid;
});
callback(lists);
}
});
},
// 可设置的查询字段
RType:[
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'date',
label: '项目开始时间',
type: 'date'
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch',
defaultValue: false
}
],
// 创建项目所需的字段
// rules 规范可见 https://github.com/yiminghe/async-validator
CType:[
{
name: 'id',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
},{
name: 'id2',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称',
rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
},{
name: 'date',
label: '项目开始时间',
type: 'date',
},{
name: 'stype',
label: '项目类型Select',
type: 'select',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'rtype',
label: '项目类型Radio',
type: 'radio',
defaultValue: 'one',
options:[{
text: '选项一',
value: 'one'
},{
text: '选项二',
value: 'two'
},{
text: '选项三',
value: 'three'
}]
},{
name: 'ischange',
label: '是否过滤',
type: 'switch'
},{
name: 'image',
label: '背景图片',
type: 'imageUpload'
}
],
// 更新项目所需的字段
UType:[
{
name: 'docid',
label: '唯一标识',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'title',
label: '标题',
type: 'string',
placeholder: '请输入标示名称'
},{
name: 'link',
label: '链接',
type: 'string'
},{
name: 'date',
label: '日期',
type: 'date'
},{
name: 'img',
label: '图片',
type: 'imageUpload'
}
],
columns: [
{
title: 'DOCID', // table header 文案
dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
type: 'string', // table 内显示的类型
sort: true, // 是否需要排序
width:200
}, {
title: '标题',
dataIndex: 'title',
type: 'string'
}, {
title: '链接',
dataIndex: 'link',
type: 'link'
}, {
title: '操作',
type: 'operate', // 操作的类型必须为 operate
width: 120,
btns: [{
text: '更新',
type: 'update'
},{
text: '删除',
type: 'delete'
},{
text: '展示',
callback: function(item){
console.log(item)
}
}], // 可选
// 对应btns 的回调函数
// item为操作的单一数据对象
// callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
// callbacks: [function(item, callback){
// item.docid = 0;
// callback(item, 'update');
// },function(item, callback){
// callback(item, 'delete');
// }]
}
],
uploadfile: function(data){
}
};
const Feature2 = FeatureSetConfig(conf);
export default Feature2;
src/feature/Feature7.jsx 0 → 100644
// 纯数据展现情况列表
import React from 'react';
import { Upload, Icon } from 'antd';
import baidubce from 'bce-sdk-js';
import BDUploader from '../component/BDUploader';
const Feature7 = React.createClass({
getInitialState: function() {
return {
img_url:''
};
},
render: function() {
const self = this;
return <div>
<h3 className="f-title">{this.props.title}</h3>
<input type="text" value={this.state.img_url} />
<img src={this.state.img_url} />
<BDUploader success={this.uploadSuccess} />
</div>;
},
uploadSuccess: function(url){
console.log(url)
this.setState({
img_url: url
})
}
});
export default Feature7;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment