<style scoped>
._nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;}
._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
._nav li._active{background-color:#FFFFFF;color: #333333 }
._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
._conten li{display: flex;padding:10px 30px;margin-top: 20px;border: 1px solid #ebebeb;}
._left{display: flex;flex: 6;align-items: center;border-right: 1px dashed #DCDFE6;padding-right: 20px !important;}
._left>div{padding-left: 14px}
._Icon{width: 50px;height: 50px;line-height: 50px;text-align: center;color: white;font-weight: bold;background-color: #2AAEF2;border-radius: 50%;font-size: 22px}
._t{color: #333333;font-size: 14px;padding-bottom: 7px;font-weight: bold}
._s{color: #666666;font-size: 12px;}
._right{flex: 1;align-items: center;display: flex;padding-left: 20px !important;border-left: 1px dashed #DCDFE6;justify-content: center;}
._right i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;outline: none;}
._right i.icon-liucheng{background-color: #00C6FF}
._right i.icon-liucheng:hover{background-color: #83d7ef}
._right i.icon-liucheng:active{background-color: #038cb3}
._right i.el-icon-circle-plus-outline{background-color: #47BF8C}
._right i.el-icon-circle-plus-outline:hover{background-color: #47BF8C}
._right i.el-icon-circle-plus-outline:active{background-color: #10a063}
._log_t{padding: 10px;}
</style>
<template>
<div>
<ul class="_nav clearfix" v-if="showTab==0">
<li :class="active==1?'_active':''" @click="active=1,tabData(1)">{{$t('fnc.shoukuandan')}}</li>
<li :class="active==2?'_active':''" @click="active=2,tabData(2)">{{$t('fnc.fukuandan')}}</li>
<li v-if="!visaShowTab" :class="active==3?'_active':''" @click="active=3,tabData(3)">挂账单</li>
<li v-if="!visaShowTab" :class="active==4?'_active':''" @click="active=4,tabData(4)">折让单</li>
</ul>
<ul class="_nav ceshi clearfix" v-else>
<li :class="active==1?'_active':''" v-if="showTab==1">{{$t('fnc.shoukuandan')}}</li>
<li :class="active==2?'_active':''" v-if="showTab==2">{{$t('fnc.fukuandan')}}</li>
<li :class="active==3?'_active':''" v-if="showTab==3">挂账单</li>
<li :class="active==4?'_active':''" v-if="showTab==4">折让单</li>
</ul>
<!-- 搜索框匹配 -->
<div style="margin:10px 0;">
<span style="margin: 0 20px;">筛选：</span>
<el-input v-model="searchVal" placeholder="请输入内容" style="width:200px"></el-input>
</div>
<ul class="_conten">
<li v-for="(item,index) in NewItems" v-if="(item.IsShow === 1 || item.showYes) && item.bigShow">
<div class="_left">
<span class="_Icon">{{item.Name.substring(0,1)}}</span>
<div>
<p class="_t">{{item.Name}}</p>
<p class="_s">{{item.DescribeInfo}}</p>
</div>
</div>
<div class="_right">
<el-tooltip popper-class="item _process" effect="dark" :content="$t('fnc.liucheng')" placement="top">
<el-popover
popper-class="detailsIT_Journal"
width="580"
trigger="click">
<div class="InfoChangeLog" >
<div class="changLog">
<p class="_log_t">{{$t('fnc.skliucheng')}}</p>
<my-FlowChartModule :data="AuditListData"></my-FlowChartModule>
</div>
</div>
<i slot="reference" class="iconfont icon-liucheng" @click="getFlowChart(item.Id)"></i>
</el-popover>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('pub.addBtn')" placement="top">
<i class="edit el-icon-circle-plus-outline" @click="goUrl('addFinancialDocuments',item.Id,item.Name+$t('visa.v_dan'),item.Type,item.IsUploadPic)"></i>
</el-tooltip>
</div>
</li>
</ul>
<div class="noData" v-show="noData">
{{$t('system.content_noData')}}
</div>
</div>
</template>
<script>
import myFlowChartModule from "./FinancialSubmodule/FlowChartModule.vue";
export default {
data(){
return{
searchVal:'',
GetList:[],
active:1,
AuditListData:{
AuditList:[]
},
collectList:[],
payList:[],
GZList: [],
ZRList: [],
total:0,
currentPage:1,
noData:false,
lastID:-1,
orderObj:null,
showTab:0,
templateID: null,
DepartID: null,
EmployeeId: null,
OrderSource: null,
visaShowTab:false,
tradeWay:'',
platformAccount:'',
Handmsg:{},
czmsg:{},
crmOrderObj: null,
commissionObj: null,
}
},
computed: {
NewItems() {
var _this = this;
var NewItems = [];
this.GetList.map(function(item) {
if (item.Name.search(_this.searchVal) != -1) {
NewItems.push(item);
}
});
return NewItems;
}
},
methods:{
goUrl(path,id,Name,Type,IsUploadPic) {
if(this.active==1){
// 手配费 收款单参数Handmsg
if(this.$route.query.Handmsg){
this.$router.push({ name: "addReceivablesDocuments",query:{"Handmsg":this.Handmsg,"tradeWay":this.tradeWay,"platformAccount":this.platformAccount,"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增收款单'}})
}
// 财务收据
else if(this.$route.query.czmsg){
let Handmsg=this.$route.query.czmsg;
this.$router.push({ name: "addReceivablesDocuments",query:{"Handmsg":Handmsg,"tradeWay":this.tradeWay,"platformAccount":this.platformAccount,"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增收款单'}})
}
else{
// crm自动登陆传过来的参数
if(this.crmOrderObj){
this.$router.push({
name: "addReceivablesDocuments",
query:{
"tradeWay":this.tradeWay,
"platformAccount":this.platformAccount,
"id":id,
"Name":Name,
"Type":this.crmOrderObj.type,
"crmOrderObj":JSON.stringify(this.crmOrderObj),
"orderObj":this.orderObj,
'path':this.$route.query.path,
'IsUploadPic':IsUploadPic,
'Cmd':this.$route.query.Cmd,
'companyID':this.$route.query.companyID,
blank:'y',
tab:'新增收款单'
}
})
}else{
this.$router.push({
name: "addReceivablesDocuments",
query:{
"tradeWay":this.tradeWay,
"platformAccount":this.platformAccount,
"id":id,
"Name":Name,
"Type":Type,
"orderObj":this.orderObj,
'path':this.$route.query.path,
'IsUploadPic':IsUploadPic,
'Cmd':this.$route.query.Cmd,
'companyID':this.$route.query.companyID,
blank:'y',
tab:'新增收款单'
}
})
}
}
}else if(this.active==2){
// 付款单参数czmsg
// 领队报账 预付款冲抵 返款制单
if(this.$route.query.czmsg){
this.$router.push({ name: path,query:{"czmsg":this.czmsg,"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增付款单'}})
}else{
// crm自动登陆传过来的参数
if(this.crmOrderObj){
this.$router.push({
name: path,
query:{
"id":id,
"Name":Name,
"Type":this.crmOrderObj.type,
"crmOrderObj":JSON.stringify(this.crmOrderObj),
"orderObj":this.orderObj,
'path':this.$route.query.path,
'IsUploadPic':IsUploadPic,
'Cmd':this.$route.query.Cmd,
'companyID':this.$route.query.companyID,
blank:'y',
tab:'新增付款单'
}
})
}else if(this.commissionObj){//印象提成制单
this.$router.push({
name: path,
query:{
"id":id,
"Name":Name,
"Type":Type,
"commissionObj":JSON.stringify(this.commissionObj),
'path':this.$route.query.path,
blank:'y',
tab:'新增付款单'
}
})
} else{
this.$router.push({
name: path,
query:{
"id":id,
"Name":Name,
"Type":Type,
"orderObj":this.orderObj,
'path':this.$route.query.path,
'IsUploadPic':IsUploadPic,
'Cmd':this.$route.query.Cmd,
'companyID':this.$route.query.companyID,
blank:'y',
tab:'新增付款单'
}
})
}
}
}else if(this.active==4){
this.$router.push({ name: path,query:{"id":id,"Name":Name,"Type":2,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增付款单'}})
}else {
this.$router.push({ name: "addFinancialGZDocuments",query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增挂账单'}})
}
},
getFlowChart(id){ //获取流程图
if(this.lastID==id)return
this.apipost('FinancialFlowTemplate_post_GetProcessList',{ID:id,WorkFlowID:0,TemplateType:0},res=>{
if(res.data.resultCode==1){
this.lastID = id
res.data.data.forEach(y=>{
y.contentTips = y.AuditDescription+(y.AuditWay=="2"? this.$t('fnc.huiqian') : this.$t('fnc.huoqian'))
});
this.AuditListData.AuditList = res.data.data
}else{}
},err=>{})
},
tabData(t){ //切换
if(t==1){
this.GetList = this.collectList;
}else if (t==2){
this.GetList = this.payList;
}else if (t==3) {
this.GetList = this.GZList;
}
else if (t==4) {
this.GetList = this.ZRList;
}
if(this.GetList.length<1){
this.noData = true;
}else{
this.noData = false;
}
let newList = [];
if (this.templateID) {
this.templateID.forEach(x=>{
this.GetList.forEach(y=>{
if(x == y.Id) {
y.showYes = true
newList.push(JSON.parse(JSON.stringify(y)))
} else {
y.showYes = false
}
})
})
this.GetList = newList;
}
},
Financial_post_GetList(){ //获取
this.apipost('Financial_post_GetList',{},res=>{
if(res.data.resultCode==1){
let data = res.data.data;
if(data){
data.forEach(x => {
// 5-8 OrderSource 为5 并且当前登录人为吴珊，只显示49和50
// 如果不是吴珊，只显示49
// 如果没有 OrderSource 则49和50都不显示
// if (this.OrderSource === '5' && this.showTab === '2' && (x.Id === 49 || x.Id === 50)) {
// if (x.Id === 49 || x.Id === 50){
// x.bigShow = false
// if (x.Id === 49){
// x.bigShow = true
// } else if (x.Id === 50 && this.EmployeeId === 639){
// x.bigShow = true
// }
// } else {
// x.bigShow = false
// }
// } else if (x.Id === 49 || x.Id === 50){
// x.bigShow = false
// } else {
// 5-5 仅茈、而巳。 14:32:06
// 部门id = 242 或者 240 就展示出 templeteId=33 的流程， 流程名字叫做 公司佣金收款
if (x.Id === 33 || x.Id === 48) {
if (x.Id === 33) {
if (this.DepartID === 242 || this.DepartID === 240) {
x.bigShow = true
} else {
x.bigShow = false
}
} else if (x.Id === 48 ) { //76 77 稽核单据|| x.Id === 76 || x.Id === 77
// if (this.EmployeeId === 1725) {
x.bigShow = true
// } else {
// x.bigShow = false
// }
}
} else {
x.bigShow = true
}
// }
if(x.Type==1){
this.collectList.push(x);
}else if (x.Type==2){
this.payList.push(x);
}else if (x.Type==7){
this.GZList.push(x);
}else if (x.Type==8){
this.ZRList.push(x);
}
});
}
this.GetList = this.collectList;
if(this.GetList.length<1){
this.noData = true;
}
if(this.$route.query.Type){
this.tabData(this.$route.query.Type);
}
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
}
,mounted(){
// crm自动登陆传过来的参数
if(this.$route.query.crmOrderObj){
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.active = this.crmOrderObj.type
this.showTab = this.crmOrderObj.type
}else if(this.$route.query.commissionObj){
this.commissionObj = JSON.parse(this.$route.query.commissionObj)
this.active = this.$route.query.Type
this.showTab = this.$route.query.Type
} else{
this.showTab = this.$route.query.Type?this.$route.query.Type:0;
this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
}
if(this.getLocalStorage()){
let userInfo = this.getLocalStorage();
this.DepartID = userInfo.RB_Department_Id;
this.EmployeeId = userInfo.EmployeeId;
}
this.templateID = this.$route.query.templateID ? JSON.parse(this.$route.query.templateID) : null
this.OrderSource = this.$route.query.OrderSource ? this.$route.query.OrderSource : null
// this.showTab = this.$route.query.Type?this.$route.query.Type:0;
this.tradeWay = this.$route.query.tradeWay?this.$route.query.tradeWay:0;
this.platformAccount = this.$route.query.platformAccount?this.$route.query.platformAccount:0;
this.searchVal = this.$route.query.searchTitle?this.$route.query.searchTitle:'';
// searchVal
if(this.$route.query.visaType){
this.visaShowTab=true;
}
if(this.showTab==1){
this.GetList = this.collectList;
} else if(this.showTab==3){
this.GetList = this.GZList;
}else if(this.showTab==2){
this.GetList = this.payList;
}
else if(this.showTab==4){
this.GetList = this.ZRList;
}
// this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
this.orderObj = this.$route.query.orderObj;
this.Handmsg = this.$route.query.Handmsg?this.$route.query.Handmsg:this.Handmsg;
this.czmsg = this.$route.query.czmsg?this.$route.query.czmsg:this.czmsg;
this.Financial_post_GetList();
},components: {
"my-FlowChartModule": myFlowChartModule
}
}
</script>