<template>
<div class="AppActivity Feedback">
<ul style="overflow: initial!important">
<li>
<span>
<em>账户类型</em>
</span>
<el-select @change="changeAccount" filterable v-model="obj.Type" >
<el-option label="不限" :value='0'></el-option>
<el-option label="银行" :value='1'></el-option>
<el-option label="平台" :value='2'></el-option>
<el-option label="现金" :value='3'></el-option>
<el-option label="资金池" :value='4'></el-option>
</el-select>
</li>
<li>
<span>
<em>账户：</em>
</span>
<el-select filterable v-model='obj.AccountId' >
<el-option :value="-1" label="不限"></el-option>
<el-option v-for='item in accountList'
:label='item.Alias'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</li>
<li>
<em>时间：</em>
<el-date-picker
v-model="dateList"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd"
end-placeholder="结束日期">
</el-date-picker>
</li>
<li style="float:right;margin-bottom:10px">
<input
type="button"
class="hollowFixedBtn"
value="查询"
@click="getList()"
>
<input
type="button"
class="hollowFixedBtn"
value="新增"
@click="addRule"
>
</li>
</ul>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
<tr>
<th>ID</th>
<th>账户类型</th>
<th>账户名称</th>
<th>收据金额</th>
<th>汇率</th>
<th>本位币</th>
<th>交易日期</th>
<th>备注</th>
<th>操作人/时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,i) in dataList" :key="i">
<td>{{item.Id}}</td>
<td>
<span v-if="item.Type==1">银行</span>
<span v-if="item.Type==2">平台</span>
<span v-if="item.Type==3">现金</span>
<span v-if="item.Type==4">资金池</span>
</td>
<td>{{item.AccountName}}</td>
<td>{{item.WBMoney}}</td>
<td>{{item.Rate}}</td>
<td>{{item.Money}}</td>
<td>{{item.Time}}</td>
<td>{{item.Remark}}</td>
<td>{{item.UpdateBy}}/{{item.UpdateDate}}</td>
<td>
<el-button v-if="EmployeeId == item.UpdateById" @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
<el-button v-if="EmployeeId == item.UpdateById" @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
</td>
</tr>
<tr v-if="dataList.length==0">
<td colspan="15" align="center">暂无数据</td>
</tr>
</table>
<el-pagination background @current-change="handleCurrentChange"
layout="total,prev, pager, next, jumper" :page-size="obj.pageSize" :total='total'>
</el-pagination>
<el-dialog
title="修改"
:visible.sync="ruleVisible"
width="800px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="账户" prop="Type">
<el-select @change="changeAccount" filterable v-model="form.Type" >
<el-option label="银行" :value='1'></el-option>
<el-option label="平台" :value='2'></el-option>
<el-option label="现金" :value='3'></el-option>
<el-option label="资金池" :value='4'></el-option>
</el-select>
</el-form-item>
<el-form-item label="账户" prop="AccountId">
<el-select filterable v-model="form.AccountId" @change="getAccName(form.AccountId,1)">
<el-option v-for='item in accountList'
:label='item.Alias'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="原币金额" prop="WBMoney">
<el-input @blur="getMoney" class="w220" v-model="form.WBMoney"></el-input>
</el-form-item>
<el-form-item label="汇率">
<el-input class="w220" v-model="form.Rate" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="本位币金额">
<el-input class="w220" v-model="form.Money" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="交易日期" prop="Time" >
<el-date-picker type="date" v-model="form.Time"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label="备注">
<el-input class="w220" v-model="form.Remark"></el-input>
</el-form-item>
<div class="DocumentStatisticsDiv" >
<div>
<div class="_addUpload_box clearfix" >
<template v-for="(file,fIndex) in saveMsg">
<div v-if="file.Type==3">
<div style="width:100%;height:100%;overflow: hidden;">
<img :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)">
</div>
<span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
</div>
<div v-if="file.Type==1">
<div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFile(file)">
</div>
<span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
</div>
<div v-if="file.Type==2">
<div class="iconfont icon-excel" @click="showUpLoadFile(file)">
</div>
<span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
</div>
</template>
<div class="_pic_upload">
<el-upload
drag
:http-request="uploadFileBtn"
:multiple="true" :show-file-list="false" action="">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
</el-upload>
</div>
</div>
</div>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="ruleVisible = false">取 消</el-button>
<el-button size="small" type="danger" @click="RulesOk('form')">确 定</el-button>
</span>
</el-dialog>
<div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
<div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;">
<el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
<el-carousel-item style="height: 600px;overflow:auto;" v-for="(item,index) in picObj" :key="index">
<img :src="item" style=""/>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
import moment from "moment"
export default {
name: 'Feedback',
data (){
return{
initialIndex:0,
edittrue:false,
allzb:100,
total:0,
obj:{
pageIndex:1,
pageSize:10,
AccountId:-1,
StartTime:'',
EndTime:'',
Type:0,
},
dataList:[],
loading:false,
dateList:[],
LineList:[],
companyList:[],
ruleVisible:false,
form:{
Id:0,
AccountId:'',
Type:0,
WBMoney:'',
Rate:'',
Money:'',
Time:'',
Remark:'',
VoucherList:[],
},
LineTeamList:[],
EmployeeList:[],
rules:{
Type: [{ required: true, message: '请选择账户', trigger: 'change' }],
AccountId: [{ required: true, message: '请选择账号', trigger: 'change' }],
WBMoney: [{ required: true, message: '请输入原币金额', trigger: 'blur' }],
},
LineListObj:{},
companyListObj:{},
saveMsg:[],
imgList:[],
picIsShow:false,
picObj:[],
EmployeeId:-1,
accountList:[],
accountList1:[],
accountList2:[],
accountList3:[],
accountList4:[],
}
},
created(){
this.getList();
this.getAccountList1();
this.getAccountList2();
this.getAccountList3();
this.getAccountList4();
let userInfo = this.getLocalStorage();
this.form.groupId=userInfo.RB_Group_id;
this.EmployeeId=userInfo.EmployeeId;
},
mounted(){
if(this.$route.query.BankType){
this.obj.Type=Number(this.$route.query.BankType);
setTimeout(() => {
this.changeAccount(this.obj.Type);
}, 3000);
}
if(this.$route.query.BankID){
this.obj.AccountId=Number(this.$route.query.BankID);
}
if(this.$route.query.StartTime){
this.dateList=[];
this.dateList[0]=this.$route.query.StartTime;
this.dateList[1]=this.$route.query.EndTime;
}
},
filters:{
YMD(date){
return moment(date).format("YYYY-MM-DD");
}
},
methods:{
getMoney(){
this.form.Money=(this.form.WBMoney * this.form.Rate).toFixed(2);
},
getAccName(i,o){ // 根据选择账户获取账户名
this.accountList.forEach(x=>{
if(x.ID == i){
this.form.Rate=x.CurrentRate;
this.getMoney();
}
})
},
showUpLoadFile(i){ // 预览上传文件
if(i.Type==3){
this.picObj.push(i.Url);
this.imgList.push(i.Url);
this.picIsShow= true;
// this.hideFlashMan = true;
}else{
if(i.Content.substring(i.Content.lastIndexOf('.')+1,i.Content.length).toUpperCase()=='PDF'){
this.previewPDF(i.Url)
}else{
window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url)
}
}
},
deleteUploadFile(i){ // 删除上传文件
this.saveMsg.splice(i,1);
},
uploadFileBtn(file) { //上传
if(file.file.size > 1024 * 1024 * 10) {
this.$message.warning(this.$t('tips.wjdxbncgsz'))
return
}
// 1 文档 2 数据 3 图片
let typeArr=[
{stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
{stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
]
let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
let fileTypeNumber = 2;
let typeOk = false;
typeArr.forEach(x=>{
if(x.stringArr.indexOf(ft)!='-1')
{
fileTypeNumber=x.type
typeOk = true;
}
})
if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
let newArr = [];
newArr.push(file.file)
let path = "/Upload/Temporary/"
this.$message.info(this.$t('tips.shangchuanzhong'))
this.UploadSelfFileT(path, newArr, x => {
let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
this.saveMsg.push({
Content: x.data.FilePath,
ID:0,
Type:fileTypeNumber,
Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
})
this.Success(this.$t('tips.scchenggong'))
},1);
},
changeAccount(val){
this.accountList=[];
if(val==1){
this.accountList=this.accountList1;
}
else if(val==2){
this.accountList=this.accountList2;
}
else if(val==3){
this.accountList=this.accountList3;
}
else if(val==4){
this.accountList=this.accountList4;
}
},
getAccountList2(){
this.apipost(
"BankAccount_post_GetPlatformList",
{},
res => {
if (res.data.resultCode == 1) {
let data = res.data.data;
this.accountList2 = data;
}
},
err => {}
);
},
getAccountList1(){
this.apipost('bankaccount_post_GetList',{},res=>{
if(res.data.resultCode==1){
let data = res.data.data;
this.accountList1 = data;
}
},err=>{})
},
getAccountList3(){
this.apipost('BankAccount_post_GetCashAccountList',{},res=>{
if(res.data.resultCode==1){
let data = res.data.data;
this.accountList3 = data
}
},err=>{})
},
getAccountList4(){
this.apipost('BankAccount_post_GetCashPoolList',{},res=>{
if(res.data.resultCode==1){
let data = res.data.data;
this.accountList4 = data
}
},err=>{})
},
handleCurrentChange(val) {
this.obj.pageIndex = val;
this.getList();
},
Delete(item) {
this.$confirm("是否删除? 删除后不可恢复", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.apipost('Financial_post_DelFinanceNONPaymentInfo', {PaymentId:item.Id}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message)
this.getList()
}else{
this.Error(res.data.message)
}
})
})
.catch(() => {});
},
addRule(){
this.ruleVisible=true;
this.edittrue=false;
this.InitForm();
},
SetRules(item){
this.ruleVisible=true;
this.edittrue=true;
this.form={
Id:item.Id,
AccountId:item.AccountId,
Type:item.Type,
WBMoney:item.WBMoney,
Rate:item.Rate,
Money:item.Money,
Time:item.Time,
Remark:item.Remark,
VoucherList:item.VoucherList,
}
this.changeAccount(item.Type)
this.saveMsg=[];
this.form.VoucherList.forEach(item=>{
let obj={
Url:item,
Type:3,
}
this.saveMsg.push(obj)
})
},
RulesOk(formName){
this.form.VoucherList=[];
this.$refs[formName].validate((valid) => {
if (valid) {
this.saveMsg.forEach(item=>{
this.form.VoucherList.push(item.Url);
})
this.apipost('Financial_post_SetFinanceNONPaymentInfo',this.form,res=>{
if(res.data.resultCode==1){
this.Success(res.data.message)
this.getList();
this.ruleVisible=false;
this.InitForm();
}else{
this.$message.error(res.data.message);
}
},err=>{})
} else {
}
});
},
InitForm(){
this.form={
Id:0,
AccountId:'',
Type:'',
WBMoney:'',
Rate:'',
Money:'',
Time:'',
Remark:'',
VoucherList:[],
}
this.saveMsg=[];
},
getList(){
this.loading=true;
if(this.dateList && this.dateList.length>0){
this.obj.StartTime=this.dateList[0];
this.obj.EndTime=this.dateList[1];
}else{
this.obj.StartTime='';
this.obj.EndTime='';
}
this.apipost('Financial_get_GetFinanceNONPaymentPageList',this.obj,res=>{
this.loading=false;
if(res.data.resultCode==1){
this.dataList = res.data.data.pageData;
this.total=res.data.data.count;
}else{
this.$message.error(res.data.message);
}
},err=>{})
},
}
}
</script>
<style>
.DocumentStatisticsDiv .el-upload-dragger{
width: 124px!important;
height: 80px!important;
}
._addUpload_box{
display: block;
margin-top: 15px;
}
._addUpload_box img{
width: 100%;
}
._addUpload_box>div{
float: left;
width:138px;
height:92px;
border:1px dashed rgba(210,210,210,1);
border-radius:2px;
cursor: pointer;
margin-bottom: 10px;
padding: 5px;
margin-right: 10px;
position: relative;
}
._addUpload_box>div:hover{
background-color: #f5f5f5;
}
._addFile_name{
padding-left: 15px;
max-width: 450px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._addUpload_box .icon-guanbi1 {
font-size: 12px;
color: white;
display: inline-block;
margin-left: 15px;
position: absolute;
right: -6px;
top: -9px;
background-color: #f56c6c;
border-radius: 50%;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
}
._addUpload_box .icon-guanbi1:hover {
font-size: 12px;
color: #c94052;
}
._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
text-align: center;
font-size: 38px;
color: green;
line-height: 75px;
}
.AppActivity .el-form-item{
display: inline-block;
}
.Feedback ul>li{
display: inline-block;
font-size: 12px;
color: #666;
margin: 20px 30px 0px 0;
}
.Feedback .singeRowTable{
margin-top: 20px;
}
</style>