复制

src/views/finance_manage/InvoiceManager.vue

@@ -175,34 +175,62 @@
       </div>
       <div class="item-info">
         <label>抬头名称：</label>
-        <b>{{ ktjeInfo.buyer_info_mc }}</b>
+        <b id="info-mc">{{ ktjeInfo.buyer_info_mc }}</b>
+        <svg-icon
+          icon-class="copy"
+          class="copy"
+          @click="CopyToClipboard('info-mc')"
+        ></svg-icon>
       </div>
       <template v-if="ktjeInfo.invoice_object === 1">
         <div class="item-info">
           <label>单位税号：</label>
-          <b>{{ ktjeInfo.buyer_info_sh }}</b>
+          <b id="info-sh">{{ ktjeInfo.buyer_info_sh }}</b>
+          <svg-icon
+            icon-class="copy"
+            class="copy"
+            @click="CopyToClipboard('info-sh')"
+          ></svg-icon>
         </div>
         <div class="item-info">
           <label>注册地址：</label>
-          <b>{{ ktjeInfo.buyer_info_dz }}</b>
+          <b id="info-dz">{{ ktjeInfo.buyer_info_dz }}</b>
+          <svg-icon
+            v-if="ktjeInfo.buyer_info_dz"
+            icon-class="copy"
+            class="copy"
+            @click="CopyToClipboard('info-dz')"
+          ></svg-icon>
         </div>
         <div class="item-info">
           <label>注册电话：</label>
-          <b>{{ ktjeInfo.buyer_info_dh }}</b>
+          <b id="info-dh">{{ ktjeInfo.buyer_info_dh }}</b>
+          <svg-icon
+            v-if="ktjeInfo.buyer_info_dh"
+            icon-class="copy"
+            class="copy"
+            @click="CopyToClipboard('info-dh')"
+          ></svg-icon>
         </div>
         <div class="item-info">
           <label>开户银行：</label>
-          <b>{{ ktjeInfo.buyer_info_khh }}</b>
+          <b id="info-khh">{{ ktjeInfo.buyer_info_khh }}</b>
+          <svg-icon
+            v-if="ktjeInfo.buyer_info_khh"
+            icon-class="copy"
+            class="copy"
+            @click="CopyToClipboard('info-khh')"
+          ></svg-icon>
         </div>
         <div class="item-info">
           <label>银行账号：</label>
-          <b>{{ ktjeInfo.buyer_info_zh }}</b>
-        </div>
-      </template>
-      <template v-else>
-        <div class="item-info">
-          <label>身份证号：</label>
-          <b>{{ ktjeInfo.buyer_info_sfzh }}</b>
+          <b id="info-zh">{{ ktjeInfo.buyer_info_zh }}</b>
+          <svg-icon
+            v-if="ktjeInfo.buyer_info_zh"
+            icon-class="copy"
+            class="copy"
+            @click="CopyToClipboard('info-zh')"
+          ></svg-icon>
         </div>
       </template>
 
@@ -588,6 +616,29 @@ export default {
         this.$message.warning(response.msg);
       }
     },
+    CopyToClipboard(element) {
+      var doc = document,
+        text = doc.getElementById(element),
+        range,
+        selection;
+      if (doc.body.createTextRange) {
+        range = doc.body.createTextRange();
+        range.moveToElementText(text);
+        range.select();
+      } else if (window.getSelection) {
+        selection = window.getSelection();
+        range = doc.createRange();
+        range.selectNodeContents(text);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("copy");
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+      window.getSelection().removeAllRanges();
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -642,11 +693,15 @@ export default {
   display: flex;
   width: 100%;
   margin: 10px 0;
+  align-items: center;
   label {
     width: 90px;
     text-align: right;
     flex-shrink: 0;
   }
+  .copy {
+    margin-left: 5px;
+  }
 }
 .invoice-dialog {
   h5 {