文件上传

src/components/EngineePipe/index.vue

@@ -10,62 +10,97 @@
     <!--          新增主表与节点-->
     <el-dialog :title="title" :visible.sync="open" append-to-body customClass="appendElDialog">
         <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">
-          <el-form-item label="工程类型" prop="type" v-show="!queryParams.id">
-            <el-select v-model="queryParams.type" placeholder="请选择类型" disabled >
-              <el-option
-                v-for="e in dict.type.engin_type"
-                :key="e.value"
-                :label="e.label"
-                :value="e.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="节点类型" prop="zEngineeringNodeBoType">
-            <el-select v-model="queryParams.zEngineeringNodeBo.type" placeholder="请选择节点类型">
-              <el-option
-                v-for="e in dict.type.pipe_jack"
-                :key="e.value"
-                :label="e.label"
-                :value="e.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="工程名称" prop="enginName">
-            <el-input v-model="queryParams.enginName" placeholder="请填写工程名称" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="工程地址" prop="enginAddre">
-            <el-input v-model="queryParams.enginAddre" placeholder="请填写工程地址" maxlength="100"></el-input>
-          </el-form-item>
-          <el-form-item label="工程编码" prop="enginCode">
-            <el-input v-model="queryParams.enginCode" placeholder="请填写工程编码" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="施工单位" prop="constructUnit">
-            <el-input v-model="queryParams.constructUnit" placeholder="请填写施工单位" maxlength="100"></el-input>
-          </el-form-item>
-          <el-form-item label="工程规模" prop="enginScale">
-            <el-input v-model="queryParams.enginScale" placeholder="请填写工程规模" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="施工质量" prop="constructQuality">
-            <el-input v-model="queryParams.constructQuality" placeholder="请填写施工质量" maxlength="50"></el-input>
-          </el-form-item>
-          <el-form-item label="施工进度" prop="constructSchedule">
-            <el-input v-model="queryParams.constructSchedule" placeholder="请填写施工进度" maxlength="50"/>
-          </el-form-item>
-          <el-form-item label="工程地址" prop="constructAddre">
-            <el-input
-              v-model="queryParams.constructAddre"
-              placeholder="请输入内容"
-              maxlength="100"
-            />
-          </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input
-              v-model="queryParams.remark"
-              type="textarea"
-              placeholder="请输入内容"
-              maxlength="255"
-            />
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="工程类型" prop="type" v-show="!queryParams.id">
+                <el-select v-model="queryParams.type" placeholder="请选择类型" disabled >
+                  <el-option
+                    v-for="e in dict.type.engin_type"
+                    :key="e.value"
+                    :label="e.label"
+                    :value="e.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="节点类型" prop="zEngineeringNodeBoType">
+                <el-select v-model="queryParams.zEngineeringNodeBo.type" placeholder="请选择节点类型">
+                  <el-option
+                    v-for="e in dict.type.pipe_jack"
+                    :key="e.value"
+                    :label="e.label"
+                    :value="e.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="工程名称" prop="enginName">
+                <el-input v-model="queryParams.enginName" placeholder="请填写工程名称" maxlength="50"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="工程地址" prop="enginAddre">
+                <el-input v-model="queryParams.enginAddre" placeholder="请填写工程地址" maxlength="100"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="工程编码" prop="enginCode">
+                <el-input v-model="queryParams.enginCode" placeholder="请填写工程编码" maxlength="50"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="施工单位" prop="constructUnit">
+                <el-input v-model="queryParams.constructUnit" placeholder="请填写施工单位" maxlength="100"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="工程规模" prop="enginScale">
+                <el-input v-model="queryParams.enginScale" placeholder="请填写工程规模" maxlength="50"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="施工质量" prop="constructQuality">
+                <el-input v-model="queryParams.constructQuality" placeholder="请填写施工质量" maxlength="50"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="施工进度" prop="constructSchedule">
+                <el-input v-model="queryParams.constructSchedule" placeholder="请填写施工进度" maxlength="50"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="备注" prop="remark">
+                <el-input
+                  v-model="queryParams.remark"
+                  type="textarea"
+                  placeholder="请输入内容"
+                  maxlength="255"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="文件" prop="" v-if="currentType=='put'">
+                <ObsFileUpload ref="obsFileUpload" :file-type="['dwg','dwt','doc','docx','xls','xlsx']" :limit="9999"  :value="queryParams.pics"
+                ></ObsFileUpload>
+              </el-form-item>
+              <el-form-item label="文件" prop="" v-if="currentType=='add'">
+                <ObsFileUpload ref="obsFileUpload" :file-type="['dwg','dwt','doc','docx','xls','xlsx']" :limit="9999"  :value="queryParams.files"
+                ></ObsFileUpload>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">{{keyWork}}</el-button>
@@ -151,7 +186,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="照片" prop="zEngiineeringPhotoBoList" style="width: 100%;">
-          <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']"
+          <ObsImageUpload ref="obsImageUpload" :limit="9999"
                           :value="zEngineeringInfoBo.zEngiineeringPhotoBoList"
                           @input="getUrl"></ObsImageUpload>
         </el-form-item>
@@ -233,6 +268,7 @@ export default {
       nodeType: '1',               // 节点类型
       // 查询参数
       queryParams: {
+        files:[],
         enginId: null,           // 外建工程
         enginName: '',            // 工程名称
         enginAddre: '',            // 工程地址
@@ -380,8 +416,10 @@ export default {
     },
     toNodeDetail() {
       if (this.currentType == 'put') {
+        this.queryParams.files = this.$refs.obsFileUpload.fileList
         this.$refs.childNode.open(this.queryParams, 15)
       } else if (this.currentType == 'add') {
+        this.queryParams.files = this.$refs.obsFileUpload.fileList
         this.$refs.childNode.open(this.queryParams, 10)
       }
     },
@@ -426,11 +464,7 @@ export default {
     height: 85%;
   }
 
-  .el-form-item {
-    margin-bottom: 22px;
-    width: 44%;
-    display: inline-block;
-  }
+
 
   .el-form-item:nth-child(2n+2) {
     margin-left: 5%;

src/components/FileUpload/index.vue

@@ -11,7 +11,6 @@
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
-      class="upload-file-uploader"
       ref="fileUpload"
     >
       <!-- 上传按钮 -->

src/components/ObsImageUpload/indexFile.vue

@@ -0,0 +1,256 @@
+<template>
+  <el-form>
+    <el-upload ref="fileList"
+               :disabled="disabled"
+               :action="uploadImgUrl"
+               :on-success="handleUploadSuccess"
+               :before-upload="handleBeforeUpload"
+               :limit="limit"
+               :on-error="handleUploadError"
+               :on-exceed="handleExceed"
+               :on-remove="handleRemove"
+                name="file"
+               :file-list="fileList"
+               :headers="headers"
+               :class="{hide: this.fileList.length >= this.limit}"
+    >
+      <i class="el-icon-plus abs"></i>
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" slot="tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+<!--    <transition-group class="upload-file-list el-upload-list el-upload-list&#45;&#45;text" name="el-fade-in-linear" tag="ul">-->
+<!--      <li :key="file.url + index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">-->
+<!--        <el-link :href="`${file.url}`" :underline="false" target="_blank">-->
+<!--          <span class="el-icon-document"> {{ file.fileName }} </span>-->
+<!--        </el-link>-->
+<!--        <div class="ele-upload-list__item-content-action">-->
+<!--          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>-->
+<!--        </div>-->
+<!--      </li>-->
+<!--    </transition-group>-->
+  </el-form>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+import {picDel} from "@/api/zdsz/obs";
+import request from "@/utils/request";
+import {delOss} from "@/api/system/oss";
+
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    disabled:{
+      type:Boolean,
+      default: false
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ['dwg','dwt','doc','docx','xls','xlsx'],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      type:"",
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          debugger
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "object") {
+              item = { name: item.fileName, url: item.picUrl };
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 删除文件
+    handleDelete(index) {
+      const obj = this.fileList[index];
+      if(obj!=null) {
+          this.fileList.splice(index, 1);
+      }
+      this.$emit("input", this.fileList);
+    },
+    // 删除图片
+    handleRemove(file, fileList) {
+      debugger
+      const findex = this.fileList.map(f => f.url).indexOf(file.url);
+      if(findex > -1) {
+        if (file.url!=null){
+          this.fileList.splice(findex, 1);
+        }
+      }
+      this.$emit("input", this.fileList);
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      if (res.code == 200) {
+        this.fileList.push({ name: res.data.fileName, url: res.data.url });
+        this.$emit("input", this.fileList);
+        this.loading.close();
+      } else {
+        this.$message.error(res.msg);
+        this.loading.close();
+      }
+    },
+    /**
+     * cad文件类型：dwg，dwt；word文件类型：doc，docx；Excel文件类型：xls,xlsx;
+     * @param file
+     * @returns {boolean}
+     */
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+          let name = '';
+          let flag = false;
+          if (!['dwg','dwt','doc','docx','xls','xlsx'].includes(fileExtension)){
+            name='cad文件类型：dwg，dwt；word文件类型：doc，docx；Excel文件类型：xls,xlsx';
+            flag = true
+          }
+          if (flag==true) {
+            this.$message.error(
+              `文件格式不正确, 规则：${name}!`
+            );
+            return false;
+          }
+          return true
+        }else {
+          return false
+        }
+
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError(res) {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+      this.type=file.name.slice(file.name.lastIndexOf(".")+1);
+      console.log(this.type)
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>
+

src/main.js

@@ -29,7 +29,8 @@ import Editor from "@/components/Editor"
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
-import ObsImageUpload from "@/components/ObsImageUpload"
+import ObsImageUpload from "@/components/ObsImageUpload/index.vue"
+import ObsFileUpload from "@/components/ObsImageUpload/indexFile.vue"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
@@ -57,6 +58,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
+Vue.component('ObsFileUpload', ObsFileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ObsImageUpload', ObsImageUpload)
 Vue.component('ImagePreview', ImagePreview)

src/views/zdsz/engineeringPipeJacking/index.vue

@@ -218,8 +218,8 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="照片" prop="zEngiineeringPhotoBoList" style="width: 100%;">
-                <ObsImageUpload ref="obsImageUpload" :limit="9999" :fileType="['png', 'jpg', 'jpeg']" :value="zEngineeringInfoBo.zEngiineeringPhotoBoList"
-                                @input="getUrl"></ObsImageUpload>
+                <FileUpload ref="obsImageUpload" :limit="9999"  :value="zEngineeringInfoBo.zEngiineeringPhotoBoList"
+                                @input="getUrl"></FileUpload>
               </el-form-item>
               <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
               <el-button @click="nodeCancel">取 消</el-button>