bl-common-vue3 3.8.46 → 3.8.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.46",
+  "version": "3.8.48",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",
@@ -33,7 +33,6 @@
     "tinymce": "^6.0.0",
     "@tinymce/tinymce-vue": "^5.1.0",
     "vuedraggable": "^4.1.0",
-    "qrcode.vue": "^3.3.3",
     "file-saver": "^2.0.5",
     "style-resources-loader": "^1.5.0"
   },

package/src/common/utils/util.js

@@ -69,7 +69,7 @@ const utils = {
    */
   setCommonLocal: (key, value,isUpdate=false) => {
     if (key == 'basicConfig') {
-      utils.areaUnit = value?.system_area_unit || '㎡';
+      utils.areaUnit = (value && value.system_area_unit) ? value.system_area_unit : '㎡';
     }
     if (key == 'basicConfigI18n') {
       utils.basicConfigI18n = value;

package/src/components/QrcodeModal/index.vue

@@ -19,7 +19,7 @@
           :src="urls"
           :style="{ width: size + 'px', height: size + 'px' }"
         />
-        <qrcode-vue v-else :value="urls" :size="size" id="h5Qrcode" />
+        <img v-else :src="qrImgUrl" :style="{ width: size + 'px', height: size + 'px' }" />
         <div class="qrcode-btn">
           <Button
             v-if="download && type == 'url'"
@@ -49,11 +49,10 @@
             :src="url"
             :style="{ width: size + 'px', height: size + 'px' }"
           />
-          <qrcode-vue
+          <img
             v-else
-            :value="url"
-            :size="size"
-            :id="'h5Qrcode_' + index"
+            :src="qrImgUrls[index]"
+            :style="{ width: size + 'px', height: size + 'px' }"
           />
           <div class="qrcode-btn">
             <Button
@@ -79,17 +78,16 @@
 </template>
 
 <script>
-import { defineComponent, reactive, toRefs, watch, computed } from "@vue/runtime-core";
+import { defineComponent, reactive, toRefs, watch, computed, ref } from "@vue/runtime-core";
 import { Modal, Row, Col, Button, message } from "ant-design-vue";
-import QrcodeVue from "qrcode.vue";
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
 import { CopyOutlined, DownloadOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
   name: "QrcodeModal",
+  emits: ["cancel", "request"],
   components: {
-    QrcodeVue,
     Modal,
     Row,
     Col,
@@ -140,6 +138,9 @@ export default defineComponent({
       colNum: 24,
     });
 
+    const qrImgUrl = ref("");
+    const qrImgUrls = ref([]);
+
     const titleProps = computed(() => {
       return props.title || t('QrcodeModal.index.612016-1')
     });
@@ -148,16 +149,44 @@ export default defineComponent({
       emit("cancel");
     };
 
-    const downloadCode = (index) => {
+    const downloadCode = async (index) => {
+      const imgUrl = index === -1 ? qrImgUrl.value : qrImgUrls.value[index];
+      if (!imgUrl) return;
+      const response = await fetch(imgUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
-      const id = index === -1 ? "h5Qrcode" : "h5Qrcode_" + index;
-      const image = document
-        .getElementById(id)
-        .toDataURL("image/png")
-        .replace("image/png", "image/octet-stream");
-      a.href = image;
+      a.href = url;
       a.download = `${titleProps.value || "pic"}.png`;
+      document.body.appendChild(a);
       a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    };
+
+    const fetchQrImages = () => {
+      const urlList = typeof props.urls === 'string' ? [props.urls] : [...props.urls];
+      qrImgUrl.value = "";
+      qrImgUrls.value = [];
+
+      urlList.forEach((url, index) => {
+        emit("request", {
+          params: {
+            method: "get",
+            server: "/public",
+            url: "/qrcode",
+            extra: { qrCode: url },
+          },
+          success: (res) => {
+            if (typeof props.urls === 'string') {
+              qrImgUrl.value = res.url;
+            } else {
+              qrImgUrls.value[index] = res.url;
+              qrImgUrls.value = [...qrImgUrls.value];
+            }
+          },
+        });
+      });
     };
 
     const init = () => {
@@ -173,6 +202,9 @@ export default defineComponent({
       (val) => {
         if (val) {
           init();
+          if (props.type === 'url') {
+            fetchQrImages();
+          }
         }
       }
     );
@@ -198,6 +230,8 @@ export default defineComponent({
     return {
       t,
       ...toRefs(state),
+      qrImgUrl,
+      qrImgUrls,
       titleProps,
       handleClose,
       downloadCode,