From d62c168d0656fac4242581609c3c5c0d88cf6a48 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 29 一月 2021 18:03:47 +0800
Subject: [PATCH] 2021-01-29
---
src/menu/picturecontroller/index.jsx | 119 +++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 98 insertions(+), 21 deletions(-)
diff --git a/src/menu/picturecontroller/index.jsx b/src/menu/picturecontroller/index.jsx
index 4582492..12cabfa 100644
--- a/src/menu/picturecontroller/index.jsx
+++ b/src/menu/picturecontroller/index.jsx
@@ -1,6 +1,5 @@
import React, {Component} from 'react'
-// import { fromJS } from 'immutable'
-import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty } from 'antd'
+import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination } from 'antd'
import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -10,7 +9,9 @@
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 {
@@ -21,12 +22,20 @@
imageKey: '',
videoKey: '',
videos: [],
- card: null
+ card: null,
+ pageSize: 12,
+ filpictures: [],
+ filvideos: [],
+ piclist: [],
+ vidlist: [],
+ picIndex: 1,
+ vidIndex: 1,
}
trigger = () => {
let pictures = sessionStorage.getItem('app_pictures')
let videos = sessionStorage.getItem('app_videos')
+
try {
pictures = JSON.parse(pictures)
videos = JSON.parse(videos)
@@ -35,7 +44,25 @@
videos = []
}
- this.setState({visible: true, pictures, videos})
+ 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,
+ videos
+ })
}
handleSource = (item) => {
@@ -67,11 +94,12 @@
if (result.status) {
if (card.typecharone === 'image') {
sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
- this.setState({pictures: result.data || [], editvisible: false})
+ this.resetPicture(result.data || [])
} else {
sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
- this.setState({videos: result.data || [], editvisible: false})
+ this.resetVideo(result.data || [])
}
+ this.setState({editvisible: false})
}
})
})
@@ -111,10 +139,10 @@
if (res.status) {
if (item.typecharone === 'image') {
sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
- _this.setState({pictures: res.data || []})
+ _this.resetPicture(res.data || [])
} else {
sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
- _this.setState({videos: res.data || []})
+ _this.resetVideo(res.data || [])
}
}
resolve()
@@ -124,12 +152,59 @@
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})
+ }
+
+ 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, 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)
+ const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex } = this.state
return (
<div style={{display: 'inline-block'}}>
@@ -152,7 +227,7 @@
<TabPane tab="鍥剧墖绠＄悊" key="picture">
<Row style={{marginBottom: '15px'}}>
<Col span={8}>
- <Search placeholder="" onSearch={value => this.setState({imageKey: value})} enterButton />
+ <Search placeholder="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
</Col>
<Col span={16}>
<Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
@@ -160,8 +235,8 @@
</Button>
</Col>
</Row>
- <Row gutter={16}>
- {pictures.length && pictures.map(item => (
+ <Row gutter={16} style={{height: '340px'}}>
+ {piclist.length && piclist.map(item => (
<Col span={4} key={item.id}>
<div className="image-video-box">
<div className="image-video-box-body">
@@ -176,13 +251,14 @@
<p className="image-video-remark">{item.remark}</p>
</Col>
))}
- {!pictures.length ? <Empty description={null}/> : null}
+ {!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="" onSearch={value => this.setState({videoKey: value})} enterButton />
+ <Search placeholder="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton />
</Col>
<Col span={16}>
<Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
@@ -190,12 +266,12 @@
</Button>
</Col>
</Row>
- <Row gutter={16}>
- {videos.length && videos.map(item => (
+ <Row gutter={16} style={{height: '340px'}}>
+ {vidlist.length && vidlist.map(item => (
<Col span={4} key={item.id}>
<div className="image-video-box">
<div className="image-video-box-body">
- <Image url={item.linkurl} />
+ <Video value={item.linkurl} />
</div>
<div className="image-video-control">
<Icon type="copy" onClick={() => this.copySource(item)}/>
@@ -206,8 +282,9 @@
<p className="image-video-remark">{item.remark}</p>
</Col>
))}
- {!videos.length ? <Empty description={null}/> : null}
+ {!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>
</Tabs>
</Modal>
--
Gitblit v1.8.0