| | |
| | | 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 { Input, Form, Row, Col, Empty, Button, Modal, notification } from 'antd' |
| | | import { PlusOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | |
| | | state = { |
| | | url: '', |
| | | originlist: [], |
| | | list: [], |
| | | pagelist: [], |
| | | searchKey: '', |
| | | pageSize: 12, |
| | | pageIndex: 1, |
| | | selectId: '', |
| | | editvisible: false, |
| | | card: null |
| | |
| | | } |
| | | |
| | | 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}) |
| | | this.setState({list: originlist, url: '', searchKey: ''}) |
| | | } |
| | | |
| | | 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) => { |
| | |
| | | |
| | | render () { |
| | | const { type, keyword } = this.props |
| | | const { list, url, pagelist, searchKey, pageIndex, pageSize, selectId, editvisible, card } = this.state |
| | | const { list, url, searchKey, selectId, editvisible, card } = this.state |
| | | |
| | | return ( |
| | | <div className="mk-source-pop-wrap"> |
| | | {keyword === 'input' ? <Form.Item label="地址" help="可使用@mywebsite@代替域名(含虚拟目录),如:@mywebsite@/Content/images/xxx.jpg" labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 20 }}}> |
| | | 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> : null} |
| | | {keyword === 'upload' ? <Form.Item label="上传" labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 20 }}}> |
| | | </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> : 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})}> |
| | | </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> : 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> |
| | | </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> |
| | | </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} |
| | | </div> |
| | | </Col> |
| | | ))} |
| | | {!pagelist.length ? <Empty description={null}/> : null} |
| | | </Row> |
| | | <Modal |
| | | title={'新建'} |
| | | title="新建" |
| | | wrapClassName="picture-edit-model" |
| | | visible={editvisible} |
| | | width={600} |