From fb1e3cd84705b4e6d054c312611a589db223c6f0 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 3 Sep 2024 10:16:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E8=AE=BF=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/longInsuranceDetail.vue         | 199 +++++++++++++-----
 1 file changed, 144 insertions(+), 55 deletions(-)

diff --git a/src/views/customer/component/longInsuranceDetail.vue b/src/views/customer/component/longInsuranceDetail.vue
index be99a15..9ce6ac4 100644
--- a/src/views/customer/component/longInsuranceDetail.vue
+++ b/src/views/customer/component/longInsuranceDetail.vue
@@ -1,117 +1,187 @@
 <template>
   <div>
     <Modal v-model="isShow" width="700" title="长护险回访">
-      <button @click="exportPrint">123</button>
       <table id="print-table">
-        <thead style="border: none;">
+        <thead style="border: none">
+        <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>
+          <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>
+        </tr>
           <tr>
-            <th colspan="6">四世同堂长护险居家服务满意度调查表</th>
-<!--            <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>-->
-<!--            <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>-->
+            <th colspan="6">
+              <p style="font-size: 17px;letter-spacing: 1px;">四世同堂长护险居家服务满意度调查表</p>
+            </th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td colspan="2">服务对象名称：{{ detail.customer ? detail.customer.name : '' }}</td>
-            <td colspan="4">服务人员：</td>
+            <td colspan="2">
+              <span style="font-weight: 600;">服务对象名称：</span>{{ detail.customer ? detail.customer.name : "" }}
+            </td>
+            <td colspan="4"><span style="font-weight: 600;">服务人员：</span></td>
           </tr>
           <tr>
-            <td colspan="6">服务对象住址：{{ detail.customer ? detail.customer.idcard_address : '' }}</td>
+            <td colspan="6">
+              <span style="font-weight: 600;">服务对象住址：</span>{{
+                detail.customer ? detail.customer.idcard_address : ""
+              }}
+            </td>
           </tr>
           <tr>
-            <td rowspan="12" colspan="1" style="writing-mode: vertical-rl">调查内容记录</td>
-            <td colspan="5">1.服务满意度：90分以上（{{ detail.satisfy === 1 ? '✓' : '' }}） 80-90分（{{ detail.satisfy === 2 ? '✓' : '' }}） 80分以下（{{ detail.satisfy === 3 ? '✓' : '' }}）</td>
+            <th rowspan="12" colspan="1" style="writing-mode: vertical-rl;text-align: center;letter-spacing: 2px;">
+              调查内容记录
+            </th>
+            <td colspan="5">
+              1.服务满意度：90分以上（{{ detail.satisfy === 1 ? "✓" : "" }}）
+              80-90分（{{ detail.satisfy === 2 ? "✓" : "" }}） 80分以下（{{
+                detail.satisfy === 3 ? "✓" : ""
+              }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">护理员护理情况调查：护理中回访（{{ detail.nurse_investigate === 1 ? '✓' : '' }}） 日常回访（{{ detail.nurse_investigate === 2 ? '✓' : '' }}）</td>
+            <td colspan="5" class="border-bottom-none">
+              护理员护理情况调查：护理中回访（{{
+                detail.nurse_investigate === 1 ? "✓" : ""
+              }}） 日常回访（{{ detail.nurse_investigate === 2 ? "✓" : "" }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">2.在岗（{{ detail.is_work === 1 ? '✓' : '' }}） 不在岗（{{ detail.is_work === 0 ? '✓' : '' }}）</td>
+            <td colspan="5" class="border-bottom-none">
+              2.在岗（{{ detail.is_work === 1 ? "✓" : "" }}） 不在岗（{{
+                detail.is_work === 0 ? "✓" : ""
+              }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">3.按照排班时间上门服务：是（{{ detail.is_on_time === 1 ? '✓' : '' }}） 否（{{ detail.is_on_time === 0 ? '✓' : '' }}）</td>
+            <td colspan="5" class="border-bottom-none">
+              3.按照排班时间上门服务：是（{{
+                detail.is_on_time === 1 ? "✓" : ""
+              }}） 否（{{ detail.is_on_time === 0 ? "✓" : "" }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">4.护理工具携带：护理包（） 服务计划表（）</td>
+            <td colspan="5" class="border-bottom-none">
+              4.护理工具携带：护理包（{{ isMark('护理包',detail.tools) }}） 服务计划表（{{ isMark('服务计划表',detail.tools) }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">血压器（） 理发器（） 其他</td>
+            <td colspan="5" class="border-bottom-none">
+              血压器（{{ 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.工作服（） 工作证（）</td>
+            <td colspan="5" class="border-bottom-none">
+              5.工作服（{{ isMark('工作服',detail.accessory) }}） 工作证（{{ isMark('工作证',detail.accessory) }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">6.服务内容：理发（） 整理（） 康复训练（）</td>
+            <td colspan="5" class="border-bottom-none">
+              6.服务内容：理发（{{ isMark('理发',detail.serve) }}） 整理（{{ isMark('整理',detail.serve) }}） 康复训练（{{ isMark('康复训练',detail.serve) }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">洗澡（） 按摩（） 个人卫生清洁（）</td>
+            <td colspan="5" class="border-bottom-none">
+              洗澡（{{ isMark('洗澡',detail.serve) }}） 按摩（{{ isMark('按摩',detail.serve) }}） 个人卫生清洁（{{ isMark('个人卫生清洁',detail.serve) }}）
+            </td>
           </tr>
           <tr>
-            <td colspan="5" class="border-bottom-none">协助指导（） 生活照料（） 其他</td>
+            <td colspan="5" class="border-bottom-none">
+              协助指导（{{ isMark('协助指导',detail.serve) }}） 生活照料（{{ isMark('生活照料',detail.serve) }}） 其他 <span style="border-bottom: 1px solid;">{{ otherVal(['理发','整理','康复训练','洗澡','按摩','个人卫生清洁','协助指导','生活照料'],detail.serve) }}</span>
+            </td>
           </tr>
           <tr>
-            <td colspan="5">7.其他需求：陪诊（） 康养（） 陪护（）其他</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>
           </tr>
           <tr>
-            <td>服务对象/家属签字</td>
+            <th>服务对象/家属签字</th>
             <td colspan="5">
-              <img style="height: 60px;object-fit: contain;transform: rotate(270deg)" :src="detail.sign_image ? detail.sign_image.url : ''" alt="">
+              <img
+                style="
+                  height: 60px;
+                  object-fit: contain;
+                  transform: rotate(270deg);
+                "
+                :src="detail.sign_image ? detail.sign_image.url : ''"
+                alt=""
+              />
             </td>
           </tr>
           <tr>
-            <td>调查人员签字</td>
+            <th>调查人员签字</th>
             <td colspan="5">
-              <img style="height: 60px;object-fit: contain;transform: rotate(270deg)" :src="detail.admin_sign_image ? detail.admin_sign_image.url : ''" alt="">
+              <img
+                style="
+                  height: 60px;
+                  object-fit: contain;
+                  transform: rotate(270deg);
+                "
+                :src="
+                  detail.admin_sign_image ? detail.admin_sign_image.url : ''
+                "
+                alt=""
+              />
             </td>
           </tr>
           <tr>
-            <td>调查日期</td>
-            <td colspan="5">{{ $moment(detail.created_at).format('YYYY年MM月DD日') }}</td>
+            <th>调查日期</th>
+            <td colspan="5">
+              <div style="text-align: center;letter-spacing: 1px;">
+                {{ $moment(detail.created_at).format("YYYY年MM月DD日") }}
+              </div>
+            </td>
           </tr>
         </tbody>
       </table>
+
+      <template #footer>
+        <div>
+          <Button type="text" @click="hide">取消</Button>
+          <Button type="primary" @click="exportPrint">打印</Button>
+        </div>
+      </template>
     </Modal>
   </div>
 </template>
 
 <script>
-import { getForm } from "@/api/longInsurance"
+import { getForm } from "@/api/longInsurance";
 export default {
   data() {
     return {
       isShow: false,
       id: "",
-      detail: {}
-    }
+      detail: {},
+    };
   },
   methods: {
     show() {
-      this.isShow = true
+      this.isShow = true;
     },
     hide() {
-      this.isShow = false
+      this.isShow = false;
     },
     setId(id) {
-      this.id = id
+      this.id = id;
     },
     async getDetail() {
-      const res = await getForm(this.id)
-      console.log(res)
-      this.detail = res
+      const res = await getForm(this.id);
+      console.log(res);
+      this.detail = res;
     },
 
     exportPrint() {
-      let table = document.getElementById('print-table').outerHTML;
-      let printWindow = window.open('', '_blank');
-      printWindow.document.write('<html><head><title>打印表格</title>');
-      printWindow.document.write(`</head><style>
+      let table = document.getElementById("print-table").outerHTML;
+      let printWindow = window.open("", "_blank");
+      printWindow.document.write("<html><head><title>打印表格</title>");
+      printWindow.document.write(`
+</head><style>
 table {
   width: 100%;
   border-collapse: collapse;
@@ -142,34 +212,53 @@ th {
   border-bottom: none;
 }</style><body>`);
       printWindow.document.write(table);
-      printWindow.document.write('</body></html>');
+      printWindow.document.write("</body></html>");
       printWindow.document.close();
-      setTimeout(() => {
-        printWindow.print();
-      },1000)
+      let imgEl = printWindow.document.querySelectorAll('img')
+      let temp = 0
+      imgEl.forEach(el => {
+        el.addEventListener('load',_ => {
+          temp++;
+          if(temp === imgEl.length) {
+            printWindow.print();
+          }
+        })
+      })
+    },
+  },
+  computed: {
+    isMark() {
+      return function(markName,str) {
+        let arr = str?.split('|') || []
+        return arr.indexOf(markName) !== -1 ? "✓" : ""
+      }
+    },
+    otherVal() {
+      return function (options, str) {
+        let arr = str?.split('|') || []
+        return arr.filter(i => options.findIndex(j => j === i) === -1)[0] || " "
+      }
     }
   },
-  computed: {},
   watch: {
     isShow(newVal) {
       if (newVal) {
-
-        this.getDetail()
+        this.getDetail();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px 0;
 }
 
-th, td {
+th,
+td {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: left;