tianheng-ui 0.0.40 → 0.0.43

package/packages/formMaking/Upload/index.vue

@@ -1,51 +1,112 @@
 <template>
-  <div class="fm-uplaod-container"
-    :id="uploadId"
-  >
-    <draggable class="drag-img-list"
+  <div class="fm-uplaod-container" :id="uploadId">
+    <draggable
+      class="drag-img-list"
       v-model="fileList"
-      v-bind="{group: uploadId, ghostClass: 'ghost', animation: 200}"
+      v-bind="{ group: uploadId, ghostClass: 'ghost', animation: 200 }"
       :no-transition-on-drag="true"
     >
-      <div 
+      <div
         :id="item.key"
-        :style="{width: width+'px', height: height+'px'}"
-        :class="{uploading: item.status=='uploading', 'is-success': item.status=='success', 'is-diabled': disabled}"
-        class="upload-file" v-for="(item) in fileList" :key="item.key">
+        :style="{ width: width + 'px', height: height + 'px' }"
+        :class="{
+          uploading: item.status == 'uploading',
+          'is-success': item.status == 'success',
+          'is-diabled': disabled
+        }"
+        class="upload-file"
+        v-for="item in fileList"
+        :key="item.key"
+      >
         <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>
+        <el-progress
+          v-if="item.status == 'uploading'"
+          :width="miniWidth * 0.9"
+          class="upload-progress"
+          type="circle"
+          :percentage="item.percent"
+        ></el-progress>
 
-        <label class="item-status" v-if="item.status=='success'">
+        <label class="item-status" v-if="item.status == 'success'">
           <i class="el-icon-upload-success el-icon-check"></i>
         </label>
 
-        <div class="uplaod-action" :style="{height: miniWidth / 4 + 'px'}" v-if="!disabled">
-          <i class="iconfont icon-tupianyulan" :title="$t('fm.upload.preview')" @click="handlePreviewFile(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
-          <i v-if="isEdit" class="iconfont icon-sync1" :title="$t('fm.upload.edit')" @click="handleEdit(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
-          <i v-if="isDelete && fileList.length > min" class="iconfont icon-delete" :title="$t('fm.upload.delete')" @click="handleRemove(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
+        <div
+          class="uplaod-action"
+          :style="{ height: miniWidth / 4 + 'px' }"
+          v-if="!disabled"
+        >
+          <i
+            class="iconfont icon-tupianyulan"
+            title="预览"
+            @click="handlePreviewFile(item.key)"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+          ></i>
+          <i
+            v-if="isEdit"
+            class="iconfont icon-sync1"
+            title="替换"
+            @click="handleEdit(item.key)"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+          ></i>
+          <i
+            v-if="isDelete && fileList.length > min"
+            class="iconfont icon-delete"
+            title="删除"
+            @click="handleRemove(item.key)"
+            :style="{ 'font-size': miniWidth / 8 + 'px' }"
+          ></i>
         </div>
       </div>
     </draggable>
 
-    <div class="el-upload el-upload--picture-card"
-      :class="{'is-disabled': disabled}"
+    <div
+      class="el-upload el-upload--picture-card"
+      :class="{ 'is-disabled': disabled }"
       v-show="(!isQiniu || (isQiniu && token)) && fileList.length < length"
-      :style="{width: width+'px', height: height+'px'}"
+      :style="{ width: width + 'px', height: height + 'px' }"
       @click.self="handleAdd"
     >
-      <i class="el-icon-plus" @click.self="handleAdd" :style="{fontSize:miniWidth/4+'px',marginTop: (-miniWidth/8)+'px', marginLeft: (-miniWidth/8)+'px'}"></i>
-      <input accept="image/*" v-if="multiple"  multiple ref="uploadInput" @change="handleChange" type="file" :style="{width: 0, height: 0}" name="file" class="el-upload__input upload-input">
-      <input accept="image/*" v-else ref="uploadInput" @change="handleChange" type="file" :style="{width:0, height: 0}" name="file" class="el-upload__input upload-input">
+      <i
+        class="el-icon-plus"
+        @click.self="handleAdd"
+        :style="{
+          fontSize: miniWidth / 4 + 'px',
+          marginTop: -miniWidth / 8 + 'px',
+          marginLeft: -miniWidth / 8 + 'px'
+        }"
+      ></i>
+      <input
+        accept="image/*"
+        v-if="multiple"
+        multiple
+        ref="uploadInput"
+        @change="handleChange"
+        type="file"
+        :style="{ width: 0, height: 0 }"
+        name="file"
+        class="el-upload__input upload-input"
+      />
+      <input
+        accept="image/*"
+        v-else
+        ref="uploadInput"
+        @change="handleChange"
+        type="file"
+        :style="{ width: 0, height: 0 }"
+        name="file"
+        class="el-upload__input upload-input"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Viewer from 'viewerjs'
-import Draggable from 'vuedraggable'
+import Viewer from "viewerjs";
+import Draggable from "vuedraggable";
 // import * as qiniu from 'qiniu-js'
-require('viewerjs/dist/viewer.css')
+require("viewerjs/dist/viewer.css");
 export default {
   components: {
     Draggable
@@ -65,11 +126,11 @@ export default {
     },
     token: {
       type: String,
-      default: ''
+      default: ""
     },
     domain: {
       type: String,
-      default: ''
+      default: ""
     },
     multiple: {
       type: Boolean,
@@ -101,226 +162,286 @@ export default {
     },
     action: {
       type: String,
-      default: ''
+      default: ""
     },
     disabled: {
       type: Boolean,
       default: false
     }
   },
-  data () {
+  data() {
     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,
-    }
+      meituIndex: -1
+    };
   },
   computed: {
-    miniWidth () {
+    miniWidth() {
       if (this.width > this.height) {
-        return this.height
+        return this.height;
       } else {
-        return this.width
+        return this.width;
       }
     }
   },
-  mounted () {
-    this.$emit('input', this.fileList)
+  mounted() {
+    this.$emit("input", this.fileList);
   },
   methods: {
-    handleChange () {
-      console.log(this.$refs.uploadInput.files)
-      const files = this.$refs.uploadInput.files
-      
+    handleChange() {
+      console.log(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(() => {
             if (this.isQiniu) {
-              this.uplaodAction2(reader.result, file, key)
+              this.uplaodAction2(reader.result, file, key);
             } else {
-              this.uplaodAction(reader.result, file, key)
+              this.uplaodAction(reader.result, file, key);
             }
-          })
-        }
+          });
+        };
       }
-      this.$refs.uploadInput.value = []
-    }, 
-    uplaodAction (res, file, key) {
-      let changeIndex = this.fileList.findIndex(item => item.key === key)
-      console.log(this.fileList.findIndex(item => item.key === key))
-      const xhr = new XMLHttpRequest()
-      
-      const url = this.action
-      xhr.open('POST', url, true)
+      this.$refs.uploadInput.value = [];
+    },
+    uplaodAction(res, file, key) {
+      let changeIndex = this.fileList.findIndex(item => item.key === key);
+      console.log(this.fileList.findIndex(item => item.key === key));
+      const xhr = new XMLHttpRequest();
+
+      const url = this.action;
+      xhr.open("POST", url, true);
       // xhr.setRequestHeader('Content-Type', 'multipart/form-data')
 
-      let formData = new FormData()
-      formData.append('file', file)
+      let formData = new FormData();
+      formData.append("file", file);
 
       xhr.onreadystatechange = () => {
-        console.log(xhr)
+        console.log(xhr);
         if (xhr.readyState === 4) {
-          
-          let resData = JSON.parse(xhr.response)
+          let resData = JSON.parse(xhr.response);
           if (resData && resData.url) {
-            this.$set(this.fileList, this.fileList.findIndex(item => item.key === key), {
-              ...this.fileList[this.fileList.findIndex(item => item.key === key)],
-              url: resData.url,
-              percent: 100
-            })
+            this.$set(
+              this.fileList,
+              this.fileList.findIndex(item => item.key === key),
+              {
+                ...this.fileList[
+                  this.fileList.findIndex(item => item.key === key)
+                ],
+                url: resData.url,
+                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.upload.onprogress = (res) => {
-        console.log('progress', res)
+      };
+      xhr.upload.onprogress = res => {
+        console.log("progress", 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
+          );
         }
-      }
+      };
 
-      xhr.send(formData)
+      xhr.send(formData);
     },
-    uplaodAction2 (res, file, key) {
-      const _this = this
-      const observable = qiniu.upload(file, key, this.token, {
-        fname: key,
-        mimeType: []
-      }, {
-        useCdnDomain: true,
-      })
+    uplaodAction2(res, file, key) {
+      const _this = this;
+      const observable = qiniu.upload(
+        file,
+        key,
+        this.token,
+        {
+          fname: key,
+          mimeType: []
+        },
+        {
+          useCdnDomain: true
+        }
+      );
       observable.subscribe({
-        next (res) {
-          _this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
-          
+        next(res) {
+          _this.$set(
+            _this.fileList[_this.fileList.findIndex(item => item.key === key)],
+            "percent",
+            parseInt(res.total.percent)
+          );
         },
-        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)
+        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
+          );
         },
-        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
-          })
+        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
+            }
+          );
           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)
+    handleRemove(key) {
+      this.fileList.splice(
+        this.fileList.findIndex(item => item.key === key),
+        1
+      );
     },
-    handleEdit (key) {
-      
-      this.editIndex = this.fileList.findIndex(item => item.key === key)
-      
-      this.$refs.uploadInput.click()
-    },
-    handleMeitu (key) {
+    handleEdit(key) {
+      this.editIndex = this.fileList.findIndex(item => item.key === key);
 
-      this.$emit('on-meitu', this.fileList.findIndex(item => item.key === key))
+      this.$refs.uploadInput.click();
+    },
+    handleMeitu(key) {
+      this.$emit(
+        "on-meitu",
+        this.fileList.findIndex(item => item.key === key)
+      );
     },
-    handleAdd () {
+    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()
-      
-      console.log(this.viewer)
+    handlePreviewFile(key) {
+      this.viewer && this.viewer.destroy();
+      this.uploadId = "upload_" + new Date().getTime();
+
+      console.log(this.viewer);
       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));
+      });
     }
   },
   watch: {
-    'fileList': {
+    fileList: {
       deep: true,
-      handler (val) {
+      handler(val) {
         // this.$emit('input', this.fileList)
       }
     }
   }
-}
+};
 </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;
@@ -333,30 +454,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;
@@ -365,8 +486,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;
@@ -374,41 +495,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;
@@ -419,16 +540,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;
@@ -439,13 +560,13 @@ export default {
       }
     }
 
-    &>div{
+    & > div {
       cursor: move;
     }
   }
 }
 
-.viewer-container{
+.viewer-container {
   z-index: 9999 !important;
 }
 </style>