数据开放策略UI占位与基础方法

src/components/chart/distributeBox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Modal, Table, Col, Row, Button, Input} from 'antd'
+import { Modal, Table, Col, Row, Button, Input, Icon} from 'antd'
 import { connect } from 'dva'
 
 const Search = Input.Search;
@@ -7,15 +7,25 @@ const Search = Input.Search;
 const columns = [{
     title: '策略名',
     dataIndex: 'policyName',
-    render: policyName => <span>{policyName}</span>
+    render: policyName => <span>{policyName}<Icon type='copy'/></span>
 }, {
     title: '分发对象',
     dataIndex: 'targets',
-    render: targets => {return targets.map(item => {return <p>{item.value}</p>})}
+    render: targets => {return (
+        <div>
+            {targets.map(item => {return <p>{item.value}</p>})}
+            <Button>添加对象</Button>
+        </div>
+    )}
 }, {
     title: '行开放策略',
     dataIndex: 'rowFilters',
-    render: rowFilters => {return rowFilters.map(filter => {return <p>{filter.value}</p>})}
+    render: rowFilters => {return (
+        <div>
+            {rowFilters.map(filter => {return <p>{filter.value}</p>})}
+            <Button>设置规则</Button>
+        </div>
+    )}
 }]
 
 const data = [{
@@ -33,7 +43,7 @@ class DistributeBox extends React.Component {
         this.state = {
             filterLabel: '',
         }
-    }
+    } 
     render() {
         const { selectedRecord } = this.state;
         const { dataSource, visibleDistributeBox, hideBox } = this.props

src/components/datasource/accessConfig.jsx

@@ -1,64 +1,119 @@
 import React from 'react'
 import { connect } from 'dva'
 import '../../models/dataSource'
-import { Table, Input, Col, Button } from 'antd'
+import { Table, Input, Col, Button, Switch, Icon } from 'antd'
+import PolicyRuleBox from './policyRuleBox'
+import AccessObjectBox from './accessObjectBox'
 
 const Search = Input.Search;
 
-const DataSourceAccessConfig = ({ dataSource, dispatch }) => {
+class DataSourceAccessConfig extends React.Component{
+    constructor(props){
+        super(props);
+        this.state={
+            visibleAccessObjectBox: false,
+            visiblePolicyRuleBox: false
+        }
+    } 
 
-    const columns = [{
-        title: '策略名',
-        dataIndex: 'policyName',
-        render: policyName => <span>{policyName}</span>
-    }, {
-        title: '开放对象',
-        dataIndex: 'targets',
-        render: targets => {return targets.map(item => {return <p>{item.value}</p>})}
-    }, {
-        title: '行开放策略',
-        dataIndex: 'rowFilters',
-        render: rowFilters => {return rowFilters.map(filter => {return <p>{filter.value}</p>})}
-    }, {
-        title: '列开放策略',
-        dataIndex: 'columns',
-        render: columns => {return columns.filter((column) => !column.enabled).map(column => {return <p>屏蔽：{column.alias}</p>})}
-    }];
+    hideAccessObjectBox= () => {
+        this.setState(
+            {visibleAccessObjectBox:false})
+    }
 
-    const data = [{
-        key: '1',
-        policyName: '开放策略1',
-        targets: [{value:'部门为销售'}, {value:'部门为售后'}],
-        rowFilters: [{value:'部门字段包含售后，销售'}, {value:'公司名包含公司A'}],
-        columns: [{name:'department', alias:'部门', enabled: true}, {name:'company', alias:'公司', enabled: false}]
-    }];
+    hidePolicyRuleBox= () => {
+        this.setState(
+            {visiblePolicyRuleBox:false})
+    }
 
-    return (
-        <Table
-            columns={columns}
-            dataSource={data}
-            bordered
-            title={() => {
+
+    render() {
+        const { dataSource, dispatch } = this.props
+        const { visibleAccessObjectBox, visiblePolicyRuleBox } = this.state
+        const columns = [{
+            title: '策略名',
+            dataIndex: 'policyName',
+            render: policyName => <span>{policyName}<Icon type='copy' /></span>
+        }, {
+            title: '开放对象',
+            dataIndex: 'targets',
+            render: targets => {
                 return (
-                    <div style={{display:"flex", justifyContent:"space-between"}}>
-                        <Col>
-                            <Search  
-                                style={{display:"inline"}}
-                                placeholder="input search text"
-                                onSearch={value => console.log(value)}
-                                enterButton
-                            />
-                        </Col>
-                        <Col>
-                            <Button>显示影响</Button>
-                            <Button>新增策略</Button>
-                        </Col>
-                    </div>) }
+                    <div>
+                        {targets.map((item,index) => { return <p key={index}>{item.value}</p> })}
+                        <Button onClick={() => {this.setState({visibleAccessObjectBox:true})}}>添加对象</Button>
+                    </div>
+                )
             }
-        />
-    );
-}
+        }, {
+            title: '行开放策略',
+            dataIndex: 'rowFilters',
+            render: rowFilters => {
+                return (
+                    <div>
+                        {rowFilters.map((filter, index) => { return <p key={index}>{filter.value}</p> })}
+                        <Button onClick={() => {this.setState({visiblePolicyRuleBox:true})}}>设置策略</Button>
+                    </div>
+                )
+            }
+        }, {
+            title: '列开放策略',
+            dataIndex: 'columns',
+            render: columns => { return columns.filter((column) => !column.enabled).map((column, index) => { return (<span key={index}>全部开放</span>) }) }
+        }];
+
+        const data = [{
+            key: '1',
+            policyName: '开放策略1',
+            targets: [{ value: '部门为销售' }, { value: '部门为售后' }],
+            rowFilters: [{ value: '部门字段包含售后，销售' }, { value: '公司名包含公司A' }],
+            columns: [{ name: 'department', alias: '部门', enabled: true }, { name: 'company', alias: '公司', enabled: false }]
+        }];
 
+        return (
+            <div>
+                <Table
+                    columns={columns}
+                    dataSource={data}
+                    bordered
+                    title={() => {
+                        return (
+                            <div style={{ display: "flex", justifyContent: "space-between" }}>
+                                <Col span={4}>
+                                    <Search
+                                        style={{ display: "inline" }}
+                                        placeholder="input search text"
+                                        onSearch={value => console.log(value)}
+                                        enterButton
+                                    />
+                                </Col>
+                                <Col span={4}>
+                                    <Switch></Switch><span>完全开放</span>
+                                </Col>
+                                <Col span={8}>
+                                </Col>
+                                <Col span={4}>
+                                    <Button>显示影响</Button>
+                                    <Button>新增策略</Button>
+                                </Col>
+                            </div>)
+                    }
+                    }
+                />
+            <AccessObjectBox 
+                visibleAccessObjectBox={visibleAccessObjectBox} 
+                onCancel={this.hideAccessObjectBox}
+            />
+            <PolicyRuleBox 
+                visiblePolicyRuleBox={visiblePolicyRuleBox}
+                onCancel={this.hidePolicyRuleBox}
+            
+            />
+            </div>
+        );
+            }
+        }
+        
 function mapStateToProps({ present: {dataSource} }) {
     return { dataSource }
 }

src/components/datasource/accessObjectBox.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Modal } from 'antd'
+
+
+class AccessObjectBox extends React.Component {
+    render() {
+        const { visibleAccessObjectBox, onCancel} = this.props
+        return (
+            <Modal
+                visible={visibleAccessObjectBox}
+                onCancel={onCancel}
+            >
+                <span>Test</span>
+            </Modal>
+        )
+    }
+}
+
+export default AccessObjectBox

src/components/datasource/policyRuleBox.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Modal } from 'antd'
+
+
+class PolicyRuleBox extends React.Component {
+    render() {
+        const { visiblePolicyRuleBox, onCancel } = this.props
+        return (
+            <Modal 
+                visible={visiblePolicyRuleBox}
+                onCancel={onCancel}
+            >
+                <span>Test</span>
+            </Modal>
+        )
+    }
+}
+
+export default PolicyRuleBox