init

src/components/qr_code/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tc mt-20 mb-20">
-    <img :src="src" alt="" />
+    <img :src="src" alt="" width="200" height="200" />
   </div>
 </template>
 

src/views/enterprise_management/information/components/print.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-dialog v-model="visible" title="查看二维码" width="600px">
+    <div id="printContainer" style="border: 1px dashed #ccc">
+      <div class="tc mt-20">
+        <h1>{{ info.CORP_NAME }}</h1>
+      </div>
+      <layout-qr-code :src="info.CORPINFO_ID" />
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+      <el-button v-print="'#printContainer'" type="primary">打 印</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+import LayoutQrCode from "@/components/qr_code/index.vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const visible = useVModel(props, "visible", emits);
+</script>
+
+<style scoped lang="scss"></style>

src/views/enterprise_management/information/info.vue

@@ -191,26 +191,9 @@
       >
         修改
       </el-button>
-      <el-button @click="fnQrCode">二维码</el-button>
+      <el-button @click="data.qrCodeDialogVisible = true">二维码</el-button>
     </div>
-    <el-dialog
+    <print :info="data.info" v-model:visible="data.qrCodeDialogVisible" />
-      v-model="data.qrCodeDialog.visible"
-      title="查看二维码"
-      width="600px"
-    >
-      <div id="printContainer" style="border: 1px dashed #ccc">
-        <div class="tc mt-20">
-          <h1>{{ data.info.CORP_NAME }}</h1>
-        </div>
-        <div class="tc mt-20 mb-20">
-          <img :src="data.qrCodeDialog.src" alt="" />
-        </div>
-      </div>
-      <template #footer>
-        <el-button @click="fnQrCodeDialogChangeShow">关 闭</el-button>
-        <el-button v-print="'#printContainer'" type="primary">打 印</el-button>
-      </template>
-    </el-dialog>
   </layout-card>
 </template>
 
@@ -219,18 +202,14 @@ import { getEnterpriseInfo } from "@/request/enterprise_management.js";
 import { addingPrefixToFile } from "@/assets/js/utils.js";
 import { reactive } from "vue";
 import { useRouter } from "vue-router";
-import { useQRCode } from "@vueuse/integrations/useQRCode";
+import Print from "./components/print.vue";
-import { ElMessage } from "element-plus";
 
 const router = useRouter();
 const data = reactive({
   info: {},
   bus_images: [],
   four_images: [],
-  qrCodeDialog: {
+  qrCodeDialogVisible: false,
-    visible: false,
-    src: "",
-  },
 });
 const fnGetData = async () => {
   const resData = await getEnterpriseInfo();
@@ -239,21 +218,6 @@ const fnGetData = async () => {
   data.four_images = addingPrefixToFile(resData.fourImgs);
 };
 fnGetData();
-const fnQrCodeDialogChangeShow = () => {
-  data.qrCodeDialog.visible = !data.qrCodeDialog.visible;
-};
-const fnQrCode = () => {
-  if (data.info.CORPINFO_ID) {
-    fnQrCodeDialogChangeShow();
-    // TODO: 扫码页面
-    data.qrCodeDialog.src = useQRCode(data.info.CORPINFO_ID, {
-      width: 200,
-      height: 200,
-      margin: 1,
-      correctLevel: "H",
-    });
-  } else ElMessage.error("请重新获取二维码");
-};
 </script>
 
 <style scoped lang="scss"></style>