|
|
@ -1,8 +1,9 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin } from '@douyinfe/semi-ui'; |
|
|
|
import { Button, Col, Row, Input, Tree, Table, Space, Tooltip, Spin, Popconfirm } from '@douyinfe/semi-ui'; |
|
|
|
import { IconSearch, IconEditStroked, IconMinusCircleStroked, IconPlusCircleStroked } from '@douyinfe/semi-icons'; |
|
|
|
import { getResourceClassify, getResourceFileList } from '../actions/resourceRepository'; |
|
|
|
import { getResourceClassify, getResourceFileList, postResourceClassify, putResourceClassify, delResourceClassify } from '../actions/resourceRepository'; |
|
|
|
import FolderModal from '../components/resourceRepository/folder-model'; |
|
|
|
import '../style.less'; |
|
|
|
|
|
|
|
const ResourceRepository = (props) => { |
|
|
@ -10,27 +11,12 @@ const ResourceRepository = (props) => { |
|
|
|
const [treeData, setTreeData] = useState([]); |
|
|
|
const [currentSelect, setCurrentSelect] = useState(); |
|
|
|
const [defaultExpandedKey, setDefaultExpandedKey] = useState(); |
|
|
|
const [modelVisiable, setModelVisiable] = useState(false); |
|
|
|
const [modalData, setModalData] = useState(); |
|
|
|
const ref = useRef(); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(getResourceClassify()).then(res => { |
|
|
|
const { success, payload } = res; |
|
|
|
if (success) { |
|
|
|
let defaultKey = ""; |
|
|
|
if (payload.data.length) { |
|
|
|
if (payload.data[0].children && payload.data[0].children.length) { |
|
|
|
defaultKey = payload.data[0].children[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key, payload.data[0].children[0].key]); |
|
|
|
} else { |
|
|
|
defaultKey = payload.data[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key]); |
|
|
|
} |
|
|
|
} |
|
|
|
setCurrentSelect([defaultKey]); |
|
|
|
setTreeData(payload.data); |
|
|
|
getFile(defaultKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
getClassify(); |
|
|
|
}, []) |
|
|
|
|
|
|
|
const style = { |
|
|
@ -60,21 +46,73 @@ const ResourceRepository = (props) => { |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
const renderLabel = (label, data) => (<div> |
|
|
|
<Tooltip content={label}><span >{label.length > 8 ? label.substring(0, 8) + '...' : label}</span></Tooltip> |
|
|
|
{true == data.operation ? |
|
|
|
<span className='tree-icon'> |
|
|
|
<IconEditStroked size='default' onClick={() => alert("bianji")} /> |
|
|
|
<IconMinusCircleStroked size='default' onClick={() => alert("sahnchu")} /> |
|
|
|
{data.children ? <IconPlusCircleStroked size='default' onClick={() => alert("+")} /> : ''} |
|
|
|
</span> |
|
|
|
: ''} |
|
|
|
</div> |
|
|
|
); |
|
|
|
const renderLabel = (label, data) => { |
|
|
|
const child = data.children ? true : false; |
|
|
|
const key = data.key.split('/'); |
|
|
|
return (<div> |
|
|
|
<Tooltip content={label}><span >{label.length > 8 ? label.substring(0, 8) + '...' : label}</span></Tooltip> |
|
|
|
{true == data.operation ? |
|
|
|
<span className='tree-icon'> |
|
|
|
<IconEditStroked size='default' onClick={() => handleFolderClick(child ? '编辑' : '编辑子', !child, key[1], key[2] || undefined)} /> |
|
|
|
<Popconfirm |
|
|
|
title="确定是否要删除?" |
|
|
|
content="该文件夹下的所有子文件/附件将永久删除,请慎重!" |
|
|
|
onConfirm={() => handleDel(data.key)} |
|
|
|
// onCancel={onCancel} |
|
|
|
> |
|
|
|
<IconMinusCircleStroked size='default' /> |
|
|
|
</Popconfirm> |
|
|
|
|
|
|
|
{child ? |
|
|
|
<IconPlusCircleStroked |
|
|
|
size='default' |
|
|
|
onClick={() => handleFolderClick('新建子', true, label, undefined)} |
|
|
|
/> : ''} |
|
|
|
</span> |
|
|
|
: ''} |
|
|
|
</div>) |
|
|
|
}; |
|
|
|
const handleFolderClick = (title, childFolder, departmentName, trainDate) => { |
|
|
|
setModelVisiable(true); |
|
|
|
setModalData({ title, childFolder, departmentName, trainDate }); |
|
|
|
} |
|
|
|
const handleSelect = (e) => { |
|
|
|
setCurrentSelect(e); |
|
|
|
getFile(e); |
|
|
|
} |
|
|
|
const handleDataToSave = (add, body) => { |
|
|
|
if (add) { |
|
|
|
dispatch(postResourceClassify(body)).then(res => { |
|
|
|
if (res.success) { |
|
|
|
getClassify(); |
|
|
|
setModelVisiable(false); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
dispatch(putResourceClassify(body)).then(res => { |
|
|
|
if (res.success) { |
|
|
|
getClassify(); |
|
|
|
setModelVisiable(false); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleDel = (key) => { |
|
|
|
const arr = key.split('/'); |
|
|
|
const query = { |
|
|
|
departmentName: arr[1] |
|
|
|
} |
|
|
|
if (arr.length == 3) { |
|
|
|
query.trainDate = arr[2]; |
|
|
|
} |
|
|
|
dispatch(delResourceClassify(query)).then(res => { |
|
|
|
if (res.success) { |
|
|
|
getClassify(); |
|
|
|
setModelVisiable(false); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
const getFile = (e) => { |
|
|
|
const arr = e.split("/"); |
|
|
|
const query = { type: arr[0] }; |
|
|
@ -82,6 +120,26 @@ const ResourceRepository = (props) => { |
|
|
|
if (arr[2]) { query.trainDate = arr[2]; } |
|
|
|
dispatch(getResourceFileList(query)); |
|
|
|
} |
|
|
|
const getClassify = () => { |
|
|
|
dispatch(getResourceClassify()).then(res => { |
|
|
|
const { success, payload } = res; |
|
|
|
if (success) { |
|
|
|
let defaultKey = ""; |
|
|
|
if (payload.data.length) { |
|
|
|
if (payload.data[0].children && payload.data[0].children.length) { |
|
|
|
defaultKey = payload.data[0].children[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key, payload.data[0].children[0].key]); |
|
|
|
} else { |
|
|
|
defaultKey = payload.data[0].key; |
|
|
|
setDefaultExpandedKey([payload.data[0].key]); |
|
|
|
} |
|
|
|
} |
|
|
|
setCurrentSelect([defaultKey]); |
|
|
|
setTreeData(payload.data); |
|
|
|
getFile(defaultKey); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
@ -105,7 +163,7 @@ const ResourceRepository = (props) => { |
|
|
|
<Row className='resourceRepository'> |
|
|
|
{/* 左侧 */} |
|
|
|
<Col className='left' span={6}> |
|
|
|
<Button theme='solid' type='primary' >新建文件夹</Button> |
|
|
|
<Button theme='solid' type='primary' onClick={() => handleFolderClick("新建", false)}>新建文件夹</Button> |
|
|
|
<br /> |
|
|
|
<Input suffix={<IconSearch />} showClear onChange={v => ref.current.search(v)} placeholder="请输入"></Input> |
|
|
|
<Tree |
|
|
@ -129,7 +187,7 @@ const ResourceRepository = (props) => { |
|
|
|
<Row type="flex" justify="space-around" align="middle"> |
|
|
|
<Col span={18}> |
|
|
|
<Space> |
|
|
|
<Button theme='solid' type='primary' >上传文件</Button> |
|
|
|
{currentSelect && currentSelect.includes("部门培训资料") ? null : <Button theme='solid' type='primary' >上传文件</Button>} |
|
|
|
<span className="path-lable"><strong>当前文件夹:{currentSelect}</strong></span> |
|
|
|
</Space> |
|
|
|
</Col> |
|
|
@ -145,6 +203,14 @@ const ResourceRepository = (props) => { |
|
|
|
</Row> |
|
|
|
</Spin> |
|
|
|
</div> |
|
|
|
{modelVisiable ? |
|
|
|
<FolderModal |
|
|
|
oldData={resourceClassify && resourceClassify.find(r => '公司培训资料' == r.label)} |
|
|
|
modalData={modalData} |
|
|
|
onOk={handleDataToSave} |
|
|
|
onCancel={() => { setModelVisiable(false) }} |
|
|
|
/> : null |
|
|
|
} |
|
|
|
</div> |
|
|
|
</> |
|
|
|
) |
|
|
|