回访打印

src/views/customer/component/longInsuranceDetail.vue

@@ -3,7 +3,7 @@
     <Modal v-model="isShow" width="700" title="长护险回访">
       <table id="print-table">
         <thead style="border: none">
-        <tr style="visibility: hidden;">
+          <tr style="visibility: hidden">
             <th class="border-none" style="width: calc(100% / 6)"></th>
             <th class="border-none" style="width: calc(100% / 6)"></th>
             <th class="border-none" style="width: calc(100% / 6)"></th>
@@ -13,26 +13,38 @@
           </tr>
           <tr>
             <th colspan="6">
-              <p style="font-size: 17px;letter-spacing: 1px;">四世同堂长护险居家服务满意度调查表</p>
+              <p style="font-size: 17px; letter-spacing: 1px">
+                四世同堂长护险居家服务满意度调查表
+              </p>
             </th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td colspan="2">
-              <span style="font-weight: 600;">服务对象名称：</span>{{ detail.customer ? detail.customer.name : "" }}
+              <span style="font-weight: 600">服务对象名称：</span
+              >{{ detail.customer ? detail.customer.name : "" }}
+            </td>
+            <td colspan="4">
+              <span style="font-weight: 600">服务人员：</span>
             </td>
-            <td colspan="4"><span style="font-weight: 600;">服务人员：</span></td>
           </tr>
           <tr>
             <td colspan="6">
-              <span style="font-weight: 600;">服务对象住址：</span>{{
+              <span style="font-weight: 600">服务对象住址：</span
-                detail.customer ? detail.customer.idcard_address : ""
+              >{{ detail.customer ? detail.customer.idcard_address : "" }}
-              }}
             </td>
           </tr>
           <tr>
-            <th rowspan="12" colspan="1" style="writing-mode: vertical-rl;text-align: center;letter-spacing: 2px;">
+            <th
+              rowspan="12"
+              colspan="1"
+              style="
+                writing-mode: vertical-rl;
+                text-align: center;
+                letter-spacing: 2px;
+              "
+            >
               调查内容记录
             </th>
             <td colspan="5">
@@ -65,36 +77,75 @@
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              4.护理工具携带：护理包（{{ isMark('护理包',detail.tools) }}） 服务计划表（{{ isMark('服务计划表',detail.tools) }}）
+              4.护理工具携带：护理包（{{ isMark("护理包", detail.tools) }}）
+              服务计划表（{{ isMark("服务计划表", detail.tools) }}）
             </td>
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              血压器（{{ isMark('血压器',detail.tools) }}） 理发器（{{ isMark('理发器',detail.tools) }}） 其他 <span style="border-bottom: 1px solid;">{{ otherVal(['护理包','服务计划表','血压器','理发器'],detail.tools) }}</span>
+              血压器（{{ isMark("血压器", detail.tools) }}） 理发器（{{
+                isMark("理发器", detail.tools)
+              }}） 其他
+              <span style="border-bottom: 1px solid">{{
+                otherVal(
+                  ["护理包", "服务计划表", "血压器", "理发器"],
+                  detail.tools
+                )
+              }}</span>
             </td>
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              5.工作服（{{ isMark('工作服',detail.accessory) }}） 工作证（{{ isMark('工作证',detail.accessory) }}）
+              5.工作服（{{ isMark("工作服", detail.accessory) }}） 工作证（{{
+                isMark("工作证", detail.accessory)
+              }}）
             </td>
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              6.服务内容：理发（{{ isMark('理发',detail.serve) }}） 整理（{{ isMark('整理',detail.serve) }}） 康复训练（{{ isMark('康复训练',detail.serve) }}）
+              6.服务内容：理发（{{ isMark("理发", detail.serve) }}） 整理（{{
+                isMark("整理", detail.serve)
+              }}） 康复训练（{{ isMark("康复训练", detail.serve) }}）
             </td>
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              洗澡（{{ isMark('洗澡',detail.serve) }}） 按摩（{{ isMark('按摩',detail.serve) }}） 个人卫生清洁（{{ isMark('个人卫生清洁',detail.serve) }}）
+              洗澡（{{ isMark("洗澡", detail.serve) }}） 按摩（{{
+                isMark("按摩", detail.serve)
+              }}） 个人卫生清洁（{{ isMark("个人卫生清洁", detail.serve) }}）
             </td>
           </tr>
           <tr>
             <td colspan="5" class="border-bottom-none">
-              协助指导（{{ isMark('协助指导',detail.serve) }}） 生活照料（{{ isMark('生活照料',detail.serve) }}） 其他 <span style="border-bottom: 1px solid;">{{ otherVal(['理发','整理','康复训练','洗澡','按摩','个人卫生清洁','协助指导','生活照料'],detail.serve) }}</span>
+              协助指导（{{ isMark("协助指导", detail.serve) }}） 生活照料（{{
+                isMark("生活照料", detail.serve)
+              }}） 其他
+              <span style="border-bottom: 1px solid">{{
+                otherVal(
+                  [
+                    "理发",
+                    "整理",
+                    "康复训练",
+                    "洗澡",
+                    "按摩",
+                    "个人卫生清洁",
+                    "协助指导",
+                    "生活照料",
+                  ],
+                  detail.serve
+                )
+              }}</span>
             </td>
           </tr>
           <tr>
-            <td colspan="5">7.其他需求：陪诊（{{ isMark('陪诊',detail.other) }}） 康养（{{ isMark('康养',detail.other) }}） 陪护（{{ isMark('陪护',detail.other) }}）其他 <span style="border-bottom: 1px solid;">{{ otherVal(['陪诊','康养','陪护'],detail.other) }}</span></td>
+            <td colspan="5">
+              7.其他需求：陪诊（{{ isMark("陪诊", detail.other) }}） 康养（{{
+                isMark("康养", detail.other)
+              }}） 陪护（{{ isMark("陪护", detail.other) }}）其他
+              <span style="border-bottom: 1px solid">{{
+                otherVal(["陪诊", "康养", "陪护"], detail.other)
+              }}</span>
+            </td>
           </tr>
           <tr>
             <td colspan="5">8.建议：{{ detail.tip }}</td>
@@ -102,37 +153,49 @@
           <tr>
             <th>服务对象/家属签字</th>
             <td colspan="5">
+              <div style="position: relative; height: 100px">
                 <img
                   style="
-                  height: 60px;
+                    width: 100px;
                     object-fit: contain;
-                  transform: rotate(270deg);
+                    transform: rotate(270deg) translateY(-50px);
+                    position: absolute;
+                    top: -50px;
+                    transform-origin: center;
+                    left: 50%;
                   "
                   :src="detail.sign_image ? detail.sign_image.url : ''"
                   alt=""
                 />
+              </div>
             </td>
           </tr>
           <tr>
             <th>调查人员签字</th>
             <td colspan="5">
+              <div style="position: relative; height: 100px">
                 <img
                   style="
-                  height: 60px;
+                    width: 100px;
                     object-fit: contain;
-                  transform: rotate(270deg);
+                    transform: rotate(270deg) translateY(-50px);
+                    position: absolute;
+                    top: -50px;
+                    transform-origin: center;
+                    left: 50%;
                   "
                   :src="
                     detail.admin_sign_image ? detail.admin_sign_image.url : ''
                   "
                   alt=""
                 />
+              </div>
             </td>
           </tr>
           <tr>
             <th>调查日期</th>
             <td colspan="5">
-              <div style="text-align: center;letter-spacing: 1px;">
+              <div style="text-align: center; letter-spacing: 1px">
                 {{ $moment(detail.created_at).format("YYYY年MM月DD日") }}
               </div>
             </td>
@@ -214,31 +277,33 @@ th {
       printWindow.document.write(table);
       printWindow.document.write("</body></html>");
       printWindow.document.close();
-      let imgEl = printWindow.document.querySelectorAll('img')
+      let imgEl = printWindow.document.querySelectorAll("img");
-      let temp = 0
+      let temp = 0;
-      imgEl.forEach(el => {
+      imgEl.forEach((el) => {
-        el.addEventListener('load',_ => {
+        el.addEventListener("load", (_) => {
           temp++;
           if (temp === imgEl.length) {
             printWindow.print();
           }
-        })
+        });
-      })
+      });
     },
   },
   computed: {
     isMark() {
       return function (markName, str) {
-        let arr = str?.split('|') || []
+        let arr = str?.split("|") || [];
-        return arr.indexOf(markName) !== -1 ? "✓" : ""
+        return arr.indexOf(markName) !== -1 ? "✓" : "";
-      }
+      };
     },
     otherVal() {
       return function (options, str) {
-        let arr = str?.split('|') || []
+        let arr = str?.split("|") || [];
-        return arr.filter(i => options.findIndex(j => j === i) === -1)[0] || " "
+        return (
-      }
+          arr.filter((i) => options.findIndex((j) => j === i) === -1)[0] || " "
-    }
+        );
+      };
+    },
   },
   watch: {
     isShow(newVal) {