<template>
<div class="inventorytask">
<el-row>
<el-col :span="24" class="ptb5">
<label> {{$t('AccountApply.公司名称')}}:</label>
<el-input v-model.trim="company" :placeholder="$t('AccountApply.公司名称')" @keyup.enter.native="findAccountApply" size="mini" clearable style="width: 150px;" class="ml10"></el-input>
<label> {{$t('AccountApply.员工姓名')}}:</label>
<el-input v-model.trim="employeeName" :placeholder="$t('AccountApply.员工姓名')" @keyup.enter.native="findAccountApply" size="mini" clearable style="width: 150px;" class="ml10"></el-input>
<label> {{$t('AccountApply.业务流水号')}}:</label>
<el-input v-model.trim="lsh" :placeholder="$t('AccountApply.业务流水号')" @keyup.enter.native="findAccountApply" size="mini" clearable style="width: 150px;" class="ml10"></el-input>
<!--樊迎宾新增，根据 充值途径查询 source -->
<label> {{$t('AccountApply.充值途径')}}:</label>
<el-select v-model="sourceList.name" style="width: 100px;" size="mini" clearable :placeholder="$t('StockList.请选择')">
<el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-button type="primary" size="mini" icon="el-icon-search" @click.native="findAccountApply" class="ml10">{{$t('搜索')}}</el-button>
<!--<el-button @click="drawer = true" type="primary" size="mini" class="ml10" icon="el-icon-zoom-in">{{$t('高级查询')}}</el-button>-->
<el-button type="success" size="mini" class="ml15" @click="exportExcel" icon="el-icon-upload">{{$t('Extend2.导出Excel')}}</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="ptb5">
<label> {{$t('AccountApply.审核进度')}}:</label>
<el-link :type="this.status==0?'primary':''" @click.native="changeState(0)" :underline="false" :class="this.status==0?'common-single-radio-active':'common-single-radio'">{{$t('全部')}}</el-link>
<el-link :type="this.status==1?'primary':''" @click.native="changeState(1)" :underline="false" :class="this.status==1?'common-single-radio-active':'common-single-radio'">{{$t('待审核')}}</el-link>
<el-link :type="this.status==2?'primary':''" @click.native="changeState(2)" :underline="false" :class="this.status==2?'common-single-radio-active':'common-single-radio'">{{$t('已通过')}}</el-link>
<el-link :type="this.status==3?'primary':''" @click.native="changeState(3)" :underline="false" :class="this.status==3?'common-single-radio-active':'common-single-radio'">{{$t('未通过')}}</el-link>
<label class="" align="right" style="padding-right:0px;">{{$t('AccountApply.充值申请时间')}}：</label>
<el-date-picker class="ml10" style="padding-right:0px;" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" size="mini" v-model="orderTime" type="datetimerange" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" :default-time="['00:00:00','23:59:59']">
</el-date-picker>
<hr class="line-style-solid" />
<hr class="line-style-solid" />
</el-col>
</el-row>
<div class="scroll-float-fixed">
<ul class="ptb5">
<li class="tableulli bold fsize14 mt15">
<ul>
<li style="width: 100px;">{{$t('AccountApply.业务流水号')}}</li>
<li class="pct10">{{$t('公司')}}/{{$t('seller.资金账户')}}</li>
<li class="pct5">{{$t('AccountApply.充值途径')}}</li>
<li class="pct10">{{$t('AccountApply.充值金额')}}</li>
<li class="pct5" align="center">{{$t('AccountApply.凭证图片')}}</li>
<li class="pct15" align="center">{{$t('AccountApply.付款时间')}}</li>
<li class="pct15" align="center">{{$t('AccountApply.申请人')}}/{{$t('AccountApply.申请时间')}}</li>
<li class="pct15" align="center">{{$t('AccountApply.审批人')}}/{{$t('AccountApply.审批时间')}}</li>
<li class="pct6" align="center">{{$t('状态')}}</li>
<li class="pct10" align="center">{{$t('备注')}}</li>
<li class="pct8" align="center">{{$t('操作')}}</li>
</ul>
<hr class="line-style-solid" />
</li>
</ul>
</div>
<div v-if="accountApplyList !=null && accountApplyList.length > 0" class="body-float-fixed">
<ul>
<li class="ptb5 tableulli fsize14" v-for="(item,index) in accountApplyList">
<ul>
<li style="width: 106px;">
<p>{{item.lsh==''?'无':item.lsh}}</p>
</li>
<li class="pct10">
<p>{{item.company}}</p>
<p>{{item.accountName}}</p>
</li>
<li class="pct5">
<p>{{changeSource(item.source)}}</p>
</li>
<li class="pct10">
<p>{{item.amount==''?'无':item.amount}} {{employee.currencyId}}</p>
</li>
<li class="pct5" >
<el-link v-show="item.pictureUrl1 != ''" :underline="false">
<el-image style="width: 60px; height: 60px;border: 1px solid #FFFFFF;" :src="item.pictureUrl1" :preview-src-list="showImage(item)"></el-image>
</el-link>
<el-link v-show="item.pictureUrl2 != ''" :underline="false">
<el-image style="width: 60px; height: 60px ;border: 1px solid #FFFFFF;" :src="item.pictureUrl2" :preview-src-list="showImage(item)"></el-image>
</el-link>
</li>
<li class="pct15" align="center">
{{item.paidTime==''?'无':item.paidTime}}
</li>
<li class="pct15" align="center">
<p>{{item.oper==''?'无':item.oper}}</p>
<p>{{item.operTime==''?'无':item.operTime}}</p>
</li>
<li class="pct15" align="center">
<p v-if="item.status > 1">{{item.checkOper==''?'无':item.checkOper}}</p>
<p v-if="item.status > 1">{{item.checkOper==''?'无':$globals.getFormatDate(item.checkTime)}}</p>
</li>
<li class="pct6" align="center">
<label v-if="item.status == 1" style="color:blue">{{getAccountApplyState(item.status)}}</label>
<label v-if="item.status == 2" style="color : green">{{getAccountApplyState(item.status)}}</label>
<label v-if="item.status == 3" style="color : red">{{getAccountApplyState(item.status)}}</label>
</li>
<li class="pct10" align="center">
{{item.remark}}
</li>
<li class="pct8" align="center">
<p>
<el-link v-show="item.status == 1" type="primary" @click.native="approve(item)" :underline="false">{{$t('审批')}}</el-link>
</p>
</li>
</ul>
<hr class="line-style-solid" />
</li>
</ul>
</div>
<div v-if="accountApplyList == null || accountApplyList.length <= 0" class="text-center text-danger bold fsize24">
{{errormsg}}
</div>
<div class="footer-float-fixed common-box-shadow ptb5">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[50, 100, 200, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum" class="text-left">
</el-pagination>
</div>
<el-drawer size="50%" title="" :visible.sync="drawer" :with-header="true">
<div style="margin: 10px 20px;box-shadow: 0 0 5px #ccc; padding: 5px;">
<el-row>
<el-col :span="24" class="ptb5">
<label class="">{{$t('AccountApply.充值申请时间')}}：</label>
<el-date-picker class="ml10" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" size="mini" v-model="orderTime" type="datetimerange" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" :default-time="['00:00:00','23:59:59']">
</el-date-picker>
<hr class="line-style-solid" />
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="ptb5">
<label> {{$t('排序')}}:</label>
<el-link :type="this.orderBys.length == 19?'primary':''" @click.native="changeOrderby('status,checkTime asc')" :underline="false" :class="this.orderBys.length == 19?'common-single-radio-active':'common-single-radio'">{{$t('AccountApply.付款时间升序')}}</el-link>
<el-link :type="this.orderBys.length == 20?'primary':''" @click.native="changeOrderby('status,checkTime desc')" :underline="false" :class="this.orderBys.length == 20?'common-single-radio-active':'common-single-radio'">{{$t('AccountApply.付款时间降序')}}</el-link>
</el-col>
</el-row>
</div>
</el-drawer>
<el-drawer size="50%" title="" :visible.sync="drawer1" :with-header="false">
<div style="margin: 10px 20px;box-shadow: 0 0 5px #ccc; padding: 5px;">
<el-row>
<el-col :span="4">
<div class="grid-content ml-5" style="text-align:right">{{$t('AccountApply.申请备注')}}:</div>
</el-col>
<el-col :span="20">
<div class="grid-content-light">
<el-input type="textarea" :rows="4" v-model="AccountApplyForm.remark" style="width: 460px;" :disabled="true"></el-input>
</div>
</el-col>
<hr class="line-style-dashed" />
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content ml-5" style="text-align:right">{{$t('AccountApply.操作信息')}}:</div>
</el-col>
<el-col :span="20">
<div class="grid-content-light">
<el-input type="textarea" :rows="4" v-model="AccountApplyForm.operMessage" style="width: 460px;" :disabled="true"></el-input>
</div>
</el-col>
<hr class="line-style-solid" />
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content ml-5" style="text-align:right">{{$t('AccountApply.审核结果')}}:</div>
</el-col>
<el-col :span="20">
<el-link :type="this.AccountApplyForm.approveStatus==2?'primary':''" :disabled="isShow" @click.native="changeApproveStatus(2)" :underline="false" :class="this.AccountApplyForm.approveStatus==2?'common-single-radio-active':'common-single-radio'">{{$t('AccountApply.同意')}}</el-link>
<el-link :type="this.AccountApplyForm.approveStatus==3?'primary':''" :disabled="isShow" @click.native="changeApproveStatus(3)" :underline="false" :class="this.AccountApplyForm.approveStatus==3?'common-single-radio-active':'common-single-radio'">{{$t('AccountApply.拒绝')}}</el-link>
</el-col>
</el-row>
<el-row >
<el-col :span="4">
<div class="grid-content ml-5" style="text-align:right">{{$t('AccountApply.审批意见')}}:</div>
</el-col>
<el-col :span="20">
<div class="grid-content-light">
<el-input type="textarea" :rows="3" v-model="AccountApplyForm.checkMessage" style="width: 460px;" ></el-input>
</div>
</el-col>
</el-row>
<div class="demo-drawer__footer" style="text-align: center;" v-show="!isShow">
<el-button @click="drawer1 = false" size="mini">{{$t('取消')}}</el-button>
<el-button type="primary" @click="updateAccountApply" size="mini">{{$t('通过审批')}}</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import API_ACCOUNTAPPLY from '../../api/api_accountapply'
import API_API from '../../api/api_api'
import API_INVENTORY from '../../api/api_inventory'
import moment from 'moment/moment.js'
export default {
data() {
return {
company:'',
drawer: false,
drawer1: false,
page: 1,
pageSize: 50,
totalNum: 0,
errormsg: this.$t('查询中'),
//多选框
isIndeterminate: false,
checkAll: false,
accountApplyList: [],
checkid: [],
employlist: [],
orderTime: '',
orderBys: 'status,checkTime desc',
AccountApplyForm:{
id: '',
lsh: '',
company: '',
//樊迎宾 新增了 source
source: '',
companyId : '',
accountId: '',
accountName : '',
supplierId : '',
amount : '',
paidTime:'',
checkMessage: "",
approveStatus: 2,
remark: "",
operMessage: '',
},
employeeName: '',
//樊迎宾 新增。 lsh,这是原来的代码遗留的问题。 source 这是我新增的 根据充值途径搜索
lsh: '',
source: '',
sourceList: [
? ? ? ? {
? ? ? ? ? id: "1",
? ? ? ? ? name: "支付宝",
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "2",
? ? ? ? ? name: "微信",
? ? ? ? },{
? ? ? ? ? id: "3",
? ? ? ? ? name: "银行转账",
? ? ? ? },{
? ? ? ? ? id: "4",
? ? ? ? ? name: "Paypal",
? ? ? ? },{
? ? ? ? ? id: "5",
? ? ? ? ? name: "赠送",
? ? ? ? },{
? ? ? ? ? id: "6",
? ? ? ? ? name: "其他",
? ? ? ? },
],
status: 0,
isShow : false,
employee:this.$store.state.employee,
}
},
methods: {
updateAccountApply() {
if(this.AccountApplyForm.approveStatus != 2 && this.AccountApplyForm.checkMessage == '') {
this.$message({
showClose: true,
message: this.$t('AccountApply.请描述拒绝理由'),
type: 'error'
});
return false;
} else {
;
}
let param = {
id: this.AccountApplyForm.id,
checkMessage: this.AccountApplyForm.checkMessage,
status: this.AccountApplyForm.approveStatus,
supplierId: this.AccountApplyForm.supplierId,
companyId : this.AccountApplyForm.companyId,
company : this.AccountApplyForm.company,
accountId : this.AccountApplyForm.accountId,
accountName : this.AccountApplyForm.accountName,
amount : this.AccountApplyForm.amount,
lsh : this.AccountApplyForm.lsh,
paidTime : this.AccountApplyForm.paidTime,
}
//console.log(param);
API_ACCOUNTAPPLY.updateAccountApply(param).then(data => {
if(data.code == 200) {
this.$message({
showClose: true,
message: data.msg,
type: 'success'
});
this.status = 0;
this.AccountApplyForm.remark = '';
this.AccountApplyForm.operMessage = '';
this.AccountApplyForm.id = '';
this.AccountApplyForm.companyId = '';
this.AccountApplyForm.company = '';
this.AccountApplyForm.accountId = '';
this.AccountApplyForm.accountName = '';
this.AccountApplyForm.supplierId = '';
this.AccountApplyForm.amount ='';
this.AccountApplyForm.paidTime='';
this.AccountApplyForm.lsh = '';
this.drawer1 = false;
this.findAccountApply();
} else {
this.$message({
showClose: true,
message: data.msg,
type: 'error'
});
}
}).catch(error => {
this.errormsg = this.$t('AccountApply.查询充值记录异常');
});
this.$emit('changeLoading', false);
},
approve(item) {
if(item.status == 1){
this.isShow = false;
}else{
this.isShow =true;
}
this.drawer1 = true;
this.AccountApplyForm.remark = item.remark;
this.AccountApplyForm.operMessage = item.operMessage;
this.AccountApplyForm.id = item.id;
this.AccountApplyForm.companyId = item.companyId;
this.AccountApplyForm.company = item.company;
this.AccountApplyForm.accountId = item.accountId;
this.AccountApplyForm.accountName = item.accountName;
this.AccountApplyForm.supplierId = item.supplierId;
this.AccountApplyForm.amount =item.amount;
this.AccountApplyForm.paidTime=item.paidTime;
this.AccountApplyForm.lsh = item.lsh;
},
showImage(item){
let imageList = [];
if(item.pictureUrl1 != null && item.pictureUrl1 != ''){
imageList.push(item.pictureUrl1);
}
if(item.pictureUrl2 != null && item.pictureUrl2 != ''){
imageList.push(item.pictureUrl2);
}
return imageList;
},
timeChange() {
this.findAccountApply();
},
handleSizeChange(val) {
this.pageSize = val;
this.findAccountApply();
},
handleCurrentChange(val) {
this.page = val;
this.findAccountApply();
},
changeSource(status) {
let result = "";
switch(status) {
case 1:
result = this.$t('AccountApply.支付宝');
break;
case 2:
result = this.$t('AccountApply.微信');
break;
case 3:
result = this.$t('AccountApply.银行转账');
break;
case 4:
result = this.$t('AccountApply.Paypal');
break;
case 5:
result = this.$t('AccountApply.赠送');
break;
case 6:
result = this.$t('其他');
break;
}
return result;
},
getAccountApplyState(status) {
let statusName = this.$t('AccountApply.待审核');
switch(status) {
case 1:
statusName = this.$t('AccountApply.待审核');
break;
case 2:
statusName = this.$t('AccountApply.已通过');
break;
case 3:
statusName = this.$t('AccountApply.未通过');
break;
}
return statusName;
},
changeState(val) {
this.status = val;
this.findAccountApply();
},
changeApproveStatus(val) {
this.AccountApplyForm.approveStatus = val;
},
changeOrderby(val) {
this.orderBys = val;
this.findAccountApply();
},
checkAllMethod() {
this.isIndeterminate = false; //默认全选
this.checkid = [];
this.accountApplyList.forEach((item, index) => {
item.checkFlag = this.checkAll;
if(this.checkAll) {
this.checkid.push(item.id);
} else {;
}
});
if(this.checkAll == true) { //如果全选被选中
this.isIndeterminate = false; //默认全选this
} else { //如果全选未被选中
this.isIndeterminate = false; //默认不确定
}
},
checkOneId(obj) {
if(true == obj.checkFlag) { //如果选中
this.checkid.push(obj.id)
} else { //如果没被选中
let tempId = this.checkid.indexOf(obj.id);
if(tempId >= 0) {
this.checkid.splice(tempId, 1);
}
}
if(this.accountApplyList.length > 0 && this.accountApplyList.length == this.checkid.length) { //如果全选
this.isIndeterminate = false;
this.checkAll = true;
} else if(0 == this.checkid.length) { //如果全不选
this.isIndeterminate = false;
this.checkAll = false;
} else { //如果部分选
this.isIndeterminate = true;
}
},
findAccountApply() {
let param = {
page: this.page,
pageSize: this.pageSize,
status: this.status,
orderBys: this.orderBys,
};
if(this.orderTime != '') {
param.timeStr = this.orderTime;
}
if(this.company != '') {
param.companyLike = this.company;
}
if(this.lshLike != '') {
param.lshLike = this.lsh;
}
if(this.employeeName != '') {
param.employeeName = this.employeeName;
}
//2022-5-7 樊迎宾 新增 根据充值途径 查询
if(this.sourceList.name != '') {
param.source = this.sourceList.name;
}
//2022-5-7 这里应该是有问题，所以 注释了。1支付宝2微信3银行转账4Paypal5赠送6其他 source指的是 充值途径。 param.source = 2;//1.销售员查看;2.财务审核员查看
// param.source = 2;//1.销售员查看;2.财务审核员查看
this.accountApplyList = [];
this.errormsg = this.$t('查询中');
//this.$emit('changeLoading', true);
API_ACCOUNTAPPLY.findAccountApply(param).then(data => {
if(data.code == 200) {
this.totalNum = data.totalNum;
this.accountApplyList = data.datas;
} else {
this.errormsg = data.msg;
}
}).catch(error => {
this.errormsg = this.$t('AccountApply.查询充值记录异常');
});
this.$emit('changeLoading', false);
},
//导出账单流水
exportExcel(){
this.$confirm(this.$t('Extend2.确定导出此文件吗?'), this.$t('提示'), {
confirmButtonText: this.$t('确定'),
cancelButtonText: this.$t('取消'),
type: 'warning'
}).then(() => {
this.export2Excel();
this.$message({
type: 'success',
message: this.$t('Extend2.导出成功!')
});
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('Extend2.取消导出!')
});
});
},
export2Excel() {
var that = this;
require.ensure([], () => {
const {
export_json_to_excel
} = require("../../assets/js/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径
// 导出的表头名
const tHeader = [
"业务流水号",
"公司名称",
"资金账户",
"充值途径",
"充值金额",
"凭证图片1",
"凭证图片2",
"付款时间",
"申请人",
"申请时间",
"状态",
"备注",
];
// 导出的表头字段名
const filterVal = [
"lsh",
"company",
"accountName",
`source`,
`amount`,
"pictureUrl1",
"pictureUrl2",
"paidTime",
"oper",
"operTime",
`status`,
"remark",
];
// that.excelData为传入的数据
const list = that.accountApplyList;
//给时间转json格式
const data = that.formatJson(filterVal, list);
// tHeader为导出Excel表头名称，data为集合数据，`xxxxxx`即为导出Excel名称
export_json_to_excel(tHeader, data, `CZ` + moment(new Date()).format('YYYYMMDDHHmmss'));
this.findAccountApply();
});
},
//将打印出excel的数据格式化为json数据
formatJson(filterVal, jsonData) {
jsonData.forEach(item => {
item.source=this.changeSource(item.source);
item.status=this.getAccountApplyState(item.status);
item.amount=item.amount+this.employee.currencyId;
});
return jsonData.map(v => filterVal.map(j => v[j]));
},
initPage() {
this.findAccountApply();
}
},
mounted() {
//document.getElementsByClassName('el-main')[0].addEventListener('scroll', this.handleScroll,true);
this.$globals.addScrollBarEvent();
this.$globals.calculateScrollFloat();
window.onresize = () => this.$globals.calculateScrollFloat();
},
created() {
this.initPage();
},
destroyed() {
//document.getElementsByClassName('el-main')[0].removeEventListener('scroll', this.handleScroll,true);
this.$globals.cancelScrollBarEvent();
this.$globals.initializationCss();
}
}
</script>
<style>
.divheight {
height: 300px;
}
</style>
|
