fix: change canteenEvaluation appraisePlan

Makefile

@@ -12,7 +12,7 @@ build:
 
 commit:
 	git add . && \
-	git commit --no-verify -m "fix: change teacher listen"
+	git commit --no-verify -m "fix: change canteenEvaluation appraisePlan"
 
 checkPre:
 	git checkout pre

src/views/canteenEvaluation/plan/components/review.vue

@@ -15,6 +15,8 @@
   import FormDetail from './detail.vue';
   import { downloadFileByBlob } from '/@/utils/file/download';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import printJS from 'print-js';
+  import html2canvas from 'html2canvas';
 
   const TabsPane = Tabs.TabPane;
   const activeKey = ref('1');
@@ -149,6 +151,34 @@
       setModalProps({ loading: false });
     }
   };
+
+  const handlePrint = async () => {
+    const element: HTMLElement = window.document.querySelector(`#print-style1-box`)!;
+    // console.log('handlePrint', element);
+    const canvas = await html2canvas(element, {
+      useCORS: true,
+      allowTaint: false,
+      // height: element.outerHeight,
+      // width: element.outerWidth,
+      windowWidth: document.body.scrollWidth,
+      windowHeight: document.body.scrollHeight,
+    });
+    const url = canvas.toDataURL();
+    printJS({
+      printable: url,
+      type: 'image',
+      documentTitle: '打印',
+      style: `@media print { body{margin:0 24px;} }`,
+    });
+    // printJS({
+    //   printable: `print-style1-box`,
+    //   type: 'html',
+    //   documentTitle: '打印',
+    //   header: '评价结果分析',
+    //   headerStyle: 'text-align: center',
+    //   targetStyles: ['*'],
+    // });
+  };
 </script>
 
 <template>
@@ -219,39 +249,49 @@
       </TabsPane>
 
       <TabsPane tab="评价结果分析" key="2">
-        <div style="width: 100%; display: flex; flex-direction: column; align-items: center">
+        <div style="width: 60%; position: relative; margin: 0 auto">
+          <div style="position: absolute; top: 0; right: 0; z-index: 1">
+            <a-button style="color: #606266; font-size: 13px" @click="handlePrint"> 打印 </a-button>
+          </div>
           <div
-            style="padding: 12px; width: 60%"
-            v-for="(item, index) in questionInfo.children"
-            :key="index"
+            style="
+              /* padding: 12px; */
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              position: relative;
+            "
+            id="print-style1-box"
           >
-            <span style="font-size: 18px; font-weight: bold; margin-bottom: 12px">
-              {{ index + 1 }}、{{ item.name }}</span
-            >
-            <div v-for="(items, indexs) in item.children" :key="items.id">
-              <Card style="margin-top: 12px" :title="`${index + 1}.${indexs + 1} ${items.name}`">
-                <div>
-                  <span>{{ questionMap[items.type] }}</span>
-                </div>
+            <div style="width: 100%" v-for="(item, index) in questionInfo.children" :key="index">
+              <span style="font-size: 18px; font-weight: bold; margin-bottom: 12px">
+                {{ index + 1 }}、{{ item.name }}</span
+              >
+              <div v-for="(items, indexs) in item.children" :key="items.id">
+                <Card style="margin-top: 12px" :title="`${index + 1}.${indexs + 1} ${items.name}`">
+                  <div>
+                    <span>{{ questionMap[items.type] }}</span>
+                  </div>
 
-                <div>
-                  <Table
-                    bordered
-                    :pagination="false"
-                    :data-source="getData(items)"
-                    :columns="infoColunms"
-                  >
-                    <template #process="{ record }">
-                      <Progress
-                        showInfo
-                        size="small"
-                        status="active"
-                        :percent="record.process || 0"
-                      />
-                    </template>
-                  </Table>
-                </div>
-              </Card>
+                  <div>
+                    <Table
+                      bordered
+                      :pagination="false"
+                      :data-source="getData(items)"
+                      :columns="infoColunms"
+                    >
+                      <template #process="{ record }">
+                        <Progress
+                          showInfo
+                          size="small"
+                          status="active"
+                          :percent="record.process || 0"
+                        />
+                      </template>
+                    </Table>
+                  </div>
+                </Card>
+              </div>
             </div>
           </div>
         </div>