288 lines
7.0 KiB
Vue
288 lines
7.0 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"
|
|
style="width: 100%"
|
|
:header-cell-style="{
|
|
background: '#f2f4f9',
|
|
color: '#606266',
|
|
}"
|
|
:max-height="tableH"
|
|
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="巡检单名称"
|
|
:show-overflow-tooltip="true"
|
|
prop="name"></el-table-column>
|
|
<el-table-column v-if="selectedBox[1]" label="部门" :show-overflow-tooltip="true" prop="planName">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.department || '---' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[2]"
|
|
label="巡检时间"
|
|
width="150"
|
|
prop="actualCheckTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.actualCheckTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[3]"
|
|
label="班次"
|
|
width="180"
|
|
:show-overflow-tooltip="true"
|
|
prop="groupClass">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.groupClass || '---' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[4]"
|
|
label="确认截止时间"
|
|
width="150"
|
|
prop="confirmDueTime">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.confirmDueTime | timeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-if="selectedBox[5]"
|
|
width="150"
|
|
:show-overflow-tooltip="true"
|
|
label="备注"
|
|
prop="remark">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.remark }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column v-if="selectedBox[10]" width="60" label="详情">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="handelDetail(scope.row)">详情</el-button>
|
|
</template>
|
|
</el-table-column> -->
|
|
<!-- btns -->
|
|
<el-table-column width="188" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-tooltip v-if="$auth.hasPermi('equipment:check:update')" 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 v-if="$auth.hasPermi('equipment:check:query')" style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
|
|
<el-tooltip v-if="$auth.hasPermi('equipment:check:query')" 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 v-if="$auth.hasPermiAnd([
|
|
'equipment:check:update',
|
|
'base:core-worker:query',
|
|
'base:group-classes:query',
|
|
'base:core-department:query',
|
|
'equipment:check:query',
|
|
'equipment:check:create',
|
|
'equipment:check:delete',
|
|
'base:core-equipment:query'
|
|
])" style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
|
|
<el-tooltip v-if="$auth.hasPermiAnd([
|
|
'equipment:check:update',
|
|
'base:core-worker:query',
|
|
'base:group-classes:query',
|
|
'base:core-department:query',
|
|
'equipment:check:query',
|
|
'equipment:check:create',
|
|
'equipment:check:delete',
|
|
'base:core-equipment:query'
|
|
])" 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 v-if="$auth.hasPermi('equipment:check:delete')" style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
|
|
<el-tooltip v-if="$auth.hasPermi('equipment:check:delete')" 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: 'WaitingListTable',
|
|
components: {},
|
|
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: '备注',
|
|
},
|
|
],
|
|
selectedBox: [
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true,
|
|
true
|
|
],
|
|
selectedPlan: [],
|
|
tableH: this.tableHeight(260)
|
|
};
|
|
},
|
|
computed: {
|
|
tableDataWithIndex() {
|
|
return this.tableData.map((item, index) => ({
|
|
...item,
|
|
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
|
}));
|
|
},
|
|
},
|
|
created() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = this.tableHeight(260)
|
|
})
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('resize', () => {
|
|
this.tableH = this.tableHeight(260)
|
|
});
|
|
},
|
|
methods: {
|
|
checkSelectable(row, index) {
|
|
return true;
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.selectedPlan = val;
|
|
},
|
|
handleDelete(row) {},
|
|
handleDetail(row) {},
|
|
handleEdit(row) {},
|
|
handleConfirm(row) {},
|
|
},
|
|
};
|
|
</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>
|