添加了物性上传文件按钮

pages/soil-test-manage/test-input/BatchUploadPhysical.vue

+<template>
+  <div>
+    <Modal v-model="showEditModal" :mask-closable="false" width="600">
+      <p slot="header">{{modalTitle}}</p>
+      <div>
+        <Upload
+          :action="action"
+          :show-upload-list="false"
+          :before-upload="_beupload"
+          multiple
+        >
+          <Button type="dashed" icon="ios-cloud-upload-outline">上传文件（小于50MB）</Button>
+        </Upload>
+        <div>
+          <Card :dis-hover="true" style="width: 100%;height: 400px;overflow: auto;">
+            <p slot="title">已上传文件列表</p>
+            <div v-for="(item,index) in fileList" :key="index" class="file-upload-list">
+              <div>
+                <div class="file-upload-list-cover">
+                  <Icon @click.native.stop="_handleRemove(item)" type="md-trash" style="color: white;font-size: 20px;"></Icon>
+                </div>
+              </div>
+              {{item.fileName }}
+            </div>
+          </Card>
+        </div>
+      </div>
+      <div slot="footer" class="btn-width">
+        <Button @click="showEditModal = false">取消</Button>
+        <Button @click="_mutipleUpload" :loading="isLoading" type="primary">{{btnName}}</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+/**
+ * 上传文件，在文件夹下
+ */
+import axios from 'axios'
+import global from '../../../api/config'
+import loading from '../../../api/loading'
+
+export default {
+  data() {
+    return {
+      id: '',
+      ID: '',
+      action: '',
+      modalTitle: '',
+      showEditModal: false,
+      name: '',
+      isLoading: false,
+      btnName: '上传',
+      fileList: []
+    }
+  },
+  methods: {
+    _open(obj) {
+      this.fileList = []
+      this.showEditModal = true
+      this.ID = obj
+      this.modalTitle = '上传文件'
+    },
+    _beupload(file) {
+      // 单个文件上传超过50M时，取消上传
+      const isLt50M = file.size / 1024 / 1024 < 50
+      const fileName = file.name.split('.')[0]
+      if (!isLt50M) {
+        this.$Message.warning({
+          content: '文件 ' + fileName + ' 大小超多50M，请重新上传!',
+          duration: 3
+        })
+        this.isLoading = false
+      } else {
+        // 动态循环给文件命名
+        const temObj = {
+          file: file,
+          fileName: fileName
+        }
+        this.fileList.push(temObj)
+      }
+      return false
+    },
+    _mutipleUpload() {
+      if (this.fileList.length > 0 && this.btnName === '上传') {
+        this.isLoading = true
+        this.btnName = '上传中...'
+        // 创建formula对象
+        const formData = new FormData()
+        formData.append('entrustId', this.ID)
+        // 多个文件
+        for (let i = 0; i < this.fileList.length; i++) {
+          formData.append('file' + i, this.fileList[i].file)
+        }
+        const config = {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        }
+        const instanceFile = axios.create()
+        instanceFile.defaults.withCredentials = true
+        // 发起请求
+        instanceFile
+          .post(
+            global.baseURL +
+              '/soil/v1/experiment/upload_dynamics_collect/' +
+              this.ID,
+            formData,
+            {
+              headers: config
+            }
+          )
+          .then(res => {
+            if (res.data.code === '1') {
+              this.$Message.success('上传成功！')
+              this.showEditModal = false
+              this.$emit('on-result-change')
+            } else if (res.data.code === '0') {
+              loading.toast.show(res.data.code, res.data.msg)
+              this.$Message.error('操作失败')
+            }
+            this._resetLoading()
+          })
+          .catch(err => {
+            console.log(err)
+            this._resetLoading()
+          })
+      } else {
+        this.$Message.warning('请至少上传一个文件')
+        this._resetLoading()
+      }
+    },
+    _resetLoading() {
+      this.isLoading = false
+      this.btnName = '上传'
+    },
+    // 删除对应的上传的文件
+    _handleRemove(data) {
+      const index = this.fileList.findIndex(item => item === data)
+      this.fileList.splice(index, 1)
+    }
+  }
+}
+</script>
+<style>
+.file-upload-list {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 4px;
+}
+.file-upload-list:hover .file-upload-list-cover {
+  display: block;
+}
+.file-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+</style>

pages/soil-test-manage/test-input/item-tabs/ItemRightList.vue

@@ -60,6 +60,7 @@
     <Operation ref="Operation"></Operation>
     <importModal ref="importModal"></importModal>
     <ItemBatchUpload ref="batchUpload"></ItemBatchUpload>
+    <BatchUploadPhysical ref="batchUploadPhysical"></BatchUploadPhysical>
     <OtherItemBatchUpload ref="otherItemBatchUpload"></OtherItemBatchUpload>
   </div>
 </template>
@@ -77,6 +78,7 @@ import CollectFileManage from '../CollectFileManage'
 import Reason from '../../../../components/base/Reason'
 import Operation from '../../../../components/operation/ItemOperation'
 import importModal from '../../../../components/import/GDSImport'
+import BatchUploadPhysical from '../BatchUploadPhysical'
 import CreateReport from './CreateReport'
 import ItemBatchUpload from './ItemBatchUpload'
 import OtherItemBatchUpload from './OtherItemBatchUpload'
@@ -95,7 +97,8 @@ export default {
     Operation,
     importModal,
     ItemBatchUpload,
-    OtherItemBatchUpload
+    OtherItemBatchUpload,
+    BatchUploadPhysical
   },
   data() {
     return {
@@ -172,6 +175,11 @@ export default {
         {
           type: 'success',
           id: '',
+          name: '物性文件上传采集'
+        },
+        {
+          type: 'success',
+          id: '',
           name: '界限含水率上传采集'
         }
       ],
@@ -514,6 +522,9 @@ export default {
         case '力学文件上传采集':
           this._batchUpload()
           break
+        case '物性文件上传采集':
+          this._batchUploadPhysical()
+          break
         case '界限含水率上传采集':
           this._otherBatchUpload()
           break
@@ -522,6 +533,9 @@ export default {
     _batchUpload() {
       this.$refs.batchUpload._open(this.entrustId)
     },
+    _batchUploadPhysical() {
+      this.$refs.batchUploadPhysical._open(this.entrustId)
+    },
     _otherBatchUpload() {
       this.$refs.otherItemBatchUpload._open(this.entrustId)
     },