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

<!-- 
    filename: WaitingListTable.vue
    author: liubin
    date: 2024-02-05 16:12:55
    description: 
-->

<template>
	<el-table
		:data="tableDataWithIndex"
		:border="true"
		@selection-change="handleSelectionChange"
		style="width: 100%"
		:header-cell-style="{
			background: '#f2f4f9',
			color: '#606266',
		}"
		class="waiting-list-table">
		<el-table-column
			type="selection"
			:width="50"
			:selectable="checkSelectable" />
		<el-table-column prop="_pageIndex" width="80" align="center">
			<template slot="header">
				<el-popover placement="bottom-start" width="300" trigger="click">
					<div class="setting-box" style="max-height: 400px; overflow-y: auto">
						<el-checkbox
							v-for="(item, index) in tablePropsLabelList"
							:key="'cb' + index"
							v-model="selectedBox[index]"
							:label="item.label" />
					</div>
					<i slot="reference" class="el-icon-s-tools" />
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[0]"
			label="巡检单名称"
			prop="name"></el-table-column>
		<el-table-column v-if="selectedBox[1]" label="部门" prop="planName">
			<template slot-scope="scope">
				{{ scope.row.department || '---' }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[2]"
			label="巡检时间"
			prop="planCheckTime">
			<template slot-scope="scope">
				{{ scope.row.planCheckTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[3]"
			label="班次"
			prop="groupClass">
			<template slot-scope="scope">
				{{ scope.row.groupClass || '---' }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[4]"
			label="确认截止时间"
			prop="confirmDueTime">
			<template slot-scope="scope">
				{{ scope.row.confirmDueTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[5]"
			width="150"
			label="备注"
			prop="remark">
			<template slot-scope="scope">
				{{ scope.row.remark }}
			</template>
		</el-table-column>

		<el-table-column width="188" label="操作">
			<template slot-scope="scope">
				<el-tooltip content="确认" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						:disabled="!checkSelectable(scope.row)"
						@click="$emit('confirm', scope.row)">
						确认
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="查看详情" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('detail', scope.row)">
						<i class="iconfont icon-detail primary-color" />
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="编辑" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('edit', scope.row)">
						<i class="iconfont icon-edit primary-color" />
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="删除" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('delete', scope.row)">
						<i class="iconfont icon-delete delete-color" />
					</el-button>
				</el-tooltip>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import moment from 'moment';

export default {
	name: 'CheckOrderListTable',
	components: {},
	props: ['tableData', 'page', 'limit'],
	filters: {
		timeFilter: (val) =>
			val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---',
	},
	data() {
		return {
			tablePropsLabelList: [
				{
					label: '巡检单名称',
				},
				{
					label: '部门',
				},
				{
					label: '巡检时间',
				},
				{
					label: '班次',
				},
				{
					label: '确认截止时间',
				},
				{
					label: '备注',
				},
			],
			selectedBox: [true, true, true, true, true, true],
			selectedOrder: [],
		};
	},
	computed: {
		tableDataWithIndex() {
			return this.tableData.map((item, index) => ({
				...item,
				_pageIndex: (this.page - 1) * this.limit + index + 1,
			}));
		},
	},
	methods: {
		checkSelectable(row, index) {
			return true;
			// return (
			// 	row.relatePlan == 2 ||
			// 	(row.relatePlan == 1 &&
			// 		(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime()))
			// );
		},
		handleSelectionChange(val) {
			this.selectedOrder = val;
		},
	},
};
</script>

<style scoped>
@import './iconfont/iconfont.css';
.delete-color {
	color: #ff5454;
}
.primary-color {
	color: #0b58ff;
}

.baseTable .show-col-btn {
	margin-right: 5px;
	line-height: inherit;
	cursor: pointer;
}
.baseTable .el-icon-refresh {
	cursor: pointer;
}
</style>
<style>
.waiting-list-table .el-table__body tr.current-row > td.el-table__cell {
	background-color: #eaf1fc;
}
.waiting-list-table.el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
.waiting-list-table .addButton {
	width: 100%;
	height: 35px;
	border-top: none;
	color: #0b58ff;
	border-color: #ebeef5;
	border-radius: 0;
}
.waiting-list-table .addButton:hover {
	color: #0b58ff;
	border-color: #ebeef5;
	background-color: #fff;
}
.waiting-list-table .addButton:focus {
	border-color: #ebeef5;
	background-color: #fff;
}

.el-tooltip__popper.is-dark {
	background: rgba(0, 0, 0, 0.6) !important;
}
.el-tooltip__popper .popper__arrow,
.el-tooltip__popper .popper__arrow::after {
	border-top-color: rgba(0, 0, 0, 0.4) !important;
}
</style>