up

src/components/QrCode/index.vue

@@ -1,18 +1,30 @@
 <template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogVisible"
-    width="30%"
-    destroy-on-close
-    :close-on-click-modal="false"
-  >
-    <div id="qrcodetemplate" ref="qrcodetemplateModal" />
-    <span slot="footer" class="dialog-footer" />
-  </el-dialog>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="30%"
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <div id="qrcodetemplate" ref="qrcodetemplateModal" />
+      <span slot="footer" class="dialog-footer" />
+
+    </el-dialog>
+    <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
+  </div>
 </template>
 <script>
 import QRCode from 'qrcodejs2'
+import { getSettingById } from '@/api/system/settingApi'
+import { mapGetters } from 'vuex'
+import html2canvas from 'html2canvas'
+import JSZip from 'jszip'
+import saveAs from 'file-saver'
+
+let zip = new JSZip()
 export default {
+  name: 'QrCode',
   props: {
     title: {
       type: String,
@@ -21,19 +33,47 @@ export default {
   },
   data() {
     return {
-      dialogVisible: false
+      dialogVisible: false,
+      miniUrl: undefined
     }
   },
+  computed: {
+    ...mapGetters([
+      'userData'
+    ])
+  },
+  created() {
+    this.getMiniUrl()
+  },
   methods: {
-    draw(text) {
-      if (!text) {
+
+    // 获取小程序地址
+    getMiniUrl() {
+      const settingId = 1
+      this.listLoading = true
+      getSettingById(settingId).then((resp) => {
+        const { data } = resp
+        this.listLoading = false
+        this.miniUrl = data.settingValue
+      }).catch((error) => {
+        console.log(error)
+      })
+    },
+
+    // 外部调用接口
+    draw(objCode) {
+      if (!objCode) {
         this.$message.error('没有生产二维码的参数')
         return
       }
       this.dialogVisible = true
-      this.drawQrcode(text)
+      const ocId = this.userData.ocId
+      const code = this.miniUrl + '?ocId=' + ocId + '&code=' + objCode
+      this.renderQrcode(code)
     },
-    drawQrcode(url) {
+
+    // 渲染二维码
+    renderQrcode(url) {
       this.$nextTick(() => {
         this.$refs.qrcodetemplateModal.innerHTML = ''
         new QRCode('qrcodetemplate', {
@@ -42,6 +82,70 @@ export default {
           text: url.toString()
         })
       })
+    },
+
+    async download(arr, fileName) {
+      const self = this
+      window.loading = this.$loading({
+        lock: true,
+        text: '制作二维码中!',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      zip = new JSZip()
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i]
+        await self.generateQrcode(item.type, item.code).catch(() => {
+          window.loading.close()
+          this.$message.error('导出失败')
+        })
+        await self.packMaterial(item.title).catch(() => {
+          window.loading.close()
+          this.$message.error('导出失败')
+        })
+      }
+      zip.generateAsync({
+        type: 'blob'
+      }).then((blob) => {
+        saveAs(blob, fileName + '二维码物料.zip')
+        window.loading.close()
+      })
+    },
+
+    generateQrcode(type, url, sleep) { // 绘制二维码
+      return new Promise((resolve, reject) => {
+        this.$nextTick(() => {
+          this.$refs.qrcodeModal.innerHTML = ''
+          new QRCode('qrcode', {
+            width: 400,
+            height: 400,
+            text: url.toString()
+          })
+          setTimeout(function() {
+            resolve()
+          }, sleep || 300)
+        })
+      })
+    },
+
+    packMaterial(name) { // 打包处理
+      if (!name) name = 'xxx'
+      return new Promise((resolve, reject) => {
+        html2canvas(document.getElementById('qrcode'), {
+          backgroundColor: null,
+          useCORS: true,
+          dpi: 500,
+          scale: 5
+        }).then((canvas) => {
+          let dataURL = canvas.toDataURL('photo/png')
+          dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
+          zip.file(name + '.jpg', dataURL, { base64: true })
+          resolve()
+        }).catch((e) => {
+          reject(e)
+        })
+      })
     }
   }
 }

src/settings.js

@@ -36,10 +36,10 @@ module.exports = {
   /**
   * 服务API地址
   */
-  serverUrl: 'http://36.137.171.123:6001/', // 正式环境
-  devServerUrl: 'http://36.137.171.123:6001', // 开发环境
+  serverUrl: 'http://36.137.171.123:7001/', // 正式环境
+  // devServerUrl: 'http://36.137.171.123:6001', // 开发环境
   // devServerUrl: 'http://192.168.3.253:8001/', // 开发环境
-  // devServerUrl: 'http://127.0.0.1:8001/', // 开发环境
+  devServerUrl: 'http://127.0.0.1:7001/', // 开发环境
   /**
   * websocket 地址
   * dev 开发环境

src/views/hos/doctor/index.vue

@@ -87,35 +87,23 @@
     </el-row>
     <Doctor ref="AddDoctor" title="添加" @formSuccess="getData" />
     <Doctor ref="EditDoctor" title="编辑" @formSuccess="getData" />
-    <qrcode ref="qrcode" />
-    <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
+    <QrCode ref="Qrcode" />
     <MiniProgramTargetConfig ref="MiniTargetConfig" :target-type="targetType" @formSuccess="getData" />
   </div>
 </template>
 
 <script>
-import QRCode from 'qrcodejs2'
-import html2canvas from 'html2canvas'
-import JSZip from 'jszip'
-import saveAs from 'file-saver'
-
 import Doctor from './components/Doctor'
 import Pagination from '@/components/Pagination'
-import qrcodeComponents from '@/views/hos/components/qrcode.vue'
-import MiniProgramTargetConfig from '@/components/MiniProgramTargetConfig/index.vue'
+import { MiniProgramTargetConfig, QrCode } from '@/components'
 import { getDoctorByPage, deleteDoctorById } from '@/api/hos/doctorApi'
-
-import { getSettingById } from '@/api/system/settingApi'
-import { getUserData } from '@/utils/auth'
-
-let zip = new JSZip()
 export default {
   name: 'DoctorIndex',
   components: {
     Pagination,
     Doctor,
     MiniProgramTargetConfig,
-    qrcode: qrcodeComponents
+    QrCode
   },
   filters: {
     doctorProfessionalIdFilter(val) {
@@ -134,34 +122,16 @@ export default {
         limit: 10,
         keywords: ''
       },
-      ocId: undefined,
-      miniUrl: '',
       exportItems: []
     }
   },
 
   mounted() {
-    const userData = getUserData()
-    this.ocId = userData.ocId
-    this.getMiniUrl()
     this.getData()
   },
 
   methods: {
 
-    // 获取小程序地址
-    getMiniUrl() {
-      const settingId = 1
-      this.listLoading = true
-      getSettingById(settingId).then((resp) => {
-        const { data } = resp
-        this.listLoading = false
-        this.miniUrl = data.settingValue
-      }).catch((error) => {
-        console.log(error)
-      })
-    },
-
     // 初始化数据
     getData() {
       this.listLoading = true
@@ -205,85 +175,31 @@ export default {
         this.$message({ type: 'info', message: '已取消删除' })
       })
     },
+
+    // 多选
     changeSelection(selection) {
       const len = selection.length
       this.hanleModal = (len > 0)
       this.exportItems = selection
     },
+
+    // 显示二维码
     showQrcode(row) {
-      const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + row.doctorCode
-      this.$refs.qrcode.draw(code)
+      const code = row.doctorCode
+      this.$refs.Qrcode.draw(code)
     },
+
+    // 下载二维码
     downloadQrcode() {
       if (this.exportItems && this.exportItems.length > 0) {
-        var content = JSON.parse(JSON.stringify(this.exportItems))
-        this.downloadMaterial(content)
+        const arrData = []
+        for (let i = 0; i < this.exportItems.length; i++) {
+          const item = this.exportItems[i]
+          arrData.push({ type: 5, code: item.doctorCode, title: item.doctorName })
+        }
+        this.$refs.Qrcode.download(arrData, '医生')
       } else { this.$message.error('没有可下载的数据！') }
     },
-    downloadMaterial(content) { // 下载物料
-      this.batch(content, '医生管理')
-    },
-    async batch(arr, fileName) {
-      var self = this
-      window.loading = this.$loading({
-        lock: true,
-        text: '制作二维码中!',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-
-      zip = new JSZip()
-      for (var i = 0; i < arr.length; i++) {
-        var item = arr[i]
-        const code = this.miniUrl + '?ocId=' + this.ocId + '&code=' + item.doctorCode
-        await self.drawQrcode(code).catch(() => {
-          window.loading.close()
-          this.$message.error('导出失败')
-        })
-        await self.packMaterial(item.doctorName).catch(() => {
-          window.loading.close()
-          this.$message.error('导出失败')
-        })
-      }
-      zip.generateAsync({
-        type: 'blob'
-      }).then((blob) => {
-        saveAs(blob, fileName + '二维码物料.zip')
-        window.loading.close()
-      })
-    },
-    drawQrcode(url, sleep = 300) { // 绘制二维码
-      this.$refs.qrcodeModal.innerHTML = ''
-      return new Promise((resolve, reject) => {
-        new QRCode('qrcode', {
-          width: 400,
-          height: 400,
-          text: url.toString()
-        })
-        setTimeout(function() {
-          resolve()
-        }, sleep)
-      })
-    },
-
-    packMaterial(name) { // 打包处理
-      if (!name) name = 'xxx'
-      return new Promise((resolve, reject) => {
-        html2canvas(document.getElementById('qrcode'), {
-          backgroundColor: null,
-          useCORS: true,
-          dpi: 500,
-          scale: 5
-        }).then((canvas) => {
-          let dataURL = canvas.toDataURL('photo/png')
-          dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
-          zip.file(name + '.jpg', dataURL, { base64: true })
-          resolve()
-        }).catch((e) => {
-          reject(e)
-        })
-      })
-    },
 
     // 显示App绑定配置
     handleMini(data) {