Merge remote-tracking branch 'origin/boardTest' into boardTest

boardTest
夜笙歌 6 months ago
commit 605dd77029

@ -25,8 +25,8 @@ export default {
return {
// WebSocket
websocket: null,
// websocketUrl: 'ws://10.42.0.1:7181/ws',
websocketUrl: 'ws://119.45.202.115:7181/ws',
websocketUrl: 'ws://10.42.0.1:7181/ws',
// websocketUrl: 'ws://119.45.202.115:7181/ws',
isWebSocketConnected: false,
reconnectTimer: null,
reconnectAttempts: 0,

@ -17,7 +17,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="当日值班长" prop="dailyDutySupervisor">
<el-form-item label="科室值班" prop="dailyDutySupervisor">
<el-input
v-model="queryParams.dailyDutySupervisor"
placeholder="请输入当日值班长"
@ -25,7 +25,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="天达当日值班长" prop="tendaDailyDutySupervisor">
<el-form-item label="外包值班" prop="tendaDailyDutySupervisor">
<el-input
v-model="queryParams.tendaDailyDutySupervisor"
placeholder="请输入天达当日值班长"
@ -89,6 +89,15 @@
</el-form-item>
</el-form> -->
<!-- 操作提示 -->
<!-- <el-alert
title="提示:可以在表格行上右击查看详细信息,或点击操作列的详情按钮"
type="info"
:closable="false"
show-icon
style="margin-bottom: 10px;"
/> -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@ -145,21 +154,40 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dailyFaultRecordList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="dailyFaultRecordList"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
class="fault-record-table"
tooltip-effect="dark"
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible"/>
<el-table-column label="位置" align="center" prop="location" v-if="columns[2].visible"/>
<el-table-column label="当日值班长" align="center" prop="dailyDutySupervisor" v-if="columns[3].visible"/>
<el-table-column label="天达当日值班长" align="center" prop="tendaDailyDutySupervisor" v-if="columns[4].visible"/>
<el-table-column label="故障情况" align="center" prop="faultSituation" v-if="columns[5].visible"/>
<el-table-column label="处置措施" align="center" prop="handlingMeasures" v-if="columns[6].visible"/>
<el-table-column label="故障类型" align="center" prop="faultType" v-if="columns[7].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[8].visible"/>
<el-table-column label="处置完毕时间" align="center" prop="handlingCompletionTime" v-if="columns[9].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[10].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible"/>
<el-table-column label="位置" align="center" prop="location" v-if="columns[2].visible"/>
<el-table-column label="科室值班" align="center" prop="dailyDutySupervisor" v-if="columns[3].visible"/>
<el-table-column label="外包值班" align="center" prop="tendaDailyDutySupervisor" v-if="columns[4].visible"/>
<el-table-column label="故障情况" align="center" prop="faultSituation" v-if="columns[5].visible" show-overflow-tooltip/>
<el-table-column label="处置措施" align="center" prop="handlingMeasures" v-if="columns[6].visible" show-overflow-tooltip/>
<el-table-column label="故障类型" align="center" prop="faultType" v-if="columns[7].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[8].visible"/>
<el-table-column label="处置完毕时间" align="center" prop="handlingCompletionTime" v-if="columns[9].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[10].visible"/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[11].visible" show-overflow-tooltip/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -186,7 +214,7 @@
@pagination="getList"
/>
<!-- 添加或修改日常故障记录对话框 -->
<!-- 添加 或修改 日常故障记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date">
@ -201,10 +229,10 @@
<el-form-item label="位置" prop="location">
<el-input v-model="form.location" placeholder="请输入位置" />
</el-form-item>
<el-form-item label="当日值班长" prop="dailyDutySupervisor">
<el-form-item label="科室值班" prop="dailyDutySupervisor">
<el-input v-model="form.dailyDutySupervisor" placeholder="请输入当日值班长" />
</el-form-item>
<el-form-item label="天达当日值班长" prop="tendaDailyDutySupervisor">
<el-form-item label="外包值班" prop="tendaDailyDutySupervisor">
<el-input v-model="form.tendaDailyDutySupervisor" placeholder="请输入天达当日值班长" />
</el-form-item>
<el-form-item label="故障情况" prop="faultSituation">
@ -233,7 +261,10 @@
/>
</el-form-item>
<el-form-item label="处置时长" prop="handlingDuration">
<el-input v-model="form.handlingDuration" placeholder="自动计算" disabled />
<el-input v-model="form.handlingDuration" placeholder="由系统自动计算" disabled />
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -271,11 +302,89 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="故障记录详情"
:visible.sync="detailDrawer"
direction="rtl"
size="500px"
:before-close="handleDetailClose"
>
<div class="detail-content" v-if="currentRecord">
<el-descriptions :column="1" border>
<el-descriptions-item label="记录ID">
<span>{{ currentRecord.id }}</span>
</el-descriptions-item>
<el-descriptions-item label="日期">
<span>{{ currentRecord.date }}</span>
</el-descriptions-item>
<el-descriptions-item label="位置">
<span>{{ currentRecord.location || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="科室值班">
<span>{{ currentRecord.dailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="外包值班">
<span>{{ currentRecord.tendaDailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障类型">
<span>{{ currentRecord.faultType || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障发生时间">
<span>{{ currentRecord.faultOccurrenceTime || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处置完毕时间">
<span>{{ currentRecord.handlingCompletionTime || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处置时长">
<span>{{ currentRecord.handlingDuration || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障情况">
<div class="detail-text-content">
{{ currentRecord.faultSituation || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="处置措施">
<div class="detail-text-content">
{{ currentRecord.handlingMeasures || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="备注">
<div class="detail-text-content">
{{ currentRecord.remarks || '暂无' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<ul
v-show="contextMenuVisible"
:style="contextMenuStyle"
class="context-menu"
@click.stop
>
<li @click="handleViewDetail(contextMenuRow)">
<i class="el-icon-view"></i>
查看详情
</li>
<!-- <li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:edit'])">-->
<!-- <i class="el-icon-edit"></i>-->
<!-- 修改记录-->
<!-- </li>-->
<!-- <li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:remove'])">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- 删除记录-->
<!-- </li>-->
</ul>
</div>
</template>
<script>
import { listDailyFaultRecord, getDailyFaultRecord, delDailyFaultRecord, addDailyFaultRecord, updateDailyFaultRecord } from "@/api/ems/info/dailyFaultRecord";
import { checkPermi } from "@/utils/permission";
export default {
name: "DailyFaultRecord",
@ -312,7 +421,8 @@
faultType: null,
faultOccurrenceTime: null,
handlingCompletionTime: null,
handlingDuration: null
handlingDuration: null,
remarks: null
},
//
form: {},
@ -323,17 +433,18 @@
],
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true },
{ key: 2, label: `位置`, visible: true },
{ key: 3, label: `当日值班长`, visible: true },
{ key: 4, label: `天达当日值班长`, visible: true },
{ key: 3, label: `科室值班`, visible: true },
{ key: 4, label: `外包值班`, visible: true },
{ key: 5, label: `故障情况`, visible: true },
{ key: 6, label: `处置措施`, visible: true },
{ key: 7, label: `故障类型`, visible: true },
{ key: 8, label: `故障发生时间`, visible: true },
{ key: 9, label: `处置完毕时间`, visible: true },
{ key: 10, label: `处置时长`, visible: true },
{ key: 11, label: `备注`, visible: true },
],
upload: {
title: "导入日常故障记录",
@ -342,7 +453,19 @@
updateSupport: false,
isUploading: false,
headers: {}
}
},
//
detailDrawer: false,
currentRecord: null,
//
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
};
},
created() {
@ -350,13 +473,13 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/dailyFaultRecord/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
watch: {
'form.faultOccurrenceTime'(newVal) {
this.calculateHandlingDuration();
},
'form.handlingCompletionTime'(newVal) {
this.calculateHandlingDuration();
},
mounted() {
//
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
//
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询日常故障记录列表 */
@ -386,7 +509,8 @@
faultType: null,
faultOccurrenceTime: null,
handlingCompletionTime: null,
handlingDuration: null
handlingDuration: null,
remarks: null
};
this.resetForm("form");
},
@ -410,16 +534,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加日常故障记录";
this.title = "添加 日常故障记录";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDailyFaultRecord(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改日常故障记录";
this.title = "修改 日常故障记录";
});
},
/** 提交按钮 */
@ -484,21 +608,172 @@
submitFileForm() {
this.$refs.upload.submit();
},
calculateHandlingDuration() {
if (this.form.faultOccurrenceTime && this.form.handlingCompletionTime) {
const startTime = new Date(`2023-01-01T${this.form.faultOccurrenceTime}`);
const endTime = new Date(`2023-01-01T${this.form.handlingCompletionTime}`);
if (!isNaN(startTime.getTime()) && !isNaN(endTime.getTime()) && endTime > startTime) {
const durationMs = endTime - startTime;
const durationSeconds = Math.floor(durationMs / 1000);
this.form.handlingDuration = `${durationSeconds}`;
} else {
this.form.handlingDuration = '无效时间';
}
} else {
this.form.handlingDuration = '';
}
},
/** 查看详情 */
handleViewDetail(row) {
this.currentRecord = row;
this.detailDrawer = true;
this.hideContextMenu();
},
/** 关闭详情抽屉 */
handleDetailClose() {
this.currentRecord = null;
this.detailDrawer = false;
},
/** 处理行右击事件 */
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenuRow = row;
//
this.$nextTick(() => {
const menuWidth = 120; //
const menuHeight = 120; //
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let left = event.clientX;
let top = event.clientY;
//
if (left + menuWidth > windowWidth) {
left = windowWidth - menuWidth - 10;
}
//
if (top + menuHeight > windowHeight) {
top = windowHeight - menuHeight - 10;
}
this.contextMenuStyle.left = left + 'px';
this.contextMenuStyle.top = top + 'px';
this.contextMenuVisible = true;
});
},
/** 隐藏右击菜单 */
hideContextMenu() {
this.contextMenuVisible = false;
this.contextMenuRow = null;
},
/** 检查权限 */
checkPermission(permissions) {
return checkPermi(permissions);
},
}
};
</script>
<style scoped>
/* 右击菜单样式 */
.context-menu {
position: fixed;
z-index: 1000;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 5px 0;
margin: 0;
list-style: none;
min-width: 120px;
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.context-menu li:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu li i {
margin-right: 8px;
font-size: 14px;
}
/* 详情内容样式 */
.detail-content {
padding: 20px;
}
.detail-text-content {
max-height: 200px;
overflow-y: auto;
word-wrap: break-word;
word-break: break-all;
line-height: 1.6;
padding: 8px;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #e9ecef;
}
/* 表格行悬停效果 */
.fault-record-table .el-table__row {
transition: background-color 0.3s;
}
.fault-record-table .el-table__row:hover {
cursor: context-menu;
background-color: #f0f9ff !important;
}
/* 表格样式优化 */
.fault-record-table {
border-radius: 4px;
overflow: hidden;
}
.fault-record-table .el-table__header-wrapper {
border-radius: 4px 4px 0 0;
}
/* 描述列表样式优化 */
.detail-content .el-descriptions {
margin-top: 0;
}
.detail-content .el-descriptions-item__label {
font-weight: 600;
color: #303133;
width: 90px;
}
.detail-content .el-descriptions-item__content {
color: #606266;
}
/* 响应式设计 */
@media (max-width: 768px) {
.context-menu {
min-width: 100px;
font-size: 12px;
}
.context-menu li {
padding: 6px 12px;
}
.detail-content {
padding: 15px;
}
.detail-content .el-descriptions-item__label {
width: 80px;
font-size: 13px;
}
}
/* 打印样式 */
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -111,21 +111,39 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="faultHandlingRecordList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="faultHandlingRecordList"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
class="fault-record-table"
tooltip-effect="dark"
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="故障日期" align="center" prop="faultDate" v-if="columns[1].visible"/>
<el-table-column label="故障位置" align="center" prop="faultLocation" v-if="columns[2].visible"/>
<el-table-column label="处理人员" align="center" prop="handlingPersonnel" v-if="columns[3].visible"/>
<el-table-column label="故障现象及原因" align="center" prop="faultPhenomenonAndCause" v-if="columns[4].visible"/>
<el-table-column label="故障情况处置" align="center" prop="faultSituationHandling" v-if="columns[5].visible"/>
<el-table-column label="影响" align="center" prop="impact" v-if="columns[6].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[7].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[8].visible"/>
<el-table-column label="维修更换的主要元器件" align="center" prop="mainComponentsRepaired" v-if="columns[9].visible"/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[10].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="故障日期" align="center" prop="faultDate" v-if="columns[1].visible"/>
<el-table-column label="故障位置" align="center" prop="faultLocation" v-if="columns[2].visible"/>
<el-table-column label="处理人员" align="center" prop="handlingPersonnel" v-if="columns[3].visible"/>
<el-table-column label="故障现象及原因" align="center" prop="faultPhenomenonAndCause" v-if="columns[4].visible" show-overflow-tooltip/>
<el-table-column label="故障情况处置" align="center" prop="faultSituationHandling" v-if="columns[5].visible" show-overflow-tooltip/>
<el-table-column label="影响" align="center" prop="impact" v-if="columns[6].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[7].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[8].visible"/>
<el-table-column label="维修更换的主要元器件" align="center" prop="mainComponentsRepaired" v-if="columns[9].visible" show-overflow-tooltip/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[10].visible" show-overflow-tooltip/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -152,7 +170,7 @@
@pagination="getList"
/>
<!-- 添加或修改故障处置记录对话框 -->
<!-- 添加 或修改 故障处置记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="故障日期" prop="faultDate">
@ -232,11 +250,88 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="故障处置记录详情"
:visible.sync="detailDrawer"
direction="rtl"
size="500px"
:before-close="handleDetailClose"
>
<div class="detail-content" v-if="currentRecord">
<el-descriptions :column="1" border>
<el-descriptions-item label="记录ID">
<span>{{ currentRecord.id }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障日期">
<span>{{ currentRecord.faultDate }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障位置">
<span>{{ currentRecord.faultLocation || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处理人员">
<span>{{ currentRecord.handlingPersonnel || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="影响">
<span>{{ currentRecord.impact || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障发生时间">
<span>{{ currentRecord.faultOccurrenceTime || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处置时长">
<span>{{ currentRecord.handlingDuration || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障现象及原因">
<div class="detail-text-content">
{{ currentRecord.faultPhenomenonAndCause || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="故障情况处置">
<div class="detail-text-content">
{{ currentRecord.faultSituationHandling || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="维修更换的主要元器件">
<div class="detail-text-content">
{{ currentRecord.mainComponentsRepaired || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="备注">
<div class="detail-text-content">
{{ currentRecord.remarks || '暂无' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<ul
v-show="contextMenuVisible"
:style="contextMenuStyle"
class="context-menu"
@click.stop
>
<li @click="handleViewDetail(contextMenuRow)">
<i class="el-icon-view"></i>
查看详情
</li>
<!-- <li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:faultHandlingRecord:edit'])">-->
<!-- <i class="el-icon-edit"></i>-->
<!-- 修改记录-->
<!-- </li>-->
<!-- <li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:faultHandlingRecord:remove'])">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- 删除记录-->
<!-- </li>-->
</ul>
</div>
</template>
<script>
import { listFaultHandlingRecord, getFaultHandlingRecord, delFaultHandlingRecord, addFaultHandlingRecord, updateFaultHandlingRecord } from "@/api/ems/info/faultHandlingRecord";
import { checkPermi } from "@/utils/permission";
export default {
name: "FaultHandlingRecord",
@ -285,10 +380,10 @@
faultLocation: [
{ required: true, message: "故障位置不能为空", trigger: "blur" }
],
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `故障日期`, visible: true },
{ key: 2, label: `故障位置`, visible: true },
{ key: 3, label: `处理人员`, visible: true },
@ -307,7 +402,19 @@
updateSupport: false,
isUploading: false,
headers: {}
}
},
//
detailDrawer: false,
currentRecord: null,
//
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
};
},
created() {
@ -315,6 +422,12 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/faultHandlingRecord/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询故障处置记录列表 */
getList() {
@ -367,16 +480,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加故障处置记录";
this.title = "添加 故障处置记录";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFaultHandlingRecord(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改故障处置记录";
this.title = "修改 故障处置记录";
});
},
/** 提交按钮 */
@ -440,7 +553,170 @@
//
submitFileForm() {
this.$refs.upload.submit();
}
},
/** 查看详情 */
handleViewDetail(row) {
this.currentRecord = row;
this.detailDrawer = true;
this.hideContextMenu();
},
/** 关闭详情抽屉 */
handleDetailClose() {
this.currentRecord = null;
this.detailDrawer = false;
},
/** 处理行右击事件 */
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenuRow = row;
this.$nextTick(() => {
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let left = event.clientX;
let top = event.clientY;
if (left + menuWidth > windowWidth) {
left = windowWidth - menuWidth - 10;
}
if (top + menuHeight > windowHeight) {
top = windowHeight - menuHeight - 10;
}
this.contextMenuStyle.left = left + 'px';
this.contextMenuStyle.top = top + 'px';
this.contextMenuVisible = true;
});
},
/** 隐藏右击菜单 */
hideContextMenu() {
this.contextMenuVisible = false;
this.contextMenuRow = null;
},
/** 检查权限 */
checkPermission(permissions) {
return checkPermi(permissions);
},
}
};
</script>
<style scoped>
/* 右击菜单样式 */
.context-menu {
position: fixed;
z-index: 1000;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 5px 0;
margin: 0;
list-style: none;
min-width: 120px;
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.context-menu li:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu li i {
margin-right: 8px;
font-size: 14px;
}
/* 详情内容样式 */
.detail-content {
padding: 20px;
}
.detail-text-content {
max-height: 200px;
overflow-y: auto;
word-wrap: break-word;
word-break: break-all;
line-height: 1.6;
padding: 8px;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #e9ecef;
}
/* 表格行悬停效果 */
.fault-record-table .el-table__row {
transition: background-color 0.3s;
}
.fault-record-table .el-table__row:hover {
cursor: context-menu;
background-color: #f0f9ff !important;
}
/* 表格样式优化 */
.fault-record-table {
border-radius: 4px;
overflow: hidden;
}
.fault-record-table .el-table__header-wrapper {
border-radius: 4px 4px 0 0;
}
/* 描述列表样式优化 */
.detail-content .el-descriptions {
margin-top: 0;
}
.detail-content .el-descriptions-item__label {
font-weight: 600;
color: #303133;
width: 90px;
}
.detail-content .el-descriptions-item__content {
color: #606266;
}
/* 响应式设计 */
@media (max-width: 768px) {
.context-menu {
min-width: 100px;
font-size: 12px;
}
.context-menu li {
padding: 6px 12px;
}
.detail-content {
padding: 15px;
}
.detail-content .el-descriptions-item__label {
width: 80px;
font-size: 13px;
}
}
/* 打印样式 */
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -207,34 +207,52 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="plcBufferBatteryLifecycleList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="plcBufferBatteryLifecycleList"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
class="battery-lifecycle-table"
tooltip-effect="dark"
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="objid" v-if="columns[0].visible"/>
<el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible"/>
<el-table-column label="安装柜体名称" align="center" prop="installationCabinetName" v-if="columns[2].visible"/>
<el-table-column label="位置描述" align="center" prop="locationDescription" v-if="columns[3].visible"/>
<el-table-column label="来源" align="center" prop="source" v-if="columns[4].visible"/>
<el-table-column label="取电" align="center" prop="powerSource" v-if="columns[5].visible"/>
<el-table-column label="图片" align="center" prop="imageAddress" width="100" v-if="columns[6].visible">
<template slot-scope="scope">
<image-preview :src="scope.row.imageAddress" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[7].visible"/>
<el-table-column label="第1次" align="center" prop="firstInstance" v-if="columns[8].visible"/>
<el-table-column label="第2次" align="center" prop="secondInstance" v-if="columns[9].visible"/>
<el-table-column label="第3次" align="center" prop="thirdInstance" v-if="columns[10].visible"/>
<el-table-column label="第4次" align="center" prop="fourthInstance" v-if="columns[11].visible"/>
<el-table-column label="第5次" align="center" prop="fifthInstance" v-if="columns[12].visible"/>
<el-table-column label="第6次" align="center" prop="sixthInstance" v-if="columns[13].visible"/>
<el-table-column label="第7次" align="center" prop="seventhInstance" v-if="columns[14].visible"/>
<el-table-column label="第8次" align="center" prop="eighthInstance" v-if="columns[15].visible"/>
<el-table-column label="第9次" align="center" prop="ninthInstance" v-if="columns[16].visible"/>
<el-table-column label="第10次" align="center" prop="tenthInstance" v-if="columns[17].visible"/>
<el-table-column label="第11次" align="center" prop="eleventhInstance" v-if="columns[18].visible"/>
<el-table-column label="第12次" align="center" prop="twelfthInstance" v-if="columns[19].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible"/>
<el-table-column label="安装柜体名称" align="center" prop="installationCabinetName" v-if="columns[2].visible"/>
<el-table-column label="位置描述" align="center" prop="locationDescription" v-if="columns[3].visible" show-overflow-tooltip/>
<el-table-column label="来源" align="center" prop="source" v-if="columns[4].visible"/>
<el-table-column label="取电" align="center" prop="powerSource" v-if="columns[5].visible"/>
<el-table-column label="图片" align="center" prop="imageAddress" width="100" v-if="columns[6].visible">
<template slot-scope="scope">
<image-preview :src="scope.row.imageAddress" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[7].visible" show-overflow-tooltip/>
<el-table-column label="第1次" align="center" prop="firstInstance" v-if="columns[8].visible"/>
<el-table-column label="第2次" align="center" prop="secondInstance" v-if="columns[9].visible"/>
<el-table-column label="第3次" align="center" prop="thirdInstance" v-if="columns[10].visible"/>
<el-table-column label="第4次" align="center" prop="fourthInstance" v-if="columns[11].visible"/>
<el-table-column label="第5次" align="center" prop="fifthInstance" v-if="columns[12].visible"/>
<el-table-column label="第6次" align="center" prop="sixthInstance" v-if="columns[13].visible"/>
<el-table-column label="第7次" align="center" prop="seventhInstance" v-if="columns[14].visible"/>
<el-table-column label="第8次" align="center" prop="eighthInstance" v-if="columns[15].visible"/>
<el-table-column label="第9次" align="center" prop="ninthInstance" v-if="columns[16].visible"/>
<el-table-column label="第10次" align="center" prop="tenthInstance" v-if="columns[17].visible"/>
<el-table-column label="第11次" align="center" prop="eleventhInstance" v-if="columns[18].visible"/>
<el-table-column label="第12次" align="center" prop="twelfthInstance" v-if="columns[19].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -261,7 +279,7 @@
@pagination="getList"
/>
<!-- 添加或修改行李系统PLC缓冲电池生命周期对话框 -->
<!-- 添加 或修改 行李系统PLC缓冲电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type">
@ -429,11 +447,112 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="PLC缓冲电池生命周期详情"
:visible.sync="detailDrawer"
direction="rtl"
size="500px"
:before-close="handleDetailClose"
>
<div class="detail-content" v-if="currentRecord">
<el-descriptions :column="1" border>
<el-descriptions-item label="记录ID">
<span>{{ currentRecord.objid }}</span>
</el-descriptions-item>
<el-descriptions-item label="类型">
<span>{{ currentRecord.type || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="安装柜体名称">
<span>{{ currentRecord.installationCabinetName || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="位置描述">
<div class="detail-text-content">
{{ currentRecord.locationDescription || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="来源">
<span>{{ currentRecord.source || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="取电">
<span>{{ currentRecord.powerSource || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="图片">
<image-preview v-if="currentRecord.imageAddress" :src="currentRecord.imageAddress" :width="100" :height="100"/>
<span v-else></span>
</el-descriptions-item>
<el-descriptions-item label="备注">
<div class="detail-text-content">
{{ currentRecord.remarks || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="第1次">
<span>{{ currentRecord.firstInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第2次">
<span>{{ currentRecord.secondInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第3次">
<span>{{ currentRecord.thirdInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第4次">
<span>{{ currentRecord.fourthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第5次">
<span>{{ currentRecord.fifthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第6次">
<span>{{ currentRecord.sixthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第7次">
<span>{{ currentRecord.seventhInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第8次">
<span>{{ currentRecord.eighthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第9次">
<span>{{ currentRecord.ninthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第10次">
<span>{{ currentRecord.tenthInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第11次">
<span>{{ currentRecord.eleventhInstance || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="第12次">
<span>{{ currentRecord.twelfthInstance || '暂无' }}</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<ul
v-show="contextMenuVisible"
:style="contextMenuStyle"
class="context-menu"
@click.stop
>
<li @click="handleViewDetail(contextMenuRow)">
<i class="el-icon-view"></i>
查看详情
</li>
<!-- <li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:plcBufferBatteryLifecycle:edit'])">-->
<!-- <i class="el-icon-edit"></i>-->
<!-- 修改记录-->
<!-- </li>-->
<!-- <li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:plcBufferBatteryLifecycle:remove'])">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- 删除记录-->
<!-- </li>-->
</ul>
</div>
</template>
<script>
import { listPlcBufferBatteryLifecycle, getPlcBufferBatteryLifecycle, delPlcBufferBatteryLifecycle, addPlcBufferBatteryLifecycle, updatePlcBufferBatteryLifecycle } from "@/api/ems/info/plcBufferBatteryLifecycle";
import { checkPermi } from "@/utils/permission";
export default {
name: "PlcBufferBatteryLifecycle",
@ -493,7 +612,7 @@
],
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true },
{ key: 2, label: `安装柜体名称`, visible: true },
{ key: 3, label: `位置描述`, visible: true },
@ -521,7 +640,19 @@
updateSupport: false,
isUploading: false,
headers: {}
}
},
//
detailDrawer: false,
currentRecord: null,
//
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
};
},
created() {
@ -529,6 +660,12 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/plcBufferBatteryLifecycle/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询行李系统PLC缓冲电池生命周期列表 */
getList() {
@ -590,16 +727,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加行李系统PLC缓冲电池生命周期";
this.title = "添加 行李系统PLC缓冲电池生命周期";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const objid = row.objid || this.ids
getPlcBufferBatteryLifecycle(objid).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改行李系统PLC缓冲电池生命周期";
this.title = "修改 行李系统PLC缓冲电池生命周期";
});
},
/** 提交按钮 */
@ -663,7 +800,170 @@
//
submitFileForm() {
this.$refs.upload.submit();
}
},
/** 查看详情 */
handleViewDetail(row) {
this.currentRecord = row;
this.detailDrawer = true;
this.hideContextMenu();
},
/** 关闭详情抽屉 */
handleDetailClose() {
this.currentRecord = null;
this.detailDrawer = false;
},
/** 处理行右击事件 */
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenuRow = row;
this.$nextTick(() => {
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let left = event.clientX;
let top = event.clientY;
if (left + menuWidth > windowWidth) {
left = windowWidth - menuWidth - 10;
}
if (top + menuHeight > windowHeight) {
top = windowHeight - menuHeight - 10;
}
this.contextMenuStyle.left = left + 'px';
this.contextMenuStyle.top = top + 'px';
this.contextMenuVisible = true;
});
},
/** 隐藏右击菜单 */
hideContextMenu() {
this.contextMenuVisible = false;
this.contextMenuRow = null;
},
/** 检查权限 */
checkPermission(permissions) {
return checkPermi(permissions);
},
}
};
</script>
<style scoped>
/* 右击菜单样式 */
.context-menu {
position: fixed;
z-index: 1000;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 5px 0;
margin: 0;
list-style: none;
min-width: 120px;
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.context-menu li:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu li i {
margin-right: 8px;
font-size: 14px;
}
/* 详情内容样式 */
.detail-content {
padding: 20px;
}
.detail-text-content {
max-height: 200px;
overflow-y: auto;
word-wrap: break-word;
word-break: break-all;
line-height: 1.6;
padding: 8px;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #e9ecef;
}
/* 表格行悬停效果 */
.battery-lifecycle-table .el-table__row {
transition: background-color 0.3s;
}
.battery-lifecycle-table .el-table__row:hover {
cursor: context-menu;
background-color: #f0f9ff !important;
}
/* 表格样式优化 */
.battery-lifecycle-table {
border-radius: 4px;
overflow: hidden;
}
.battery-lifecycle-table .el-table__header-wrapper {
border-radius: 4px 4px 0 0;
}
/* 描述列表样式优化 */
.detail-content .el-descriptions {
margin-top: 0;
}
.detail-content .el-descriptions-item__label {
font-weight: 600;
color: #303133;
width: 90px;
}
.detail-content .el-descriptions-item__content {
color: #606266;
}
/* 响应式设计 */
@media (max-width: 768px) {
.context-menu {
min-width: 100px;
font-size: 12px;
}
.context-menu li {
padding: 6px 12px;
}
.detail-content {
padding: 15px;
}
.detail-content .el-descriptions-item__label {
width: 80px;
font-size: 13px;
}
}
/* 打印样式 */
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -1,154 +1,154 @@
<template>
<div class="app-container">
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
<el-option
v-for="dict in dict.type.${dictType}"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="参照位置" prop="referenceLocation">
<el-input
v-model="queryParams.referenceLocation"
placeholder="请输入参照位置"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="位置描述" prop="locationDescription">
<el-input
v-model="queryParams.locationDescription"
placeholder="请输入位置描述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="取电" prop="powerSource">
<el-input
v-model="queryParams.powerSource"
placeholder="请输入取电"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="电池类型" prop="batteryType">
<el-select v-model="queryParams.batteryType" placeholder="请选择电池类型" clearable>
<el-option
v-for="dict in dict.type.${dictType}"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="图片" prop="imageAddress">
<el-input
v-model="queryParams.imageAddress"
placeholder="请输入图片"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第1次" prop="firstInstance">
<el-input
v-model="queryParams.firstInstance"
placeholder="请输入第1次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第2次" prop="secondInstance">
<el-input
v-model="queryParams.secondInstance"
placeholder="请输入第2次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第3次" prop="thirdInstance">
<el-input
v-model="queryParams.thirdInstance"
placeholder="请输入第3次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第4次" prop="fourthInstance">
<el-input
v-model="queryParams.fourthInstance"
placeholder="请输入第4次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第5次" prop="fifthInstance">
<el-input
v-model="queryParams.fifthInstance"
placeholder="请输入第5次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第6次" prop="sixthInstance">
<el-input
v-model="queryParams.sixthInstance"
placeholder="请输入第6次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第7次" prop="seventhInstance">
<el-input
v-model="queryParams.seventhInstance"
placeholder="请输入第7次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第8次" prop="eighthInstance">
<el-input
v-model="queryParams.eighthInstance"
placeholder="请输入第8次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第9次" prop="ninthInstance">
<el-input
v-model="queryParams.ninthInstance"
placeholder="请输入第9次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第10次" prop="tenthInstance">
<el-input
v-model="queryParams.tenthInstance"
placeholder="请输入第10次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第11次" prop="eleventhInstance">
<el-input
v-model="queryParams.eleventhInstance"
placeholder="请输入第11次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第12次" prop="twelfthInstance">
<el-input
v-model="queryParams.twelfthInstance"
placeholder="请输入第12次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<!-- <el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
<el-option
v-for="dict in dict.type.${dictType}"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="参照位置" prop="referenceLocation">
<el-input
v-model="queryParams.referenceLocation"
placeholder="请输入参照位置"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="位置描述" prop="locationDescription">
<el-input
v-model="queryParams.locationDescription"
placeholder="请输入位置描述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="取电" prop="powerSource">
<el-input
v-model="queryParams.powerSource"
placeholder="请输入取电"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="电池类型" prop="batteryType">
<el-select v-model="queryParams.batteryType" placeholder="请选择电池类型" clearable>
<el-option
v-for="dict in dict.type.${dictType}"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="图片" prop="imageAddress">
<el-input
v-model="queryParams.imageAddress"
placeholder="请输入图片"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第1次" prop="firstInstance">
<el-input
v-model="queryParams.firstInstance"
placeholder="请输入第1次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第2次" prop="secondInstance">
<el-input
v-model="queryParams.secondInstance"
placeholder="请输入第2次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第3次" prop="thirdInstance">
<el-input
v-model="queryParams.thirdInstance"
placeholder="请输入第3次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第4次" prop="fourthInstance">
<el-input
v-model="queryParams.fourthInstance"
placeholder="请输入第4次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第5次" prop="fifthInstance">
<el-input
v-model="queryParams.fifthInstance"
placeholder="请输入第5次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第6次" prop="sixthInstance">
<el-input
v-model="queryParams.sixthInstance"
placeholder="请输入第6次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第7次" prop="seventhInstance">
<el-input
v-model="queryParams.seventhInstance"
placeholder="请输入第7次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第8次" prop="eighthInstance">
<el-input
v-model="queryParams.eighthInstance"
placeholder="请输入第8次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第9次" prop="ninthInstance">
<el-input
v-model="queryParams.ninthInstance"
placeholder="请输入第9次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第10次" prop="tenthInstance">
<el-input
v-model="queryParams.tenthInstance"
placeholder="请输入第10次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第11次" prop="eleventhInstance">
<el-input
v-model="queryParams.eleventhInstance"
placeholder="请输入第11次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="第12次" prop="twelfthInstance">
<el-input
v-model="queryParams.twelfthInstance"
placeholder="请输入第12次"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
@ -211,9 +211,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="securityDoorBatteryLifecycleList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="securityDoorBatteryLifecycleList" @selection-change="handleSelectionChange" @row-contextmenu="handleRowContextMenu" class="context-menu-table">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="objid" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible">
</el-table-column>
<el-table-column label="参照位置" align="center" prop="referenceLocation" v-if="columns[2].visible">
@ -255,8 +259,14 @@
</el-table-column>
<el-table-column label="第12次" align="center" prop="twelfthInstance" v-if="columns[19].visible">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -283,7 +293,7 @@
@pagination="getList"
/>
<!-- 添加或修改行李系统安全门铅酸电池生命周期对话框 -->
<!-- 添加 或修改 行李系统安全门铅酸电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type">
@ -451,11 +461,176 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="安全门电池生命周期详情"
:visible.sync="detailDrawer"
direction="rtl"
size="50%"
:before-close="() => detailDrawer = false"
>
<div style="padding: 20px;">
<el-descriptions :column="1" border>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">类型</span>
</template>
{{ currentRecord.type || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">参照位置</span>
</template>
{{ currentRecord.referenceLocation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">位置描述</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.locationDescription || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">取电</span>
</template>
{{ currentRecord.powerSource || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">电池类型</span>
</template>
{{ currentRecord.batteryType || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">图片</span>
</template>
<image-preview v-if="currentRecord.imageAddress" :src="currentRecord.imageAddress" :width="100" :height="100"/>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备注</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.remarks || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第1次</span>
</template>
{{ currentRecord.firstInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第2次</span>
</template>
{{ currentRecord.secondInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第3次</span>
</template>
{{ currentRecord.thirdInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第4次</span>
</template>
{{ currentRecord.fourthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第5次</span>
</template>
{{ currentRecord.fifthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第6次</span>
</template>
{{ currentRecord.sixthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第7次</span>
</template>
{{ currentRecord.seventhInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第8次</span>
</template>
{{ currentRecord.eighthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第9次</span>
</template>
{{ currentRecord.ninthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第10次</span>
</template>
{{ currentRecord.tenthInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第11次</span>
</template>
{{ currentRecord.eleventhInstance || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第12次</span>
</template>
{{ currentRecord.twelfthInstance || '-' }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<div
v-show="contextMenu.visible"
:style="{
position: 'fixed',
top: contextMenu.top + 'px',
left: contextMenu.left + 'px',
zIndex: 9999
}"
class="context-menu"
@click.stop
>
<div class="context-menu-item" @click="contextMenuViewDetail">
<i class="el-icon-view"></i> 查看详情
</div>
<div
class="context-menu-item"
@click="contextMenuEdit"
v-if="checkPermi(['ems/info:securityDoorBatteryLifecycle:edit'])"
>
<i class="el-icon-edit"></i> 修改
</div>
<div
class="context-menu-item"
@click="contextMenuDelete"
v-if="checkPermi(['ems/info:securityDoorBatteryLifecycle:remove'])"
>
<i class="el-icon-delete"></i> 删除
</div>
</div>
</div>
</template>
<script>
import { listSecurityDoorBatteryLifecycle, getSecurityDoorBatteryLifecycle, delSecurityDoorBatteryLifecycle, addSecurityDoorBatteryLifecycle, updateSecurityDoorBatteryLifecycle } from "@/api/ems/info/securityDoorBatteryLifecycle";
import { checkPermi } from "@/utils/permission";
export default {
name: "SecurityDoorBatteryLifecycle",
@ -512,7 +687,7 @@
]
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true },
{ key: 2, label: `参照位置`, visible: true },
{ key: 3, label: `位置描述`, visible: true },
@ -540,6 +715,16 @@
updateSupport: false,
isUploading: false,
headers: {}
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
}
};
},
@ -548,6 +733,12 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/securityDoorBatteryLifecycle/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询行李系统安全门铅酸电池生命周期列表 */
getList() {
@ -609,16 +800,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加行李系统安全门铅酸电池生命周期";
this.title = "添加 行李系统安全门铅酸电池生命周期";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const objid = row.objid || this.ids
getSecurityDoorBatteryLifecycle(objid).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改行李系统安全门铅酸电池生命周期";
this.title = "修改 行李系统安全门铅酸电池生命周期";
});
},
/** 提交按钮 */
@ -682,7 +873,108 @@
//
submitFileForm() {
this.$refs.upload.submit();
},
//
handleViewDetail(row) {
this.currentRecord = { ...row };
this.detailDrawer = true;
},
//
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenu.row = row;
this.contextMenu.visible = true;
//
const x = event.clientX;
const y = event.clientY;
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
this.contextMenu.left = (x + menuWidth > windowWidth) ? x - menuWidth : x;
this.contextMenu.top = (y + menuHeight > windowHeight) ? y - menuHeight : y;
},
//
hideContextMenu() {
this.contextMenu.visible = false;
},
// -
contextMenuViewDetail() {
if (this.contextMenu.row) {
this.handleViewDetail(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuEdit() {
if (this.contextMenu.row && this.checkPermi(['ems/info:securityDoorBatteryLifecycle:edit'])) {
this.handleUpdate(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuDelete() {
if (this.contextMenu.row && this.checkPermi(['ems/info:securityDoorBatteryLifecycle:remove'])) {
this.handleDelete(this.contextMenu.row);
}
this.hideContextMenu();
},
//
checkPermi(permissions) {
return checkPermi(permissions);
}
}
};
</script>
<style scoped>
.context-menu-table tbody tr:hover {
cursor: context-menu;
}
.context-menu {
background: white;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 4px 0;
min-width: 120px;
}
.context-menu-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
}
.context-menu-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu-item i {
margin-right: 8px;
font-size: 14px;
}
.el-descriptions__label {
width: 90px !important;
}
@media (max-width: 768px) {
.el-drawer {
width: 90% !important;
}
}
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -126,10 +126,10 @@
</el-col>
<el-col :span="1.5" v-if="lowStockCount > 0">
<el-badge :value="lowStockCount" class="item" type="danger">
<el-button
type="danger"
plain
icon="el-icon-warning"
<el-button
type="danger"
plain
icon="el-icon-warning"
size="mini"
@click="filterLowStock"
>库存预警</el-button>
@ -149,14 +149,18 @@
>
</el-alert>
<el-table
v-loading="loading"
:data="sparePartsInventoryList"
<el-table
v-loading="loading"
:data="sparePartsInventoryList"
@selection-change="handleSelectionChange"
:row-class-name="getRowClassName"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="objid" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="入库时间" align="center" prop="warehouseDate" v-if="columns[1].visible"/>
<el-table-column label="采购方式" align="center" prop="purchaseMethod" v-if="columns[2].visible"/>
<el-table-column label="库存位置" align="center" prop="storageLocation" v-if="columns[3].visible"/>
@ -181,19 +185,19 @@
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[10].visible"/>
<!-- 动态盘点列 -->
<el-table-column
v-for="(checkColumn, index) in dynamicColumns"
<el-table-column
v-for="(checkColumn, index) in dynamicColumns"
:key="'check_' + index"
:label="checkColumn"
:label="checkColumn"
align="center"
width="120">
<template slot-scope="scope">
<span>{{ getCheckValue(scope.row, checkColumn) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
<template slot-scope="scope">
<div v-if="isLowStock(scope.row)" style="margin-bottom: 5px;">
@ -229,7 +233,7 @@
@pagination="getList"
/>
<!-- 添加或修改备件库记录主对话框 -->
<!-- 添加 或修改 备件库记录主对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
@ -289,10 +293,10 @@
<el-row>
<el-col :span="12">
<el-form-item label="库存阈值" prop="threshold">
<el-input-number
v-model="form.threshold"
:min="0"
placeholder="请输入库存阈值"
<el-input-number
v-model="form.threshold"
:min="0"
placeholder="请输入库存阈值"
style="width: 100%"
/>
</el-form-item>
@ -304,27 +308,27 @@
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
</el-form-item>
<!-- 盘点记录部分 -->
<el-divider content-position="left">盘点记录</el-divider>
<div style="margin-bottom: 10px;">
<el-button
type="primary"
size="small"
icon="el-icon-plus"
<el-button
type="primary"
size="small"
icon="el-icon-plus"
@click="addCheckRecord"
>添加盘点记录</el-button>
>添加 盘点记录</el-button>
</div>
<el-table
:data="form.checkData"
border
<el-table
:data="form.checkData"
border
style="width: 100%; margin-bottom: 20px;"
max-height="300"
>
<el-table-column label="盘点名称" width="200">
<template slot-scope="scope">
<el-input
v-model="scope.row.checkName"
<el-input
v-model="scope.row.checkName"
placeholder="如: 2023.3盘点"
size="small"
/>
@ -332,8 +336,8 @@
</el-table-column>
<el-table-column label="盘点数量" width="150">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.checkQuantity"
<el-input-number
v-model="scope.row.checkQuantity"
:min="0"
size="small"
style="width: 100%"
@ -342,9 +346,9 @@
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeCheckRecord(scope.$index)"
></el-button>
@ -387,13 +391,13 @@
</template>
<script>
import {
listSparePartsInventoryWithDynamicColumns,
getSparePartsInventoryWithDynamicColumns,
delSparePartsInventory,
addSparePartsInventoryWithDynamicColumns,
import {
listSparePartsInventoryWithDynamicColumns,
getSparePartsInventoryWithDynamicColumns,
delSparePartsInventory,
addSparePartsInventoryWithDynamicColumns,
updateSparePartsInventoryWithDynamicColumns,
getDynamicColumns
getDynamicColumns
} from "@/api/ems/info/sparePartsInventory";
export default {
@ -487,14 +491,14 @@
this.loading = false;
});
},
/** 获取动态列列表 */
getDynamicColumnsList() {
getDynamicColumns().then(response => {
this.dynamicColumns = response.data || [];
});
},
/** 获取盘点值 */
getCheckValue(row, checkName) {
if (row.checkData && row.checkData[checkName] !== undefined && row.checkData[checkName] !== null) {
@ -502,8 +506,8 @@
}
return '';
},
/** 添加盘点记录 */
/** 添加 盘点记录 */
addCheckRecord() {
if (!this.form.checkData) {
this.form.checkData = [];
@ -513,12 +517,12 @@
checkQuantity: 0
});
},
/** 删除盘点记录 */
removeCheckRecord(index) {
this.form.checkData.splice(index, 1);
},
//
cancel() {
this.open = false;
@ -562,9 +566,9 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加备件库记录主";
this.title = "添加 备件库记录主";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const objid = row.objid || this.ids
@ -581,7 +585,7 @@
this.form.checkData = [];
}
this.open = true;
this.title = "修改备件库记录主";
this.title = "修改 备件库记录主";
});
},
/** 提交按钮 */
@ -600,7 +604,7 @@
});
submitData.checkData = checkDataObj;
}
if (this.form.objid != null) {
updateSparePartsInventoryWithDynamicColumns(submitData).then(response => {
this.$modal.msgSuccess("修改成功");
@ -666,7 +670,7 @@
isLowStock(row) {
return row.remainingQuantity != null && row.threshold != null && row.remainingQuantity <= row.threshold;
},
//
getRowClassName({row, rowIndex}) {
if (this.isLowStock(row)) {
@ -674,17 +678,17 @@
}
return '';
},
//
filterLowStock() {
this.$message({
message: `正在显示 ${this.lowStockCount} 项库存不足的记录`,
type: 'warning'
});
//
//
//
},
//
getRemainingQuantityClass(row) {
//

@ -1,376 +1,376 @@
<!-- <template>
<div class="app-container">
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="备件库存主表ID" prop="inventoryObjid">
<el-input
v-model="queryParams.inventoryObjid"
placeholder="请输入备件库存主表ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="盘点名称" prop="checkName">
<el-input
v-model="queryParams.checkName"
placeholder="请输入盘点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="盘点数量" prop="checkQuantity">
<el-input
v-model="queryParams.checkQuantity"
placeholder="请输入盘点数量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="盘点日期" prop="checkDate">
<el-input
v-model="queryParams.checkDate"
placeholder="请输入盘点日期"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form> -->
<!--&lt;!&ndash; <template>-->
<!-- <div class="app-container">-->
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">-->
<!-- <el-form-item label="备件库存主表ID" prop="inventoryObjid">-->
<!-- <el-input-->
<!-- v-model="queryParams.inventoryObjid"-->
<!-- placeholder="请输入备件库存主表ID"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点名称" prop="checkName">-->
<!-- <el-input-->
<!-- v-model="queryParams.checkName"-->
<!-- placeholder="请输入盘点名称"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点数量" prop="checkQuantity">-->
<!-- <el-input-->
<!-- v-model="queryParams.checkQuantity"-->
<!-- placeholder="请输入盘点数量"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点日期" prop="checkDate">-->
<!-- <el-input-->
<!-- v-model="queryParams.checkDate"-->
<!-- placeholder="请输入盘点日期"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>-->
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>-->
<!-- </el-form-item>-->
<!-- </el-form> &ndash;&gt;-->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['ems/info:sparePartsInventoryCheck:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['ems/info:sparePartsInventoryCheck:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['ems/info:sparePartsInventoryCheck:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['ems/info:sparePartsInventoryCheck:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['ems/info:sparePartsInventoryCheck:add']"
>导入</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="info"-->
<!-- plain-->
<!-- icon="el-icon-upload2"-->
<!-- size="mini"-->
<!-- @click="handleImport"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:add']"-->
<!-- >导入</el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
<!-- </el-row>-->
<el-table v-loading="loading" :data="sparePartsInventoryCheckList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="备件库存主表ID" align="center" prop="inventoryObjid" v-if="columns[1].visible"/>
<el-table-column label="盘点名称" align="center" prop="checkName" v-if="columns[2].visible"/>
<el-table-column label="盘点数量" align="center" prop="checkQuantity" v-if="columns[3].visible"/>
<el-table-column label="盘点日期" align="center" prop="checkDate" v-if="columns[4].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['ems/info:sparePartsInventoryCheck:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ems/info:sparePartsInventoryCheck:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-table v-loading="loading" :data="sparePartsInventoryCheckList" @selection-change="handleSelectionChange">-->
<!-- <el-table-column type="selection" width="55" align="center" />-->
<!-- <el-table-column label="主键" align="center" prop="id" v-if="columns[0].visible"/>-->
<!-- <el-table-column label="备件库存主表ID" align="center" prop="inventoryObjid" v-if="columns[1].visible"/>-->
<!-- <el-table-column label="盘点名称" align="center" prop="checkName" v-if="columns[2].visible"/>-->
<!-- <el-table-column label="盘点数量" align="center" prop="checkQuantity" v-if="columns[3].visible"/>-->
<!-- <el-table-column label="盘点日期" align="center" prop="checkDate" v-if="columns[4].visible"/>-->
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:edit']"-->
<!-- >修改</el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['ems/info:sparePartsInventoryCheck:remove']"-->
<!-- >删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- <pagination-->
<!-- v-show="total>0"-->
<!-- :total="total"-->
<!-- :page.sync="queryParams.pageNum"-->
<!-- :limit.sync="queryParams.pageSize"-->
<!-- @pagination="getList"-->
<!-- />-->
<!-- 添加或修改备件盘点记录明细对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="备件库存主表ID" prop="inventoryObjid">
<el-input v-model="form.inventoryObjid" placeholder="请输入备件库存主表ID" />
</el-form-item>
<el-form-item label="盘点名称" prop="checkName">
<el-input v-model="form.checkName" placeholder="请输入盘点名称" />
</el-form-item>
<el-form-item label="盘点数量" prop="checkQuantity">
<el-input v-model="form.checkQuantity" placeholder="请输入盘点数量" />
</el-form-item>
<el-form-item label="盘点日期" prop="checkDate">
<el-date-picker
v-model="form.checkDate"
type="date"
placeholder="请选择盘点日期"
value-format="yyyy/MM/dd"
format="yyyy/MM/dd"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- &lt;!&ndash; 添加 或修改 备件盘点记录明细对话框 &ndash;&gt;-->
<!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="100px">-->
<!-- <el-form-item label="备件库存主表ID" prop="inventoryObjid">-->
<!-- <el-input v-model="form.inventoryObjid" placeholder="请输入备件库存主表ID" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点名称" prop="checkName">-->
<!-- <el-input v-model="form.checkName" placeholder="请输入盘点名称" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点数量" prop="checkQuantity">-->
<!-- <el-input v-model="form.checkQuantity" placeholder="请输入盘点数量" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="盘点日期" prop="checkDate">-->
<!-- <el-date-picker-->
<!-- v-model="form.checkDate"-->
<!-- type="date"-->
<!-- placeholder="请选择盘点日期"-->
<!-- value-format="yyyy/MM/dd"-->
<!-- format="yyyy/MM/dd"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm"> </el-button>-->
<!-- <el-button @click="cancel"> </el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- 导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">-->
<!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据-->
<!-- </div>-->
<span>仅允许导入xlsxlsx格式文件</span>
<!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate"></el-link>-->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<!-- &lt;!&ndash; 导入对话框 &ndash;&gt;-->
<!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>-->
<!-- <el-upload-->
<!-- ref="upload"-->
<!-- :limit="1"-->
<!-- accept=".xlsx, .xls"-->
<!-- :headers="upload.headers"-->
<!-- :action="upload.url + '?updateSupport=' + upload.updateSupport"-->
<!-- :disabled="upload.isUploading"-->
<!-- :on-progress="handleFileUploadProgress"-->
<!-- :on-success="handleFileSuccess"-->
<!-- :auto-upload="false"-->
<!-- drag-->
<!-- >-->
<!-- <i class="el-icon-upload"></i>-->
<!-- <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>-->
<!-- <div class="el-upload__tip text-center" slot="tip">-->
<!--&lt;!&ndash; <div class="el-upload__tip" slot="tip">&ndash;&gt;-->
<!--&lt;!&ndash; <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- <span>仅允许导入xlsxlsx格式文件</span>-->
<!--&lt;!&ndash; <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate"></el-link>&ndash;&gt;-->
<!-- </div>-->
<!-- </el-upload>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitFileForm"> </el-button>-->
<!-- <el-button @click="upload.open = false"> </el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<script>
import { listSparePartsInventoryCheck, getSparePartsInventoryCheck, delSparePartsInventoryCheck, addSparePartsInventoryCheck, updateSparePartsInventoryCheck } from "@/api/ems/info/sparePartsInventoryCheck";
<!--<script>-->
<!-- import { listSparePartsInventoryCheck, getSparePartsInventoryCheck, delSparePartsInventoryCheck, addSparePartsInventoryCheck, updateSparePartsInventoryCheck } from "@/api/ems/info/sparePartsInventoryCheck";-->
export default {
name: "SparePartsInventoryCheck",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
sparePartsInventoryCheckList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
inventoryObjid: null,
checkName: null,
checkQuantity: null,
checkDate: null
},
//
form: {},
//
rules: {
},
columns: [
{ key: 0, label: `主键`, visible: false },
{ key: 1, label: `备件库存主表ID`, visible: true },
{ key: 2, label: `盘点名称`, visible: true },
{ key: 3, label: `盘点数量`, visible: true },
{ key: 4, label: `盘点日期`, visible: true },
],
upload: {
title: "导入备件盘点记录明细",
open: false,
url: "",
updateSupport: false,
isUploading: false,
headers: {}
}
};
},
created() {
this.getList();
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/sparePartsInventoryCheck/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
methods: {
/** 查询备件盘点记录明细列表 */
getList() {
this.loading = true;
listSparePartsInventoryCheck(this.queryParams).then(response => {
this.sparePartsInventoryCheckList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
inventoryObjid: null,
checkName: null,
checkQuantity: null,
checkDate: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加备件盘点记录明细";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSparePartsInventoryCheck(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改备件盘点记录明细";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateSparePartsInventoryCheck(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSparePartsInventoryCheck(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除备件盘点记录明细编号为"' + ids + '"的数据项?').then(function() {
return delSparePartsInventoryCheck(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('ems/info/sparePartsInventoryCheck/export', {
...this.queryParams
}, `sparePartsInventoryCheck_${new Date().getTime()}.xlsx`)
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "导入备件盘点记录明细";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download('ems/info/sparePartsInventoryCheck/importTemplate', {
}, `备件盘点记录明细数据模板_${new Date().getTime()}.xlsx`)
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
//
submitFileForm() {
this.$refs.upload.submit();
}
}
};
</script>
<!-- export default {-->
<!-- name: "SparePartsInventoryCheck",-->
<!-- data() {-->
<!-- return {-->
<!-- // -->
<!-- loading: true,-->
<!-- // -->
<!-- ids: [],-->
<!-- // -->
<!-- single: true,-->
<!-- // -->
<!-- multiple: true,-->
<!-- // -->
<!-- showSearch: true,-->
<!-- // -->
<!-- total: 0,-->
<!-- // -->
<!-- sparePartsInventoryCheckList: [],-->
<!-- // -->
<!-- title: "",-->
<!-- // -->
<!-- open: false,-->
<!-- // -->
<!-- queryParams: {-->
<!-- pageNum: 1,-->
<!-- pageSize: 10,-->
<!-- inventoryObjid: null,-->
<!-- checkName: null,-->
<!-- checkQuantity: null,-->
<!-- checkDate: null-->
<!-- },-->
<!-- // -->
<!-- form: {},-->
<!-- // -->
<!-- rules: {-->
<!-- },-->
<!-- columns: [-->
<!-- { key: 0, label: `主键`, visible: false },-->
<!-- { key: 1, label: `备件库存主表ID`, visible: true },-->
<!-- { key: 2, label: `盘点名称`, visible: true },-->
<!-- { key: 3, label: `盘点数量`, visible: true },-->
<!-- { key: 4, label: `盘点日期`, visible: true },-->
<!-- ],-->
<!-- upload: {-->
<!-- title: "导入备件盘点记录明细",-->
<!-- open: false,-->
<!-- url: "",-->
<!-- updateSupport: false,-->
<!-- isUploading: false,-->
<!-- headers: {}-->
<!-- }-->
<!-- };-->
<!-- },-->
<!-- created() {-->
<!-- this.getList();-->
<!-- this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/sparePartsInventoryCheck/importData";-->
<!-- this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };-->
<!-- },-->
<!-- methods: {-->
<!-- /** 查询备件盘点记录明细列表 */-->
<!-- getList() {-->
<!-- this.loading = true;-->
<!-- listSparePartsInventoryCheck(this.queryParams).then(response => {-->
<!-- this.sparePartsInventoryCheckList = response.rows;-->
<!-- this.total = response.total;-->
<!-- this.loading = false;-->
<!-- });-->
<!-- },-->
<!-- // -->
<!-- cancel() {-->
<!-- this.open = false;-->
<!-- this.reset();-->
<!-- },-->
<!-- // -->
<!-- reset() {-->
<!-- this.form = {-->
<!-- id: null,-->
<!-- inventoryObjid: null,-->
<!-- checkName: null,-->
<!-- checkQuantity: null,-->
<!-- checkDate: null-->
<!-- };-->
<!-- this.resetForm("form");-->
<!-- },-->
<!-- /** 搜索按钮操作 */-->
<!-- handleQuery() {-->
<!-- this.queryParams.pageNum = 1;-->
<!-- this.getList();-->
<!-- },-->
<!-- /** 重置按钮操作 */-->
<!-- resetQuery() {-->
<!-- this.resetForm("queryForm");-->
<!-- this.handleQuery();-->
<!-- },-->
<!-- // -->
<!-- handleSelectionChange(selection) {-->
<!-- this.ids = selection.map(item => item.id)-->
<!-- this.single = selection.length!==1-->
<!-- this.multiple = !selection.length-->
<!-- },-->
<!-- /** 新增按钮操作 */-->
<!-- handleAdd() {-->
<!-- this.reset();-->
<!-- this.open = true;-->
<!-- this.title = "添加 备件盘点记录明细";-->
<!-- },-->
<!-- /** 修改 按钮操作 */-->
<!-- handleUpdate(row) {-->
<!-- this.reset();-->
<!-- const id = row.id || this.ids-->
<!-- getSparePartsInventoryCheck(id).then(response => {-->
<!-- this.form = response.data;-->
<!-- this.open = true;-->
<!-- this.title = "修改 备件盘点记录明细";-->
<!-- });-->
<!-- },-->
<!-- /** 提交按钮 */-->
<!-- submitForm() {-->
<!-- this.$refs["form"].validate(valid => {-->
<!-- if (valid) {-->
<!-- if (this.form.id != null) {-->
<!-- updateSparePartsInventoryCheck(this.form).then(response => {-->
<!-- this.$modal.msgSuccess("修改成功");-->
<!-- this.open = false;-->
<!-- this.getList();-->
<!-- });-->
<!-- } else {-->
<!-- addSparePartsInventoryCheck(this.form).then(response => {-->
<!-- this.$modal.msgSuccess("新增成功");-->
<!-- this.open = false;-->
<!-- this.getList();-->
<!-- });-->
<!-- }-->
<!-- }-->
<!-- });-->
<!-- },-->
<!-- /** 删除按钮操作 */-->
<!-- handleDelete(row) {-->
<!-- const ids = row.id || this.ids;-->
<!-- this.$modal.confirm('是否确认删除备件盘点记录明细编号为"' + ids + '"的数据项?').then(function() {-->
<!-- return delSparePartsInventoryCheck(ids);-->
<!-- }).then(() => {-->
<!-- this.getList();-->
<!-- this.$modal.msgSuccess("删除成功");-->
<!-- }).catch(() => {});-->
<!-- },-->
<!-- /** 导出按钮操作 */-->
<!-- handleExport() {-->
<!-- this.download('ems/info/sparePartsInventoryCheck/export', {-->
<!-- ...this.queryParams-->
<!-- }, `sparePartsInventoryCheck_${new Date().getTime()}.xlsx`)-->
<!-- },-->
<!-- /** 导入按钮操作 */-->
<!-- handleImport() {-->
<!-- this.upload.title = "导入备件盘点记录明细";-->
<!-- this.upload.open = true;-->
<!-- },-->
<!-- /** 下载模板操作 */-->
<!-- importTemplate() {-->
<!-- this.download('ems/info/sparePartsInventoryCheck/importTemplate', {-->
<!-- }, `备件盘点记录明细数据模板_${new Date().getTime()}.xlsx`)-->
<!-- },-->
<!-- // -->
<!-- handleFileUploadProgress(event, file, fileList) {-->
<!-- this.upload.isUploading = true;-->
<!-- },-->
<!-- // -->
<!-- handleFileSuccess(response, file, fileList) {-->
<!-- this.upload.open = false;-->
<!-- this.upload.isUploading = false;-->
<!-- this.$refs.upload.clearFiles();-->
<!-- this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });-->
<!-- this.getList();-->
<!-- },-->
<!-- // -->
<!-- submitFileForm() {-->
<!-- this.$refs.upload.submit();-->
<!-- }-->
<!-- }-->
<!-- };-->
<!--</script>-->

@ -127,9 +127,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sparePartsRegistrationList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="sparePartsRegistrationList" @selection-change="handleSelectionChange" @row-contextmenu="handleRowContextMenu" class="context-menu-table">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="objid" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible">
</el-table-column>
<el-table-column label="备件名称" align="center" prop="sparePartsName" v-if="columns[2].visible">
@ -145,8 +149,14 @@
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[7].visible">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -179,7 +189,7 @@
@pagination="getList"
/>
<!-- 添加或修改动力能源部行输科废旧备件登记对话框 -->
<!-- 添加 或修改 动力能源部行输科废旧备件登记对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date">
@ -237,12 +247,108 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="备件登记详情"
:visible.sync="detailDrawer"
direction="rtl"
size="50%"
:before-close="() => detailDrawer = false"
>
<div style="padding: 20px;">
<el-descriptions :column="1" border>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">日期</span>
</template>
{{ currentRecord.date || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备件名称</span>
</template>
{{ currentRecord.sparePartsName || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备件型号</span>
</template>
{{ currentRecord.sparePartModel || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">废存数量</span>
</template>
{{ currentRecord.wasteQuantity || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">存放位置</span>
</template>
{{ currentRecord.storageLocation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">登记人</span>
</template>
{{ currentRecord.registrar || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">库管确认</span>
</template>
{{ currentRecord.warehouseConfirmation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备注</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.remarks || '-' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<div
v-show="contextMenu.visible"
:style="{
position: 'fixed',
top: contextMenu.top + 'px',
left: contextMenu.left + 'px',
zIndex: 9999
}"
class="context-menu"
@click.stop
>
<div class="context-menu-item" @click="contextMenuViewDetail">
<i class="el-icon-view"></i> 查看详情
</div>
<div
class="context-menu-item"
@click="contextMenuEdit"
v-if="checkPermi(['ems/info:sparePartsRegistration:edit'])"
>
<i class="el-icon-edit"></i> 修改
</div>
<div
class="context-menu-item"
@click="contextMenuDelete"
v-if="checkPermi(['ems/info:sparePartsRegistration:remove'])"
>
<i class="el-icon-delete"></i> 删除
</div>
</div>
</div>
</template>
<script>
import { listSparePartsRegistration, getSparePartsRegistration, delSparePartsRegistration, addSparePartsRegistration, updateSparePartsRegistration } from "@/api/ems/info/sparePartsRegistration";
import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default {
name: "SparePartsRegistration",
@ -290,7 +396,7 @@
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true },
{ key: 2, label: `备件名称`, visible: true },
{ key: 3, label: `废存数量`, visible: true },
@ -314,12 +420,28 @@
headers: { Authorization: "Bearer " + getToken() },
//
url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsRegistration/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
}
};
},
created() {
this.getList();
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询动力能源部行输科废旧备件登记列表 */
getList() {
@ -374,16 +496,16 @@
this.form.sparePartModel = this.copiedData.sparePartModel;
}
this.open = true;
this.title = "添加动力能源部行输科废旧备件登记";
this.title = "添加 动力能源部行输科废旧备件登记";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const objid = row.objid || this.ids
getSparePartsRegistration(objid).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改动力能源部行输科废旧备件登记";
this.title = "修改 动力能源部行输科废旧备件登记";
});
},
/** 提交按钮 */
@ -455,7 +577,108 @@
sparePartModel: row.sparePartModel
};
this.$modal.msgSuccess("已复制备件名称和型号");
},
//
handleViewDetail(row) {
this.currentRecord = { ...row };
this.detailDrawer = true;
},
//
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenu.row = row;
this.contextMenu.visible = true;
//
const x = event.clientX;
const y = event.clientY;
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
this.contextMenu.left = (x + menuWidth > windowWidth) ? x - menuWidth : x;
this.contextMenu.top = (y + menuHeight > windowHeight) ? y - menuHeight : y;
},
//
hideContextMenu() {
this.contextMenu.visible = false;
},
// -
contextMenuViewDetail() {
if (this.contextMenu.row) {
this.handleViewDetail(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuEdit() {
if (this.contextMenu.row && this.checkPermi(['ems/info:sparePartsRegistration:edit'])) {
this.handleUpdate(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuDelete() {
if (this.contextMenu.row && this.checkPermi(['ems/info:sparePartsRegistration:remove'])) {
this.handleDelete(this.contextMenu.row);
}
this.hideContextMenu();
},
//
checkPermi(permissions) {
return checkPermi(permissions);
}
}
};
</script>
<style scoped>
.context-menu-table tbody tr:hover {
cursor: context-menu;
}
.context-menu {
background: white;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 4px 0;
min-width: 120px;
}
.context-menu-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
}
.context-menu-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu-item i {
margin-right: 8px;
font-size: 14px;
}
.el-descriptions__label {
width: 90px !important;
}
@media (max-width: 768px) {
.el-drawer {
width: 90% !important;
}
}
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -151,9 +151,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="sparePartsUsageRecordList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="sparePartsUsageRecordList" @selection-change="handleSelectionChange" @row-contextmenu="handleRowContextMenu" class="context-menu-table">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible"/>
<el-table-column label="备件名称" align="center" prop="sparePartName" v-if="columns[2].visible"/>
<el-table-column label="备件型号" align="center" prop="sparePartModel" v-if="columns[3].visible"/>
@ -165,8 +169,15 @@
<el-table-column label="库管确认人" align="center" prop="warehouseManagerConfirmation" v-if="columns[9].visible"/>
<el-table-column label="库存表状态" align="center" prop="inventoryStatus" v-if="columns[10].visible"/>
<el-table-column label="部门仓库" align="center" prop="departmentWarehouse" v-if="columns[11].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[12].visible" show-overflow-tooltip/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -199,7 +210,7 @@
@pagination="getList"
/>
<!-- 添加或修改动力能源部行输科备件领用更换记录对话框 -->
<!-- 添加 或修改 动力能源部行输科备件领用更换记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date">
@ -241,6 +252,9 @@
<el-form-item label="部门仓库" prop="departmentWarehouse">
<el-input v-model="form.departmentWarehouse" placeholder="请输入部门仓库" />
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
@ -254,11 +268,11 @@
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
</div>
<!-- <div class="el-upload__tip" slot="tip">-->
<!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据-->
<!-- </div>-->
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"></el-link>
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"></el-link>-->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -266,12 +280,132 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="备件使用记录详情"
:visible.sync="detailDrawer"
direction="rtl"
size="50%"
:before-close="() => detailDrawer = false"
>
<div style="padding: 20px;">
<el-descriptions :column="1" border>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">日期</span>
</template>
{{ currentRecord.date || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备件名称</span>
</template>
{{ currentRecord.sparePartName || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备件型号</span>
</template>
{{ currentRecord.sparePartModel || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">使用数量</span>
</template>
{{ currentRecord.quantityUsed || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">剩余数量</span>
</template>
{{ currentRecord.remainingQuantity || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">领用库房</span>
</template>
{{ currentRecord.issuingWarehouse || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">更换位置</span>
</template>
{{ currentRecord.replacementLocation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">领用人</span>
</template>
{{ currentRecord.personReceived || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">库管确认人</span>
</template>
{{ currentRecord.warehouseManagerConfirmation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">库存表状态</span>
</template>
{{ currentRecord.inventoryStatus || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">部门仓库</span>
</template>
{{ currentRecord.departmentWarehouse || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备注</span>
</template>
<div style="max-height: 100px; overflow-y: auto; word-wrap: break-word;">
{{ currentRecord.remarks || '-' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<div
v-show="contextMenu.visible"
:style="{
position: 'fixed',
top: contextMenu.top + 'px',
left: contextMenu.left + 'px',
zIndex: 9999
}"
class="context-menu"
@click.stop
>
<div class="context-menu-item" @click="contextMenuViewDetail">
<i class="el-icon-view"></i> 查看详情
</div>
<!-- <div-->
<!-- class="context-menu-item"-->
<!-- @click="contextMenuEdit"-->
<!-- v-if="checkPermi(['ems/info:sparePartsUsageRecord:edit'])"-->
<!-- >-->
<!-- <i class="el-icon-edit"></i> 修改-->
<!-- </div>-->
<!-- <div-->
<!-- class="context-menu-item"-->
<!-- @click="contextMenuDelete"-->
<!-- v-if="checkPermi(['ems/info:sparePartsUsageRecord:remove'])"-->
<!-- >-->
<!-- <i class="el-icon-delete"></i> 删除-->
<!-- </div>-->
</div>
</div>
</template>
<script>
import { listSparePartsUsageRecord, getSparePartsUsageRecord, delSparePartsUsageRecord, addSparePartsUsageRecord, updateSparePartsUsageRecord } from "@/api/ems/info/sparePartsUsageRecord";
import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default {
name: "SparePartsUsageRecord",
@ -311,7 +445,8 @@
personReceived: null,
warehouseManagerConfirmation: null,
inventoryStatus: null,
departmentWarehouse: null
departmentWarehouse: null,
remarks: null
},
//
form: {},
@ -322,7 +457,7 @@
],
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true },
{ key: 2, label: `备件名称`, visible: true },
{ key: 3, label: `备件型号`, visible: true },
@ -334,6 +469,7 @@
{ key: 9, label: `库管确认人`, visible: true },
{ key: 10, label: `库存表状态`, visible: true },
{ key: 11, label: `部门仓库`, visible: true },
{ key: 12, label: `备注`, visible: true },
],
//
upload: {
@ -349,12 +485,28 @@
headers: { Authorization: "Bearer " + getToken() },
//
url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsUsageRecord/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
}
};
},
created() {
this.getList();
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询动力能源部行输科备件领用更换记录列表 */
getList() {
@ -384,7 +536,8 @@
personReceived: null,
warehouseManagerConfirmation: null,
inventoryStatus: null,
departmentWarehouse: null
departmentWarehouse: null,
remarks: null
};
this.resetForm("form");
},
@ -413,16 +566,16 @@
this.form.sparePartModel = this.copiedData.sparePartModel;
}
this.open = true;
this.title = "添加动力能源部行输科备件领用更换记录";
this.title = "添加 动力能源部行输科备件领用更换记录";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSparePartsUsageRecord(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改动力能源部行输科备件领用更换记录";
this.title = "修改 动力能源部行输科备件领用更换记录";
});
},
/** 提交按钮 */
@ -494,7 +647,108 @@
sparePartModel: row.sparePartModel
};
this.$modal.msgSuccess("已复制备件名称和型号");
},
//
handleViewDetail(row) {
this.currentRecord = { ...row };
this.detailDrawer = true;
},
//
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenu.row = row;
this.contextMenu.visible = true;
//
const x = event.clientX;
const y = event.clientY;
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
this.contextMenu.left = (x + menuWidth > windowWidth) ? x - menuWidth : x;
this.contextMenu.top = (y + menuHeight > windowHeight) ? y - menuHeight : y;
},
//
hideContextMenu() {
this.contextMenu.visible = false;
},
// -
contextMenuViewDetail() {
if (this.contextMenu.row) {
this.handleViewDetail(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuEdit() {
if (this.contextMenu.row && this.checkPermi(['ems/info:sparePartsUsageRecord:edit'])) {
this.handleUpdate(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuDelete() {
if (this.contextMenu.row && this.checkPermi(['ems/info:sparePartsUsageRecord:remove'])) {
this.handleDelete(this.contextMenu.row);
}
this.hideContextMenu();
},
//
checkPermi(permissions) {
return checkPermi(permissions);
}
}
};
</script>
<style scoped>
.context-menu-table tbody tr:hover {
cursor: context-menu;
}
.context-menu {
background: white;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 4px 0;
min-width: 120px;
}
.context-menu-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
}
.context-menu-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu-item i {
margin-right: 8px;
font-size: 14px;
}
.el-descriptions__label {
width: 90px !important;
}
@media (max-width: 768px) {
.el-drawer {
width: 90% !important;
}
}
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -159,9 +159,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="supervisionChecklistList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="supervisionChecklistList" @selection-change="handleSelectionChange" @row-contextmenu="handleRowContextMenu" class="context-menu-table">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible"/>
<el-table-column label="作业类别" align="center" prop="jobCategory" v-if="columns[2].visible"/>
<el-table-column label="作业单位" align="center" prop="jobUnit" v-if="columns[3].visible"/>
@ -178,8 +182,14 @@
<el-table-column label="工单变更内容" align="center" prop="workOrderChangeContent" v-if="columns[14].visible"/>
<el-table-column label="本工单是否闭环" align="center" prop="isWorkOrderClosedLoop" v-if="columns[15].visible"/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[16].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -206,7 +216,7 @@
@pagination="getList"
/>
<!-- 添加或修改动力能源部监督检查清单对话框 -->
<!-- 添加 或修改 动力能源部监督检查清单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date">
@ -299,11 +309,161 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="监督检查清单详情"
:visible.sync="detailDrawer"
direction="rtl"
size="60%"
:before-close="() => detailDrawer = false"
>
<div style="padding: 20px;">
<el-descriptions :column="1" border>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">日期</span>
</template>
{{ currentRecord.date || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">作业类别</span>
</template>
{{ currentRecord.jobCategory || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">作业单位</span>
</template>
{{ currentRecord.jobUnit || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">作业名称</span>
</template>
{{ currentRecord.jobName || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">作业风险</span>
</template>
{{ currentRecord.jobRisk || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">风险管控措施</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.riskControlMeasures || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">监督检查层级</span>
</template>
{{ currentRecord.supervisionLevel || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">监督检查落实情况</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.supervisionImplementation || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">作业科室</span>
</template>
{{ currentRecord.jobDepartment || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">监管人员</span>
</template>
{{ currentRecord.regulatoryPersonnel || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">检查人员</span>
</template>
{{ currentRecord.inspectionPersonnel || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">检查出的问题</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.problemsFound || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">外包单位责任人</span>
</template>
{{ currentRecord.outsourcingUnitResponsiblePerson || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">工单变更内容</span>
</template>
<div style="max-height: 150px; overflow-y: auto;" v-html="currentRecord.workOrderChangeContent || '-'"></div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">本工单是否闭环</span>
</template>
{{ currentRecord.isWorkOrderClosedLoop || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备注</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.remarks || '-' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<div
v-show="contextMenu.visible"
:style="{
position: 'fixed',
top: contextMenu.top + 'px',
left: contextMenu.left + 'px',
zIndex: 9999
}"
class="context-menu"
@click.stop
>
<div class="context-menu-item" @click="contextMenuViewDetail">
<i class="el-icon-view"></i> 查看详情
</div>
<div
class="context-menu-item"
@click="contextMenuEdit"
v-if="checkPermi(['ems/info:supervisionChecklist:edit'])"
>
<i class="el-icon-edit"></i> 修改
</div>
<div
class="context-menu-item"
@click="contextMenuDelete"
v-if="checkPermi(['ems/info:supervisionChecklist:remove'])"
>
<i class="el-icon-delete"></i> 删除
</div>
</div>
</div>
</template>
<script>
import { listSupervisionChecklist, getSupervisionChecklist, delSupervisionChecklist, addSupervisionChecklist, updateSupervisionChecklist } from "@/api/ems/info/supervisionChecklist";
import { checkPermi } from "@/utils/permission";
export default {
name: "SupervisionChecklist",
@ -357,7 +517,7 @@
],
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true },
{ key: 2, label: `作业类别`, visible: true },
{ key: 3, label: `作业单位`, visible: true },
@ -384,6 +544,16 @@
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
}
};
},
@ -391,6 +561,12 @@
this.getList();
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/supervisionChecklist/importData";
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询动力能源部监督检查清单列表 */
getList() {
@ -449,16 +625,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加动力能源部监督检查清单";
this.title = "添加 动力能源部监督检查清单";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSupervisionChecklist(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改动力能源部监督检查清单";
this.title = "修改 动力能源部监督检查清单";
});
},
/** 提交按钮 */
@ -522,7 +698,108 @@
//
submitFileForm() {
this.$refs.upload.submit();
},
//
handleViewDetail(row) {
this.currentRecord = { ...row };
this.detailDrawer = true;
},
//
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenu.row = row;
this.contextMenu.visible = true;
//
const x = event.clientX;
const y = event.clientY;
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
this.contextMenu.left = (x + menuWidth > windowWidth) ? x - menuWidth : x;
this.contextMenu.top = (y + menuHeight > windowHeight) ? y - menuHeight : y;
},
//
hideContextMenu() {
this.contextMenu.visible = false;
},
// -
contextMenuViewDetail() {
if (this.contextMenu.row) {
this.handleViewDetail(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuEdit() {
if (this.contextMenu.row && this.checkPermi(['ems/info:supervisionChecklist:edit'])) {
this.handleUpdate(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuDelete() {
if (this.contextMenu.row && this.checkPermi(['ems/info:supervisionChecklist:remove'])) {
this.handleDelete(this.contextMenu.row);
}
this.hideContextMenu();
},
//
checkPermi(permissions) {
return checkPermi(permissions);
}
}
};
</script>
<style scoped>
.context-menu-table tbody tr:hover {
cursor: context-menu;
}
.context-menu {
background: white;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 4px 0;
min-width: 120px;
}
.context-menu-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
}
.context-menu-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu-item i {
margin-right: 8px;
font-size: 14px;
}
.el-descriptions__label {
width: 90px !important;
}
@media (max-width: 768px) {
.el-drawer {
width: 90% !important;
}
}
@media print {
.context-menu {
display: none !important;
}
}
</style>

@ -215,9 +215,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="upsBatteryLifecycleList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="upsBatteryLifecycleList" @selection-change="handleSelectionChange" @row-contextmenu="handleRowContextMenu" class="context-menu-table">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="序号" align="center" width="60" v-if="columns[0].visible">
<template slot-scope="scope">
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible"/>
<el-table-column label="UPS安装柜体名称" align="center" prop="upsInstallationCabinetName" v-if="columns[2].visible"/>
<el-table-column label="参照位置" align="center" prop="referenceLocation" v-if="columns[3].visible"/>
@ -238,8 +242,14 @@
<el-table-column label="第10次" align="center" prop="replacement10" v-if="columns[18].visible"/>
<el-table-column label="第11次" align="center" prop="replacement11" v-if="columns[19].visible"/>
<el-table-column label="第12次" align="center" prop="replacement12" v-if="columns[20].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -266,7 +276,7 @@
@pagination="getList"
/>
<!-- 添加或修改行李系统UPS电池生命周期对话框 -->
<!-- 添加 或修改 行李系统UPS电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type">
@ -414,11 +424,11 @@
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
</div>
</div> -->
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"></el-link>
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"></el-link> -->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -426,12 +436,190 @@
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="UPS电池生命周期详情"
:visible.sync="detailDrawer"
direction="rtl"
size="60%"
:before-close="() => detailDrawer = false"
>
<div style="padding: 20px;">
<el-descriptions :column="1" border>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">类型</span>
</template>
{{ currentRecord.type || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">UPS安装柜体名称</span>
</template>
{{ currentRecord.upsInstallationCabinetName || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">参照位置</span>
</template>
{{ currentRecord.referenceLocation || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">位置描述</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.locationDescription || '-' }}
</div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">现UPS来源</span>
</template>
{{ currentRecord.currentUps || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">取电</span>
</template>
{{ currentRecord.powerSource || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">涉及区域</span>
</template>
{{ currentRecord.affectedArea || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">备注</span>
</template>
<div style="max-height: 100px; overflow-y: auto;">
{{ currentRecord.remarks || '-' }}
</div>
</el-descriptions-item>
<!-- 更换记录 -->
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block; color: #409eff;">更换记录</span>
</template>
<span style="color: #409eff;">以下为12次更换记录</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第1次</span>
</template>
{{ currentRecord.replacement1 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第2次</span>
</template>
{{ currentRecord.replacement2 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第3次</span>
</template>
{{ currentRecord.replacement3 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第4次</span>
</template>
{{ currentRecord.replacement4 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第5次</span>
</template>
{{ currentRecord.replacement5 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第6次</span>
</template>
{{ currentRecord.replacement6 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第7次</span>
</template>
{{ currentRecord.replacement7 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第8次</span>
</template>
{{ currentRecord.replacement8 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第9次</span>
</template>
{{ currentRecord.replacement9 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第10次</span>
</template>
{{ currentRecord.replacement10 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第11次</span>
</template>
{{ currentRecord.replacement11 || '-' }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<span style="font-weight: bold; width: 90px; display: inline-block;">第12次</span>
</template>
{{ currentRecord.replacement12 || '-' }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<div
v-show="contextMenu.visible"
:style="{
position: 'fixed',
top: contextMenu.top + 'px',
left: contextMenu.left + 'px',
zIndex: 9999
}"
class="context-menu"
@click.stop
>
<div class="context-menu-item" @click="contextMenuViewDetail">
<i class="el-icon-view"></i> 查看详情
</div>
<div
class="context-menu-item"
@click="contextMenuEdit"
v-if="checkPermi(['ems/info:upsBatteryLifecycle:edit'])"
>
<i class="el-icon-edit"></i> 修改
</div>
<div
class="context-menu-item"
@click="contextMenuDelete"
v-if="checkPermi(['ems/info:upsBatteryLifecycle:remove'])"
>
<i class="el-icon-delete"></i> 删除
</div>
</div>
</div>
</template>
<script>
import { listUpsBatteryLifecycle, getUpsBatteryLifecycle, delUpsBatteryLifecycle, addUpsBatteryLifecycle, updateUpsBatteryLifecycle } from "@/api/ems/info/upsBatteryLifecycle";
import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default {
name: "UpsBatteryLifecycle",
@ -492,7 +680,7 @@
]
},
columns: [
{ key: 0, label: `主键自增ID`, visible: false },
{ key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true },
{ key: 2, label: `UPS安装柜体名称`, visible: true },
{ key: 3, label: `参照位置`, visible: true },
@ -528,12 +716,28 @@
headers: { Authorization: "Bearer " + getToken() },
//
url: process.env.VUE_APP_BASE_API + "/ems/info/upsBatteryLifecycle/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
}
};
},
created() {
this.getList();
},
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询行李系统UPS电池生命周期列表 */
getList() {
@ -596,16 +800,16 @@
handleAdd() {
this.reset();
this.open = true;
this.title = "添加行李系统UPS电池生命周期";
this.title = "添加 行李系统UPS电池生命周期";
},
/** 修改按钮操作 */
/** 修改 按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getUpsBatteryLifecycle(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改行李系统UPS电池生命周期";
this.title = "修改 行李系统UPS电池生命周期";
});
},
/** 提交按钮 */
@ -669,7 +873,108 @@
//
submitFileForm() {
this.$refs.upload.submit();
},
//
handleViewDetail(row) {
this.currentRecord = { ...row };
this.detailDrawer = true;
},
//
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenu.row = row;
this.contextMenu.visible = true;
//
const x = event.clientX;
const y = event.clientY;
const menuWidth = 120;
const menuHeight = 120;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
this.contextMenu.left = (x + menuWidth > windowWidth) ? x - menuWidth : x;
this.contextMenu.top = (y + menuHeight > windowHeight) ? y - menuHeight : y;
},
//
hideContextMenu() {
this.contextMenu.visible = false;
},
// -
contextMenuViewDetail() {
if (this.contextMenu.row) {
this.handleViewDetail(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuEdit() {
if (this.contextMenu.row && this.checkPermi(['ems/info:upsBatteryLifecycle:edit'])) {
this.handleUpdate(this.contextMenu.row);
}
this.hideContextMenu();
},
// -
contextMenuDelete() {
if (this.contextMenu.row && this.checkPermi(['ems/info:upsBatteryLifecycle:remove'])) {
this.handleDelete(this.contextMenu.row);
}
this.hideContextMenu();
},
//
checkPermi(permissions) {
return checkPermi(permissions);
}
}
};
</script>
<style scoped>
.context-menu-table tbody tr:hover {
cursor: context-menu;
}
.context-menu {
background: white;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 4px 0;
min-width: 120px;
}
.context-menu-item {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
}
.context-menu-item:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu-item i {
margin-right: 8px;
font-size: 14px;
}
.el-descriptions__label {
width: 90px !important;
}
@media (max-width: 768px) {
.el-drawer {
width: 90% !important;
}
}
@media print {
.context-menu {
display: none !important;
}
}
</style>

Loading…
Cancel
Save