测试完成

WXL (wul)

5 天以前 5319d5b95497b5b546947ac340c14c71e5b54ca6

 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>