2025-01-16

king

2025-01-16 325aa13d3b61d1c066f8fcab107003ef36713df3

 src/menu/components/share/sourcecomponent/inputform/index.jsx

@@ -1,7 +1,7 @@
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'
@@ -13,7 +13,6 @@
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 {
@@ -23,12 +22,9 @@

  state = {
    url: '',
    originlist: [],
    list: [],
    pagelist: [],
    icons: [],
    searchKey: '',
    pageSize: 12,
    pageIndex: 1,
    selectId: '',
    editvisible: false,
    card: null
@@ -88,28 +84,40 @@
  }

  init = (originlist) => {
    let list = originlist
    let pagelist = list.filter((item, index) => index < this.state.pageSize)
    const { type } = this.props
    this.setState({list: originlist, icons: window.GLOB.sIcons || [], url: '', searchKey: ''})

    this.setState({originlist, list, url: '', searchKey: '', pageIndex: 1, pagelist})
    if (type !== 'video' && !window.GLOB.sIcons && sessionStorage.getItem('getIcons') !== 'fail') {
      fetch(window.GLOB.baseurl + 'Content/static/data.json')
        .then(response => response.json())
        .catch(() => {
          sessionStorage.setItem('getIcons', 'fail')
        })
        .then(res => {
          if (res && res.list) {
            let icons = []
            res.list.forEach(item => {
              if (!item.url) return

              icons.push({
                linkurl: window.GLOB.baseurl + 'Content/static/' + item.url,
                remark: item.remark || '',
                id: Utils.getuuid()
              })
            })

            window.GLOB.sIcons = icons

            this.setState({icons})
          } else {
            sessionStorage.setItem('getIcons', 'fail')
  }

  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) => {
@@ -117,8 +125,15 @@
  }

  selectItem = (item) => {
    const { type } = this.props
    const { icons } = this.state

    if (item.linkurl) {
      if (type !== 'video' && icons.findIndex(n => n.id === item.id) > -1) {
        this.setState({url: item.linkurl.replace(window.GLOB.baseurl, '@mywebsite@/'), selectId: item.id})
      } else {
      this.setState({url: item.linkurl, selectId: item.id})
      }
    }
  }

@@ -170,43 +185,65 @@

  render () {
    const { type, keyword } = this.props
    const { list, url, pagelist, searchKey, pageIndex, pageSize, selectId, editvisible, card } = this.state
    const { list, icons, 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
    let iconlist = icons

    if (searchKey) {
      pagelist = list.filter(item => item.remark && item.remark.indexOf(searchKey) > -1)
      iconlist = icons.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'}}>
        </Button>
        <Row gutter={16} className="mk-scrollbar">
            {pagelist.map(item => (
              <Col span={4} key={item.id}>
            <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} /> : null}
                    {type === 'video' ? <Video value={item.linkurl} /> : null}
                  {type !== 'video' ? <img src={item.linkurl} alt=""/> : <Video value={item.linkurl} />}
                  </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}
          {iconlist.length ? <div className="static-source">静态资源</div> : null}
          {iconlist.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">
                  <img src={item.linkurl} alt=""/>
                </div>
              </div>
            </Col>
          ))}
          {!pagelist.length && !iconlist.length ? <Empty description={null}/> : null}
        </Row>
        <Modal
          title={'新建'}
          title="新建"
          wrapClassName="picture-edit-model"
          visible={editvisible}
          width={600}