yudao-dev/src/views/cost/rawMaterialCostHis/index.vue

<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />

		<!-- 列表 -->
		<base-table
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
      :max-height="tableH"
			:table-data="tableData"></base-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import codeFilter from '../mixins/code-filter';
import {
	getCostMaterialAutoReportPage,
	exportCostMaterialAutoReportExcel,
} from '@/api/cost/costMaterialAutoReport';
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
import { publicFormatter } from '@/utils/dict';
import moment from 'moment';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

const tableProps = [
	{
		prop: 'reportType',
		label: '维度',
		filter: codeFilter('reportType'),
	},
	{
		prop: 'reportName',
		label: '时间',
		minWidth: 160,
	},
	{
		prop: 'rawMaterialName',
		label: '原料名称',
	},
	{
		prop: 'grade',
		label: '原料等级',
		filter: publicFormatter('material_grade'),
	},
	{
		prop: 'price',
		label: '单价(元/吨)',
		align: 'right',
	},
	{
		prop: 'totalUsed',
		label: '累计使用量(吨)',
	},
	{
		prop: 'totalCost',
		label: '总价(元)',
		align: 'right',
	},
];

export default {
	mixins: [basicPage,tableHeightMixin],
	data() {
		return {
			urlOptions: {
				getDataListURL: getCostMaterialAutoReportPage,
				exportURL: exportCostMaterialAutoReportExcel,
			},
			tableData: [],
			tableProps,
			drawerVisible: false,
			formConfig: [
				{
					type: 'select',
					label: '维度',
					selectOptions: [
						{ id: 2, name: '日' },
						{ id: 3, name: '周' },
						{ id: 4, name: '月' },
						{ id: 5, name: '年' },
					],
					param: 'reportType',
					filterable: true,
					clearable: false,
				},
				{
					type: 'select',
					label: '原料名称',
					selectOptions: [],
					param: 'materialId',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
					defaultSelect: [],
				},
				{
					type: this.$auth.hasPermi('extend:cost-material-auto-report:query')
						? 'button'
						: '',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: this.$auth.hasPermi('extend:cost-material-auto-report:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					color: 'primary',
					plain: true,
				},
			],
		};
	},
	components: {},
	created() {
		const end = new Date();
		const start = new Date();
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		this.formConfig[2].defaultSelect = [start, end];
		this.listQuery.times = [
			moment(start).startOf('day').format('x'),
			moment(end).endOf('day').format('x'),
		];
		getHotMaterialList().then((response) => {
			this.formConfig[1].selectOptions = response.data;
		});
	},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.listQuery.reportType = val.reportType;
					this.listQuery.materialId = val.materialId;
					this.listQuery.times = val.searchTime
						? [
								moment(val.searchTime[0]).startOf('day').format('x'),
								moment(val.searchTime[1]).endOf('day').format('x'),
						  ]
						: null;
					this.getDataList();
					break;
				case 'export':
					this.listQuery.reportType = val.reportType;
					this.listQuery.materialId = val.materialId;
					this.listQuery.times = val.searchTime
						? [
								moment(val.searchTime[0]).startOf('day').format('x'),
								moment(val.searchTime[1]).endOf('day').format('x'),
						  ]
						: null;
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>
<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
</style>