byte-sailing-storage/src/view/material-manege/purchaseTotal/purchaseTotal.vue

<template>
	<div class="purchaseTotal">
		<div class="bar-title" style="overflow: hidden;">
			<span style="font-size: 16px; font-weight: bold; color: #000"
				>申购统计</span
			> 
			<Poptip placement="bottom">
				<Icon type="ios-alert-outline" size="20" style="margin:0 10px 0 5px;position: relative;top:-3px" />
				<div class="api" slot="content" style="padding:10px">
					取申购审批通过，生成合同后的数据；<br>
					合同未质检取合同金额，已质检取质检金额
				</div>
			</Poptip>
			<span v-if="this.params.beginTime">({{(this.params.beginTime ?  this.params.beginTime.slice(0,11) : '') + '-' + (this.params.endTime ?  this.params.endTime.slice(0,11) : '')}})</span>
            <date-select v-model="params" @change="selectTime"></date-select>
			
		</div>
		<div class="total-header" style="padding-top:10px">
			<div class="card-warp" style="width: 13.5%; margin-right: 1%">
				<Card dis-hover style="color:#3f92f9;font-weight: bold;">
					<div>申购金额</div>
					<div class="big-num"  style="color:#3f92f9;font-weight: bold;">{{totalData.money[0]}}</div>
				</Card>
			</div>
			<div class="card-warp" style="width: 38.5%; margin-right: 1%">
				<Card dis-hover>
					<ul>
						<li>
							<div>面料采购</div>
							<div class="big-num">{{totalData.money[1]}}</div>
						</li>
						<li>
							<div>墨水采购</div>
							<div class="big-num">{{totalData.money[2]}}</div>
						</li>
						<li>
							<div>其他</div>
							<div class="big-num">{{totalData.money[3]}}</div>
						</li>
					</ul>
				</Card>
			</div>
			<div class="card-warp" style="width: 46%">
				<Card dis-hover>
					<ul>
						<li style="width: 25%">
							<div>45天账期</div>
							<div class="big-num">{{totalData.money[4]}}</div>
						</li>
						<li style="width: 25%">
							<div>30天账期</div>
							<div class="big-num">{{totalData.money[5]}}</div>
						</li>
						<li style="width: 25%">
							<div>15天账期</div>
							<div class="big-num">{{totalData.money[6]}}</div>
						</li>
						<li style="width: 25%">
							<div>预付款</div>
							<div class="big-num">{{totalData.money[7]}}</div>
						</li>
					</ul>
				</Card>
			</div>
		</div>
		<div style="background: #fff; padding: 10px; margin: 10px 0">
			<Tabs v-model="salesVolumeCompanyTotalType" @on-click="tabsChange">
				
				<TabPane
                    
					:label="
						(h) => {
							return h('div', [
								h('span', companyMoneyName[index] + '('),
								h(
									'span',
									{ style: { color: 'red' } },
									i.length
								),
								h('span', ')'),
							])
						}
					"
					:name="index"
                    v-for="(i,index) in totalData.statisticsSupplier" :key="index"
				></TabPane>
				
			</Tabs>
			<div>
				<Button
					style="margin: 0 10px 5px 0"
					:type="
						params.supplierId == null ? 'primary' : 'default'
					"
					@click="changeCompany(null, 0)"
					>全部</Button
				>
				<Button
					style="margin: 0 10px 5px 0"
					@click="changeCompany(i.supplierId, index)"
					v-for="(i, index) in company"
					:type="
						params.supplierId == i.supplierId
							? 'primary'
							: 'default'
					"
					:key="i.supplierId"
				>
					{{ i.supplierName
					}}<span
						:style="
							params.supplierId == i.supplierId
								? 'color:#ffc107'
								: 'color:red'
						"
					>
						({{ i.money }})</span
					>
				</Button>
			</div>
		</div>
        <div class="table">
            <Table :columns="columns" :data="listData"></Table>
            <div style="text-align:center;margin-top:10px">
                <Page
                    :current="params.pageNum"
                    :total="params.total"
                    :page-size="params.pageSize"
                    :show-total="true"
                    show-elevator
                    @on-change="changePage"
                />
            </div>
        </div>
	</div>
</template>
<script>
import { exportExcel } from '@/libs/util'
import  dateSelect  from '@/components/dateSelect/dateSelect'
import axios from 'axios'
export default {
	name: 'test',
    components:{
        dateSelect
    },
	data() {
		return {
			topIndex: '',
			dataArea: [],
            dataArea2:null,
			beginTime: '',
			endTime: '',
			dateTabIndex: 0,
			dateTabs: [
				{ label: '本日' },
				{ label: '本周' },
				{ label: '本月' },
				{ label: '今年' },
			],
            company:[],
            companyMoneyName:[
                '全部',
                '50万以上',
                '20-50万',
                '10-20万',
                '5-10万',
                '5万以下'
            ],
			id: '',
			selectList: [],
			formData: {},
			storeType: '',
			show: false,
			listData: [],
			columns: [
				
				{
					title: '序号',
					type: 'index',
					width: 60,
					align: 'center',
				},
				{
					title: '供应商',
					key: 'supplierName',
					minWidth: 150,
				},
				{
					title: '合同编码',
					key: 'contractCode',
					minWidth: 150,
					sortable: true,
				},
				{
					title: '物料名称',
					key: 'materialName',
					minWidth: 200,
					sortable: true,
				},
				{
					title: '采购数量',
					key: 'quantity',
					minWidth: 100,
				},
                {
					title: '单价',
					key: 'price',
					minWidth: 100,
				},
                {
					title: '合同金额',
					key: 'totalAmount',
					minWidth: 100,
				},
                {
					title: '质检金额',
					key: 'adjustAmount',
					minWidth: 100,
				},
                {
					title: '审批时间',
					key: 'approvalTime',
					minWidth: 100,
				},
			],
			salesVolumeCompanyTotalType:null,
			params: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
                supplierId:null,
                beginTime:null,
                endTime:null,
			},
            totalData:{
                statisticsSupplier:[],
                money:{0:0,1:0,2:0,3:0,4:0,5:0,6:0,7:0},
            },
		}
	},
	methods: {
        selectTime(){
            this.params.supplierId = null
            this.getList()
            this.getTotal()
        },
        changeCompany(_id){
            this.params.supplierId = _id
            this.params.pageNum = 1
            this.getList()
        },
        tabsChange(_index){
            console.log(this.totalData.statisticsSupplier)
            this.company = this.totalData.statisticsSupplier[_index]
        },
		topTabClick(index) {
			if (index === this.topIndex) {
				this.topIndex = ''
				this.params.stockTagType = ''
			} else {
				this.topIndex = index
				this.params.stockTagType = index
			}
			this.params.pageNum = 1
			this.getList()
		},
        dateClick2(date){
            
            const dateDayNum = new Date(date).getDate()
            const dateMonthNum = new Date(date).getMonth()
            const dateYearNum = new Date(date).getFullYear()
            this.beginTime = dateYearNum + '-' + dateMonthNum + '-1'
			this.endTime = dateYearNum + '-' + dateMonthNum + '-' + new Date(dateYearNum, (dateMonthNum * 1 + 2), 0).getDate()
            this.dataArea = []
            this.getList()
            this.getTotal()
        },
		dateClick(date) {
			this.beginTime = date[0]
			this.endTime = date[1]
            this.dataArea2 = null
			this.getList()
            this.getTotal()
            
		},
		/* 选项卡切换 */
		dateTabToggle(index) {
			this.params.pageNum = 1
			this.dateTabIndex = index
            this.params.supplierIdList = ''
            this.params.supplierIdListCopy = ''
            this.salesVolumeCompanyTotalType = null
            this.dataArea2 = null
			if (index === 0) {
				let time = new Date().getTime()
				this.beginTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
				this.endTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
				this.dataArea = [this.beginTime, this.endTime]
			} else if (index === 1) {
				let Nowdate = new Date()
				let WeekFirstDay = Nowdate.getDay()
					? new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
					: new Date(Nowdate - (Nowdate.getDay() + 6) * 86400000)
				let WeekLastDay = new Date(
					(WeekFirstDay / 1000 + 6 * 86400) * 1000
				)
				this.beginTime = this.$dayjs(WeekFirstDay).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.endTime = this.$dayjs(WeekLastDay).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.beginTime, this.endTime]
			} else if (index === 2) {
				let now = new Date() // 当前日期
				let nowMonth = now.getMonth() // 当前月
				let nowYear = now.getFullYear() // 当前年
				// 本月的开始时间
				let monthStartDate = new Date(nowYear, nowMonth, 1)
				// 本月的结束时间
				let monthEndDate = new Date(nowYear, nowMonth + 1, 0)
				this.beginTime = this.$dayjs(monthStartDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.endTime = this.$dayjs(monthEndDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.beginTime, this.endTime]
			} else if (index === 3) {
				let now = new Date() // 当前日期
				let nowYear = now.getFullYear() // 当前年
				// 本年的开始时间
				let monthStartDate = new Date(nowYear, 0, 1)
				// 本年的结束时间
				let monthEndDate = new Date(nowYear, 11, 31)
				this.beginTime = this.$dayjs(monthStartDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.endTime = this.$dayjs(monthEndDate).format(
					'YYYY-MM-DD HH:mm:ss'
				)
				this.dataArea = [this.beginTime, this.endTime]
			}
			this.getList()
            this.getTotal()
		},

		changePage(pageNum) {
			this.params.pageNum = pageNum
			this.getList()
		},
		getList() {
            this.$Spin.show()
            this.$post('/api/storage-restructure/applyPurchase/amountPage',{
                ...this.params,
            }).then(res=>{
                console.log(res)
                this.listData = res.data.records
                this.params.total = res.data.total
                this.$Spin.hide()
            })
		},
        getTotal(){
            this.$post('/api/storage-restructure/applyPurchase/amountStatistics',{
				 ...this.params,
            }).then(res=>{
                this.totalData = res.data
                this.company = this.totalData.statisticsSupplier[0]
                this.$Spin.hide()
            })
        },

        
	},
	mounted() {
		this.getList()
        this.getTotal()
	},
}
</script>
<style lang="less">
.purchaseTotal {
    .big-num{
        font-size: 20px;
        font-weight: bold;
        color: #000;
    }
	.total-header {
		display: flex;
		margin-top: 10px;
		.card-warp {
			line-height: 30px;
			text-align: center;
			ul {
				display: flex;
				li {
					list-style: none;
					width: 33.3%;
					text-align: center;
                    color:#666;
				}
			}
		}
	}
}
.date-filter-wrap {
	display: flex;
	align-items: center;
	.date-filter {
		width: 300px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		border-radius: 4px;
		&.other {
			width: auto;
			.date-tab {
				white-space: nowrap;
				padding: 9px;
				.num {
					font-weight: bold;
					font-size: 14px;
					&.red {
						color: red;
						cursor: pointer;
						text-decoration: underline;
					}
				}
				&.active {
					background-color: #333333;
				}
			}
		}

		.date-tab {
			flex: 1;
			padding: 9px 4px;
			line-height: 1;
			text-align: center;
			border: 1px solid #e6e6e6;
			border-radius: 2px;
			border-right: none;
			cursor: pointer;
			font-weight: 500;

			&:first-child {
				border-radius: 4px 0 0 4px;
			}

			&:last-child {
				border-radius: 0 4px 4px 0;
				border-right: 1px solid #e6e6e6;
			}

			&.active {
				background-color: #3f92f9;
				color: #ffffff;
			}
		}
	}
}
</style>