2023-02-13

king

2023-02-13 32f1d2179f6d7ccb5b167aa40116a59e68851a90

 src/tabviews/custom/components/module/voucher/resetAttach/index.jsx

@@ -1,32 +1,170 @@
import React, {Component} from 'react'
import { fromJS } from 'immutable'
import { Button, Modal } from 'antd'
import { Button, Modal, notification } from 'antd'
import moment from 'moment'
import { DeleteOutlined } from '@ant-design/icons'
// import md5 from 'md5'

import Api from '@/api'
import AddAttach from './addAttach'
import Documents from './documents'
import './index.scss'

import wordImg from '@/assets/img/file-word-fill.png'
import excelImg from '@/assets/img/file-excel-fill.png'
import fileImg from '@/assets/img/file-fill.png'
import pdfImg from '@/assets/img/file-pdf-fill.png'
import pptImg from '@/assets/img/file-ppt-fill.png'
import picImg from '@/assets/img/picture-fill.png'
import rarImg from '@/assets/img/rar.png'

class ResetAttach extends Component {
  state = {
    visible: false,
    list: ''
    upVisible: false,
    docVisible: false,
    files: [{data_code: 'ddd', data_name: '凭证'}],
    list: [],
    documents: [
      {id: '1223', folder: '凭证附件', icon: excelImg, attachments_title: '主表20230130173553.xlsx', attachments_url: 'http://主表20230130173553.xlsx'},
      {id: '1224', folder: '凭证附件', icon: excelImg, attachments_title: '主表2sdfsafjifjiji.xlsx', attachments_url: 'http://主表2sdfsafjifjiji.xlsx'},
      {id: '1225', folder: '凭证附件', icon: excelImg, attachments_title: '主表20230sjiejgiej.xlsx', attachments_url: 'http://主表20230sjiejgiej.xlsx'},
      {id: '1227', folder: '回执', icon: excelImg, attachments_title: '主表2023sdfrgtgfgd.xlsx', attachments_url: 'http://主表2023sdfrgtgfgd.xlsx'},
    ],
    selectDocs: []
  }

  submit = () => {
    this.setState({remark: '', visible: false})
    this.props.onChange()
    this.setState({visible: false})
    this.props.onChange(this.state.list)
  }

  trigger = () => {
    const { attachlist } = this.props
    let list = fromJS(attachlist).toJS()
    list = list.map(item => {
      item.icon = this.getIcon(item.attachments_url)
      return item
    })

    this.setState({visible: true, list: fromJS(attachlist).toJS()})
    this.setState({visible: true, list: list})
  }

  triggerUpload = () => {
    
  upSubmit = () => {
    const { config, book, orgcode } = this.props

    if (!book) {
      notification.warning({
        top: 92,
        message: '请选择账套！',
        duration: 5
      })
      return
    }

    let ID = (() => {
      let uuid = []
      let options = '0123456789abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(options.substr(Math.floor(Math.random() * 0x20), 1))
      }
      uuid = moment().format('YYYYMMDDHHmmssSSS') + uuid.join('')
      return uuid.toUpperCase()
    })()

    this.formRef.handleConfirm().then(res => {
      let param = {
        func: 's_fcc_voucher_attachments_addupt',
        data_code: res.data_code,
        data_name: res.data_name,
        id: ID,
        orgcode: orgcode,
        voucher_at_lp: '',
        attachments_title: res.attachments_title,
        f_method: res.f_method,
        attachments_url: res.url,
        remark: res.remark,
        status: config.wrap.attachStatus !== 10 ? 0 : 10,
        statusname: config.wrap.attachStatus !== 10 ? '待审核' : '已审核',
        typename: config.name,
        UserName: sessionStorage.getItem('User_Name') || '',
        FullName: sessionStorage.getItem('Full_Name') || '',
        BID: book.id
      }

      Api.genericInterface(param).then(result => {
        if (!result.status) {
          notification.warning({
            top: 92,
            message: result.message,
            duration: 5
          })
          return
        }

        let list = fromJS(this.state.list).toJS()
        let item = {
          id: ID,
          data_code: res.data_code,
          data_name: res.data_name,
          attachments_title: res.attachments_title,
          attachments_url: res.url
        }

        item.icon = this.getIcon(res.url)

        list.push(item)

        this.setState({list: list})
      })
    })
  }

  deleteFile = (id) => {
    this.setState({list: this.state.list.filter(item => item.id !== id)})
  }

  getIcon = (url) => {
    let type = 'file'

    if (/(.png|.jpg|.gif|.jpeg)$/i.test(url)) {
      type = 'pic'
    } else if (/(.doc|.docx)$/i.test(url)) {
      type = 'word'
    } else if (/(.xls|.xlsx)$/i.test(url)) {
      type = 'excel'
    } else if (/(.zip|.rar)$/i.test(url)) {
      type = 'rar'
    } else if (/.pdf$/i.test(url)) {
      type = 'pdf'
    } else if (/.pptx$/i.test(url)) {
      type = 'ppt'
    }

    let icon = fileImg
    if (type === 'excel') {
      icon = excelImg
    } else if (type === 'word') {
      icon = wordImg
    } else if (type === 'pdf') {
      icon = pdfImg
    } else if (type === 'pic') {
      icon = picImg
    } else if (type === 'ppt') {
      icon = pptImg
    } else if (type === 'rar') {
      icon = rarImg
    }

    return icon
  }

  docSubmit = () => {

  }

  render() {
    const { visible } = this.state
    const { visible, upVisible, docVisible, files, list, documents } = this.state

    return (
      <>
@@ -42,13 +180,47 @@
          cancelText=""
          destroyOnClose
        >
          <Button type="link" className="attach-type-btn" onClick={this.triggerUpload}>上传新文件</Button>
          <Button type="link" className="attach-type-btn" onClick={this.trigger}>从会计电子档案选择</Button>
          <Button type="link" className="attach-type-btn" onClick={() => this.setState({upVisible: true})}>上传新文件</Button>
          <Button type="link" className="attach-type-btn" onClick={() => this.setState({docVisible: true, selectDocs: []})}>从会计电子档案选择</Button>
          <div className="attach-selected-list">


            {list.map(item => {
              return <div className="attach-item" key={item.id}>
                <img src={item.icon} alt=""/>
                <div className="attach-msg">
                  <div>{item.attachments_title}</div>
                  <div>{item.data_name ? item.data_name + ' / ' : ''}{item.attachments_url}</div>
                </div>
                <div>
                  <DeleteOutlined onClick={() => this.deleteFile(item.id)}/>
                </div>
              </div>
            })}
          </div>
        </Modal>
        <Modal
          title="添加附件"
          wrapClassName="voucher-attach-add-wrap"
          visible={upVisible}
          width={700}
          maskClosable={false}
          onOk={this.upSubmit}
          onCancel={() => { this.setState({ upVisible: false })}}
          destroyOnClose
        >
          <AddAttach files={files} wrappedComponentRef={(inst) => this.formRef = inst} submit={this.upSubmit}/>
        </Modal>
        <Modal
          title="电子档案"
          wrapClassName="voucher-attach-document-wrap"
          visible={docVisible}
          width={700}
          maskClosable={false}
          onOk={this.docSubmit}
          onCancel={() => { this.setState({ docVisible: false, selectDocs: [] })}}
          destroyOnClose
        >
          {docVisible ? <Documents documents={documents} onChange={(vals) => this.setState({selectDocs: vals})}/> : null}
        </Modal>
      </>
    )
  }