import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Input, Form, Row, Col, 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: '',
|
list: [],
|
searchKey: '',
|
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) => {
|
this.setState({list: originlist, url: '', searchKey: ''})
|
}
|
|
changeValue = (e) => {
|
this.setState({url: e.target.value})
|
}
|
|
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, searchKey, selectId, editvisible, card } = this.state
|
|
if (keyword === 'input') {
|
return <div className="mk-source-pop-wrap">
|
<Form.Item label="地址" help="可使用@mywebsite@代替域名（含虚拟目录），如：@mywebsite@/Content/images/xxx.jpg" 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>
|
</div>
|
} else if (keyword === 'upload') {
|
return <div className="mk-source-pop-wrap">
|
<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>
|
</div>
|
}
|
|
let pagelist = list
|
|
if (searchKey) {
|
pagelist = list.filter(item => item.remark && item.remark.indexOf(searchKey) > -1)
|
}
|
|
return (
|
<div className="mk-source-pop-wrap">
|
<Search value={searchKey} placeholder="" onChange={(e) => this.setState({searchKey: e.target.value})}/>
|
<Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: type})}>
|
<PlusOutlined /> 添加
|
</Button>
|
<Row gutter={16} className="mk-scrollbar">
|
{pagelist.map(item => (
|
<Col span={3} 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} /> : <Video value={item.linkurl} />}
|
</div>
|
</div>
|
</Col>
|
))}
|
{!pagelist.length ? <Empty description={null}/> : null}
|
</Row>
|
<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
|
