yudao-dev/src/views/cost/rawMaterialCost/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 connectTime from '../mixins/connectTime';
import {
	getCostMaterialSearchPage,
	exportCostMaterialSearch,
} 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: 'rawMaterialName',
		label: '原料名称',
	},
	{
		prop: 'grade',
		label: '原料等级',
		filter: publicFormatter('material_grade'),
	},
	{
		prop: 'price',
		label: '单价(元/吨)',
		align: 'right',
	},
	{
		prop: 'reportName',
		label: '单价生效时间',
		minWidth: 190,
		subcomponent: connectTime,
	},
	{
		prop: 'totalUsed',
		label: '累计使用量(吨)',
	},
	{
		prop: 'totalCost',
		label: '总价(元)',
		align: 'right',
	},
];

export default {
	mixins: [basicPage,tableHeightMixin],
	data() {
		return {
			urlOptions: {
				getDataListURL: getCostMaterialSearchPage,
				exportURL: exportCostMaterialSearch,
			},
			tableData: [],
			tableProps,
			drawerVisible: false,
			formConfig: [
				{
					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',
				},
				{
					type: this.$auth.hasPermi('extend:cost-material-search:query')
						? 'button'
						: '',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: this.$auth.hasPermi('extend:cost-material-search:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					color: 'primary',
					plain: true,
				},
			],
		};
	},
	components: {},
	created() {
		getHotMaterialList().then((response) => {
			this.formConfig[0].selectOptions = response.data;
		});
	},
	methods: {
		// 获取数据列表
		getDataList() {
			if (this.listQuery.searchTime) {
				this.dataListLoading = true;
				this.urlOptions.getDataListURL(this.listQuery).then((response) => {
					if (response.hasOwnProperty('data')) {
						this.tableData = response.data.list;
						this.listQuery.total = response.data.total;
					}
					this.dataListLoading = false;
				});
			} else {
				this.$message.warning('请选择时间范围');
			}
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.listQuery.materialId = val.materialId;
					this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null;
					this.listQuery.startTime = val.searchTime
						? moment(val.searchTime[0]).startOf('day').format('x')
						: null;
					this.listQuery.endTime = val.searchTime
						? moment(val.searchTime[1]).endOf('day').format('x')
						: null;
					this.getDataList();
					break;
				case 'export':
					this.listQuery.materialId = val.materialId;
					this.listQuery.searchTime = val.searchTime ? val.searchTime[0] : null;
					this.listQuery.startTime = val.searchTime
						? moment(val.searchTime[0]).startOf('day').format('x')
						: null;
					this.listQuery.endTime = val.searchTime
						? 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>