update

examples/App.vue

@@ -4,8 +4,8 @@
   </div>
 </template>
 <script>
-import registerForm from './kelley-form'
-// import sofiaForm from './sofia-form'
+// import registerForm from './kelley-form'
+import registerForm from './sofia-form'
 
 export default {
   name: 'app',

examples/sofia-form/file.js

@@ -6,13 +6,22 @@ export default {
   get: {
     action: '/zws/v1/enrollment/attachments?project_id=1001',
     callback(data) {
-      data.date_of_starting_to_work = data.date_of_starting_to_work + ''
-      return data
+      let _data = {
+        uploadArrs: []
+      }
+      data.forEach((item, index) => {
+        _data.uploadArrs.push({
+          url: item.file,
+          id: item.id,
+          'sso_file_name': item.sso_file_name
+        })
+      })
+      return _data
     }
   },
   update: {
     action: '/zws/v1/enrollment/profiles',
-    data: { project_id: 1001 },
+    data: { project_id: 1000 },
     callback(data) {
       return data
     }
@@ -24,7 +33,9 @@ export default {
       {
         type: 'upload-form',
         label: '有效身份证件（正面）',
+        'model': 'uploadArrs',
         'action': '/zws/v1/enrollment/attachments',
+        'deleteAction': '/zws/v1/enrollment/attachments',
         'data': {
           'file_type': 10,
           'project_id': 1001

src/components/elem-form/index.js

@@ -20,6 +20,7 @@ import {
   Tabs,
   TabPane,
   Upload,
+  Avatar,
   Progress,
   ColorPicker
 } from 'element-ui'
@@ -68,6 +69,7 @@ const install = function(Vue, opts = {}) {
   Vue.use(Tabs)
   Vue.use(TabPane)
   Vue.use(Upload)
+  Vue.use(Avatar)
   Vue.use(Progress)
   Vue.use(ColorPicker)
 

src/components/elem-form/upload-form/elemInfo.md

@@ -24,7 +24,7 @@
   'label-width': '160px',
   'required': true,
   'disabled': false,
-  'model': 'real_name_cn',
+  'model': 'uploadArrs',
   'action': '',
   'data': {
 

src/components/elem-form/upload-form/src/ajax.js

@@ -28,6 +28,43 @@ function getBody(xhr) {
   }
 }
 
+export function deleteFile (option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return
+  }
+
+  const xhr = new XMLHttpRequest()
+  let action = option.action
+
+  xhr.onerror = function error(e) {
+    option.onError(e)
+  }
+
+  xhr.onload = function onload() {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr))
+    }
+
+    option.onSuccess(getBody(xhr))
+  }
+
+  xhr.open('delete', action, true)
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true
+  }
+
+  const headers = option.headers || {}
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item])
+    }
+  }
+  xhr.send()
+  return xhr
+}
+
 export default function upload(option) {
   if (typeof XMLHttpRequest === 'undefined') {
     return

src/components/elem-form/upload-form/src/uploadForm.vue

@@ -15,13 +15,37 @@
         :before-upload="beforeUploadFile"
         :on-success="onSuccessFile"
         :with-credentials="true"
+        :show-file-list="false"
         v-bind="item.attrs || {}">
         <el-button type="primary">点击上传</el-button>
-        <template v-if="formData[item.model]">
+      </el-upload>
+      <div style="overflow: hidden; padding: 20px 0 0 0;">
+        <template v-if="filesArr.length">
           <!-- 遍历显示文件 -->
-
+          <template v-for="(item, index) in filesArr">
+            <template v-if="/(jpeg)|(jpg)|(png)|(gif)/gi.test(item.url)">
+              <div v-bind:key="item.id" class="show-file">
+                <div class="close" @click="deleteFile(index)">X</div>
+                <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
+                <span class="title">{{ item.sso_file_name }}</span>
+                <div class="hover">
+                  <a target="_blank" :href="item.url">下载</a>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <div v-bind:key="item.id" class="show-file">
+                <div class="close">X</div>
+                <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
+                <span class="title">{{ item.sso_file_name }}</span>
+                <div class="hover">
+                  <a target="_blank" :href="item.url">下载</a>
+                </div>
+              </div>
+            </template>
+          </template>
         </template>
-      </el-upload>
+      </div>
       <div class='info' style="line-height: 1.5;" v-html="item.html"></div>
 
       <!-- <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
@@ -36,7 +60,7 @@
 </template>
 
 <script>
-// import ajax from './ajax'
+import { deleteFile } from './ajax'
 
 export default {
   name: 'UploadForm',
@@ -57,14 +81,105 @@ export default {
   },
   data () {
     return {
+      'project_id': '',
       filesArr: []
     }
   },
   methods: {
     beforeUploadFile (file) {},
     onSuccessFile (response, file, fileList) {
-      debugger
+      response.url = response.file || ''
+      response.sso_file_name = file.name
+      this.filesArr.push(response)
+    },
+    deleteFile (index) {
+      let temp = this.filesArr[index]
+      deleteFile({
+        action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.project_id,
+        onError: () => {},
+        onSuccess: (res) => {
+          if (res.status === 200) {
+            this.filesArr.splice(index, 1)
+          }
+        }
+      })
+    }
+  },
+  watch: {
+    formData: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        /* 单独处理 - ajax结果在组件渲染之后 */
+        if (value[this.item.model] && value[this.item.model].length && !this.filesArr.length) {
+          this.filesArr = value[this.item.model]
+          this.project_id = this.item.data.project_id
+        }
+      }
     }
   }
 }
 </script>
+
+<style lang="scss">
+  .show-file {
+    position: relative;
+    float: left;
+    margin-right: 10px;
+    .close {
+      position: absolute;
+      z-index: 10;
+      right: -10px;
+      top: -10px;
+      width: 20px;
+      height: 20px;
+      color: #fff;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      background: #efefef;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .el-avatar {
+      img {
+        width: 100%;
+      }
+    }
+    .title {
+      position: absolute;
+      left: 0;
+      bottom: 16px;
+      width: 100%;
+      padding-left: 5px;
+      font-size: 12px;
+      line-height: 20px;
+      background: #efefef;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+      box-sizing: border-box;
+    }
+    .hover {
+      display: none;
+      position: absolute;
+      z-index: 9;
+      top: 0;
+      left: 0;
+      height: 100px;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.2);
+      line-height: 100px;
+      text-align: center;
+      a {
+        color: #f1f1f1;
+      }
+    }
+    &:hover {
+      .hover {
+        display: block;
+      }
+    }
+  }
+</style>