资产

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

@@ -59,8 +59,9 @@ const AssetAction = (props) => {
 
   const columns = [
     {
-      title: '技术ID',
+      title: '技术ID(英文名称)',
       dataIndex: 'name',
+      width: 200,
       ellipsis: true,
       render: (text, record, _) => {
         return (
@@ -77,7 +78,7 @@ const AssetAction = (props) => {
     {
       title: '名称',
       dataIndex: 'cnName',
-      width: 100,
+      width: 200,
       ellipsis: true,
     },
     {

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

@@ -13,7 +13,7 @@ const AssetDetailDrawer = (props) => {
       forceRender
       visible={ visible }
       title='资产详情'
-      width='80%'
+      width='90%'
       placement="right"
       closable={ true }
       onClose={() => {

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

 import React, { useEffect, useState } from "react";
-import { Modal, Button, Space, Tree, Row, Col, Table, Pagination } from "antd";
+import { Modal, Button, Space, Tree, Row, Col, Table, Pagination, Select, Input, Divider, Spin } from "antd";
 import { getAttributesByMetadataModel } from "../../../../service/dataassetmanager";
 
 import { dispatch } from '../../../../model';
 import { showMessage } from "../../../../util";
+import useDebounce from "../../../../layout/useDebounce";
+
+const options = [
+  { name: '基础数据名称', key: 'name' },
+  { name: '基础数据编码', key: 'code' },
+]
 
 const FC = (props) => {
   const { visible, onCancel, id } = props;
@@ -11,11 +17,15 @@ const FC = (props) => {
   const [tableData, setTableData] = useState(undefined);
   const [total, setTotal] = useState(0);
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
-  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [loadingTree, setLoadingTree] = useState(false);
+  const [loadingTable,setLoadingTable] = useState(false);
   const [currentTreeParams, setCurrentTreeParams] = useState({
     treeId: undefined,
     dataType: undefined,
   });
+  const [queryProperty, setQueryProperty] = useState(options[0].key);
+  const [keyword, setKeyword] = useState(undefined);
+  const debouncedKeyword = useDebounce(keyword, 300);
 
   const { pageNum, pageSize } = pagination;
 
@@ -30,8 +40,8 @@ const FC = (props) => {
       ellipsis: true,
     },
     {
-      title: '标准中文名',
-      dataIndex: 'name',
+      title: '基础数据编码',
+      dataIndex: 'code',
       ellipsis: true,
       render: (text, record) => {
         return <a onClick={() => {
@@ -42,8 +52,8 @@ const FC = (props) => {
       }
     },
     {
-      title: '标准名称',
-      dataIndex: 'cnName',
+      title: '基础数据名称',
+      dataIndex: 'name',
       ellipsis: true,
       render: (text, record) => {
         return <a onClick={() => {
@@ -62,12 +72,13 @@ const FC = (props) => {
   }, [visible])
 
   useEffect(() => {
-    if (currentTreeParams.treeId) {
+    if (visible && currentTreeParams.treeId) {
       getTableData();
     }
-  }, [pagination, currentTreeParams])
+  }, [visible, pagination, currentTreeParams, queryProperty, debouncedKeyword])
 
   const getTreeData = () => {
+    setLoadingTree(true);
     dispatch({
       type: 'assetmanage.getStandardTree',
       payload: {
@@ -76,6 +87,7 @@ const FC = (props) => {
         parentClass: 'Catalog'
       },
       callback: data => {
+        setLoadingTree(false);
         const filterData = data?.filter(item => item.name !== '草稿');
 
         if (filterData && filterData.length > 0) {
@@ -89,11 +101,15 @@ const FC = (props) => {
         } 
 
         setTreeData(filterData);
+      },
+      error: () => {
+        setLoadingTree(false);
       }
     });
   }
 
   const getTableData = () => {
+    setLoadingTable(true);
     dispatch({
       type: 'assetmanage.getStandardList',
       payload: {
@@ -101,17 +117,21 @@ const FC = (props) => {
           page: pageNum,
           size: pageSize,
           parentId: currentTreeParams.treeId,
-          keyword: '',
-          queryProperty: 'name',
+          keyword: debouncedKeyword,
+          queryProperty: queryProperty,
         },
         data: [`Catalog,StandardCatalog,${currentTreeParams.dataType}`]
       },
       callback: data => {
+        setLoadingTable(false);
         data.content?.forEach(item => {
           item.children = null;
         });
         setTableData(data.content);
         setTotal(data.totalElements);
+      },
+      error: () => {
+        setLoadingTable(false);
       }
     });
   }
@@ -145,10 +165,30 @@ const FC = (props) => {
     }
   }
 
+  const onSelectChange = (value) => {
+    setQueryProperty(value);
+  }
+
+  const onSearchChange = (e) => {
+    setKeyword(e.target.value);
+  }
+
   const changeCurrent = (page,size) => {
     setPagination({ pageNum: page, pageSize: size });
   }
 
+  const reset = () => {
+    setLoadingTree(false);
+    setLoadingTable(false);
+    setCurrentTreeParams({
+      treeId: undefined,
+      dataType: undefined,
+    });
+    setQueryProperty(options[0].key);
+    setKeyword(undefined);
+    setPagination({ pageNum: 1, pageSize: 20 });
+  }
+
   const loop = (data) =>
     data?.map(item => { 
       if (item.children && item.children.length>0) {
@@ -164,29 +204,57 @@ const FC = (props) => {
       visible={ visible }
       centered
       width='90%'
-      onCancel={() => { onCancel?.(); } }
+      onCancel={() => { 
+        reset();
+        onCancel?.(); 
+      }}
       footer={
         <Space>
-          <Button onClick={() => onCancel?.() }>取消</Button>
+          <Button onClick={() => {
+            reset();
+            onCancel?.(); 
+          }}>取消</Button>
         </Space>
       }
       bodyStyle={{ padding: '24px', height: '70vh', overflow: 'auto' }}
     >
       <Row>
-        <Col span={6}>
-          <Tree
-            showLine={true}
-            showIcon={false}
-            treeData={loop(treeData)}
-            onSelect={onTreeSelect} 
-            selectedKeys={currentTreeParams.treeId ? [currentTreeParams.treeId]: undefined}
-          />
+        <Col span={5}>
+          <Spin spinning={loadingTree}>
+            <Tree
+              showLine={true}
+              showIcon={false}
+              treeData={loop(treeData)}
+              onSelect={onTreeSelect} 
+              selectedKeys={currentTreeParams.treeId ? [currentTreeParams.treeId]: undefined}
+            />
+          </Spin>
         </Col>
         <Col span={1}>
           <div style={{ width: 1, height: 'calc(70vh - 48px)', backgroundColor: '#f0f0f0' }} ></div>
         </Col>
-        <Col span={17}>
+        <Col span={18}>
+          <div>
+            <Space>
+              <Select
+                value={queryProperty}
+                onChange={onSelectChange}
+                style={{ width: 160 }}
+              >
+              {
+                options.map((option, index) => {
+                  return (
+                    <Select.Option key={index} value={option.key} >{option.name}</Select.Option>
+                  )
+                })
+              }
+              </Select>
+              <Input value={keyword} onChange={onSearchChange} placeholder='请输入关键字' />
+            </Space>
+          </div>
+          <Divider style={{ margin: '10px 0' }} />
           <Table 
+            loading={loadingTable}
             columns={columns}
             dataSource={tableData||[]}
             rowKey='_id'