字段属性详情

package.json

@@ -77,6 +77,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://139.198.127.28:18189",
+  "proxy": "http://139.198.127.28:17808",
   "homepage": "http://myhost/data-govern"
 }

src/model/assetmanage.js

@@ -185,6 +185,10 @@ export function* importBusinessColumn(payload) {
   return yield call(service.importBusinessColumn, payload);
 }
 
+export function* getColumnDetail(payload) {
+  return yield call(service.getColumnDetail, payload);
+}
+
 export function* recoveryFromRecycleBin(payload) {
   return yield call(service.recoveryFromRecycleBin, payload);
 }

src/service/dataassetmanager.js

@@ -104,6 +104,10 @@ export function importBusinessColumn(payload) {
   return PostFile("/dataassetmanager/dataAssetApi/importCGNBusinessColumnAttr", payload);
 }
 
+export function getColumnDetail(payload) {
+  return GetJSON("/dataassetmanager/dataAssetApi/getHRTableModelColumnDetail", payload);
+}
+
 export function recoveryFromRecycleBin(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/recoveryFromRecycleBin", payload);
 }

src/view/Manage/AssetManage/Component/AssetAction.jsx

@@ -11,6 +11,7 @@ import Separate from './Separate';
 import AssetTagModal from './AssetTagModal';
 import { AnchorId, AnchorDirId } from '../../../../util/constant';
 import StandardCode from './StandardCode';
+import BusinessColumnDetail from './BusinessColumnDetail';
 
 import { CancelSvg, EditSvg, SaveSvg, FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
@@ -29,6 +30,7 @@ const AssetAction = (props) => {
   const { assets, attributes, attributesFoldMap } = assetParams;
   const [ assetTagModalVisible, setAssetTagModalVisible ] = useState(false);
   const [ selectTag, setSelectTag ] = useState({});
+  const [ businessColumnDetailVisible, setBusinessColumnDetailVisible ] = useState(false);
 
   useEffect(() => {
     if (action === 'add') {
@@ -347,6 +349,14 @@ const AssetAction = (props) => {
     }
   }
 
+  const onBusinessColumnDetailClick = () => {
+    setBusinessColumnDetailVisible(true);
+  }
+
+  const onBusinessColumnDetailCancel = () => {
+    setBusinessColumnDetailVisible(false);
+  }
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -460,6 +470,7 @@ const AssetAction = (props) => {
                 </div>              
               </Descriptions.Item> */}
             </Descriptions>
+            <Button onClick={onBusinessColumnDetailClick}>字段属性</Button>
           </div>
           {
             !readOnly && <Separate height={8} />
@@ -604,6 +615,11 @@ const AssetAction = (props) => {
         } 
       }
       </AppContext.Consumer>
+
+      <BusinessColumnDetail 
+        visible={businessColumnDetailVisible}
+        onCancel={onBusinessColumnDetailCancel}
+      />
     </div>
   )
 }

src/view/Manage/AssetManage/Component/BusinessColumnDetail.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Button, Form, Input, Table, Tooltip, Typography } from 'antd';
+import { dispatch } from '../../../../model';
+import StandardCode from './StandardCode';
+
+const FC = (props) => {
+  const {visible, id, onCancel} = props;
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(undefined);
+  const [cols, setCols] = useState([]);
+  
+  useEffect(() => {
+    if (visible) {
+      getColumnsDetail();
+    }
+  }, [visible])
+
+  const getColumnsDetail = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getColumnDetail',
+      payload: {
+        dataAssetId: id,
+      },
+      callback: data => {
+        setLoading(false);
+
+        const newData = [];
+
+        data?.data?.forEach(subData => {
+          const newItem = {};
+          subData.forEach((value, index) => {
+            newItem[data?.heading[index]] = value;
+          })
+
+          newData.push(newItem);
+        })
+
+        setData(newData);
+
+        const newCols = [];
+        data?.heading?.forEach(item => {
+          const col = {
+            title: item, 
+            dataIndex: item, 
+            width: 150, 
+            ellipsis: true,
+            render: (value, record) => <Tooltip title={value}>
+              <Typography.Text ellipsis={true}>{value}</Typography.Text>
+            </Tooltip>
+          };
+
+          if (item === '代码编码') {
+            col.render = (value, record) => <StandardCode value={value} />
+          }
+
+          newCols.push(col);
+        });
+        setCols(newCols);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  const cancel = () => {
+    setLoading(false);
+    setData(undefined);
+    onCancel?.();
+  }
+
+  const footer = [ 
+    <Button
+      key="0" 
+      onClick={() => {cancel()}}
+    >
+    取消
+    </Button>,
+  ];
+
+  return (
+    <Modal 
+      forceRender
+      visible={visible}
+      title='字段属性详情'
+      width={800}
+      onCancel={() => {cancel()}}
+      footer={footer}
+    >
+      <Table 
+        loading={loading} 
+        columns={cols} 
+        dataSource={data||[]} 
+        size='small'
+        scroll={{ x: 750, y: 400 }}
+        pagination={false}
+      />
+    </Modal>
+  )
+}
+
+export default FC;
\ No newline at end of file