<template>
|
<el-dialog title="详情"
|
width="80%"
|
ref="dialog"
|
id="peAdd"
|
@close="close"
|
:visible.sync="dialogVisible">
|
<el-form class="pedetail_Summary"
|
ref="form"
|
:rules="rules"
|
:model="asyncValue">
|
<el-form-item prop="bankId"
|
class="item">
|
<div class="valueContent">银行名称</div>
|
<div class="valueContent">
|
<el-select v-model="asyncValue.bankId"
|
@change="bankSelect"
|
placeholder="请选择">
|
<el-option v-for="item in bankList"
|
:key="item.bankId"
|
:label="item.bankName"
|
:value="item.bankId">
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item prop="acct"
|
class="item">
|
<div class="valueContent">银行账户</div>
|
<div class="valueContent">
|
<el-select v-model="asyncValue.acct"
|
@change="acctSelect"
|
placeholder="请选择">
|
<el-option v-for="item in acctNoList"
|
:key="item"
|
:label="item"
|
:value="item">
|
</el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item prop="remark"
|
class="item">
|
<div class="valueContent">备注</div>
|
<div class="valueContent">
|
<el-input v-model="asyncValue.remark"
|
placeholder="请输入备注"></el-input>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div class="pedetail-title clearfix">
|
<div class="progress">
|
<el-progress :percentage="progress"
|
v-show="progress != 0"
|
:stroke-width="18"
|
status="success"></el-progress>
|
</div>
|
<div class="btnList">
|
<el-upload class="upload"
|
ref="upload"
|
multiple
|
action="http://192.168.34.186:20020/"
|
:limit="5"
|
:show-file-list="false"
|
:on-change="handleChange"
|
:auto-upload="false">
|
<el-button size="small" slot="trigger" type="primary">选择多文件</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传excel文件，最多只能选5个</div>
|
<el-button type="success" size="small" @click="allUpload">开始上传</el-button>
|
<el-button type="text" icon="el-icon-download" @click="downloadFile">下载模板</el-button>
|
</el-upload>
|
</div>
|
|
<el-table :data="tableData.list"
|
v-loading="loading"
|
class="table">
|
<el-table-column prop="fileName"
|
align="center"
|
min-width="160"
|
label="文件名">
|
</el-table-column>
|
<el-table-column prop="size"
|
align="center"
|
min-width="100"
|
label="大小">
|
</el-table-column>
|
<el-table-column prop="statusTxt"
|
align="center"
|
min-width="100"
|
label="状态">
|
</el-table-column>
|
<el-table-column align="center"
|
min-width="80"
|
fixed="right"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button size="mini"
|
:type="loadType(scope.row.status)"
|
v-show="scope.row.status === 'fail'"
|
@click="againUpload(scope.$index, scope.row)">重传</el-button>
|
<el-button size="mini"
|
type="danger"
|
v-show="scope.row.status !== 'load'"
|
@click="beforeRemove(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- </el-pagination> -->
|
</div>
|
</el-dialog>
|
</template>
|
|
|
<script>
|
import { getBankCode, uploadFile, bankStream } from "@/assets/api/api";
|
|
export default {
|
name: "peAdd",
|
|
props: {
|
value: {
|
type: String,
|
default: ""
|
}
|
},
|
|
data() {
|
return {
|
loading: false,
|
dialogVisible: false,
|
bankList: [],
|
acctNoList: [],
|
asyncValue: {
|
bankName: null,
|
bankId: null,
|
acctNo: null,
|
acct: null,
|
acctName: null,
|
remark: "",
|
file: null
|
},
|
fileList: [],
|
progress: 0,
|
progressIndex: 0,
|
tableData: {
|
list: []
|
},
|
rules: {
|
acct: [{ required: true, message: "银行账户必填", trigger: "blur" }],
|
bankId: [{ required: true, message: "银行必填", trigger: "blur" }],
|
remark: [{ required: true, message: "备注必填", trigger: "blur" }]
|
}
|
};
|
},
|
|
watch: {
|
progressIndex: function(n) {
|
this.progress = n * (100 / this.tableData.list.length);
|
},
|
|
value: async function(n) {
|
this.dialogVisible = this.value === "add" ? true : false;
|
|
if (this.dialogVisible) {
|
let res = await getBankCode();
|
let bankRes = await bankStream();
|
this.bankList = res.data.retBody;
|
this.bankList.forEach((element, i) => {
|
this.bankList[i] = {
|
bankId: element.bankId,
|
bankName: element.bankName
|
};
|
});
|
this.bankList = Array.from(new Set(this.bankList));
|
this.acctNoList = bankRes.data.retBody;
|
}
|
}
|
},
|
|
methods: {
|
// 关闭
|
close() {
|
this.tableData.list = [];
|
|
this.asyncValue = {
|
bankName: null,
|
bankId: null,
|
acctNo: null,
|
acct: null,
|
acctName: null,
|
remark: "",
|
file: null
|
},
|
|
this.$emit("input", "");
|
},
|
|
// 重新上传
|
async againUpload(i, row) {
|
let res = await this.$refs["form"].validate();
|
if (!res) return;
|
|
this.tableData.list[i].statusTxt = "重传中";
|
this.tableData.list[i].status = "again";
|
const fd = new FormData();
|
for (const key in this.asyncValue) {
|
if (this.asyncValue.hasOwnProperty(key)) {
|
const item = this.asyncValue[key];
|
if (key == "file") {
|
fd.append(key, this.tableData.list[i].file);
|
} else {
|
fd.append(key, item);
|
}
|
}
|
}
|
|
uploadFile(fd).then(res => {
|
if (res.data.retHeader.retCode === "2003") {
|
this.tableData.list[i].status = "existed";
|
this.tableData.list[i].statusTxt = res.data.retHeader.retMessage;
|
} else if (res.data.retHeader.retCode === "0000") {
|
this.tableData.list[i].status = "load";
|
this.tableData.list[i].statusTxt = "成功";
|
} else {
|
this.tableData.list[i].status = "fail";
|
this.tableData.list[i].statusTxt = res.data.retHeader.retMessage;
|
}
|
});
|
},
|
|
handleExceed(files, fileList) {
|
this.$message.warning(
|
`当前限制选择 3 个文件，本次选择了 ${
|
files.length
|
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
);
|
},
|
|
// 删除文件
|
beforeRemove(index, file) {
|
this.tableData.list.splice(index, 1);
|
},
|
|
// 文件改变时触发
|
handleChange(file, fileList) {
|
let obj = {
|
fileName: file.name,
|
size: (file.size / 1024).toFixed(2) + "kb",
|
statusTxt: "待上传",
|
status: file.status,
|
file: file.raw
|
};
|
if (this.tableData.list.length >= 5) {
|
this.$message.warning(`最多可选五个文件`);
|
} else {
|
this.tableData.list.push(obj);
|
}
|
},
|
|
// 全部上传
|
async allUpload() {
|
let res = await this.$refs["form"].validate();
|
if (!res) return;
|
const postMessage = i => {
|
const fd = new FormData();
|
if (i >= this.tableData.list.length) {
|
setTimeout(() => {
|
this.progressIndex = 0;
|
}, 1000);
|
return;
|
}
|
for (const key in this.asyncValue) {
|
if (this.asyncValue.hasOwnProperty(key)) {
|
const item = this.asyncValue[key];
|
if (key == "file") {
|
fd.append(key, this.tableData.list[i].file);
|
} else {
|
fd.append(key, item);
|
}
|
}
|
}
|
|
uploadFile(fd).then(res => {
|
if (res.data.retHeader.retCode === "2003") {
|
this.tableData.list[i].status = "existed";
|
this.tableData.list[i].statusTxt = res.data.retHeader.retMessage;
|
} else if (res.data.retHeader.retCode === "0000") {
|
this.tableData.list[i].status = "load";
|
this.tableData.list[i].statusTxt = "成功";
|
} else {
|
this.tableData.list[i].status = "fail";
|
this.tableData.list[i].statusTxt = res.data.retHeader.retMessage;
|
}
|
this.progressIndex = this.progressIndex * 1 + 1;
|
postMessage(this.progressIndex);
|
});
|
};
|
|
postMessage(this.progressIndex);
|
},
|
|
|
|
// 银行选择
|
bankSelect(val) {
|
this.asyncValue.bankName = this.bankList.filter(item => {
|
return val === item.bankId;
|
})[0]["bankName"];
|
},
|
|
// 账号选择
|
acctSelect(val) {
|
let list = this.acctNoList.filter(item => {
|
return val === item;
|
})[0];
|
|
this.asyncValue.acctName = list.split("/")[0];
|
this.asyncValue.acctNo = list.split("/")[1];
|
},
|
|
downloadFile() {
|
this.$http.download("/acctTrans/download", {}, '网银流水导入模板.xlsx')
|
},
|
|
// 颜色显示
|
loadType(status) {
|
switch (status) {
|
case "fail":
|
return "primary";
|
break;
|
case "success":
|
return "primary";
|
break;
|
case "fail":
|
return "info";
|
break;
|
case "existed":
|
return "info";
|
break;
|
default:
|
return "primary";
|
}
|
},
|
|
// 下载文件模板
|
downloadFile() {
|
this.$http.download("acctTrans/download", {}, '网银流水模板.xlsx')
|
}
|
|
}
|
};
|
</script>
|
|
<style lang="less">
|
#peAdd {
|
.el-dialog__header {
|
background-color: #eef1f6;
|
}
|
.pedetail_Summary {
|
list-style: none;
|
border: 1px solid #ebeef5;
|
margin: 0px;
|
padding: 0px;
|
.item {
|
width: 100%;
|
line-height: 56px;
|
height: 56px;
|
overflow: hidden;
|
margin-bottom: 0px;
|
.el-form-item__content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1px solid #ebeef5;
|
.el-form-item__error {
|
top: 36%;
|
left: 216px;
|
}
|
.valueContent {
|
text-align: center;
|
}
|
.valueContent:first-child {
|
border-right: 1px solid #ebeef5;
|
line-height: 55px;
|
flex-basis: 200px;
|
}
|
.valueContent:nth-child(2) {
|
padding: 4px 0px;
|
flex: 1;
|
}
|
.valueContent {
|
> div {
|
width: 80%;
|
}
|
}
|
}
|
}
|
.item:last-child {
|
.el-form-item__content {
|
border-bottom: none;
|
}
|
}
|
}
|
.pedetail-title {
|
.progress {
|
width: 30%;
|
height: 100%;
|
float: left;
|
// display: flex;
|
// justify-content: space-around;
|
// align-items: center;
|
padding: 40px 0px;
|
}
|
.btnList {
|
padding: 26px 0px 16px;
|
float: right;
|
height: 92px;
|
display: flex;
|
justify-content: space-around;
|
align-items: flex-start;
|
.upload {
|
height: 100%;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
