yudao-dev/src/views/specialEquipment/maintain/WaitingList.vue

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

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

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

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

		<!-- 对话框(添加) -->
		<base-dialog
			:dialogTitle="title"
			:dialogVisible="open"
			width="60%"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<DialogFormUnplanned
				v-if="open"
				ref="form"
				v-model="form"
				:disabled="mode == 'detail'" />
			<el-row v-if="mode === 'detail'" slot="footer" type="flex" justify="end">
				<el-col :span="12">
					<el-button size="small" class="btnTextStyle" @click="cancel">
						关闭
					</el-button>
				</el-col>
			</el-row>
		</base-dialog>


		<!-- 编辑 -->
		<!-- <RecordDetail
			v-if="recordDetailVisible"
			ref="recordDetailDrawer"
			@closed="recordDetailVisible = false" /> -->

		<!-- 详情  -->
	</div>
</template>

<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import DialogFormUnplanned from './WaitingList--add--unplanned.vue';
import {
	deleteEqMaintainLog,
	exportMaintainLogExcel,
} from '@/api/equipment/base/maintain/record';
import WaitingListTable from './WaitingListTable.vue';

const timeFilter = (val) => moment(val).format('yyyy-MM-DD HH:mm:ss');

const btn = {
	name: 'tableBtn',
	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}>
				{this.injectData.name}
			</el-button>
		);
	},
};

export default {
	name: 'SpecialEquipmentMaintainRecord',
	components: { DialogFormUnplanned, WaitingListTable, WaitingListTable },
	mixins: [basicPageMixin],
	data() {
		return {
			recordDetailVisible: false,
			searchBarKeys: [
				'maintainPlanId',
				'startTime',
				'special',
				// 'relatePlan',
				// 'equipmentId',
				// 'specialType',
			],
			tobeConfirmedIdList: [],
			tableBtn: [
				// this.$auth.hasPermi('equipment:maintain-record:update')
				// 	? {
				// 			type: 'detail',
				// 			btnName: '详情',
				// 	  }
				// 	: undefined,
				{
					type: 'confirm',
					btnName: '确认',
				},
				{
					type: 'edit',
					btnName: '编辑',
				},
				{
					type: 'delete',
					btnName: '删除',
				},
			],
			tableProps: [
				// {
				// 	prop: 'createTime',
				// 	label: '添加时间',
				// 	fixed: true,
				// 	width: 150,
				// 	filter: timeFilter,
				// },
				{
					type: 'selection',
					// prop: '_selection',
					// label: '批量选择',
					width: 48,
					subcomponent: {
						props: ['injectData'],
						data() {
							return {
								outside: false,
								selected: false,
							};
						},
						watch: {
							selected(val) {
								if (!this.outside) {
									console.log("emit row-selected...")
									this.$emit('emitData', {
										action: 'row-selected',
										value: {
											row: this.injectData,
											selected: val,
										},
									});
								}
							},
							injectData: {
								deep: true,
								immediate: true,
								handler: function (val) {
									this.outside = true;
									this.selected = !!((val._selection & 0b01) != 0);
									this.$nextTick(() => {
										this.outside = false;
									})
								},
							},
						},
						render(h) {
							const enabled = 0b10 & this.injectData._selection;
							// return this.injectData?._selection ? h('h1', null, 'hello') : h('h1', null, '1');
							return (
								<div>
									<span>{this.selected}</span>
									<el-checkbox disabled={!enabled} v-model={this.selected} />
								</div>
							);
						},
					},
				},
				{
					prop: 'maintainOrderNumber',
					label: '设备保养单号',
					width: 110,
					showOverflowtooltip: true,
				},
				{
					prop: 'planName',
					label: '保养计划名称',
					width: 110,
					showOverflowtooltip: true,
				},
				{
					prop: 'departmentName',
					label: '部门',
					width: 110,
					showOverflowtooltip: true,
				},
				{
					prop: 'lineName',
					label: '产线名',
					width: 110,
					showOverflowtooltip: true,
				},
				{
					prop: 'planStartTime',
					label: '计划开始时间',
					filter: timeFilter,
					minWidth: 150,
					showOverflowtooltip: true,
				},
				{
					prop: 'planEndTime',
					label: '计划结束时间',
					filter: timeFilter,
					minWidth: 150,
					showOverflowtooltip: true,
				},
				{
					prop: 'startTime',
					label: '实际开始时间',
					filter: timeFilter,
					minWidth: 150,
					showOverflowtooltip: true,
				},
				{
					prop: 'endTime',
					label: '实际结束时间',
					filter: timeFilter,
					minWidth: 150,
					showOverflowtooltip: true,
				},
				{
					prop: 'confirmDueTime',
					label: '确认截止时间',
					filter: timeFilter,
					minWidth: 150,
					showOverflowtooltip: true,
				},
				{
					prop: 'relatePlan',
					label: '保养计划类型',
					minWidth: 150,
					showOverflowtooltip: true,
					filter: (val) =>
						val != null ? ['-', '计划型', '非计划型'][val] : '-',
				},
				{
					prop: '_detail',
					label: '详情',
					name: '详情',
					minWidth: 60,
					subcomponent: btn,
				},
				// {
				// 	prop: 'equipmentCategory',
				// 	label: '设备大类',
				// 	minWidth: 100,
				// 	showOverflowtooltip: true,
				// 	filter: (val) =>
				// 		val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
				// },
				// {
				// 	prop: 'equipmentName',
				// 	label: '设备名称',
				// 	minWidth: 100,
				// 	showOverflowtooltip: true,
				// },
				// {
				// 	prop: 'maintainWorker',
				// 	label: '保养人员',
				// 	minWidth: 100,
				// 	showOverflowtooltip: true,
				// },
				// {
				// 	prop: 'relatePlan',
				// 	label: '是否计划保养',
				// 	width: 120,
				// 	filter: (v) => (v != null ? ['', '是', '否'][v] : ''),
				// },
				// {
				// 	prop: 'planName',
				// 	label: '保养计划名称',
				// 	minWidth: 120,
				// 	showOverflowtooltip: true,
				// },
				// {
				// 	prop: 'maintainDuration',
				// 	label: '计划保养用时(h)',
				// 	minWidth: 130,
				// 	showOverflowtooltip: true,
				// },
				// { prop: 'timeUsed', label: '实际保养用时(h)', minWidth: 130 },
				// {
				// 	prop: 'remark',
				// 	label: '备注',
				// 	minWidth: 100,
				// 	showOverflowtooltip: true,
				// },
			],
			searchBarFormConfig: [
				// {
				// 	type: 'select',
				// 	label: '设备大类',
				// 	placeholder: '请选择设备大类',
				// 	param: 'specialType',
				// 	onchange: true,
				// 	selectOptions: [
				// 		{ id: 1, name: '安全设备' },
				// 		{ id: 2, name: '消防设备' },
				// 		{ id: 3, name: '特种设备' },
				// 	],
				// 	filterable: true,
				// 	defaultSelect: null
				// },
				// {
				// 	type: 'select',
				// 	label: '设备',
				// 	placeholder: '请选择设备',
				// 	param: 'equipmentId',
				// 	defaultSelect: null
				// },
				{
					type: 'select',
					label: '保养计划名称',
					placeholder: '请选择保养计划名称',
					param: 'maintainPlanId',
					defaultSelect: null,
				},
				// 开始结束时间
				{
					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: 'startTime',
					defaultSelect: null,
					// width: 350,
				},
				// {
				// 	type: 'select',
				// 	label: '是否计划保养',
				// 	selectOptions: [
				// 		{ name: '是', id: 1 },
				// 		{ name: '否', id: 2 },
				// 	],
				// 	defaultSelect: null,
				// 	param: 'relatePlan',
				// },
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '新增',
					name: 'add',
					plain: true,
					color: 'success',
				},
				{
					type: 'button',
					btnName: '批量确认',
					name: 'batchConfirm',
					color: 'primary',
					plain: true,
				},
				{
					type: this.$auth.hasPermi('equipment:maintain-record:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					plain: true,
					color: 'primary',
				},
				// {
				// 	type: this.$auth.hasPermi('equipment:maintain-record:create')
				// 		? 'button'
				// 		: '',
				// 	btnName: '新增',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'success',
				// },
			],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				maintainPlanId: null,
				startTime: null,
				special: true,
				confirmed: false,
			},
			// 表单参数
			form: {},
			basePath: '/base/equipment-maintain-log',
			mode: null,
			allSpecialEquipments: [],
		};
	},
	watch: {
		tobeConfirmedIdList: {
			handler(val) {
				if (val.length == this.list.length) {
					this.$refs['table'].toggleAllSelection();
				}
			},
		},
	},
	created() {
		this.initSearchBar();
		// if (this.$route.query) {
		// 	this.queryParams.specialType =
		// 		this.$route.query?.specialType ?? undefined;
		// 	this.queryParams.equipmentId =
		// 		this.$route.query?.equipmentId ?? undefined;
		// 	this.queryParams.maintainPlanId =
		// 		this.$route.query?.maintainPlanId ?? undefined;
		// 	this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
		// 	this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
		// 	this.searchBarFormConfig[0].defaultSelect =
		// 		this.$route.query.specialType ?? undefined;
		// 	this.searchBarFormConfig[1].defaultSelect =
		// 		this.$route.query.equipmentId ?? undefined;
		// 	this.searchBarFormConfig[2].defaultSelect =
		// 		this.$route.query.maintainPlanId ?? undefined;
		// 	this.searchBarFormConfig[3].defaultSelect =
		// 		this.$route.query?.createTime ?? undefined;
		// 	this.searchBarFormConfig[4].defaultSelect =
		// 		Number(this.$route.query.relatePlan) ?? undefined;
		// }
		this.getList();
		// if (this.$route.query.addRecord) {
		// 	this.handleAdd();
		// }
	},
	methods: {
		handleSelectionChange(list) {
			if (this.tobeConfirmedIdList.length) {
				this.tobeConfirmedIdList = [];
				this.list.forEach((item) => {
					this.handleEmitFun({
						action: 'row-selected',
						value: { row: item, selected: false },
					});
				});
				console.log(
					'清空选择列表',
					this.list.map((item) => item._selection)
				);
			} else {
				this.tobeConfirmedIdList = list.map((item) => item.id);
				this.list.forEach((item) => {
					this.handleEmitFun({
						action: 'row-selected',
						value: { row: item, selected: true },
					});
				});
				console.log(
					'全选',
					this.list.map((item) => item._selection)
				);
			}
		},

		handleEmitFun({ action, value }) {
			switch (action) {
				case '详情':
					this.recordDetailVisible = true;
					this.$nextTick(() => {
						this.$refs.recordDetailDrawer.show({
							id: value.id,
							planMaintainWorker: value.planMaintainWorker,
							maintainWorker: value.maintainWorker,
						});
					});
					break;
				case 'row-selected':
					if (value.selected) {
						this.tobeConfirmedIdList.push(value.row.id);
						value.row._selection = 0b11;
					} else {
						const index = this.tobeConfirmedIdList.indexOf(value.row.id);
						if (index != -1) {
							this.tobeConfirmedIdList.splice(index, 1);
						}
					}
					console.log('tobeConfirmedIdList', this.tobeConfirmedIdList);
					break;
			}
		},

		handleSearchBarChange({ param, value }) {
			if ('specialType' === param) {
				if (!value) {
					this.setSearchBarEquipmentList(this.allSpecialEquipments);
					return;
				}
				this.setSearchBarEquipmentList(
					this.allSpecialEquipments.filter((item) => item.specialType == value)
				);
			}
		},
		initSearchBar() {
			// this.http('/base/core-equipment/listAll', 'get').then(({ data }) => {
			// 	this.allSpecialEquipments = data.filter((item) => item.special);
			// 	this.setSearchBarEquipmentList(data.filter((item) => item.special));
			// });
			this.http('/base/equipment-maintain-plan/page', 'get', {
				pageNo: 1,
				pageSize: 100,
				special: true,
			}).then(({ data }) => {
				this.$set(
					this.searchBarFormConfig[0],
					// this.searchBarFormConfig[2],
					'selectOptions',
					(data?.list || []).map((item) => ({
						name: item.name,
						id: item.id,
					}))
				);
			});
		},
		/** 查询列表 */
		getList() {
			this.loading = true;
			// 执行查询
			this.recv({
				...this.queryParams,
				special: true,
				relatePlan: 2,
				confirmed: false,
			}).then((response) => {
				this.list = response.data.list.map((item) => ({
					...item,
					planName: '---',
					_selection: 0b10,
				}));
				this.total = response.data.total;
				this.loading = false;
			});
		},
		/** 取消按钮 */
		cancel() {
			this.open = false;
			this.mode = null;
			this.reset();
		},
		/** 表单重置 */
		reset() {
			this.form = {
				id: null,
				relatePlan: null,
				maintainWorker: [],
				maintainOrderNumber: null,
				departmentId: null,
				lineId: null,
				startTime: null,
				endTime: null,
				remark: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNo = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			// if (this.$route.query.addRecord) {
			// 	// 赋值
			// 	const tempRow = this.$route.query.row;
			// 	this.form.equipmentId = tempRow.equipmentId;
			// 	this.form.relatePlan = tempRow.nextMaintainTime ? 1 : 2;
			// 	this.form.startTime = tempRow.nextMaintainTime;
			// 	this.form.maintainPlanId = tempRow.id;
			// 	// await (() => {
			// 	// 	return new Promise((acpt, rejt) => {
			// 	// 		this.form.relatePlan =
			// 	// 			this.$route.query.relatePlan ||
			// 	// 			(tempRow.nextMaintainTime ? 1 : 2);
			// 	// 		this.form.startTime = tempRow.nextMaintainTime;
			// 	// 		acpt();
			// 	// 	});
			// 	// })();
			// 	// this.$nextTick(() => {
			// 	// 	this.form.maintainPlanId = tempRow.id;
			// 	// 	this.form.equipmentId = tempRow.equipmentId;
			// 	// });
			// }
			// if (this.$route.query.isAdd) {
			// 	// 赋值
			// 	this.form.equipmentId = this.$route.query.equipmentId;
			// 	this.form.maintainPlanId = this.$route.query.maintainPlanId;
			// }
			this.open = true;
			this.title = '添加待确认保养记录';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id;
			this.info({ id }).then((response) => {
				this.form = response.data;
				this.open = true;
				this.form.maintainWorker = this.form.maintainWorker.split(',');
				this.title = '修改保养记录';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) {
					return;
				}
				// 修改的提交
				if (this.form.id != null) {
					this.put({
						...this.form,
						maintainWorker: this.form.maintainWorker.join(','),
						special: true,
						relatePlan: 2,
					}).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.open = false;
						this.getList();
					});
					return;
				}
				// 添加的提交
				this.post({
					...this.form,
					maintainWorker: this.form.maintainWorker.join(','),
					special: true,
					relatePlan: 2,
				}).then((response) => {
					this.$modal.msgSuccess('新增成功');

					// 跳转至 备品备件 保养
					// const toSparePartsMaintain = () => {
					// 	this.open = false;
					// };

					// this.$confirm('是否有备品备件更换?', '提示', {
					// 	confirmButtonText: '有',
					// 	cancelButtonText: '没有',
					// })
					// 	.then(toSparePartsMaintain)
					// 	.catch(() => {
					// 		this.open = false;
					// 		this.getList();
					// 	});
					this.open = false;
					this.getList();
				});
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const id = row.id;
			this.$modal
				.confirm('是否确认删除设备名称为"' + row.equipmentName + '"的数据项?')
				.then(function () {
					return deleteEqMaintainLog(id);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		handleDetail({ id }) {
			this.reset();
			this.mode = 'detail';
			this.info({ id }).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '查看保养记录详情';
			});
		},
		/** 导出按钮操作 */
		handleExport() {
			// 处理查询参数
			let params = { ...this.queryParams };
			params.pageNo = undefined;
			params.pageSize = undefined;
			this.$modal
				.confirm('是否确认导出所有保养记录?')
				.then(() => {
					this.exportLoading = true;
					return exportMaintainLogExcel(params);
				})
				.then((response) => {
					this.$download.excel(response, '设备保养记录.xls');
					this.exportLoading = false;
				})
				.catch(() => {});
		},
	},
};
</script>

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