企标制修订立项计划-起草界面-点击上传弹出弹框

src/pages/processCenter/pages/creatProcess/qbzxdlx/step1.vue

@@ -28,21 +28,27 @@
                 placeholder="请输入项目目标"/>
             </el-form-item>
             <el-form-item label="附件" prop="fileName" class="add-form-item form-item-disabled">
-              <div>
-                <el-upload
-                  :action="uploadFileListPath"
-                  show-file-list
-                  :file-list="fileInfoList"
-                  name="file"
-                  accept=".PDF, .pdf, .doc, .DOC, .docx, .DOCX, .xls, .xlsx, .ppt, .pptx, .PPT, .PPTX, .JPG, .JPEG, .PNG, .jpg, .jpeg, .png"
-                  :on-remove="delFileInfo"
-                  :on-success="uploadBackSuccess"
-                  :before-upload="beforeUpload"
-                >
-                  <el-button :disabled="disabledXX"  class="common-button-default" size="mini">
-                    点击上传
-                  </el-button>
-                </el-upload>
+<!--              <div>-->
+<!--                <el-upload-->
+<!--                  :action="uploadFileListPath"-->
+<!--                  show-file-list-->
+<!--                  :file-list="fileInfoList"-->
+<!--                  name="file"-->
+<!--                  accept=".PDF, .pdf, .doc, .DOC, .docx, .DOCX, .xls, .xlsx, .ppt, .pptx, .PPT, .PPTX, .JPG, .JPEG, .PNG, .jpg, .jpeg, .png"-->
+<!--                  :on-remove="delFileInfo"-->
+<!--                  :on-success="uploadBackSuccess"-->
+<!--                  :before-upload="beforeUpload"-->
+<!--                >-->
+<!--                  <el-button :disabled="disabledXX"  class="common-button-default" size="mini">-->
+<!--                    点击上传-->
+<!--                  </el-button>-->
+<!--                </el-upload>-->
+<!--              </div>-->
+              <el-button :disabled="disabledXX"  class="common-button-default" size="mini" @click="uploadFail">
+                点击上传
+              </el-button>
+              <div style="width: 100%;margin-bottom: 13px">
+                <div v-for="(item,index) in fileInfoList" :key="index" style="color: #409eff;cursor:pointer;line-height:30px" class="fileClass">{{ item.name }}</div>
               </div>
             </el-form-item>
           </el-form>
@@ -367,6 +373,23 @@
       :nodeList="nodeListZRBM"
       @checkedRole="drawerCheckZRBM"
     />
+<!--    上传附件-->
+    <el-dialog :visible.sync="uploadDialog" width="400px" title="导入附件">
+      <el-upload
+          :action="uploadFileListPath"
+          show-file-list
+          :file-list="fileInfoList"
+          name="file"
+          accept=".PDF, .pdf, .doc, .DOC, .docx, .DOCX, .xls, .xlsx, .ppt, .pptx, .PPT, .PPTX, .JPG, .JPEG, .PNG, .jpg, .jpeg, .png"
+          :on-remove="delFileInfo"
+          :on-success="uploadBackSuccess"
+          :before-upload="beforeUpload"
+          drag
+      >
+        <i class="el-icon-upload" style="color: #3399ff"></i>
+        <p>点击或拖拽上传文件</p>
+      </el-upload>
+    </el-dialog>
     <!--导入模态窗-->
     <el-dialog width="400px" :visible.sync="importModalshowflag" title="导入文件" :footer-hide="true">
       <el-upload
@@ -427,6 +450,7 @@ export default {
     return {
       disabledXX:!!this.$route.query.disabledXX,
       tableLoading: false,
+      uploadDialog:false,
       importModalshowflag: false,  //导入弹窗
       showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
       importExcelUrl: 'api/att/attFile/uploadNew', // 导入EXCEL文档
@@ -581,6 +605,9 @@ export default {
     })
   },
   methods: {
+    uploadFail(){
+      this.uploadDialog = true
+    },
     onFileExceed() {
       this.$message.error('最多上传一个文件')
     },
@@ -828,7 +855,9 @@ export default {
     // 上传文件成功回调
     uploadBackSuccess(res, file, fileList) {
       if (res.ok) {
+        console.log(res)
         this.fileInfoList.push(res.data)
+        console.log(this.fileInfoList)
         this.$message.success("上传成功");
       } else {
         this.$message.error(res.message);
@@ -1137,7 +1166,7 @@ export default {
   }
 
   /deep/ .el-upload-list {
-    width: 50%;
+    //width: 50%;
     margin-bottom: 10px;
   }