yudao-dev/src/views/specialEquipment/check/Record.vue

<!-- 
    filename: Record.vue
    author: liubin
    date: 2023-12-12 13:53:22
    description: 
-->

<template>
	<div class="app-container SpecialEquipmentCheckRecord">
		<!-- 搜索工作栏 -->
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:max-height="tableH"
			:table-data="list"
			@emitFun="handleEmitFun">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:width="70"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" />
		</base-table>

		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<RecordDetail
			ref="record-detail"
			v-if="detailOpen"
			@refreshDataList="getList"
			@destroy="detailOpen = false" />
	</div>
</template>

<script>
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { parseTime } from '../../core/mixins/code-filter';
import RecordDetail from './Record-detail.vue';
import moment from 'moment';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	name: 'SpecialEquipmentCheckRecord',
	components: { RecordDetail },
	mixins: [basicPageMixin, tableHeightMixin],
	data() {
		const today = new Date();
		const twoDaysAgo = new Date(today.getTime() - 2 * 24 * 60 * 60 * 1000);
		twoDaysAgo.setHours(0, 0, 0, 0);
		const t = [
			moment(twoDaysAgo).format('yyyy-MM-DD HH:mm:ss'),
			moment(today).format('yyyy-MM-DD HH:mm:ss'),
		];

		return {
			detailOpen: false,
			addOrUpdateVisible: false,
			searchBarKeys: ['name', 'actualCheckTime'],
			tableBtn: [
				this.$auth.hasPermi('equipment:check-record:detail')
					? {
							type: 'detail',
							btnName: '详情',
					  }
					: undefined,
				// this.$auth.hasPermi('equipment:check-record:update')
				// 	? {
				// 			type: 'edit',
				// 			btnName: '修改',
				// 	  }
				// 	: undefined,
				// this.$auth.hasPermi('equipment:check-record:delete')
				// 	? {
				// 			type: 'delete',
				// 			btnName: '删除',
				// 	  }
				// 	: undefined,
			].filter((v) => v),
			tableProps: [
				{ prop: 'name', label: '巡检单名称', showOverflowtooltip: true },
				{ prop: 'department', label: '部门', showOverflowtooltip: true },
				{
					prop: 'actualCheckTime',
					label: '巡检时间',
					width: 160,
					filter: parseTime,
					showOverflowtooltip: true,
				},
				{ prop: 'groupClass', label: '班次', showOverflowtooltip: true },
				// {
				// 	prop: '_detail',
				// 	label: '巡检内容',
				// 	subcomponent: {
				// 		name: 'ViewDetail',
				// 		props: ['injectData'],
				// 		data() {
				// 			return {};
				// 		},
				// 		methods: {
				// 			handleClick() {
				// 				this.$emit('emitData', {
				// 					action: this.injectData.label,
				// 					value: this.injectData,
				// 				});
				// 			},
				// 		},
				// 		render: function (h) {
				// 			return (
				// 				<el-button type="text" onClick={this.handleClick}>
				// 					详情
				// 				</el-button>
				// 			);
				// 		},
				// 	},
				// },
				{ prop: 'remark', label: '备注' },
			],
			searchBarFormConfig: [
				{
					type: 'input',
					label: '巡检单名称',
					placeholder: '请输入巡检单名称',
					param: 'name',
				},
				// 开始结束时间
				{
					type: 'datePicker',
					label: '巡检时间',
					dateType: 'daterange', // datetimerange
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始日期',
					endPlaceholder: '结束日期',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'actualCheckTime',
					defaultSelect: t,
					// width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: this.$auth.hasPermi('equipment:check-record:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					plain: true,
					color: 'primary',
				},
				// {
				// 	type: this.$auth.hasPermi('equipment:check-record:create')
				// 		? 'button'
				// 		: '',
				// 	btnName: '新增',
				// 	name: 'add',
				// 	plain: true,
				// },
			],

			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				special: true,
				status: 2,
				actualCheckTime: t,
			},
			// 表单参数
			form: {},
			basePath: '/base/equipment-check-order',
			mode: null,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询列表 */
		getList() {
			this.loading = true;
			// 执行查询
			this.recv({ ...this.queryParams }).then((response) => {
				this.list = response.data.list;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		/** 取消按钮 */
		cancel() {
			this.open = false;
			this.mode = null;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNo = 1;
			this.getList();
		},

		handleDetail(row) {
			this.detailOpen = true;
			this.$nextTick(() => {
				this.$refs['record-detail'].init(row, true);
			});
		},

		/** 导出按钮操作 */
		handleExport() {
			this.$modal
				.confirm('是否确认导出所有设备巡检记录?')
				.then(() => {
					this.exportLoading = true;
					return this.$axios({
						url: '/base/equipment-check-order/export-excel',
						params: {
							name: this.queryParams.name,
							status: 2,
							special: true,
						},
						responseType: 'blob',
					});
				})
				.then((response) => {
					// const link = document.createElement('a');
					// link.href = window.URL.createObjectURL(new Blob([response]));
					// link.download = '设备巡检记录.xls';
					// document.body.appendChild(link);
					// link.click();
					// document.body.removeChild(link);
					// window.URL.revokeObjectURL(link.href);
					this.$download.excel(response, '设备巡检记录.xls');
					this.exportLoading = false;
				})
				.catch(() => {});
		},
	},
};
</script>

<style scoped lang="scss">
.SpecialEquipmentCheckRecord {
}
</style>