import React, {Component} from 'react'
|
import { Modal, Button, Row, Col, Input, message, Tabs, Empty, Pagination, notification, Typography } from 'antd'
|
import { PlusOutlined, CopyOutlined, EditOutlined, DeleteOutlined, PictureOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import { minkeIconSystem } from '@/utils/option.js'
|
import MkIcon from '@/components/mk-icon'
|
import './index.scss'
|
|
const { Search } = Input
|
const { confirm } = Modal
|
const { TabPane } = Tabs
|
const { Paragraph } = Typography
|
|
const EditForm = asyncComponent(() => import('./editform'))
|
const Video = asyncComponent(() => import('./video'))
|
|
class SourceController extends Component {
|
state = {
|
visible: false,
|
editvisible: false,
|
pictures: [],
|
imageKey: '',
|
videoKey: '',
|
videos: [],
|
card: null,
|
pageSize: 12,
|
filpictures: [],
|
filvideos: [],
|
colorlist: [],
|
piclist: [],
|
vidlist: [],
|
iconlist: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint],
|
picIndex: 1,
|
vidIndex: 1,
|
}
|
|
trigger = () => {
|
let deffers = []
|
|
deffers.push(this.getSource('image', 'app_pictures', 0))
|
deffers.push(this.getSource('video', 'app_videos', 50))
|
deffers.push(this.getSource('color', 'app_colors', 100))
|
|
Promise.all(deffers).then(result => {
|
this.open(...result)
|
})
|
}
|
|
getSource = (type, sessionName, delay) => {
|
return new Promise(resolve => {
|
if (window.GLOB[sessionName]) {
|
resolve(window.GLOB[sessionName])
|
} else {
|
let param = {
|
func: 's_url_db_adduptdel',
|
PageIndex: 0, // 0 代表全部
|
PageSize: 0, // 0 代表全部
|
type: 'search',
|
typecharone: type
|
}
|
setTimeout(() => {
|
Api.getCloudConfig(param).then(res => {
|
let data = res.data || []
|
window.GLOB[sessionName] = data
|
|
resolve(data)
|
})
|
}, delay)
|
}
|
})
|
}
|
|
open = (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
|
})
|
}
|
|
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.getCloudConfig({
|
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') {
|
window.GLOB.app_pictures = result.data || []
|
this.resetPicture(result.data || [])
|
} else if (card.typecharone === 'video') {
|
window.GLOB.app_videos = result.data || []
|
this.resetVideo(result.data || [])
|
} else if (card.typecharone === 'color') {
|
window.GLOB.app_colors = result.data || []
|
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 that = this
|
|
confirm({
|
title: '确定删除吗？',
|
content: '',
|
onOk() {
|
return new Promise((resolve) => {
|
Api.getCloudConfig({
|
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') {
|
window.GLOB.app_pictures = res.data || []
|
that.resetPicture(res.data || [])
|
} else if (item.typecharone === 'video') {
|
window.GLOB.app_videos = res.data || []
|
that.resetVideo(res.data || [])
|
} else if (item.typecharone === 'color') {
|
window.GLOB.app_colors = res.data || []
|
sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
|
that.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, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist, iconlist } = this.state
|
|
return (
|
<>
|
<Button className="mk-border-purple" onClick={this.trigger}><PictureOutlined /> 资源管理</Button>
|
<Modal
|
wrapClassName="mk-pop-modal 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="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
|
</Col>
|
<Col span={16}>
|
<Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'image'})}>
|
<PlusOutlined /> 添加
|
</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">
|
<img src={item.linkurl.replace(/@mywebsite@\//ig, window.GLOB.baseurl)} alt=""/>
|
</div>
|
<div className="image-video-control">
|
<CopyOutlined onClick={() => this.copySource(item)}/>
|
<EditOutlined onClick={() => this.handleSource(item)}/>
|
<DeleteOutlined 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" onClick={() => this.handleSource({typecharone: 'video'})}>
|
<PlusOutlined /> 添加
|
</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">
|
<CopyOutlined onClick={() => this.copySource(item)}/>
|
<EditOutlined onClick={() => this.handleSource(item)}/>
|
<DeleteOutlined 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}>
|
可添加应用中常用的颜色，可以是英文代码、HEX格式、RGB格式，最多可添加25种。
|
{colorlist.length < 25 ? <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'color'})}>
|
<PlusOutlined /> 添加
|
</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">
|
<CopyOutlined onClick={() => this.copySource(item)}/>
|
<DeleteOutlined onClick={() => this.deleteSource(item)}/>
|
</div>
|
</div>
|
<p className="image-video-remark">{item.remark}</p>
|
</Col>
|
))}
|
{!colorlist.length ? <Empty description={null}/> : null}
|
</Row>
|
</TabPane>
|
<TabPane tab="图标库" key="icon">
|
<Row gutter={16}>
|
{iconlist.map(item => (
|
<Col className="icon-wrap" span={4} key={item}>
|
<MkIcon type={item} />
|
<Paragraph copyable={{ text: item }}>{item}</Paragraph>
|
</Col>
|
))}
|
</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>
|
</>
|
)
|
}
|
}
|
|
export default SourceController
|
