Skip to content

S
shuniu-admin-react
Commit 712bedf8 authored by superman's avatar superman
Browse files
Options

1

parent bc005bb2
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 170 deletions
package.json
View file @ 712bedf8
......@@ -2,7 +2,7 @@
"private": true,
"entry": {},
"dependencies": {
"antd": "^1.1.0",
"antd": "^1.8.0",
"atool-build": "^0.7.1",
"babel-plugin-antd": "^0.4.0",
"babel-plugin-transform-runtime": "^6.8.0",
......@@ -57,4 +57,4 @@
"start": "dora --plugins \"proxy,webpack,webpack-hmr,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
"test": "atool-test-mocha ./src/**/__tests__/*-test.js"
}
}
}
\ No newline at end of file
src/components/ProductForm/ElementForm.jsx
View file @ 712bedf8
......@@ -64,8 +64,8 @@ export default class ElementForm extends Component {
elements: BaseElementTransform(nextProps.product.elements)
});
}
}
console.log(nextProps);
}
/**
......@@ -118,85 +118,80 @@ export default class ElementForm extends Component {
render() {
const {form:{getFieldProps}, loading, isEdit} = this.props;
console.log(this.state.elements);
return (
<Spin spinning={loading}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)}>
<Row style={{padding:'0 20px'}}>
<Col span="24">
{
isEdit ? //或者自定义其他要素
<div>
<Form.Item>
<h3>可以设置以下要素</h3>
<p>总规模、投资亮点、托管方、结算方式、资金用途、融资方、担保主体、风控措施、还款来源、发行方、认购起点、大小额配比</p>
</Form.Item>
<Form.Item>
{
this.state.elements.map((item, index)=>
<div key={item.key} style={{marginBottom:8}}>
<Input.Group>
<Col span="6">
<Input placeholder="标题"
{...getFieldProps(item.key + '.title', {
initialValue: item.title
})}
/>
</Col>
<Col span="10">
<Input type="textarea" placeholder="内容" autosize
{...getFieldProps(item.key + '.content', {
initialValue: item.content
})}
/>
</Col>
<Col span="4">
<Icon type="cross" title="删除"
onClick={this.handleRemoveElement.bind(this, index)}/>
</Col>
</Input.Group>
</div>
)
}
</Form.Item>
</div>
:
this.state.elements.length ?
<Form.Item>
<table className="data-grid">
<colgroup>
<col width="150px"/>
<col />
</colgroup>
<thead>
<tr>
<th>元素标题</th>
<th>元素内容</th>
</tr>
</thead>
<tbody>
{
this.state.elements.map(item=>
item.title && item.content &&
<tr key={item.key}>
<th>{item.title}</th>
<td {...innerHTML(item.content, true)}></td>
</tr>
)
}
</tbody>
</table>
</Form.Item>
:
<Form.Item {...footerFormSubmitLayout}>
还没有设置过任何基本要素
</Form.Item>
}
<Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
<Form horizontal onSubmit={this.handleSubmit.bind(this)} style={{padding:'0 20px'}}>
{
isEdit ? //或者自定义其他要素
<Form.Item>
<h3>可以设置以下要素</h3>
<p>总规模、投资亮点、托管方、结算方式、资金用途、融资方、担保主体、风控措施、还款来源、发行方、认购起点、大小额配比</p>
{
isEdit ?
<span>
this.state.elements.map((item, index)=>
<div key={item.key} style={{marginBottom:8}}>
<Input.Group>
<Col span="6">
<Input placeholder="标题"
{...getFieldProps(item.key + '.title', {
initialValue: item.title
})}
/>
</Col>
<Col span="10">
<Input type="textarea" placeholder="内容" autosize
{...getFieldProps(item.key + '.content', {
initialValue: item.content
})}
/>
</Col>
<Col span="4">
<Icon type="cross" title="删除"
onClick={this.handleRemoveElement.bind(this, index)}/>
</Col>
</Input.Group>
</div>
)
}
</Form.Item>
:
this.state.elements.length ?
<Form.Item>
<table className="data-grid" style={{maxWidth:600}}>
<colgroup>
<col width="150px"/>
<col />
</colgroup>
<thead>
<tr>
<th>元素标题</th>
<th>元素内容</th>
</tr>
</thead>
<tbody>
{
this.state.elements.map(item=>
item.title && item.content &&
<tr key={item.key}>
<th>{item.title}</th>
<td {...innerHTML(item.content, true)}/>
</tr>
)
}
</tbody>
</table>
</Form.Item>
:
<Form.Item {...footerFormSubmitLayout}>
还没有设置过任何基本要素
</Form.Item>
}
<Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
{
isEdit ?
<span>
<Button size="large" onClick={this.handleAddElement.bind(this)}
style={{marginRight:'1em'}}>
<Icon type="plus"/>添加
......@@ -205,19 +200,19 @@ export default class ElementForm extends Component {
<Icon type="save"/>保存
</Button>
</span>
:
<Button type="primary" onClick={e=>{
:
<Button type="primary" onClick={e=>{
e.preventDefault();
this.props.dispatch({
type:'UPDATE_PRODUCT'
});
}}>
<Icon type="edit"/>编辑
</Button>
}
{
!this.props.isCreate &&
<Button onClick={e=>{
<Icon type="edit"/>编辑
</Button>
}
{
!this.props.isCreate &&
<Button onClick={e=>{
e.preventDefault();
isEdit ?
this.props.dispatch({
......@@ -225,14 +220,13 @@ export default class ElementForm extends Component {
}) :
this.props.history.goBack();
}}
style={{marginLeft:'1em'}}>
<Icon type="rollback"/>
{isEdit ? '取消' : '返回'}
</Button>
}
</Form.Item>
</Col>
</Row>
style={{marginLeft:'1em'}}>
<Icon type="rollback"/>
{isEdit ? '取消' : '返回'}
</Button>
}
</Form.Item>
</Form>
</Spin>
);
......
src/components/ProductForm/KeyValue.jsx 0 → 100644
View file @ 712bedf8
import React, {Component, PropTypes} from 'react';
import {
Row,
Col,
Form,
Input,
Button,
Checkbox,
Select,
message,
Tabs,
Cascader,
Radio,
Upload,
Icon,
Modal,
DatePicker,
Table,
Spin
} from 'antd';
export default class KeyValue extends Component {
render(){
const {label, content, operation} = this.props;
return (
<Row>
<Col span={label.layout}>
<Input {...label.input}/>
</Col>
<Col span={content.layout}>
<Input {...content.input}/>
</Col>
<Col span={operation.layout}>
{operation.input}
</Col>
</Row>
);
}
}
src/containers/Announcement/EditItem.jsx
View file @ 712bedf8
......@@ -23,11 +23,12 @@ import {
import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader/MainHeader';
import {formItemLayout, footerFormSubmitLayout} from '../../utils';
import {formItemLayout, footerFormSubmitLayout, innerHTML} from '../../utils';
@connect(state=>({
loading: state.announcement.loading,
item: state.announcement.item,
isEdit: state.announcement.isEdit
}))
@Form.create()
export default class EditItem extends Component {
......@@ -44,7 +45,7 @@ export default class EditItem extends Component {
};
componentWillReceiveProps(nextProps) {
this.setState({isEdit: nextProps.isEdit});
}
fetchItem(id) {
......@@ -61,7 +62,7 @@ export default class EditItem extends Component {
console.log(data);
this.props.dispatch({
type: 'UPDATE_ANNOUNCEMENT_ITEM',
data
item: data
});
}
......@@ -73,13 +74,25 @@ export default class EditItem extends Component {
const operation = (
<div style={{textAlign:'right'}}>
<Button.Group>
<Button type="ghost" onClick={e=>{e.preventDefault(); this.setState({isEdit: !this.state.isEdit})}}>
<Button type="ghost"
onClick={
e=>{
e.preventDefault();
this.props.dispatch({
type: isEdit ? 'CANCEL_UPDATE_ANNOUNCEMENT' : 'UPDATE_ANNOUNCEMENT'
});
}
}>
<Icon type="edit"/>
</Button>
<Button type="ghost" onClick={e=>{
e.preventDefault();
isEdit ? this.setState({isEdit: !this.state.isEdit}) : this.props.history.goBack();
}}>
e.preventDefault();
isEdit ?
this.props.dispatch({
type: 'CANCEL_UPDATE_ANNOUNCEMENT'
}) :
this.props.history.goBack();
}}>
<Icon type="rollback"/>
</Button>
</Button.Group>
......@@ -87,8 +100,8 @@ export default class EditItem extends Component {
);
const breadcrumb = ['产品管理', '产品详情'];
const titlePart = isEdit ? '修改公告' : '公告详情';
const title = (item && item.title ? item.title + ' - ' : '') + titlePart;
const titlePart = '公告详情';
const title = (item && item.title ? item.title + ' - ' : '') + titlePart + (isEdit ? ' - 编辑' :'');
breadcrumb.push(titlePart);
......@@ -122,28 +135,38 @@ export default class EditItem extends Component {
initialValue: item.announcement
})} />
:
<p style={{maxWidth:500}}>
{item.announcement}
</p>
<p style={{maxWidth:500}} {...innerHTML(item.announcement, true)} />
}
</Form.Item>
<Form.Item {...footerFormSubmitLayout} style={{marginTop:30}}>
{
isEdit ?
<Button type="primary" htmlType="submit" loading={loading}>
<Button type="primary" onClick={this.handleSubmit.bind(this)}
loading={loading}>
<Icon type="save"/>保存
</Button>
:
<Button type="primary"
onClick={e=>{e.preventDefault(); this.setState({isEdit: !this.state.isEdit})}}>
<Button type="primary" onClick={e=>{
e.preventDefault();
this.props.dispatch({
type:'UPDATE_ANNOUNCEMENT'
});
}}>
<Icon type="edit"/>编辑
</Button>
}
<Button style={{marginLeft:'1em'}} onClick={e=>{
e.preventDefault();
isEdit ? this.setState({isEdit: !this.state.isEdit}) : this.props.history.goBack();
}}>
<Icon type="rollback"/>返回
<Button onClick={e=>{
e.preventDefault();
isEdit ?
this.props.dispatch({
type: 'CANCEL_UPDATE_ANNOUNCEMENT'
}) :
this.props.history.goBack();
}}
style={{marginLeft:'1em'}}>
<Icon type="rollback"/>
{isEdit ? '取消' : '返回'}
</Button>
</Form.Item>
</Form>
......
src/containers/Authority/EditItem.jsx
View file @ 712bedf8
......@@ -33,7 +33,7 @@ import {
NULL,
resourceActions,
enableStatusToString,
ENABLE_STATUS_LIST
ENABLE_STATUS_LIST
} from '../../utils';
import './EditItem.less';
......@@ -53,7 +53,9 @@ export default class EditItem extends Component {
this.state = {
isEdit: false,
permissions: {},
permissionsMask: 0
expandedKeys:[],
autoExpandParent: true,
checkedKeys:[]
}
}
......@@ -64,7 +66,12 @@ export default class EditItem extends Component {
};
componentWillReceiveProps(nextProps) {
this.setState({isEdit: nextProps.isEdit});
const state = {isEdit: nextProps.isEdit};
if (nextProps.item && nextProps.item.permissions && nextProps.resources) {
state.permissions = nextProps.item.permissions;
console.log('state.permissions', state.permissions);
}
this.setState(state);
};
fetchItem(id) {
......@@ -101,6 +108,24 @@ export default class EditItem extends Component {
});
}
handleExpand(expandedKeys){
console.log('onExpand', arguments);
this.setState({
expandedKeys,
autoExpandParent: false
});
}
handleCheck(checkedKeys){
this.setState({
checkedKeys
});
}
render() {
const {item, resources, loading, form:{getFieldProps}, location:{query}} = this.props;
......@@ -124,7 +149,7 @@ export default class EditItem extends Component {
e.preventDefault();
isEdit ?
this.props.dispatch({
type: 'CANCEL_UPDATE_PRODUCT'
type: 'CANCEL_UPDATE_AUTHORITY'
}) :
this.props.history.goBack();
}}>
......@@ -144,17 +169,14 @@ export default class EditItem extends Component {
//对权限资源分组
const resourcesCategoryMap = {};
//权限资源对应Controller Map;
const resourcesControllerNameMap = {};
//角色权限
const permissions = {};
const {permissions} = this.state;
const checkedKeys = [];
resources.forEach(res=> {
if (res.actionMask && res.status == 9 ) {
if (res.actionMask && res.status == 9) {
const category = res.category || '其他';
const map = resourcesCategoryMap[category] || [];
......@@ -163,29 +185,32 @@ export default class EditItem extends Component {
const permisAction = permisMask && resourceActions(permisMask) || [];
const permisActionMap = {};
if(permisAction.length){
permisAction.forEach(pac=>{
if (permisAction.length) {
permisAction.forEach(pac=> {
permisActionMap[pac.mask] = pac;
});
}
res.action = resourceActions(res.actionMask);
res.action.forEach(ac=>{
if(permisActionMap[ac.mask]){
ac.checked = true;
checkedKeys.push(['a', res.controllerName, ac.mask].join('-'));
}
});
map.push(res);
resourcesCategoryMap[category] = map;
if (isEdit) {
res.action = resourceActions(res.actionMask);
res.action.forEach(ac=> {
if (permisActionMap[ac.mask]) {
ac.checked = true;
checkedKeys.push(['a', res.controllerName, ac.mask].join('-'));
}
});
} else {
res.action = permisAction;
}
resourcesControllerNameMap[res.controllerName] = res;
if (isEdit || permisAction.length) {
map.push(res);
resourcesCategoryMap[category] = map;
}
}
});
console.log(permissions, '选中的:', checkedKeys);
return (
......@@ -261,33 +286,45 @@ export default class EditItem extends Component {
</Form.Item>
</Col>
<Col span="12">
<Tree checkable={isEdit} defaultExpandAll={true} defaultCheckedKeys={checkedKeys} onCheck={(checkedKeys)=>{
// console.log(checkedKeys);
const cs = {};
let totalMask = 0;
checkedKeys.forEach(key=>{
const [ac, cn, mask] = key.split('-');
if(ac === 'a' && typeof mask !== 'undefined'){
let _mask = parseInt(mask, 10);
cs[cn] = (cs[cn] || 0) + _mask;
totalMask += _mask;
}
});
console.log(cs);
this.setState({
permissions: cs,
permissionsMask: totalMask
})
}}>
<Tree checkable={isEdit}
defaultExpandAll={true}
checkedKeys={this.state.checkedKeys}
onClick={
(cks)=>{
const cs = {};
cks.forEach(key=>{
const [ac, cn, mask] = key.split('-');
if(ac === 'a' && typeof mask !== 'undefined'){
let _mask = parseInt(mask, 10);
cs[cn] = (cs[cn] || 0) + _mask;
}
});
console.log(cs);
this.setState({
checkedKeys: cks,
permissions: cs,
})
}
}
>
{
Object.keys(resourcesCategoryMap).map((key, index)=>
<Tree.TreeNode className="resource-category" key={'c-'+index}
<Tree.TreeNode className="resource-category" key={'c-'+key}
title={key}>
{
resourcesCategoryMap[key].map(res=>
<Tree.TreeNode className="resource-item"
key={ res.action.length===1 ? ('a-'+res.controllerName+'-'+res.action[0].mask) :('r-' + res.id)}
title={res.description + (res.action.length===1 ? ' - '+res.action[0].title :'')}>
key={
res.action.length===1 ?
('a-'+res.controllerName+'-'+res.action[0].mask) :
('r-' + res.id)
}
title={
res.description + (
res.action.length===1 ? ' - '+res.action[0].title :''
)
}>
{
res.action.length > 1 && res.action.map(action=>
<Tree.TreeNode className="resource-action"
......@@ -302,6 +339,7 @@ export default class EditItem extends Component {
)
}
</Tree>
</Col>
</Row>
</Form>
......@@ -313,3 +351,5 @@ export default class EditItem extends Component {
}
src/entries/index.less
View file @ 712bedf8
......@@ -191,9 +191,9 @@
.data-grid {
border-spacing: 0;
width:100%;
thead{
th{
width: 100%;
thead {
th {
background-color: #f8f8f8;
}
}
......@@ -204,11 +204,26 @@
vertical-align: top;
}
&.tac{
td, th{
&.tac {
td, th {
text-align: center;
}
}
}
ul.data-grid {
width: 100%;
& > li {
display: flex;
border-bottom: 1px solid #e9e9e9;
& > span {
padding: 5px 5px;
text-align: left;
flex: none;
&.content {
flex: auto;
}
}
}
}
}
src/reducers/announcement.js
View file @ 712bedf8
......@@ -37,6 +37,12 @@ const announcement = handleActions({
['CREATE_ANNOUNCEMENT_ITEM_FAILED'](state, action){
return {...state, err: action.err, loading: false}
},
['UPDATE_ANNOUNCEMENT_START'](state){
return {...state, isEdit: true}
},
['UPDATE_ANNOUNCEMENT_END'](state){
return {...state, isEdit: false}
},
['UPDATE_ANNOUNCEMENT_ITEM'](state){
return {...state, loading: true}
},
......
src/reducers/authority.js
View file @ 712bedf8
......@@ -31,6 +31,13 @@ const authority = handleActions({
return {...state, loading: true}
},
['UPDATE_AUTHORITY_ITEM_SUCCESS'](state, action){
try {
if (action.item.permissions) {
action.item.permissions = JSON.parse(action.item.permissions)
}
}catch(err){
}
return {...state, loading: false, item: {...state.item, ...action.item}}
},
['UPDATE_AUTHORITY_ITEM_FAILED'](state, action){
......
src/sagas/announcement.js
View file @ 712bedf8
import {takeLatest} from 'redux-saga';
import {take, call, put, fork, cancel, select} from 'redux-saga/effects';
import {take, call, put, fork, cancel, select, race} from 'redux-saga/effects';
import {fetchList, fetchItem, createItem, updateItem} from '../services/announcement';
import {message} from 'antd';
......@@ -98,8 +98,21 @@ function* editItem(data) {
function* watchEdit() {
while (true) {
const {data} = yield take('UPDATE_ANNOUNCEMENT_ITEM');
yield fork(editItem, data);
yield take('UPDATE_ANNOUNCEMENT');
yield put({
type: 'UPDATE_ANNOUNCEMENT_START'
});
const {data} = yield race({
data: take('UPDATE_ANNOUNCEMENT_ITEM'),
canceled: take('CANCEL_UPDATE_ANNOUNCEMENT')
});
if (data && data.item) {
yield fork(editItem, data.item);
}
yield put({
type: 'UPDATE_ANNOUNCEMENT_END'
});
}
}
......
src/utils.js
View file @ 712bedf8
......@@ -242,7 +242,7 @@ export function innerHTML(html, safe) {
export function htmlEncode(text) {
return (text + '').replace(/[\<\>\&]/gi, (m)=> {
return (text + '').replace(/[\<\>\& ]/gi, (m)=> {
switch (m) {
case '<':
return '&lt;';
......@@ -250,6 +250,8 @@ export function htmlEncode(text) {
return '&gt;';
case '&':
return '&amp;';
case ' ':
return '&nbsp;';
default:
return m;
}
......
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