{"remainingRequest":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\babel-loader\\lib\\index.js!D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\src\\views\\system\\user\\profile\\userAvatar.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\src\\views\\system\\user\\profile\\userAvatar.vue","mtime":1675221397135},{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\babel.config.js","mtime":1675221397043},{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1678842086999},{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1678842088721},{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1678842086999},{"path":"D:\\Workspaces\\ard\\RuoYi-Vue-master\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1678842089772}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:InVzZSBzdHJpY3QiOwoKdmFyIF9pbnRlcm9wUmVxdWlyZURlZmF1bHQgPSByZXF1aXJlKCJEOi9Xb3Jrc3BhY2VzL2FyZC9SdW9ZaS1WdWUtbWFzdGVyL3J1b3lpLXVpL25vZGVfbW9kdWxlcy9AYmFiZWwvcnVudGltZS9oZWxwZXJzL2ludGVyb3BSZXF1aXJlRGVmYXVsdC5qcyIpLmRlZmF1bHQ7Ck9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCAiX19lc01vZHVsZSIsIHsKICB2YWx1ZTogdHJ1ZQp9KTsKZXhwb3J0cy5kZWZhdWx0ID0gdm9pZCAwOwp2YXIgX3N0b3JlID0gX2ludGVyb3BSZXF1aXJlRGVmYXVsdChyZXF1aXJlKCJAL3N0b3JlIikpOwp2YXIgX3Z1ZUNyb3BwZXIgPSByZXF1aXJlKCJ2dWUtY3JvcHBlciIpOwp2YXIgX3VzZXIgPSByZXF1aXJlKCJAL2FwaS9zeXN0ZW0vdXNlciIpOwp2YXIgX3V0aWxzID0gcmVxdWlyZSgiQC91dGlscyIpOwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwovLwp2YXIgX2RlZmF1bHQgPSB7CiAgY29tcG9uZW50czogewogICAgVnVlQ3JvcHBlcjogX3Z1ZUNyb3BwZXIuVnVlQ3JvcHBlcgogIH0sCiAgcHJvcHM6IHsKICAgIHVzZXI6IHsKICAgICAgdHlwZTogT2JqZWN0CiAgICB9CiAgfSwKICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgLy8g5piv5ZCm5pi+56S65by55Ye65bGCCiAgICAgIG9wZW46IGZhbHNlLAogICAgICAvLyDmmK/lkKbmmL7npLpjcm9wcGVyCiAgICAgIHZpc2libGU6IGZhbHNlLAogICAgICAvLyDlvLnlh7rlsYLmoIfpopgKICAgICAgdGl0bGU6ICLkv67mlLnlpLTlg48iLAogICAgICBvcHRpb25zOiB7CiAgICAgICAgaW1nOiBfc3RvcmUuZGVmYXVsdC5nZXR0ZXJzLmF2YXRhciwKICAgICAgICAvL+ijgeWJquWbvueJh+eahOWcsOWdgAogICAgICAgIGF1dG9Dcm9wOiB0cnVlLAogICAgICAgIC8vIOaYr+WQpum7mOiupOeUn+aIkOaIquWbvuahhgogICAgICAgIGF1dG9Dcm9wV2lkdGg6IDIwMCwKICAgICAgICAvLyDpu5jorqTnlJ/miJDmiKrlm77moYblrr3luqYKICAgICAgICBhdXRvQ3JvcEhlaWdodDogMjAwLAogICAgICAgIC8vIOm7mOiupOeUn+aIkOaIquWbvuahhumrmOW6pgogICAgICAgIGZpeGVkQm94OiB0cnVlLAogICAgICAgIC8vIOWbuuWumuaIquWbvuahhuWkp+WwjyDkuI3lhYHorrjmlLnlj5gKICAgICAgICBvdXRwdXRUeXBlOiAicG5nIiAvLyDpu5jorqTnlJ/miJDmiKrlm77kuLpQTkfmoLzlvI8KICAgICAgfSwKCiAgICAgIHByZXZpZXdzOiB7fSwKICAgICAgcmVzaXplSGFuZGxlcjogbnVsbAogICAgfTsKICB9LAogIG1ldGhvZHM6IHsKICAgIC8vIOe8lui+keWktOWDjwogICAgZWRpdENyb3BwZXI6IGZ1bmN0aW9uIGVkaXRDcm9wcGVyKCkgewogICAgICB0aGlzLm9wZW4gPSB0cnVlOwogICAgfSwKICAgIC8vIOaJk+W8gOW8ueWHuuWxgue7k+adn+aXtueahOWbnuiwgwogICAgbW9kYWxPcGVuZWQ6IGZ1bmN0aW9uIG1vZGFsT3BlbmVkKCkgewogICAgICB2YXIgX3RoaXMgPSB0aGlzOwogICAgICB0aGlzLnZpc2libGUgPSB0cnVlOwogICAgICBpZiAoIXRoaXMucmVzaXplSGFuZGxlcikgewogICAgICAgIHRoaXMucmVzaXplSGFuZGxlciA9ICgwLCBfdXRpbHMuZGVib3VuY2UpKGZ1bmN0aW9uICgpIHsKICAgICAgICAgIF90aGlzLnJlZnJlc2goKTsKICAgICAgICB9LCAxMDApOwogICAgICB9CiAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJyZXNpemUiLCB0aGlzLnJlc2l6ZUhhbmRsZXIpOwogICAgfSwKICAgIC8vIOWIt+aWsOe7hOS7tgogICAgcmVmcmVzaDogZnVuY3Rpb24gcmVmcmVzaCgpIHsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJlZnJlc2goKTsKICAgIH0sCiAgICAvLyDopobnm5bpu5jorqTnmoTkuIrkvKDooYzkuLoKICAgIHJlcXVlc3RVcGxvYWQ6IGZ1bmN0aW9uIHJlcXVlc3RVcGxvYWQoKSB7fSwKICAgIC8vIOWQkeW3puaXi+i9rAogICAgcm90YXRlTGVmdDogZnVuY3Rpb24gcm90YXRlTGVmdCgpIHsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJvdGF0ZUxlZnQoKTsKICAgIH0sCiAgICAvLyDlkJHlj7Pml4vovawKICAgIHJvdGF0ZVJpZ2h0OiBmdW5jdGlvbiByb3RhdGVSaWdodCgpIHsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJvdGF0ZVJpZ2h0KCk7CiAgICB9LAogICAgLy8g5Zu+54mH57yp5pS+CiAgICBjaGFuZ2VTY2FsZTogZnVuY3Rpb24gY2hhbmdlU2NhbGUobnVtKSB7CiAgICAgIG51bSA9IG51bSB8fCAxOwogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIuY2hhbmdlU2NhbGUobnVtKTsKICAgIH0sCiAgICAvLyDkuIrkvKDpooTlpITnkIYKICAgIGJlZm9yZVVwbG9hZDogZnVuY3Rpb24gYmVmb3JlVXBsb2FkKGZpbGUpIHsKICAgICAgdmFyIF90aGlzMiA9IHRoaXM7CiAgICAgIGlmIChmaWxlLnR5cGUuaW5kZXhPZigiaW1hZ2UvIikgPT0gLTEpIHsKICAgICAgICB0aGlzLiRtb2RhbC5tc2dFcnJvcigi5paH5Lu25qC85byP6ZSZ6K+v77yM6K+35LiK5Lyg5Zu+54mH57G75Z6LLOWmgu+8mkpQR++8jFBOR+WQjue8gOeahOaWh+S7tuOAgiIpOwogICAgICB9IGVsc2UgewogICAgICAgIHZhciByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpOwogICAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGZpbGUpOwogICAgICAgIHJlYWRlci5vbmxvYWQgPSBmdW5jdGlvbiAoKSB7CiAgICAgICAgICBfdGhpczIub3B0aW9ucy5pbWcgPSByZWFkZXIucmVzdWx0OwogICAgICAgIH07CiAgICAgIH0KICAgIH0sCiAgICAvLyDkuIrkvKDlm77niYcKICAgIHVwbG9hZEltZzogZnVuY3Rpb24gdXBsb2FkSW1nKCkgewogICAgICB2YXIgX3RoaXMzID0gdGhpczsKICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLmdldENyb3BCbG9iKGZ1bmN0aW9uIChkYXRhKSB7CiAgICAgICAgdmFyIGZvcm1EYXRhID0gbmV3IEZvcm1EYXRhKCk7CiAgICAgICAgZm9ybURhdGEuYXBwZW5kKCJhdmF0YXJmaWxlIiwgZGF0YSk7CiAgICAgICAgKDAsIF91c2VyLnVwbG9hZEF2YXRhcikoZm9ybURhdGEpLnRoZW4oZnVuY3Rpb24gKHJlc3BvbnNlKSB7CiAgICAgICAgICBfdGhpczMub3BlbiA9IGZhbHNlOwogICAgICAgICAgX3RoaXMzLm9wdGlvbnMuaW1nID0gcHJvY2Vzcy5lbnYuVlVFX0FQUF9CQVNFX0FQSSArIHJlc3BvbnNlLmltZ1VybDsKICAgICAgICAgIF9zdG9yZS5kZWZhdWx0LmNvbW1pdCgnU0VUX0FWQVRBUicsIF90aGlzMy5vcHRpb25zLmltZyk7CiAgICAgICAgICBfdGhpczMuJG1vZGFsLm1zZ1N1Y2Nlc3MoIuS/ruaUueaIkOWKnyIpOwogICAgICAgICAgX3RoaXMzLnZpc2libGUgPSBmYWxzZTsKICAgICAgICB9KTsKICAgICAgfSk7CiAgICB9LAogICAgLy8g5a6e5pe26aKE6KeICiAgICByZWFsVGltZTogZnVuY3Rpb24gcmVhbFRpbWUoZGF0YSkgewogICAgICB0aGlzLnByZXZpZXdzID0gZGF0YTsKICAgIH0sCiAgICAvLyDlhbPpl63nqpflj6MKICAgIGNsb3NlRGlhbG9nOiBmdW5jdGlvbiBjbG9zZURpYWxvZygpIHsKICAgICAgdGhpcy5vcHRpb25zLmltZyA9IF9zdG9yZS5kZWZhdWx0LmdldHRlcnMuYXZhdGFyOwogICAgICB0aGlzLnZpc2libGUgPSBmYWxzZTsKICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoInJlc2l6ZSIsIHRoaXMucmVzaXplSGFuZGxlcik7CiAgICB9CiAgfQp9OwpleHBvcnRzLmRlZmF1bHQgPSBfZGVmYXVsdDs="},{"version":3,"mappings":";;;;;;;AAwDA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAEA;EACAA;IAAAC;EAAA;EACAC;IACAC;MACAC;IACA;EACA;EACAC;IACA;MACA;MACAC;MACA;MACAC;MACA;MACAC;MACAC;QACAC;QAAA;QACAC;QAAA;QACAC;QAAA;QACAC;QAAA;QACAC;QAAA;QACAC;MACA;;MACAC;MACAC;IACA;EACA;EACAC;IACA;IACAC;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;QACA;UACA;QACA;MACA;MACAC;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC,yCACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACAC;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;MACA;QACA;QACAC;QACAA;UACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;QACAC;QACA;UACA;UACA;UACAC;UACA;UACA;QACA;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;MACAb;IACA;EACA;AACA;AAAA","names":["components","VueCropper","props","user","type","data","open","visible","title","options","img","autoCrop","autoCropWidth","autoCropHeight","fixedBox","outputType","previews","resizeHandler","methods","editCropper","modalOpened","window","refresh","requestUpload","rotateLeft","rotateRight","changeScale","num","beforeUpload","reader","uploadImg","formData","store","realTime","closeDialog"],"sourceRoot":"src/views/system/user/profile","sources":["userAvatar.vue"],"sourcesContent":["<template>\r\n <div>\r\n <div class=\"user-info-head\" @click=\"editCropper()\"><img v-bind:src=\"options.img\" title=\"点击上传头像\" class=\"img-circle img-lg\" /></div>\r\n <el-dialog :title=\"title\" :visible.sync=\"open\" width=\"800px\" append-to-body @opened=\"modalOpened\" @close=\"closeDialog\">\r\n <el-row>\r\n <el-col :xs=\"24\" :md=\"12\" :style=\"{height: '350px'}\">\r\n <vue-cropper\r\n ref=\"cropper\"\r\n :img=\"options.img\"\r\n :info=\"true\"\r\n :autoCrop=\"options.autoCrop\"\r\n :autoCropWidth=\"options.autoCropWidth\"\r\n :autoCropHeight=\"options.autoCropHeight\"\r\n :fixedBox=\"options.fixedBox\"\r\n :outputType=\"options.outputType\"\r\n @realTime=\"realTime\"\r\n v-if=\"visible\"\r\n />\r\n </el-col>\r\n <el-col :xs=\"24\" :md=\"12\" :style=\"{height: '350px'}\">\r\n <div class=\"avatar-upload-preview\">\r\n <img :src=\"previews.url\" :style=\"previews.img\" />\r\n </div>\r\n </el-col>\r\n </el-row>\r\n <br />\r\n <el-row>\r\n <el-col :lg=\"2\" :sm=\"3\" :xs=\"3\">\r\n <el-upload action=\"#\" :http-request=\"requestUpload\" :show-file-list=\"false\" :before-upload=\"beforeUpload\">\r\n <el-button size=\"small\">\r\n 选择\r\n <i class=\"el-icon-upload el-icon--right\"></i>\r\n </el-button>\r\n </el-upload>\r\n </el-col>\r\n <el-col :lg=\"{span: 1, offset: 2}\" :sm=\"2\" :xs=\"2\">\r\n <el-button icon=\"el-icon-plus\" size=\"small\" @click=\"changeScale(1)\"></el-button>\r\n </el-col>\r\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\r\n <el-button icon=\"el-icon-minus\" size=\"small\" @click=\"changeScale(-1)\"></el-button>\r\n </el-col>\r\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\r\n <el-button icon=\"el-icon-refresh-left\" size=\"small\" @click=\"rotateLeft()\"></el-button>\r\n </el-col>\r\n <el-col :lg=\"{span: 1, offset: 1}\" :sm=\"2\" :xs=\"2\">\r\n <el-button icon=\"el-icon-refresh-right\" size=\"small\" @click=\"rotateRight()\"></el-button>\r\n </el-col>\r\n <el-col :lg=\"{span: 2, offset: 6}\" :sm=\"2\" :xs=\"2\">\r\n <el-button type=\"primary\" size=\"small\" @click=\"uploadImg()\">提 交</el-button>\r\n </el-col>\r\n </el-row>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport store from \"@/store\";\r\nimport { VueCropper } from \"vue-cropper\";\r\nimport { uploadAvatar } from \"@/api/system/user\";\r\nimport { debounce } from '@/utils'\r\n\r\nexport default {\r\n components: { VueCropper },\r\n props: {\r\n user: {\r\n type: Object\r\n }\r\n },\r\n data() {\r\n return {\r\n // 是否显示弹出层\r\n open: false,\r\n // 是否显示cropper\r\n visible: false,\r\n // 弹出层标题\r\n title: \"修改头像\",\r\n options: {\r\n img: store.getters.avatar, //裁剪图片的地址\r\n autoCrop: true, // 是否默认生成截图框\r\n autoCropWidth: 200, // 默认生成截图框宽度\r\n autoCropHeight: 200, // 默认生成截图框高度\r\n fixedBox: true, // 固定截图框大小 不允许改变\r\n outputType:\"png\" // 默认生成截图为PNG格式\r\n },\r\n previews: {},\r\n resizeHandler: null\r\n };\r\n },\r\n methods: {\r\n // 编辑头像\r\n editCropper() {\r\n this.open = true;\r\n },\r\n // 打开弹出层结束时的回调\r\n modalOpened() {\r\n this.visible = true;\r\n if (!this.resizeHandler) {\r\n this.resizeHandler = debounce(() => {\r\n this.refresh()\r\n }, 100)\r\n }\r\n window.addEventListener(\"resize\", this.resizeHandler)\r\n },\r\n // 刷新组件\r\n refresh() {\r\n this.$refs.cropper.refresh();\r\n },\r\n // 覆盖默认的上传行为\r\n requestUpload() {\r\n },\r\n // 向左旋转\r\n rotateLeft() {\r\n this.$refs.cropper.rotateLeft();\r\n },\r\n // 向右旋转\r\n rotateRight() {\r\n this.$refs.cropper.rotateRight();\r\n },\r\n // 图片缩放\r\n changeScale(num) {\r\n num = num || 1;\r\n this.$refs.cropper.changeScale(num);\r\n },\r\n // 上传预处理\r\n beforeUpload(file) {\r\n if (file.type.indexOf(\"image/\") == -1) {\r\n this.$modal.msgError(\"文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。\");\r\n } else {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => {\r\n this.options.img = reader.result;\r\n };\r\n }\r\n },\r\n // 上传图片\r\n uploadImg() {\r\n this.$refs.cropper.getCropBlob(data => {\r\n let formData = new FormData();\r\n formData.append(\"avatarfile\", data);\r\n uploadAvatar(formData).then(response => {\r\n this.open = false;\r\n this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;\r\n store.commit('SET_AVATAR', this.options.img);\r\n this.$modal.msgSuccess(\"修改成功\");\r\n this.visible = false;\r\n });\r\n });\r\n },\r\n // 实时预览\r\n realTime(data) {\r\n this.previews = data;\r\n },\r\n // 关闭窗口\r\n closeDialog() {\r\n this.options.img = store.getters.avatar\r\n this.visible = false;\r\n window.removeEventListener(\"resize\", this.resizeHandler)\r\n }\r\n }\r\n};\r\n</script>\r\n<style scoped lang=\"scss\">\r\n.user-info-head {\r\n position: relative;\r\n display: inline-block;\r\n height: 120px;\r\n}\r\n\r\n.user-info-head:hover:after {\r\n content: '+';\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n color: #eee;\r\n background: rgba(0, 0, 0, 0.5);\r\n font-size: 24px;\r\n font-style: normal;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n cursor: pointer;\r\n line-height: 110px;\r\n border-radius: 50%;\r\n}\r\n</style>\r\n"]}]}
|
