抽象上传组件，代码重构

src/views/modules/common/upload-component.vue

@@ -108,11 +108,14 @@
           return
         }
         let ext = getFileExt(file.name)
-        if (ext === ('jpg' || 'jpeg' || 'png' || 'gif')) {
+        console.log('ext = ' + ext)
+        if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
+          console.log('ext is a picture ')
           this.previewPath = downloadUrl + file.url
           this.previewName = file.name
           this.previewVisible = true
         } else {
+          console.log('ext is not a picture ')
           // 弹出新页面显示下载文件
           window.open(downloadUrl + file.url)
         }
@@ -123,7 +126,7 @@
       },
       // 超限
       handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+        this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
       }
     }
   }

src/views/modules/cus/communicate-add-or-update.vue

@@ -51,7 +51,6 @@
           </el-form-item>
       </el-row>
       <el-row class="my-row">
-<!--        <upload-component :display="display" :title="'沟通扫描件'" :accept="'image/*'" :file-list="fileList"/>-->
         <upload-component :display="display" :title="'沟通扫描件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
       </el-row>
       <div class="title"><span style="color: red">*</span> 订单产品明细</div>

src/views/modules/cus/contract-add-or-update.vue

@@ -83,24 +83,7 @@
           <div class="title">沟通信息表附件</div>
         </el-row>
         <el-row class="my-row">
-          <div class="title"><span style="color: red">*</span> 合同评审表</div>
-          <el-upload
-            class="upload-demo"
-            ref="upload"
-            :multiple="true"
-            action="#"
-            accept="image/jpeg,image/gif,image/png"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :on-change="handleChange"
-            :file-list="fileList"
-            :limit="5"
-            :on-exceed="handleExceed"
-            :auto-upload="false">
-            <el-button slot="trigger" size="small" type="primary" v-show="!display">选取文件</el-button>
-            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="!display">开始上传</el-button>
-            <div slot="tip" class="el-upload__tip" v-show="!display">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
-          </el-upload>
+          <upload-component :display="display" :title="'合同评审表'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -118,10 +101,11 @@
 <script>
   import { getCoCode, geTreDetail } from '@/api/cus'
   import { getDictList } from '@/api/dict'
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
   import { dealStepData, dealStepLogs } from '@/api/util'
+  import UploadComponent from '../common/upload-component'
   export default {
     name: 'stock-order-inbound',
+    components: {UploadComponent},
     computed: {
       orgId: {
         get () { return this.$store.state.user.orgId }
@@ -152,11 +136,7 @@
           // name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
           // cellName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }]
         },
-        display: false,
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false
+        display: false
       }
     },
     watch: {
@@ -207,44 +187,9 @@
           }
         })
       },
-      submitUpload () {
-        // this.$refs.upload.submit()
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
-          } else {
-            this.$message.error('上传失败')
-          }
-        })
-      },
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
-      },
-      handleChange (file, fileList) {
+      uploadSuccess (fileList) {
         this.fileList = fileList
       },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {

src/views/modules/msg-center/approveTo.vue

@@ -11,19 +11,7 @@
         </el-form-item>
       </el-row>
       <el-row class="my-row">
-        <div class="title">审批附件</div>
-        <el-upload
-          v-show="!display"
-          class="upload-demo"
-          ref="upload"
-          action="https://jsonplaceholder.typicode.com/posts/"
-          :on-preview="handlePreview"
-          :on-remove="handleRemove"
-          :file-list="fileList"
-          :auto-upload="false">
-          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
-        </el-upload>
+        <upload-component :display="display" :title="'审批附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
       </el-row>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -36,8 +24,10 @@
 
 <script>
   // import { getcoCode, getReviewType, getreDetail } from '@/api/cus'
+  import UploadComponent from '../common/upload-component'
   export default {
     name: 'notice-add-or-update',
+    components: {UploadComponent},
     data () {
       return {
         visible: false,
@@ -69,14 +59,8 @@
         }
         this.dataForm.busiId = id
       },
-      submitUpload () {
-        this.$refs.upload.submit()
-      },
-      handleRemove (file, fileList) {
-        console.log(file, fileList)
-      },
-      handlePreview (file) {
-        console.log(file)
+      uploadSuccess (fileList) {
+        this.fileList = fileList
       },
       // 表单提交
       dataFormSubmit (val) {

src/views/modules/notice/notice-add-or-update.vue

@@ -31,32 +31,15 @@
         </el-row>
         <el-row class="my-row">
           <el-form-item label="公告内容" prop="content">
-            <el-input v-model="dataForm.content" :disabled="display" placeholder="公告内容"></el-input>
+            <el-input type="textarea" v-model="dataForm.content" :disabled="display" placeholder="公告内容"></el-input>
           </el-form-item>
         </el-row>
         <el-row class="my-row">
-          <div class="title"><span style="color: red">*</span> 公告附件</div>
-          <el-upload
-            class="upload-demo"
-            ref="upload"
-            :multiple="true"
-            action="#"
-            accept="image/jpeg,image/gif,image/png"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :on-change="handleChange"
-            :file-list="fileList"
-            :limit="5"
-            :on-exceed="handleExceed"
-            :auto-upload="false">
-            <el-button v-show="!display" slot="trigger" size="small" type="primary">选取文件</el-button>
-            <el-button v-show="!display" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
-            <div v-show="!display" slot="tip" class="el-upload__tip">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
-          </el-upload>
+          <upload-component :display="display" :title="'公告附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
         </el-row>
         <el-row class="my-row" style="margin-top: 10px">
           <el-form-item label="备注说明" prop="notes">
-            <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
+            <el-input type="textarea" v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
           </el-form-item>
         </el-row>
         <el-row>
@@ -76,21 +59,17 @@
         <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
       </span>
     </el-dialog>
-    <!-- 图片预览 -->
-    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
-      <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
-    </el-dialog>
   </div>
 </template>
 
 <script>
   import { getNoticeDetail, publishNotice } from '@/api/notice'
   import UserComponents from '../common/user-components'
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
   import { getDictList } from '@/api/dict'
+  import UploadComponent from '../common/upload-component'
   export default {
     name: 'notice-add-or-update',
-    components: {UserComponents},
+    components: {UploadComponent, UserComponents},
     data () {
       return {
         visible: false,
@@ -104,11 +83,7 @@
           level: [{ required: true, message: '请选择级别', trigger: 'change' }],
           content: [{ required: true, message: '公告内容不能为空', trigger: 'blur' }]
         },
-        display: false,
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false
+        display: false
       }
     },
     methods: {
@@ -140,43 +115,6 @@
           }
         })
       },
-      submitUpload () {
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
-          } else {
-            this.$message.error('上传失败')
-          }
-        })
-      },
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
-      },
-      handleChange (file, fileList) {
-        this.fileList = fileList
-      },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -222,6 +160,9 @@
       },
       receiverChange (val) {
         this.dataForm.receivers = val
+      },
+      uploadSuccess (fileList) {
+        this.fileList = fileList
       }
     }
   }

src/views/modules/notice/notice.vue

@@ -34,6 +34,7 @@
         prop="title"
         header-align="center"
         align="center"
+        min-width="160"
         label="公告主题名称">
       </el-table-column>
       <el-table-column
@@ -85,6 +86,8 @@
         prop="notes"
         header-align="center"
         align="center"
+        width="180"
+        :show-tooltip-when-overflow="true"
         label="备注">
       </el-table-column>
       <el-table-column

src/views/modules/order/order-add-or-update.vue

@@ -56,29 +56,11 @@
           </el-col>
         </el-row>
         <el-row class="my-row">
-          <el-form-item label="合同扫描件" prop="attachList">
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              :multiple="true"
-              action="#"
-              accept="image/jpeg,image/gif,image/png"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :on-change="handleChange"
-              :file-list="fileList"
-              :limit="5"
-              :on-exceed="handleExceed"
-              :auto-upload="false">
-              <el-button slot="trigger" size="small" type="primary" v-show="!display">选取文件</el-button>
-              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="!display">开始上传</el-button>
-              <div slot="tip" class="el-upload__tip" v-show="!display">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
-            </el-upload>
-          </el-form-item>
+          <upload-component :display="display" :title="'合同扫描件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
         </el-row>
-        <el-row class="my-row">
+        <el-row class="my-row" style="margin-top: 20px">
           <el-form-item label="备注说明" prop="notes">
-            <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
+            <el-input type="textarea" v-model="dataForm.notes" :disabled="display" placeholder="备注说明"></el-input>
           </el-form-item>
         </el-row>
         <el-row class="my-row">
@@ -166,10 +148,6 @@
           <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
     </el-dialog>
-    <!-- 图片预览 -->
-    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
-      <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
-    </el-dialog>
     <template-chose v-if="productListVisible" ref="productList" @addItems="addProductItems" />
   </div>
 </template>
@@ -177,14 +155,14 @@
 <script>
   import templateChose from '../product/template-chose'
   import { getOrderDetail } from '@/api/sale'
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
   import { getCusList } from '@/api/cus'
   import UserComponent from '../common/user-component'
   import {toNumber, toPercent} from '@/utils/common'
+  import UploadComponent from '../common/upload-component'
 
   export default {
     name: 'order-add-or-update',
-    components: {UserComponent, templateChose},
+    components: {UploadComponent, UserComponent, templateChose},
     computed: {
       orgId: {
         get () { return this.$store.state.user.orgId }
@@ -201,10 +179,6 @@
         id: 0,
         productDetails: [],
         dataForm: {},
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false,
         dataRule: {
           cusOrderCode: [{ required: true, message: '客户订单编码不能为空', trigger: 'blur' }],
           customerId: [{ required: true, message: '客户名称不能为空', trigger: 'change' }],
@@ -227,7 +201,6 @@
         await getOrderDetail(this.id).then(({data}) => {
           if (data && data.code === '200') {
             this.dataForm = data.data
-            console.log('data = ' + JSON.stringify(data.data))
             // 附件
             if (data.data.attachList) {
               data.data.attachList.forEach((item) => {
@@ -263,43 +236,9 @@
           }
         })
       },
-      submitUpload () {
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
-          } else {
-            this.$message.error('上传失败')
-          }
-        })
-      },
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      handleChange (file, fileList) {
+      uploadSuccess (fileList) {
         this.fileList = fileList
       },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-      },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
-      },
       // 产品来源（客户）列表
       async remoteCusList (query) {
         if (!query) {

src/views/modules/production/equipment-add-or-update.vue

@@ -65,28 +65,11 @@
           </el-col>
         </el-row>
         <el-row class="my-row">
-          <div class="title"><span style="color: red">*</span> 使用说明书</div>
-          <el-upload
-            class="upload-demo"
-            ref="upload"
-            :multiple="true"
-            action="#"
-            accept="image/jpeg,image/gif,image/png"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :on-change="handleChange"
-            :file-list="fileList"
-            :limit="5"
-            :on-exceed="handleExceed"
-            :auto-upload="false">
-            <el-button v-show="!display" slot="trigger" size="small" type="primary">选取文件</el-button>
-            <el-button v-show="!display" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
-            <div v-show="!display" slot="tip" class="el-upload__tip">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
-          </el-upload>
+          <upload-component :display="display" :title="'使用说明书'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
         </el-row>
-        <el-row class="my-row">
+        <el-row class="my-row" style="margin-top: 20px">
           <el-form-item label="备注" prop="notes">
-            <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注"></el-input>
+            <el-input type="textarea" v-model="dataForm.notes" :disabled="display" placeholder="备注"></el-input>
           </el-form-item>
         </el-row>
       </el-form>
@@ -101,11 +84,11 @@
 <script>
   import { getEquipmentDetail } from '@/api/production'
   import UserComponent from '../common/user-component'
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
+  import uploadComponent from '../common/upload-component'
   export default {
     name: 'equipment-add-or-update',
     components: {
-      UserComponent
+      UserComponent, uploadComponent
     },
     data () {
       return {
@@ -126,11 +109,7 @@
           manufacturers: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
           verificationDate: [{ required: true, message: '检定日期不能为空', trigger: 'change' }],
           validityDate: [{ required: true, message: '检定有效期不能为空', trigger: 'change' }]
-        },
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false
+        }
       }
     },
     methods: {
@@ -200,42 +179,8 @@
           }
         })
       },
-      submitUpload () {
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
-          } else {
-            this.$message.error('上传失败')
-          }
-        })
-      },
-      handleRemove (file, fileList) {
+      uploadSuccess (fileList) {
         this.fileList = fileList
-      },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
-      },
-      handleChange (file, fileList) {
-        this.fileList = fileList
-      },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
       }
     }
   }

src/views/modules/tech/draw-add-or-update.vue

@@ -18,44 +18,23 @@
           <el-form-item label="备注" prop="notes">
             <el-input v-model="dataForm.notes" :disabled="display" placeholder="备注"></el-input>
           </el-form-item>
-          <el-form-item label="图纸" prop="attachList">
-            <el-upload
-               class="upload-demo"
-               ref="upload"
-               :multiple="true"
-               action="#"
-               accept="image/jpeg,image/gif,image/png"
-               :on-preview="handlePreview"
-               :on-remove="handleRemove"
-               :on-change="handleChange"
-               :file-list="fileList"
-               :limit="5"
-               :on-exceed="handleExceed"
-               :auto-upload="false">
-              <el-button slot="trigger" size="small" type="primary" v-show="!display">选取文件</el-button>
-              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="!display">开始上传</el-button>
-              <div slot="tip" class="el-upload__tip" v-show="!display">只能上传jpg/png文件，最多5张图片，且每张图片不超过10M</div>
-            </el-upload>
-          </el-form-item>
+          <upload-component :display="display" :title="'图纸'" :accept="'image/*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="visible = false">取消</el-button>
           <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
       </el-dialog>
-      <!-- 图片预览 -->
-      <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
-        <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
-      </el-dialog>
     </div>
 </template>
 
 <script>
   import { getDrawingDetail } from '@/api/product'
-  import { uploadUrl, downloadUrl, uploadFiles } from '@/api/file'
+  import UploadComponent from '../common/upload-component'
 
   export default {
     name: 'add-or-update',
+    components: {UploadComponent},
     computed: {
       orgId: {
         get () { return this.$store.state.user.orgId }
@@ -74,10 +53,6 @@
         dataList: [],
         id: 0,
         dataForm: {},
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false,
         optionsProducts: [],
         dataRule: {
           drawingName: [{ required: true, message: '图纸名称不能为空', trigger: 'blur' }],
@@ -114,47 +89,12 @@
           }
         })
       },
-      submitUpload () {
-        // this.$refs.upload.submit()
-        if (this.fileList.length === 0) {
-          return this.$message.warning('请选取文件后再上传')
-        }
-        const formData = new FormData()
-        this.fileList.forEach((file) => {
-          formData.append('file', file.raw)
-        })
-        uploadFiles(formData).then(({data}) => {
-          if (data && data.code === '200') {
-            data.data.forEach((item) => {
-              let fileData = this.fileList.find((file) => file.name === item.originFileName)
-              fileData.url = item.fileUrl
-            })
-            this.$message.success('上传成功')
-          } else {
-            this.$message.error('上传失败')
-          }
-        })
-      },
-      handleRemove (file, fileList) {
-        this.fileList = fileList
-      },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
-      },
-      handleChange (file, fileList) {
-        this.fileList = fileList
-      },
-      handleExceed (files, fileList) {
-        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-      },
       validateField (type) {
         this.$refs.dataForm.validateField(type)
       },
+      uploadSuccess (fileList) {
+        this.fileList = fileList
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {

src/views/modules/tech/product-add-or-update.vue

@@ -56,16 +56,7 @@
             </el-col>
             <el-col :span="16">
               <el-form-item label="产品图纸" prop="drawingIdList">
-                <el-upload v-if="display"
-                           class="upload-demo"
-                           ref="upload"
-                           :multiple="true"
-                           action="#"
-                           accept="image/jpeg,image/gif,image/png"
-                           :on-preview="handlePreview"
-                           :file-list="fileList"
-                           :auto-upload="false">
-                </el-upload>
+                <upload-component v-if="display" :display="display" :title="'产品图纸'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
                 <el-select v-else
                            v-model="dataForm.drawingIdList"
                            filterable
@@ -203,10 +194,6 @@
           <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
       </el-dialog>
-      <!-- 图片预览 -->
-      <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
-        <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
-      </el-dialog>
       <template-chose v-if="productListVisible" ref="productList" @addItems="addProductItems" />
       <templateChoseMaterial v-if="materialListVisible" ref="materialList" @addItems="addMaterialItems"/>
     </div>
@@ -217,12 +204,12 @@
   import templateChoseMaterial from '../product/template-chose-material'
   import { getDictList } from '@/api/dict'
   import { getProductDetail, getTechList, getDrawList } from '@/api/product'
-  import { uploadUrl, downloadUrl } from '@/api/file'
   import { getCusList } from '@/api/cus'
+  import UploadComponent from '../common/upload-component'
 
   export default {
     name: 'product-add-or-update',
-    components: {templateChose, templateChoseMaterial},
+    components: {UploadComponent, templateChose, templateChoseMaterial},
     computed: {
       orgId: {
         get () { return this.$store.state.user.orgId }
@@ -251,10 +238,6 @@
         dataForm: {
           displayProductList: false
         },
-        uploadUrl: uploadUrl,
-        previewPath: '',
-        previewName: '',
-        previewVisible: false,
         dataRule: {
           productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
           productSpec: [{ required: true, message: '产品规格不能为空', trigger: 'blur' }],
@@ -332,13 +315,8 @@
           }
         })
       },
-      handlePreview (file) {
-        if (file && file.url) {
-          // 获取文件路径
-          this.previewPath = downloadUrl + file.url
-          this.previewName = file.name
-          this.previewVisible = true
-        }
+      uploadSuccess (fileList) {
+        this.fileList = fileList
       },
       // 产品来源（客户）列表
       async remoteCusList (query) {