三个策略配置器初稿

gitbook/product/permission.md

@@ -1,7 +1,7 @@
 # 用户权限模型的设计概念（初稿）
 ## 角色
 - 阅读者：系统全体用户均为阅读者，可以作为图表/看板的分发对象，阅读分析者制作的图表/看板信息。
-- 分析者：由管理员定义，可以制作图表和看板，使用图表/看板分发策略将作品分发给指定用户（第三期预定：可以上传csv/xlsx作为数据源）。
+- 分析者：数据开放策略的对象为分析者，可以制作图表和看板，使用图表/看板分发策略将作品分发给指定用户（第三期预定：可以上传csv/xlsx作为数据源）。
 - 管理员：系统部署后的根账号为始祖管理员，后续可以新增管理员；可以新增数据源，并使用数据开放策略将数据源开放给分析者，供分析者制作图表/看板。
     - 注：管理员同时也具有分析者的所有权限
 
@@ -11,7 +11,7 @@
 - 每条策略都可以单独设置是否启用，也可以删除单条策略；为操作方便，策略管理界面中可以点击按钮复制策略。
 - 每个数据源都有一套`数据开放策略`，其策略对象决定了谁有权限查看并使用该数据源制作图表，策略规则决定了其获得的数据源开放的程度。
     - 创建数据源后会进行数据开放策略初始化：数据源创建者成为该数据源的第一条开放策略的策略对象，对应的策略规则是“所有数据”。
-    - 数据源创建完成之后，创建者需进一步添加新策略将数据开放给系统中的分析者；只有分析者可以成为数据开放策略的对象。
+    - 数据源创建完成之后，创建者需进一步添加新策略将数据开放给系统中的分析者
     - 客户端尝试获取可用数据源列表时，服务端会验证该用户是否是分析者，验证失败则拒绝服务，验证成功则会查询对该分析者开放的数据源并形成列表返回。
     - 客户端尝试使用一个数据源时，服务端会验证请求者是否为该数据源的开放对象，验证失败则拒绝服务，验证成功则会获取对应的数据开放策略规则，对数据进行处理后返回。
 - 每个图表都有一套`图表分发策略`， 其策略对象决定了谁有权限查看该图表，策略规则决定了其查看图表时对应的数据开放的程度。
@@ -45,7 +45,7 @@
 
 ## 用户组概念与管理
 1. 系统部署后，自动设有一个根账号作为（原始）管理员（管理员也可以创建其他管理员），
-2. 系统中每个用户都是`阅读者`；在此之上，管理员可以将任何用户设定为`分析者`。
+2. 系统中每个用户都是`阅读者`；在此之上，管理员设置的数据分发策略的对象即为`分析者`(无需作另行判断)。
 3. 为了实现系统的策略设计，系统引入了用户组的概念用于定位策略对象，由管理员管理用户组
 4. 引入用户组概念后，设置策略对象时可以用以下方式筛选用户：
     1. 用户名/姓名
@@ -62,9 +62,8 @@
 
 ## 数据开放策略设计流程
 1. 使用对象匹配器设置开放对象（分析者）：
-    1. 开放对象必须属于`分析者`用户组
-    2. `注：需进一步讨论对象匹配器设计`开放对象由多条判断语句定义，每条判断语句匹配到具体的用户，最后取其与并集
-    3. 判断语句中可以按照以下方式定位应用对象：
+    1. `注：需进一步讨论对象匹配器设计`开放对象由多条判断语句定义，每条判断语句匹配到具体的用户，最后取其与并集
+    2. 判断语句中可以按照以下方式定位应用对象：
         1. 用户名
         2. 姓名
         3. 部门

src/components/admin/userGroupManagement.jsx

@@ -1,20 +1,30 @@
 import React from 'react';
+import { Table, Button } from 'antd'
 
 const columns = [{
     title: '用户组名',
     dataIndex: 'userGroupName',
 }, {
-    title: '受保护',
-    dataIndex: 'protected',
+    title: '创建时间',
+    dataIndex: 'createTime'
+}, {
+    title: '创建人',
+    dataIndex: 'createBy'
+}, {
+    title: '描述',
+    dataIndex: 'description'
 }, {
     title: '操作',
-    dataIndex: 'operation'
+    dataIndex: 'operation',
+    render: () => { return <span>查看组成员  删除用户组</span>}
 }];
 
 const data = [{
     key: 1,
-    userGroupName: '管理员',
-    protected: true,
+    userGroupName: 'UAS开发组',
+    createTime: '2018-08-21',
+    createBy: 'xiaoct',
+    description: '就是UAS开发组啦！'
 }]
 
 class UserGroupManagement extends React.Component {
@@ -22,12 +32,26 @@ class UserGroupManagement extends React.Component {
         super(props);
         this.state = {
             selectedRowKeys: []
+
         }
     }
 
+    onSelectChange = (selectedRowKeys) => {
+        console.log('selectedRowKeys changed: ', selectedRowKeys);
+        this.setState({ selectedRowKeys });
+    }
+
     render() {
+        const { selectedRowKeys } = this.state;
+        const rowSelection = {
+            selectedRowKeys,
+            onChange: this.onSelectChange,
+        };
+        const hasSelected = selectedRowKeys.length > 0;
         return (
-            <div>用户组管理</div>
+            <div>
+                <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
+            </div>
         );
     }
 }

src/components/admin/userManagement.jsx

@@ -5,6 +5,9 @@ import { Table, Button, Tag } from 'antd'
 const columns = [{
     title: '用户名',
     dataIndex: 'username',
+    width: '150px',
+    render: (username, record) => {
+        return (<span>{username}<Tag style={{display: record.isAdmin ? 'inline' : 'none' }}color="magenta">管理员</Tag></span>)}
 }, {
     title: '姓名',
     dataIndex: 'fullname',
@@ -17,15 +20,14 @@ const columns = [{
 }, {
     title: '岗位',
     dataIndex: 'position',
-}, {
-    title: '系统权限组',
-    dataIndex: 'systemGroup',
-    render: systemGroup => systemGroup.map(item => <Tag color="magenta">{item}</Tag> )
-
 }, {
     title: '用户组',
     dataIndex: 'userGroup',
     render: userGroup => userGroup.map(item => <Tag color="magenta">{item}</Tag> )
+}, {
+    title: '操作',
+    dataIndex: 'operation',
+    render: () => { return <span>设置用户组  设置为管理员</span>}
 }];
 
 const data = [{
@@ -35,7 +37,7 @@ const data = [{
     email: 'xiaoct@usoftchina.com',
     department: 'UAS开发部',
     position: '软件工程师',
-    systemGroup: ['管理员', '分析者'],
+    isAdmin: true,
     userGroup: ['BI项目组', '产品组']
 }, ]
 

src/components/chart/distributeBox.jsx

@@ -1,52 +1,78 @@
 import React from 'react'
-import { Modal, Table, Col, Row, Button, Input, Icon} from 'antd'
+import { Modal, Table, Col, Row, Button, Input, Icon, Switch} from 'antd'
 import { connect } from 'dva'
+import DistributeObjectBox from './distributeObjectBox';
+import DistributePolicyRuleBox from './distributePolicyRuleBox';
 
 const Search = Input.Search;
 
-const columns = [{
-    title: '策略名',
-    dataIndex: 'policyName',
-    render: policyName => <span>{policyName}<Icon type='copy'/></span>
-}, {
-    title: '分发对象',
-    dataIndex: 'targets',
-    render: targets => {return (
-        <div>
-            {targets.map(item => {return <p>{item.value}</p>})}
-            <Button>添加对象</Button>
-        </div>
-    )}
-}, {
-    title: '行开放策略',
-    dataIndex: 'rowFilters',
-    render: rowFilters => {return (
-        <div>
-            {rowFilters.map(filter => {return <p>{filter.value}</p>})}
-            <Button>设置规则</Button>
-        </div>
-    )}
-}]
-
-const data = [{
-    key: '1',
-    policyName: '分发策略1',
-    targets: [{value:'部门为销售'}, {value:'部门为售后'}],
-    rowFilters: [{value:'部门字段包含售后，销售'}, {value:'公司名包含公司A'}],
-    columns: [{name:'department', alias:'部门', enabled: true}, {name:'company', alias:'公司', enabled: false}]
-}];
-
 
 class DistributeBox extends React.Component {
     constructor(props){
         super(props);
         this.state = {
             filterLabel: '',
+            visibleDistributeObjectBox: false,
+            visibleDistributePolicyRuleBox: false,
         }
     } 
+
+    hideDistributeObjectBox= () => {
+        this.setState(
+            {visibleDistributeObjectBox:false})
+    }
+
+    hideDistributePolicyRuleBox= () => {
+        this.setState(
+            {visibleDistributePolicyRuleBox:false})
+    }
     render() {
-        const { selectedRecord } = this.state;
+        const { selectedRecord, visibleDistributeObjectBox, visibleDistributePolicyRuleBox } = this.state;
         const { dataSource, visibleDistributeBox, hideBox } = this.props
+
+        const columns = [
+            {
+                title: '启用',
+                dataIndex:'enabled',
+                render: enabled => <Switch defaultChecked={enabled} />
+            },
+            {
+            title: '策略名',
+            dataIndex: 'policyName',
+            render: policyName => <span>{policyName}<Icon type='copy'/></span>
+        }, {
+            title: '分发对象',
+            dataIndex: 'targets',
+            render: targets => {return (
+                <div>
+                    {targets.map((item, index) => {return <p key={index}>{item.value}</p>})}
+                    <Button onClick={() => {this.setState({visibleDistributeObjectBox: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({visibleDistributePolicyRuleBox:true})}}>设置规则</Button>
+                </div>
+            )}
+        }, {
+            title: '操作',
+            dataIndex: 'operation',
+            render: () => { return <span>预览  删除</span>}
+        }]
+        
+        const data = [{
+            key: '1',
+            enabled: true,
+            policyName: '分发策略1',
+            targets: [{value:'部门为销售'}, {value:'部门为售后'}],
+            rowFilters: [{value:'部门字段包含售后，销售'}, {value:'公司名包含公司A'}],
+            columns: [{name:'department', alias:'部门', enabled: true}, {name:'company', alias:'公司', enabled: false}]
+        }];
+
         return (
             <Modal
                 width={1200}
@@ -61,28 +87,39 @@ class DistributeBox extends React.Component {
                 maskClosable={false}
                 destroyOnClose={true}
             >
-            <Table
-            columns={columns}
-            dataSource={data}
-            bordered
-            title={() => {
-                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>
+                    <Table
+                        columns={columns}
+                        dataSource={data}
+                        bordered
+                        title={() => {
+                            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>
+                                    </Col>
+                                </div>
+                            )
+                        }}
+                    />
+                    <DistributeObjectBox 
+                        visibleDistributeObjectBox={visibleDistributeObjectBox}
+                        onCancel={this.hideDistributeObjectBox}
+                    />
+                    <DistributePolicyRuleBox
+                        visibleDistributePolicyRuleBox={visibleDistributePolicyRuleBox}
+                        onCancel={this.hideDistributePolicyRuleBox}
+                    />
+                </div>
+            
             </Modal>
         )
 

src/components/chart/distributeObjectBox.jsx

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

src/components/chart/distributePolicyRuleBox.jsx

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

src/components/chart/list.jsx

@@ -403,11 +403,6 @@ class ChartList extends React.Component {
                                             visibleChooseDataSourceBox: false
                                         });
                                     }}/>
-                                    <DistributeBox visibleDistributeBox={visibleDistributeBox} selectedRecord={this.state.selectedRecord} hideBox={() => {
-                                        this.setState({
-                                            visibleDistributeBox: false
-                                        });
-                                    }}/>
                                 </Col>
                             </Col>
                         </Row>
@@ -417,6 +412,11 @@ class ChartList extends React.Component {
                         </div>
                     </Card>
                 </Content>
+                <DistributeBox visibleDistributeBox={visibleDistributeBox} selectedRecord={this.state.selectedRecord} hideBox={() => {
+                                        this.setState({
+                                            visibleDistributeBox: false
+                                        });
+                                    }}/>
             </Layout>
         )
     }

src/components/common/navigator.jsx

@@ -59,8 +59,8 @@ class Navigator extends React.Component {
             <div className='navigator-right'>
                 <Dropdown overlay={userMenu} trigger={['click']}>
                     <div>
-                        {/* <Avatar size={64} icon="user" />
-                        <span> User Name </span> */}
+                        <Avatar size={64} icon="user" />
+                        <span> User Name </span>
                     
                     </div>
                 </Dropdown>

src/components/dashboard/distributeBox.jsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import { Modal, Table, Col, Row, Button, Input, Icon, Switch} from 'antd'
+import { connect } from 'dva'
+import DistributeObjectBox from './distributeObjectBox';
+import DistributePolicyRuleBox from './distributePolicyRuleBox';
+
+const Search = Input.Search;
+
+
+class DistributeBox extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            filterLabel: '',
+            visibleDistributeObjectBox: false,
+            visibleDistributePolicyRuleBox: false,
+        }
+    } 
+
+    hideDistributeObjectBox= () => {
+        this.setState(
+            {visibleDistributeObjectBox:false})
+    }
+
+    hideDistributePolicyRuleBox= () => {
+        this.setState(
+            {visibleDistributePolicyRuleBox:false})
+    }
+    render() {
+        const { selectedRecord, visibleDistributeObjectBox, visibleDistributePolicyRuleBox } = this.state;
+        const { dataSource, visibleDistributeBox, hideBox } = this.props
+
+        const columns = [
+            {
+                title: '启用',
+                dataIndex:'enabled',
+                render: enabled => <Switch defaultChecked={enabled} />
+            },
+            {
+            title: '策略名',
+            dataIndex: 'policyName',
+            render: policyName => <span>{policyName}<Icon type='copy'/></span>
+        }, {
+            title: '分发对象',
+            dataIndex: 'targets',
+            render: targets => {return (
+                <div>
+                    {targets.map((item, index) => {return <p key={index}>{item.value}</p>})}
+                    <Button onClick={() => {this.setState({visibleDistributeObjectBox: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({visibleDistributePolicyRuleBox:true})}}>设置规则</Button>
+                </div>
+            )}
+        }, {
+            title: '操作',
+            dataIndex: 'operation',
+            render: () => { return <span>预览  删除</span>}
+        }]
+        
+        const data = [{
+            key: '1',
+            enabled: true,
+            policyName: '分发策略1',
+            targets: [{value:'部门为销售'}, {value:'部门为售后'}],
+            rowFilters: [{value:'部门字段包含售后，销售'}, {value:'公司名包含公司A'}],
+            columns: [{name:'department', alias:'部门', enabled: true}, {name:'company', alias:'公司', enabled: false}]
+        }];
+
+        return (
+            <Modal
+                width={1200}
+                className='distribute-box'
+                title={
+                    <Row>看板分发策略
+                    </Row>
+                }
+                visible={visibleDistributeBox}
+                onOk={this.okHandler}
+                onCancel={hideBox}
+                maskClosable={false}
+                destroyOnClose={true}
+            >
+                <div>
+                    <Table
+                        columns={columns}
+                        dataSource={data}
+                        bordered
+                        title={() => {
+                            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>
+                                    </Col>
+                                </div>
+                            )
+                        }}
+                    />
+                    <DistributeObjectBox 
+                        visibleDistributeObjectBox={visibleDistributeObjectBox}
+                        onCancel={this.hideDistributeObjectBox}
+                    />
+                    <DistributePolicyRuleBox
+                        visibleDistributePolicyRuleBox={visibleDistributePolicyRuleBox}
+                        onCancel={this.hideDistributePolicyRuleBox}
+                    />
+                </div>
+            
+            </Modal>
+        )
+
+    }
+    
+}
+
+function mapStateToProps({ present: { dataSource } }) {
+    return { dataSource: dataSource };
+}
+
+export default connect(mapStateToProps)(DistributeBox)

src/components/dashboard/distributeObjectBox.jsx

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

src/components/dashboard/distributePolicyRuleBox.jsx

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

src/components/dashboard/list.jsx

@@ -3,6 +3,7 @@ import { Layout, Button, Icon, Input, Menu, Dropdown, Card, Col, Row, Popover, B
 import { connect } from 'dva'
 import { dateFormat } from '../../utils/baseUtils'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
+import DistributeBox from './distributeBox'
 import 'ant-design-pro/dist/ant-design-pro.css'
 import GroupSelector from '../datasource/groupSelector'
 import './list.less'
@@ -192,6 +193,11 @@ class ChartList extends React.Component {
                         </div>
                     </Card>
                 </Content>
+                <DistributeBox visibleDistributeBox={visibleDistributeBox} selectedRecord={this.state.selectedRecord} hideBox={() => {
+                                        this.setState({
+                                            visibleDistributeBox: false
+                                        });
+                                    }}/>
             </Layout>
         )
     }

src/components/datasource/accessConfig.jsx

@@ -31,6 +31,10 @@ class DataSourceAccessConfig extends React.Component{
         const { dataSource, dispatch } = this.props
         const { visibleAccessObjectBox, visiblePolicyRuleBox } = this.state
         const columns = [{
+            title:'启用',
+            dataIndex:'enabled',
+            render: enabled => <Switch defaultChecked={enabled} />
+        },{
             title: '策略名',
             dataIndex: 'policyName',
             render: policyName => <span>{policyName}<Icon type='copy' /></span>
@@ -60,10 +64,15 @@ class DataSourceAccessConfig extends React.Component{
             title: '列开放策略',
             dataIndex: 'columns',
             render: columns => { return columns.filter((column) => !column.enabled).map((column, index) => { return (<span key={index}>全部开放</span>) }) }
+        }, {
+            title: '操作',
+            dataIndex: 'operation',
+            render: () => { return <span>预览  删除</span>}
         }];
 
         const data = [{
             key: '1',
+            enabled: true,
             policyName: '开放策略1',
             targets: [{ value: '部门为销售' }, { value: '部门为售后' }],
             rowFilters: [{ value: '部门字段包含售后，销售' }, { value: '公司名包含公司A' }],
@@ -93,7 +102,6 @@ class DataSourceAccessConfig extends React.Component{
                                 <Col span={8}>
                                 </Col>
                                 <Col span={4}>
-                                    <Button>显示影响</Button>
                                     <Button>新增策略</Button>
                                 </Col>
                             </div>)