2022年5月29日从svn移到git

src/components/QrImage/Index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div><slot></slot></div>
+    <el-dialog :modal-append-to-body="false" :title="title" :close-on-click-modal="false" :show="show" @close="$emit('update:show', false)" :visible.sync="visible" width="400px" custom-class="g-dialog">
+    <el-row :gutter="10">
+      <el-col :span="12">
+          <div style="height: 200px;border-right: 1px solid #cccccc;">
+              <img v-if="qrImage!=''" :src="qrImage" width="150px" height="150px">
+          </div>
+      </el-col>
+      <el-col :span="12">
+          <el-form label-width="50px">
+            <el-form-item label="大小">
+                <el-select v-model="size">
+                  <el-option label="100" :value="100"></el-option>
+                  <el-option label="150" :value="150"></el-option>
+                  <el-option label="200" :value="200"></el-option>
+                  <el-option label="300" :value="300"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="类型">
+                <el-select v-model="qrType">
+                  <el-option label="png" value="png"></el-option>
+                  <el-option label="jpg" value="jpg"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                 <el-button @click="download" type="primary">下载</el-button>
+
+            </el-form-item>
+          </el-form>
+      </el-col>
+    </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {genQrImage} from '@/api/tools.js'
+import { getToken } from '@/utils/token'
+import axios from 'axios'
+export default {
+  props:{
+    title:{
+       type:String,
+       default:'二维码'
+    },
+     code:{
+       required:true,
+       type:String
+     },
+     show:{
+       required:true,
+       type:Boolean
+     }
+  },
+  data(){
+    return {
+      visible:this.show,
+      qrImage:'',
+      size:150,
+      qrType:'png'
+    }
+  },
+  watch: {
+      show(){
+          this.visible = this.show;
+      },
+      code(nval,oval){
+          if(nval!=oval){
+            this.genImage();
+          }
+      }
+  },
+  mounted() {
+      //this.genImage();
+  },
+  methods:{
+     genImage(){
+       if(this.code){
+         genQrImage(this.code,false).then(rs=>{
+            this.qrImage='data:image/jpg;base64,'+rs.result;
+         }).catch(err=>{
+            this.$message({message:'生成二维码图片失败:'+rs.message,type:'error'})
+         });
+       }
+     },
+     download(){
+        var baseUrl = process.env.VUE_APP_BASE_API
+        var url = baseUrl+'/oapi/idcode/qrimage/download?code='+this.code+'&size='+this.size+'&ftype='+this.qrType+'&margin=true';
+        //var str='size='+size+'&ftype='+type+'&colour='+colour+'&margin='+margin+'&url='+u+'&code='+code;
+        axios({
+          method: 'get',
+          url: url,
+          responseType: 'blob',
+          headers: { 'X-Access-Token': getToken() }
+        }).then(res => {
+          this.resolveBlob(res, 'application/octet-stream','qrcode.'+this.qrType)
+        })
+     },
+     resolveBlob(res, mimeType,name) {
+       const aLink = document.createElement('a')
+       var blob = new Blob([res.data], { type: mimeType})
+       // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
+       //var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+       //var contentDisposition = decodeURI(res.headers['content-disposition'])
+       //console.log(contentDisposition);
+       //var result = patt.exec(contentDisposition)
+       //var fileName = result[1]
+       //fileName = fileName.replace(/\"/g, '')
+       aLink.href = URL.createObjectURL(blob);
+       aLink.setAttribute('download', name) // 设置下载文件名称
+       document.body.appendChild(aLink)
+       aLink.click()
+       document.body.removeChild(aLink)
+     }
+  }
+}
+</script>
+
+<style>
+</style>