bug fixes

package.json

 {
   "name": "@ezijing/vue-form",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "private": false,
   "description": "基于Vue Element-UI的表单",
   "scripts": {

src/index.js

@@ -20,7 +20,8 @@ import {
   TabPane,
   Icon,
   Upload,
-  Message
+  Message,
+  Image
 } from 'element-ui'
 
 import VueForm from './VueForm'
@@ -56,6 +57,7 @@ const install = function(Vue) {
   Vue.use(TabPane)
   Vue.use(Icon)
   Vue.use(Upload)
+  Vue.use(Image)
   Vue.prototype.$message = Message
   // 遍历注册全局组件
   components.map(component => Vue.component(component.name, component))

src/packages/upload/src/main.vue

@@ -16,6 +16,21 @@
       ref="upload"
       :class="classes"
     >
+      <template v-slot:file="{ file }">
+        <el-image class="el-upload-list__item-thumbnail" :src="file.url">
+          <div slot="error" class="image-slot">
+            <i class="el-icon-document"></i>
+          </div>
+        </el-image>
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="handlePreview(file)">
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span v-if="!uploadDisabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </template>
       <div class="cover">
         <img :src="defaultImage" v-if="defaultImage" class="default-image" />
         <i class="el-icon-plus"></i>
@@ -32,6 +47,11 @@ import httpRequest from '@/utils/axios'
 
 export default {
   name: 'VUpload',
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
   props: {
     options: {
       type: Object,
@@ -44,7 +64,8 @@ export default {
       default() {
         return {}
       }
-    }
+    },
+    disabled: Boolean
   },
   data() {
     return {
@@ -90,6 +111,9 @@ export default {
       return {
         'has-upload': this.hasUpload
       }
+    },
+    uploadDisabled() {
+      return this.disabled || (this.elForm || {}).disabled
     }
   },
   methods: {
@@ -105,7 +129,10 @@ export default {
       let { action, data = {}, headers = {} } = this.options.attrs
       data = Object.assign({ file: xhr.file }, data)
       headers = Object.assign({ 'Content-Type': 'multipart/form-data' })
-      httpRequest.post(action, data, { headers }).then(xhr.onSuccess).catch(xhr.onError)
+      httpRequest
+        .post(action, data, { headers })
+        .then(xhr.onSuccess)
+        .catch(xhr.onError)
     },
     // 上传成功
     handleSuccess(res) {
@@ -135,13 +162,13 @@ export default {
       }
     },
     // 删除
-    handleRemove(file, fileList) {
+    handleRemove(file) {
       let { deleteAction, headers = {} } = this.options.attrs
       file.id &&
         httpRequest
           .post(deleteAction, { item_id: file.id }, { headers })
           .then(res => {
-            this.data[this.options.model] = fileList
+            this.data[this.options.model] = this.data[this.options.model].filter(item => item.id !== file.id)
             this.$message.success(res.message)
           })
           .catch(error => this.$message.error(error.message))
@@ -193,5 +220,12 @@ export default {
       z-index: 1;
     }
   }
+  .image-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 30px;
+  }
 }
 </style>

vue.config.js

@@ -15,7 +15,7 @@ module.exports = {
     },
     proxy: {
       '/api/enrollment': {
-        target: 'http://test-enrollment.ezijing.com',
+        target: 'https://enrollment.ezijing.com',
         ws: true,
         changeOrigin: true,
         pathRewrite: {