coding..

src/views/sop/components/dynamic-form-item/SELECT.vue

@@ -35,9 +35,7 @@ const options = ref([]);
 const getOptionsApi = () => {
   let dataGrid = props.config?.dataGrid;
   if (API_TYPE1_IDS.includes(props.config?.formId)) {
-    // if (props.config?.formId === '') {
     dataGrid = dataGrid.replace('#{id}', props.sop?.crmDetailId);
-    console.log('dataGrid', dataGrid);
   }
   return request({
     url: dataGrid,
@@ -56,7 +54,6 @@ const getOptions = async () => {
 
   if (!props.config.dataGrid) return;
   const data = await getOptionsApi();
-  console.log('data', data);
   options.value = data || [];
   if (API_TYPE1_IDS.includes(props.config?.formId)) {
     options.value = options.value.map((item) => {

src/views/sop/components/dynamic-form-item/SIGN.vue

@@ -40,7 +40,8 @@ const disabled = computed(() => {
 const valueData = ref('');
 const getSignResultImg = () => {
   if (location.origin !== 'https://sop.qmth.com.cn') {
-    valueData.value = 'https://photocdn.sohu.com/20070213/Img248208439.jpg';
+    valueData.value =
+      'https://teachcloud-test.oss-cn-shenzhen.aliyuncs.com/file/2024/09/10/ZiXZ792Q0QlPyQGGF9_k2.jpg';
     emitChange();
     pause();
     return;

src/views/sop/sop-manage/office-sop/index.vue

@@ -74,6 +74,12 @@
       </template>
       <template #buttons>
         <t-button theme="primary" @click="search">搜索</t-button>
+        <!-- <t-button
+          theme="primary"
+          @click="fastViewAllData"
+          style="margin-left: 10px"
+          >便捷查阅</t-button
+        > -->
       </template>
     </SearchForm>
 
@@ -209,6 +215,15 @@
       :type="curSopType"
       @confirm="fetchData"
     ></sop-step-dialog>
+    <template v-if="perm.LINK_Edit || perm.LINK_AddSop || perm.LINK_Fill">
+      <sop-step-dialog
+        v-model:visible="showSopStepDialog2getImg"
+        :sop="tableData[0]"
+        type="view"
+        :screenshot="screenshot"
+      ></sop-step-dialog>
+    </template>
+
     <!-- QualityIssueDialog -->
     <quality-issue-dialog
       v-if="perm.LINK_ProblemSubmit"
@@ -268,6 +283,8 @@ import bus from '@/utils/bus';
 import { metadataListApi } from '@/api/sop';
 import AllocationDialog from '../../../service-unit/dispatch/dispatch-manage/allocation-dialog.vue';
 
+const screenshot = ref(false);
+
 const showAllocationDialog = ref(false);
 const allocation = (row) => {
   curSopData.value = row;
@@ -727,6 +744,7 @@ const createViolationHandle = (row) => {
 };
 
 const showSopStepDialog = ref(false);
+const showSopStepDialog2getImg = ref(false);
 const curSopType = ref('');
 const editSopFlowHandle = (row, type = 'fill') => {
   curSopType.value = type;
@@ -771,4 +789,9 @@ watch(originColumns, () => {
   params.formWidgetMetadataViewList = cloneDeep(originColumns.value);
   formWidgetMetadataViewList.value = cloneDeep(originColumns.value);
 });
+
+const fastViewAllData = async () => {
+  screenshot.value = true;
+  showSopStepDialog2getImg.value = true;
+};
 </script>

src/views/sop/sop-manage/sop-step/index.vue

@@ -100,10 +100,11 @@
         >
       </div>
       <div class="t-tabs__content">
-        <div class="t-tab-panel">
+        <div class="t-tab-panel sop-step-body-parent">
           <t-form
             ref="form"
             colon
+            id="flow-wrap"
             class="sop-step-body"
             :rules="rules"
             :data="formData"
@@ -217,7 +218,7 @@
 </template>
 
 <script setup name="SopStep">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import {
   ErrorCircleFilledIcon,
   ChevronLeftDoubleIcon,
@@ -239,6 +240,7 @@ import {
 import { objCopy, timeNumberToText } from '@/utils/tool';
 import { timestampFilter } from '@/utils/filter';
 import bus from '@/utils/bus';
+import html2canvas from 'html2canvas';
 
 const deviceTableData = ref([]);
 const getTableData = (val) => {
@@ -256,6 +258,10 @@ const props = defineProps({
       return {};
     },
   },
+  screenshot: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['confirm']);
 
@@ -406,6 +412,45 @@ const initNew = async () => {
   allSteps.value = [res.formProperties];
   switchStep(allSteps.value[0]);
 };
+
+const makeDomImg = () => {
+  return new Promise((rs) => {
+    let targetDom = document.querySelector('#flow-wrap');
+    let copyDom = targetDom.cloneNode(true);
+    // copyDom.setAttribute('id', 'copyDom'); // 更改id 避免与targetDom id重复
+    copyDom.style.width = targetDom.scrollWidth + 'px';
+    copyDom.style.height = targetDom.scrollHeight + 'px';
+    copyDom.style.overflow = 'visible';
+    let parent = targetDom.parentNode;
+    parent.appendChild(copyDom);
+    html2canvas(copyDom, {
+      useCORS: true,
+      height: targetDom.scrollHeight,
+      width: targetDom.scrollWidth,
+    }).then(function (canvas) {
+      const imgData = canvas.toDataURL();
+      rs(imgData);
+      copyDom.remove();
+    });
+  });
+};
+
+const loopGetScreenImg = async () => {
+  let imgUrlArr = [];
+  for (let i = 0; i < allSteps.value.length; i++) {
+    let item = allSteps.value[i];
+    switchStep(item);
+    await new Promise((rs) => {
+      setTimeout(() => {
+        rs();
+      }, 500);
+    });
+    let url = await makeDomImg();
+    imgUrlArr.push(url);
+  }
+  console.log('imgUrlArr', imgUrlArr);
+};
+
 const initFill = async () => {
   loading.value = true;
   const res = await sopFlowViewApi({ flowId });
@@ -420,7 +465,7 @@ const initFill = async () => {
       v.writable = false;
     });
   });
-  if (res.currFlowTaskResult) {
+  if (res.currFlowTaskResult && !props.screenshot) {
     res.currFlowTaskResult.formProperty =
       res.currFlowTaskResult.formProperty.map((item) => {
         //设备出库时间和设备入库时间，赋予默认值为当前时间
@@ -467,6 +512,14 @@ const initFill = async () => {
     item && switchStep(item);
     sessionStorage.removeItem('switchSetup');
   }
+
+  // setTimeout(async () => {
+  //   let imgUrl = await makeDomImg();
+  //   console.log(imgUrl);
+  // });
+  if (props.screenshot) {
+    loopGetScreenImg();
+  }
 };
 const initEdit = async () => {
   loading.value = true;

src/views/sop/sop-manage/sop-step/sop-step-dialog.vue

@@ -1,6 +1,7 @@
 <template>
   <my-drawer
     class="sop-dialog"
+    :class="{ 'cant-see': screenshot }"
     :visible="visible"
     :header="title"
     size="85%"
@@ -15,6 +16,7 @@
       :type="type"
       :sop="sop"
       @confirm="stepConfirm"
+      :screenshot="screenshot"
     ></sop-step>
   </my-drawer>
 </template>
@@ -36,6 +38,10 @@ const props = defineProps({
       return {};
     },
   },
+  screenshot: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const title = computed(() => {
@@ -50,3 +56,10 @@ const stepConfirm = () => {
   emit('confirm');
 };
 </script>
+<style lang="less">
+.cant-see {
+  // opacity: 0;
+  // position: relative;
+  // z-index: -1;
+}
+</style>