yudao-dev/src/views/group/base/groupWorkLog/index.vue

<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<!-- 列表 -->
		<base-table
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-props="tableProps"
			:table-data="list"
			:max-height="tableH">
		</base-table>
		<pagination
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			:total="total"
			@pagination="getList" />
	</div>
</template>

<script>
import { parseTime } from '@/utils/ruoyi';
import tableHeightMixin from '@/mixins/tableHeightMixin';
import { schedulingPage } from '@/api/base/groupTeamScheduling';
import { getFactoryPage } from '@/api/core/base/factory';
import {
	getGroupClassesPage,
} from '@/api/base/groupClasses';
import {
	getGroupTeamPage,
} from '@/api/base/groupTeam';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

const tableProps = [
	{
		prop: 'factoryName',
		label: '工厂',
	},
	{
		prop: 'startDay',
		label: '上班日期',
		filter: parseTime,
		minWidth: 160,
	},
	{
		prop: 'startTime',
		label: '上班时间',
		filter: (val) => (val ? parseTime(val, '{h}:{i}') : '-'),
		width: 100,
	},
	{
		prop: 'endTime',
		label: '下班时间',
		filter: (val) => (val ? parseTime(val, '{h}:{i}') : '-'),
		width: 100,
	},
	{
		prop: 'classesName',
		label: '班次名称',
	},
	{
		prop: 'teamName',
		label: '班组名称',
	},
];
export default {
	mixins: [tableHeightMixin],
	data() {
		return {
			formConfig: [
				{
					type: 'select',
					label: '工厂',
					selectOptions: [],
					param: 'factoryId',
					onchange: true,
				},
				{
					type: 'select',
					label: '班次',
					selectOptions: [],
					param: 'classesId',
				},
				{
					type: 'select',
					label: '班组',
					selectOptions: [],
					param: 'teamId',
				},
				{
					type: 'datePicker',
					label: '上班日期',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
			tableProps,
			// 总条数
			total: 0,
			// 班次基础信息列表
			list: [],
			// 弹出层标题
			addOrEditTitle: '',
			// 是否显示弹出层
			centervisible: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
			},
		};
	},
	created() {
		this.getList();
		this.getPdLineList();
	},
	methods: {
		handleExport() {
			let tables = document.querySelector('.el-table').cloneNode(true);
			const fix = tables.querySelector('.el-table__fixed');
			const fixRight = tables.querySelector('.el-table__fixed-right');
			if (fix) {
				tables.removeChild(tables.querySelector('.el-table__fixed'));
			}
			if (fixRight) {
				tables.removeChild(tables.querySelector('.el-table__fixed-right'));
			}
			let exportTable = XLSX.utils.table_to_book(tables);

			var exportTableOut = XLSX.write(exportTable, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array',
			});
			// sheetjs.xlsx为导出表格的标题名称
			try {
				FileSaver.saveAs(
					new Blob([exportTableOut], {
						type: 'application/octet-stream',
					}),
					this.fileName + '班组上班记录.xlsx'
				);
			} catch (e) {
				if (typeof console !== 'undefined') console.log(e, exportTableOut);
			}
			return exportTableOut;
		},
		getPdLineList() {
			const params = {
				pageSize: 100,
				pageNo: 1,
			};
      getGroupClassesPage(params).then((res) => {
				this.formConfig[1].selectOptions = res.data.list || [];
			});
			getGroupTeamPage(params).then((res) => {
				this.formConfig[2].selectOptions = res.data.list || [];
			});
			getFactoryPage(params).then((res) => {
				this.formConfig[0].selectOptions = res.data.list || [];
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.queryParams.pageNo = 1;
					this.queryParams.factoryId = val.factoryId || undefined;
					this.queryParams.classesId = val.classesId || undefined;
					this.queryParams.teamName = val.teamId || undefined;
					this.queryParams.startDay = val.timeVal
						? val.timeVal
						: undefined;
					this.getList();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
        console.log(val);
			}
		},
		/** 查询列表 */
		getList() {
			schedulingPage(this.queryParams).then((response) => {
				this.list = response.data.list;
				this.total = response.data.total;
			});
		},
	},
};
</script>