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_'] {
word-break: break-all;
}
.yy-popover-content {
pointer-events: auto !important;
}
src/view/Manage/AssetManage/components/AssetDetail.jsx
import React from "react"
import {Modal,Descriptions} from "antd"
import React, { useEffect, useState } from "react"
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)=>{
const {handleCancle,visible,boxDetail} = props
return(
<Modal
title={`资产Id:${boxDetail.id}`}
visible={visible}
width={800}
onCancel={()=>{handleCancle()}}
// 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>
if (item) {
const index = (item.elements||[]).findIndex(element => element.name==='中文名称');
if (index !== -1) {
setAssetName(item.elements[index].value||'');
}
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ item ])
</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;
\ 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 {Card,Checkbox,Button,List,Skeleton,Row,Col,Typography,Pagination ,Space,Modal,Switch} from "antd"
import "./AssetTable.less"
import {dispatch } from '../../../../model';
import React,{ useState, useEffect } from "react";
import { Card, Checkbox, Button, List, Skeleton, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover } from "antd";
import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import { dispatch } from '../../../../model';
import AssetModal from "./AssetModal"
import AssetDetail from "./AssetDetail"
import ImportAsset from './ImportAsset';
import AssetItem from './AssetItem';
import ImportElement from './ImportElement';
import { showMessage } from '../../../../util';
const { Text } = Typography;
import "./AssetTable.less";
const AssetTable = (props) =>{
const {nodeId, node} = props
const [tableLoad,setTableLoad] = useState(false)
const [attrBox,setAttrBox] = useState([])
const [attrBox2,setAttrBox2] = useState({})
const [editBox,setEditBox] = useState({})
const [keyWord,setKeyWord] = useState('')
const [keyMessage,setKeyMessage] = 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 [ assetNames, setAssetNames ] = useState([]);
const [ importAssetVisible, setImportAssetVisible ] = useState(false);
useEffect(()=>{
getListBasicAttrs()
//eslint-disable-next-line react-hooks/exhaustive-deps
},[])
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()})
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 [ assetNames, setAssetNames ] = useState([]);
const [ importAssetVisible, setImportAssetVisible ] = useState(false);
const [ importElementVisible, setImportElementVisible ] = useState(false);
useEffect(()=>{
getListBasicAttrs();
//eslint-disable-next-line react-hooks/exhaustive-deps
},[])
useEffect(()=>{
if(nodeId) {
setPageNumber({...pageNumber,page:1,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();
}
const getTable=()=>{
setTableLoad(true)
dispatch({
type: 'assetmanage.listDataAssetsByPage',
payload: {dirId:nodeId,pageNum:page,pageSize:size,keyword:keyMessage!==''?keyMessage:undefined},
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)
//eslint-disable-next-line react-hooks/exhaustive-deps
},[rebuild])
const changeCurrent=(page,size)=>{
setPageNumber({page,size,rebuild:new Date().getTime()});
}
const getListBasicAttrs=()=>{
dispatch({
type: 'assetmanage.listBasicAttrs',
payload: null,
callback: dataBox => {
setAttrBox(dataBox);
}
})
}
const getTable=()=>{
setTableLoad(true)
dispatch({
type: 'assetmanage.listDataAssetsByPage',
payload: {
dirId: nodeId,
pageNum: page,
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 =()=>{
setVisible({addtype:true,visible:true})
}
const handleCancle=()=>{
let box = [ ...attrBox];
for (let element of box){
element.value = ''
}
setAttrBox(box);
setVisible({...visible,visible:false})
}
const edit = (data) =>{
setAttrBox(data.elements||[])
setEditBox(data)
setVisible({addtype:false,visible:true})
const handleCancle=()=>{
let box = [ ...attrBox];
for (let element of box){
element.value = ''
}
const del = (data) =>{
modal.confirm({
title: '提示',
content: '该资产在所有目录上唯一存在，移除后，你可以前往“资产回收站”重新挂载。',
onOk: () => {
dispatch({
type: 'assetmanage.deleteDataAssets',
payload: {params:{dirId:nodeId},data:[`${data.id}`]},
callback: dataBox => {
setPageNumber({...pageNumber,rebuild:new Date().getTime()})
showMessage("success","删除成功")
},
error: () => {
}
})
}
setAttrBox(box);
setVisible({...visible,visible:false})
}
const edit = (data) =>{
setAttrBox(data.elements||[])
setEditBox(data)
setVisible({addtype:false,visible:true})
}
const del = (data) =>{
modal.confirm({
title: '提示',
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 exportAssets = () => {
window.open(`/api/dataassetmanager/dataAssetApi/export?parentPath=${node.path||''}`);
}
const more=(data)=>{
setVisible2({box:data,visible:true})
}
const handleCancle2=()=>{
setVisible2({...visible2,visible:false})
}
const fetchTableList=()=>{
setKeyMessage(keyWord)
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
}
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([])
}
})
}
const exportAsset = () => {
window.open(`/api/dataassetmanager/dataAssetApi/export?parentPath=${node.path||''}`);
}
const more=(data)=>{
setVisible2({box:data,visible:true})
}
const handleCancle2=()=>{
setVisible2({...visible2,visible:false})
}
const onCheck =(checked)=>{
if(checked){
let box = []
if(dataList&&dataList[0]!==undefined){
for (let data of dataList){
box.push(String(data.id))
}
setCheckValue(checked)
}
setSelectBox(box)
}else{
setSelectBox([])
}
setCheckValue(checked)
}
const onChange=(checkedValue)=>{
if(checkedValue.length===dataList.length){
setCheckValue(true)
}else{
setCheckValue(false)
}
setSelectBox(checkedValue)
const onChange=(checkedValue)=>{
if(checkedValue.length===dataList.length){
setCheckValue(true)
}else{
setCheckValue(false)
}
const dels=()=>{
if(selectBox&&selectBox[0]!==undefined){
modal.confirm({
title: '提示',
content: `你已选择了${selectBox.length}个资产,确定把它们都从挂载目录上移除吗?`,
onOk: () => {
dispatch({
type: 'assetmanage.deleteDataAssets',
payload: {params:{dirId:nodeId},data:selectBox},
callback: dataBox => {
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
showMessage("success","删除成功")
},
error: () => {
}
})
}
})
}else{
showMessage("warn","请选择删除项")
setSelectBox(checkedValue)
}
const dels=()=>{
if(selectBox&&selectBox[0]!==undefined){
modal.confirm({
title: '提示',
content: `你已选择了${selectBox.length}个资产,确定把它们都从挂载目录上移除吗?`,
onOk: () => {
dispatch({
type: 'assetmanage.deleteDataAssets',
payload: {params:{dirId:nodeId},data:selectBox},
callback: dataBox => {
setPageNumber({...pageNumber,page:1,rebuild:new Date().getTime()})
showMessage("success","删除成功")
},
error: () => {
}
})
}
})
}else{
showMessage("warn","请选择删除项")
}
const onImportAssetCancel = (refresh = false) => {
setImportAssetVisible(false);
refresh && getTable();
}
const onImportAssetVisibleChange = (visible = false, refresh = false ) => {
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(
<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>
{/* <Input.Search style={{width:180,float:'right'}}
onChange={e=>{ setKeyWord(e.target.value)}}
value={keyWord}
placeholder={"请输入关键字"}
enterButton
onSearch={()=>{fetchTableList()}}
/> */}
{/* <Button type="primary" >回收站</Button> */}
</Space>
</div>
}
>
<div style={{display:'flex',justifyContent:'space-between',height:52,padding:'10px 0',borderBottom:'1px solid #f0f0f0',lineHeight:'32px'}}>
<Switch checkedChildren="全选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
<Space>
<Button type="primary" onClick={add}>新增</Button>
<Button type="primary" danger onClick={dels} >删除</Button>
<Button type="primary" onClick={importAssets} >导入</Button>
<Button type="primary" onClick={exportAssets} >导出</Button>
</Space>
</div>
<Checkbox.Group style={{width:'100%'}} onChange={onChange} value={selectBox}>
<List
loading={tableLoad}
itemLayout="vertical"
dataSource={dataList || []}
footer={null}
renderItem={(item, index) => (
<List.Item
actions={[
<Button type="link" key="edit" onClick={()=>edit(item)}>修改</Button>,
<Button type="link"key="delete" onClick={()=>del(item)}>删除</Button>,
<Button type="link"key="detail" onClick={()=>more(item)}>详情</Button>,
]}
>
<Skeleton title={false} loading={tableLoad} active>
<List.Item.Meta
title={
<div>
<Checkbox value={item.id}></Checkbox>
<span style={{marginLeft:8}}>{assetNames[index]||''}</span>
</div>
}
description={
<Row>
{item.elements&&item.elements.map(element=>{
return(
<Col md={6} key={element.id||''}>
<Text>{element.name}：</Text>
<Text>{element.value}</Text>
</Col>
)
})
}
</Row>}
/>
</Skeleton>
</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} attrBox={attrBox} nodeId={nodeId} setPageNumber={setPageNumber} pageNumber={pageNumber}/>
<AssetDetail visible={visible2.visible} boxDetail={visible2.box} handleCancle={handleCancle2}/>
<ImportAsset
visible={importAssetVisible}
onCancel={onImportAssetCancel}
node = {node}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: 52,
padding: '10px 0',
borderBottom:'1px solid #f0f0f0'
}} >
<Switch checkedChildren="全选" unCheckedChildren="全选" checked={checkValue} onChange={onCheck} defaultChecked={false} style={{marginTop:4}}/>
<div>
<Space>
<span>资产要素:</span>
<Popover
placement="bottom"
content={<ImportElement onCancel={onImportElementVisibleChange} />}
title='资产要素导入'
visible={importElementVisible}
onVisibleChange={onImportElementVisibleChange}
trigger="click">
<Button type="primary">导入</Button>
</Popover>
<Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
</Space>
<Space className='ml-5'>
<span>资产:</span>
<Button type="primary" onClick={add}>新增</Button>
<Button type="primary" danger onClick={dels} >删除</Button>
<Popover
placement="bottomRight"
content={<ImportAsset node={node} onCancel={onImportAssetVisibleChange} />}
title='资产导入'
visible={importAssetVisible}
onVisibleChange={onImportAssetVisibleChange}
trigger="click">
<Button type="primary">
导入
</Button>
</Popover>
<Button type="primary" onClick={exportAsset} >导出</Button>
</Space>
</div>
</div>
<Checkbox.Group style={{width:'100%'}} onChange={onChange} value={selectBox}>
<List
loading={tableLoad}
itemLayout="vertical"
dataSource={dataList || []}
footer={null}
renderItem={(item, index) => (
<List.Item>
<Skeleton title={false} loading={tableLoad} active>
<List.Item.Meta
title={
<>
<div className='d-flex mt-3 mb-1' style={{ alignItems: 'center' }}>
<div className='textOverflow' style={{ flex: 1 }}>
<Checkbox value={item.id}></Checkbox>
<span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
</div>
<Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
<Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' onClick={() => { edit(item); }} />
</Tooltip>
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' onClick={() => { more(item); }} />
</Tooltip>
<Tooltip placement='bottom' title={'删除'}>
<Button icon={<DeleteOutlined />} size='small' onClick={() => { del(item); }} />
</Tooltip>
</Space>
</div>
<Divider />
</>
}
description={ <AssetItem data={item} /> }
/>
{contextHolder}
</Card>
)
</Skeleton>
</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;
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetTable.less
......@@ -12,4 +12,15 @@
height: calc(100vh - 64px - 30px - 53px - 53px - 5px) !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 { Modal, Button, Upload } from 'antd';
import { Button, Upload, Space } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import {dispatch } from '../../../../model';
import { dispatch } from '../../../../model';
import { showMessage } from '../../../../util';
class ImportAsset extends React.Component {
......@@ -25,13 +26,19 @@ class ImportAsset extends React.Component {
onOk = () => {
const { node, onCancel } = this.props;
const { fileList } = this.state;
if ((fileList||[]).length === 0) {
showMessage('info', '请先选择模版上传');
return;
}
this.setState({ confirmLoading: true }, () => {
dispatch({
type: 'assetmanage.assetImport',
payload: { fileList: fileList[0], params: { parentPath: node.path||'' } },
callback: () => {
this.setState({ confirmLoading: false }, () => {
onCancel && onCancel(true);
onCancel && onCancel(false, true);
});
},
error: () => {
......@@ -43,8 +50,8 @@ class ImportAsset extends React.Component {
render() {
const { visible, onCancel } = this.props;
const { fileList } = this.state;
const { onCancel } = this.props;
const { fileList, confirmLoading } = this.state;
const uploadProps = {
onRemove: file => {
......@@ -64,32 +71,29 @@ class ImportAsset extends React.Component {
};
return (
<Modal
forceRender
visible={visible}
title={'导入资产'}
width={520}
onOk={this.onOk}
onCancel={() => {
this.reset();
onCancel && onCancel();
}}
>
<>
<div>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
<div style={{ width: 300 }}>
<div>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
</Button>
</div>
<div className='mt-3'>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</div>
<div className='mt-3'>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</div>
</>
</Modal>
</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={() => {
this.reset();
onCancel && onCancel();
}}>取消</Button>
<Button type='primary' onClick={this.onOk} loading={confirmLoading} >确定</Button>
</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