abnormal.vue

<style lang="less">
    .abnormal{
        >table{
            width: calc(100% - 20px);
            text-align: center;
            margin: 10px;
            background: #E6F0FE;
            border-radius: 5px;
            tr{
                >td{
                    padding:10px 0;
                    >div{
                        height:45px;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        background:#fff;
                        padding:5px 2px;
                    }
                    &:first-child>div{
                        border-left:2px solid #8D90FF;
                    }
                    &:nth-child(2n-1)>div{
                        color:#68A0FE;
                    }
                    &:nth-child(2n){
                        text-align: left;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="abnormal">
        <table cellspacing="0" >
            <tr>
                <td style="width:100px;">
                    <div>销售退货</div>
                </td>
                <td>
                    <div>{{Number(value['销售退货']||0).toLocaleString()}}</div>
                </td>
                <td style="width:100px;">
                    <div>采购退货</div>
                </td>
                <td>
                    <div>{{Number(value['采购退货']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>加工回修</div>
                </td>
                <td>
                    <div>{{Number(value['加工回修']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>疵品数量</div>
                </td>
                <td>
                    <div>{{Number(value['疵品汇总']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td colspan='4' style="text-align:left;padding:0 0 0 10px;color:#68A0FE;">拖期订单：{{value['拖期订单数量']||0}}</td>
            </tr>
            <tr>
                <td>
                    <div>数量</div>
                </td>
                <td>
                    <div>{{Number(value['拖期订单总数量']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>金额</div>
                </td>
                <td>
                    <div>{{Number(value['拖期订单总金额']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>供应商赔款</div>
                </td>
                <td>
                    <div>{{Number(value['供应商索赔']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>客户赔款</div>
                </td>
                <td>
                    <div>{{Number(value['客户索赔']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>超期应收额</div>
                </td>
                <td>
                    <div>{{Number(value['超期应收']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>超期应付额</div>
                </td>
                <td>
                    <div>{{Number(value['超期应付']||0).toLocaleString()}}</div>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
import util from "@/libs/util.js"
export default {
    name:"abnormal",
    props:{
        start:Date,
        end:Date,
    },
    data(){
        return{
            value:{},
        }
    },
    watch:{
        start(n){
            this.search()
        },
        end(n){
            this.search()
        },
    },
    created(){
        this.$nextTick(()=>{
            this.search()
        })
    },
    methods:{
        async search(){
            var value= await this.request('getBoss',{
                data:[
                    {key:"url",value:"Abnormal early warning"},
                    {key:"begin_date",value:util.dateFormat(this.start,"yyyy-MM-dd")},
                    {key:"end_date",value:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59'},
                ]
            },"加载中",{})
            if(typeof value=="object"&&value.length>0){
                this.value=value[0]
            }else{
                this.$vux.confirm.show({
                    title:"提示",
                    content:"未获取到数据",
                    showConfirmButton:false,
                })
            }
        },
    },
}
</script>