From 31ec63f0419895876cbaba99637a884a32d33d0d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 01 九月 2021 10:31:45 +0800
Subject: [PATCH] 2021-09-01
---
src/menu/picturecontroller/index.jsx | 343 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 326 insertions(+), 17 deletions(-)
diff --git a/src/menu/picturecontroller/index.jsx b/src/menu/picturecontroller/index.jsx
index 0e6b3b3..ca809f7 100644
--- a/src/menu/picturecontroller/index.jsx
+++ b/src/menu/picturecontroller/index.jsx
@@ -1,48 +1,357 @@
import React, {Component} from 'react'
-// import { fromJS } from 'immutable'
-import { Modal, Button } from 'antd'
+import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination, notification } 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 Video = asyncComponent(() => import('./video'))
+const Image = asyncComponent(() => import('@/components/Image'))
class PasteController extends Component {
state = {
- visible: false
+ visible: false,
+ editvisible: false,
+ pictures: [],
+ imageKey: '',
+ videoKey: '',
+ videos: [],
+ card: null,
+ pageSize: 12,
+ filpictures: [],
+ filvideos: [],
+ colorlist: [],
+ piclist: [],
+ vidlist: [],
+ picIndex: 1,
+ vidIndex: 1,
+ }
+
+ trigger = () => {
+ let pictures = sessionStorage.getItem('app_pictures')
+ let videos = sessionStorage.getItem('app_videos')
+ let colorlist = sessionStorage.getItem('app_colors')
+
+ try {
+ pictures = JSON.parse(pictures)
+ videos = JSON.parse(videos)
+ colorlist = JSON.parse(colorlist)
+ } catch (e) {
+ pictures = []
+ videos = []
+ colorlist = []
+ }
+
+ let filpictures = pictures
+ let filvideos = videos
+
+ let piclist = filpictures.filter((item, index) => index < this.state.pageSize)
+ let vidlist = filvideos.filter((item, index) => index < this.state.pageSize)
+
+ this.setState({
+ visible: true,
+ filpictures,
+ filvideos,
+ pictures,
+ picIndex: 1,
+ vidIndex: 1,
+ imageKey: '',
+ videoKey: '',
+ piclist,
+ vidlist,
+ colorlist,
+ 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.resetPicture(result.data || [])
+ } else if (card.typecharone === 'video') {
+ sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
+ this.resetVideo(result.data || [])
+ } else if (card.typecharone === 'color') {
+ sessionStorage.setItem('app_colors', JSON.stringify(result.data || []))
+ this.resetColor(result.data || [])
+ }
+ this.setState({editvisible: false})
+ } else {
+ notification.warning({
+ top: 92,
+ message: result.message,
+ duration: 5
+ })
+ }
+ })
+ })
+ }
+
+ 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.resetPicture(res.data || [])
+ } else if (item.typecharone === 'video') {
+ sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
+ _this.resetVideo(res.data || [])
+ } else if (item.typecharone === 'color') {
+ sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
+ _this.resetColor(res.data || [])
+ }
+ } else {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 5
+ })
+ }
+ resolve()
+ })
+ })
+ },
+ onCancel() {}
+ })
+ }
+
+ resetPicture = (data) => {
+ const { imageKey, pageSize } = this.state
+
+ let filpictures = data.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
+ let piclist = filpictures.filter((item, index) => index < pageSize)
+
+ this.setState({picIndex: 1, filpictures, piclist, pictures: data})
+ }
+
+ resetVideo = (data) => {
+ const { videoKey, pageSize } = this.state
+
+ let filvideos = data.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
+ let vidlist = filvideos.filter((item, index) => index < pageSize)
+
+ this.setState({vidIndex: 1, filvideos, vidlist, videos: data})
+ }
+
+ resetColor = (data) => {
+ this.setState({colorlist: data})
+ }
+
+ filterPicture = () => {
+ const { imageKey, pictures, pageSize } = this.state
+
+ let filpictures = pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
+ let piclist = filpictures.filter((item, index) => index < pageSize)
+
+ this.setState({picIndex: 1, filpictures, piclist})
+ }
+
+ filterVideo = () => {
+ const { videoKey, videos, pageSize } = this.state
+
+ let filvideos = videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
+ let vidlist = filvideos.filter((item, index) => index < pageSize)
+
+ this.setState({vidIndex: 1, filvideos, vidlist})
+ }
+
+ changePicSize = (page) => {
+ const { filpictures, pageSize } = this.state
+ let piclist = filpictures.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
+
+ this.setState({picIndex: page, piclist})
+ }
+
+ changeVidSize = (page) => {
+ const { filvideos, pageSize } = this.state
+ let vidlist = filvideos.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
+
+ this.setState({vidIndex: page, vidlist})
}
render() {
- const { visible } = this.state
+ const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state
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="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
+ </Col>
+ <Col span={16}>
+ <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
+ 娣诲姞
+ </Button>
+ </Col>
+ </Row>
+ <Row gutter={16} style={{height: '340px'}}>
+ {piclist.length > 0 && piclist.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>
+ ))}
+ {!piclist.length ? <Empty description={null}/> : null}
+ </Row>
+ {filpictures.length > pageSize ? <Pagination size="small" current={picIndex} pageSize={pageSize} onChange={this.changePicSize} total={filpictures.length} /> : null}
+ </TabPane>
+ <TabPane tab="瑙嗛绠＄悊" key="video">
+ <Row style={{marginBottom: '15px'}}>
+ <Col span={8}>
+ <Search placeholder="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton />
+ </Col>
+ <Col span={16}>
+ <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
+ 娣诲姞
+ </Button>
+ </Col>
+ </Row>
+ <Row gutter={16} style={{height: '340px'}}>
+ {vidlist.length > 0 && vidlist.map(item => (
+ <Col span={4} key={item.id}>
+ <div className="image-video-box">
+ <div className="image-video-box-body">
+ <Video value={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>
+ ))}
+ {!vidlist.length ? <Empty description={null}/> : null}
+ </Row>
+ {filvideos.length > pageSize ? <Pagination size="small" current={vidIndex} pageSize={pageSize} onChange={this.changeVidSize} total={filvideos.length} /> : null}
+ </TabPane>
+ <TabPane tab="棰滆壊绠＄悊" key="color">
+ <Row style={{marginBottom: '15px'}}>
+ <Col span={24}>
+ 鍙坊鍔犲簲鐢ㄤ腑甯哥敤鐨勯鑹诧紝鍙互鏄嫳鏂囦唬鐮併�丠EX鏍煎紡銆丷GB鏍煎紡锛屾渶澶氬彲娣诲姞25绉嶃��
+ {colorlist.length < 25 ? <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'color'})}>
+ 娣诲姞
+ </Button> : null}
+ </Col>
+ </Row>
+ <Row gutter={16} style={{height: '340px'}}>
+ {colorlist.length > 0 && colorlist.map(item => (
+ <Col span={4} key={item.id}>
+ <div className="image-video-box">
+ <div className="image-video-box-body" style={{background: item.linkurl}}>
+ </div>
+ <div className="image-video-control">
+ <Icon type="copy" onClick={() => this.copySource(item)}/>
+ <Icon type="delete" onClick={() => this.deleteSource(item)}/>
+ </div>
+ </div>
+ <p className="image-video-remark">{item.remark}</p>
+ </Col>
+ ))}
+ {!colorlist.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