<style lang="less" >
#tiipOperateDetail{
height:100%;
background:#eef4fe;
display:flex;
flex-direction: column;
/deep/ .weui-cell_access .weui-cell__ft:after{
height: 10px;
width: 10px;
margin-top: -4px;
right: 0;
}
.Table{
flex-grow: 1;
height:1px;
overflow: auto;
}
>.page{
display:flex;
background:#fff;
overflow-x: auto;
height:0rpx;
border-bottom: 3px solid #eef4fe;
&.height{ height:50px; }
flex-shrink: 0;
transition: all 0.3s;
>span{
padding:0 10px;
min-width:90px;
flex-grow:1;
flex-shrink:0;
text-align:center;
box-sizing:border-box;
position:relative;
transition:all 0.5s;
display:flex;
align-items:center;
justify-content:center;
&:not(:first-child):before{
content:" ";
height:20px;
width:0;
position: absolute;
left:0;
}
&:after{
content:" ";
border-top:3rpx solid #5E9AFE;
position: absolute;
bottom:0;
left:50%;
width:0;
transform: translate(-50%,0);
transition: all 0.3s;
}
&.active{
color:#659EFD;
box-shadow: 0 0 13px -4px #999;
&:after{
width:100%;
}
&:before{
border:none;
}
& + text:before{
border:none;
}
}
}
}
>.tap{
flex-shrink: 0;
background:#E6EFFE;
display:flex;
>span{
width:calc(100%/5);
text-align: center;
position:relative;
height: 35px;
line-height: 35px;
&:after{
content:" ";
left:50%;
position:absolute;
bottom:0;
width:0;
border-top:3px solid #5E9AFE;
border-radius: 20px;
transition: all 0.3s;
}
&.active{
font-size:15px;
&:after{
width:100%;
left:0;
}
}
}
}
>.date{
flex-shrink: 0;
display: flex;
height: 30px;
>div{
flex-grow:1;
display:flex;
justify-content: center;
align-items: center;
font-size: 14px;
>.line{
width: 15px;
background: #815EFF;
height: 3px;
border-radius: 50px;
margin: 0 5px;
}
}
>button{
flex-shrink: 0;
padding: 0 10px;
position:relative;
overflow:hidden;
color:#815EFF;
&:after{
content:" ";
width:0;
height:0;
left:50%;
top:50%;
position:absolute;
background:rgba(50, 125, 255, 0.4);
border-radius: 50%;
transform:translate(-50%,-50%);
}
&:active:after{
transition: all 0.4s;
width:100px;
height:100px;
}
}
}
}
</style>
<template>
<div id="tiipOperateDetail">
<customTime ref="time"/>
<div class="Table">
<customerTable :showFooter="isFooter" :columns="columns" :list="list" :tableStyle="tableStyle" />
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import customerTable from '@/components/Table'
import customTime from "@/components/customTime"
import { mapState } from 'vuex'
export default {
name: 'tiipOperateDetail',
data () {
return {
list:[],
tableStyle:{
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'100%',
tbodyTrBorderBottom:'1px solid #dbe9f8',
width:'100%'
},
tabList:[],
columns:[
{
width:'40%',
name:'产品',
align:'center',
field:'sMaterial',
color:'#2d8cf0',
underline:true,
},
{
width:'30%',
name:'数量',
align:'center',
field:'nQtyHTML',
},
{
width:'30%',
name:'金额',
align:'center',
field:'nAmountHTML',
}
],
DateValue:[new Date],
isFooter:false,
mode:0,//进入方式0 默认 往来单位->产品列表,1 往来单位->销售,2 往来单位->退货
upbCustomerGUID:"",//客户id
page:1,
per_page:50
}
},
async mounted(){
window.s=this
this.mode=this.$route.query.mode||0
this.upbCustomerGUID=this.$route.query.upbCustomerGUID||""
this.isFooter=true
this.tableStyle.tbodyHeight="calc(100vh - 125px)"
if(this.mode==1){
this.columns=[
{
width:"25%",
name:"单号",
align:"center",
field:"sOrderNoHTML",
underline:true,
color:"#2d8cf0"
},{
width:"25%",
name:"数量",
align:"center",
field:"nQty"
},{
width:"25%",
name:"金额",
align:"center",
field:"nAmountHTML"
},{
width:"25%",
name:"状态",
align:"center",
field:"sStatus"
}
]
this.$store.dispatch("CAHNGE_META_INFO", {title:"销售列表"});
}else if(this.mode==2){
this.columns=[
{
width:"25%",
name:"单号",
align:"center",
field:"sStoreInNoHTML",
underline:true,
color:"#2d8cf0"
},{
width:"25%",
name:"匹数",
align:"center",
field:"nPieceHTML"
},{
width:"25%",
name:"数量",
align:"center",
field:"nQtyHTML"
},{
width:"25%",
name:"金额",
align:"center",
field:"nAmountHTML"
}
]
this.$store.dispatch("CAHNGE_META_INFO", {title:"退货列表"});
}
this.$nextTick(async ()=>{
this.$refs.time.$on("time",date=>{
this.DateValue=date
this.clean()
this.getData()
})
this.$refs.time.dateMode=3
this.global.$off("scrollTable");
this.global.$on("scrollTable",()=>{
this.getData(true)
})
this.global.$off("clickTd")
this.global.$on("clickTd",async res=>{
if(this.mode==1){
this.getDetail(1,"销售",this.list[res.trIndex].sOrderNo)
}else if(this.mode==2){
this.getDetail(2,"销售退货",this.list[res.trIndex].sStoreInNo)
}
})
})
},
methods:{
async getData(reData){
if(this.mode==0){
var postData = [
{key:"url",value: 'Operation gai sType-material'},
{key:"sType",value:"销售"},
{key:"begin_date",value:Util.dateFormat(this.DateValue[0],"yyyy-MM-dd")},
{key:"end_date",value:Util.dateFormat(this.DateValue[1]||this.DateValue[0],"yyyy-MM-dd 23:59")}
]
}else if(/^1$|^2$/.test(this.mode)){
if(this.per_page<50)return;
var postData=[
{key:"url",value:this.mode==1?"Operation gai sType-customer-sOrder":"Abnormal early warning-customer-sOrder"},
{key:"sType",value:this.mode==1?"销售":"销售退货"},
{key:"begin_date",value:Util.dateFormat(this.DateValue[0],"yyyy-MM-dd")},
{key:"end_date",value:Util.dateFormat(this.DateValue[1]||this.DateValue[0],"yyyy-MM-dd 23:59")},
{key:"upbCustomerGUID",value:this.upbCustomerGUID}
]
var params={
page:this.page,
per_page:this.per_page
}
this.per_page=0
}
let res = await this.request('getBoss',{
data:postData,
params:params||{},
},'加载中',{})
if(this.mode==0){
this.list = res.map((x,i)=>{
x.sMaterial = `<div>${x.sSampleMaterialNo&&`<span style="color:#FF6633;">${x.sSampleMaterialNo}</span><br>`}<span style="color:black;">${ x.sSampleMaterialName||''}</span></div>`
x.nAmountHTML = `<div><span style="color:#339966;">${(x.nAmount||0).toLocaleString()}</span></div>`;
x.nQtyHTML = `<div><span">${(x.nQty || x.nOutQty || x.nInQty||0).toLocaleString()}</span></div>`;
return x;
})
console.log(this.list,"---------lsit-===========------------")
}else if(/^1$|^2$/.test(this.mode)){
this.per_page=res.length
this.page++
res.forEach((v,i)=>{
v.sOrderNoHTML=`<div><span style='text-decoration:${i<res.length-1?'underline':'none'};'>${v.sOrderNo||0}</span></div>`
v.nAmountHTML=`<div><span style="color:#339966;">${v.nAmount||0}</span></div>`
if(this.mode==2){
v.nQtyHTML=`<div><span>${v.nSumInQty}</span></div>`
v.nPieceHTML=`<div><span>${v.nInPieceQty}</span></div>`
v.sStoreInNoHTML=`<div><span style="text-decoration:${i<res.length-1?"underline":"none"}">${v.sStoreInNo}</span></div>`
}
})
if(typeof reData=='boolean'&&reData){
this.list=res
}else{
this.list=this.list.concat(res)
}
}
},
clean(){
this.page=1
this.per_page=50
this.list=[]
},
async getDetail(M,sType,orderNo){
var postData=[
{key:"url",value:M==1?"Operation gai sType-customer-sOrder-dtl":"Abnormal early warning-customer-sOrder-dtl"},
{key:"sType",value:sType},
{key:"sOrderNo",value:orderNo},
]
var value=await this.request("getBoss",{data:postData},"加载中",{})
this.$store.dispatch("saveKanbanOrderDetail",value)
this.$router.push({name:"orderDetailsIndex"})
},
},
components:{
customerTable,
customTime,
},
}
</script>