资产申请

src/model/assets.js

@@ -47,4 +47,8 @@ export function* subscribeTableModel(payload) {
 
 export function* setTableModelScore(payload) {
   return yield call(service.setTableModelScore, payload);
+}
+
+export function* apply(payload) {
+  return yield call(service.apply, payload);
 }
\ No newline at end of file

src/service/assets.js

@@ -43,4 +43,8 @@ export async function subscribeTableModel(payload) {
 
 export async function setTableModelScore(payload) {
   return Post("/datacatalog/front/setTableModelScore",payload);
+}
+
+export async function apply(payload){
+  return Post('/datacatalog/front/apply', payload); 
 }
\ No newline at end of file

src/util/axios.js

 
 import axios from 'axios';
 import { message } from 'antd';
-import { Open, ContextPath } from './index';
+import { Open, ContextPath, IsArr } from './index';
 
 const CancelToken = axios.CancelToken;
 const baseURL = '/api/';
@@ -26,9 +26,43 @@ const textplain = axios.create({
     //'X-Custom-Header': 'rest',
     'Cache-Control': 'no-cache,no-store,must-revalidate,max-age=-1,private'
   },
-  transformResponse: [(data) => { return data; }],
+  transformResponse: [(data) => {
+     return data; 
+  }],
 });
 
+textplain.interceptors.request.use(
+  (config) => {
+    let parmas = config.params
+    
+    if (config.method === 'post' && parmas) {
+      let url_params = ''
+
+      for (const key in parmas) {
+        const val = parmas[key];
+        let url_params_temp = url_params;
+        if (IsArr(val)){
+          val.map((_val)=> {
+            url_params_temp +=  url_params_temp ? '&' : '?';
+            url_params_temp += encodeURIComponent(key+'[]') + '=' + encodeURIComponent(_val);
+            return _val;
+          });
+        } else {
+          url_params_temp += url_params_temp ? '&' : '?';
+          url_params_temp += encodeURIComponent(key) + '=' + encodeURIComponent(parmas[key]);
+        }
+
+        url_params = url_params_temp;
+      }
+
+      config.url = config.url+url_params;
+      config.params = {};
+    }
+
+    return config;
+  }
+);
+
 let __source = null;
 export const Cancel = function (msg) {
   return new Promise(res => __source && __source.cancel(msg));

src/util/index.js

@@ -76,4 +76,13 @@ export const Assert = function (arg, msg) {
     message.warning(msg)
     throw msg
   }
-}
\ No newline at end of file
+}
+
+export const paginate = function (items, pageNum = 1, pageSize = 10) {
+  const offset = (pageNum - 1) * pageSize;
+  return items.filter((item, i) => i >= offset && i < offset + pageSize);
+}
+
+export const IsArr = function (data) {
+  return data && Object.prototype.toString.call(data) === '[object Array]';
+}

src/view/Manage/Assets/components/AssetList.js

@@ -13,7 +13,7 @@ import {
   message
 } from 'antd';
 
-import { DataDesc, DataPreview, DataDetail } from './AssetListHelper';
+import { DataDesc, DataPreview, DataDetail, ApplyDesc } from './AssetListHelper';
 import styles from '../style.less';
 import { dispatch } from '../../../../model';
 
@@ -36,6 +36,7 @@ class AssetListCOM extends Component {
       download: false,
       dataDesc: null,
       dataPreview: null,
+      activeBtn: 0,
     };
   }
 
@@ -43,6 +44,8 @@ class AssetListCOM extends Component {
     const { tableModel, tabKey } = this.state;
     if (preState.tableModel !== tableModel && tableModel !== null) {
 
+      this.setState({ activeBtn: 0 });
+
       dispatch({
         type: 'assets.getMetadata',
         payload: tableModel.tableIdInSource,
@@ -101,16 +104,29 @@ class AssetListCOM extends Component {
 
   }
 
-  downloadFile = (payload) => {
-    window.open(
-      `/api/metadataharvester/rest/fileExcelPdf/getExcelFileContent?namePath=${payload}`,
-      '_blank',
-    );
-  };
+  apply= (columnPositions, reason, expireDate) => {
+    const { tableModel, activeBtn } = this.state;
+    
+    if (tableModel) {
+      dispatch({
+        type: 'assets.apply',
+        payload: { params :{ 
+          tableModelId: tableModel.tableModelId,
+          columnPositions: columnPositions,
+          reason,
+          expireDate,
+        } },
+        callback: () => {
+          this.setState({ activeBtn: (activeBtn ^ 1) & 1 });
+          message.success('申请成功');
+        }
+      });
+    }
+  }
   
   render() {
     const { tableModels, loading, subscribeTableModel, updateItems } = this.props;
-    const { tableModel, showModal, tabKey, metedata, download, dataDesc, dataPreview } = this.state;
+    const { tableModel, showModal, tabKey, metedata, dataDesc, dataPreview, activeBtn } = this.state;
 
     const IconText = ({ type, text }) => (
       <span>
@@ -208,6 +224,12 @@ class AssetListCOM extends Component {
       return null;
     };
 
+    const getTableModelColumns = function (privileged) {
+      return (dataDesc&&dataDesc.columns) ? dataDesc.columns.filter((o, i) => {
+        return o.privileged === privileged;
+      }) : [];
+    };
+
     return (
       <React.Fragment>
         <List
@@ -260,24 +282,32 @@ class AssetListCOM extends Component {
             <DataDetail
               tableModel={tableModel}
               metaData={metedata || {}}
-              isHaveFile={download}
-              download={this.downloadFile}
-            />
-            <Tabs
-              defaultActiveKey="description"
-              activeKey={tabKey}
-              onChange={key => {
-                const type = 'tabKey';
-                this.setState({ [type]: key });
+              showApplyButton={getTableModelColumns(false).length > 0}
+              isAppling={activeBtn===1?true:false}
+              onApply={ () => {
+                this.setState({ activeBtn: (activeBtn ^ 1) & 1 });
               }}
-            >
-              <TabPane tab="数据概览" key="description">
-                <DataDesc dataDesc={dataDesc}  />
-              </TabPane>
-              <TabPane tab="数据预览" key="preview">
-                <DataPreview dataPreview={dataPreview} />
-              </TabPane>
-            </Tabs>
+            />
+            {
+              activeBtn===0&&<Tabs
+                defaultActiveKey="description"
+                activeKey={tabKey}
+                onChange={key => {
+                  const type = 'tabKey';
+                  this.setState({ [type]: key });
+                }}
+              >
+                <TabPane tab="数据概览" key="description">
+                  <DataDesc dataDesc={dataDesc}  />
+                </TabPane>
+                <TabPane tab="数据预览" key="preview">
+                  <DataPreview dataPreview={dataPreview} />
+                </TabPane>
+              </Tabs>
+            }
+            {
+              activeBtn===1&&<ApplyDesc dataDesc={dataDesc} apply={this.apply} />
+            }
           </Modal>
         )}
       </React.Fragment>

src/view/Manage/Assets/components/AssetListHelper.js

-import React, { Component } from 'react';
-import { Table, Descriptions, Icon } from 'antd';
+import React, { Component, Fragment, useState } from 'react';
+import { Table, Descriptions, Icon, Row, Col, Input, Checkbox, Divider, Pagination, Form, DatePicker, Button, message } from 'antd';
+import classnames from 'classnames';
 
-import styles from '../style.less';
+import { paginate } from '../../../../util';
+
+const CheckboxGroup = Checkbox.Group;
+const { Search } = Input;
 
 const despColumns = [
   {
@@ -20,20 +24,44 @@ const despColumns = [
   { key: 'filterMatchStandard', dataIndex: 'filterMatchStandard', title: '匹配标准' },
 ];
 
-export class DataDesc extends Component {
-  render() {
-    const { dataDesc } = this.props;
-    return (
+export const DataDesc = ({ dataDesc }) => {
+  const [{ pageNum, pageSize }, set_pagenation] = useState({ pageNum: 1, pageSize: 10 });
+  const showPage = dataDesc && dataDesc.columns && dataDesc.columns.length > 10;
+  let dataSource = dataDesc ? dataDesc.columns : [];
+  if (showPage) {
+    dataSource = paginate(dataDesc.columns, pageNum, pageSize);
+  }
+  return (
+    <Fragment>
       <Table
         size="small"
         rowKey="ordinalPosition"
         pagination={false}
         columns={despColumns}
         loading={dataDesc === undefined}
-        dataSource={dataDesc ? dataDesc.columns : []}
+        dataSource={dataSource}
       />
-    );
-  }
+      {showPage && (
+        <Pagination
+          size="small"
+          className="text-center"
+          style={{ marginTop: 16 }}
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            set_pagenation({ pageNum: _pageNum, pageSize: _pageSize || 10 });
+          }}
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            set_pagenation({ pageNum: _pageNum || 1, pageSize: _pageSize });
+          }}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={dataDesc.columns.length}
+        />
+      )}
+    </Fragment>
+  );
 }
 
 export class DataPreview extends Component {
@@ -70,9 +98,10 @@ export class DataPreview extends Component {
 
 export class DataDetail extends Component {
   render() {
-    const { tableModel, metaData, isHaveFile, download } = this.props;
+    const { tableModel, metaData, showApplyButton, isAppling, onApply } = this.props;
+
     return (
-      <Descriptions className={styles.headerList} size="small" column={3}>
+      <Descriptions size="small" column={3}>
         <Descriptions.Item label="资产名称">
           <span dangerouslySetInnerHTML={{ __html: `资产名称：${tableModel.name}` }} />
         </Descriptions.Item>
@@ -85,6 +114,9 @@ export class DataDetail extends Component {
         <Descriptions.Item label="源系统">{metaData.sourceSystem}</Descriptions.Item>
         <Descriptions.Item label="数据更新特点">{metaData.updateFeature}</Descriptions.Item>
         <Descriptions.Item label="主题域">{metaData.domain}</Descriptions.Item>
+        {metaData.hasOwnProperty('leaderInfo') && (
+          <Descriptions.Item label="负责人">{metaData.leaderInfo}</Descriptions.Item>
+        )}
         <Descriptions.Item label="描述">
           <span
             dangerouslySetInnerHTML={{
@@ -92,20 +124,164 @@ export class DataDetail extends Component {
             }}
           />
         </Descriptions.Item>
-        {isHaveFile && (
-          <Descriptions.Item label="文档下载">
+        {
+          showApplyButton&&<Descriptions.Item>
             <span
-              className={styles.download}
-              onClick={(e) => {
+              className={ classnames('pointer', isAppling?'text-warning':'text-primary') }
+              onClick={e => {
                 e.preventDefault();
-                if (download) download(metaData.namePath);
+                if (onApply) {
+                  onApply();
+                }
               }}
             >
-              详细设计文档
+              申请
             </span>
           </Descriptions.Item>
-        )}
+        }
       </Descriptions>
     );
   }
 }
+
+const ApplyDescFunc = ({ dataDesc, form, apply }) => {
+  const { getFieldDecorator, validateFields, resetFields } = form;
+
+  const [{ pageNum, pageSize }, set_pagenation] = useState({ pageNum: 1, pageSize: 500 });
+  const [{ checkedPositions }, set_checkedPostions] = useState({ checkedPositions: [] });
+  const [{ keyword }, set_keyword] = useState({ keyword: '' });
+  const [{ checkAll }, set_checkAll] = useState({ checkAll: false });
+
+  const _columns = (dataDesc&&dataDesc.columns)? dataDesc.columns.filter((o,i) => {
+    if (o.privileged === true) return false;
+
+    if (keyword.length>0) {
+      if (o.displayName.toLowerCase().indexOf(keyword.toLowerCase()) >= 0)
+        return true;
+      if (o.name.toLowerCase().indexOf(keyword.toLowerCase()) >= 0)
+        return true; 
+      if (o.nameInSource.toLowerCase().indexOf(keyword.toLowerCase()) >= 0)
+        return true;
+
+      return false;  
+    } 
+
+    return true;  
+  }):[];
+
+  const showPage = _columns && _columns.length > pageSize;
+  
+  let dataSource = _columns;
+
+  if (showPage) {
+    dataSource = paginate(_columns, pageNum, pageSize);
+  }
+  let options = [];
+  options = dataSource.map((o,i) => {
+    return {
+      label: o.name,
+      value: o.ordinalPosition,
+    };
+  });
+
+  return (
+    <Fragment>
+      <Row>
+        <Col md={4}><h3>字段概览</h3></Col>
+        <Col md={20} className='text-right pt-4'>
+          <Search
+            placeholder="请输入字段过滤"
+            style={{ width: 200 }}
+            onChange={(e) => {
+              set_keyword({ keyword: e.target.value});
+              set_checkedPostions({ checkedPositions: [] });
+              set_checkAll({ checkAll: false});
+            }}
+          />
+          &nbsp;
+          <Checkbox 
+            indeterminate={false}
+            onChange={(e)=>{
+              set_checkedPostions({ checkedPositions: e.target.checked ? _columns.map((o,i) => {
+                return o.ordinalPosition;
+              }) : [] });
+              set_checkAll({ checkAll: e.target.checked});
+            }}
+            checked={checkAll}
+          >
+            全选
+          </Checkbox>
+        </Col>
+      </Row>
+      <Divider />
+      <CheckboxGroup
+        options={options}
+        value={checkedPositions}
+        onChange={(values) => {
+          set_checkedPostions({ checkedPositions: values });
+          set_checkAll({ checkAll: values.length === _columns.length});
+        }}
+      />
+      {showPage && (
+        <Pagination
+          size="small"
+          className="text-center"
+          style={{ marginTop: 16 }}
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            set_pagenation({ pageNum: _pageNum, pageSize: _pageSize || 10 });
+          }}
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            set_pagenation({ pageNum: _pageNum || 1, pageSize: _pageSize });
+          }}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={dataDesc.columns.length}
+        />
+      )}
+      <Divider />
+      <Row>
+        <Col md={18} offset={3}>
+          <Form>
+            <Form.Item label="申请说明">
+              {getFieldDecorator('apply', {
+              rules: [{ required: true, message: '请填写申请说明' }],
+              })(<Input.TextArea placeholder="申请说明" />)}
+            </Form.Item>
+            <Form.Item label="结束时间">
+              {getFieldDecorator('expire', {
+                rules: [{ required: true, message: '请选择结束时间' }],
+                })(<DatePicker />)}
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit" onClick={()=>{
+                validateFields((err, values) =>{
+                  if (checkedPositions.length === 0) {
+                    message.error('请选择下列字段');
+                    return;
+                  }
+
+                  if (!err) {
+                    if (apply) {
+                      set_keyword({ keyword: ''});
+                      set_checkedPostions({ checkedPositions: [] });
+                      set_checkAll({ checkAll: false});
+                      resetFields();
+                      apply(checkedPositions, values.apply, values.expire.format('YYYY-MM-DD'));
+                    }
+                 }
+                });
+              }}>
+                申请
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </Fragment>
+  );
+};
+
+export const ApplyDesc = Form.create({ name: "apply" })(ApplyDescFunc);