改造资产树

src/view/Manage/AssetManage/components/AssetTree.jsx

+import React, { useEffect, useState } from 'react';
+import {Card, Spin, Button, Tooltip, Tree, Input, Dropdown, Menu, Space} from 'antd';
+import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,SyncOutlined } from '@ant-design/icons';
+
+import { dispatch } from '../../../../model';
+import ImportDirectory from './ImportDirectory'; 
+import './AssetTree.less';
+
+const AssetTree = (props) => {
+
+  const { readOnly = false, onSelect } = props; 
+  const [ keyword, setKeyword ] = useState('');
+  const [ loading, setLoading ] = useState(false);
+  const [ treeData, setTreeData ] = useState([]);
+  const [ dataList, setDataList ] = useState([]);
+  const [ expandedKeys, setExpandedKeys ] = useState([]);
+  const [ autoExpandParent, setAutoExpandParent ] = useState(false);
+  const [ currentDirId, setCurrentDirId ] = useState('');
+  const [ importDirectoryVisible, setImportDirectoryVisible ] = useState(false);
+
+  useEffect(() => {
+    getAllDirectoryAsTree();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const getAllDirectoryAsTree = (resetCurrentDirId=true) => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.queryAllDirectoryAsTree',
+      callback: data => {
+        setLoading(false);
+        setTreeData(data);
+
+        const _dataList = [];
+        generateList(data, _dataList);
+        setDataList(_dataList);
+
+        if (resetCurrentDirId) {
+          const _currentDirId = (data&&data[0]?(data[0].nodeId||''):'');
+        
+          setCurrentDirId(_currentDirId);
+          onSelect && onSelect(_currentDirId);
+        }
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const generateList = (treeData, list) => {
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const { nodeId, text } = node;
+      list.push({ key: nodeId , title: text });
+      if (node.children) {
+        generateList(node.children, list);
+      }
+    }
+  };
+
+  const getParentKey = (key, tree) => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+      const node = tree[i];
+      if (node.children) {
+        if (node.children.some(item => item.nodeId === key)) {
+          parentKey = node.nodeId;
+        } else if (getParentKey(key, node.children)) {
+          parentKey = getParentKey(key, node.children);
+        }
+      }
+    }
+    return parentKey;
+  };
+ 
+  const addDir = () => {
+
+  }
+
+  const updateDir = () => {
+
+  }
+
+  const refreshTree = () => {
+    getAllDirectoryAsTree(false);
+  }
+
+  const importDir = () => {
+    setImportDirectoryVisible(true);
+  }
+
+  const exportAllDir = () => {
+
+  }
+
+  const exportCurrentDir = () => {
+
+  }
+
+  const deleteDir = () => {
+
+  }
+
+  const onChange = (e) => {
+
+    const { value } = e.target;
+
+    const expandedKeys = dataList
+      .map(item => {
+        if (item.title.indexOf(value) > -1) {
+          return getParentKey(item.key, treeData);
+        }
+        return null;
+      })
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+
+    setExpandedKeys(expandedKeys);
+    setAutoExpandParent(true);
+    setKeyword(value);
+  }
+
+  const onTreeSelect = (keys,_) => {
+
+    if ((keys||[]).length === 0) {
+      return;
+    }
+
+    setCurrentDirId(keys[0]);
+    onSelect && onSelect(keys[0]);
+  }
+
+  const onExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  const onImportDirectoryCancel = (refresh=false, resetCurrentDirId=false) => {
+    setImportDirectoryVisible(false);
+    refresh && getAllDirectoryAsTree(resetCurrentDirId);
+  }
+
+  const exportMenu = (
+    <Menu>
+      <Menu.Item>
+        <div onClick={() => exportAllDir()}>
+          导出所有
+        </div>
+      </Menu.Item>
+      <Menu.Item>
+        <div onClick={() => exportCurrentDir()}>
+          导出选中目录
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const loop = data =>
+    data.map(item => {
+      const index = item.text.indexOf(keyword);
+      const beforeStr = item.text.substr(0, index);
+      const afterStr = item.text.substr(index + keyword.length);
+      const title =
+        index > -1 ? (
+          <span>
+            {beforeStr}
+            <span className="site-tree-search-value">{keyword}</span>
+            {afterStr}
+          </span>
+        ) : (
+          <span>{item.text}</span>
+        );
+      if (item.children) {
+        return { title, key: item.nodeId, children: loop(item.children) };
+      }
+
+      return {
+        title,
+        key: item.nodeId
+      };
+    });
+
+  return (
+    <Card
+      className={"asset-tree"}
+      title={ readOnly ? null : (
+        <Space>
+          <Tooltip title="新增目录">
+            <Button shape="circle" icon={<PlusOutlined />} onClick={addDir} />
+          </Tooltip>
+          <Tooltip title="修改">
+            <Button shape="circle" icon={<EditOutlined />} onClick={updateDir} />
+          </Tooltip>
+          <Tooltip title="刷新">
+            <Button shape="circle" icon={<SyncOutlined />} onClick={refreshTree} />
+          </Tooltip>
+          <Tooltip title="导入">
+            <Button shape="circle" icon={<ImportOutlined />} onClick={importDir} />
+          </Tooltip>
+          <Dropdown overlay={exportMenu} placement="bottomLeft">
+            <Tooltip title="导出">
+              <Button shape="circle" icon={<ExportOutlined />} />
+            </Tooltip>
+          </Dropdown>
+          <Tooltip title="删除">
+            <Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} />
+          </Tooltip>
+        </Space>
+      )}
+      bordered={false} 
+      bodyStyle={{ padding:10 }}
+      headStyle={{ padding:10 }}
+      style={{ width: '100%' }} 
+    >
+      <Spin spinning={loading}>
+        <Input  
+          value={keyword}
+          style={{ marginBottom:10 }} 
+          onChange={(e) => { onChange(e) }}
+        />
+        <Tree
+          showLine={true}
+          showIcon={false}
+          onExpand={onExpand}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          treeData={loop(treeData)}
+          selectedKeys={[currentDirId||'']} 
+          onSelect={onTreeSelect} 
+        />
+      </Spin>
+
+      <ImportDirectory 
+        visible={ importDirectoryVisible }
+        onCancel={ onImportDirectoryCancel }
+        dirId={ currentDirId }
+      />
+
+    </Card>
+  )
+}
+
+export default AssetTree;
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetTree.less

+.asset-tree {
+
+  .yy-card-head-title {
+    padding: 0;
+  }
+  
+  .yy-tree-list {
+    height: calc(100vh - 64px - 30px - 53px - 20px - 42px) !important;
+    overflow: auto !important;
+  }
+
+  .site-tree-search-value {
+    color: #f50;
+  }
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/ImportDirectory.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Upload, Button, Radio, Space } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+import { dispatch } from '../../../../model';
+import { showNotifaction } from '../../../../util';
+
+const ImportDirectory = (props) => {
+  const { visible, onCancel, dirId } = props;
+  const [ uploading, setUploading ] = useState(false);
+  const [ fileList, setFileList ] = useState([]);
+  const [ form ] = Form.useForm();
+  const [ dir, setDir ] = useState(null);
+
+  useEffect(() => {
+
+    if ((dirId||'')!=='') {
+      getDirectory();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ dirId ])
+
+  const getDirectory = () => {
+    setDir(null);
+    dispatch({
+      type: 'assetmanage.getDirectoryById',
+      payload: { 
+        dirId
+      },
+      callback: data => {
+        setDir(data);
+      }
+    })
+  }
+
+  const download = () => {
+    window.open("/data-govern/docs/AssetThemeModel.xlsx");
+  }
+
+  const upload = async () => {
+    try {
+      const row = await form.validateFields();
+      
+      setUploading(true);
+
+      let payload;
+      if (row.type === 'root') {
+        payload = { 
+          fileList: fileList[0].originFileObj 
+        };
+      } else {
+        payload = { 
+          params: {
+            parentPath: dir.path
+          },
+          fileList: fileList[0].originFileObj 
+        };
+      }
+
+      dispatch({
+        type: 'assetmanage.directoryImport',
+        payload: payload,
+        callback: data => {
+          setUploading(false);
+          onCancel && onCancel(true, (row.type==='root'? true : false));
+          const msg = (data||'').replace(RegExp(";", "g"),"<br />")
+          showNotifaction('导入提示', msg, 5);
+        },
+        error: () => {
+          setUploading(false);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  }
+
+  const uploadProps = {
+    onRemove: file => {
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      setFileList(newFileList);
+    },
+    beforeUpload: file => {
+      
+      setFileList([ file ]);
+      return false;
+    },
+    accept:".xlsx",
+    fileList: fileList||[]
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 17 },
+    },
+  };
+
+  return (
+    <Modal
+      title={`目录导入`}
+      visible={visible}
+      onCancel={() => { onCancel && onCancel() }}
+      footer={
+        <Space>
+          <Button type="primary" onClick={ download } >模版下载</Button>
+          <Button type="primary" onClick={ upload } loading={uploading}>上传</Button>
+          <Button onClick={() => { onCancel && onCancel() }}>返回</Button>
+        </Space>
+      }
+    >
+      <Form {...formItemLayout} form={form}>
+        <Form.Item 
+          label="挂载位置"
+          name="type"
+          rules={[{ required: true, message: '必填项'}]}
+        >
+          <Radio.Group >
+            <Radio value='root' >根节点导入</Radio>
+            <Radio value='self' disabled={ dirId===null }>选中节点导入</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item 
+          label="文件"
+          name="file"
+          rules={[{ required: true, message: '请上传附件'}]}
+        >
+          <Upload {...uploadProps}>
+            <Button icon={<UploadOutlined />}>
+              选择文件上传
+            </Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default ImportDirectory;
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Row, Col } from 'antd';
 import LeftTree from "./components/LeftTree"
 import AssetTable from "./components/AssetTable"
+import AssetTree from './components/AssetTree';
 
 class Index extends React.Component {
     constructor(props) {
@@ -28,7 +29,8 @@ class Index extends React.Component {
         return (
             <Row gutter={15} style={{backgroundColor:'#ededed'}}>
                 <Col span={6}>
-                    <LeftTree setNodeId={this.setNodeId} setNode={this.setNode} nodeId={this.state.nodeId}/>
+                    <AssetTree />
+                    {/* <LeftTree setNodeId={this.setNodeId} setNode={this.setNode} nodeId={this.state.nodeId}/> */}
                 </Col>
                 <Col span={18}>
                     <AssetTable nodeId={this.state.nodeId} node={this.state.node} />