资产要素

src/model/dataassetelement.js

+import * as service from '../service/dataassetmanager';
+import { call } from 'redux-saga/effects';
+
+export function* importElement(payload) {
+  return yield call(service.importElement, payload);
+}
+
+export function* getLogs(payload) {
+  return yield call(service.getLogs, payload);
+}
+

src/model/index.js

@@ -8,8 +8,9 @@ import { reducers } from './reducer';
 import * as user from './user';
 import * as map from './map';
 import * as datamodel from './datamodel';
+import * as dataassetelement from './dataassetelement';
 
-const funcs = Connect({ user, datamodel, map })
+const funcs = Connect({ user, datamodel, map, dataassetelement })
 
 function* request(args) {
   const { type, payload, callback, error } = args.args;

src/routes.js

@@ -20,7 +20,7 @@ export const routes = [
         text: '数据模型',
       },
       {
-        name: 'factor',
+        name: 'element',
         text: '资产要素',
       }
     ]

src/service/dataassetmanager.js

+import { filePost, GetJSON } from "../util/axios"
+
+export function importElement(payload) {
+  return filePost("/dataassetmanager/elementApi/import", payload);
+}
+
+export function getLogs(payload) {
+  return GetJSON("/dataassetmanager/elementApi/listOperationLogsByPage", payload);
+}

src/view/Manage/Element/Component/ImportModal.jsx

+import React, { useState } from 'react';
+import { Modal, Button, Upload } from 'antd';
+import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
+
+import { dispatchLatest } from '../../../../model'; 
+import { showMessage } from '../../../../util';
+
+const ImportModal = (props) => {
+  const { onCancel, visible } = props;
+  const [ fileList, setFileList ] = useState([]);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const downloadTemplate = () => {
+    window.open("/data-govern/docs/ElementModel.xlsx");
+  }
+
+  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;
+    }
+  };
+
+  const handleOk = () => {
+
+    if ((fileList||[]).length === 0) {
+      showMessage('info', '请先选择模版上传');
+      return;
+    }
+
+    setConfirmLoading(true);
+    dispatchLatest({
+      type: 'dataassetelement.importElement',
+      payload: { fileList },
+      callback: () => {
+        setConfirmLoading(false);
+        onCancel && onCancel(true);
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  return (
+    <Modal 
+      forceRender
+      confirmLoading={confirmLoading}
+      visible={visible}
+      title={"导入资产要素"}
+      onOk={handleOk}
+      onCancel={() => {
+        setConfirmLoading(false);
+        onCancel && onCancel();
+      }}
+    >
+    {
+      <>
+        <div>
+          <Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
+          模版下载
+          </Button>
+        </div>
+        <div className='mt-3'>
+          <Upload {...uploadProps}>
+            <Button icon={<UploadOutlined />}>
+              选择文件上传
+            </Button>
+          </Upload>
+        </div>
+      </>
+    }
+    </Modal>
+  )
+}
+
+export default ImportModal;
\ No newline at end of file

src/view/Manage/Element/index.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Table, Pagination } from 'antd';
+
+import { dispatchLatest } from '../../../model'; 
+import ImportModal from './Component/ImportModal';
+import './index.less';
+
+const Element = (props) => {
+  const [ loading, setLoading ] = useState(false);
+  const [ tableData, setTableData ] = useState([]);
+  const [ total, setTotal ] = useState(0);
+  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
+  const [ importModalVisible, setImportModalVisible ] = useState(false);
+
+  const { pageNum, pageSize } = pagination;
+
+  useEffect(() => {
+
+    getTableData();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pagination])
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'createTimeDesc',
+    },
+    {
+      title: '操作人',
+      dataIndex: 'creator',
+    },
+    {
+      title: '操作类型',
+      dataIndex: 'operateType',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+    },
+    {
+      title: '变更内容',
+      dataIndex: 'content'
+    },
+  ];
+
+  const onImportBtnClick = () => {
+    setImportModalVisible(true);
+  }
+
+  const onExportBtnClick = () => {
+    window.open('/api/dataassetmanager/elementApi/export');
+  }
+
+  const getTableData = () => {
+    setLoading(true);
+    dispatchLatest({
+      type: 'dataassetelement.getLogs',
+      payload: {
+        pageNum,
+        pageSize
+      },
+      callback: data => {
+        setTableData(data.data||[]);
+        setTotal(data.total);
+        setLoading(false);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onImportModalCancel = (refresh = false) => {
+    setImportModalVisible(false);
+    if (refresh) {
+      setPagination({ pageNum: 1, pageSize: 20 });
+    }
+  }
+
+  return (
+    <div className='element' style={{ backgroundColor: '#fff' }}>
+      <div
+        className='p-3'
+        style={{
+          display: 'flex',
+          borderBottom: "1px solid #EFEFEF",
+        }}
+      >
+        <Button type="primary" className='ml-3' style={{ marginLeft: 'auto' }}  onClick={onImportBtnClick}>导入</Button>
+        <Button type="primary" className='ml-3' onClick={onExportBtnClick}>导出</Button>
+      </div>
+      <div className='p-3'>
+        <Table
+          loading={loading}
+          columns={columns} 
+          rowKey={'id'}
+          dataSource={tableData||[]}
+          pagination={false} 
+        />
+        <Pagination
+          size="small"
+          className="text-center mt-3"
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: _pageNum, pageSize: _pageSize || 10 });
+          }}
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize });
+          }}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={total}
+          showTotal={total => `共 ${total} 条`}
+        />
+      </div>
+
+
+      <ImportModal 
+        visible={importModalVisible} 
+        onCancel={onImportModalCancel}
+      />
+
+    </div>
+  );
+}
+
+export default Element;

src/view/Manage/Factor/Component/FactorTable.less → src/view/Manage/Element/index.less

-.factor-table {
+.element {
   .yy-table {
     height: calc(100vh - 64px - 30px - 53px - 20px) !important;
     overflow: auto !important;

src/view/Manage/Factor/Component/FactorTable.jsx

-import React, { useState } from "react";
-import { Table } from 'antd';
-
-import './FactorTable.less';
-
-const FactorTable = (props) => {
-
-  const { data, loading, onSelect } = props;
-  const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
-
-  const columns = [
-    {
-      title: '序号',
-      dataIndex: 'key',
-      editable: false,
-      render: (text, record, index) => {
-        return (index+1).toString();
-      }
-    },
-    {
-      title: '操作时间',
-      dataIndex: 'time',
-    },
-    {
-      title: '操作人',
-      dataIndex: 'user',
-    },
-    {
-      title: '操作类型',
-      dataIndex: 'type',
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-    },
-    {
-      title: '变更内容',
-      dataIndex: 'content'
-    },
-  ];
-
-  const onSelectChange = keys => {
-    setSelectedRowKeys(keys);
-    onSelect && onSelect(keys);
-  };
-
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
-
-  return (
-    <div className='factor-table'>
-      <Table
-        loading={loading}
-        rowSelection={rowSelection} 
-        columns={columns} 
-        rowKey={'id'}
-        dataSource={data}
-        pagination={false} 
-      />
-    </div>
-  );
-}
-
-export default FactorTable;
\ No newline at end of file

src/view/Manage/Factor/index.jsx

-import React, { useState } from 'react';
-import { Button } from 'antd';
-
-import FactorTable from './Component/FactorTable';
-
-const testData = [
-  {
-    id: '1',
-    time: '2020-03-09 12:28:09',
-    user: 'xxx',
-    type: '导入',
-    status: '成功',
-    content: '本次新增了ID、中文名称、英文名称、描述、资产形态等5个要素'
-  },
-  {
-    id: '2',
-    time: '2020-03-09 12:28:09',
-    user: 'xxx',
-    type: '导入',
-    status: '成功',
-    content: '本次新增了ID、中文名称、英文名称、描述、资产形态等5个要素'
-  },
-];
-
-const Factor = (props) => {
-  const [ loading, setLoading ] = useState(false);
-  const [ tableData, setTableData ] = useState(testData);
-  const [ selectFactorIds, setSelectFactorIds ] = useState([]);
-
-  const onImportBtnClick = () => {
-
-  }
-
-  const onExportBtnClick = () => {
-
-  }
-
-  const onTableSelect = (ids) => {
-    setSelectFactorIds(ids||[]);
-  }
-
-  return (
-    <div style={{ backgroundColor: '#fff' }}>
-      <div
-        className='p-3'
-        style={{
-          display: 'flex',
-          borderBottom: "1px solid #EFEFEF",
-        }}
-      >
-        <Button type="primary" className='ml-3' style={{ marginLeft: 'auto' }}  onClick={onImportBtnClick}>导入</Button>
-        <Button type="primary" className='ml-3' onClick={onExportBtnClick}>导出</Button>
-      </div>
-      <div className='p-3'>
-        <FactorTable loading={loading} data={tableData} onSelect={onTableSelect} />
-      </div>
-    </div>
-  );
-}
-
-export default Factor;

src/view/Manage/index.jsx

@@ -7,7 +7,7 @@ import { ManageLayout } from "../../layout";
 
 import Map from './Map';
 import Model from './Model';
-import Factor from './Factor';
+import Element from './Element';
 
 class Manage extends Component {
   constructor(props) {
@@ -30,7 +30,7 @@ class Manage extends Component {
               <Switch>
                 <Route path={`${match.path}/map`} component={Map} />
                 <Route path={`${match.path}/model`} component={Model} />
-                <Route path={`${match.path}/factor`} component={Factor} />
+                <Route path={`${match.path}/element`} component={Element} />
               </Switch>
             ) : (
               <GetSession {...this.props} />