Skip to content

S
szse
Commit 3ea3e720 by zhaochengxiang
Options

资产管理调整

parent 597eb9fd
Showing with 571 additions and 346 deletions
src/index.less
...@@ -98,5 +98,9 @@ div[id^='__qiankun_microapp_wrapper_'] { ...@@ -98,5 +98,9 @@ div[id^='__qiankun_microapp_wrapper_'] {
word-break: break-all; word-break: break-all;
} }
.yy-popover-content {
pointer-events: auto !important;
}
src/view/Manage/AssetManage/components/AssetDetail.jsx
import React from "react" import React, { useEffect, useState } from "react"
import {Modal,Descriptions} from "antd" import { Modal, Typography } from "antd"
import AssetItem from './AssetItem';
const AssetDetail = (props)=>{
const { onCancel,visible, item } = props
const [ assetName, setAssetName ] = useState('');
useEffect(() => {
const AssetDetail = (props)=>{ if (item) {
const {handleCancle,visible,boxDetail} = props const index = (item.elements||[]).findIndex(element => element.name==='中文名称');
return( if (index !== -1) {
<Modal setAssetName(item.elements[index].value||'');
title={`资产Id:${boxDetail.id}`} }
visible={visible} }
width={800} //eslint-disable-next-line react-hooks/exhaustive-deps
onCancel={()=>{handleCancle()}} }, [ item ])
// style={{ top: 30}}
footer={null}
>
<Descriptions size="small" column={2} bordered>
{boxDetail.elements&&boxDetail.elements.map((element, index)=>{
return(
<Descriptions.Item key={index} label={element.name}>{element.value}</Descriptions.Item>
)
})
}
</Descriptions>
</Modal> return(
) <Modal
title={
<Typography.Paragraph
className='mr-5'
title={`资产: ${assetName||''}`}
ellipsis
>
{`资产: ${assetName||''}`}
</Typography.Paragraph>}
visible={visible}
width={800}
onCancel={()=>{ onCancel && onCancel()}}
footer={null}
>
<AssetItem data={item} />
</Modal>
)
} }
export default AssetDetail; export default AssetDetail;
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetItem.jsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Avatar, Row, Col, Typography, Divider } from 'antd';
import './AssetItem.less';
const colors = [
'#BDD2FD',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const AssetItem = (props) => {
const { data } = props;
const [ typesOfElements, setTypesOfElements ] = useState([]);
useEffect(() => {
if (data) {
convertData();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ data ]);
const convertData = () => {
const _typesOfElements = [];
const _types = [];
data && (data.elements||[]).forEach(element => {
if (_types.indexOf(element.type||'') === -1) {
_types.push(element.type||'');
}
})
_types.forEach(type => {
const _elements = (data.elements||[]).filter(element => (element.type||'') === type);
_typesOfElements.push({ type, elements: _elements||[] });
})
setTypesOfElements(_typesOfElements);
}
return (
<div className='asset-item'>
{
(typesOfElements||[]).map((typeOfElements, index) => {
const _type = typeOfElements.type||'';
return (
<div key={index} className='d-flex' style={{ alignItems: 'center' }}>
<Avatar className='mr-3' style={{ backgroundColor: colors[index%colors.length] }}>{ _type==='' ? '无' : _type.slice(0, 1) }</Avatar>
<div className='textOverflow' style={{ flex: 1 }}>
<Row className='mb-3' style={{ width: '100%' }}>
{
typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
return (
<Col className='mt-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
{ `${element.name||''}: ${element.value||''}` }
</Typography.Paragraph>
</Col>
);
})
}
</Row>
{ index !== ((typesOfElements||[]).length-1) && <Divider /> }
</div>
</div>
)
})
}
</div>
);
}
export default AssetItem;
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetItem.less 0 → 100644
.asset-item {
.yy-divider-horizontal {
margin: 0 !important;
}
.yy-typography, .yy-typography p {
margin-bottom: 0 !important;
}
}
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetTable.jsx
import React,{useState, useEffect} from "react" import React,{ useState, useEffect } from "react";
import {Card,Checkbox,Button,List,Skeleton,Row,Col,Typography,Pagination ,Space,Modal,Switch} from "antd" import { Card, Checkbox, Button, List, Skeleton, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover } from "antd";
import "./AssetTable.less" import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import {dispatch } from '../../../../model';
import { dispatch } from '../../../../model';
import AssetModal from "./AssetModal" import AssetModal from "./AssetModal"
import AssetDetail from "./AssetDetail" import AssetDetail from "./AssetDetail"
import ImportAsset from './ImportAsset'; import ImportAsset from './ImportAsset';
import AssetItem from './AssetItem';
import ImportElement from './ImportElement';
import { showMessage } from '../../../../util'; import { showMessage } from '../../../../util';
const { Text } = Typography; import "./AssetTable.less";
const AssetTable = (props) =>{ const AssetTable = (props) =>{
const {nodeId, node} = props const {nodeId, node} = props
const [tableLoad,setTableLoad] = useState(false) const [tableLoad,setTableLoad] = useState(false)
const [attrBox,setAttrBox] = useState([]) const [attrBox,setAttrBox] = useState([])
const [attrBox2,setAttrBox2] = useState({}) const [editBox,setEditBox] = useState({})
const [tableBox,setTableBox] = useState({dataList:[],total:0,})
const [editBox,setEditBox] = useState({}) const [pageNumber,setPageNumber] = useState({page:1,size:20,rebuild:0})
const {dataList,total} = tableBox
const [keyWord,setKeyWord] = useState('') const {page,size,rebuild} = pageNumber
const [keyMessage,setKeyMessage] = useState('') const [modal, contextHolder] = Modal.useModal();
const [visible,setVisible] = useState({visible:false,addtype:true})
const [tableBox,setTableBox] = useState({dataList:[],total:0,}) const [visible2,setVisible2] = useState({visible:false,box:{}})
const [pageNumber,setPageNumber] = useState({page:1,size:20,rebuild:0}) const [selectBox,setSelectBox] = useState([])
const {dataList,total} = tableBox const [checkValue,setCheckValue] = useState(false)
const {page,size,rebuild} = pageNumber const [ assetNames, setAssetNames ] = useState([]);
const [modal, contextHolder] = Modal.useModal(); const [ importAssetVisible, setImportAssetVisible ] = useState(false);
const [visible,setVisible] = useState({visible:false,addtype:true}) const [ importElementVisible, setImportElementVisible ] = useState(false);
const [visible2,setVisible2] = useState({visible:false,box:{}})
const [selectBox,setSelectBox] = useState([]) useEffect(()=>{
const [checkValue,setCheckValue] = useState(false) getListBasicAttrs();
const [ assetNames, setAssetNames ] = useState([]); //eslint-disable-next-line react-hooks/exhaustive-deps
const [ importAssetVisible, setImportAssetVisible ] = useState(false); },[])
useEffect(()=>{ useEffect(()=>{
getListBasicAttrs() if(nodeId) {
//eslint-disable-next-line react-hooks/exhaustive-deps setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()});
},[])
useEffect(()=>{
if(nodeId)
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
//eslint-disable-next-line react-hooks/exhaustive-deps
},[nodeId])
useEffect(()=>{
if(nodeId&&rebuild!==0)
getTable()
//eslint-disable-next-line react-hooks/exhaustive-deps
},[rebuild])
const changeCurrent=(page,size)=>{
setPageNumber({page,size,rebuild:new Date().getTime()})
} }
//eslint-disable-next-line react-hooks/exhaustive-deps
},[nodeId])
const getListBasicAttrs=()=>{
dispatch({
type: 'assetmanage.listBasicAttrs',
payload: null,
callback: dataBox => {
// let box = {}
// for(let item of dataBox){
// box[item.key] = item.value
// }
// setAttrBox2(dataBox)
setAttrBox(dataBox)
},
error: () => {
} useEffect(()=>{
}) if(nodeId&&rebuild!==0) {
getTable();
} }
//eslint-disable-next-line react-hooks/exhaustive-deps
const getTable=()=>{ },[rebuild])
setTableLoad(true)
dispatch({ const changeCurrent=(page,size)=>{
type: 'assetmanage.listDataAssetsByPage', setPageNumber({page,size,rebuild:new Date().getTime()});
payload: {dirId:nodeId,pageNum:page,pageSize:size,keyword:keyMessage!==''?keyMessage:undefined}, }
callback: dataBox => {
const _assetNames = []; const getListBasicAttrs=()=>{
(dataBox.data||[]).forEach((table) => { dispatch({
(table.elements||[]).forEach((element) => { type: 'assetmanage.listBasicAttrs',
if (element.name === '中文名称') { payload: null,
_assetNames.push(element.value||''); callback: dataBox => {
} setAttrBox(dataBox);
}) }
}) })
}
setAssetNames(_assetNames);
setTableBox({dataList:dataBox.data,total:dataBox.total}) const getTable=()=>{
setSelectBox([]) setTableLoad(true)
setCheckValue(false) dispatch({
setTableLoad(false) type: 'assetmanage.listDataAssetsByPage',
payload: {
}, dirId: nodeId,
error: () => { pageNum: page,
setTableLoad(false) pageSize: size,
keyword: ''
},
callback: dataBox => {
const _assetNames = [];
(dataBox.data||[]).forEach((table) => {
(table.elements||[]).forEach((element) => {
if (element.name === '中文名称') {
_assetNames.push(element.value||'');
} }
})
}) })
}
setAssetNames(_assetNames);
setTableBox({dataList:dataBox.data,total:dataBox.total})
setSelectBox([])
setCheckValue(false)
setTableLoad(false)
},
error: () => {
setTableLoad(false)
}
})
}
const add =()=>{ const add =()=>{
setVisible({addtype:true,visible:true}) setVisible({addtype:true,visible:true})
} }
const handleCancle=()=>{ const handleCancle=()=>{
let box = [ ...attrBox]; let box = [ ...attrBox];
for (let element of box){ for (let element of box){
element.value = '' element.value = ''
}
setAttrBox(box);
setVisible({...visible,visible:false})
}
const edit = (data) =>{
setAttrBox(data.elements||[])
setEditBox(data)
setVisible({addtype:false,visible:true})
} }
setAttrBox(box);
setVisible({...visible,visible:false})
const del = (data) =>{ }
modal.confirm({
title: '提示', const edit = (data) =>{
content: '该资产在所有目录上唯一存在，移除后，你可以前往“资产回收站”重新挂载。', setAttrBox(data.elements||[])
onOk: () => { setEditBox(data)
dispatch({ setVisible({addtype:false,visible:true})
type: 'assetmanage.deleteDataAssets', }
payload: {params:{dirId:nodeId},data:[`${data.id}`]},
callback: dataBox => {
setPageNumber({...pageNumber,rebuild:new Date().getTime()}) const del = (data) =>{
showMessage("success","删除成功") modal.confirm({
}, title: '提示',
error: () => { content: '该资产在所有目录上唯一存在，移除后，你可以前往“资产回收站”重新挂载。',
} onOk: () => {
}) dispatch({
type: 'assetmanage.deleteDataAssets',
} payload: {params:{dirId:nodeId},data:[`${data.id}`]},
callback: dataBox => {
setPageNumber({...pageNumber,rebuild:new Date().getTime()})
showMessage("success","删除成功")
},
error: () => {
}
}) })
} }
})
const importAssets = () => { }
setImportAssetVisible(true);
} const exportAsset = () => {
window.open(`/api/dataassetmanager/dataAssetApi/export?parentPath=${node.path||''}`);
const exportAssets = () => { }
window.open(`/api/dataassetmanager/dataAssetApi/export?parentPath=${node.path||''}`);
} const more=(data)=>{
setVisible2({box:data,visible:true})
const more=(data)=>{ }
setVisible2({box:data,visible:true})
const handleCancle2=()=>{
} setVisible2({...visible2,visible:false})
}
const handleCancle2=()=>{
setVisible2({...visible2,visible:false}) const onCheck =(checked)=>{
if(checked){
} let box = []
const fetchTableList=()=>{ if(dataList&&dataList[0]!==undefined){
setKeyMessage(keyWord) for (let data of dataList){
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()}) box.push(String(data.id))
}
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) }
setSelectBox(box)
}else{
setSelectBox([])
} }
setCheckValue(checked)
}
const onChange=(checkedValue)=>{ const onChange=(checkedValue)=>{
if(checkedValue.length===dataList.length){ if(checkedValue.length===dataList.length){
setCheckValue(true) setCheckValue(true)
}else{ }else{
setCheckValue(false) setCheckValue(false)
}
setSelectBox(checkedValue)
} }
const dels=()=>{ setSelectBox(checkedValue)
if(selectBox&&selectBox[0]!==undefined){ }
modal.confirm({
title: '提示', const dels=()=>{
content: `你已选择了${selectBox.length}个资产,确定把它们都从挂载目录上移除吗?`, if(selectBox&&selectBox[0]!==undefined){
onOk: () => { modal.confirm({
dispatch({ title: '提示',
type: 'assetmanage.deleteDataAssets', content: `你已选择了${selectBox.length}个资产,确定把它们都从挂载目录上移除吗?`,
payload: {params:{dirId:nodeId},data:selectBox}, onOk: () => {
callback: dataBox => { dispatch({
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()}) type: 'assetmanage.deleteDataAssets',
showMessage("success","删除成功") payload: {params:{dirId:nodeId},data:selectBox},
}, callback: dataBox => {
error: () => { setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
} showMessage("success","删除成功")
}) },
error: () => {
} }
}) })
}else{
showMessage("warn","请选择删除项")
} }
})
}else{
showMessage("warn","请选择删除项")
} }
}
const onImportAssetCancel = (refresh = false) => {
setImportAssetVisible(false); const onImportAssetVisibleChange = (visible = false, refresh = false ) => {
refresh && getTable(); setImportAssetVisible(visible);
refresh && getTable();
}
const onImportElementVisibleChange = (visible = false) => {
setImportElementVisible(visible);
}
const onExportElementBtnClick = () => {
window.open('/api/dataassetmanager/elementApi/export');
}
return(
<Card
bordered={false}
className="asset-list"
bodyStyle={{padding:'0 10px'}}
headStyle={{padding:10}}
title={
<div style={{display:'flex',justifyContent:'space-between',height:32}}>
<div style={{fontSize:18,fontWeight:800,color:'#767676',lineHeight:'32px'}}>资产管理</div>
<Space>
{/* <Button type="primary" >回收站</Button> */}
</Space>
</div>
} }
>
return( <div
<Card style={{
bordered={false} display: 'flex',
className={"asset-list"} justifyContent: 'space-between',
bodyStyle={{padding:'0 10px'}} alignItems: 'center',
headStyle={{padding:10}} height: 52,
title={ padding: '10px 0',
<div style={{display:'flex',justifyContent:'space-between',height:32}}> borderBottom:'1px solid #f0f0f0'
<div style={{fontSize:18,fontWeight:800,color:'#767676',lineHeight:'32px'}}>资产管理</div> }} >
<Space> <Switch checkedChildren="全选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
{/* <Input.Search style={{width:180,float:'right'}} <div>
onChange={e=>{ setKeyWord(e.target.value)}} <Space>
value={keyWord} <span>资产要素:</span>
placeholder={"请输入关键字"} <Popover
enterButton placement="bottom"
onSearch={()=>{fetchTableList()}} content={<ImportElement onCancel={onImportElementVisibleChange} />}
/> */} title='资产要素导入'
{/* <Button type="primary" >回收站</Button> */} visible={importElementVisible}
onVisibleChange={onImportElementVisibleChange}
</Space> trigger="click">
<Button type="primary">导入</Button>
</div> </Popover>
} <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
> </Space>
<div style={{display:'flex',justifyContent:'space-between',height:52,padding:'10px 0',borderBottom:'1px solid #f0f0f0',lineHeight:'32px'}}> <Space className='ml-5'>
<Switch checkedChildren="全选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/> <span>资产:</span>
<Space> <Button type="primary" onClick={add}>新增</Button>
<Button type="primary" danger onClick={dels} >删除</Button>
<Button type="primary" onClick={add}>新增</Button> <Popover
<Button type="primary" danger onClick={dels} >删除</Button> placement="bottomRight"
<Button type="primary" onClick={importAssets} >导入</Button> content={<ImportAsset node={node} onCancel={onImportAssetVisibleChange} />}
<Button type="primary" onClick={exportAssets} >导出</Button> title='资产导入'
visible={importAssetVisible}
</Space> onVisibleChange={onImportAssetVisibleChange}
</div> trigger="click">
<Checkbox.Group style={{width:'100%'}} onChange={onChange} value={selectBox}> <Button type="primary">
<List 导入
loading={tableLoad} </Button>
itemLayout="vertical" </Popover>
dataSource={dataList || []} <Button type="primary" onClick={exportAsset} >导出</Button>
footer={null} </Space>
renderItem={(item, index) => ( </div>
<List.Item </div>
actions={[ <Checkbox.Group style={{width:'100%'}} onChange={onChange} value={selectBox}>
<Button type="link" key="edit" onClick={()=>edit(item)}>修改</Button>, <List
<Button type="link"key="delete" onClick={()=>del(item)}>删除</Button>, loading={tableLoad}
<Button type="link"key="detail" onClick={()=>more(item)}>详情</Button>, itemLayout="vertical"
]} dataSource={dataList || []}
> footer={null}
<Skeleton title={false} loading={tableLoad} active> renderItem={(item, index) => (
<List.Item.Meta <List.Item>
title={ <Skeleton title={false} loading={tableLoad} active>
<div> <List.Item.Meta
<Checkbox value={item.id}></Checkbox> title={
<span style={{marginLeft:8}}>{assetNames[index]||''}</span> <>
</div> <div className='d-flex mt-3 mb-1' style={{ alignItems: 'center' }}>
} <div className='textOverflow' style={{ flex: 1 }}>
description={ <Checkbox value={item.id}></Checkbox>
<Row> <span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
{item.elements&&item.elements.map(element=>{ </div>
return( <Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
<Col md={6} key={element.id||''}> <Tooltip placement='bottom' title={'修改'}>
<Text>{element.name}：</Text> <Button icon={<EditOutlined />} size='small' onClick={() => { edit(item); }} />
<Text>{element.value}</Text> </Tooltip>
</Col> <Tooltip placement='bottom' title={'详情'}>
) <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { more(item); }} />
}) </Tooltip>
} <Tooltip placement='bottom' title={'删除'}>
</Row>} <Button icon={<DeleteOutlined />} size='small' onClick={() => { del(item); }} />
/> </Tooltip>
</Skeleton> </Space>
</List.Item> </div>
)} <Divider />
/> </>
<Pagination }
size="small" description={ <AssetItem data={item} /> }
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
onShowSizeChange={changeCurrent}
current={page}
pageSize={size}
defaultCurrent={1}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</Checkbox.Group>
<AssetModal visible={visible.visible} attrBox={attrBox} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} attrBox={attrBox} nodeId={nodeId} setPageNumber={setPageNumber} pageNumber={pageNumber}/>
<AssetDetail visible={visible2.visible} boxDetail={visible2.box} handleCancle={handleCancle2}/>
<ImportAsset
visible={importAssetVisible}
onCancel={onImportAssetCancel}
node = {node}
/> />
{contextHolder} </Skeleton>
</Card> </List.Item>
) )}
/>
<Pagination
size="small"
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
onShowSizeChange={changeCurrent}
current={page}
pageSize={size}
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}/>
<AssetDetail
visible={visible2.visible}
item={visible2.box}
onCancel={handleCancle2}
/>
{contextHolder}
</Card>
)
} }
export default AssetTable; export default AssetTable;
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetTable.less
...@@ -12,4 +12,15 @@ ...@@ -12,4 +12,15 @@
height: calc(100vh - 64px - 30px - 53px - 53px - 5px) !important; height: calc(100vh - 64px - 30px - 53px - 53px - 5px) !important;
overflow: auto !important; overflow: auto !important;
} }
.yy-divider-horizontal {
margin: 0 !important;
}
.yy-list-vertical {
.yy-list-item-meta, .yy-list-item-meta-title {
margin-bottom: 0 !important;
}
}
.yy-list-item {
padding: 0 !important;
}
} }
\ No newline at end of file
src/view/Manage/AssetManage/components/ImportAsset.jsx
import React from 'react'; import React from 'react';
import { Modal, Button, Upload } from 'antd'; import { Button, Upload, Space } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons'; import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import {dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import { showMessage } from '../../../../util';
class ImportAsset extends React.Component { class ImportAsset extends React.Component {
...@@ -25,13 +26,19 @@ class ImportAsset extends React.Component { ...@@ -25,13 +26,19 @@ class ImportAsset extends React.Component {
onOk = () => { onOk = () => {
const { node, onCancel } = this.props; const { node, onCancel } = this.props;
const { fileList } = this.state; const { fileList } = this.state;
if ((fileList||[]).length === 0) {
showMessage('info', '请先选择模版上传');
return;
}
this.setState({ confirmLoading: true }, () => { this.setState({ confirmLoading: true }, () => {
dispatch({ dispatch({
type: 'assetmanage.assetImport', type: 'assetmanage.assetImport',
payload: { fileList: fileList[0], params: { parentPath: node.path||'' } }, payload: { fileList: fileList[0], params: { parentPath: node.path||'' } },
callback: () => { callback: () => {
this.setState({ confirmLoading: false }, () => { this.setState({ confirmLoading: false }, () => {
onCancel && onCancel(true); onCancel && onCancel(false, true);
}); });
}, },
error: () => { error: () => {
...@@ -43,8 +50,8 @@ class ImportAsset extends React.Component { ...@@ -43,8 +50,8 @@ class ImportAsset extends React.Component {
render() { render() {
const { visible, onCancel } = this.props; const { onCancel } = this.props;
const { fileList } = this.state; const { fileList, confirmLoading } = this.state;
const uploadProps = { const uploadProps = {
onRemove: file => { onRemove: file => {
...@@ -64,32 +71,29 @@ class ImportAsset extends React.Component { ...@@ -64,32 +71,29 @@ class ImportAsset extends React.Component {
}; };
return ( return (
<Modal <div style={{ width: 300 }}>
forceRender <div>
visible={visible} <Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
title={'导入资产'} 模版下载
width={520} </Button>
onOk={this.onOk} </div>
onCancel={() => { <div className='mt-3'>
this.reset(); <Upload {...uploadProps}>
onCancel && onCancel(); <Button icon={<UploadOutlined />}>
}} 选择文件上传
>
<>
<div>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
</Button> </Button>
</div> </Upload>
<div className='mt-3'> </div>
<Upload {...uploadProps}> <div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
<Button icon={<UploadOutlined />}> <Space style={{ marginLeft: 'auto' }}>
选择文件上传 <Button onClick={() => {
</Button> this.reset();
</Upload> onCancel && onCancel();
</div> }}>取消</Button>
</> <Button type='primary' onClick={this.onOk} loading={confirmLoading} >确定</Button>
</Modal> </Space>
</div>
</div>
) )
} }
} }
......
src/view/Manage/AssetManage/components/ImportElement.jsx 0 → 100644
import React, { useState } from 'react';
import { Button, Upload, Space } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const ImportElement = (props) => {
const { onCancel } = props;
const [ fileList, setFileList ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
const downloadTemplate = () => {
window.open("/data-govern/docs/ElementModel.xlsx");
}
const uploadProps = {
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([file]);
return false;
},
fileList: fileList||[],
accept:".xlsx",
};
const handleOk = () => {
if ((fileList||[]).length === 0) {
showMessage('info', '请先选择模版上传');
return;
}
setConfirmLoading(true);
dispatchLatest({
type: 'dataassetelement.importElement',
payload: { fileList },
callback: data => {
setConfirmLoading(false);
reset();
onCancel && onCancel();
},
error: () => {
setConfirmLoading(false);
}
})
}
const reset = () => {
setFileList([]);
}
return (
<div style={{ width: 300 }}>
<div>
<Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
模版下载
</Button>
</div>
<div className='mt-3'>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</div>
<div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
<Space style={{ marginLeft: 'auto' }}>
<Button onClick={() => {
reset();
onCancel && onCancel();
}}>取消</Button>
<Button type='primary' onClick={handleOk} loading={confirmLoading} >确定</Button>
</Space>
</div>
</div>
)
}
export default ImportElement;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment