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){
                        color:#68A0FE;
                        text-align: left;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="abnormal">
        <table cellspacing="0" >
            <tr>
                <td style="width:100px;" >
                    <div>销售退货</div>
                </td>
                <td @click="routerPushOperateDetail('销售退货')">
                    <div>{{Number(value['销售退货']||0).toLocaleString()}}</div>
                </td>
                <td style="width:100px;">
                    <div>销售退货率</div>
                </td>
                <td style="text-decoration:none;">
                    <div>{{Number(value['销售退货率']||0).toLocaleString() * 100 + '%'}}</div>
                </td>
            </tr>
            <tr>
                <td style="width:100px;">
                    <div>采购退货</div>
                </td>
                <td @click="routerPushOperateDetail('采购退货')">
                    <div>{{Number(value['采购退货']||0).toLocaleString()}}</div>
                </td>
                <td style="width:100px;">
                    <div>采购退货率</div>
                </td>
                <td style="text-decoration:none;">
                    <div>{{Number(value['采购退货率']||0).toLocaleString() * 100 + '%'}}</div>
                </td>
            </tr>
            <tr>
                <td >
                    <div>加工回修</div>
                </td>
                <td @click="routerPushOperateDetail('加工回修')">
                    <div>{{Number(value['加工回修']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>疵品数量</div>
                </td>
                <td @click="routerPushOperateDetail('疵品汇总')">
                    <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 style="text-decoration:none;">
                    <div>{{Number(value['拖期订单总数量']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>金额</div>
                </td>
                <td style="text-decoration:none;">
                    <div>{{Number(value['拖期订单总金额']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>供应商赔款</div>
                </td>
                <td @click="routerPushOperateDetail('供应商索赔')">
                    <div>{{Number(value['供应商索赔']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>客户赔款</div>
                </td>
                <td @click="routerPushOperateDetail('客户索赔')">
                    <div>{{Number(value['客户索赔']||0).toLocaleString()}}</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>超期应收额</div>
                </td>
                <td @click="routerPushOperateDetail('超期应收')">
                    <div>{{Number(value['超期应收']||0).toLocaleString()}}</div>
                </td>
                <td>
                    <div>超期应付额</div>
                </td>
                <td @click="routerPushOperateDetail('超期应付')">
                    <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,
                })
            }
        },
        routerPushOperateDetail(type){
            let data = {};
            data.sType = type;
            data.begin_date = util.dateFormat(this.start,"yyyy-MM-dd");
            data.end_date = (this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59';
            this.$store.dispatch('saveKanbanHdr',data);
            this.$store.dispatch('saveRefresh',true);
            this.$router.push({name:'tiipOperateDetail',type:type})
        }
    },
}
</script>