xlyErp / xlyUmi

/* eslint-disable */
/* eslint-disable prefer-destructuring */
/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React from 'react';
import { Button, Modal } from 'antd-mobile-v2';
import 'antd-mobile-v2/dist/antd-mobile.css';
import * as commonUtils from '../../utils/utils';
import CommobileClassifyEvent from '../common/CommobileClassifyEvent';
import CommobileBase from '../common/CommobileBase';
import commonConfig from '../../utils/config';
import preView from '../components/preView';
import styles from './fileManage.less';

class FileManageMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [], // 图片存放的数组 可以上传一个，或者多个图片
      imageData: [],
    };
  }

  /* 调用手机摄像头并拍照 */
  getImage =() => {
    const { plus } = window;
    const cmr = plus.camera.getCamera();
    cmr.captureImage((p) => {
      plus.io.resolveLocalFileSystemURL(p, (entry) => {
        this.startUpload(entry.toLocalURL(), entry.name);
      }, (e) => {
        plus.nativeUI.toast(`读取拍照文件错误：${e.message}`);
      });
    }, (e) => {
      plus.nativeUI.toast(`调用摄像头错误：${e.message}`);
    }, {
      filter: 'image',
    });
  }

  /* 相册选择图片 */
  getPhoto =() => {
    const { plus } = window;
    plus.gallery.pick((path) => {
      const name = path.substring(path.lastIndexOf('/') + 1);
      this.startUpload(path, name);
    }, (e) => {
      plus.nativeUI.toast(`选取图片错误：${e.message}`);
    }, { filter: 'image' });
  }

  showImgDetail = (imgId, imgkey, id, src) => {
    let html = '';
    html += `<div  id="Img${imgId}${imgkey}" class="image-item ">`;
    html += `   <img id="picBig" data-preview-src="" data-preview-group="1" ${src}  />`;
    html += `    <span class="del" onclick="delImg('${imgId}','${imgkey}',${id});">`;
    html += '        <div class="fa fa-times-circle"></div>';
    html += '    </span>';
    html += '</div>';
    document.getElementById('imgDiv').innerHTML = html;
  }

  // 压缩图片
  compressImage =(url, filename, divid) => {
    const { plus } = window;
    const name = `_doc/upload/${divid}-${filename}`;// _doc/upload/F_ZDDZZ-1467602809090.jpg
    plus.zip.compressImage(
      {
        src: url, // src: (String 类型 )压缩转换原始图片的路径
        dst: name, // 压缩转换目标图片的路径
        quality: 20, // quality: (Number 类型 )压缩图片的质量.取值范围为1-100
        overwrite: true, // overwrite: (Boolean 类型 )覆盖生成新文件
      },
      (event) => {
        // uploadf(event.target,divid);
        const path = name;// 压缩转换目标图片的路径
        // event.target获取压缩转换后的图片url路
        // filename图片名称
        this.saveimage(event.target, divid, filename, path);
      }, (error) => {
        plus.nativeUI.toast(`${error}压缩图片失败，请稍候再试`);
      },
    );
  }


  // 保存信息到本地
  /**
   *
   * @param {Object} url  图片的地址
   * @param {Object} divid  字段的名称
   * @param {Object} name   图片的名称
   */
  saveimage = (url, divid, name, path) => {
    const { plus } = window;
    // alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg
    // alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg
    // const state = 0;
    const wt = plus.nativeUI.showWaiting();
    //  plus.storage.clear();
    name = name.substring(0, name.indexOf('.'));// 图片名称：1467602809090
    const id = document.getElementById('ckjl.id').value;
    const itemname = `${id}img-${divid}`;// 429img-F_ZDDZ
    let itemvalue = plus.storage.getItem(itemname);
    if (itemvalue == null) {
      itemvalue = `{${name},${path},${url}}`;// {IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}
    } else {
      itemvalue = `${itemvalue}{${name},${path},${url}}`;
    }
    plus.storage.setItem(itemname, itemvalue);

    const src = `src="${url}"`;
    this.showImgDetail(name, divid, id, src);
    wt.close();
  }
  // /* 图片上传入库 */
  uploadImage =(imageObj) => {
    if (commonUtils.isNotEmptyObject(imageObj) && commonUtils.isNotEmptyObject(imageObj.filePath)) {
      /* -封装slaveData */
      const name = 'slave';
      const { app } = this.props;
      let { slaveData } = this.props;
      let { imageData } = this.state;
      if (commonUtils.isEmpty(slaveData) || commonUtils.isEmpty(imageData)) {
        slaveData = [];
        imageData = [];
      }
      const { currentPane } = app;
      /* 上传图片 */
      const tableDataRow = this.props.onDataRowAdd(name, true);/* 选中行 */
      tableDataRow.iOrder = 0;
      tableDataRow.sSrcNo = commonUtils.isNotEmptyObject(currentPane) ? currentPane.sSrcNo : '';
      tableDataRow.sSrcFormId = commonUtils.isNotEmptyObject(currentPane) ? currentPane.sSrcFormId : '';
      tableDataRow.sSrcId = commonUtils.isNotEmptyObject(currentPane) ? currentPane.sSrcId : '';
      tableDataRow.sSrcSlaveId = commonUtils.isNotEmptyObject(currentPane) ? currentPane.sSrcSlaveId : '';
      tableDataRow.sPicturePath = imageObj.filePath;
      tableDataRow.sFileName = imageObj.fileName;
      if (commonUtils.isNotEmptyObject(imageObj.filePath)) {
        imageData.push(imageObj.filePath);
      }
      slaveData.push(tableDataRow);
      this.props.onSaveState({ slaveData, imageData });
      this.props.onSubmit();/* 通用保存 */
    }
  }

  // 上传图片
  //  upload_img = (p) => {
  //    // 又初始化了一下文件数组 为了支持单个上传,如果你要一次上传多个，就不要在写这一行了
  //    // 注意
  //    // files=[];
  //    const n = p.substr(p.lastIndexOf('/') + 1);
  //    files.push({
  //      name: `name${files.length}`,
  //      path: p,
  //    });
  //  }

  startUpload =(path, filename) => {
    const { files } = this.state;
    const { sModelsId, token } = this.props;
    const { plus } = window;
    // if (files.length <= 0) {
    //   plus.nativeUI.alert('没有添加上传文件！');
    //   return;
    // }

    // 原生的转圈等待框
    const wt = plus.nativeUI.showWaiting();

    const task = plus.uploader.createUpload(
      `${commonConfig.file_host}file/mobileupload?sModelsId=${sModelsId}&token=${token}`, {
        method: 'POST',
      },
      (t, status) => { // 上传完成
        if (status === 200) {
          // 关闭转圈等待框
          wt.close();
          if (commonUtils.isNotEmptyObject(t.responseText)) {
            try {
              const responseObj = JSON.parse(t.responseText);
              if (commonUtils.isNotEmptyObject(responseObj) && responseObj.code === 1) {
                /* 拿到上传返回的数据库地址 */
                const dataReturn = responseObj.dataset.rows;
                if (commonUtils.isNotEmptyArr(dataReturn) && dataReturn.length > 0) {
                  /* 通过文件名拿到文件地址 */
                  const sPicturePath = dataReturn[0][filename];
                  /* 上传到通用文件管理中 */
                  const imgObj = {};
                  imgObj.filePath = sPicturePath;
                  imgObj.fileName = filename;
                  files.push(imgObj);
                  this.uploadImage(imgObj);
                }
              } else {
                alert(responseObj.msg);
              }
            } catch (e) {
              alert(`解析地址失败：${e}`);
            }
          }
          // window.location.reload();
        } else {
          alert(`上传失败：${status}`);
          // 关闭原生的转圈等待框
          wt.close();
        }
      },
    );

    task.addData('string_key', 'string_value'); // 可以向后台传值
    task.addFile(path, { key: 'testimage' });
    task.start();
  }


  handleClick =(name) => {
    if (name === 'BtnCamera') { /* 手机调动摄像头拍照 */
      this.getImage();
    } else if (name === 'BtnPhoto') { /* 手机相册选择图片 */
      this.getPhoto();
    } else if (name === 'BtnCancel') {
      window.history.back(-1);
    }
  }


  render() {
    const {
      btnConfig, btnStyle, app, selectedRow
    } = this.props;
    const { token } = app;
    console.log('ss', token)
    const { files, showPicVisible } = this.state;
    const dWidth = document.documentElement.clientWidth || document.body.clientWidth; /* 获取手机视窗宽度1 */
    const dHeight = document.documentElement.clientHeight || document.body.clientHeight; /* 获取手机视窗宽度 */
    /* 上传照片样式定位 */
    let imgDivTop = '500';
    const mobileBarStyle = document.getElementsByClassName('am-list-view-scrollview-content');
    if (commonUtils.isNotEmptyArr(mobileBarStyle) && mobileBarStyle.length > 0) {
      const obj = mobileBarStyle[0].getBoundingClientRect();
      const objHeight = mobileBarStyle[0].clientHeight;
      if (commonUtils.isEmptyObject(obj)) {
        if (obj.top < dHeight) {
          imgDivTop = Math.floor(obj.top + objHeight);
        }
      }
    }
    const sPicturePath =commonUtils.isNotEmptyObject(selectedRow)? selectedRow.sPicturePath : '';
    const sPicturePathArr = sPicturePath? sPicturePath.split(',') : [];
    console.log('00020ss', sPicturePathArr);
    const previewImageArr = [];
    sPicturePathArr.forEach((item) => {
      const dataPreviewUrl = `${commonConfig.file_host}file/download?savePathStr=${item}&width=${dWidth}&&height=${dHeight}&sModelsId=100&token=${token}`; /* 预览 */
      previewImageArr.push(dataPreviewUrl);
    });
    return (
      <div>
        {commonUtils.isEmptyObject(btnConfig) ? '' :
        <div className="content">

          <Button
            inline
            style={btnStyle}
              // disabled={!enabled}
            onClick={() =>
              this.setState({ showPicVisible: true})
            }
          >{btnConfig.showName}
          </Button>
          <Modal
            visible={showPicVisible}
            transparent
            maskClosable={false}
            // onClose={this.onClose('modal1')}
            title="查看图片"
            footer={[{ text: '关闭', onPress: () => { this.setState({ showPicVisible: false }); } }]}
          >
              <div className={styles.showImage} id="imgDiv" >
                {
                  commonUtils.isNotEmptyArr(sPicturePathArr) > 0 ?
                    sPicturePathArr.map((child) => {
                      if (commonUtils.isNotEmptyObject(child)) {
                        let imgBox = '';
                        const dataUrl = `${commonConfig.file_host}file/download?savePathStr=${child}&width=120&&height=120&sModelsId=100&token=${token}`; /* 缩略图 */
                        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
                        imgBox = <img src={dataUrl} alt="img" onFocus={() => 0} onClick={e => preView(previewImageArr, e)} />;
                        return imgBox;
                      } else {
                        return '';
                      }
                    }) : ''
                }
              </div>
          </Modal>
        </div>
        }
      </div>

    );
  }
}

export default CommobileBase(CommobileClassifyEvent(FileManageMobile));