Merge branch 'dev' of http://git.dayaedu.com/yonge/mec_oa_html into dev

package.json

@@ -41,6 +41,7 @@
     "@toast-ui/editor": "^3.1.3",
     "ace-builds": "^1.4.12",
     "axios": "^0.21.1",
+    "cache-loader": "^4.1.0",
     "clipboard": "^2.0.6",
     "codemirror": "^5.58.1",
     "core-js": "^2.6.11",

src/components/VueFormMaking/components/Upload/index.vue

@@ -1,34 +1,62 @@
 <template>
-  <div
-    :id="uploadId"
-    class="fm-uplaod-container"
-  >
+  <div :id="uploadId" class="fm-uplaod-container">
     <draggable
       v-model="fileList"
       class="drag-img-list"
-      v-bind="{group: uploadId, ghostClass: 'ghost', animation: 200}"
+      v-bind="{ group: uploadId, ghostClass: 'ghost', animation: 200 }"
       :no-transition-on-drag="true"
     >
       <div
-        v-for="(item) in fileList"
+        v-for="item in fileList"
         :id="item.key"
         :key="item.key"
-        :style="{width: width+'px', height: height+'px'}"
-        :class="{uploading: item.status=='uploading', 'is-success': item.status=='success', 'is-diabled': disabled}"
+        :style="{ width: width + 'px', height: height + 'px' }"
+        :class="{
+          uploading: item.status == 'uploading',
+          'is-success': item.status == 'success',
+          'is-diabled': disabled
+        }"
         class="upload-file"
       >
-        <img :src="item.url">
+        <img :src="item.url" />
 
-        <el-progress v-if="item.status=='uploading'" :width="miniWidth*0.9" class="upload-progress" type="circle" :percentage="item.percent" />
+        <el-progress
+          v-if="item.status == 'uploading'"
+          :width="miniWidth * 0.9"
+          class="upload-progress"
+          type="circle"
+          :percentage="item.percent"
+        />
 
-        <label v-if="item.status=='success'" class="item-status">
+        <label v-if="item.status == 'success'" class="item-status">
           <i class="el-icon-upload-success el-icon-check" />
         </label>
 
-        <div v-if="!disabled" class="uplaod-action" :style="{height: miniWidth / 4 + 'px'}">
-          <i class="iconfont icon-tupianyulan" :title="$t('fm.upload.preview')" :style="{'font-size': miniWidth/8+'px'}" @click="handlePreviewFile(item.key)" />
-          <i v-if="isEdit" class="iconfont icon-sync1" :title="$t('fm.upload.edit')" :style="{'font-size': miniWidth/8+'px'}" @click="handleEdit(item.key)" />
-          <i v-if="isDelete && fileList.length > min" class="iconfont icon-delete" :title="$t('fm.upload.delete')" :style="{'font-size': miniWidth/8+'px'}" @click="handleRemove(item.key)" />
+        <div
+          v-if="!disabled"
+          class="uplaod-action"
+          :style="{ height: miniWidth / 4 + 'px' }"
+        >
+          <i
+            class="iconfont icon-tupianyulan"
+            :title="$t('fm.upload.preview')"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handlePreviewFile(item.key)"
+          />
+          <i
+            v-if="isEdit"
+            class="iconfont icon-sync1"
+            :title="$t('fm.upload.edit')"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handleEdit(item.key)"
+          />
+          <i
+            v-if="isDelete && fileList.length > min"
+            class="iconfont icon-delete"
+            :title="$t('fm.upload.delete')"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+            @click="handleRemove(item.key)"
+          />
         </div>
       </div>
     </draggable>
@@ -37,36 +65,53 @@
       v-if="!preview"
       v-show="(!isQiniu || (isQiniu && token)) && fileList.length < length"
       class="el-upload el-upload--picture-card"
-      :class="{'is-disabled': disabled}"
-      :style="{width: width+'px', height: height+'px'}"
+      :class="{ 'is-disabled': disabled }"
+      :style="{ width: width + 'px', height: height + 'px' }"
       @click.self="handleAdd"
     >
-      <i class="el-icon-plus" :style="{fontSize:miniWidth/4+'px',marginTop: (-miniWidth/8)+'px', marginLeft: (-miniWidth/8)+'px'}" @click.self="handleAdd" />
+      <i
+        class="el-icon-plus"
+        :style="{
+          fontSize: miniWidth / 4 + 'px',
+          marginTop: -miniWidth / 8 + 'px',
+          marginLeft: -miniWidth / 8 + 'px'
+        }"
+        @click.self="handleAdd"
+      />
       <input
         v-if="multiple"
         ref="uploadInput"
         accept="image/*"
         multiple
         type="file"
-        :style="{width: 0, height: 0}"
+        :style="{ width: 0, height: 0 }"
         name="file"
         class="el-upload__input upload-input"
         @change="handleChange"
-      >
-      <input v-else ref="uploadInput" accept="image/*" type="file" :style="{width:0, height: 0}" name="file" class="el-upload__input upload-input" @change="handleChange">
+      />
+      <input
+        v-else
+        ref="uploadInput"
+        accept="image/*"
+        type="file"
+        :style="{ width: 0, height: 0 }"
+        name="file"
+        class="el-upload__input upload-input"
+        @change="handleChange"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
-import Viewer from 'viewerjs'
-import Draggable from 'vuedraggable'
-import * as qiniu from 'qiniu-js'
-require('viewerjs/dist/viewer.css')
+import Vue from "vue";
+import Viewer from "viewerjs";
+import Draggable from "vuedraggable";
+import * as qiniu from "qiniu-js";
+require("viewerjs/dist/viewer.css");
 
-import VueI18n from 'vue-i18n'
-Vue.use(VueI18n)
+// import VueI18n from 'vue-i18n'
+// Vue.use(VueI18n)
 export default {
   components: {
     Draggable
@@ -86,11 +131,11 @@ export default {
     },
     token: {
       type: String,
-      default: ''
+      default: ""
     },
     domain: {
       type: String,
-      default: ''
+      default: ""
     },
     multiple: {
       type: Boolean,
@@ -122,7 +167,7 @@ export default {
     },
     action: {
       type: String,
-      default: ''
+      default: ""
     },
     disabled: {
       type: Boolean,
@@ -137,29 +182,31 @@ export default {
     return {
       fileList: this.value.map(item => {
         return {
-          key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
+          key: item.key
+            ? item.key
+            : new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
           url: item.url,
           percent: item.percent ? item.percent : 100,
-          status: item.status ? item.status : 'success'
-        }
+          status: item.status ? item.status : "success"
+        };
       }),
       viewer: null,
-      uploadId: 'upload_' + new Date().getTime(),
+      uploadId: "upload_" + new Date().getTime(),
       editIndex: -1,
       meituIndex: -1
-    }
+    };
   },
   computed: {
     miniWidth() {
       if (this.width > this.height) {
-        return this.height
+        return this.height;
       } else {
-        return this.width
+        return this.width;
       }
     }
   },
   watch: {
-    'fileList': {
+    fileList: {
       deep: true,
       handler(val) {
         // this.$emit('input', this.fileList)
@@ -167,185 +214,253 @@ export default {
     }
   },
   mounted() {
-    this.$emit('input', this.fileList)
+    this.$emit("input", this.fileList);
   },
   methods: {
     handleChange() {
-      const files = this.$refs.uploadInput.files
+      const files = this.$refs.uploadInput.files;
 
       for (let i = 0; i < files.length; i++) {
-        const file = files[i]
-        const reader = new FileReader()
-        const key = (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999)
-        reader.readAsDataURL(file)
+        const file = files[i];
+        const reader = new FileReader();
+        const key =
+          new Date().getTime() + "_" + Math.ceil(Math.random() * 99999);
+        reader.readAsDataURL(file);
         reader.onload = () => {
           if (this.editIndex >= 0) {
             this.$set(this.fileList, this.editIndex, {
               key,
               url: reader.result,
               percent: 0,
-              status: 'uploading'
-            })
+              status: "uploading"
+            });
 
-            this.editIndex = -1
+            this.editIndex = -1;
           } else {
             this.fileList.push({
               key,
               url: reader.result,
               percent: 0,
-              status: 'uploading'
-            })
+              status: "uploading"
+            });
           }
 
           this.$nextTick(() => {
-            this.uplaodAction(reader.result, file, key)
+            this.uplaodAction(reader.result, file, key);
             // if (this.isQiniu) {
             //   this.uplaodAction2(reader.result, file, key)
             // } else {
             //   this.uplaodAction(reader.result, file, key)
             // }
-          })
-        }
+          });
+        };
       }
-      this.$refs.uploadInput.value = []
+      this.$refs.uploadInput.value = [];
     },
     uplaodAction(res, file, key) {
       // eslint-disable-next-line no-unused-vars
-      const changeIndex = this.fileList.findIndex(item => item.key === key)
-      const xhr = new XMLHttpRequest()
+      const changeIndex = this.fileList.findIndex(item => item.key === key);
+      const xhr = new XMLHttpRequest();
 
-      const url = '/api-web/uploadFile'
-      xhr.open('POST', url, true)
+      const url = "/api-web/uploadFile";
+      xhr.open("POST", url, true);
       // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
 
-      const formData = new FormData()
-      formData.append('file', file)
+      const formData = new FormData();
+      formData.append("file", file);
 
-      xhr.send(formData)
+      xhr.send(formData);
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4) {
-          const tempData = JSON.parse(xhr.response)
-          const resData = tempData.data
-          var uploadUrl = ''
-          if (resData.url !== undefined && resData.url !== null && resData.url !== '') {
-            uploadUrl = resData.url
-          } else if (resData.data !== undefined && resData.data !== null && resData.data !== '') {
-            uploadUrl = resData.data
+          const tempData = JSON.parse(xhr.response);
+          const resData = tempData.data;
+          var uploadUrl = "";
+          if (
+            resData.url !== undefined &&
+            resData.url !== null &&
+            resData.url !== ""
+          ) {
+            uploadUrl = resData.url;
+          } else if (
+            resData.data !== undefined &&
+            resData.data !== null &&
+            resData.data !== ""
+          ) {
+            uploadUrl = resData.data;
           }
           if (resData && uploadUrl) {
-            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-              url: uploadUrl,
-              percent: 100
-            })
+            this.$set(
+              this.fileList,
+              this.fileList.findIndex(item => item.key === key),
+              {
+                ...this.fileList[
+                  this.fileList.findIndex(item => item.key === key)
+                ],
+                url: uploadUrl,
+                percent: 100
+              }
+            );
             setTimeout(() => {
-              this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-                ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-                status: 'success'
-              })
-              this.$emit('input', this.fileList)
-            }, 200)
+              this.$set(
+                this.fileList,
+                this.fileList.findIndex(item => item.key === key),
+                {
+                  ...this.fileList[
+                    this.fileList.findIndex(item => item.key === key)
+                  ],
+                  status: "success"
+                }
+              );
+              this.$emit("input", this.fileList);
+            }, 200);
           } else {
-            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-              status: 'error'
-            })
-            this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
+            this.$set(
+              this.fileList,
+              this.fileList.findIndex(item => item.key === key),
+              {
+                ...this.fileList[
+                  this.fileList.findIndex(item => item.key === key)
+                ],
+                status: "error"
+              }
+            );
+            this.fileList.splice(
+              this.fileList.findIndex(item => item.key === key),
+              1
+            );
           }
         }
-      }
-      xhr.onprogress = (res) => {
+      };
+      xhr.onprogress = res => {
         if (res.total && res.loaded) {
-          this.$set(this.fileList[this.fileList.findIndex(item => item.key === key)], 'percent', res.loaded / res.total * 100)
+          this.$set(
+            this.fileList[this.fileList.findIndex(item => item.key === key)],
+            "percent",
+            (res.loaded / res.total) * 100
+          );
         }
-      }
+      };
     },
     uplaodAction2(res, file, key) {
-      const _this = this
-      const observable = qiniu.upload(file, key, this.token, {
-        fname: key,
-        mimeType: []
-      }, {
-        useCdnDomain: true,
-        region: qiniu.region.z2
-      })
+      const _this = this;
+      const observable = qiniu.upload(
+        file,
+        key,
+        this.token,
+        {
+          fname: key,
+          mimeType: []
+        },
+        {
+          useCdnDomain: true,
+          region: qiniu.region.z2
+        }
+      );
       observable.subscribe({
         next(res) {
-          _this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
+          _this.$set(
+            _this.fileList[_this.fileList.findIndex(item => item.key === key)],
+            "percent",
+            parseInt(res.total.percent)
+          );
         },
         // eslint-disable-next-line handle-callback-err
         error(err) {
-          _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
-            ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-            status: 'error'
-          })
-          _this.fileList.splice(_this.fileList.findIndex(item => item.key === key), 1)
+          _this.$set(
+            _this.fileList,
+            _this.fileList.findIndex(item => item.key === key),
+            {
+              ..._this.fileList[
+                _this.fileList.findIndex(item => item.key === key)
+              ],
+              status: "error"
+            }
+          );
+          _this.fileList.splice(
+            _this.fileList.findIndex(item => item.key === key),
+            1
+          );
         },
         complete(res) {
-          _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
-            ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-            url: _this.domain + res.key,
-            percent: 100
-          })
+          _this.$set(
+            _this.fileList,
+            _this.fileList.findIndex(item => item.key === key),
+            {
+              ..._this.fileList[
+                _this.fileList.findIndex(item => item.key === key)
+              ],
+              url: _this.domain + res.key,
+              percent: 100
+            }
+          );
           setTimeout(() => {
-            _this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
-              ..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
-              status: 'success'
-            })
-            _this.$emit('input', _this.fileList)
-          }, 200)
+            _this.$set(
+              _this.fileList,
+              _this.fileList.findIndex(item => item.key === key),
+              {
+                ..._this.fileList[
+                  _this.fileList.findIndex(item => item.key === key)
+                ],
+                status: "success"
+              }
+            );
+            _this.$emit("input", _this.fileList);
+          }, 200);
         }
-      })
+      });
     },
     handleRemove(key) {
-      this.fileList.splice(this.fileList.findIndex(item => item.key === key), 1)
+      this.fileList.splice(
+        this.fileList.findIndex(item => item.key === key),
+        1
+      );
     },
     handleEdit(key) {
-      this.editIndex = this.fileList.findIndex(item => item.key === key)
+      this.editIndex = this.fileList.findIndex(item => item.key === key);
 
-      this.$refs.uploadInput.click()
+      this.$refs.uploadInput.click();
     },
     handleMeitu(key) {
-      this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
+      this.$emit("on-meitu", this.fileList.findIndex(item => item.key === key));
     },
     handleAdd() {
       if (!this.disabled) {
-        this.editIndex = -1
-        this.$refs.uploadInput.click()
+        this.editIndex = -1;
+        this.$refs.uploadInput.click();
       }
     },
     handlePreviewFile(key) {
-      this.viewer && this.viewer.destroy()
-      this.uploadId = 'upload_' + new Date().getTime()
+      this.viewer && this.viewer.destroy();
+      this.uploadId = "upload_" + new Date().getTime();
 
       this.$nextTick(() => {
-        this.viewer = new Viewer(document.getElementById(this.uploadId))
-        this.viewer.view(this.fileList.findIndex(item => item.key === key))
-      })
+        this.viewer = new Viewer(document.getElementById(this.uploadId));
+        this.viewer.view(this.fileList.findIndex(item => item.key === key));
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
-.fm-uplaod-container{
-  .is-disabled{
+.fm-uplaod-container {
+  .is-disabled {
     position: relative;
 
-    &::after{
+    &::after {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       // background: rgba(0,0,0,.1);
-      content: '';
+      content: "";
       display: block;
-      cursor:not-allowed;
+      cursor: not-allowed;
     }
   }
 
-  .upload-file{
+  .upload-file {
     margin: 0 10px 10px 0;
     display: inline-flex;
     justify-content: center;
@@ -358,30 +473,30 @@ export default {
     box-sizing: border-box;
     position: relative;
     vertical-align: top;
-    &:hover{
-      .uplaod-action{
+    &:hover {
+      .uplaod-action {
         display: flex;
       }
     }
-    .uplaod-action{
+    .uplaod-action {
       position: absolute;
       // top: 0;
       // height: 30px;
       bottom: 0;
       left: 0;
       right: 0;
-      background: rgba(0,0,0,0.6);
+      background: rgba(0, 0, 0, 0.6);
       display: none;
       justify-content: center;
       align-items: center;
-      i{
+      i {
         color: #fff;
         cursor: pointer;
         margin: 0 5px;
       }
     }
-    &.is-success{
-      .item-status{
+    &.is-success {
+      .item-status {
         position: absolute;
         right: -15px;
         top: -6px;
@@ -390,8 +505,8 @@ export default {
         background: #13ce66;
         text-align: center;
         transform: rotate(45deg);
-        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
-        &>i{
+        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+        & > i {
           font-size: 12px;
           margin-top: 11px;
           color: #fff;
@@ -399,41 +514,41 @@ export default {
         }
       }
     }
-    &.uploading{
-      &:before{
+    &.uploading {
+      &:before {
         display: block;
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(0,0,0,0.3);
+        background: rgba(0, 0, 0, 0.3);
       }
     }
-    .upload-progress{
+    .upload-progress {
       position: absolute;
-      .el-progress__text{
+      .el-progress__text {
         color: #fff;
         font-size: 16px !important;
       }
     }
-    img{
+    img {
       max-width: 100%;
       max-height: 100%;
       vertical-align: middle;
     }
   }
-  .el-upload--picture-card{
+  .el-upload--picture-card {
     position: relative;
     overflow: hidden;
-    .el-icon-plus{
+    .el-icon-plus {
       position: absolute;
       top: 50%;
       left: 50%;
     }
   }
-  .upload-input{
+  .upload-input {
     position: absolute;
     top: 0;
     left: 0;
@@ -444,16 +559,16 @@ export default {
     cursor: pointer;
   }
 
-  .drag-img-list{
+  .drag-img-list {
     display: inline;
 
-    .ghost{
+    .ghost {
       position: relative;
       &::after {
         width: 100%;
         height: 100%;
         display: block;
-        content: '';
+        content: "";
         background: #fbfdff;
         position: absolute;
         top: 0;
@@ -464,13 +579,13 @@ export default {
       }
     }
 
-    &>div{
+    & > div {
       cursor: move;
     }
   }
 }
 
-.viewer-container{
+.viewer-container {
   z-index: 9999 !important;
 }
 </style>