345 lines
7.5 KiB
Vue
345 lines
7.5 KiB
Vue
<!--
|
|
filename: WaitingListTable.vue
|
|
author: liubin
|
|
date: 2024-02-05 16:12:55
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<el-table
|
|
:data="tableDataWithIndex"
|
|
:border="true"
|
|
@selection-change="handleSelectionChange"
|
|
:max-height="tableH"
|
|
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]"
|
|
min-width="144"
|
|
label="设备保养单号"
|
|
:show-overflow-tooltip="true"
|
|
prop="maintainOrderNumber"></el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[1]"
|
|
min-width="144"
|
|
label="保养计划名称"
|
|
:show-overflow-tooltip="true"
|
|
prop="planName">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.planName || '---' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[2]"
|
|
label="部门"
|
|
:show-overflow-tooltip="true"
|
|
prop="departmentName">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.departmentName || '---' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[3]"
|
|
label="产线名"
|
|
:show-overflow-tooltip="true"
|
|
prop="lineName">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.lineName || '---' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[4]"
|
|
min-width="144"
|
|
label="计划开始时间"
|
|
:show-overflow-tooltip="true"
|
|
prop="planStartTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.planStartTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[5]"
|
|
min-width="144"
|
|
label="计划结束时间"
|
|
:show-overflow-tooltip="true"
|
|
prop="planEndTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.planEndTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[6]"
|
|
min-width="144"
|
|
label="实际开始时间"
|
|
:show-overflow-tooltip="true"
|
|
prop="startTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.startTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[7]"
|
|
min-width="144"
|
|
label="实际结束时间"
|
|
:show-overflow-tooltip="true"
|
|
prop="endTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.endTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[8]"
|
|
min-width="144"
|
|
label="确认截止时间"
|
|
:show-overflow-tooltip="true"
|
|
prop="confirmDueTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.confirmDueTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[9]"
|
|
min-width="144"
|
|
label="保养计划类型"
|
|
:show-overflow-tooltip="true"
|
|
prop="relatePlan">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.relatePlan | relatePlanFilter }}
|
|
</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';
|
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
|
|
|
export default {
|
|
name: 'WaitingListTable',
|
|
components: {},
|
|
mixins: [tableHeightMixin],
|
|
props: ['tableData', 'page', 'limit'],
|
|
filters: {
|
|
timeFilter: (val) =>
|
|
val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---',
|
|
relatePlanFilter: (val) =>
|
|
val != null ? ['-', '计划型', '非计划型'][val] : '-',
|
|
},
|
|
data() {
|
|
return {
|
|
tablePropsLabelList: [
|
|
{
|
|
label: '设备保养单号',
|
|
},
|
|
{
|
|
label: '保养计划名称',
|
|
},
|
|
{
|
|
label: '部门',
|
|
},
|
|
{
|
|
label: '产线名',
|
|
},
|
|
{
|
|
label: '计划开始时间',
|
|
},
|
|
{
|
|
label: '计划结束时间',
|
|
},
|
|
{
|
|
label: '实际开始时间',
|
|
},
|
|
{
|
|
label: '实际结束时间',
|
|
},
|
|
{
|
|
label: '确认截止时间',
|
|
},
|
|
{
|
|
label: '保养计划类型',
|
|
},
|
|
{
|
|
label: '详情',
|
|
},
|
|
],
|
|
selectedBox: [
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
],
|
|
selectedPlan: [],
|
|
};
|
|
},
|
|
computed: {
|
|
tableDataWithIndex() {
|
|
return this.tableData.map((item, index) => ({
|
|
...item,
|
|
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
|
}));
|
|
},
|
|
},
|
|
methods: {
|
|
checkSelectable(row, index) {
|
|
return (
|
|
row.relatePlan == 2 ||
|
|
(row.relatePlan == 1 &&
|
|
(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime()))
|
|
);
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.selectedPlan = val;
|
|
},
|
|
handleDelete(row) {},
|
|
handleDetail(row) {},
|
|
handleEdit(row) {},
|
|
handleConfirm(row) {},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '../../../styles/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>
|