From aeb33d851b91e437a3a3072290ba0632390b9bfd Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Sat, 7 Jun 2025 18:03:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(ems):=20=E4=BC=98=E5=8C=96=E6=95=85?=
 =?UTF-8?q?=E9=9A=9C=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加故障记录详情抽屉，展示故障记录的详细信息
- 实现表格行右击菜单功能，支持查看、修改和删除记录
- 优化表格样式，增加自动计算处置时长功能
- 添加全局权限控制，根据用户权限显示不同操作按钮
- 增加响应式设计，优化小屏显示效果
---
 src/views/ems/info/dailyFaultRecord/index.vue | 333 ++++++++++++++++--
 1 file changed, 296 insertions(+), 37 deletions(-)

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