Skip to content

W
WX_h5
Commit d345fbb8 authored by godwithdh's avatar godwithdh
Browse files
Options

往来单位

parent 19062f84
Hide whitespace changes
Inline Side-by-side
Showing with 526 additions and 1 deletion
src/components/customTime.vue 0 → 100644
View file @ d345fbb8
<style lang="less">
#customTime{
>.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="customTime">
<div class="tap">
<span :class="{active:dateMode==1}" @click="dateSelect(1)">日</span>
<span :class="{active:dateMode==2}" @click="dateSelect(2)">周</span>
<span :class="{active:dateMode==3}" @click="dateSelect(3)">月</span>
<span :class="{active:dateMode==4}" @click="dateSelect(4)">年</span>
<span :class="{active:dateMode==5}" @click="dateSelect(5)">自定义</span>
</div>
<div class="date">
<button v-if="dateMode<5" @click="preDate">上一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
<div>
<span>{{startDate}}</span>
<span v-show="dateMode>1" class="line" />
<span v-show="dateMode>1">{{endDate}}</span>
</div>
<button v-if="dateMode<5" @click="nextDate">下一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
</div>
<calendar
:show.sync="calendarShow"
mode="during"
:defaultDate="calendarValue"
@change="Change"/>
</div>
</template>
<script>
import Util from '@/libs/util.js'
export default {
name:"customTime",
data(){
return{
dateMode:1,
calendarShow:false,
DateValue:[new Date()],
calendarValue:[],
}
},
computed:{
startDate(val){
return Util.dateFormat(this.DateValue[0],"yyyy年MM月dd日")
},
endDate(val){
return Util.dateFormat(this.DateValue[1],"yyyy年MM月dd日");
},
},
watch:{
dateMode(n){
var date=new Date
switch(n){
case 1:this.DateValue=[date];break;
case 2:this.DateValue=[
this.setWeek(new Date(),0,'start'),
this.setWeek(new Date(),0,'end')
];break;
case 3:this.DateValue=[
this.setMonth(new Date(),0,"start"),
this.setMonth(new Date(),0,"end"),
];break;
case 4:this.DateValue=[
this.setYear(new Date(),0,"start"),
this.setYear(new Date(),0,"end")
];break;
}
},
DateValue(){
this.$emit("time",this.DateValue)
}
},
methods:{
preDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()-1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],-1,"start"),
this.setWeek(this.DateValue[1],-1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],-1,"start"),
this.setMonth(this.DateValue[1],-1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],-1,"start"),
this.setYear(this.DateValue[1],-1,'end')];break;
}
},
nextDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()+1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],+1,"start"),
this.setWeek(this.DateValue[1],+1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],+1,"start"),
this.setMonth(this.DateValue[1],+1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],+1,"start"),
this.setYear(this.DateValue[1],+1,'end')];break;
}
},
dateSelect(index){//选择日期方式
if(index==5){
this.calendarShow=true
}else{
this.calendarValue=[]
this.dateMode=index
}
},
Change(e){
if(e.length==2){
this.DateValue=this.calendarValue=[e[0].$d,e[1].$d]
this.dateMode=5
this.calendarShow=false
}
},
setWeek(date,val,mode){
if(mode=="start"){
date.setDate(date.getDate()+1-(date.getDay()||7)+val*7)
}else{
date.setDate(date.getDate()+7-(date.getDay()||7)+val*7)
}
return new Date(date.getTime());
},
setMonth(date,val,mode){
date.setDate(1)
date.setMonth(date.getMonth()+val)
if(mode=='end'){
date.setMonth(date.getMonth()+1)
date.setDate(0)
}
return new Date(date.getTime());
},
setYear(date,val,mode){
date.setFullYear(date.getFullYear()+val)
date.setMonth(0)
if(mode=="start"){
date.setDate(1)
}else{
date.setFullYear(date.getFullYear()+1)
date.setDate(0);
}
return new Date(date.getTime());
},
},
}
</script>
src/router/index.js
View file @ d345fbb8
......@@ -122,6 +122,14 @@ let tipRoutes = [
title:"接单详情"
}
},
{//往来单位进入
path:"/kanbanUnitOperateDetail/:userId",
name:"tiipUnitOperateDetail",
component:()=>import("@/view/tiip/kanban/unit_operateDetail.vue"),
meta:{
title:"产品排行"
}
},
{
path:"/kanbanOperateCustomDetail/:type",
name:"tiipOperateCustomDetail",
......
src/view/tiip/IntReportForms/index.vue
View file @ d345fbb8
......@@ -98,6 +98,7 @@
.content{
flex-grow:1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
......
src/view/tiip/kanban/operateDetail.vue
View file @ d345fbb8
......@@ -128,7 +128,7 @@ export default {
field:'nAmountHTML',
}
],
showTab:true
showTab:true,
}
},
computed:{
......@@ -139,6 +139,9 @@ export default {
},
async mounted(){
window.d = this;
this.$nextTick(()=>{
})
},
async activated(){
this.showTab = true;
......
src/view/tiip/kanban/unit_operateDetail.vue 0 → 100644
View file @ d345fbb8
<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 :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>
</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:'calc(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',
}
],
hdr:{
begin_date:"2020-01-01",
end_date:"2020-01-31 23:59",
nAmount:792157.6,
nPieces:365,
nQty:427239.37,
sType:"销售",
},
DateValue:[new Date],
}
},
async mounted(){
this.$nextTick(async ()=>{
this.$refs.time.$on("time",date=>{
this.DateValue=date
this.getData()
})
this.$refs.time.dateMode=3
})
},
methods:{
async getData(){
let postData = [
{key:"url",value: 'Operation gai sType-material'},
{key:"sType",value:"销售"},
{key:"begin_date",value:this.DateValue[0]},
{key:"end_date",value:this.DateValue[1]||this.DateValue[0]}
]
let res = await this.request('getBoss',{
data:postData,
params:{},
},'加载中',{})
this.list = res.map(x=>{
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;
})
},
},
components:{
customerTable,
customTime,
},
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment