恢复同步被覆盖代码

src/views/platform/org/employee/edit/index.vue

@@ -97,6 +97,12 @@
                 @action-event="handleActionEvent"
             />
         </div>
+        <personal-code
+            v-if="qrcodeVisible"
+            :visible.sync="qrcodeVisible"
+            :content="personalInfo"
+            @close="visible => (qrcodeVisible = visible)"
+        />
     </el-dialog>
 </template>
 
@@ -109,6 +115,7 @@ import OrgInfo from './org-info'
 import PositionInfo from './position-info'
 import RoleInfo from './role-info'
 import GroupInfo from './group-info'
+import PersonalCode from './personal-qrcode'
 
 export default {
     components: {
@@ -117,7 +124,8 @@ export default {
         OrgInfo,
         PositionInfo,
         RoleInfo,
-        GroupInfo
+        GroupInfo,
+        PersonalCode
     },
     props: {
         visible: Boolean,
@@ -168,11 +176,19 @@ export default {
                 jiNengZhiCheng: 'inside'
             },
             employee: {},
+            qrcodeVisible: false,
+            personalInfo: '',
             toolbars: [
                 {
                     key: 'save',
                     hidden: () => { return this.readonly && this.formType === 'detail' }
                 },
+                {
+                    key: 'qrcode',
+                    icon: 'ibps-icon-qrcode',
+                    label: '个人二维码',
+                    type: 'success'
+                },
                 { key: 'cancel' }
             ]
         }
@@ -208,6 +224,9 @@ export default {
                 case 'save':
                     this.handleSave()
                     break
+                case 'qrcode':
+                    this.handleQRCode()
+                    break
                 case 'cancel':
                     this.closeDialog()
                     break
@@ -230,6 +249,19 @@ export default {
                 }
             })
         },
+        handleQRCode () {
+            this.personalInfo = JSON.stringify({
+                id: this.employee.id,
+                account: this.employee.account,
+                name: this.employee.name,
+                mobile: this.employee.mobile,
+                email: this.employee.email,
+                gender: this.employee.gender,
+                dept: this.employee.posItemList.map(i => i.name).join(','),
+                role: this.employee.roleItemList.map(i => i.name).join(',')
+            })
+            this.qrcodeVisible = true
+        },
         checkPhone (value) {
             const reg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
             if (!reg.test(value)) {

src/views/platform/org/employee/edit/personal-qrcode.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <el-dialog
+            title="个人二维码"
+            :visible.sync="dialogVisible"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            append-to-body
+            class="personal-qrcode"
+            width="50%"
+            center
+        >
+            <div id="my-QRCode" ref="myQRCode" class="qrCode" />
+            <div slot="footer" class="el-dialog--center">
+                <ibps-toolbar
+                    :actions="toolbars"
+                    @action-event="handleActionEvent"
+                />
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import QRCode from 'qrcodejs2' // 引入qrcode
+export default {
+    name: 'qrcode',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        content: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            code: '',
+            dialogVisible: this.visible,
+            toolbars: [
+                {
+                    key: 'download',
+                    icon: 'ibps-icon-downlaod',
+                    label: '下载',
+                    type: 'primary'
+                },
+                {
+                    key: 'cancel',
+                    icon: 'ibps-icon-close',
+                    label: '关闭',
+                    type: 'drange'
+                }
+            ]
+        }
+    },
+    watch: {
+        visible: {
+            handler (val, oldVal) {
+                this.dialogVisible = this.visible
+                if (val) {
+                    this.$nextTick(() => {
+                        this.qrcodeRender()
+                    })
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        qrcodeRender () {
+            console.log('qrcodeRender')
+            if (this.code) {
+                this.$refs.myQRCode.innerHTML = ''
+            }
+            this.code = new QRCode('my-QRCode', {
+                width: 250,
+                height: 250,
+                text: this.content,
+                colorDark: '#000000', // 前景色
+                colorLight: '#FFFFFF', // 背景色
+                correctLevel: QRCode.CorrectLevel.L
+            })
+        },
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'download':
+                    this.handleDownload()
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        handleDownload () {
+            const myCanvas = document.getElementById('my-QRCode').getElementsByTagName('canvas')
+            const a = document.createElement('a')
+            a.href = myCanvas[0].toDataURL('image/png')
+            a.download = '个人二维码'
+            a.click()
+        },
+        closeDialog () {
+            this.$emit('close', false)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .personal-qrcode {
+        ::v-deep {
+            .el-dialog {
+                margin-top: calc((100vh - 450px) / 2) !important;
+                .el-dialog__body {
+                    #my-QRCode {
+                        img{
+                            margin: 40px auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>