Skip to content

P
precision-effect
Commit ea274097 authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

多附件上传-交易细项

parent 6dee7800
Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 56 deletions
precision-effect-system/src/main/java/com/zehong/system/domain/TTradeProject.java
View file @ ea274097
......@@ -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
View file @ ea274097
......@@ -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 0 → 100644
View file @ ea274097
<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
View file @ ea274097
......@@ -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
View file @ ea274097
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment