import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Input, Form, Row, Col, Pagination, Empty, Button, Modal, notification } from 'antd'
|
import { PlusOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TextArea } = Input
|
const { Search } = Input
|
const FileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
|
const Video = asyncComponent(() => import('@/menu/picturecontroller/video'))
|
const Image = asyncComponent(() => import('@/components/Image'))
|
const EditForm = asyncComponent(() => import('@/menu/picturecontroller/editform'))
|
|
class PopSource extends Component {
|
static propTpyes = {
|
keyword: PropTypes.string
|
}
|
|
state = {
|
url: '',
|
originlist: [],
|
list: [],
|
pagelist: [],
|
searchKey: '',
|
pageSize: 12,
|
pageIndex: 1,
|
selectId: '',
|
editvisible: false,
|
card: null
|
}
|
|
UNSAFE_componentWillMount () {
|
if (this.props.keyword === 'system') {
|
this.preInit()
|
}
|
}
|
|
componentDidMount() {
|
try {
|
let _form = document.getElementById('source-input')
|
|
if (_form && _form.focus) {
|
_form.focus()
|
}
|
} catch (e) {}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
preInit = () => {
|
const { type } = this.props
|
|
let _type = type === 'video' ? 'video' : 'image'
|
let _sname = type === 'video' ? 'app_videos' : 'app_pictures'
|
|
this.getSource(_type, _sname).then(res => {
|
this.init(res)
|
})
|
}
|
|
getSource = (type, sessionName) => {
|
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
|
}
|
Api.getCloudConfig(param).then(res => {
|
let data = res.data || []
|
window.GLOB[sessionName] = data
|
|
resolve(data)
|
})
|
}
|
})
|
}
|
|
init = (originlist) => {
|
let list = originlist
|
let pagelist = list.filter((item, index) => index < this.state.pageSize)
|
|
this.setState({originlist, list, url: '', searchKey: '', pageIndex: 1, pagelist})
|
}
|
|
changeSearch = () => {
|
const { originlist, pageSize, searchKey } = this.state
|
let list = originlist.filter(item => item.remark.indexOf(searchKey) > -1)
|
let pagelist = list.filter((item, index) => index < pageSize)
|
|
this.setState({list, pagelist, pageIndex: 1})
|
}
|
|
changeValue = (e) => {
|
this.setState({url: e.target.value})
|
}
|
|
changeSize = (page) => {
|
const { list, pageSize } = this.state
|
let pagelist = list.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
|
this.setState({pageIndex: page, pagelist})
|
}
|
|
changeFile = (val) => {
|
this.setState({url: val})
|
}
|
|
selectItem = (item) => {
|
if (item.linkurl) {
|
this.setState({url: item.linkurl, selectId: item.id})
|
}
|
}
|
|
handleSource = (item) => {
|
this.setState({
|
editvisible: true,
|
card: item
|
})
|
}
|
|
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: 'add'
|
}).then(result => {
|
if (result.status) {
|
if (card.typecharone === 'image') {
|
window.GLOB.app_pictures = result.data || []
|
this.init(result.data || [])
|
} else {
|
window.GLOB.app_videos = result.data || []
|
this.init(result.data || [])
|
}
|
this.setState({editvisible: false})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
})
|
}
|
|
render () {
|
const { type, keyword } = this.props
|
const { list, url, pagelist, searchKey, pageIndex, pageSize, selectId, editvisible, card } = this.state
|
|
return (
|
<div className="mk-source-pop-wrap">
|
{keyword === 'input' ? <Form.Item label="地址" labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 20 }}}>
|
<TextArea id="source-input" value={url} rows={4} onChange={this.changeValue}/>
|
</Form.Item> : null}
|
{keyword === 'upload' ? <Form.Item label="上传" labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 20 }}}>
|
<FileUpload config={{
|
initval: '',
|
suffix: type === 'video' ? '.mp4,.webm,.ogg' : '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico',
|
maxfile: 1,
|
fileType: type === 'video' ? 'text' : 'picture'
|
}} onChange={this.changeFile} />
|
</Form.Item> : null}
|
{keyword === 'system' ?
|
<Search value={searchKey} placeholder="" onChange={(e) => this.setState({searchKey: e.target.value})} onSearch={this.changeSearch} enterButton/> : null}
|
{keyword === 'system' ? <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: type})}>
|
<PlusOutlined /> 添加
|
</Button> : null}
|
{keyword === 'system' && list.length ?
|
<Row gutter={16} style={{minHeight: '250px'}}>
|
{pagelist.map(item => (
|
<Col span={4} key={item.id}>
|
<div className={'image-video-box' + (selectId === item.id ? ' active' : '')} onClick={() => this.selectItem(item)}>
|
<div className="image-video-box-body">
|
{type !== 'video' ? <Image url={item.linkurl} /> : null}
|
{type === 'video' ? <Video value={item.linkurl} /> : null}
|
</div>
|
</div>
|
</Col>
|
))}
|
</Row> : null}
|
{keyword === 'system' && list.length === 0 ? <Empty description={null}/> : null}
|
{keyword === 'system' && list.length > pageSize ? <Pagination size="small" current={pageIndex} pageSize={pageSize} onChange={this.changeSize} total={list.length} /> : null}
|
<Modal
|
title={'新建'}
|
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>
|
)
|
}
|
}
|
|
export default PopSource
|
