From 5319d5b95497b5b546947ac340c14c71e5b54ca6 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期三, 10 十二月 2025 09:57:58 +0800
Subject: [PATCH] 测试完成
---
src/views/followvisit/discharge/index.vue | 290 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 264 insertions(+), 26 deletions(-)
diff --git a/src/views/followvisit/discharge/index.vue b/src/views/followvisit/discharge/index.vue
index e2b7bf9..30ff0d7 100644
--- a/src/views/followvisit/discharge/index.vue
+++ b/src/views/followvisit/discharge/index.vue
@@ -121,13 +121,13 @@
</el-select>
</el-form-item>
<el-form-item label="鎮ｈ�呮爣绛�" prop="tagname">
- <el-input
- v-model="topqueryParams.tagname"
- placeholder="杈撳叆杩涜妯＄硦鏌ヨ"
- maxlength="30"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
+ <el-input
+ v-model="topqueryParams.tagname"
+ placeholder="杈撳叆杩涜妯＄硦鏌ヨ"
+ maxlength="30"
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
<el-form-item>
<el-button
@@ -303,13 +303,13 @@
</template>
</el-table-column>
<el-table-column
- label="鏍囩"
- align="center"
- key="tagname"
- prop="tagname"
- show-overflow-tooltip
- width="180"
- />
+ label="鏍囩"
+ align="center"
+ key="tagname"
+ prop="tagname"
+ show-overflow-tooltip
+ width="180"
+ />
<el-table-column
label="闅忚浜哄憳"
align="center"
@@ -532,6 +532,11 @@
><i class="el-icon-s-order"></i>鏌ョ湅璇︽儏</span
></el-button
>
+ <el-button size="medium" type="text" @click="outPathQr(scope.row)"
+ ><span class="button-qr"
+ ><i class="el-icon-view"></i>浜岀淮鐮�</span
+ ></el-button
+ >
</template>
</el-table-column>
</el-table>
@@ -673,6 +678,55 @@
>
</span>
</el-dialog>
+ <!-- 浜岀淮鐮� -->
+ <el-dialog
+ :title="qrDialog.title"
+ :visible.sync="qrDialog.visible"
+ width="400px"
+ center
+ @close="handleQrClose"
+ >
+ <div class="qrcode-container">
+ <!-- 鍔犺浇鐘舵�� -->
+ <div v-if="qrLoading" class="qrcode-loading">
+ <i class="el-icon-loading"></i>
+ <span>浜岀淮鐮佺敓鎴愪腑...</span>
+ </div>
+
+ <!-- 鏈夋湁鏁堟暟鎹椂鏄剧ず浜岀淮鐮� -->
+ <div v-else-if="safeQrUrl" class="qrcode-content">
+ <vue-qr
+ :text="safeQrUrl"
+ :size="280"
+ :margin="10"
+ :logoSrc="qrDialog.logo"
+ :logoScale="0.2"
+ colorDark="#191a23"
+ colorLight="#ffffff"
+ ></vue-qr>
+
+ <div class="qrcode-info">
+ <p><strong>鎮ｈ�呭鍚嶏細</strong>{{ qrDialog.patientName }}</p>
+ <p><strong>浠诲姟鍚嶇О锛�</strong>{{ qrDialog.taskName }}</p>
+ </div>
+
+ <div class="qrcode-actions">
+ <el-button type="primary" size="small" @click="downloadQrCode">
+ <i class="el-icon-download"></i> 涓嬭浇浜岀淮鐮�
+ </el-button>
+ <el-button type="success" size="small" @click="copyQrUrl">
+ <i class="el-icon-document-copy"></i> 澶嶅埗閾炬帴
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 鏃犳暟鎹彁绀� -->
+ <div v-else class="qrcode-empty">
+ <i class="el-icon-warning"></i>
+ <span>鏆傛棤鏈夋晥鐨勪簩缁寸爜閾炬帴</span>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -690,11 +744,12 @@
import Treeselect from "@riophae/vue-treeselect";
import store from "@/store";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
+import VueQr from "vue-qr";
+import Clipboard from "clipboard";
export default {
name: "Discharge",
dicts: ["sys_normal_disable", "sys_user_sex", "sys_yujing", "sys_suggest"],
- components: { Treeselect },
+ components: { Treeselect, VueQr },
data() {
return {
// 閬僵灞�
@@ -717,6 +772,7 @@
addalteropen: false,
// 淇敼鍙戦�佹椂闂村璇濇
modificationVisible: false,
+ resetQrurl: "",
// 閮ㄩ棬鍚嶇О
deptName: undefined,
// 榛樿瀵嗙爜
@@ -746,7 +802,15 @@
},
value: [],
list: [],
-
+ qrDialog: {
+ visible: false,
+ title: "闅忚浜岀淮鐮�",
+ url: "",
+ patientName: "",
+ taskName: "",
+ logo: require("@/assets/logo/logoxh.png"), // 鍙�夌殑Logo锛岃纭繚璺緞姝ｇ‘
+ },
+ qrLoading: false,
sourcetype: [
{
value: 1,
@@ -888,8 +952,13 @@
});
if (store.getters.belongWards.length) {
- this.topqueryParams.leavehospitaldistrictcodes=[store.getters.belongWards[0].districtCode]
- this.topqueryParams.scopetype=[2,store.getters.belongWards[0].districtCode]
+ this.topqueryParams.leavehospitaldistrictcodes = [
+ store.getters.belongWards[0].districtCode,
+ ];
+ this.topqueryParams.scopetype = [
+ 2,
+ store.getters.belongWards[0].districtCode,
+ ];
}
if (this.errtype) {
this.toleadExport(2);
@@ -902,6 +971,13 @@
},
activated() {
this.getList(1);
+ },
+ computed: {
+ safeQrUrl() {
+ return this.qrDialog.url && this.qrDialog.url !== 'undefined'
+ ? this.qrDialog.url.toString()
+ : ''
+ }
},
methods: {
/** 鏌ヨ闂ㄨ瘖闅忚鏈嶅姟鍒楄〃 */
@@ -987,7 +1063,8 @@
let obj = {
pageNum: 1,
pageSize: 10,
- leavehospitaldistrictcodes: this.topqueryParams.leavehospitaldistrictcodes,
+ leavehospitaldistrictcodes:
+ this.topqueryParams.leavehospitaldistrictcodes,
sendstates: [2, 3],
leaveldeptcodes: this.topqueryParams.leaveldeptcodes,
};
@@ -1293,6 +1370,122 @@
}
this.handleQuery();
},
+ // 鏄剧ず浜岀淮鐮佸脊妗�
+ outPathQr(row) {
+ console.log(row);
+
+ if (!row || !row.outPath || row.outPath === 'undefined') {
+ this.$message.warning('璇ヨ褰曟殏鏃犳湁鏁堢殑浜岀淮鐮侀摼鎺�')
+ return
+ }
+
+ this.qrLoading = true
+ this.qrDialog = {
+ visible: true,
+ title: `${row.sendname || '鎮ｈ��'}鐨勯殢璁夸簩缁寸爜`,
+ url: row.outPath,
+ patientName: row.sendname || '鏈煡',
+ taskName: row.taskName || '鏈煡浠诲姟',
+ logo: require("@/assets/logo/logoxh.png"),
+ };
+ // 纭繚缁勪欢鏈夎冻澶熸椂闂存覆鏌�
+ this.$nextTick(() => {
+ this.qrLoading = false
+ })
+ },
+
+ // 浜岀淮鐮佺敓鎴愬洖璋�
+ qrCodeCallback(dataUrl, id) {
+ console.log("浜岀淮鐮佺敓鎴愭垚鍔�:", id);
+ // 杩欓噷鍙互淇濆瓨dataUrl鐢ㄤ簬鍚庣画鎿嶄綔
+ },
+
+ // 涓嬭浇浜岀淮鐮�
+ downloadQrCode() {
+ try {
+ const qrComponent = this.$refs.vueQr;
+ // 鑾峰彇浜岀淮鐮佸浘鐗囩殑URL
+ const qrImageUrl = qrComponent.$el.src;
+
+ const downloadLink = document.createElement("a");
+ downloadLink.href = qrImageUrl;
+ downloadLink.download = `闅忚浜岀淮鐮乢${
+ this.qrDialog.patientName
+ }_${new Date().getTime()}.png`;
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+
+ this.$message.success("浜岀淮鐮佷笅杞芥垚鍔�");
+ } catch (error) {
+ console.error("涓嬭浇澶辫触:", error);
+ this.$message.error("涓嬭浇澶辫触锛岃閲嶈瘯");
+ }
+ },
+
+ // 澶嶅埗閾炬帴
+ copyQrUrl() {
+ if (!this.qrDialog.url) {
+ this.$message.warning("鏃犳湁鏁堥摼鎺ュ彲澶嶅埗");
+ return;
+ }
+
+ // 鏂规硶1: 浣跨敤clipboard搴擄紙濡傛灉瀹夎浜嗭級
+ // this.copyWithClipboard()
+
+ // 鏂规硶2: 浣跨敤鐜颁唬娴忚鍣ㄧ殑Clipboard API
+ this.copyWithModernAPI();
+ },
+
+ // 浣跨敤鐜颁唬Clipboard API澶嶅埗
+ async copyWithModernAPI() {
+ try {
+ await navigator.clipboard.writeText(this.qrDialog.url);
+ this.$message.success("閾炬帴宸插鍒跺埌鍓创鏉�");
+ } catch (error) {
+ // 闄嶇骇鏂规
+ this.copyWithFallback();
+ }
+ },
+
+ // 鍏煎鎬ч檷绾ф柟妗�
+ copyWithFallback() {
+ const textArea = document.createElement("textarea");
+ textArea.value = this.qrDialog.url;
+ textArea.style.position = "fixed";
+ textArea.style.left = "-999999px";
+ textArea.style.top = "-999999px";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ document.execCommand("copy");
+ this.$message.success("閾炬帴宸插鍒跺埌鍓创鏉�");
+ } catch (error) {
+ this.$message.warning("娴忚鍣ㄤ笉鏀寔鑷姩澶嶅埗锛岃鎵嬪姩澶嶅埗閾炬帴");
+ } finally {
+ document.body.removeChild(textArea);
+ }
+ },
+
+ // 鍏抽棴浜岀淮鐮佸脊妗�
+ handleQrClose() {
+ this.qrDialog.visible = false;
+ this.qrLoading = false
+
+ // 閲嶇疆鏁版嵁
+ setTimeout(() => {
+ this.qrDialog = {
+ visible: false,
+ title: "闅忚浜岀淮鐮�",
+ url: "",
+ patientName: "",
+ taskName: "",
+ logo: require("@/assets/logo/logoxh.png"),
+ };
+ }, 300);
+ },
/** 瀵煎嚭鎸夐挳鎿嶄綔 */
handleExport() {
this.topqueryParams.pageNum = null;
@@ -1457,6 +1650,12 @@
border-radius: 1px;
color: #ffffff;
}
+.button-qr {
+ background: #6c14a2;
+ padding: 5px;
+ border-radius: 1px;
+ color: #ffffff;
+}
::v-deep.el-radio-group {
span {
@@ -1464,10 +1663,49 @@
}
}
-// 閫夐」瀛椾綋鏀惧ぇ
-// ::v-deep.el-checkbox-group {
-// span {
-// font-size: 24px;
-// }
-// }
+/* 浜岀淮鐮佸脊妗嗘牱寮� */
+.qrcode-container {
+ text-align: center;
+ padding: 10px;
+}
+
+.qrcode-wrapper {
+ margin: 0 auto 20px;
+ padding: 15px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ display: inline-block;
+}
+
+.qrcode-info {
+ margin: 15px 0;
+ padding: 12px;
+ background: #f0f2f5;
+ border-radius: 6px;
+ text-align: left;
+}
+
+.qrcode-info p {
+ margin: 8px 0;
+ font-size: 14px;
+}
+
+.qrcode-actions {
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+ margin-top: 20px;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 480px) {
+ .qrcode-actions {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .qrcode-actions .el-button {
+ width: 200px;
+ }
+}
</style>
--
Gitblit v1.9.3