图片加水印/节点加类型

src/pages/Detail/DropdownMenu.js

@@ -84,8 +84,8 @@ function DropdownMenu(props) {
           cancelText: '取消',
           onOk: async () => {
             await setLastVersion(version.id);
-            version.last_version = 1
-            setVersion(version)
+            version.last_version = 1;
+            setVersion(version);
             localStorage.excelItem = JSON.stringify(version);
           },
         });
@@ -110,7 +110,9 @@ function DropdownMenu(props) {
         </>
       );
     } else {
-      return <Button onClick={() => onClick({ key: 'closeCompare', data: true })}>取消比对</Button>;
+      return (
+        <Button onClick={() => onClick({ key: 'closeCompare', data: false })}>取消比对</Button>
+      );
     }
   }
 
@@ -136,17 +138,20 @@ function DropdownMenu(props) {
           .some(id => currentUser.roleList?.find(role => role.ID == id));
       }
       // 没有分类的不设置权限
-      if(version.classify_id === 0) return true;
+      if (version.classify_id === 0) return true;
       // 非全部分类判断是否含有权限
-      if(version.classify_id != 1) {
+      if (version.classify_id != 1) {
         // 判断在特定分类下是否有权限
         const uidsStr = classifyList.find(item => item.classify_id == version.classify_id)?.uid;
         if (uidsStr && uidsStr.split(',')?.findIndex(item => item == currentUser.ID) < 0) {
           bool = false;
-          
+
           // 判断在全部分类下是否有权限
-          const allUidsStr = classifyList.find(item => item.classify_id == 1)?.uid
-          if (allUidsStr && allUidsStr.split(',')?.findIndex(item => item == currentUser.ID) != -1) {
+          const allUidsStr = classifyList.find(item => item.classify_id == 1)?.uid;
+          if (
+            allUidsStr &&
+            allUidsStr.split(',')?.findIndex(item => item == currentUser.ID) != -1
+          ) {
             bool = true;
           }
         }
@@ -158,7 +163,6 @@ function DropdownMenu(props) {
 
     if (!isAuditor && canEdit() && !version.flow_id) {
       menuList.push(<Menu.Item key="merge">同步</Menu.Item>);
-     
     }
   }
   if (!isLastVersion) menuList.push(<Menu.Item key="lastVersion">设为最终版本</Menu.Item>);

src/pages/Detail/Index.js

@@ -35,6 +35,7 @@ import DropdownMenu from './DropdownMenu';
 import CurrentInfo from './CurrentInfo';
 import moment from 'moment';
 import PsrControl from './PsrControl';
+import exportExcelImg from './exportExcelImg';
 
 function Detail(props) {
   const {
@@ -86,6 +87,8 @@ function Detail(props) {
   });
   const cellPosition = useRef({});
 
+  const [imgPic, setImgPic] = useState('');
+
   useEffect(() => {
     // if (!version.id) return
     // 不请求excelFileList 时清空excelFileList,否则会出现清单切换后如果attachment_id不存在，附件信息没有更新
@@ -249,24 +252,26 @@ function Detail(props) {
   };
   // 更新表单，flag为true时不判断是否属于审批，强制更新
   const onUpdate = flag => {
-    if (!flag && flow.active != 0) return;
-    let currentData = sheetRef.current.getSheetJson().data;
-    let sheets = JSON.parse(JSON.stringify(currentData));
-    sheets.forEach(item => {
-      delete item.data;
-    });
-    let params = {
-      ...version,
-      data: JSON.stringify(sheets),
-    };
+    // if (!flag && flow.active != 0) return;
+    if (node?.node_type_psr == 6 || flag || flow.active == 0) {
+      let currentData = sheetRef.current.getSheetJson().data;
+      let sheets = JSON.parse(JSON.stringify(currentData));
+      sheets.forEach(item => {
+        delete item.data;
+      });
+      let params = {
+        ...version,
+        data: JSON.stringify(sheets),
+      };
 
-    dispatch({
-      type: 'detail/saveSheet',
-      payload: params,
-      callback: () => {
-        setSaveTime(moment().format('HH:mm:ss'));
-      },
-    });
+      dispatch({
+        type: 'detail/saveSheet',
+        payload: params,
+        callback: () => {
+          setSaveTime(moment().format('HH:mm:ss'));
+        },
+      });
+    }
   };
 
   const onDelSheet = async id => {
@@ -373,7 +378,7 @@ function Detail(props) {
         // 同步清单
         setMergeVisible(true);
         break;
-      case 'compare':
+      case 'closeCompare':
         // 同步
         onCompare(e.data);
         break;
@@ -555,6 +560,15 @@ function Detail(props) {
               新建清单
             </Button>
           )}
+          <Button
+            onClick={() => {
+              const src = sheetRef.current?.luckysheet.getScreenshot();
+              exportExcelImg(src).then(res => setImgPic(res));
+              // setImgPic(src);
+            }}
+          >
+            导出图片
+          </Button>
           <CurrentInfo version={version} flowDetail={flowDetail} />
         </div>
         <div className={styles.btns}>
@@ -603,6 +617,7 @@ function Detail(props) {
           onChange={e => exportExcl(e.target.files)}
         />
       </div>
+      {imgPic && <img src={imgPic} />}
       {showPsrBtns && <PsrControl sheetRef={sheetRef} />}
       <div style={{ display: 'flex' }}>
         <div

src/pages/Detail/LuckySheet.js

@@ -214,7 +214,7 @@ class LuckySheet extends React.Component {
         };
       };
 
-      if (version.flow_id) {
+      if (version.flow_id && node?.node_type_psr != 6) {
         option.authority = {
           sheet: true,
           hintText: '当前处于审批节点，禁止编辑！',
@@ -226,13 +226,16 @@ class LuckySheet extends React.Component {
           hintText: '该清单已设置为最终版本，禁止编辑！',
         };
         unableEdit(option);
-      } else if ((version.audit_status != 0 && version.audit_status != 5) || version.status == 1) {
+      } else if (
+        node?.node_type_psr != 6 &&
+        ((version.audit_status != 0 && version.audit_status != 5) || version.status == 1)
+      ) {
         option.authority = {
           sheet: true,
           hintText: '当前清单不可编辑！',
         };
         unableEdit(option);
-      } else if (node?.node_type_psr == 1 ||node?.node_type_psr == 2 || node?.node_type_psr == 5 ) {
+      } else if (node?.node_type_psr == 1 || node?.node_type_psr == 2 || node?.node_type_psr == 5) {
         option.authority = {
           sheet: true,
           hintText: '流程已完结，不可编辑！',
@@ -272,7 +275,6 @@ class LuckySheet extends React.Component {
       this.luckysheet.setCellFormat(0, 0, 'bg', '#fff');
       this.luckysheet.refreshFormula();
     }, 500);
-    
   }
 
   // componentDidUpdate(prevProps) {
@@ -662,11 +664,11 @@ class LuckySheet extends React.Component {
       luckysheet.setCellValue(9, 2, result, {
         order,
       });
-      console.log(result)
-      luckysheet.refreshFormula()
-      message.success("计算成功")
+      console.log(result);
+      luckysheet.refreshFormula();
+      message.success('计算成功');
     } catch (error) {
-      message.error("计算失败")
+      message.error('计算失败');
       console.log(error);
     }
   }

src/pages/Detail/exportExcelImg.js

@@ -0,0 +1,55 @@
+import { async } from '@antv/x6/lib/registry/marker/async';
+
+function blobToImg(blob) {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader();
+    reader.addEventListener('load', () => {
+      let img = new Image();
+      img.src = reader.result;
+      img.addEventListener('load', () => resolve(img));
+    });
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function imgToCanvas(img) {
+  let canvas = document.createElement('canvas');
+  let ctx = canvas.getContext('2d');
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+      resolve(canvas);
+    };
+  });
+}
+
+function watermark(canvas, text) {
+  return new Promise((resolve, reject) => {
+    let ctx = canvas.getContext('2d');
+    // 设置填充字号和字体，样式
+    ctx.font = '24px 宋体';
+    ctx.fillStyle = '#FFC82C';
+    // 设置右对齐
+    ctx.textAlign = 'right';
+    // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
+    ctx.fillText(text, canvas.width - 20, canvas.height - 20);
+    canvas.toBlob(blob => {
+      console.log(blob);
+      resolve(blob);
+    });
+  });
+}
+export default async function(data64) {
+  // let img = await blobToImg(data64);
+  let img = new Image();
+  img.src = data64;
+  document.body.appendChild(img);
+  let canvas = await imgToCanvas(img);
+  let blob = await watermark(canvas, '金科环境');
+  let newImage = await blobToImg(blob);
+  return URL.createObjectURL(blob);
+
+  return newImage;
+}