1

src/components/common/screen-img-result-dialog/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    header="流程缩略图"
+    :width="1200"
+    :closeOnOverlayClick="false"
+    attach="body"
+    @close="emit('update:visible', false)"
+  >
+    <t-table
+      ref="tableRef"
+      size="small"
+      row-key="key"
+      :columns="screenImgTableColumns"
+      :data="tableData"
+      bordered
+    >
+      <template
+        v-for="(field, index) in screenImgTableColumns"
+        #[field.colKey]="{ col, row }"
+      >
+        <span v-if="['sopNo', 'courseName'].includes(field.colKey)">{{
+          row[field.colKey]
+        }}</span>
+        <image-view
+          v-else
+          :width="80"
+          :height="80"
+          :images="[row[field.colKey]]"
+        ></image-view>
+      </template>
+    </t-table>
+  </my-dialog>
+</template>
+<script setup name="ScreenImgResultDialog">
+import { ref, watch, computed } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+
+const props = defineProps({
+  visible: Boolean,
+  screenImgTableData: {
+    type: Array,
+    default: () => [],
+  },
+  sopType: String,
+});
+const emit = defineEmits(['update:visible']);
+const tableData = computed(() => {
+  return props.screenImgTableData.map((row, index) => {
+    console.log('row', row);
+    let obj = {};
+    row.screenImgArr.forEach((v, i) => {
+      obj['step' + (i + 1)] = v.url;
+    });
+    console.log('obj', obj);
+    obj.sopNo = row.sopNo;
+    obj.courseName = row.courseName;
+    return obj;
+  });
+});
+const screenImgTableColumns = computed(() => {
+  let baseArr = [
+    { colKey: 'sopNo', title: 'SOP流水号', width: 180 },
+    { colKey: 'courseName', title: '科目名称' },
+  ];
+  let pushArr =
+    props.sopType === 'OFFICE_SOP_FLOW'
+      ? [
+          { colKey: 'step1', title: '项目确认', width: 120, align: 'center' },
+          { colKey: 'step2', title: '扫描准备', width: 120, align: 'center' },
+          {
+            colKey: 'step3',
+            title: '扫描收尾检查',
+            width: 120,
+            align: 'center',
+          },
+          {
+            colKey: 'step4',
+            title: '阅卷参数检查',
+            width: 120,
+            align: 'center',
+          },
+          {
+            colKey: 'step5',
+            title: '阅卷收尾检查',
+            width: 120,
+            align: 'center',
+          },
+        ]
+      : props.sopType === 'CLOUD_MARK_SOP_FLOW'
+      ? [
+          { colKey: 'step1', title: '项目初审', width: 120, align: 'center' },
+          {
+            colKey: 'step2',
+            title: '项目关键信息',
+            width: 120,
+            align: 'center',
+          },
+          { colKey: 'step3', title: '内审', width: 120, align: 'center' },
+          {
+            colKey: 'step4',
+            title: '现场测试环境',
+            width: 120,
+            align: 'center',
+          },
+          { colKey: 'step5', title: '扫描准备', width: 120, align: 'center' },
+          { colKey: 'step6', title: '校验收尾', width: 120, align: 'center' },
+          { colKey: 'step7', title: '评卷准备', width: 120, align: 'center' },
+          { colKey: 'step8', title: '成绩复核', width: 120, align: 'center' },
+          { colKey: 'step9', title: '评卷收尾', width: 120, align: 'center' },
+          {
+            colKey: 'step10',
+            title: '设备入库登记',
+            width: 120,
+            align: 'center',
+          },
+        ]
+      : [];
+  return [...baseArr, ...pushArr];
+});
+</script>

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

@@ -74,12 +74,13 @@
       </template>
       <template #buttons>
         <t-button theme="primary" @click="search">搜索</t-button>
-        <!-- <t-button
+        <t-button
           theme="primary"
           @click="fastViewAllData"
           style="margin-left: 10px"
+          :loading="screenImgsLoading"
           >便捷查阅</t-button
-        > -->
+        >
       </template>
     </SearchForm>
 
@@ -218,9 +219,11 @@
     <template v-if="perm.LINK_Edit || perm.LINK_AddSop || perm.LINK_Fill">
       <sop-step-dialog
         v-model:visible="showSopStepDialog2getImg"
-        :sop="tableData[0]"
+        v-for="(item, index) in tableData"
+        :sop="tableData[index]"
         type="view"
         :screenshot="screenshot"
+        @getScreenImgs="(...args) => insertScreenImgs(...args, index)"
       ></sop-step-dialog>
     </template>
 
@@ -256,11 +259,16 @@
       @success="search"
       :fromSop="true"
     ></AllocationDialog>
+    <ScreenImgResultDialog
+      v-model:visible="showScreenImgResultDialog"
+      :screenImgTableData="screenImgTableData"
+      sopType="OFFICE_SOP_FLOW"
+    ></ScreenImgResultDialog>
   </div>
 </template>
 
 <script setup name="OfficeSop">
-import { ref, reactive, computed, watch, onMounted } from 'vue';
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue';
 import useFetchTable from '@/hooks/useFetchTable';
 import { sopListApi, sopBatchCancelApi, getSopFastOptionsApi } from '@/api/sop';
 import { timestampFilter } from '@/utils/filter';
@@ -282,8 +290,32 @@ import { omit } from 'lodash-es';
 import bus from '@/utils/bus';
 import { metadataListApi } from '@/api/sop';
 import AllocationDialog from '../../../service-unit/dispatch/dispatch-manage/allocation-dialog.vue';
+import ScreenImgResultDialog from '@/components/common/screen-img-result-dialog/index.vue';
 
 const screenshot = ref(false);
+const screenImgTableData = ref([]);
+const screenImgsLoading = ref(false);
+const showScreenImgResultDialog = ref(false);
+const insertScreenImgs = (screenImgArr, index) => {
+  screenImgTableData.value[index] = {
+    sopNo: tableData.value[index].sopNo,
+    courseName: tableData.value[index].courseName,
+    screenImgArr: screenImgArr,
+  };
+  if (
+    screenImgTableData.value.filter(Boolean).length === tableData.value.length
+  ) {
+    screenImgsLoading.value = false;
+    showScreenImgResultDialog.value = true;
+  }
+};
+const fastViewAllData = () => {
+  screenImgsLoading.value = true;
+
+  screenImgTableData.value = [];
+  screenshot.value = true;
+  showSopStepDialog2getImg.value = true;
+};
 
 const showAllocationDialog = ref(false);
 const allocation = (row) => {
@@ -789,9 +821,4 @@ 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

@@ -263,7 +263,7 @@ const props = defineProps({
     default: false,
   },
 });
-const emit = defineEmits(['confirm']);
+const emit = defineEmits(['confirm', 'getScreenImgs']);
 
 const IS_VIEW_MODE = computed(() => {
   return props.type === 'view';
@@ -434,21 +434,20 @@ const makeDomImg = () => {
     });
   });
 };
-
 const loopGetScreenImg = async () => {
-  let imgUrlArr = [];
+  let screenImgArr = [];
   for (let i = 0; i < allSteps.value.length; i++) {
     let item = allSteps.value[i];
     switchStep(item);
     await new Promise((rs) => {
       setTimeout(() => {
         rs();
-      }, 500);
+      }, 10);
     });
     let url = await makeDomImg();
-    imgUrlArr.push(url);
+    screenImgArr.push({ url, taskName: item.taskName });
   }
-  console.log('imgUrlArr', imgUrlArr);
+  emit('getScreenImgs', screenImgArr);
 };
 
 const initFill = async () => {
@@ -465,7 +464,7 @@ const initFill = async () => {
       v.writable = false;
     });
   });
-  if (res.currFlowTaskResult && !props.screenshot) {
+  if (res.currFlowTaskResult) {
     res.currFlowTaskResult.formProperty =
       res.currFlowTaskResult.formProperty.map((item) => {
         //设备出库时间和设备入库时间，赋予默认值为当前时间

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

@@ -17,6 +17,7 @@
       :sop="sop"
       @confirm="stepConfirm"
       :screenshot="screenshot"
+      @getScreenImgs="getScreenImgs"
     ></sop-step>
   </my-drawer>
 </template>
@@ -25,7 +26,10 @@
 import { computed } from 'vue';
 import SopStep from './index.vue';
 
-const emit = defineEmits(['update:visible', 'confirm']);
+const emit = defineEmits(['update:visible', 'confirm', 'getScreenImgs']);
+const getScreenImgs = (screenImgArr) => {
+  emit('getScreenImgs', screenImgArr);
+};
 const props = defineProps({
   visible: Boolean,
   type: {
@@ -58,8 +62,8 @@ const stepConfirm = () => {
 </script>
 <style lang="less">
 .cant-see {
-  // opacity: 0;
-  // position: relative;
-  // z-index: -1;
+  opacity: 0;
+  position: relative;
+  z-index: -1;
 }
 </style>

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

@@ -74,6 +74,13 @@
       </template>
       <template #buttons>
         <t-button theme="primary" @click="search">搜索</t-button>
+        <t-button
+          theme="primary"
+          @click="fastViewAllData"
+          style="margin-left: 10px"
+          :loading="screenImgsLoading"
+          >便捷查阅</t-button
+        >
       </template>
     </SearchForm>
 
@@ -205,6 +212,16 @@
       :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"
+        v-for="(item, index) in tableData"
+        :sop="tableData[index]"
+        type="view"
+        :screenshot="screenshot"
+        @getScreenImgs="(...args) => insertScreenImgs(...args, index)"
+      ></sop-step-dialog>
+    </template>
     <!-- QualityIssueDialog -->
     <quality-issue-dialog
       v-if="perm.LINK_ProblemSubmit"
@@ -237,6 +254,11 @@
       @success="search"
       :fromSop="true"
     ></AllocationDialog>
+    <ScreenImgResultDialog
+      v-model:visible="showScreenImgResultDialog"
+      :screenImgTableData="screenImgTableData"
+      sopType="CLOUD_MARK_SOP_FLOW"
+    ></ScreenImgResultDialog>
   </div>
 </template>
 
@@ -263,6 +285,34 @@ import { omit } from 'lodash-es';
 import bus from '@/utils/bus';
 import { metadataListApi } from '@/api/sop';
 import AllocationDialog from '../../../service-unit/dispatch/dispatch-manage/allocation-dialog.vue';
+import ScreenImgResultDialog from '@/components/common/screen-img-result-dialog/index.vue';
+
+const screenshot = ref(false);
+const screenImgTableData = ref([]);
+const screenImgsLoading = ref(false);
+const showScreenImgResultDialog = ref(false);
+const insertScreenImgs = (screenImgArr, index) => {
+  screenImgTableData.value[index] = {
+    sopNo: tableData.value[index].sopNo,
+    courseName: tableData.value[index].courseName,
+    screenImgArr: screenImgArr,
+  };
+  console.log('screenImgTableData', screenImgTableData.value);
+  if (
+    screenImgTableData.value.filter(Boolean).length === tableData.value.length
+  ) {
+    screenImgsLoading.value = false;
+    showScreenImgResultDialog.value = true;
+  }
+};
+const showSopStepDialog2getImg = ref(false);
+const fastViewAllData = () => {
+  screenImgsLoading.value = true;
+
+  screenImgTableData.value = [];
+  screenshot.value = true;
+  showSopStepDialog2getImg.value = true;
+};
 
 const showAllocationDialog = ref(false);
 const allocation = (row) => {