| | |
| | | import React, {Component} from 'react' |
| | | // import { fromJS } from 'immutable' |
| | | import { Modal, Button } from 'antd' |
| | | import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty } from 'antd' |
| | | |
| | | // import Utils from '@/utils/utils.js' |
| | | // import asyncComponent from '@/utils/asyncComponent' |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | // const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform')) |
| | | 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 |
| | | 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}) |
| | | } |
| | | |
| | | addSource = () => { |
| | | 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 } = this.state |
| | | 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.setState({visible: true})}}>资源管理</Button> |
| | | <Button className="mk-border-purple" icon="picture" onClick={this.trigger}>资源管理</Button> |
| | | <Modal |
| | | title="粘贴" |
| | | wrapClassName="picture-control-model" |
| | | visible={visible} |
| | | width={600} |
| | | width={1200} |
| | | maskClosable={false} |
| | | onOk={this.pasteSubmit} |
| | | onCancel={() => {this.setState({visible: false})}} |
| | | footer={[ |
| | | <Button key="back" type="link" icon="plus" onClick={this.addSource}> |
| | | 添加 |
| | | </Button>, |
| | | <Button key="colse" onClick={() => {this.setState({visible: false})}}> |
| | | 关闭 |
| | | </Button> |
| | | ]} |
| | | destroyOnClose |
| | | > |
| | | <div> |
| | | |
| | | </div> |
| | | <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> |
| | | ) |