refactor(ems): 优化故障记录模块功能和界面

- 添加备注字段并调整列名称
- 新增详情查看功能和右击菜单
- 优化表格样式和布局
- 添加数据导入功能- 调整 WebSocket URL
boardTest
zch 10 months ago
parent 6a22860b7d
commit feaa5937d6

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

@ -17,7 +17,7 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="当日值班长" prop="dailyDutySupervisor"> <el-form-item label="科室值班" prop="dailyDutySupervisor">
<el-input <el-input
v-model="queryParams.dailyDutySupervisor" v-model="queryParams.dailyDutySupervisor"
placeholder="请输入当日值班长" placeholder="请输入当日值班长"
@ -25,7 +25,7 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="天达当日值班长" prop="tendaDailyDutySupervisor"> <el-form-item label="外包值班" prop="tendaDailyDutySupervisor">
<el-input <el-input
v-model="queryParams.tendaDailyDutySupervisor" v-model="queryParams.tendaDailyDutySupervisor"
placeholder="请输入天达当日值班长" placeholder="请输入天达当日值班长"
@ -164,17 +164,22 @@
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
> >
<el-table-column type="selection" width="55" align="center" /> <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="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="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="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="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="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="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="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="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="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="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"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -209,7 +214,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改日常故障记录对话框 --> <!-- 添加 或修改 日常故障记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date"> <el-form-item label="日期" prop="date">
@ -224,10 +229,10 @@
<el-form-item label="位置" prop="location"> <el-form-item label="位置" prop="location">
<el-input v-model="form.location" placeholder="请输入位置" /> <el-input v-model="form.location" placeholder="请输入位置" />
</el-form-item> </el-form-item>
<el-form-item label="当日值班长" prop="dailyDutySupervisor"> <el-form-item label="科室值班" prop="dailyDutySupervisor">
<el-input v-model="form.dailyDutySupervisor" placeholder="请输入当日值班长" /> <el-input v-model="form.dailyDutySupervisor" placeholder="请输入当日值班长" />
</el-form-item> </el-form-item>
<el-form-item label="天达当日值班长" prop="tendaDailyDutySupervisor"> <el-form-item label="外包值班" prop="tendaDailyDutySupervisor">
<el-input v-model="form.tendaDailyDutySupervisor" placeholder="请输入天达当日值班长" /> <el-input v-model="form.tendaDailyDutySupervisor" placeholder="请输入天达当日值班长" />
</el-form-item> </el-form-item>
<el-form-item label="故障情况" prop="faultSituation"> <el-form-item label="故障情况" prop="faultSituation">
@ -258,6 +263,9 @@
<el-form-item label="处置时长" prop="handlingDuration"> <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>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
@ -314,10 +322,10 @@
<el-descriptions-item label="位置"> <el-descriptions-item label="位置">
<span>{{ currentRecord.location || '暂无' }}</span> <span>{{ currentRecord.location || '暂无' }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="当日值班长"> <el-descriptions-item label="科室值班">
<span>{{ currentRecord.dailyDutySupervisor || '暂无' }}</span> <span>{{ currentRecord.dailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="天达当日值班长"> <el-descriptions-item label="外包值班">
<span>{{ currentRecord.tendaDailyDutySupervisor || '暂无' }}</span> <span>{{ currentRecord.tendaDailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="故障类型"> <el-descriptions-item label="故障类型">
@ -342,6 +350,11 @@
{{ currentRecord.handlingMeasures || '暂无' }} {{ currentRecord.handlingMeasures || '暂无' }}
</div> </div>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="备注">
<div class="detail-text-content">
{{ currentRecord.remarks || '暂无' }}
</div>
</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
</el-drawer> </el-drawer>
@ -357,14 +370,14 @@
<i class="el-icon-view"></i> <i class="el-icon-view"></i>
查看详情 查看详情
</li> </li>
<li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:edit'])"> <!-- <li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:edit'])">-->
<i class="el-icon-edit"></i> <!-- <i class="el-icon-edit"></i>-->
修改记录 <!-- 修改记录-->
</li> <!-- </li>-->
<li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:remove'])"> <!-- <li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:remove'])">-->
<i class="el-icon-delete"></i> <!-- <i class="el-icon-delete"></i>-->
删除记录 <!-- 删除记录-->
</li> <!-- </li>-->
</ul> </ul>
</div> </div>
</template> </template>
@ -408,7 +421,8 @@
faultType: null, faultType: null,
faultOccurrenceTime: null, faultOccurrenceTime: null,
handlingCompletionTime: null, handlingCompletionTime: null,
handlingDuration: null handlingDuration: null,
remarks: null
}, },
// //
form: {}, form: {},
@ -419,17 +433,18 @@
], ],
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true }, { key: 1, label: `日期`, visible: true },
{ key: 2, label: `位置`, visible: true }, { key: 2, label: `位置`, visible: true },
{ key: 3, label: `当日值班长`, visible: true }, { key: 3, label: `科室值班`, visible: true },
{ key: 4, label: `天达当日值班长`, visible: true }, { key: 4, label: `外包值班`, visible: true },
{ key: 5, label: `故障情况`, visible: true }, { key: 5, label: `故障情况`, visible: true },
{ key: 6, label: `处置措施`, visible: true }, { key: 6, label: `处置措施`, visible: true },
{ key: 7, label: `故障类型`, visible: true }, { key: 7, label: `故障类型`, visible: true },
{ key: 8, label: `故障发生时间`, visible: true }, { key: 8, label: `故障发生时间`, visible: true },
{ key: 9, label: `处置完毕时间`, visible: true }, { key: 9, label: `处置完毕时间`, visible: true },
{ key: 10, label: `处置时长`, visible: true }, { key: 10, label: `处置时长`, visible: true },
{ key: 11, label: `备注`, visible: true },
], ],
upload: { upload: {
title: "导入日常故障记录", title: "导入日常故障记录",
@ -459,7 +474,7 @@
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token }; this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
}, },
mounted() { mounted() {
// //
document.addEventListener('click', this.hideContextMenu); document.addEventListener('click', this.hideContextMenu);
}, },
beforeDestroy() { beforeDestroy() {
@ -494,7 +509,8 @@
faultType: null, faultType: null,
faultOccurrenceTime: null, faultOccurrenceTime: null,
handlingCompletionTime: null, handlingCompletionTime: null,
handlingDuration: null handlingDuration: null,
remarks: null
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -518,16 +534,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加日常故障记录"; this.title = "添加 日常故障记录";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getDailyFaultRecord(id).then(response => { getDailyFaultRecord(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改日常故障记录"; this.title = "修改 日常故障记录";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */

@ -111,21 +111,39 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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">
<el-table-column label="故障日期" align="center" prop="faultDate" v-if="columns[1].visible"/> <template slot-scope="scope">
<el-table-column label="故障位置" align="center" prop="faultLocation" v-if="columns[2].visible"/> {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
<el-table-column label="处理人员" align="center" prop="handlingPersonnel" v-if="columns[3].visible"/> </template>
<el-table-column label="故障现象及原因" align="center" prop="faultPhenomenonAndCause" v-if="columns[4].visible"/> </el-table-column>
<el-table-column label="故障情况处置" align="center" prop="faultSituationHandling" v-if="columns[5].visible"/> <el-table-column label="故障日期" align="center" prop="faultDate" v-if="columns[1].visible"/>
<el-table-column label="影响" align="center" prop="impact" v-if="columns[6].visible"/> <el-table-column label="故障位置" align="center" prop="faultLocation" v-if="columns[2].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[7].visible"/> <el-table-column label="处理人员" align="center" prop="handlingPersonnel" v-if="columns[3].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[8].visible"/> <el-table-column label="故障现象及原因" align="center" prop="faultPhenomenonAndCause" v-if="columns[4].visible" show-overflow-tooltip/>
<el-table-column label="维修更换的主要元器件" align="center" prop="mainComponentsRepaired" v-if="columns[9].visible"/> <el-table-column label="故障情况处置" align="center" prop="faultSituationHandling" v-if="columns[5].visible" show-overflow-tooltip/>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[10].visible"/> <el-table-column label="影响" align="center" prop="impact" v-if="columns[6].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"> <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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -152,7 +170,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改故障处置记录对话框 --> <!-- 添加 或修改 故障处置记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="故障日期" prop="faultDate"> <el-form-item label="故障日期" prop="faultDate">
@ -232,11 +250,88 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listFaultHandlingRecord, getFaultHandlingRecord, delFaultHandlingRecord, addFaultHandlingRecord, updateFaultHandlingRecord } from "@/api/ems/info/faultHandlingRecord"; import { listFaultHandlingRecord, getFaultHandlingRecord, delFaultHandlingRecord, addFaultHandlingRecord, updateFaultHandlingRecord } from "@/api/ems/info/faultHandlingRecord";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "FaultHandlingRecord", name: "FaultHandlingRecord",
@ -288,7 +383,7 @@
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `故障日期`, visible: true }, { key: 1, label: `故障日期`, visible: true },
{ key: 2, label: `故障位置`, visible: true }, { key: 2, label: `故障位置`, visible: true },
{ key: 3, label: `处理人员`, visible: true }, { key: 3, label: `处理人员`, visible: true },
@ -307,7 +402,19 @@
updateSupport: false, updateSupport: false,
isUploading: false, isUploading: false,
headers: {} headers: {}
} },
//
detailDrawer: false,
currentRecord: null,
//
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
}; };
}, },
created() { created() {
@ -315,6 +422,12 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/faultHandlingRecord/importData"; this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/faultHandlingRecord/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token }; this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询故障处置记录列表 */ /** 查询故障处置记录列表 */
getList() { getList() {
@ -367,16 +480,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加故障处置记录"; this.title = "添加 故障处置记录";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getFaultHandlingRecord(id).then(response => { getFaultHandlingRecord(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改故障处置记录"; this.title = "修改 故障处置记录";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -440,7 +553,170 @@
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); 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> </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> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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">
<el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible"/> <template slot-scope="scope">
<el-table-column label="安装柜体名称" align="center" prop="installationCabinetName" v-if="columns[2].visible"/> {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
<el-table-column label="位置描述" align="center" prop="locationDescription" v-if="columns[3].visible"/> </template>
<el-table-column label="来源" align="center" prop="source" v-if="columns[4].visible"/> </el-table-column>
<el-table-column label="取电" align="center" prop="powerSource" v-if="columns[5].visible"/> <el-table-column label="类型" align="center" prop="type" v-if="columns[1].visible"/>
<el-table-column label="图片" align="center" prop="imageAddress" width="100" v-if="columns[6].visible"> <el-table-column label="安装柜体名称" align="center" prop="installationCabinetName" v-if="columns[2].visible"/>
<template slot-scope="scope"> <el-table-column label="位置描述" align="center" prop="locationDescription" v-if="columns[3].visible" show-overflow-tooltip/>
<image-preview :src="scope.row.imageAddress" :width="50" :height="50"/> <el-table-column label="来源" align="center" prop="source" v-if="columns[4].visible"/>
</template> <el-table-column label="取电" align="center" prop="powerSource" v-if="columns[5].visible"/>
</el-table-column> <el-table-column label="图片" align="center" prop="imageAddress" width="100" v-if="columns[6].visible">
<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">
<template slot-scope="scope"> <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 <el-button
size="mini" size="mini"
type="text" type="text"
@ -261,7 +279,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改行李系统PLC缓冲电池生命周期对话框 --> <!-- 添加 或修改 行李系统PLC缓冲电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="type">
@ -429,11 +447,112 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listPlcBufferBatteryLifecycle, getPlcBufferBatteryLifecycle, delPlcBufferBatteryLifecycle, addPlcBufferBatteryLifecycle, updatePlcBufferBatteryLifecycle } from "@/api/ems/info/plcBufferBatteryLifecycle"; import { listPlcBufferBatteryLifecycle, getPlcBufferBatteryLifecycle, delPlcBufferBatteryLifecycle, addPlcBufferBatteryLifecycle, updatePlcBufferBatteryLifecycle } from "@/api/ems/info/plcBufferBatteryLifecycle";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "PlcBufferBatteryLifecycle", name: "PlcBufferBatteryLifecycle",
@ -493,7 +612,7 @@
], ],
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true }, { key: 1, label: `类型`, visible: true },
{ key: 2, label: `安装柜体名称`, visible: true }, { key: 2, label: `安装柜体名称`, visible: true },
{ key: 3, label: `位置描述`, visible: true }, { key: 3, label: `位置描述`, visible: true },
@ -521,7 +640,19 @@
updateSupport: false, updateSupport: false,
isUploading: false, isUploading: false,
headers: {} headers: {}
} },
//
detailDrawer: false,
currentRecord: null,
//
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
}; };
}, },
created() { created() {
@ -529,6 +660,12 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/plcBufferBatteryLifecycle/importData"; this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/plcBufferBatteryLifecycle/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token }; this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询行李系统PLC缓冲电池生命周期列表 */ /** 查询行李系统PLC缓冲电池生命周期列表 */
getList() { getList() {
@ -590,16 +727,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加行李系统PLC缓冲电池生命周期"; this.title = "添加 行李系统PLC缓冲电池生命周期";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const objid = row.objid || this.ids const objid = row.objid || this.ids
getPlcBufferBatteryLifecycle(objid).then(response => { getPlcBufferBatteryLifecycle(objid).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改行李系统PLC缓冲电池生命周期"; this.title = "修改 行李系统PLC缓冲电池生命周期";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -663,7 +800,170 @@
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); 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> </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> <template>
<div class="app-container"> <div class="app-container">
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="类型" prop="type"> <!-- <el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable> <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
<el-option <el-option
v-for="dict in dict.type.${dictType}" v-for="dict in dict.type.${dictType}"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="参照位置" prop="referenceLocation"> <el-form-item label="参照位置" prop="referenceLocation">
<el-input <el-input
v-model="queryParams.referenceLocation" v-model="queryParams.referenceLocation"
placeholder="请输入参照位置" placeholder="请输入参照位置"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="位置描述" prop="locationDescription"> <el-form-item label="位置描述" prop="locationDescription">
<el-input <el-input
v-model="queryParams.locationDescription" v-model="queryParams.locationDescription"
placeholder="请输入位置描述" placeholder="请输入位置描述"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="取电" prop="powerSource"> <el-form-item label="取电" prop="powerSource">
<el-input <el-input
v-model="queryParams.powerSource" v-model="queryParams.powerSource"
placeholder="请输入取电" placeholder="请输入取电"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="电池类型" prop="batteryType"> <el-form-item label="电池类型" prop="batteryType">
<el-select v-model="queryParams.batteryType" placeholder="请选择电池类型" clearable> <el-select v-model="queryParams.batteryType" placeholder="请选择电池类型" clearable>
<el-option <el-option
v-for="dict in dict.type.${dictType}" v-for="dict in dict.type.${dictType}"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="图片" prop="imageAddress"> <el-form-item label="图片" prop="imageAddress">
<el-input <el-input
v-model="queryParams.imageAddress" v-model="queryParams.imageAddress"
placeholder="请输入图片" placeholder="请输入图片"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第1次" prop="firstInstance"> <el-form-item label="第1次" prop="firstInstance">
<el-input <el-input
v-model="queryParams.firstInstance" v-model="queryParams.firstInstance"
placeholder="请输入第1次" placeholder="请输入第1次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第2次" prop="secondInstance"> <el-form-item label="第2次" prop="secondInstance">
<el-input <el-input
v-model="queryParams.secondInstance" v-model="queryParams.secondInstance"
placeholder="请输入第2次" placeholder="请输入第2次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第3次" prop="thirdInstance"> <el-form-item label="第3次" prop="thirdInstance">
<el-input <el-input
v-model="queryParams.thirdInstance" v-model="queryParams.thirdInstance"
placeholder="请输入第3次" placeholder="请输入第3次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第4次" prop="fourthInstance"> <el-form-item label="第4次" prop="fourthInstance">
<el-input <el-input
v-model="queryParams.fourthInstance" v-model="queryParams.fourthInstance"
placeholder="请输入第4次" placeholder="请输入第4次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第5次" prop="fifthInstance"> <el-form-item label="第5次" prop="fifthInstance">
<el-input <el-input
v-model="queryParams.fifthInstance" v-model="queryParams.fifthInstance"
placeholder="请输入第5次" placeholder="请输入第5次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第6次" prop="sixthInstance"> <el-form-item label="第6次" prop="sixthInstance">
<el-input <el-input
v-model="queryParams.sixthInstance" v-model="queryParams.sixthInstance"
placeholder="请输入第6次" placeholder="请输入第6次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第7次" prop="seventhInstance"> <el-form-item label="第7次" prop="seventhInstance">
<el-input <el-input
v-model="queryParams.seventhInstance" v-model="queryParams.seventhInstance"
placeholder="请输入第7次" placeholder="请输入第7次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第8次" prop="eighthInstance"> <el-form-item label="第8次" prop="eighthInstance">
<el-input <el-input
v-model="queryParams.eighthInstance" v-model="queryParams.eighthInstance"
placeholder="请输入第8次" placeholder="请输入第8次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第9次" prop="ninthInstance"> <el-form-item label="第9次" prop="ninthInstance">
<el-input <el-input
v-model="queryParams.ninthInstance" v-model="queryParams.ninthInstance"
placeholder="请输入第9次" placeholder="请输入第9次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第10次" prop="tenthInstance"> <el-form-item label="第10次" prop="tenthInstance">
<el-input <el-input
v-model="queryParams.tenthInstance" v-model="queryParams.tenthInstance"
placeholder="请输入第10次" placeholder="请输入第10次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第11次" prop="eleventhInstance"> <el-form-item label="第11次" prop="eleventhInstance">
<el-input <el-input
v-model="queryParams.eleventhInstance" v-model="queryParams.eleventhInstance"
placeholder="请输入第11次" placeholder="请输入第11次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="第12次" prop="twelfthInstance"> <el-form-item label="第12次" prop="twelfthInstance">
<el-input <el-input
v-model="queryParams.twelfthInstance" v-model="queryParams.twelfthInstance"
placeholder="请输入第12次" placeholder="请输入第12次"
clearable clearable
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button> <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-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> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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 label="类型" align="center" prop="type" v-if="columns[1].visible">
</el-table-column> </el-table-column>
<el-table-column label="参照位置" align="center" prop="referenceLocation" v-if="columns[2].visible"> <el-table-column label="参照位置" align="center" prop="referenceLocation" v-if="columns[2].visible">
@ -255,8 +259,14 @@
</el-table-column> </el-table-column>
<el-table-column label="第12次" align="center" prop="twelfthInstance" v-if="columns[19].visible"> <el-table-column label="第12次" align="center" prop="twelfthInstance" v-if="columns[19].visible">
</el-table-column> </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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -283,7 +293,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改行李系统安全门铅酸电池生命周期对话框 --> <!-- 添加 或修改 行李系统安全门铅酸电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="type">
@ -451,11 +461,176 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listSecurityDoorBatteryLifecycle, getSecurityDoorBatteryLifecycle, delSecurityDoorBatteryLifecycle, addSecurityDoorBatteryLifecycle, updateSecurityDoorBatteryLifecycle } from "@/api/ems/info/securityDoorBatteryLifecycle"; import { listSecurityDoorBatteryLifecycle, getSecurityDoorBatteryLifecycle, delSecurityDoorBatteryLifecycle, addSecurityDoorBatteryLifecycle, updateSecurityDoorBatteryLifecycle } from "@/api/ems/info/securityDoorBatteryLifecycle";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "SecurityDoorBatteryLifecycle", name: "SecurityDoorBatteryLifecycle",
@ -512,7 +687,7 @@
] ]
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true }, { key: 1, label: `类型`, visible: true },
{ key: 2, label: `参照位置`, visible: true }, { key: 2, label: `参照位置`, visible: true },
{ key: 3, label: `位置描述`, visible: true }, { key: 3, label: `位置描述`, visible: true },
@ -540,6 +715,16 @@
updateSupport: false, updateSupport: false,
isUploading: false, isUploading: false,
headers: {} 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.url = process.env.VUE_APP_BASE_API + "/ems/info/securityDoorBatteryLifecycle/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token }; this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询行李系统安全门铅酸电池生命周期列表 */ /** 查询行李系统安全门铅酸电池生命周期列表 */
getList() { getList() {
@ -609,16 +800,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加行李系统安全门铅酸电池生命周期"; this.title = "添加 行李系统安全门铅酸电池生命周期";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const objid = row.objid || this.ids const objid = row.objid || this.ids
getSecurityDoorBatteryLifecycle(objid).then(response => { getSecurityDoorBatteryLifecycle(objid).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改行李系统安全门铅酸电池生命周期"; this.title = "修改 行李系统安全门铅酸电池生命周期";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -682,7 +873,108 @@
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); 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> </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>

@ -156,7 +156,11 @@
:row-class-name="getRowClassName" :row-class-name="getRowClassName"
> >
<el-table-column type="selection" width="55" align="center" /> <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="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="purchaseMethod" v-if="columns[2].visible"/>
<el-table-column label="库存位置" align="center" prop="storageLocation" v-if="columns[3].visible"/> <el-table-column label="库存位置" align="center" prop="storageLocation" v-if="columns[3].visible"/>
@ -229,7 +233,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改备件库记录主对话框 --> <!-- 添加 或修改 备件库记录主对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row> <el-row>
@ -313,7 +317,7 @@
size="small" size="small"
icon="el-icon-plus" icon="el-icon-plus"
@click="addCheckRecord" @click="addCheckRecord"
>添加盘点记录</el-button> >添加 盘点记录</el-button>
</div> </div>
<el-table <el-table
:data="form.checkData" :data="form.checkData"
@ -503,7 +507,7 @@
return ''; return '';
}, },
/** 添加盘点记录 */ /** 添加 盘点记录 */
addCheckRecord() { addCheckRecord() {
if (!this.form.checkData) { if (!this.form.checkData) {
this.form.checkData = []; this.form.checkData = [];
@ -562,9 +566,9 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加备件库记录主"; this.title = "添加 备件库记录主";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const objid = row.objid || this.ids const objid = row.objid || this.ids
@ -581,7 +585,7 @@
this.form.checkData = []; this.form.checkData = [];
} }
this.open = true; this.open = true;
this.title = "修改备件库记录主"; this.title = "修改 备件库记录主";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -681,7 +685,7 @@
message: `正在显示 ${this.lowStockCount} 项库存不足的记录`, message: `正在显示 ${this.lowStockCount} 项库存不足的记录`,
type: 'warning' type: 'warning'
}); });
// //
// //
}, },

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

@ -127,9 +127,13 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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 label="日期" align="center" prop="date" v-if="columns[1].visible">
</el-table-column> </el-table-column>
<el-table-column label="备件名称" align="center" prop="sparePartsName" v-if="columns[2].visible"> <el-table-column label="备件名称" align="center" prop="sparePartsName" v-if="columns[2].visible">
@ -145,8 +149,14 @@
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="remarks" v-if="columns[7].visible"> <el-table-column label="备注" align="center" prop="remarks" v-if="columns[7].visible">
</el-table-column> </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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -179,7 +189,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改动力能源部行输科废旧备件登记对话框 --> <!-- 添加 或修改 动力能源部行输科废旧备件登记对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date"> <el-form-item label="日期" prop="date">
@ -237,12 +247,108 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listSparePartsRegistration, getSparePartsRegistration, delSparePartsRegistration, addSparePartsRegistration, updateSparePartsRegistration } from "@/api/ems/info/sparePartsRegistration"; import { listSparePartsRegistration, getSparePartsRegistration, delSparePartsRegistration, addSparePartsRegistration, updateSparePartsRegistration } from "@/api/ems/info/sparePartsRegistration";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "SparePartsRegistration", name: "SparePartsRegistration",
@ -290,7 +396,7 @@
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true }, { key: 1, label: `日期`, visible: true },
{ key: 2, label: `备件名称`, visible: true }, { key: 2, label: `备件名称`, visible: true },
{ key: 3, label: `废存数量`, visible: true }, { key: 3, label: `废存数量`, visible: true },
@ -314,12 +420,28 @@
headers: { Authorization: "Bearer " + getToken() }, headers: { Authorization: "Bearer " + getToken() },
// //
url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsRegistration/importData" url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsRegistration/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
} }
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询动力能源部行输科废旧备件登记列表 */ /** 查询动力能源部行输科废旧备件登记列表 */
getList() { getList() {
@ -374,16 +496,16 @@
this.form.sparePartModel = this.copiedData.sparePartModel; this.form.sparePartModel = this.copiedData.sparePartModel;
} }
this.open = true; this.open = true;
this.title = "添加动力能源部行输科废旧备件登记"; this.title = "添加 动力能源部行输科废旧备件登记";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const objid = row.objid || this.ids const objid = row.objid || this.ids
getSparePartsRegistration(objid).then(response => { getSparePartsRegistration(objid).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改动力能源部行输科废旧备件登记"; this.title = "修改 动力能源部行输科废旧备件登记";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -455,7 +577,108 @@
sparePartModel: row.sparePartModel sparePartModel: row.sparePartModel
}; };
this.$modal.msgSuccess("已复制备件名称和型号"); 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> </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> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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="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="sparePartName" v-if="columns[2].visible"/>
<el-table-column label="备件型号" align="center" prop="sparePartModel" v-if="columns[3].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="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="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" 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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -199,7 +210,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改动力能源部行输科备件领用更换记录对话框 --> <!-- 添加 或修改 动力能源部行输科备件领用更换记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date"> <el-form-item label="日期" prop="date">
@ -241,6 +252,9 @@
<el-form-item label="部门仓库" prop="departmentWarehouse"> <el-form-item label="部门仓库" prop="departmentWarehouse">
<el-input v-model="form.departmentWarehouse" placeholder="请输入部门仓库" /> <el-input v-model="form.departmentWarehouse" placeholder="请输入部门仓库" />
</el-form-item> </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> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
@ -254,11 +268,11 @@
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip"> <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" />是否更新已经存在的数据 <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据-->
</div> <!-- </div>-->
<span>仅允许导入xlsxlsx格式文件</span> <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> </div>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -266,12 +280,132 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listSparePartsUsageRecord, getSparePartsUsageRecord, delSparePartsUsageRecord, addSparePartsUsageRecord, updateSparePartsUsageRecord } from "@/api/ems/info/sparePartsUsageRecord"; import { listSparePartsUsageRecord, getSparePartsUsageRecord, delSparePartsUsageRecord, addSparePartsUsageRecord, updateSparePartsUsageRecord } from "@/api/ems/info/sparePartsUsageRecord";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "SparePartsUsageRecord", name: "SparePartsUsageRecord",
@ -311,7 +445,8 @@
personReceived: null, personReceived: null,
warehouseManagerConfirmation: null, warehouseManagerConfirmation: null,
inventoryStatus: null, inventoryStatus: null,
departmentWarehouse: null departmentWarehouse: null,
remarks: null
}, },
// //
form: {}, form: {},
@ -322,7 +457,7 @@
], ],
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true }, { key: 1, label: `日期`, visible: true },
{ key: 2, label: `备件名称`, visible: true }, { key: 2, label: `备件名称`, visible: true },
{ key: 3, label: `备件型号`, visible: true }, { key: 3, label: `备件型号`, visible: true },
@ -334,6 +469,7 @@
{ key: 9, label: `库管确认人`, visible: true }, { key: 9, label: `库管确认人`, visible: true },
{ key: 10, label: `库存表状态`, visible: true }, { key: 10, label: `库存表状态`, visible: true },
{ key: 11, label: `部门仓库`, visible: true }, { key: 11, label: `部门仓库`, visible: true },
{ key: 12, label: `备注`, visible: true },
], ],
// //
upload: { upload: {
@ -349,12 +485,28 @@
headers: { Authorization: "Bearer " + getToken() }, headers: { Authorization: "Bearer " + getToken() },
// //
url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsUsageRecord/importData" url: process.env.VUE_APP_BASE_API + "/ems/info/sparePartsUsageRecord/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
} }
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询动力能源部行输科备件领用更换记录列表 */ /** 查询动力能源部行输科备件领用更换记录列表 */
getList() { getList() {
@ -384,7 +536,8 @@
personReceived: null, personReceived: null,
warehouseManagerConfirmation: null, warehouseManagerConfirmation: null,
inventoryStatus: null, inventoryStatus: null,
departmentWarehouse: null departmentWarehouse: null,
remarks: null
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -413,16 +566,16 @@
this.form.sparePartModel = this.copiedData.sparePartModel; this.form.sparePartModel = this.copiedData.sparePartModel;
} }
this.open = true; this.open = true;
this.title = "添加动力能源部行输科备件领用更换记录"; this.title = "添加 动力能源部行输科备件领用更换记录";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getSparePartsUsageRecord(id).then(response => { getSparePartsUsageRecord(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改动力能源部行输科备件领用更换记录"; this.title = "修改 动力能源部行输科备件领用更换记录";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -494,7 +647,108 @@
sparePartModel: row.sparePartModel sparePartModel: row.sparePartModel
}; };
this.$modal.msgSuccess("已复制备件名称和型号"); 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> </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> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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="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="jobCategory" v-if="columns[2].visible"/>
<el-table-column label="作业单位" align="center" prop="jobUnit" v-if="columns[3].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="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="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" 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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -206,7 +216,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改动力能源部监督检查清单对话框 --> <!-- 添加 或修改 动力能源部监督检查清单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="日期" prop="date"> <el-form-item label="日期" prop="date">
@ -299,11 +309,161 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listSupervisionChecklist, getSupervisionChecklist, delSupervisionChecklist, addSupervisionChecklist, updateSupervisionChecklist } from "@/api/ems/info/supervisionChecklist"; import { listSupervisionChecklist, getSupervisionChecklist, delSupervisionChecklist, addSupervisionChecklist, updateSupervisionChecklist } from "@/api/ems/info/supervisionChecklist";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "SupervisionChecklist", name: "SupervisionChecklist",
@ -357,7 +517,7 @@
], ],
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `日期`, visible: true }, { key: 1, label: `日期`, visible: true },
{ key: 2, label: `作业类别`, visible: true }, { key: 2, label: `作业类别`, visible: true },
{ key: 3, label: `作业单位`, visible: true }, { key: 3, label: `作业单位`, visible: true },
@ -384,6 +544,16 @@
headers: { headers: {
Authorization: "Bearer " + localStorage.getItem("token") Authorization: "Bearer " + localStorage.getItem("token")
} }
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
} }
}; };
}, },
@ -391,6 +561,12 @@
this.getList(); this.getList();
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/supervisionChecklist/importData"; 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: { methods: {
/** 查询动力能源部监督检查清单列表 */ /** 查询动力能源部监督检查清单列表 */
getList() { getList() {
@ -449,16 +625,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加动力能源部监督检查清单"; this.title = "添加 动力能源部监督检查清单";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getSupervisionChecklist(id).then(response => { getSupervisionChecklist(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改动力能源部监督检查清单"; this.title = "修改 动力能源部监督检查清单";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -522,7 +698,108 @@
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); 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> </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> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row> </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 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="类型" 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="UPS安装柜体名称" align="center" prop="upsInstallationCabinetName" v-if="columns[2].visible"/>
<el-table-column label="参照位置" align="center" prop="referenceLocation" v-if="columns[3].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="第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="第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="第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"> <template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@ -266,7 +276,7 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改行李系统UPS电池生命周期对话框 --> <!-- 添加 或修改 行李系统UPS电池生命周期对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <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 ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="type">
@ -414,11 +424,11 @@
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip"> <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" />是否更新已经存在的数据 <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
</div> </div> -->
<span>仅允许导入xlsxlsx格式文件</span> <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> </div>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -426,12 +436,190 @@
<el-button @click="upload.open = false"> </el-button> <el-button @click="upload.open = false"> </el-button>
</div> </div>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import { listUpsBatteryLifecycle, getUpsBatteryLifecycle, delUpsBatteryLifecycle, addUpsBatteryLifecycle, updateUpsBatteryLifecycle } from "@/api/ems/info/upsBatteryLifecycle"; import { listUpsBatteryLifecycle, getUpsBatteryLifecycle, delUpsBatteryLifecycle, addUpsBatteryLifecycle, updateUpsBatteryLifecycle } from "@/api/ems/info/upsBatteryLifecycle";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { checkPermi } from "@/utils/permission";
export default { export default {
name: "UpsBatteryLifecycle", name: "UpsBatteryLifecycle",
@ -492,7 +680,7 @@
] ]
}, },
columns: [ columns: [
{ key: 0, label: `主键自增ID`, visible: false }, { key: 0, label: `序号`, visible: true },
{ key: 1, label: `类型`, visible: true }, { key: 1, label: `类型`, visible: true },
{ key: 2, label: `UPS安装柜体名称`, visible: true }, { key: 2, label: `UPS安装柜体名称`, visible: true },
{ key: 3, label: `参照位置`, visible: true }, { key: 3, label: `参照位置`, visible: true },
@ -528,12 +716,28 @@
headers: { Authorization: "Bearer " + getToken() }, headers: { Authorization: "Bearer " + getToken() },
// //
url: process.env.VUE_APP_BASE_API + "/ems/info/upsBatteryLifecycle/importData" url: process.env.VUE_APP_BASE_API + "/ems/info/upsBatteryLifecycle/importData"
},
//
detailDrawer: false,
currentRecord: {},
//
contextMenu: {
visible: false,
top: 0,
left: 0,
row: null
} }
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
document.removeEventListener('click', this.hideContextMenu);
},
methods: { methods: {
/** 查询行李系统UPS电池生命周期列表 */ /** 查询行李系统UPS电池生命周期列表 */
getList() { getList() {
@ -596,16 +800,16 @@
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "添加行李系统UPS电池生命周期"; this.title = "添加 行李系统UPS电池生命周期";
}, },
/** 修改按钮操作 */ /** 修改 按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getUpsBatteryLifecycle(id).then(response => { getUpsBatteryLifecycle(id).then(response => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改行李系统UPS电池生命周期"; this.title = "修改 行李系统UPS电池生命周期";
}); });
}, },
/** 提交按钮 */ /** 提交按钮 */
@ -669,7 +873,108 @@
// //
submitFileForm() { submitFileForm() {
this.$refs.upload.submit(); 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> </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