多附件上传-交易细项

precision-effect-system/src/main/java/com/zehong/system/domain/TTradeProject.java

@@ -116,6 +116,8 @@ public class TTradeProject extends BaseEntity
 
     private Long queryTradeDeptId;
 
+    private String transactionDetailName;
+
     public String getDealRemark() {
         return dealRemark;
     }
@@ -392,6 +394,14 @@ public class TTradeProject extends BaseEntity
         this.queryTradeDeptId = queryTradeDeptId;
     }
 
+    public String getTransactionDetailName() {
+        return transactionDetailName;
+    }
+
+    public void setTransactionDetailName(String transactionDetailName) {
+        this.transactionDetailName = transactionDetailName;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)

precision-effect-system/src/main/resources/mapper/business/TTradeProjectMapper.xml

@@ -8,6 +8,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="tradeId"    column="trade_id"    />
         <result property="receiptNum"    column="receipt_num"    />
         <result property="relationTransactionProjectId"    column="relation_transaction_project_id"    />
+        <result property="transactionDetailName"    column="transaction_detail_name"    />
         <result property="projectName"    column="project_name"    />
         <result property="applyId"    column="apply_id"    />
         <result property="applyDeptId"    column="apply_dept_id"    />
@@ -43,6 +44,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             trade_id,
             receipt_num,
             relation_transaction_project_id,
+            transaction_detail_name,
             apply_id,
             apply_dept_id,
             apply_dept_manager_id,
@@ -131,6 +133,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="receiptNum != null">receipt_num,</if>
             <if test="relationTransactionProjectId != null">relation_transaction_project_id,</if>
+            <if test="transactionDetailName != null">transaction_detail_name,</if>
             <if test="applyId != null">apply_id,</if>
             <if test="applyDeptId != null">apply_dept_id,</if>
             <if test="applyDeptManagerId != null">apply_dept_manager_id,</if>
@@ -154,6 +157,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="receiptNum != null">#{receiptNum},</if>
             <if test="relationTransactionProjectId != null">#{relationTransactionProjectId},</if>
+            <if test="transactionDetailName != null">#{transactionDetailName},</if>
             <if test="applyId != null">#{applyId},</if>
             <if test="applyDeptId != null">#{applyDeptId},</if>
             <if test="applyDeptManagerId != null">#{applyDeptManagerId},</if>
@@ -181,6 +185,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <trim prefix="SET" suffixOverrides=",">
             <if test="receiptNum != null">receipt_num = #{receiptNum},</if>
             <if test="relationTransactionProjectId != null">relation_transaction_project_id = #{relationTransactionProjectId},</if>
+            <if test="transactionDetailName != null">transaction_detail_name = #{transactionDetailName},</if>
             <if test="applyId != null">apply_id = #{applyId},</if>
             <if test="applyDeptId != null">apply_dept_id = #{applyDeptId},</if>
             <if test="applyDeptManagerId != null">apply_dept_manager_id = #{applyDeptManagerId},</if>

precision-effect-web/src/components/MultipleFileUpload/index.vue

+<template>
+  <div class="upload-file">
+    <el-upload
+      :action="uploadFileUrl"
+      :disabled="disabled"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileArr"
+      :limit="limit"
+      :fileType="fileType"
+      :list-type="listType"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :on-remove="handleRemove"
+      :on-preview="handleFileClick"
+      :on-change="fileChange"
+      :show-file-list="true"
+      :headers="headers"
+      class="upload-file-uploader"
+      :class="{ hide: fileArr.length > 0 || addShow }"
+      ref="upload"
+      multiple
+    >
+      <!-- 上传按钮 -->
+      <el-button :disabled="disabled"  plain type="primary">选取文件</el-button>
+      <!--<i class="el-icon-plus"></i>-->
+      <!-- 上传提示 -->
+      <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>
+    </el-upload>
+    <el-image
+      v-show="false"
+      id="img"
+      ref="previewImg"
+      :src="dialogImageUrl"
+      :preview-src-list="bigImageArr"
+      :z-index="9999999"
+    ></el-image>
+  </div>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+
+  export default {
+    props: {
+      // 值
+      value: [String, Object, Array],
+      listType: {
+        type: String,
+        defaule: "text",
+      },
+      // 大小限制(MB)
+      fileSize: {
+        type: Number,
+        default: 50,
+      },
+      fileArr: {
+        type: Array,
+        default: [],
+      },
+      // 文件类型, 例如['png', 'jpg', 'jpeg']
+      fileType: {
+        type: Array,
+        default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      },
+      limit: {
+        type: Number,
+        default: 5
+      },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default:false,
+    },
+  },
+    data() {
+      return {
+        uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        fileList: [],
+        modal: false,
+        dialogVisible: false,
+        dialogImageUrl: "",
+        addShow: true,
+      };
+    },
+    computed: {
+      // 是否显示提示
+      showTip() {
+        return this.isShowTip && (this.fileType || this.fileSize);
+      },
+      bigImageArr() {
+        return [this.dialogImageUrl];
+      },
+    },
+    methods: {
+      // 上传前校检格式和大小
+      handleBeforeUpload(file) {
+        // 校检文件类型
+        if (this.fileType) {
+          let fileExtension = "";
+          if (file.name.lastIndexOf(".") > -1) {
+            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+          }
+          const isTypeOk = this.fileType.some((type) => {
+            if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+          if (!isTypeOk) {
+            this.$message.error(
+              `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
+            );
+            return false;
+          }
+        }
+        // 校检文件大小
+        if (this.fileSize) {
+          const isLt = file.size / 1024 / 1024 < this.fileSize;
+          if (!isLt) {
+            this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+            return false;
+          }
+        }
+        return true;
+      },
+      // 文件个数超出
+      handleExceed() {
+        this.$message.error('只允许上传'+ this.limit +'个文件');
+      },
+      // 上传失败
+      handleUploadError(err) {
+        this.$message.error("上传失败, 请重试");
+      },
+      // 上传成功回调
+      handleUploadSuccess(res, file, fileList) {
+        if (res.code == 200) {
+          //参考如下代码即可
+          if (fileList.every(item => item.status == "success")) {
+            //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
+            fileList.map(item => {
+              item.response && this.fileList.push({ name: item.name, url: item.response.url });
+            })
+          }
+          this.$message.success("上传成功");
+          this.$emit('resFun', this.fileList)
+        } else {
+          fileList.filter(o => o.uid != file.uid)
+          this.$emit('resFun', this.fileList);
+          this.$message({ message: res.msg, type: 'error', duration: 1500 })
+        }
+      },
+      // 文件列表移除文件
+      handleRemove(file, fileList) {
+        console.log("列表移除", file, fileList);
+        this.addShow = fileList.length > 0 ? true : false;
+        this.$emit("remove", fileList);
+      },
+      handleFileClick(file, fileList) {
+        this.dialogImageUrl = file.response ? file.response.url : file.url;
+        //  this.dialogImageUrl =if(this.fileArr) this.fileArr[0].url;
+
+        // this.dialogVisible = true;
+        this.$refs.previewImg.showViewer = false;
+
+        console.log(file);
+        // console.log(file.response.url)
+      },
+      // 当改变列表改变时
+      fileChange(file, fileList) {
+        this.addShow = fileList.length > 0 ? true : false;
+      },
+    },
+    created() {
+      console.log(this.fileArr);
+      this.addShow = this.fileArr.length > 0 ? true : false;
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  img {
+    width: 100%;
+  }
+  .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>

precision-effect-web/src/views/trade/components/CommonInfo.vue

@@ -44,7 +44,7 @@
         </el-row>
         <el-divider></el-divider>
         <el-form-item label="细项名称">
-          <div>{{transactionProjectInfo.transactionItemName}}</div>
+          <div>{{tradeData.transactionDetailName ? tradeData.transactionDetailName : "-"}}</div>
           <el-row>
             <el-col :span="5">
               <el-row>
@@ -102,41 +102,45 @@
       //附件下载
       download(url) {
         // url = url.replace(/\\/g, "/");
-        const xhr = new XMLHttpRequest();
-        xhr.open("GET", url, true);
-        xhr.responseType = "blob";
-        //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
-        xhr.onload = function () {
-          if (xhr.readyState === 4 && xhr.status === 200) {
-            let blob = this.response;
-            console.log(blob);
-            // 转换一个blob链接
-            // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
-            // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
-            let downLoadUrl = window.URL.createObjectURL(
-              new Blob([blob], {
-                type: blob.type,
-              })
-            );
-            // 视频的type是video/mp4，图片是image/jpeg
-            // 01.创建a标签
-            let a = document.createElement("a");
-            // 02.给a标签的属性download设定名称
-            a.download = name;
-            // 03.设置下载的文件名
-            a.href = downLoadUrl;
-            // 04.对a标签做一个隐藏处理
-            a.style.display = "none";
-            // 05.向文档中添加a标签
-            document.body.appendChild(a);
-            // 06.启动点击事件
-            a.click();
-            // 07.下载完毕删除此标签
-            a.remove();
-          }
-        };
+        let urls = JSON.parse(url);
+        urls.forEach(item =>{
+          const xhr = new XMLHttpRequest();
+          xhr.open("GET", item.url, true);
+          xhr.responseType = "blob";
+          //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
+          xhr.onload = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+              let blob = this.response;
+              console.log(blob);
+              // 转换一个blob链接
+              // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
+              // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
+              let downLoadUrl = window.URL.createObjectURL(
+                new Blob([blob], {
+                  type: blob.type,
+                })
+              );
+              // 视频的type是video/mp4，图片是image/jpeg
+              // 01.创建a标签
+              let a = document.createElement("a");
+              // 02.给a标签的属性download设定名称
+              a.download = name;
+              // 03.设置下载的文件名
+              a.href = downLoadUrl;
+              // 04.对a标签做一个隐藏处理
+              a.style.display = "none";
+              // 05.向文档中添加a标签
+              document.body.appendChild(a);
+              // 06.启动点击事件
+              a.click();
+              // 07.下载完毕删除此标签
+              a.remove();
+            }
+          };
+
+          xhr.send();
+        })
 
-        xhr.send();
       },
 
     }

precision-effect-web/src/views/trade/index.vue

@@ -195,7 +195,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="买方" prop="tradeDeptId">
@@ -230,6 +230,15 @@
              </el-select>
            </el-form-item>
          </el-col>
+         <el-col :span="12">
+           <el-form-item label="交易细项名称" prop="transactionDetailName">
+             <el-input v-model="form.transactionDetailName" placeholder="请输入交易细项名称"/>
+           </el-form-item>
+
+         </el-col>
+       </el-row>
+
+       <el-row>
          <el-col :span="12">
            <el-form-item v-if="priceType == '1'" label="单价" prop="tradePrice" >
              <el-input v-model="form.tradePrice" placeholder="请输入单价" :disabled="true" @blur="sumAmount"/>
@@ -241,11 +250,7 @@
            ]" >
              <el-input v-model="form.tradePrice" placeholder="请输入单价" :disabled="true" @blur="sumAmount"/>
            </el-form-item>
-
          </el-col>
-       </el-row>
-
-       <el-row>
          <el-col :span="12">
            <el-form-item label="数量" v-if="priceType == '1'" prop="tradeCount">
              <el-input v-model="form.tradeCount" placeholder="请输入交易数量" @blur="sumAmount" :disabled="priceType == '2'"/>
@@ -256,12 +261,15 @@
              <el-input v-model="form.tradeCount" placeholder="请输入交易数量" @blur="sumAmount" :disabled="priceType == '2'"/>
            </el-form-item>
          </el-col>
-         <el-col :span="12">
-           <el-form-item label="总价" prop="tradeTotal">
-             <el-input v-model="form.tradeTotal" placeholder="请输入交易总价" :disabled="priceType == '1'"/>
-           </el-form-item>
-         </el-col>
        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="总价" prop="tradeTotal">
+              <el-input v-model="form.tradeTotal" placeholder="请输入交易总价" :disabled="priceType == '1'"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
@@ -325,7 +333,7 @@ import { treeselect } from "@/api/system/dept";
 import { selectTransactorByDeptId } from "@/api/system/user";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import FileUpload from "@/components/FileUpload";
+import FileUpload from "@/components/MultipleFileUpload";
 import uploadfile from "@/assets/uploadfile.png";
 import TableList from "./components/TableList";
 import { sendNotice } from "@/api/system/notice";
@@ -380,6 +388,9 @@ export default {
         relationTransactionProjectId: [
           { required: true, message: "交易项目名称不能为空", trigger: "blur" },
         ],
+        transactionDetailName: [
+          { required: true, message: "交易细项名称不能为空", trigger: "blur" },
+  ],
         tradeDeptId: [
           { required: true, message: "请选择买方部门", trigger: "change" },
         ],
@@ -449,6 +460,7 @@ export default {
         tradeId: null,
         receiptNum: null,
         relationTransactionProjectId: null,
+        transactionDetailName: null,
         applyId: null,
         applyDeptId: null,
         applyDeptManagerId: null,
@@ -637,17 +649,25 @@ export default {
       );
     },
     getFileInfo(res) {
-      this.form.attachmentUrl = res.url;
-      this.fileList = [
-        {
-          name: res.fileName,
-          url: uploadfile,
-        },
-      ];
+      let param = [];
+      if(res.length >0){
+        res.forEach(item =>{
+          param.push({url: item.url})
+        })
+      }
+      this.form.attachmentUrl = JSON.stringify(param);
+      //this.fileList = res;
     },
-    listRemove(e) {
-      this.fileList = [];
-      this.form.attachmentUrl = "";
+    listRemove(fileList) {
+      console.log("remove",fileList);
+      //this.fileList = [];
+      let param = [];
+      if(fileList.length >0){
+        fileList.forEach(item =>{
+          param.push({url: item.url})
+        })
+      }
+      this.form.attachmentUrl = JSON.stringify(param);
     },
     //切换tab
     changeTab(tabNum) {