storage/src/view/base-manage/provider-maintenance/purchaseListDtl.vue

<template>
    <div>
        <header>
            <h2>{{dtl.name}}</h2>
            <Button @click="$router.push('purchaseList')">返回</Button>
        </header>
        <div class="total-warp">
            <ul style="width:72%">
                <li>
                    {{dtl.MaterialTypeCount}}</br>
                    <span>采购物料数</span>
                </li>
                <li>
                    {{dtl.sumMoney}}</br>
                    <span>采购总额</span>
                </li>
                <li>
                    {{dtl.lastYearMoney}}</br>
                    <span>去年采购额</span>
                </li>
                <li>
                    {{dtl.yearMoney}}</br>
                    <span>今年采购额</span>
                </li>
                <li>
                    {{dtl.lastMonthMoney}}</br>
                    <span>上月采购额</span>
                </li>
                <li>
                    {{dtl.monthMoney}}</br>
                    <span>本月采购额</span>
                </li>
                
            </ul>
            <ul style="width:26%">
                <li style="width:50%">
                    {{dtl.BackCount}}</br>
                    <span>退货次数</span>
                </li>
                <li style="width:50%">
                    {{dtl.warningTypeCount == -1 ? 0 : dtl.warningTypeCount}}</br>
                    <span>问题记录</span>
                </li>
            </ul>
        </div>
        <h3>采购物料分析（在该供应商采购物料种类共计<span>{{data1.length}}</span>款）</h3>
        <Table :columns="columns1" :data="data1"></Table>
        <Page 
            style="margin:10px auto 0;text-align: center;" 
            :total="req1.total" 
            :current="req1.pageNum" 
            :page-size="5" 
            @on-change="(num)=>pageChange(num,'getSpmAnalyse','req1')" 
        />
        <h3>
            月度采购分析
            <DatePicker format="yyyy" type="year" v-model="req2.date" @on-change="selectDate" placeholder="请选择年份" style="width: 200px;float: right;"></DatePicker>
        </h3>
        <Table :columns="columns2" :data="data2"></Table>
        <h3>
            单价调整记录
        </h3>
        <Table :columns="columns3" :data="data3"></Table>
        <Page 
            style="margin:10px auto 0;text-align: center;" 
            :total="req1.total" 
            :current="req1.pageNum" 
            :page-size="5" 
            @on-change="(num)=>pageChange(num,'getSuList','req3')" 
        />
        <h3>
            退货记录（共计退货面料<span>{{sumTotal.count}}</span>件，<span>{{sumTotal.sumMoney}}</span>元）
            <DatePicker format="yyyy" type="year" v-model="req2.date" @on-change="selectDate" placeholder="请选择年份" style="width: 200px;float: right;"></DatePicker>
        </h3>
        <Table :columns="columns4" :data="data4"></Table>
        <h3>
            问题反馈（共计反馈问题<span>{{data5[0].total}}</span>次）
        </h3>
        <Table :columns="columns5" :data="data5"></Table>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data(){
            return {
                dtl:{
                    BackCount:null,
                    MaterialTypeCount:null,
                },
                columns1:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '物料类型',
                        key: 'categoryName'
                    },
                    {
                        title: '面料名称',
                        key: 'materialName',
                        width:300
                    },
                    {
                        title: '采购总额',
                        key: 'sumMoney'
                    },
                    {
                        title: '采购占比',
                        key: 'purProportion',
                        render:(h,p)=>{
                            console.log(p.row.purProportion)
                            return h('span',{},
                                p.row.purProportion * 1000 /10 + '%'
                            )
                        }
                    },
                    {
                        title: '上个月采购额',
                        key: 'lastMonthMoney'
                    },
                     {
                        title: '本月采购额',
                        key: 'monthMoney'
                    },
                ],
                data1:[],
                columns2:[],
                data2:[],
                data3:[],
                columns4:[],
                columns5:[],
                data5:[
                    {
                        name:"数量",
                        total:0
                    }
                ],
                data4:[],
                columns3:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '面料名称',
                        key: 'materialName'
                    },
                    {
                        title: '调整时间',
                        key: 'createdTime'
                    },
                    {
                        title: '原单价',
                        key: 'oldPrice'
                    },
                    {
                        title: '调整后单价',
                        key: 'newPrice',
                        render:(h,p)=>{
                            return h('span',{
                                style:{
                                    color:(p.row.newPrice > p.row.oldPrice) ? 'red' : '#008012'
                                },
                            },
                                p.row.newPrice
                            )
                        }
                    },
                ],
                req3:{
                    pageNum:1,
                    pageSize:5,
                    total:0,
                },
                req2:{
                    date:'2022',
                },
                req1:{
                    pageNum:1,
                    pageSize:5,
                    total:0,
                },
                sumTotal:{
                    count:0,
                    sumMoney:0,
                },
                supplierProblemDict:{
                    1:"短少",
                    2:'抽纱',
                    3: "褶皱",
                    4: "脏污",
                    5: "破洞",
                    6: "缩水"
                },
            }
        },
        methods:{
            selectDate(e){
                this.req2.date = e
                this.getMonthSum()
            },
            pageChange(num,fnName,reqName){
                const v = this
                v[reqName].pageNum = num
                v[fnName]()
            },
            getCount(){
                const v = this
                axios
				.get('/cloudApi/supplier/su/count?id=' + v.dtl.id, {})
                    .then((res) => {
                        this.$Spin.hide()
                        this.dtl.BackCount = res.data.data.BackCount
                        this.dtl.MaterialTypeCount = res.data.data.MaterialTypeCount
                    })
            },
            //问题统计
            getStatisticsProblem(){
                const v = this
                axios
				.get('/cloudApi/supplierProblem/statisticsProblem?id=' + v.dtl.id, {})
                    .then((res) => {
                        console.log(res)
                        const columnsCopy = [{
                            title: ' ',
                            key: 'name'
                        },{
                            title: '合计',
                            key: 'total'
                        }]
                        const dataCopy = [{
                            name:"数量",
                            total:0
                        }]
                        for (const key in res.data.data) {
                            columnsCopy.push({
                                title: v.supplierProblemDict[key],
                                key: key
                            })
                            dataCopy[0][key] = res.data.data[key]
                            dataCopy[0].total += res.data.data[key]
                        }
                        v.columns5 = columnsCopy
                        v.data5 = dataCopy
                    })
                
            },
            
            //采购物料分析
            getSpmAnalyse(){
                this.$Spin.show()
                    axios
                        .post('/cloudApi/supplier/su/spmAnalyse', { ...this.req1,id:this.dtl.id })
                        .then((res) => {
                            this.$Spin.hide()
                            this.data1 = res.data.data
                        })
                    axios
                        .post('/cloudApi/supplier/su/spmAnalyse/count', { ...this.req1,id:this.dtl.id })
                        .then((res) => {
                            this.req1.total = res.data.data
                        })
            },
            //月度采购分析
            getMonthSum(e){
                const v = this
                axios.get('/cloudApi/supplier/purchase/month/sum?id=' + v.dtl.id +"&date=" + v.req2.date, {})
                    .then((res) => {
                        this.$Spin.hide()
                        const columns2Copy = [
                            {
                                title: '时间',
                                key: 'name'
                            }
                        ]
                        const data2Copy = [
                            {
                                name:"采购额"
                            },
                            {
                                name:'占公司比例'
                            },
                        ]
                        for (let i = 0; i < res.data.data.length; i++) {
                            const element = res.data.data[i];
                            columns2Copy.push({
                                title: element.createdTime.slice(0,7),
                                key: element.createdTime
                            })
                            data2Copy[0][element.createdTime] = element.money * 1
                            data2Copy[1][element.createdTime] = element.purProportion * 1000 / 10 + '%'
                        }
                        v.columns2 = columns2Copy
                        v.data2 = data2Copy
                    })
            },
            //单价调整记录
            getSuList(){
                const v =  this
                this.$Spin.show()
                axios
                    .post('/cloudApi/supplierPricechange/su/list', { ...this.req3,id:this.dtl.id })
                    .then((res) => {
                        this.$Spin.hide()
                        this.data3 = res.data.data
                    })
                axios
                    .post('/cloudApi/supplierPricechange/su/list/count', { ...this.req3,id:this.dtl.id })
                    .then((res) => {
                        this.req3.total = res.data.data
                    })
            },
            //退货记录
            getSum(){
                const v = this
                axios.get('/cloudApi/supplier/back/sum?id=' + v.dtl.id +"&date=" + v.req2.date,{}).then(res=>{
                    this.sumTotal = res.data.data
                })
                
                axios.get('/cloudApi/supplier/month/getSum?id=' + v.dtl.id +"&date=" + v.req2.date, {})
                    .then((res) => {
                        this.$Spin.hide()
                        const columns2Copy = [
                            {
                                title: '时间',
                                key: 'name'
                            }
                        ]
                        const data2Copy = [
                            {
                                name:"退货件数"
                            },
                            {
                                name:'退货金额'
                            },
                        ]
                        for (let i = 0; i < res.data.data.length; i++) {
                            const element = res.data.data[i];
                            element.createdTime = element.createdTime.slice(0,7)
                            columns2Copy.push({
                                title: element.createdTime,
                                key: element.createdTime
                            })
                            data2Copy[0][element.createdTime] = (element.count == -1 ) ? 0 : element.count * 1
                            data2Copy[1][element.createdTime] = element.sumMoney * 1
                        }
                        v.columns4 = columns2Copy
                        v.data4 = data2Copy
                        
                    })
            },
           
            init(){
                this.getCount()
                this.getSpmAnalyse()
                this.getMonthSum()
                this.getSuList()
                this.getSum()
                this.getStatisticsProblem()
            },
        },
        created(){
            console.log(this.$route)
            this.$route.query.BackCount = 0
            this.$route.query.MaterialTypeCount = 0
            this.dtl = this.$route.query
            this.init()
            
        },
    }
</script>

<style lang="less" scoped>
h2{
    font-size: 18px;
    margin-bottom:20px;
    float: left;
    color: #000000;
}
header{
    overflow: hidden;
    button{
        float: right;
    }
}
h3{
    font-size: 14px;
    line-height: 58px;
    span{
        color: red;
    }
}
.total-warp{
    display: flex;
    justify-content: space-between;
    
    ul{
        height: 76px;
        border:1px solid #979797;
        background: #fff;
        li{
            float: left;
            width: 16.666%;
            text-align: center;
            line-height: 30px;
            list-style: none;
            font-size: 14px;
            padding:8px 0;
            color: #3F3F3F;
            font-weight: 600;
            span{
                color: #6E6E6E;
                font-weight: 400;
            }
        }
    }
}
</style>