From 86b366cac525ad676da3cfd65f67a551b9260aeb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 28 一月 2021 18:57:03 +0800
Subject: [PATCH] 2021-01-28
---
src/menu/picturecontroller/index.jsx | 211 ++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 195 insertions(+), 16 deletions(-)
diff --git a/src/menu/picturecontroller/index.jsx b/src/menu/picturecontroller/index.jsx
index 0e6b3b3..4582492 100644
--- a/src/menu/picturecontroller/index.jsx
+++ b/src/menu/picturecontroller/index.jsx
@@ -1,48 +1,227 @@
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>
)
--
Gitblit v1.8.0