ShowItem.js 6.4 KB
Newer Older
1
import React from 'react';
2
import { queryApiActionPath, queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
3
import { getToken } from '@/webPublic/one_stop_public/utils/token';
4
import { isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
5
import getOneStopUploadUrl from '@/webPublic/one_stop_public/Base16/getOneStopUploadUrl';
6 7 8 9
import {
  getSassApiHeader,
  getSysCode
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
钟是志's avatar
钟是志 committed
10

11

钟是志's avatar
钟是志 committed
12 13 14 15
const oneSetItemP = {
  marginBottom: 0,
  userSelect: 'none',
};
16 17
let startX = 0;
let startY = 0;
钟是志's avatar
钟是志 committed
18

19 20 21 22 23 24 25
const ShowItem = ({
                    basicUrl,
                    type,
                    x,
                    y,
                    ...otherInfo
                  }) => {
钟是志's avatar
钟是志 committed
26 27 28 29 30 31 32 33 34 35 36 37
  switch (type) {
    case 'image':
      return (
        <img
          draggable={false}
          key={otherInfo.key}
          src={basicUrl + otherInfo.path}
          style={{
            // border: '1px solid red',
            cursor: 'pointer',
            width: otherInfo.w,
            height: otherInfo.h,
钟是志's avatar
钟是志 committed
38
            zIndex: otherInfo.index || 1,
钟是志's avatar
钟是志 committed
39 40 41 42 43 44 45 46 47 48
          }}
        />
      );
    case 'text':
      return (
        <p
          draggable={false}
          key={otherInfo.key}
          style={{
            // border: '1px solid red',
钟是志's avatar
钟是志 committed
49
            ...oneSetItemP,
钟是志's avatar
钟是志 committed
50 51 52 53 54
            cursor: 'pointer',
            fontSize: otherInfo?.fontSize ? otherInfo.fontSize + 'px' : undefined,
            fontFamily: otherInfo?.fontFamily ? otherInfo.fontFamily : undefined,
            fontWeight: otherInfo?.fontStyle ? otherInfo.fontStyle : undefined,
            color: otherInfo?.color ? otherInfo.color : undefined,
钟是志's avatar
钟是志 committed
55
            zIndex: otherInfo.index || 1,
钟是志's avatar
钟是志 committed
56 57 58 59 60 61 62 63 64 65 66
          }}
        >
          {otherInfo.word}
        </p>
      );
  }
};


export const dragEventList = (setOtherProps, otherProps) => {
  let draggedRef = null;
67
  let documentThis = isFromIframe() ? window?.parent?.document : document;
68 69 70 71
  documentThis.onmousedown = function (evt) {
    startX = evt.offsetX;
    startY = evt.offsetY;
  };
72 73

  documentThis.addEventListener(
钟是志's avatar
钟是志 committed
74
    'dragstart',
75
    function (event) {
钟是志's avatar
钟是志 committed
76 77
      // 保存拖动元素的引用(ref.)
      draggedRef = event.target;
78
      event.target.style.opacity = 0.2;
钟是志's avatar
钟是志 committed
79 80 81
    },
    false,
  );
82
  documentThis.addEventListener(
钟是志's avatar
钟是志 committed
83 84 85 86 87 88 89 90 91
    'dragend',
    (event) => {
      // 重置透明度
      event.target.style.opacity = '';
    },
    false,
  );

  /* 放下目标节点时触发事件 */
92
  documentThis.addEventListener(
钟是志's avatar
钟是志 committed
93 94 95 96 97 98 99
    'dragover',
    (event) => {
      // 阻止默认动作
      event.preventDefault();
    },
    false,
  );
100
  documentThis.addEventListener(
钟是志's avatar
钟是志 committed
101 102 103 104 105
    'drop',
    (event) => {
      // 阻止默认动作(如打开一些元素的链接)
      event.preventDefault();
      // 将拖动的元素到所选择的放置目标节点中
106 107
      let infoClientRect = documentThis.getElementById('dropZone')
        .getBoundingClientRect();
108 109 110 111 112
      // console.log(startX, typeof startX, startY);
      // return ;
      let leftNew = Math.ceil(event.clientX - infoClientRect.left) - startX;
      let topNew = Math.ceil(event.clientY - infoClientRect.top) - startY;
      // console.log(leftNew, topNew);
113
      if (leftNew < 0 || leftNew > infoClientRect.width || topNew < 0 || topNew > infoClientRect.height) {
114 115 116 117 118 119 120 121
        console.log('拖拽到了图片区域外部,不能进行拖拽');
        return false;
      }

      let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
      let item = otherProps.signConfig.find((g) => {
        return g.key === key;
      });
122
      if (!item) {
123
        return false;
钟是志's avatar
钟是志 committed
124
      }
125 126 127 128 129
      item.x = leftNew;
      item.y = topNew;
      setOtherProps({
        ...otherProps,
        signConfig: otherProps.signConfig,
130
      });
131 132 133
      draggedRef.style.left = leftNew; // `${left}px`;
      draggedRef.style.top = topNew; // `${top}px`;
      return true;
钟是志's avatar
钟是志 committed
134 135 136
    },
    false,
  );
137
};
钟是志's avatar
钟是志 committed
138

139
export const uploadFile = (file) => {
140
  let url = getOneStopUploadUrl();
钟是志's avatar
钟是志 committed
141 142
  const formData = new FormData();
  formData.append('file', file);
143 144
  formData.append('token', getToken());
  return fetch(url, {
钟是志's avatar
钟是志 committed
145 146 147
    method: 'POST',
    headers: {
      Accept: '*/*',
148
      ...getSassApiHeader(),
钟是志's avatar
钟是志 committed
149 150 151 152 153 154 155 156
    },
    body: formData,
  })
    .then((res) => {
      return res.text();
    })
    .then((res) => {
      return res;
157 158
    });
};
钟是志's avatar
钟是志 committed
159

160 161 162 163
export const uploadWordToHtml = (file) => {
  let url = queryApiActionPath() + '/ImageLibApi/convert';
  const formData = new FormData();
  formData.append('file', file);
钟是志's avatar
钟是志 committed
164
  formData.append('base', window.specialImportantSystemConfig.dfs);
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
  formData.append('token', getToken());
  return fetch(url, {
    method: 'POST',
    headers: {
      Accept: '*/*',
      ...getSassApiHeader(),
    },
    body: formData,
  })
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      return res;
    });
};

钟是志's avatar
钟是志 committed
182 183 184 185 186

// 将图片宽度确定 高度按比例调整后返回一张新的图片
export const zipImage = (path, fileName, limitWidth = 1200) => {
  return new Promise((resolve, reject) => {
    let image = new Image(); //新建一个img标签(还没嵌入DOM节点)
187
    let imageUrl = queryFileUrl(path);
188
    image.setAttribute('crossOrigin', 'Anonymous');
钟是志's avatar
钟是志 committed
189 190 191 192 193 194
    image.src = imageUrl;
    image.onload = () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const imageWidth = limitWidth;
      const ratio = image.width / limitWidth;  // 按宽度固定 压缩图片
195
      if (ratio === 1 || isNaN(ratio)) {
钟是志's avatar
钟是志 committed
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
        resolve(path);
        return true;
      }
      const imageHeight = parseInt(image.height / ratio, 10);
      let data = '';
      canvas.width = imageWidth;
      canvas.height = imageHeight;
      // console.log(imageWidth, imageHeight);
      context.drawImage(image, 0, 0, imageWidth, imageHeight);
      data = canvas.toDataURL('image/jpeg');
      const dataURLtoFile = (dataurl, filename) => {  // 将base64转换为文件
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];

        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
      };
      let file = dataURLtoFile(data, fileName);
219 220 221 222 223 224 225 226
      uploadFile(file)
        .then((res) => {
          if (res) {
            resolve(res);
          } else {
            resolve(path);
          }
        });
钟是志's avatar
钟是志 committed
227 228 229 230 231 232 233 234
      //压缩完成
    };
  });


};


235
export default ShowItem;