新增领导架构topo功能

src/consts/urlConsts.js

@@ -219,7 +219,11 @@ export const FasSerUrl = {
   uploadTextPlan: completePrefix(baseURI, 'file/plan/{appId}/texts'),
   getTreeNodeTypeUrl: completePrefix(baseURI, 'api/riskModel/riskSource/getChildTypeByPid?riskSourceId={riskSourceId}'),// 根据节点ID获取子节点可能的类型
   getAllUserUrl: completePrefix(baseURI, 'api/common/user/list'),//获取所有用户
-  queryFmeaControlObjUrl: completePrefix(baseURI, 'api/riskModel/fmea/{ids}/controlObjCount')//根据fmea id查询关联对象个数
+  queryFmeaControlObjUrl: completePrefix(baseURI, 'api/riskModel/fmea/{ids}/controlObjCount'),//根据fmea id查询关联对象个数
+  queryTopographyUrl: completePrefix(baseURI, 'api/Topography/{appId}'),//获取Topo图数据
+  updateTopographyUrl: completePrefix(baseURI, 'api/Topography/updateTopo'),//更新Topo图数据
+  queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
+  saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
 };
 
 

src/services/preControlService.js

@@ -194,3 +194,30 @@ export const queryAllUserAction = () => {
   return commonGet(FasSerUrl.getAllUserUrl);
 };
 
+/**
+ * 获取节点
+ */
+export const queryTopographyAction = (appId) => {
+  return commonGet(formatUrl(FasSerUrl.queryTopographyUrl,{ appId }));
+};
+
+/**
+ * 更新节点
+ */
+export const updateTopographyAction = (params) => {
+  return commonPost(FasSerUrl.updateTopographyUrl, params);
+};
+
+/**
+ * 获取节点详情
+ */
+export const nodeDetailTopoAction = (id) => {
+  return commonGet(formatUrl(FasSerUrl.queryNodeDetailUrl,{ id }));
+};
+
+/**
+ * 保存节点详情
+ */
+export const nodeDetailTopoSaveAction = (nodeDatil) => {
+  return commonPost(FasSerUrl.saveNodeDetailUrl, nodeDatil );
+};
\ No newline at end of file

src/styles/view/planMgmt/leaderStruct.scss

@@ -43,12 +43,198 @@
       border-right-color: rgba(201, 201, 201, 1);
       border-right-style: solid;
       border-width: 1px;
+
+      .tooltip-content {
+        width: 251px;
+        background: #345fa6;
+        box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+        opacity: 1;
+        border-radius: 7px;
+        padding: 22px 24px;
+
+        .tooltip-item {
+          height: 24px;
+          line-height: 24px;
+          font-size: 13px;
+          font-weight: bold;
+          color: white;
+
+          .item-name {
+            display: inline-block;
+          }
+
+          .item-value {
+            display: inline-block;
+            padding-left: 10px;
+          }
+
+          .amosicon {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
     }
 
     .leader-struct-right {
       width: 300px;
-      padding-top: 20px;
-      padding-left: 20px;
+      // padding-top: 20px;
+      // padding-left: 20px;
+
+      .ant-table-title{
+        display: none;
+      }
+    }
+
+  }
+  
+}
+.leader-struct-model {
+  .amos-modal-content {
+    max-height: 55rem;
+    overflow: hidden;
+
+    .control-model-line1 {
+      display: flex;
+      justify-content: space-around;
+
+      .leader-struct_input {
+        width: 13rem;
+      }
+    }
+  }
+
+  .amos-modal-header {
+    background: $biz-title-color;
+  }
+
+  .amos-modal-footer {
+    background: $biz-title-color;
+  }
+
+  .ant-table-title {
+    display: none;
+  }
+
+  .ant-table-content {
+    .editable-cell {
+      position: relative;
+    }
+
+    .editable-cell-input-wrapper,
+    .editable-cell-text-wrapper {
+      padding-right: 24px;
+    }
+
+    .editable-cell-text-wrapper {
+      padding: 5px 24px 5px 5px;
+    }
+
+    .editable-cell-icon,
+    .editable-cell-icon-check {
+      position: absolute;
+      right: 0;
+      width: 20px;
+      cursor: pointer;
+    }
+
+    .editable-cell-icon {
+      display: none;
+      line-height: 18px;
+    }
+
+    .editable-cell-icon-check {
+      line-height: 28px;
     }
+
+    .editable-cell:hover .editable-cell-icon {
+      display: inline-block;
+    }
+
+    .editable-cell-icon:hover,
+    .editable-cell-icon-check:hover {
+      color: #108ee9;
+    }
+
+    .amos-input {
+      width: 90% !important;
+    }
+
+    .control-model-measure-content {
+      .amos-input {
+        width: 90% !important;
+
+        + button {
+          width: 10% !important;
+        }
+      }
+    }
+
+    .ant-table-body {
+      max-height: 200px !important;
+      margin-right: -17px;
+      overflow-y: scroll;
+
+      .operation-items {
+        padding: 0;
+        background: white;
+        border: 0;
+      }
+    }
+
+    .ant-table-header {
+      margin-right: -17px;
+
+      table:first-child {
+        border: 0;
+
+        tr {
+          th {
+            border-top: 1px solid #e9e9e9;
+          }
+
+          th:first-child {
+            border-top: 1px solid #e9e9e9;
+            border-left: 1px solid #e9e9e9;
+          }
+
+          .operation-items {
+            padding: 0;
+            background: white;
+            border: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .control-model-measures-detail {
+    .basic-info {
+      padding-bottom: 10px;
+      line-height: 45px;
+      border-bottom: 1px solid #f2f2f2;
+    }
+
+    .patrol-page-table {
+      padding-top: 10px;
+
+      .ant-table-title {
+        display: none;
+      }
+    }
+  }
+
+  .risk-factor-select {
+    width: 15rem;
+  }
+
+  .risk-lever-input {
+    width: 15rem;
+  }
+
+  .task-work-model {
+    display: flex;
+    justify-content: space-around;
   }
 }

src/view/bizview/common/editableCell/EditableCell.js

@@ -7,9 +7,20 @@ class EditableCell extends Component {
     editable: false
   };
 
+  componentWillMount = () => {
+    const { editable } = this.props || {};
+    if(editable){
+      this.setState({editable});
+    }
+  };
+
+
   handleChange = e => {
     const value = e.target.value;
     this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
   };
 
   check = () => {

src/view/planMgmt/common/conf.js

@@ -14,7 +14,8 @@ export const pageUrl = {
 };
 
 export const leaderStructButton = [
-  { key: 'add', text: '添加', icon: 'tianjia' },
+  // { key: 'add', text: '添加', icon: 'tianjia' },
   { key: 'edit', text: '编辑', icon: 'xiugai' },
-  { key: 'delete', text: '删除', icon: 'shanchu' }
+  { key: 'save', text: '保存', icon: 'baocun' },
+  // { key: 'delete', text: '删除', icon: 'shanchu' }
 ];

src/view/planMgmt/cusVizLib/index.js

@@ -49,7 +49,11 @@ class CusVizLib extends Component {
       this.setState({ appId: data.id, visible: true });
     }
     if (itemKey === 'leaderStruct') {
-      browserHistory.push(pageUrl.leaderStruct);
+      let path = {
+        pathname: pageUrl.leaderStruct,
+        state: { appId: data.id }
+      }
+      browserHistory.push(path);
     }
   }
 
@@ -96,7 +100,7 @@ class CusVizLib extends Component {
   render() {
     const { visible } = this.state;
     return (
-      <div>
+      <div style={{height:'100%'}}>  
         <VizlibView {...this.props}  extraEventHandle={this.onItemClick} extraMenus={extraMenus} />
         <Modal
           header="预案上传"

src/view/planMgmt/view/leaderStruct/LeaderStructModel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, AmosAlert, Input, Button } from 'amos-framework';
+import EditableCell from './../../../bizview/common/editableCell/EditableCell';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+import BizIcon from './../../../common/icon/BizIcon';
+import { nodeDetailTopoAction, nodeDetailTopoSaveAction } from './../../../../services/preControlService';
+
+const FormItem = Form.Item;
+const getColumns = (self) => {
+  let oper = <Button icon={<BizIcon icon="tianjia" />} transparent onClick={() => {self.onAdd();}} />;
+  return [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '47%',
+      render: (text, record) => <EditableCell value={text} editable={ true } onChange={(text) => self.onCellChange(record, text, 'name')} />,
+      className: 'uant-table-thead'
+    },
+    {
+      title: '属性值',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+      render: (text, record) => <EditableCell value={text} editable={ true } onChange={(text) => self.onCellChange(record, text, 'value')} />,
+      className: 'uant-table-thead'
+    },
+    {
+      title: oper,
+      width: '3%',
+      render: (text, record) => {
+        return (
+          <Button
+            icon={<BizIcon icon="shanchu" />}
+            transparent
+            onClick={() => self.onDelete(record.key)}
+          />
+        );
+      },
+      className: 'uant-table-thead operation-items'
+    }
+  ];
+};
+
+/**
+ * 领导架构编辑
+ */
+class LeaderStructModel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchParam: [],
+      maintenances: [],
+      last: false,
+      form: {
+        name: '',
+        evaluateModelId: -1,
+        nodeDetail: []
+      },
+      rules: {
+        key: [{ required: true, message: '属性名不能为空' },{ max: 50, message: '长度不能大于50个字符',}]
+      }
+    };
+  }
+
+  componentWillMount = () => {
+    const { selectNode } = this.props || {};
+    debugger;
+    this.getNodeDetail(selectNode);
+  };
+
+  getNodeDetail = (selectNode) => {
+    let form = {};
+    nodeDetailTopoAction(selectNode.id).then(data => {
+      if(data){
+        form.nodeDetail = JSON.parse(data.nodeDetail) || [];
+        this.setState({
+          form
+        });
+      }
+    });
+  }
+
+  onCellChange = (record, text, type) => {
+    const { form } = this.state;
+    const target = form.nodeDetail.find(item => item.key === record.key);
+    if (target) {
+      target[type] = text;
+      this.setState({ form });
+    } else {
+      let obj = {};
+      obj[type] = text;
+      form.nodeDetail.push(obj);
+      this.setState({ form });
+    }
+    console.log(type);
+  };
+
+  onDelete = (index) => {
+    let { form } = this.state;
+    form.nodeDetail = form.nodeDetail.filter(item => item.key !== index);
+    form.nodeDetail.map(item => {
+      if (item.key > index) {
+        item.key -= 1;
+      }
+    });
+    this.setState({ form });
+  }
+
+  onAdd = () => {
+    let { form } = this.state;
+    let key = form.nodeDetail.length + 1;
+    let newObj = { key, name: '', value: ''};
+    form.nodeDetail.push(newObj);
+    this.setState({ form });
+  }
+
+  handleSubmit = nodeid => {
+    debugger;
+    this.form.validate((valid, dataValues) => {
+      debugger;
+      if (valid) {
+        let { form } = this.state;
+        form.nodeid = nodeid;
+        this.nodeDetailEdit(form);
+      } else {
+        return false;
+      }
+    });
+  };
+
+  nodeDetailEdit = body => {
+    debugger;
+    body.nodeDetail = JSON.stringify(body.nodeDetail);
+    nodeDetailTopoSaveAction(body).then(
+      data => {
+        AmosAlert.success('提示', '操作成功');
+        // this.props.reloadPage();
+        this.props.cancel();
+        this.props.reloadSelectNode(this.props.selectNode.id);
+      },
+      err => {
+        AmosAlert.error('提示', err);
+      }
+    );
+  };
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  render() {
+    const { form, rules } = this.state;
+    const { selectNode } = this.props;
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 },
+        className: 'colspanlab'
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 },
+        className: 'colspan'
+      }
+    };
+
+    return (
+      <div>
+        <Form model={form} rules={rules} ref={component => this.form = component}>
+          <FormItem label={<span>当前节点</span>} {...formItemLayout}>
+            <Input className="leader-struct_input"  value={selectNode.text} disabled={ true }/>
+          </FormItem>
+          <FormItem label={<span>属性</span>} field="nodeDetail" className='editable-table' >
+            <AmosGridTable
+              rowKey="key"
+              columns={getColumns(this)}
+              callBack={this.reload}
+              dataList={form.nodeDetail || []}
+              getTableDataAction={() => {}}
+              isChecked={false}
+              isPageable={false}
+            />
+          </FormItem>
+        </Form>
+      </div> 
+    );
+  }
+}
+
+LeaderStructModel.propTypes = {
+  reloadPage: PropTypes.func
+};
+export default LeaderStructModel;

src/view/planMgmt/view/leaderStruct/LeaderStructRightGrid.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from 'amos-framework';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+
+const FormItem = Form.Item;
+const getColumns = (self) => {
+  // let oper = <Button icon={<BizIcon icon="tianjia" />} transparent onClick={() => {self.onAdd();}} />;
+  return [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '47%',
+      // render: (text, record) => <EditableCell value={text} onChange={(text) => self.onCellChange(record, text, 'name')} />,
+      // className: 'uant-table-thead'
+    },
+    {
+      title: '属性值',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+      // render: (text, record) => <EditableCell value={text} onChange={(text) => self.onCellChange(record, text, 'value')} />,
+      // className: 'uant-table-thead'
+    }
+  ];
+};
+
+/**
+ * 属性表格
+ */
+class LeaderStructRightGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // searchParam: [],
+      // maintenances: [],
+      // last: false,
+      // form: {
+      //   name: '',
+      //   evaluateModelId: -1,
+      //   nodeDetail: []
+      // },
+      // rules: {
+      //   key: [{ required: true, message: '属性名不能为空' },{ max: 50, message: '长度不能大于50个字符',}]
+      // }
+    };
+  }
+
+  componentWillMount = () => {
+    const { selectNode } = this.props || {};
+    // this.getNodeDetail(selectNode);
+  };
+  
+
+ 
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  render() {
+    const { nodeDetail } = this.props;
+
+    return (
+      <div>
+        <AmosGridTable
+          rowKey="key"
+          columns={getColumns(this)}
+          callBack={this.reload}
+          dataList={nodeDetail || []}
+          getTableDataAction={() => {}}
+          isChecked={false}
+          isPageable={false}
+        />
+      </div>
+    );
+  }
+}
+
+LeaderStructRightGrid.propTypes = {
+  reloadPage: PropTypes.func
+};
+export default LeaderStructRightGrid;