资产调整

src/model/assetmanage.js

@@ -9,6 +9,18 @@ export function* getLogs(payload) {
   return yield call(service.getLogs, payload);
 }
 
+export function* listElements() {
+  return yield call(service.listElements);
+}
+
+export function* listFilterElementIds() {
+  return yield call(service.listFilterElementIds);
+}
+
+export function* setupFilterElementIds(payload) {
+  return yield call(service.setupFilterElementIds, payload);
+}
+
 export function* addOrUpdateDataAsset(payload) {
   return yield call(service.addOrUpdateDataAsset, payload);
 }
@@ -21,9 +33,6 @@ export function* getDataAssetDetail(payload) {
   return yield call(service.getDataAssetDetail, payload);
 }
 
-export function* listBasicAttrs(payload) {
-  return yield call(service.listBasicAttrs, payload);
-}
 export function* listDataAssetsByPage(payload) {
   return yield call(service.listDataAssetsByPage, payload);
 }

src/service/dataassetmanager.js

@@ -8,6 +8,18 @@ export function getLogs(payload) {
   return GetJSON("/dataassetmanager/elementApi/listOperationLogsByPage", payload);
 }
 
+export function listElements() {
+  return PostJSON("/dataassetmanager/elementApi/listElements");
+}
+
+export function listFilterElementIds() {
+  return GetJSON("/dataassetmanager/elementApi/listFilterElementIds");
+}
+
+export function setupFilterElementIds(payload) {
+  return PostJSON2("/dataassetmanager/elementApi/setupFilterElementIds", payload);
+}
+
 export function addOrUpdateDataAsset(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/addOrUpdateDataAsset", payload);
 }
@@ -20,10 +32,6 @@ export function getDataAssetDetail(payload) {
   return GetJSON("/dataassetmanager/dataAssetApi/getDataAssetDetail", payload);
 }
 
-export function listBasicAttrs(payload) {
-  return GetJSON("/dataassetmanager/dataAssetApi/listBasicAttrs", payload);
-}
-
 export function listDataAssetsByPage(payload) {
   return GetJSON("/dataassetmanager/dataAssetApi/listDataAssetsByPage", payload);
 }

src/view/Manage/AssetManage/components/AssetDetail.jsx

-import React, { useEffect, useState } from "react"
-import { Modal, Typography } from "antd"
+import React, { useEffect, useState } from "react";
+import { Modal, Typography } from "antd";
 
 import AssetItem from './AssetItem';
+import { dispatch } from '../../../../model';
 
 const AssetDetail = (props)=>{
   
-  const { onCancel,visible, item } = props
+  const { onCancel, visible, id } = props;
+  const [ asset, setAsset ] = useState('');
   const [ assetName, setAssetName ] = useState('');
 
   useEffect(() => {
 
-    if (item) {
-      const index = (item.elements||[]).findIndex(element => element.name==='中文名称');
+    if ((id||'') !== '') {
+      getAssetThenGetAssetName();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ id ])
+
+  const getAssetThenGetAssetName = () => {
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        setAsset(data);
+        getAssetName(data);
+      }
+    })
+  }
+
+  const getAssetName = (data) => {
+    if (data) {
+      const index = (data.elements||[]).findIndex(element => element.name==='中文名称');
       if (index !== -1) {
-        setAssetName(item.elements[index].value||'');
+        setAssetName(data.elements[index].value||'');
+      }
     }
   }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ item ])
 
   return(
     <Modal
@@ -34,7 +55,7 @@ const AssetDetail = (props)=>{
       onCancel={()=>{ onCancel && onCancel()}}
       footer={null}
     >
-      <AssetItem data={item} />
+      <AssetItem data={asset} />
     </Modal>
   )
 }

src/view/Manage/AssetManage/components/AssetEdit.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, Space, Button } from 'antd';
+
+import { showMessage } from '../../../../util';
+import { dispatch } from '../../../../model';
+
+const AssetEdit = (props) => {
+
+  const { onCancel, visible, action, id, nodeId } = props;
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ elements, setElements ] = useState([]);
+  const [ asset, setAsset ] = useState('');
+
+  useEffect(() => {
+
+    if (visible) {
+      if (action === 'add') {
+        getAllElements();
+      } else if (id) {
+        getAllElements(() => {
+          getAsset();
+        });
+      }
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ visible, action, id ])
+
+  const getAllElements = ( cb = null ) => {
+    dispatch({
+      type: 'assetmanage.listElements',
+      callback: data => {
+        setElements(data||[]);
+
+        if (action === 'add') {
+          let _fieldsValue = {};
+          (data||[]).forEach(element => {
+            if (element.manualMaintain === '是') {
+              _fieldsValue[element.name] = '';
+            }
+          })
+
+          form.setFieldsValue(_fieldsValue);
+        }
+
+        cb && cb();
+      }
+    })
+  }
+
+  const getAsset = () => {
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        setAsset(data);
+        let _fieldsValue = {};
+        (data.elements||[]).forEach(element => {
+          if (element.manualMaintain === '是') {
+            _fieldsValue[element.name] = element.value;
+          }
+        })
+
+        form.setFieldsValue(_fieldsValue);
+      }
+    })
+  }
+
+  const onOk = async() => {
+    try {
+      const row = await form.validateFields();
+      
+      const newElements = [...elements];
+      (newElements||[]).forEach(element => {
+        if (row.hasOwnProperty(element.name)) {
+          element.value = row[element.name];
+        }
+      });
+
+      dispatch({
+        type: 'assetmanage.addOrUpdateDataAsset',
+        payload: { 
+          params: {
+            dirId: nodeId
+          },
+          data: action==='add' ? { elements: newElements } : { ...asset, elements: newElements } 
+        },
+        callback: () => {
+          setConfirmLoading(false);
+          onCancel && onCancel(true);
+          showMessage("success",(action==='add')?"新增成功":"修改成功");
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      setConfirmLoading(false);
+    }
+  }
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 17 },
+    },
+  };
+
+  return (
+    <Modal
+      forceRender
+      title='资产信息'
+      visible={ visible }
+      width={ 600 }
+      onCancel={() => { onCancel && onCancel(); } }
+      footer={
+        <Space>
+          <Button type="primary" onClick={ onOk } loading={ confirmLoading }>提交</Button>
+          <Button onClick={() => onCancel && onCancel() }>返回</Button>
+        </Space>
+      }
+    >
+      <Form {...formItemLayout} form={form}>
+        { (elements||[]).map((element, index) => {
+          return ( 
+            element.manualMaintain === '是' ? (
+              <Form.Item 
+                label={element.name}
+                name={element.name}
+                key={index}
+              >
+                <Input  />
+              </Form.Item>
+            ) : null
+          )
+        })}
+      </Form>
+    </Modal>
+  );
+} 
+
+export default AssetEdit;
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetModal.jsx

-import React,{useState, useEffect,} from "react"
-import {Modal,Form,Input,Space,Button} from "antd"
-import { dispatch } from '../../../../model';
-import { showMessage } from '../../../../util';
-
-
-const AssetModal = (props)=>{
-    const {handleCancle,visible,editBox,addType,nodeId,attrBox,setPageNumber,pageNumber} = props
-    const [form] = Form.useForm()
-    const [saveLoad,setSaveLod] = useState(false)
-
-    useEffect(()=>{
-        if(visible){
-            reset()
-        }
-        //eslint-disable-next-line react-hooks/exhaustive-deps
-    },[visible])
-
-    // useEffect(()=>{
-    //     if(attrBox){
-    //         reset()
-	// 			}
-	// 			//eslint-disable-next-line react-hooks/exhaustive-deps
-    // },[attrBox])
-
-    const handleOk =async()=>{
-        setSaveLod(true)
-        form.validateFields().then((value)=>{
-            if(addType){
-
-                let elements = [...attrBox];
-                (elements||[]).forEach((element) => {
-                    for (let key in value) {
-                        if (key === element.name) {
-                            element.value = value[key];
-                        }
-                    }
-                });
-            
-                dispatch({
-                    type: 'assetmanage.addOrUpdateDataAsset',
-                    payload: { params:{dirId: nodeId},data: { elements } },
-                    callback: data => {
-                        setSaveLod(false)
-                        handleCancle()
-                        setPageNumber({...pageNumber,rebuild:new Date().getTime()})
-
-                        showMessage("success","新增成功")
-                    },
-                    error: () => {
-
-                    }
-                })
-            }else{
-                let elements = [...attrBox];
-                (elements||[]).forEach((element) => {
-                    for (let key in value) {
-                        if (key === element.name) {
-                            element.value = value[key];
-                        }
-                    }
-                });
-
-                dispatch({
-                    type: 'assetmanage.addOrUpdateDataAsset',
-                    payload: { params:{dirId: nodeId},data: { ...editBox, elements } },
-                    callback: data => {
-                        setSaveLod(false)
-                        setPageNumber({...pageNumber,rebuild:new Date().getTime()})
-                        handleCancle()
-                        showMessage("success","修改成功")
-                    },
-                    error: () => {
-
-                    }
-                })
-            }
-            
-        }).catch(()=>{
-            setSaveLod(false)
-        })
-    }
-    
-    const reset = () =>{
-        form.resetFields()
-    }
-
-
-    const formItemLayout = {
-        labelCol: {
-            xs: { span: 24 },
-            sm: { span: 5 },
-        },
-        wrapperCol: {
-            xs: { span: 24 },
-            sm: { span: 17 },
-        },
-    };
-
-    
-
-    return(
-        <Modal
-            forceRender
-            title={`资产信息`}
-            visible={visible}
-            width={600}
-            onCancel={()=>{handleCancle()}}
-            // style={{ top: 30}}
-            footer={
-                <Space>
-                    <Button type="primary" onClick={handleOk} loading={saveLoad}>提交</Button>
-                    <Button onClick={()=>reset()} >重置</Button>
-                    <Button onClick={()=>handleCancle()}>返回</Button>
-                </Space>
-              }
-        >
-            <Form {...formItemLayout} form={form}>
-                {attrBox.map((item,i)=>{
-
-                    return ( 
-                        item.manualMaintain === '是' ?(
-                            <Form.Item 
-                                label={item.name}
-                                name={item.name}
-                                key={`form${i}`}
-                                initialValue={item.value||''}
-                            >
-                                <Input  />
-                            </Form.Item>
-                        ) : null
-                    )
-                })}
-            </Form>
-
-        </Modal>
-    )
-}
-
-export default AssetModal;
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetTable.jsx

@@ -5,7 +5,7 @@ import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-desi
 import ImportElement from './ImportElement';
 import FilterElement from './FilterElement';
 import ImportAsset from './ImportAsset';
-import AssetModal from "./AssetModal"
+import AssetEdit from './AssetEdit';
 import AssetDetail from "./AssetDetail"
 import AssetItem from './AssetItem';
 import { dispatch } from '../../../../model';
@@ -14,73 +14,61 @@ import { showMessage, showNotifaction } from '../../../../util';
 import "./AssetTable.less";
 
 const AssetTable = (props) =>{
-  const {nodeId, node} = props
 
-  const [tableLoad,setTableLoad] = useState(false)
-  const [attrBox,setAttrBox] = useState([])
-  const [editBox,setEditBox] = useState({})
-  const [tableBox,setTableBox] = useState({dataList:[],total:0,})
-  const [pageNumber,setPageNumber] = useState({page:1,size:20,rebuild:0})
-  const {dataList,total} = tableBox
-  const {page,size,rebuild} = pageNumber
-  const [modal, contextHolder] = Modal.useModal();
-  const [visible,setVisible] = useState({visible:false,addtype:true})
-  const [visible2,setVisible2] = useState({visible:false,box:{}})
-  const [selectBox,setSelectBox] = useState([])
-  const [checkValue,setCheckValue] = useState(false)
+  const { nodeId, node } = props
+  const [ loading, setLoading ] = useState(false);
   const [ assetNames, setAssetNames ] = useState([]);
+  const [ assets, setAssets ] = useState([]);
+  const [ total, setTotal ] = useState(0);
+  const [ selectedKeys, setSelectedKeys ] = useState([]);
+  const [ checkAllValue, setCheckAllValue ] = useState(false);
   const [ importAssetVisible, setImportAssetVisible ] = useState(false);
   const [ importElementVisible, setImportElementVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
+  const [ assetEditVisible, setAssetEditVisible ] = useState(false);
+  const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
+  const [ currentAssetId, setCurrentAssetId ] = useState('');
+  const [ assetEditAction, setAssetEditAction ] = useState('');
+  const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
+  const { pageNum, pageSize } = pagination;
 
-  useEffect(()=>{
-    getListBasicAttrs();
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  },[])
+  const [ modal, contextHolder ] = Modal.useModal();
 
   useEffect(()=>{
-    if(nodeId) {
-      setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()});
+    if ((nodeId||'') !== '' ) {
+      setPagination({ ...pagination, pageNum: 1 });
+      setSelectedKeys([]);
+      setCheckAllValue(false);
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  },[nodeId])
+  }, [ nodeId ])
 
 
   useEffect(()=>{
-    if(nodeId&&rebuild!==0) {
+    if ((nodeId||'') !== '' ) {
       getTable();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  },[rebuild])
+  }, [ pagination ])
 
   const changeCurrent=(page,size)=>{
-    setPageNumber({page,size,rebuild:new Date().getTime()});
-  }
-
-  const getListBasicAttrs=()=>{
-    dispatch({
-      type: 'assetmanage.listBasicAttrs',
-      payload: null,
-      callback: dataBox => {
-        setAttrBox(dataBox);
-      }
-    })
+    setPagination({ pageNum: page, pageSize: size });
   }
 
   const getTable=()=>{
-    setTableLoad(true)
+    setLoading(true);
     dispatch({
       type: 'assetmanage.listDataAssetsByPage',
       payload: {
         dirId: nodeId,
-        pageNum: page,
-        pageSize: size,
+        pageNum,
+        pageSize,
         keyword: ''
       },
-      callback: dataBox => {
+      callback: data => {
         const _assetNames = [];
-        (dataBox.data||[]).forEach((table) => {
-          (table.elements||[]).forEach((element) => {
+        (data.data||[]).forEach((asset) => {
+          (asset.elements||[]).forEach((element) => {
             if (element.name === '中文名称') {
               _assetNames.push(element.value||'');
             }
@@ -88,49 +76,48 @@ const AssetTable = (props) =>{
         })
         
         setAssetNames(_assetNames);
-        setTableBox({dataList:dataBox.data,total:dataBox.total})
-        setSelectBox([])
-        setCheckValue(false)
-        setTableLoad(false)
-
+        setAssets(data.data||[]);
+        setTotal(data.total||0);
+        setLoading(false);
       },
       error: () => {
-        setTableLoad(false)
+        setLoading(false)
       }
     })
   }
 
-    const add =()=>{
-        setVisible({addtype:true,visible:true})
+  const addAsset =()=>{
+    setAssetEditAction('add');    
+    setAssetEditVisible(true);
   }
 
-  const handleCancle=()=>{
-    let box = [ ...attrBox];
-    for (let element of box){
-      element.value = ''
-    }
-    setAttrBox(box);
-    setVisible({...visible,visible:false})
+  const onAssetEditCancel=(refresh = false) => {
+    setAssetEditVisible(false);
+    refresh && getTable();
   }
 
-  const edit = (data) =>{
-    setAttrBox(data.elements||[])
-    setEditBox(data)
-    setVisible({addtype:false,visible:true})
+  const editAsset = (item) =>{
+    setCurrentAssetId(item.id);
+    setAssetEditAction('edit');
+    setAssetEditVisible(true);
   }
 
-
-  const del = (data) =>{
+  const deleteAsset = (item) =>{
     modal.confirm({
       title: '提示',
       content: '该资产在所有目录上唯一存在，移除后，你可以前往“资产回收站”重新挂载。',
       onOk: () => {
         dispatch({
           type: 'assetmanage.unloadDataAssets',
-          payload: {params:{dirId:nodeId},data:[`${data.id}`]},
-          callback: dataBox => {
-            setPageNumber({...pageNumber,rebuild:new Date().getTime()})
+          payload: {
+            params: {
+              dirId: nodeId
+            },
+            data:[ item.id ]
+          },
+          callback: () => {
             showMessage("success","删除成功")
+            getTable();
           },
           error: () => {
           }
@@ -143,56 +130,57 @@ const AssetTable = (props) =>{
     window.open(`/api/dataassetmanager/dataAssetApi/export?parentPath=${node.path||''}`);
   }
 
-  const more=(data)=>{
-    setVisible2({box:data,visible:true})
+  const detailAsset = (item)=>{
+    setCurrentAssetId(item.id);
+    setAssetDetailVisible(true);
   }
 
-  const handleCancle2=()=>{
-    setVisible2({...visible2,visible:false})
+  const onAssetDetailCancel = () => {
+    setAssetDetailVisible(false);
   }
  
-  const onCheck =(checked)=>{        
-    if(checked){
-      let box = []
-      if(dataList&&dataList[0]!==undefined){
-        for (let data of dataList){
-          box.push(String(data.id))
-        }
-      }
-      setSelectBox(box)
-    }else{
-      setSelectBox([])
-    }
-    setCheckValue(checked)
-  }
+  const onCheckAll =(checked)=>{        
+    setCheckAllValue(checked);
 
+    if (checked) {
+      const ids = [];
+      (assets||[]).forEach(asset => {
+        ids.push(asset.id||'');
+      })
       
-  const onChange=(checkedValue)=>{
-    if(checkedValue.length===dataList.length){
-      setCheckValue(true)
-    }else{
-      setCheckValue(false)
+      setSelectedKeys(ids);
+    } else {
+      setSelectedKeys([]);
+    }
   }
-    setSelectBox(checkedValue)
+
+  const onAssetCheckboxChange = (value) => {
+    setSelectedKeys(value||[]);
+    setCheckAllValue((value||[]).length === (assets||[]).length);
   }
 
-  const dels=()=>{
-    if(selectBox&&selectBox[0]!==undefined){
+  const deleteAssets = () => {
+    if ((selectedKeys||[]).length > 0) {
       modal.confirm({
         title: '提示',
-        content: `你已选择了${selectBox.length}个资产,确定把它们都从挂载目录上移除吗?`,
+        content: `你已选择了${selectedKeys.length}个资产,确定把它们都从挂载目录上移除吗?`,
         onOk: () => {
           dispatch({
             type: 'assetmanage.unloadDataAssets',
-            payload: {params:{dirId:nodeId},data:selectBox},
-            callback: dataBox => {
-              setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
-              showMessage("success","删除成功")
+            payload: {
+              params:
+              {
+                dirId: nodeId
+              },
+              data: selectedKeys
+            },
+            callback: () => {
+              showMessage("success","删除成功");
+              getTable();
             },
             error: () => {
             }
           })
-
         }
       })
     }else{
@@ -226,8 +214,8 @@ const AssetTable = (props) =>{
     <Card
       bordered={false} 
       className="asset-list"
-      bodyStyle={{padding:'0 10px'}}
-      headStyle={{padding:10}}
+      bodyStyle={{ padding: '0 10px' }}
+      headStyle={{ padding: 10 }}
       title={
         <div className='d-flex'>
           <Button style={{ marginLeft: 'auto' }} type="primary" >资产回收站</Button>
@@ -243,7 +231,12 @@ const AssetTable = (props) =>{
           padding: '10px 0',
           borderBottom:'1px solid #f0f0f0'
         }} >
-        <Switch checkedChildren="全不选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
+        <Switch 
+          checkedChildren="全不选" 
+          unCheckedChildren="全选" 
+          checked={ checkAllValue } 
+          onChange={ onCheckAll } 
+        />
         <div>
           <Space>
             <span>资产要素:</span>
@@ -259,7 +252,7 @@ const AssetTable = (props) =>{
             <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
             <Popover 
               placement="bottom" 
-              content={<FilterElement elements={attrBox} onCancel={onFilterElementVisibleChange} />} 
+              content={<FilterElement onCancel={onFilterElementVisibleChange} />} 
               title='资产要素过滤'
               visible={filterElementVisible} 
               onVisibleChange={onFilterElementVisibleChange}
@@ -269,11 +262,11 @@ const AssetTable = (props) =>{
           </Space>
           <Space className='ml-5'>
             <span>资产:</span>
-            <Button type="primary"  onClick={add}>新增</Button>
-            <Button type="primary" danger onClick={dels} >删除</Button>
+            <Button type="primary"  onClick={ addAsset }>新增</Button>
+            <Button type="primary" danger onClick={ deleteAssets } >删除</Button>
             <Popover 
               placement="bottomRight" 
-              content={<ImportAsset node={node} onCancel={onImportAssetVisibleChange} />} 
+              content={ <ImportAsset node={node} onCancel={onImportAssetVisibleChange} /> } 
               title='资产导入'
               visible={importAssetVisible} 
               onVisibleChange={onImportAssetVisibleChange}
@@ -286,15 +279,19 @@ const AssetTable = (props) =>{
           </Space>
         </div>
       </div>
-      <Checkbox.Group style={{width:'100%'}} onChange={onChange} value={selectBox}>
+      <Checkbox.Group 
+        style={{ width: '100%' }}
+        onChange={ onAssetCheckboxChange } 
+        value={ selectedKeys }
+      >
         <List
-          loading={tableLoad}
+          loading={loading}
           itemLayout="vertical"
-          dataSource={dataList || []}
+          dataSource={ assets||[] }
           footer={null}
           renderItem={(item, index) => (
             <List.Item>
-              <Skeleton title={false} loading={tableLoad} active>
+              <Skeleton title={false} loading={loading} active>
                 <List.Item.Meta
                   title={
                     <>
@@ -305,13 +302,13 @@ const AssetTable = (props) =>{
                         </div>
                         <Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
                           <Tooltip placement='bottom' title={'修改'}>
-                            <Button icon={<EditOutlined />} size='small' onClick={() => { edit(item); }} />
+                            <Button icon={<EditOutlined />} size='small' onClick={() => { editAsset(item); }} />
                           </Tooltip>
                           <Tooltip placement='bottom' title={'详情'}>
-                            <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { more(item); }} />
+                            <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailAsset(item); }} />
                           </Tooltip>
                           <Tooltip placement='bottom' title={'删除'}>
-                            <Button icon={<DeleteOutlined />} size='small' onClick={() => { del(item); }} />
+                            <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteAsset(item); }} />
                           </Tooltip>
                         </Space>
                       </div>
@@ -331,18 +328,25 @@ const AssetTable = (props) =>{
           showQuickJumper
           onChange={changeCurrent}
           onShowSizeChange={changeCurrent}
-          current={page}
-          pageSize={size}
+          current={pageNum}
+          pageSize={pageSize}
           defaultCurrent={1}
           total={total}
           showTotal={total => `共 ${total} 条`}
         />
       </Checkbox.Group>
-      <AssetModal visible={visible.visible} attrBox={attrBox} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} nodeId={nodeId}  setPageNumber={setPageNumber} pageNumber={pageNumber}/>
+      {/* <AssetModal visible={visible.visible} attrBox={attrBox} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} nodeId={nodeId}  setPageNumber={setPageNumber} pageNumber={pageNumber}/> */}
+      <AssetEdit 
+        visible={assetEditVisible}
+        action={assetEditAction}
+        id={currentAssetId}
+        nodeId={nodeId}
+        onCancel={onAssetEditCancel}
+      />
       <AssetDetail 
-        visible={visible2.visible} 
-        item={visible2.box} 
-        onCancel={handleCancle2}
+        visible={assetDetailVisible} 
+        id={currentAssetId} 
+        onCancel={onAssetDetailCancel}
       />
       {contextHolder}
     </Card>

src/view/Manage/AssetManage/components/FilterElement.jsx

 import React, { useEffect, useState }  from 'react';
 import { Avatar, Row, Col, Divider, Checkbox, Typography, Space, Button, Switch } from 'antd';
 
+import { dispatch } from '../../../../model';
 import './FilterElement.less';
 
 const colors = [
@@ -17,19 +18,38 @@ const colors = [
 
 const FilterElement = (props) => {
 
-  const { elements, onCancel } = props;
+  const { onCancel } = props;
+  const [ elements, setElements ] = useState([]);
   const [ typesOfElements, setTypesOfElements ] = useState([]);
   const [ selectedKeys, setSelectedKeys ] = useState([]);
 
   useEffect(() => {
 
-    if (elements) {
-      convertData();
-    }
+    getAllFilterElementIdsThenGetAllElements();
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ elements ]);
+  }, []);
+
+  const getAllFilterElementIdsThenGetAllElements = () => {
+    dispatch({
+      type: 'assetmanage.listFilterElementIds',
+      callback: data => {
+        setSelectedKeys(data||[]);
+        getAllElements();
+      }
+    })
+  }
+
+  const getAllElements = () => {
+    dispatch({
+      type: 'assetmanage.listElements',
+      callback: data => {
+        setElements(data||[]);
+        convertElements(data||[]);
+      }
+    })
+  }
 
-  const convertData = () => {
+  const convertElements = (elements) => {
     const _typesOfElements = [];
 
     const _types = [];
@@ -72,7 +92,16 @@ const FilterElement = (props) => {
   }
 
   const onOk = () => {
-    onCancel && onCancel();
+
+    dispatch({
+      type: 'assetmanage.setupFilterElementIds',
+      payload: {
+        data: selectedKeys
+      },
+      callback: () => {
+        onCancel && onCancel(false, true);
+      }
+    })
   }
 
   return (

src/view/Manage/AssetManage/components/LeftTree.jsx

@@ -9,7 +9,7 @@ import './LeftTree.less';
 
 const {TreeNode} = Tree
 const LeftTree = (props)=>{
-    const {setNodeId,nodeId, setNode} = props
+    const {setNodeId,nodeId, setNode, readOnly=false} = props
     const [treeBox,setTreeBox] = useState([])
     const [dataList,setDataList] = useState([])
 
@@ -35,10 +35,10 @@ const LeftTree = (props)=>{
     }//展开树
 
     const selectNode=(selectedKeys,e)=>{
-        // console.log('selectedKeys',selectedKeys)
-        // console.log('e',e)
+        console.log('selectedKeys',selectedKeys)
+        console.log('e',e)
         if(e.selectedNodes[0]){
-            setNodeId(selectedKeys[0])
+            setNodeId && setNodeId(selectedKeys[0])
             getNodeDetail(selectedKeys[0])
             setNodeBox({...nodeBox,selectKey:selectedKeys,dataBox:e.selectedNodes[0].dataRef})
         }else{
@@ -54,7 +54,7 @@ const LeftTree = (props)=>{
             payload: {dirId:nodeId},
             callback: dataBox => {
                 setDetailBox(dataBox)
-                setNode(dataBox)
+                setNode && setNode(dataBox)
             },
             error: () => {
             }
@@ -307,7 +307,7 @@ const LeftTree = (props)=>{
 
         <Card
             className={"asset-tree"}
-            title={<Space>
+            title={readOnly ? null : <Space>
                 <Tooltip title="新增目录">
                     <Button
                         shape="circle" 

src/view/Manage/AssetRecycle/AssetMount.jsx

+import React from "react";
+import { Modal } from "antd";
+
+import LeftTree from '../AssetManage/components/LeftTree';
+
+const AssetMount = (props)=>{
+  
+  const { onCancel,visible, item } = props
+
+  return(
+    <Modal
+      title='挂载详情'
+      visible={visible}
+      width={800}
+      onCancel={()=>{ onCancel && onCancel()}}
+    >
+      <LeftTree readOnly={true} />
+    </Modal>
+  )
+}
+
+export default AssetMount;
\ No newline at end of file

src/view/Manage/AssetRecycle/index.jsx

@@ -4,6 +4,7 @@ import { ReconciliationOutlined, DeleteOutlined, UndoOutlined  } from '@ant-desi
 
 import { dispatchLatest } from '../../../model';
 import AssetDetail from '../AssetManage/components/AssetDetail';
+import AssetMount from './AssetMount';
 
 import './index.less';
 
@@ -15,6 +16,7 @@ const AssetRecycle = (props) => {
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const [ currentAsset, setCurrentAsset ] = useState(null);
   const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
+  const [ assetMountVisible, setAssetMountVisible ] = useState(false);
 
   const { pageNum, pageSize } = pagination;
 
@@ -55,7 +57,7 @@ const AssetRecycle = (props) => {
               <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailItem(record); }} />
             </Tooltip>
             <Tooltip placement='bottom' title='挂载'>
-              <Button icon={<UndoOutlined />} size='small' onClick={() => { recycleItem(record); }} />
+              <Button icon={<UndoOutlined />} size='small' onClick={() => { mountItem(record); }} />
             </Tooltip>
             <Tooltip placement='bottom' title='删除'>
               <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteItem(record); }} />
@@ -90,8 +92,9 @@ const AssetRecycle = (props) => {
     setAssetDetailVisible(true);
   }
 
-  const recycleItem = (record) => {
-
+  const mountItem = (record) => {
+    setCurrentAsset(record);
+    setAssetMountVisible(true);
   }
 
   const deleteItem = (record) => {
@@ -102,6 +105,10 @@ const AssetRecycle = (props) => {
     setAssetDetailVisible(false);
   }
 
+  const onAssetMountCancel = () => {
+    setAssetMountVisible(false);
+  }
+
   return (
     <div className='asset-recycle p-3' style={{ backgroundColor: '#fff' }}>
       <Table
@@ -130,8 +137,13 @@ const AssetRecycle = (props) => {
       />
       <AssetDetail 
         visible={ assetDetailVisible }
-        item = { currentAsset }
-        onCancel = { onAssetDetailCancel }
+        item={ currentAsset }
+        onCancel={ onAssetDetailCancel }
+      />
+      <AssetMount
+        visible={ assetMountVisible }
+        item={ currentAsset }
+        onCancel={ onAssetMountCancel }
       />
     </div>
   );

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

@@ -338,8 +338,13 @@ const ImportActionTable = (props) => {
 
       const newData = [...data];
       const index = newData.findIndex((item) => editingKey === item.iid);
+
+      if (index === -1) {
+        newData.splice(0, 0, {iid: editingKey, ...allValues});
+      } else if (index !== -1) {
         const item = newData[index];
         newData.splice(index, 1, { ...item, ...allValues });
+      }
 
       dispatchLatest({
         type: 'datamodel.suggest',