import React, {Component} from 'react'
|
// import { fromJS } from 'immutable'
|
import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { Search } = Input
|
const { confirm } = Modal
|
const { TabPane } = Tabs
|
const EditForm = asyncComponent(() => import('./editform'))
|
const Image = asyncComponent(() => import('@/components/Image'))
|
|
class PasteController extends Component {
|
state = {
|
visible: false,
|
editvisible: false,
|
pictures: [],
|
imageKey: '',
|
videoKey: '',
|
videos: [],
|
card: null
|
}
|
|
trigger = () => {
|
let pictures = sessionStorage.getItem('app_pictures')
|
let videos = sessionStorage.getItem('app_videos')
|
try {
|
pictures = JSON.parse(pictures)
|
videos = JSON.parse(videos)
|
} catch {
|
pictures = []
|
videos = []
|
}
|
|
this.setState({visible: true, pictures, videos})
|
}
|
|
handleSource = (item) => {
|
this.setState({
|
editvisible: true,
|
card: item || null
|
})
|
}
|
|
save = () => {
|
const { card } = this.state
|
this.editFormRef.handleConfirm().then(res => {
|
res = {...card, ...res}
|
|
if (!res.id) {
|
res.id = Utils.getuuid()
|
}
|
|
Api.getSystemConfig({
|
func: 's_url_db_adduptdel',
|
id: res.id,
|
PageIndex: 0, // 0 代表全部
|
PageSize: 0, // 0 代表全部
|
remark: res.remark || '',
|
linkurl: res.linkurl,
|
typecharone: card.typecharone,
|
type: card.id ? 'upt' : 'add'
|
}).then(result => {
|
if (result.status) {
|
if (card.typecharone === 'image') {
|
sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
|
this.setState({pictures: result.data || [], editvisible: false})
|
} else {
|
sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
|
this.setState({videos: result.data || [], editvisible: false})
|
}
|
}
|
})
|
})
|
}
|
|
copySource = (item) => {
|
if (item.linkurl) {
|
let oInput = document.createElement('input')
|
oInput.value = item.linkurl
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
document.body.removeChild(oInput)
|
|
message.success('复制成功。')
|
}
|
}
|
|
deleteSource = (item) => {
|
const _this = this
|
|
confirm({
|
title: '确定删除吗？',
|
content: '',
|
onOk() {
|
return new Promise((resolve) => {
|
Api.getSystemConfig({
|
func: 's_url_db_adduptdel',
|
id: item.id,
|
PageIndex: 0, // 0 代表全部
|
PageSize: 0, // 0 代表全部
|
remark: '',
|
linkurl: '',
|
typecharone: item.typecharone,
|
type: 'del'
|
}).then(res => {
|
if (res.status) {
|
if (item.typecharone === 'image') {
|
sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
|
_this.setState({pictures: res.data || []})
|
} else {
|
sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
|
_this.setState({videos: res.data || []})
|
}
|
}
|
resolve()
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
render() {
|
const { visible, editvisible, card, imageKey, videoKey } = this.state
|
|
const pictures = this.state.pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
|
const videos = this.state.videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
<Button className="mk-border-purple" icon="picture" onClick={this.trigger}>资源管理</Button>
|
<Modal
|
title="粘贴"
|
wrapClassName="picture-control-model"
|
visible={visible}
|
width={1200}
|
maskClosable={false}
|
onCancel={() => {this.setState({visible: false})}}
|
footer={[
|
<Button key="colse" onClick={() => {this.setState({visible: false})}}>
|
关闭
|
</Button>
|
]}
|
destroyOnClose
|
>
|
<Tabs>
|
<TabPane tab="图片管理" key="picture">
|
<Row style={{marginBottom: '15px'}}>
|
<Col span={8}>
|
<Search placeholder="" onSearch={value => this.setState({imageKey: value})} enterButton />
|
</Col>
|
<Col span={16}>
|
<Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
|
添加
|
</Button>
|
</Col>
|
</Row>
|
<Row gutter={16}>
|
{pictures.length && pictures.map(item => (
|
<Col span={4} key={item.id}>
|
<div className="image-video-box">
|
<div className="image-video-box-body">
|
<Image url={item.linkurl} />
|
</div>
|
<div className="image-video-control">
|
<Icon type="copy" onClick={() => this.copySource(item)}/>
|
<Icon type="edit" onClick={() => this.handleSource(item)}/>
|
<Icon type="delete" onClick={() => this.deleteSource(item)}/>
|
</div>
|
</div>
|
<p className="image-video-remark">{item.remark}</p>
|
</Col>
|
))}
|
{!pictures.length ? <Empty description={null}/> : null}
|
</Row>
|
</TabPane>
|
<TabPane tab="视频管理" key="video">
|
<Row style={{marginBottom: '15px'}}>
|
<Col span={8}>
|
<Search placeholder="" onSearch={value => this.setState({videoKey: value})} enterButton />
|
</Col>
|
<Col span={16}>
|
<Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
|
添加
|
</Button>
|
</Col>
|
</Row>
|
<Row gutter={16}>
|
{videos.length && videos.map(item => (
|
<Col span={4} key={item.id}>
|
<div className="image-video-box">
|
<div className="image-video-box-body">
|
<Image url={item.linkurl} />
|
</div>
|
<div className="image-video-control">
|
<Icon type="copy" onClick={() => this.copySource(item)}/>
|
<Icon type="edit" onClick={() => this.handleSource(item)}/>
|
<Icon type="delete" onClick={() => this.deleteSource(item)}/>
|
</div>
|
</div>
|
<p className="image-video-remark">{item.remark}</p>
|
</Col>
|
))}
|
{!videos.length ? <Empty description={null}/> : null}
|
</Row>
|
</TabPane>
|
</Tabs>
|
</Modal>
|
<Modal
|
title={card ? '编辑' : '新建'}
|
wrapClassName="picture-edit-model"
|
visible={editvisible}
|
width={600}
|
maskClosable={false}
|
onOk={this.save}
|
onCancel={() => {this.setState({editvisible: false})}}
|
destroyOnClose
|
>
|
<EditForm card={card} wrappedComponentRef={(inst) => this.editFormRef = inst} inputSubmit={this.save}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default PasteController
|
