服务详情

src/App.js

@@ -29,6 +29,7 @@ const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/E
 const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree'));
 const DataMasterDefine = loadable(()=> import('./view/Manage/DataMaster/Define'));
 const DataMasterManage = loadable(()=> import('./view/Manage/DataMaster/Manage'));
+const DataServiceDetail = loadable(()=> import('./view/Manage/Model/Component/ServiceDetail'));
 
 export class App extends React.Component {
   constructor() {
@@ -139,6 +140,20 @@ export class App extends React.Component {
       );
     }
 
+    if (message === 'showDataServiceDetail') {
+      return (
+        <AppContext.Provider value={{
+          setGlobalState,
+          onGlobalStateChange
+        }}>
+          <DataServiceDetail
+            id={id} 
+            terms={terms}
+          />
+        </AppContext.Provider>
+      );
+    }
+
     return (
       <AppContext.Provider value={{
         env:  hostParams?.env,

src/model/pds.js

@@ -33,6 +33,10 @@ export function* searchService(payload) {
   return yield call(pds.searchService, payload)
 }
 
+export function* getDataService(payload) {
+  return yield call(pds.getDataService, payload)
+}
+
 export function* deleteService(payload) {
   return yield call(pds.deleteService, payload);
 }

src/service/pds.js

@@ -32,6 +32,10 @@ export function searchService(payload) {
   return GetJSON("/pdataservice/pdsCURD/searchPDSDataServicesByNaming", payload)
 }
 
+export function getDataService(payload) {
+  return GetJSON("/pdataservice/pdsCURD/getDataService", payload)
+}
+
 export function deleteService(payload) {
   return PostJSON("/pdataservice/pdsCURD/deleteDataService", payload);
 }

src/view/Manage/Model/Component/ModelTable.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { Resizable } from 'react-resizable';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import ResizeObserver from 'rc-resize-observer';
+import ServiceDetail from './ServiceDetailModal';
 
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
@@ -142,6 +143,7 @@ const ModelTable = (props) => {
   const [ sortRule, setSortRule ] = useState(null); 
   const [ filterData, setFilterData ] = useState([]);
   const [ subData, setSubData ] = useState([]);
+  const [ serviceDetailParams, setServiceDetailParams ] = useState({ visible: false, id: '' }) 
 
   const app = useContext(AppContext);
 
@@ -480,6 +482,7 @@ const ModelTable = (props) => {
   const detailItem = (record) => {
     // onItemAction && onItemAction(record, 'detail', getDataModelerRole(user)===DataModelerRoleReader);
     app.openDetail?.({ service: record })
+    setServiceDetailParams({ visible: true, id: record.id })
   }
 
   const deployAction = (record) => {
@@ -680,6 +683,10 @@ const ModelTable = (props) => {
     }
   }
 
+  const onServiceDetailClose = () => {
+    setServiceDetailParams({ visible: false, id: '' })
+  }
+
   const mergedColumns = () => {
     let newColumns = [...columns];
     // if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
@@ -820,6 +827,7 @@ const ModelTable = (props) => {
         } */}
 
       </RcMenu>
+      <ServiceDetail visible={serviceDetailParams.visible} id={serviceDetailParams.id} onClose={onServiceDetailClose} />
       { contextHolder }
     </div>
   );

src/view/Manage/Model/Component/ServiceDetail.jsx

+import React, { useState, useMemo, useEffect } from 'react'
+import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'
+
+import { dispatch } from '../../../../model'
+import { highlightSearchContentByTerms } from '../../../../util'
+
+const FC = (props) => {
+  const { id, terms } = props
+
+  const [data, setData] = useState()
+  const [loading, setLoading] = useState(false)
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      fixed: 'left',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '中文名称',
+      width: 200,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      fixed: 'left',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+          <span>
+          {highlightSearchContentByTerms(text, terms)}
+          </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      width: 200,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '类型',
+      width: 150,
+      dataIndex: 'datatype',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (_, record, __) => {
+        if (record?.datatype) {
+
+          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
+
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
+          
+          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
+          }
+
+          return record.datatype.name||'';
+        }
+
+        return '';
+      }
+    },
+  ]
+
+  useEffect(() => {
+    getService()
+  }, [])
+
+  const getService = () => {
+    setLoading(true)
+
+    dispatch({
+      type: 'pds.getDataService',
+      payload: {
+        id
+      },
+      callback: (data) => {
+        setLoading(false)
+        setData(data||[])
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <Spin spinning={loading}>
+      <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
+      <Descriptions className='mt-3' column={3}>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{highlightSearchContentByTerms(data?.cnName||'', terms)}</Descriptions.Item>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{highlightSearchContentByTerms(data?.name||'', terms)}</Descriptions.Item>
+        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(data?.remark||'', terms)}</Descriptions.Item>
+      </Descriptions>
+      <h3 className='mr-3' style={{ marginBottom: 0 }}>字段列表</h3>
+      <Table
+        className='mt-3'
+        dataSource={data?.pdsdataServiceAttributes||[]}
+        columns={columns}
+        size='small'
+        rowKey='iid'
+        pagination={false}
+        sticky
+      />
+    </Spin>
+  )
+
+}
+
+export default FC

src/view/Manage/Model/Component/ServiceDetailModal.jsx

+import React, { useState, useMemo, useEffect } from 'react'
+import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'
+
+import { dispatch } from '../../../../model'
+import { highlightSearchContentByTerms } from '../../../../util'
+import ServiceDetail from './ServiceDetail'
+
+const FC = (props) => {
+  const { visible, id, onClose, terms } = props
+
+  const close = () => {
+    onClose?.()
+  }
+
+  return (
+    <Modal
+      width={1200}
+      visible={visible}
+      destroyOnClose
+      title='服务详情'
+      bodyStyle={{ minHeight: 300 }}
+      footer={<>
+        <Button onClick={close}>取消</Button>
+      </>}
+      onCancel={close}
+    >
+    { visible && <ServiceDetail id={id} terms={terms} /> }
+    </Modal>
+  )
+
+}
+
+export default FC