@ebiz/designer-components 0.1.103 → 0.1.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.103",
+  "version": "0.1.105",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizQrCode.vue

@@ -1,15 +1,26 @@
 <template>
   <div>
     <t-qrcode :bg-color="bgColor" :border-less="borderless" :color="color" :icon="icon" :icon-size="iconSize"
-      :level="level" :size="size" :type="type" :value="value" @refresh="onRefresh">
+      :level="level" :size="size" :type="type" :value="value" @refresh="onRefresh" 
+      @click="onClick" :class="{ 'cursor-pointer': props.dialogShow }">
     </t-qrcode>
+    <t-dialog v-model:visible="dialogVisible" :width="dialogWidth" :confirm-btn="null" :cancel-btn="null">
+      <div style="display: flex; justify-content: center;">
+        <t-space direction="vertical" :align="dialogAlign">
+          <t-qrcode :bg-color="bgColor" :border-less="borderless" :color="color" :icon="icon" :icon-size="iconSize"
+            :level="level" :size="dialogQrCodeSize" :type="type" :value="value" id="QRCode">
+          </t-qrcode>
+          <t-button v-if="showDownloadBtn" @click="handleDownload">{{ downloadBtnText }}</t-button>
+        </t-space>
+      </div>
+    </t-dialog>
   </div>
 </template>
 
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import { QRCode as TQrcode } from 'tdesign-vue-next';
+import { defineProps, defineEmits, ref } from 'vue';
+import { QRCode as TQrcode, Dialog as TDialog, Button as TButton, Space as TSpace } from 'tdesign-vue-next';
 
 const props = defineProps({
   // 二维码背景颜色
@@ -56,9 +67,45 @@ const props = defineProps({
   value: {
     type: String,
     default: ''
-  }
+  },
+  // 是否点击弹窗显示大图
+  dialogShow: {
+    type: Boolean,
+    default: false
+  },
+  // 弹窗宽度
+  dialogWidth: {
+    type: [String, Number],
+    default: '500px'
+  },
+  // 弹窗二维码大小
+  dialogQrCodeSize: {
+    type: Number,
+    default: 380
+  },
+  // 是否显示下载按钮
+  showDownloadBtn: {
+    type: Boolean,
+    default: false
+  },
+  // 下载按钮文字
+  downloadBtnText: {
+    type: String,
+    default: '下载二维码'
+  },
+  // 下载文件名
+  downloadFileName: {
+    type: String,
+    default: '二维码'
+  },
+  // 二维码、按钮对齐方式
+  dialogAlign: {
+    type: String,
+    default: 'center'
+  },
 })
 
+const dialogVisible = ref(false)
 const emit = defineEmits(['refresh'])
 
 // 点击"点击刷新"的回调
@@ -66,9 +113,53 @@ const onRefresh = () => {
   emit('refresh')
 }
 
+const onClick = () => {
+  if (props.dialogShow) {
+    dialogVisible.value = true
+  }
+}
+
+const downloadFile = (url, fileName) => {
+  const a = document.createElement('a');
+  a.download = fileName;
+  a.href = url;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+const downloadCanvas = () => {
+  const canvas = document.getElementById('QRCode').querySelector('canvas');
+  if (canvas) {
+    const url = canvas.toDataURL();
+    console.log(url);
+    downloadFile(url, props.downloadFileName + '.png');
+  }
+};
+
+const downloadSvg = () => {
+  const svg = document.getElementById('QRCode').querySelector('svg');
+  const svgData = new XMLSerializer().serializeToString(svg);
+  const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  console.log(url);
+  downloadFile(url, props.downloadFileName + '.svg');
+};
+
+const handleDownload = () => {
+  if (props.type === 'canvas') {
+    downloadCanvas();
+  }
+  if (props.type === 'svg') {
+    downloadSvg();
+  }
+};
 </script>
-<!-- 
 
-<style lang="scss" scoped>
+
+<style scoped>
 /* 自定义样式 */
-</style> -->
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

package/src/components/LaunchInterview.vue

@@ -258,7 +258,8 @@ const props = defineProps({
   employeeId: { type: Number, default: 0 },
   no: { type: String, default: '' },
   btnText: { type: String, default: '' },
-  kind: { type: String, default: 'DAILY' }
+  kind: { type: String, default: 'DAILY' },
+  name: { type: String, default: '' }
 })
 
 const {employeeId}=vue.toRefs(props)
@@ -313,6 +314,7 @@ const state = vue.reactive({
   },
   questionList: [],
   queryParams: {
+    name: props.name,
     kind: props.kind,
     status: true
   },