feat: update vue3

.babelrc

 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false,
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

build/vue-loader.conf.js

+var utils = require('./utils')
+
+module.exports = function (options) {
+    return {
+      loaders: utils.cssLoaders({
+        sourceMap: options.sourceMap
+      }),
+      postcss: [
+        require('autoprefixer')({
+          browsers: ['last 10 versions']
+        })
+      ]
+    }
+  }
\ No newline at end of file

build/webpack.base.conf.js

@@ -10,7 +10,6 @@ var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
 var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
 
-
 module.exports = {
     entry: {
         app: './src/main.js'
@@ -21,8 +20,7 @@ module.exports = {
         filename: '[name].js'
     },
     resolve: {
-        extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
-        fallback: [path.join(__dirname, '../node_modules')],
+        extensions: ['*', '.js', '.vue', '.less', '.css', '.scss'],
         alias: {
             'vue$': 'vue/dist/vue.common.js',
             'src': path.resolve(__dirname, '../src'),
@@ -31,46 +29,49 @@ module.exports = {
             '@': path.resolve('src')
         }
     },
-    resolveLoader: {
-        fallback: [path.join(__dirname, '../node_modules')]
-    },
     module: {
-        loaders: [{
+        rules: [{
             test: /\.vue$/,
-            loader: 'vue'
+            use: {
+                loader: 'vue-loader',
+                options: {
+                    postcss: [
+                        require('autoprefixer')({})
+                    ]
+                }
+            },
         }, {
             test: /\.js$/,
-            loader: 'babel',
             include: projectRoot,
-            exclude: /node_modules/
+            exclude: /node_modules/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: ['@babel/preset-env']
+                }
+            }
         }, {
             test: /\.json$/,
-            loader: 'json'
+            use: 'json-loader'
         }, {
             test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-            loader: 'url',
-            query: {
+            use: {
+                loader: 'url-loader',
+                options: {
                     limit: 10000,
                     name: utils.assetsPath('img/[name].[ext]')
                 }
+            }
         }, {
             test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-            loader: 'url',
-            query: {
+            use: {
+                loader: 'url-loader',
+                options: {
                     limit: 5000,
                     name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
                     publicPath: '../../'
                 }
+            }
         }]
-    },
-    vue: {
-        loaders: utils.cssLoaders({
-            sourceMap: useCssSourceMap
-        }),
-        postcss: [
-            require('autoprefixer')({
-                browsers: ['last 10 versions']
-            })
-        ]
     }
 }
\ No newline at end of file

build/webpack.dev.conf.js

 var config = require('../config')
+var path = require('path')
 var webpack = require('webpack')
 var merge = require('webpack-merge')
 var utils = require('./utils')
@@ -11,6 +12,11 @@ Object.keys(baseWebpackConfig.entry).forEach(function(name) {
 })
 
 module.exports = merge(baseWebpackConfig, {
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+        }
+    },
     module: {
         loaders: utils.styleLoaders({
             sourceMap: config.dev.cssSourceMap
@@ -23,9 +29,9 @@ module.exports = merge(baseWebpackConfig, {
             'process.env': config.dev.env
         }),
         // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-        new webpack.optimize.OccurenceOrderPlugin(),
+        // new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoErrorsPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
         // https://github.com/ampedandwired/html-webpack-plugin
         new HtmlWebpackPlugin({
             filename: 'index.html',

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".", // 这是根目录
+    "paths": {
+      "@/*": ["src/*"] // @ 指向 src 目录
+    }
+  },
+  "exclude": ["node_modules", "dist", "unpackage"]
+}

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "license": "GPL",
   "scripts": {
-    "dev": "cross-env BUILD_ENV=dev node build/dev-server.js",
+    "dev": "cross-env BUILD_ENV=test node build/dev-server.js",
     "local": "cross-env BUILD_ENV=development node build/dev-server.js",
     "build": "node build/build.js",
     "build:dev": "cross-env BUILD_ENV=dev node build/build.js",
@@ -18,8 +18,11 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
+    "@vue/compat": "^3.4.15",
+    "autoprefixer": "^10.4.17",
     "axios": "0.16.2",
     "better-scroll": "^0.1.15",
+    "core-js": "^3.8.3",
     "dayjs": "^1.10.7",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.11.1",
@@ -29,7 +32,7 @@
     "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
     "jsencrypt": "^3.2.1",
-    "jspdf": "^1.5.3",
+    "jspdf": "^2.5.1",
     "node-sass": "^4.9.2",
     "pdfh5": "^1.3.9",
     "qrcode": "^1.3.3",
@@ -37,25 +40,24 @@
     "showdown": "^1.6.4",
     "sortablejs": "^1.13.0",
     "storejs": "^2.0.1",
+    "tiny-emitter": "^2.1.0",
     "video.js": "^7.8.2",
-    "vue": "^2.1.0",
+    "vue": "^3.4.15",
     "vue-infinite-scroll": "^2.0.2",
-    "vue-router": "^2.1.1",
+    "vue-router": "^4.0.8",
     "vue-ueditor-wrap": "^2.4.1",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.24.3",
-    "vuex": "^2.0.0"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
-    "autoprefixer-loader": "^3.2.0",
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@vue/cli-plugin-babel": "^5.0.1",
+    "@vue/cli-service": "^5.0.1",
+    "@vue/compiler-sfc": "^3.4.15",
+    "babel-loader": "^8.3.0",
     "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
-    "babel-register": "^6.0.0",
-    "babel-runtime": "^6.23.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
     "cropperjs": "^1.5.7",
@@ -63,7 +65,7 @@
     "css-loader": "^0.28.11",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.9.0",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
@@ -76,7 +78,7 @@
     "opn": "^4.0.2",
     "ora": "^0.3.0",
     "sass": "^0.5.0",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^10.5.2",
     "scss": "^0.2.4",
     "scss-loader": "0.0.1",
     "semver": "^5.3.0",
@@ -84,10 +86,9 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "vue-lazyload": "^1.2.6",
-    "vue-loader": "^10.0.0",
+    "vue-loader": "^16.0.0",
     "vue-style-loader": "^2.0.5",
-    "vue-template-compiler": "^2.1.0",
-    "webpack": "^1.13.2",
+    "webpack": "^3.12.0",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-dev-server": "^1.16.2",
     "webpack-hot-middleware": "^2.12.2",
@@ -96,5 +97,10 @@
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/components/breadcrumb.vue

 <template>
   <div class="bread-crumb">
     <el-breadcrumb separator="/">
-            <el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
-            <el-breadcrumb-item v-if="curmbSecond" :to="{ path:  jumPathThird }">{{curmbSecond}}</el-breadcrumb-item>
-            <el-breadcrumb-item v-if="curmbThird"  :to="{ path:  jumPathFouth }">{{curmbThird}}</el-breadcrumb-item>
-            <el-breadcrumb-item v-if="curmbFouth">{{curmbFouth}}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ curmbFirst }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="curmbSecond" :to="{ path: jumPathThird }">{{
+        curmbSecond
+      }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="curmbThird" :to="{ path: jumPathFouth }">{{
+        curmbThird
+      }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="curmbFouth">{{
+        curmbFouth
+      }}</el-breadcrumb-item>
     </el-breadcrumb>
   </div>
 </template>
+
 <script>
 export default {
   props: {
     curmbFirst: {
-            type: String
+      type: String,
     },
     curmbSecond: {
-            type: String
+      type: String,
     },
     curmbThird: {
-            type: String
+      type: String,
     },
     curmbFouth: {
-            type: String
+      type: String,
     },
     jumPathThird: {
-            type: String
+      type: String,
     },
     jumPathFouth: {
-            type: String
-        }
-    }
+      type: String,
+    },
+  },
 }
 </script>
+
 <style lang="scss">
 .bread-crumb {
   position: fixed;
@@ -42,11 +50,9 @@ export default {
   height: 61px;
   padding: 20px 20px 30px;
   z-index: 99;
-    border-top: 3px solid #F0F2F5;
+  border-top: 3px solid #f0f2f5;
   .el-breadcrumb__inner {
     font-size: 14px;
   }
 }
 </style>
-
-

src/components/common/cropper-img copy 2.vue

 <template>
   <div class="rc-cropper" v-if="originImg">
-    <div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
-      <img :src="originImg" v-if="!cropper">
-      <canvas :id="originImg" ref="canvas"/>
+    <div
+      :class="{
+        'rc-cropper__canvasCrop1': cropOption.uploadType == 1,
+        'rc-cropper__canvasCrop2': cropOption.uploadType == 2,
+      }"
+    >
+      <img :src="originImg" v-if="!cropper" />
+      <canvas :id="originImg" ref="canvas" />
       <div class="rc-cropper__iconCrop">
         <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
-          <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+          <el-button type="success" size="mini" @click="sureCropper()"
+            ><i class="el-icon-check"></i
+          ></el-button>
         </el-tooltip>
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.min.css'
 export default {
@@ -20,35 +29,35 @@ export default {
     cropOption: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
     originImg: {
-      required: true
+      required: true,
     },
   },
-  data () {
+  data() {
     return {
       cropper: null,
-      croppShow: false
+      croppShow: false,
     }
   },
-  mounted () {
+  mounted() {
     this.drawImg()
   },
-  destroyed() {
-    this.cropper && this.cropper.destroy();
+  unmounted() {
+    this.cropper && this.cropper.destroy()
   },
   methods: {
     // 在canvas上绘制图片
-    drawImg () {
+    drawImg() {
       const _this = this
       this.$nextTick(() => {
         let canvas = document.getElementById(this.originImg)
         if (canvas) {
           // canvas.width = 1000
           // canvas.height = 800
-          canvas.width = _this.cropOption.cvWidth;
-          canvas.height = _this.cropOption.cvHeight;
+          canvas.width = _this.cropOption.cvWidth
+          canvas.height = _this.cropOption.cvHeight
           let ctx = canvas.getContext('2d')
           ctx.clearRect(0, 0, canvas.width, canvas.height)
           let img = new Image()
@@ -62,7 +71,7 @@ export default {
       })
     },
     // 显示裁剪框
-    initCropper () {
+    initCropper() {
       this.croppShow = true
       this.cropper = new Cropper(this.$refs.canvas, {
         checkCrossOrigin: true,
@@ -86,7 +95,7 @@ export default {
             x: this.cropOption.offset_x,
             y: this.cropOption.offset_y,
             width: this.cropOption.width,
-            height: this.cropOption.height
+            height: this.cropOption.height,
           })
           // this.cropper.zoomTo(1);
         },
@@ -99,50 +108,43 @@ export default {
       })
     },
     // 确认裁剪
-    sureCropper () {
+    sureCropper() {
       let _this = this
       const cropParam = this.cropper.getData()
-      console.log('cropParam', cropParam);
+      console.log('cropParam', cropParam)
       this.cropper.getCroppedCanvas().toBlob(function (blob) {
-        let files = new window.File([blob], 'cropper.jpg');
-        console.log(files);
+        let files = new window.File([blob], 'cropper.jpg')
+        console.log(files)
         let oFileReader = new FileReader()
         oFileReader.onloadend = function (e) {
           let base64 = e.target.result
-          _this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
+          $emit(_this, 'getCropImg', base64, cropParam, files, _this.cropper)
         }
         oFileReader.readAsDataURL(blob)
       }, 'image/jpeg')
-    }
-  }
+    },
+  },
+  emits: ['getCropImg'],
 }
 </script>
-<style scoped lang="scss">
-
 
+<style lang="scss" scoped>
 .rc-cropper__canvasCrop1 {
-  /* border: 1px solid red; */
   width: 800px;
   height: 540px;
 }
-
 .rc-cropper__canvasCrop2 {
-  /* border: 1px solid red; */
   width: 400px;
   height: 300px;
 }
-
 .rc-cropper__iconCrop {
-  position: absolute;
-  // left: 46%;
+  position: absolute; /*// left: 46%;*/
   right: 13%;
   top: 15%;
 }
-
 .el-tooltip {
   margin: 20px 4px;
   display: block;
   z-index: 10000;
 }
-
 </style>

src/components/common/cropper-img copy.vue

 <template>
   <div class="rc-cropper" v-if="originImg">
     <div class="rc-cropper__canvasCrop2">
-      <img :src="originImg" v-if="!cropper">
-      <canvas :id="originImg" ref="canvas"/>
+      <img :src="originImg" v-if="!cropper" />
+      <canvas :id="originImg" ref="canvas" />
       <div class="rc-cropper__iconCrop">
         <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
-          <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+          <el-button type="success" size="mini" @click="sureCropper()"
+            ><i class="el-icon-check"></i
+          ></el-button>
         </el-tooltip>
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.min.css'
 export default {
@@ -20,30 +24,30 @@ export default {
     cropOption: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
     originImg: {
-      required: true
+      required: true,
     },
     previewImg: {
-      type: String
-    }
+      type: String,
     },
-  data () {
+  },
+  data() {
     return {
       cropper: null,
-      croppShow: false
+      croppShow: false,
     }
   },
-  mounted () {
+  mounted() {
     this.drawImg()
   },
-  destroyed() {
-    this.cropper && this.cropper.destroy();
+  unmounted() {
+    this.cropper && this.cropper.destroy()
   },
   methods: {
     // 在canvas上绘制图片
-    drawImg () {
+    drawImg() {
       const _this = this
       this.$nextTick(() => {
         let canvas = document.getElementById(this.originImg)
@@ -63,7 +67,7 @@ export default {
       })
     },
     // 显示裁剪框
-    initCropper () {
+    initCropper() {
       this.croppShow = true
       this.cropper = new Cropper(this.$refs.canvas, {
         checkCrossOrigin: true,
@@ -87,7 +91,7 @@ export default {
             x: this.cropOption.offset_x,
             y: this.cropOption.offset_y,
             width: this.cropOption.width,
-            height: this.cropOption.height
+            height: this.cropOption.height,
           })
           // this.cropper.zoomTo(1);
         },
@@ -100,63 +104,30 @@ export default {
       })
     },
     // 确认裁剪
-    sureCropper () {
+    sureCropper() {
       let _this = this
       const cropParam = this.cropper.getData()
-      console.log('cropParam', cropParam);
+      console.log('cropParam', cropParam)
       this.cropper.getCroppedCanvas().toBlob(function (blob) {
-        let files = new window.File([blob], 'cropper.jpg');
-        console.log(files);
+        let files = new window.File([blob], 'cropper.jpg')
+        console.log(files)
         let oFileReader = new FileReader()
         oFileReader.onloadend = function (e) {
           let base64 = e.target.result
-          _this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
+          $emit(_this, 'getCropImg', base64, cropParam, files, _this.cropper)
         }
         oFileReader.readAsDataURL(blob)
       }, 'image/jpeg')
-    }
-  }
+    },
+  },
+  emits: ['getCropImg'],
 }
 </script>
-<style scoped lang="scss">
 
-// .rc-cropper {
-//   position: relative;
-//   margin-top: 10px;
-//   img {
+<style lang="scss" scoped>
+/*// .rc-cropper*/{/*//   position: relative;*//*//   margin-top: 10px;*//*//   img {*/
 //     width: 100%;
 //     height: 100%;
 //     }
-// }
-
-/* img {
-  width: 100%;
-  height: 100%;
-} */
-
-.rc-cropper__canvasCrop2 {
-  /* border: 1px solid red; */
-  width: 800px;
-  height: 540px;
-}
-
-.rc-cropper__iconCrop {
-  position: absolute;
-  /* left: 8%; */
-  left: 46%;
-  top: 10%;
-}
-
-.el-tooltip {
-  margin: 20px 4px;
-  display: block;
-  z-index: 10000;
-}
-
-</style>
- margin: 20px 4px;
-  display: block;
-  z-index: 10000;
-}
-
+//}.rc-cropper__canvasCrop2{width:800px;height:540px}.rc-cropper__iconCrop{position:absolute;left:46%;top:10%}.el-tooltip{margin:20px 4px;display:block;z-index:10000}
 </style>

src/components/common/cropper-img.vue

 <template>
   <div class="rc-cropper" v-if="originImg">
-    <div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
-      <img :src="originImg" v-if="!cropper">
-      <canvas :id="originImg" ref="canvas"/>
+    <div
+      :class="{
+        'rc-cropper__canvasCrop1': cropOption.uploadType == 1,
+        'rc-cropper__canvasCrop2': cropOption.uploadType == 2,
+      }"
+    >
+      <img :src="originImg" v-if="!cropper" />
+      <canvas :id="originImg" ref="canvas" />
       <div class="rc-cropper__iconCrop">
         <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
-          <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+          <el-button type="success" size="mini" @click="sureCropper()"
+            ><i class="el-icon-check"></i
+          ></el-button>
         </el-tooltip>
       </div>
     </div>
   </div>
 </template>
+
 <script>
+import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.min.css'
 export default {
@@ -20,35 +29,35 @@ export default {
     cropOption: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
     originImg: {
-      required: true
+      required: true,
     },
   },
-  data () {
+  data() {
     return {
       cropper: null,
-      croppShow: false
+      croppShow: false,
     }
   },
-  mounted () {
+  mounted() {
     this.drawImg()
   },
-  destroyed() {
-    this.cropper && this.cropper.destroy();
+  unmounted() {
+    this.cropper && this.cropper.destroy()
   },
   methods: {
     // 在canvas上绘制图片
-    drawImg () {
+    drawImg() {
       const _this = this
       this.$nextTick(() => {
         let canvas = document.getElementById(this.originImg)
         if (canvas) {
           // canvas.width = 1000
           // canvas.height = 800
-          canvas.width = _this.cropOption.cvWidth;
-          canvas.height = _this.cropOption.cvHeight;
+          canvas.width = _this.cropOption.cvWidth
+          canvas.height = _this.cropOption.cvHeight
           let ctx = canvas.getContext('2d')
           ctx.clearRect(0, 0, canvas.width, canvas.height)
           let img = new Image()
@@ -62,24 +71,26 @@ export default {
       })
     },
     // 显示裁剪框
-    initCropper () {
+    initCropper() {
       if (!HTMLCanvasElement.prototype.toBlob) {
-        console.log('HTMLCanvasElement.prototype.toBlob####');
+        console.log('HTMLCanvasElement.prototype.toBlob####')
         Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
           value: function (callback, type, quality) {
-            var canvas = this;
+            var canvas = this
             setTimeout(function () {
-              var binStr = window.atob(canvas.toDataURL(type, quality).split(',')[1]);
-              var len = binStr.length;
-              var arr = new window.Uint8Array(len);
+              var binStr = window.atob(
+                canvas.toDataURL(type, quality).split(',')[1]
+              )
+              var len = binStr.length
+              var arr = new window.Uint8Array(len)
               for (var i = 0; i < len; i++) {
-                arr[i] = binStr.charCodeAt(i);
+                arr[i] = binStr.charCodeAt(i)
               }
               // callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
-              callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
-            });
-          }
-        });
+              callback(new window.Blob([arr], { type: type || 'image/jpeg' }))
+            })
+          },
+        })
       }
 
       this.croppShow = true
@@ -105,7 +116,7 @@ export default {
             x: this.cropOption.offset_x,
             y: this.cropOption.offset_y,
             width: this.cropOption.width,
-            height: this.cropOption.height
+            height: this.cropOption.height,
           })
           // this.cropper.zoomTo(1);
         },
@@ -118,55 +129,51 @@ export default {
       })
     },
     // 确认裁剪
-    sureCropper () {
+    sureCropper() {
       let _this = this
       const cropParam = this.cropper.getData()
-      console.log('cropParam', cropParam);
+      console.log('cropParam', cropParam)
       this.cropper.getCroppedCanvas().toBlob(function (blob) {
-        var objecturl = window.URL.createObjectURL(blob);
-        console.log('objecturl', objecturl);
-        let files = new window.File([blob], 'cropper.jpg');
-        console.log('getCroppedCanvas', files);
+        var objecturl = window.URL.createObjectURL(blob)
+        console.log('objecturl', objecturl)
+        let files = new window.File([blob], 'cropper.jpg')
+        console.log('getCroppedCanvas', files)
         let oFileReader = new window.FileReader()
-        console.log('oFileReader', oFileReader);
+        console.log('oFileReader', oFileReader)
         oFileReader.onloadend = function (e) {
-          console.log('e.target.result', e, e.target, e.target.result);
-          let base64 = e.target.result;
-          _this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
+          console.log('e.target.result', e, e.target, e.target.result)
+          let base64 = e.target.result
+          $emit(_this, 'getCropImg', base64, cropParam, files, _this.cropper)
         }
         oFileReader.readAsDataURL(blob)
       }, 'image/jpeg')
-    }
-  }
+    },
+  },
+  emits: ['getCropImg'],
 }
 </script>
-<style scoped lang="scss">
-
-// .rc-cropper {
-//   margin-left: 20px;
-// }
 
+<style lang="scss" scoped>
+/*// .rc-cropper*/
+ {
+  /*//   margin-left: 20px;*/ /*//*/
+}
 .rc-cropper__canvasCrop1 {
   width: 800px;
   height: 540px;
 }
-
 .rc-cropper__canvasCrop2 {
   width: 400px;
   height: 300px;
 }
-
 .rc-cropper__iconCrop {
-  position: absolute;
-  // left: 46%;
+  position: absolute; /*// left: 46%;*/
   right: 13%;
   top: 15%;
 }
-
 .el-tooltip {
   margin: 20px 4px;
   display: block;
   z-index: 10000;
 }
-
 </style>

src/components/common/cropper.two copy.vue

@@ -3,24 +3,28 @@
     <el-row>
       <el-col :span="12">
         <div class="rc-cropper__canvasCrop2">
-          <img :src="originImg" v-if="!cropper">
-          <canvas :id="originImg" ref="canvas"/>
+          <img :src="originImg" v-if="!cropper" />
+          <canvas :id="originImg" ref="canvas" />
           <div class="rc-cropper__iconCrop">
             <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
-              <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+              <el-button type="success" size="mini" @click="sureCropper()"
+                ><i class="el-icon-check"></i
+              ></el-button>
             </el-tooltip>
           </div>
         </div>
       </el-col>
       <el-col :span="10">
         <div class="rc-cropper__previewImg">
-          <img :src="previewImg" id="previewImg"/>
+          <img :src="previewImg" id="previewImg" />
         </div>
       </el-col>
     </el-row>
   </div>
 </template>
+
 <script>
+import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.min.css'
 export default {
@@ -29,27 +33,27 @@ export default {
     cropOption: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
     originImg: {
-      required: true
+      required: true,
     },
     previewImg: {
-      type: String
-    }
+      type: String,
+    },
   },
-  data () {
+  data() {
     return {
       cropper: null,
-      croppShow: false
+      croppShow: false,
     }
   },
-  mounted () {
+  mounted() {
     this.drawImg()
   },
   methods: {
     // 在canvas上绘制图片
-    drawImg () {
+    drawImg() {
       const _this = this
       this.$nextTick(() => {
         let canvas = document.getElementById(this.originImg)
@@ -69,7 +73,7 @@ export default {
       })
     },
     // 显示裁剪框
-    initCropper () {
+    initCropper() {
       this.croppShow = true
       this.cropper = new Cropper(this.$refs.canvas, {
         checkCrossOrigin: true,
@@ -81,56 +85,45 @@ export default {
             x: this.cropOption.offset_x,
             y: this.cropOption.offset_y,
             width: this.cropOption.width,
-            height: this.cropOption.height
+            height: this.cropOption.height,
           })
-        }
+        },
       })
       // this.cropper = cropper
     },
     // 确认裁剪
-    sureCropper () {
+    sureCropper() {
       let _this = this
       const cropParam = this.cropper.getData()
       this.cropper.getCroppedCanvas().toBlob(function (blob) {
         let oFileReader = new FileReader()
         oFileReader.onloadend = function (e) {
           let base64 = e.target.result
-          _this.$emit('getCropImg', base64, cropParam)
+          $emit(_this, 'getCropImg', base64, cropParam)
         }
         oFileReader.readAsDataURL(blob)
       }, 'image/jpeg')
-    }
-  }
+    },
+  },
+  emits: ['getCropImg'],
 }
 </script>
-<style >
-/* .rc-cropper {
-  position: relative;
-  margin-top: 20px;
-} */
-
-/* img {
-  width: 100%;
-  height: 100%;
-} */
 
+<style>
 .rc-cropper__canvasCrop2 {
   width: 720px;
   height: 480px;
 }
-
 .rc-cropper__iconCrop {
   position: absolute;
   left: 45%;
   top: 0%;
 }
-
 .el-tooltip {
   margin: 20px 4px;
   display: block;
   z-index: 10000;
 }
-
 .rc-cropper__previewImg {
   width: 600px;
   height: 400px;

src/components/education/custom-resource/preview-pdf.vue

@@ -11,24 +11,27 @@
   >
     <!-- <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas> -->
     <div id="demo"></div>
-    <div slot="footer" class="dialog-footer">
+    <template v-slot:footer>
+      <div class="dialog-footer">
         <el-button type="primary" @click="close">确 定</el-button>
       </div>
+    </template>
   </el-dialog>
 </template>
+
 <script>
-// import Pdfh5 from "pdfh5";
+import { $on, $off, $once, $emit } from '../../../../utils/gogocodeTransfer'
 export default {
   data() {
     return {
-      pdfh5: null
-    };
+      pdfh5: null,
+    }
   },
   props: {
     dialogVisible: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {},
   components: {
@@ -55,21 +58,16 @@ export default {
   },
   methods: {
     close() {
-      this.$emit("close");
-    }
-  }
-};
+      $emit(this, 'close')
+    },
+  },
+  emits: ['close'],
+}
 </script>
-<style scoped lang="scss">
-// @import "pdfh5/css/pdfh5.css";
-// * {
-//   padding: 0;
-//   margin: 0;
-// }
-// html,
+
+<style lang="scss" scoped>
+/*// @import "pdfh5/css/pdfh5.css";*/
+// *{/*//   padding: 0;*//*//   margin: 0;*//*//*/}/*// html,*/
 // body,
-// #app {
-//   width: 100%;
-//   height: 100%;
-// }
+// #app{/*//   width: 100%;*//*//   height: 100%;*//*//*/}
 </style>

src/components/yqrange/util/common.js

 export const kolCol = [
   {
     label: '顺序',
-    prop: "seq"
+    prop: 'seq',
   },
   {
     label: '姓名',
-    prop: "name"
+    prop: 'name',
   },
   {
     label: '地区',
-    prop: "district"
+    prop: 'district',
   },
   {
     label: '所在医院',
-    prop: "hospital"
+    prop: 'hospital',
   },
   {
     label: '科室',
-    prop: "department"
+    prop: 'department',
   },
   {
     label: '职称',
-    prop: "title"
+    prop: 'title',
   },
   {
     label: '所属团队',
-    prop: "team"
+    prop: 'team',
   },
   {
     label: '发布状态',
-    prop: "status"
+    prop: 'status',
   },
   {
     label: '操作',
-    prop: "operate"
-  }
+    prop: 'operate',
+  },
 ]

src/router/range.js

-<!-- 圈子router -->
\ No newline at end of file