From e72be380652e3898328a864b71867c5384724648 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Wed, 5 Nov 2025 09:01:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(dms):=20=E6=96=B0=E5=A2=9E=E6=95=85?=
 =?UTF-8?q?=E9=9A=9C=E6=8A=A5=E4=BF=AE=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增故障报修详情页，支持查看、编辑和维修操作
- 实现设备信息、故障信息、维修要求等模块展示
- 支持操作记录管理，包括添加、编辑和删除功能- 集成知识库选择功能，可快速填充故障描述
- 实现附件上传和预览功能
- 添加开始维修和完成维修快捷操作
- 支持从列表页跳转到详情页进行查看或编辑
---
 .../dms/dmsBillsFaultInstance/detail.vue      | 788 ++++++++++++++++++
 src/views/dms/dmsBillsFaultInstance/index.vue | 108 ++-
 2 files changed, 857 insertions(+), 39 deletions(-)
 create mode 100644 src/views/dms/dmsBillsFaultInstance/detail.vue

diff --git a/src/views/dms/dmsBillsFaultInstance/detail.vue b/src/views/dms/dmsBillsFaultInstance/detail.vue
new file mode 100644
index 0000000..669b12f
--- /dev/null
+++ b/src/views/dms/dmsBillsFaultInstance/detail.vue
@@ -0,0 +1,788 @@
+<template>
+  <div class="app-container fault-repair-detail">
+    <!-- 设备信息 -->
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="card-title">设备信息</span>
+      </div>
+      <el-form :model="deviceForm" label-width="120px" size="small">
+        <!-- 设备详细信息展示 -->
+        <el-row :gutter="20" v-if="deviceForm.deviceCode">
+          <el-col :span="8">
+            <el-form-item label="设备编号">
+              <el-input v-model="deviceForm.deviceCode" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="设备名称">
+              <el-input v-model="deviceForm.deviceName" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="设备类型">
+              <el-input v-model="deviceForm.deviceType" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="所在部门">
+              <el-input v-model="deviceForm.department" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="所在工位">
+              <el-input v-model="deviceForm.location" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="规格型号">
+              <el-input v-model="deviceForm.deviceSpec" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 故障信息 -->
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="card-title">故障信息</span>
+      </div>
+      <el-form ref="faultForm" :model="faultForm" :rules="rules" label-width="120px" size="small">
+        <!-- 新增模式：设备选择 -->
+        <el-row :gutter="20" v-if="!repairInstanceId && !isView">
+          <el-col :span="24">
+            <el-form-item label="选择设备" prop="deviceId">
+              <el-select 
+                v-model="faultForm.deviceId" 
+                placeholder="请选择设备" 
+                filterable
+                @change="handleDeviceChange"
+                style="width: 100%">
+                <el-option
+                  v-for="item in deviceList"
+                  :key="item.objId"
+                  :label="item.deviceName"
+                  :value="item.objId">
+                  <span style="float: left">{{ item.deviceCode }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deviceName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="发生时间" prop="occurTime">
+              <el-date-picker
+                v-model="faultForm.occurTime"
+                type="datetime"
+                placeholder="请选择发生时间"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :disabled="isView"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="报修人" prop="applyUser">
+              <el-input v-model="faultForm.applyUser" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="报修人手机" prop="applyUserPhone">
+              <el-input v-model="faultForm.applyUserPhone" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="故障类型" prop="faultType">
+              <el-select v-model="faultForm.faultType" placeholder="请选择故障类型" :disabled="isView" style="width: 100%">
+                <el-option
+                  v-for="item in dict.type.dms_fault_type"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="故障等级" prop="faultLevel">
+              <el-select v-model="faultForm.faultLevel" placeholder="请选择故障等级" :disabled="isView" style="width: 100%">
+                <el-option label="一般" value="1"></el-option>
+                <el-option label="紧急" value="2"></el-option>
+                <el-option label="严重" value="3"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否停机" prop="isShutdown">
+              <el-radio-group v-model="faultForm.isShutdown" :disabled="isView">
+                <el-radio label="1">是</el-radio>
+                <el-radio label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="故障描述" prop="faultDescription">
+              <el-input
+                v-model="faultForm.faultDescription"
+                type="textarea"
+                :rows="3"
+                placeholder="请详细描述故障现象、发生部位、影响范围等"
+                :disabled="isView">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="涉及操作">
+              <el-input v-model="faultForm.designOperations" type="textarea" :rows="2" :disabled="isView" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 要求完成时间和验证方法 -->
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="card-title">维修要求</span>
+      </div>
+      <el-form :model="requireForm" label-width="120px" size="small">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="要求完成时间">
+              <el-date-picker
+                v-model="requireForm.requireEndTime"
+                type="datetime"
+                placeholder="请选择要求完成时间"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :disabled="isView"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="验证方法">
+              <el-input v-model="requireForm.verifyMethod" type="textarea" :rows="2" :disabled="isView" placeholder="请描述如何验证维修效果" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 知识库选择 -->
+    <el-card class="box-card" shadow="never" v-if="!isView">
+      <div slot="header" class="clearfix">
+        <span class="card-title">维修经验知识库</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="openKnowledgeDialog">选择知识</el-button>
+      </div>
+      <div v-if="selectedKnowledge">
+        <el-descriptions :column="2" border size="small">
+          <el-descriptions-item label="经验编号">{{ selectedKnowledge.experienceCode }}</el-descriptions-item>
+          <el-descriptions-item label="故障描述">{{ selectedKnowledge.faultDescription }}</el-descriptions-item>
+          <el-descriptions-item label="涉及操作" :span="2">{{ selectedKnowledge.designOperations }}</el-descriptions-item>
+          <el-descriptions-item label="操作描述" :span="2">{{ selectedKnowledge.operationsDescription }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <el-empty v-else description="暂未选择知识库" :image-size="100"></el-empty>
+    </el-card>
+
+    <!-- 处理意见 -->
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="card-title">处理意见</span>
+      </div>
+      <el-input
+        v-model="processOpinion"
+        type="textarea"
+        :rows="4"
+        placeholder="请输入处理意见..."
+        :disabled="isView">
+      </el-input>
+    </el-card>
+
+    <!-- 操作记录 -->
+    <el-card class="box-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <span class="card-title">操作记录</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddRecord" v-if="!isView">添加记录</el-button>
+      </div>
+      <el-table :data="activityList" border stripe size="small">
+        <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="操作时间" align="center" prop="handleTime" width="160">
+          <template slot-scope="scope">
+            {{ parseTime(scope.row.handleTime, '{y}-{m}-{d} {h}:{i}') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作人" align="center" prop="handleBy" width="120" />
+        <el-table-column label="任务" align="center" prop="processActivityName" width="150" />
+        <el-table-column label="操作权限" align="center" prop="processHandleStatus" width="100">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.dms_handle_status" :value="scope.row.processHandleStatus"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="处理措施" align="center" prop="processHandleResolution" show-overflow-tooltip />
+        <el-table-column label="附件" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="viewFiles(scope.row)" v-if="scope.row.fileCount > 0">
+              查看({{ scope.row.fileCount }})
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="150" v-if="!isView">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleEditRecord(scope.row)">编辑</el-button>
+            <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDeleteRecord(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 底部按钮 -->
+    <div class="footer-buttons">
+      <el-button @click="goBack">返 回</el-button>
+      <el-button type="primary" @click="handleSubmit" v-if="!isView">保 存</el-button>
+      <el-button type="warning" @click="onStartRepair" v-if="!isView && repairInstanceId && billsStatus === '0'">开始维修</el-button>
+      <el-button type="success" @click="onCompleteRepair" v-if="!isView && repairInstanceId && billsStatus === '1'">完成维修</el-button>
+    </div>
+
+    <!-- 知识库选择对话框 -->
+    <el-dialog title="选择维修经验" :visible.sync="knowledgeDialogVisible" width="70%" append-to-body>
+      <el-table :data="knowledgeList" @row-click="selectKnowledge" highlight-current-row border>
+        <el-table-column label="经验编号" align="center" prop="experienceCode" width="150" />
+        <el-table-column label="设备类型" align="center" prop="deviceTypeId" width="120" />
+        <el-table-column label="故障描述" align="center" prop="faultDescription" show-overflow-tooltip />
+        <el-table-column label="涉及操作" align="center" prop="designOperations" show-overflow-tooltip />
+        <el-table-column label="操作描述" align="center" prop="operationsDescription" show-overflow-tooltip />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="knowledgeDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmKnowledge">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 操作记录编辑对话框 -->
+    <el-dialog :title="recordDialogTitle" :visible.sync="recordDialogVisible" width="60%" append-to-body>
+      <el-form ref="recordForm" :model="recordForm" :rules="recordRules" label-width="100px">
+        <el-form-item label="任务名称" prop="processActivityName">
+          <el-input v-model="recordForm.processActivityName" placeholder="请输入任务名称" />
+        </el-form-item>
+        <el-form-item label="处理措施" prop="processHandleResolution">
+          <el-input
+            v-model="recordForm.processHandleResolution"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入处理措施">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="附件上传">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :on-success="handleUploadSuccess"
+            :on-remove="handleUploadRemove"
+            :file-list="recordForm.fileList"
+            list-type="picture-card"
+            :on-preview="handlePicturePreview">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="recordDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitRecord">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 图片预览对话框 -->
+    <el-dialog :visible.sync="previewDialogVisible" append-to-body>
+      <img width="100%" :src="previewImageUrl" alt="">
+    </el-dialog>
+
+    <!-- 附件查看对话框 -->
+    <el-dialog title="查看附件" :visible.sync="filesDialogVisible" width="60%" append-to-body>
+      <el-table :data="currentFiles" border stripe size="small">
+        <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="文件名称" align="center" prop="fileName" show-overflow-tooltip />
+        <el-table-column label="上传时间" align="center" prop="createTime" width="160">
+          <template slot-scope="scope">
+            {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
+            <el-button size="mini" type="text" @click="previewFile(scope.row)" v-if="isImage(scope.row.fileName)">预览</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="filesDialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getDmsBillsFaultInstance,
+  addDmsBillsFaultInstance,
+  updateDmsBillsFaultInstance,
+  startRepair,
+  completeRepair
+} from '@/api/dms/dmsBillsFaultInstance'
+import { getDeviceLedgerList } from '@/api/base/deviceLedger'
+import { getKnowledgeRepairList } from '@/api/dms/knowledgeRepair'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'FaultRepairDetail',
+  dicts: ['dms_fault_type', 'dms_handle_status', 'dms_repair_type'],
+  data() {
+    return {
+      // 是否为查看模式
+      isView: false,
+      // 报修单ID
+      repairInstanceId: null,
+      // 工单状态（0待维修 1维修中 2维修完成）
+      billsStatus: null,
+      
+      // 设备列表
+      deviceList: [],
+      
+      // 设备信息
+      deviceForm: {
+        deviceCode: '',
+        deviceName: '',
+        deviceType: '',
+        department: '',
+        location: '',
+        deviceSpec: ''
+      },
+      
+      // 故障信息
+      faultForm: {
+        deviceId: null,
+        occurTime: null,
+        applyUser: '',
+        applyUserPhone: '',
+        faultType: '',
+        faultLevel: '',
+        isShutdown: '0',
+        faultDescription: '',
+        designOperations: ''
+      },
+      
+      // 维修要求
+      requireForm: {
+        requireEndTime: null,
+        verifyMethod: ''
+      },
+      
+      // 处理意见
+      processOpinion: '',
+      
+      // 操作记录列表
+      activityList: [],
+      
+      // 知识库相关
+      knowledgeDialogVisible: false,
+      knowledgeList: [],
+      selectedKnowledge: null,
+      tempSelectedKnowledge: null,
+      
+      // 操作记录对话框
+      recordDialogVisible: false,
+      recordDialogTitle: '',
+      recordForm: {
+        processActivityName: '',
+        processHandleResolution: '',
+        fileList: []
+      },
+      
+      // 文件上传
+      uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
+      uploadHeaders: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      
+      // 图片预览
+      previewDialogVisible: false,
+      previewImageUrl: '',
+      
+      // 附件查看
+      filesDialogVisible: false,
+      currentFiles: [],
+      
+      // 表单验证规则
+      rules: {
+        deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }],
+        occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
+        applyUser: [{ required: true, message: '请输入报修人', trigger: 'blur' }],
+        faultType: [{ required: true, message: '请选择故障类型', trigger: 'change' }],
+        faultDescription: [{ required: true, message: '请输入故障描述', trigger: 'blur' }]
+      },
+      
+      recordRules: {
+        processActivityName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+        processHandleResolution: [{ required: true, message: '请输入处理措施', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    const id = this.$route.params.id
+    if (id && id !== 'new') {
+      this.repairInstanceId = id
+      this.loadData()
+    }
+    // 判断是否为查看模式
+    this.isView = this.$route.query.view === 'true'
+    
+    // 新增模式下加载设备列表
+    if (!this.repairInstanceId || id === 'new') {
+      this.loadDeviceList()
+    }
+  },
+  methods: {
+    /** 加载数据 */
+    loadData() {
+      getDmsBillsFaultInstance(this.repairInstanceId).then(response => {
+        const data = response.data
+        // 设备信息
+        this.deviceForm = {
+          deviceCode: data.deviceCode,
+          deviceName: data.deviceName,
+          deviceType: data.deviceType || '',
+          department: data.department || '',
+          location: data.deviceLocation,
+          deviceSpec: data.deviceSpec
+        }
+        
+        // 故障信息
+        this.faultForm = {
+          occurTime: data.applyTime,
+          applyUser: data.applyUser,
+          applyUserPhone: data.applyUserPhone || '',
+          faultType: data.faultType,
+          faultLevel: data.faultLevel || '',
+          isShutdown: data.isShutdown || '0',
+          faultDescription: data.faultDescription,
+          designOperations: data.designOperations
+        }
+        
+        // 维修要求
+        this.requireForm = {
+          requireEndTime: data.requireEndTime,
+          verifyMethod: data.verifyMethod
+        }
+        
+        // 处理意见
+        this.processOpinion = data.processHandleResolution || ''
+        
+        // 操作记录
+        this.activityList = data.dmsFaultInstanceActivityList || []
+        
+        // 工单状态
+        this.billsStatus = data.billsStatus || null
+        
+        // 知识库
+        if (data.knowledgeRepairId) {
+          // TODO: 加载知识库详情
+        }
+      })
+    },
+    
+    /** 打开知识库选择对话框 */
+    openKnowledgeDialog() {
+      this.knowledgeDialogVisible = true
+      this.loadKnowledgeList()
+    },
+    
+    /** 加载知识库列表 */
+    loadKnowledgeList() {
+      getKnowledgeRepairList({ isFlag: '0' }).then(response => {
+        this.knowledgeList = response.data || []
+      })
+    },
+    
+    /** 选择知识库 */
+    selectKnowledge(row) {
+      this.tempSelectedKnowledge = row
+    },
+    
+    /** 确认选择知识库 */
+    confirmKnowledge() {
+      if (this.tempSelectedKnowledge) {
+        this.selectedKnowledge = this.tempSelectedKnowledge
+        // 自动填充故障描述和涉及操作
+        if (!this.faultForm.faultDescription) {
+          this.faultForm.faultDescription = this.selectedKnowledge.faultDescription
+        }
+        if (!this.faultForm.designOperations) {
+          this.faultForm.designOperations = this.selectedKnowledge.designOperations
+        }
+      }
+      this.knowledgeDialogVisible = false
+    },
+    
+    /** 添加操作记录 */
+    handleAddRecord() {
+      this.recordDialogTitle = '添加操作记录'
+      this.recordForm = {
+        processActivityName: '',
+        processHandleResolution: '',
+        fileList: []
+      }
+      this.recordDialogVisible = true
+    },
+    
+    /** 编辑操作记录 */
+    handleEditRecord(row) {
+      this.recordDialogTitle = '编辑操作记录'
+      this.recordForm = {
+        instanceActivityId: row.instanceActivityId,
+        processActivityName: row.processActivityName,
+        processHandleResolution: row.processHandleResolution,
+        fileList: row.dmsInstanceFiles || []
+      }
+      this.recordDialogVisible = true
+    },
+    
+    /** 删除操作记录 */
+    handleDeleteRecord(row) {
+      this.$confirm('是否确认删除该操作记录?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const index = this.activityList.findIndex(item => item.instanceActivityId === row.instanceActivityId)
+        if (index > -1) {
+          this.activityList.splice(index, 1)
+          this.$message.success('删除成功')
+        }
+      })
+    },
+    
+    /** 提交操作记录 */
+    submitRecord() {
+      this.$refs.recordForm.validate(valid => {
+        if (valid) {
+          // 提取文件URLs用于后端保存
+          const fileUrls = this.recordForm.fileList.map(f => f.filePath || f.url)
+          
+          const record = {
+            ...this.recordForm,
+            handleTime: new Date(),
+            handleBy: this.$store.state.user.name,
+            processHandleStatus: '0',
+            fileCount: this.recordForm.fileList.length,
+            fileUrls: fileUrls,  // 传递给后端
+            dmsInstanceFiles: this.recordForm.fileList  // 用于前端显示
+          }
+          
+          if (record.instanceActivityId) {
+            // 编辑
+            const index = this.activityList.findIndex(item => item.instanceActivityId === record.instanceActivityId)
+            if (index > -1) {
+              this.$set(this.activityList, index, record)
+            }
+          } else {
+            // 新增 - 使用临时ID（负数，后端会忽略）
+            record.instanceActivityId = -new Date().getTime()
+            this.activityList.push(record)
+          }
+          
+          this.recordDialogVisible = false
+          this.$message.success('保存成功')
+        }
+      })
+    },
+    
+    /** 文件上传成功 */
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.recordForm.fileList.push({
+          name: file.name,
+          url: process.env.VUE_APP_BASE_API + res.imgUrl,
+          filePath: res.data.url
+        })
+      }
+    },
+    
+    /** 文件移除 */
+    handleUploadRemove(file, fileList) {
+      this.recordForm.fileList = fileList
+    },
+    
+    /** 查看附件 */
+    viewFiles(row) {
+      this.currentFiles = row.dmsInstanceFiles || []
+      this.filesDialogVisible = true
+    },
+    
+    /** 下载文件 */
+    downloadFile(file) {
+      window.open(file.url || file.filePath, '_blank')
+    },
+    
+    /** 预览文件 */
+    previewFile(file) {
+      this.previewImageUrl = file.url || file.filePath
+      this.previewDialogVisible = true
+    },
+    
+    /** 判断是否为图片 */
+    isImage(fileName) {
+      if (!fileName) return false
+      const ext = fileName.toLowerCase().split('.').pop()
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
+    
+    /** 图片预览 */
+    handlePicturePreview(file) {
+      this.previewImageUrl = file.url
+      this.previewDialogVisible = true
+    },
+    
+    /** 开始维修 */
+    onStartRepair() {
+      if (!this.repairInstanceId) {
+        return this.$message.warning('未找到工单ID，无法开始维修')
+      }
+      const payload = {
+        repairInstanceId: this.repairInstanceId
+      }
+      startRepair(payload).then(() => {
+        this.$modal.msgSuccess('已开始维修')
+        this.loadData()
+      })
+    },
+    
+    /** 完成维修 */
+    onCompleteRepair() {
+      if (!this.repairInstanceId) {
+        return this.$message.warning('未找到工单ID，无法完成维修')
+      }
+      const executing = (this.activityList || []).find(item => item.processHandleStatus === '1')
+      if (!executing) {
+        return this.$message.warning('未找到执行中的操作记录，无法完成维修')
+      }
+      const fd = new FormData()
+      fd.append('repairInstanceId', this.repairInstanceId)
+      fd.append('instanceActivityId', executing.instanceActivityId)
+      // 零部件JSON，后续可由页面收集
+      fd.append('parts1', '[]')
+      completeRepair(fd).then(() => {
+        this.$modal.msgSuccess('已完成维修')
+        this.loadData()
+      })
+    },
+    
+    /** 提交表单 */
+    handleSubmit() {
+      console.log('提交表单, faultForm:', this.faultForm)
+      console.log('deviceId:', this.faultForm.deviceId)
+      
+      this.$refs.faultForm.validate((valid, errors) => {
+        console.log('表单验证结果:', valid)
+        console.log('验证错误:', errors)
+        
+        if (valid) {
+          const data = {
+            ...this.faultForm,
+            ...this.requireForm,
+            processHandleResolution: this.processOpinion,
+            knowledgeRepairId: this.selectedKnowledge ? this.selectedKnowledge.knowledgeRepairId : null,
+            dmsFaultInstanceActivityList: this.activityList
+          }
+          
+          console.log('提交数据:', data)
+          
+          if (this.repairInstanceId) {
+            data.repairInstanceId = this.repairInstanceId
+            updateDmsBillsFaultInstance(data).then(() => {
+              this.$modal.msgSuccess('保存成功')
+              this.goBack()
+            })
+          } else {
+            addDmsBillsFaultInstance(data).then(() => {
+              this.$modal.msgSuccess('提交成功')
+              this.goBack()
+            })
+          }
+        } else {
+          console.error('表单验证失败')
+        }
+      })
+    },
+    
+    /** 加载设备列表 */
+    loadDeviceList() {
+      getDeviceLedgerList({}).then(response => {
+        this.deviceList = response.data || []
+      })
+    },
+    
+    /** 设备选择变化 */
+    handleDeviceChange(objId) {
+      console.log('设备选择变化, objId:', objId)
+      const device = this.deviceList.find(item => item.objId === objId)
+      console.log('找到的设备:', device)
+      if (device) {
+        // 填充设备详细信息
+        this.deviceForm = {
+          deviceCode: device.deviceCode,
+          deviceName: device.deviceName,
+          deviceType: device.deviceType || '',
+          department: device.usedDepartment || '',
+          location: device.deviceAddress || '',
+          deviceSpec: device.deviceModel || ''
+        }
+        console.log('设备信息已填充, faultForm.deviceId:', this.faultForm.deviceId)
+      } else {
+        console.error('未找到设备, objId:', objId, '设备列表:', this.deviceList)
+      }
+    },
+    
+    /** 返回 */
+    goBack() {
+      this.$tab.closePage()
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fault-repair-detail {
+  .box-card {
+    margin-bottom: 20px;
+    
+    .card-title {
+      font-weight: bold;
+      font-size: 16px;
+      color: #303133;
+    }
+  }
+  
+  .footer-buttons {
+    text-align: center;
+    padding: 20px 0;
+    
+    .el-button {
+      min-width: 100px;
+    }
+  }
+}
+</style>
diff --git a/src/views/dms/dmsBillsFaultInstance/index.vue b/src/views/dms/dmsBillsFaultInstance/index.vue
index ac5b012..84509a1 100644
--- a/src/views/dms/dmsBillsFaultInstance/index.vue
+++ b/src/views/dms/dmsBillsFaultInstance/index.vue
@@ -19,50 +19,19 @@
 <!--      </el-form-item>-->
 <!--    </el-form>-->
 
-    <!--el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleAdd"
+          @click="handleAddNew"
           v-hasPermi="['dms:dmsBillsFaultInstance:add']"
-        >新增</el-button>
-      </el-col>
-     <el-col :span="1.5">
-       <el-button>
-          type="success"
-          icon="el-icon-edit"
-         size="mini"
-        :disabled="single"
-         @click="handleUpdate"
-          v-hasPermi="['dms:dmsBillsFaultInstance:edit']"
-       >修改</el-button>
-     </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['dms:dmsBillsFaultInstance:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['dms:dmsBillsFaultInstance:export']"
-        >导出</el-button>
+        >故障报修</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row-->
+    </el-row>
 
     <el-table v-loading="loading" :data="dmsBillsFaultInstanceList" @selection-change="handleSelectionChange">
 <!--      <el-table-column type="selection" width="55" align="center" />-->
@@ -116,15 +85,34 @@
         </template>
       </el-table-column>
 <!--      <el-table-column label="备注" align="center" prop="remark" />-->
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleViewDetail(scope.row)"
+            v-hasPermi="['dms:dmsBillsFaultInstance:query']"
+          >查看</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="getJump(scope.row)"
+            @click="handleEditDetail(scope.row)"
             v-hasPermi="['dms:dmsBillsFaultInstance:edit']"
-          >详情</el-button>
+          >编辑</el-button>
+          <el-button
+            v-if="scope.row.billsStatus === '0'"
+            size="mini"
+            type="text"
+            @click="handleStartRepair(scope.row)"
+          >开始维修</el-button>
+          <el-button
+            v-if="scope.row.billsStatus === '1'"
+            size="mini"
+            type="text"
+            @click="handleCompleteRepair(scope.row)"
+          >完成维修</el-button>
 <!--          <el-button-->
 <!--            size="mini"-->
 <!--            type="text"-->
@@ -386,7 +374,10 @@ import {
   delDmsBillsFaultInstance,
   addDmsBillsFaultInstance,
   updateDmsBillsFaultInstance,
-  handleFaultExport
+  handleFaultExport,
+  startRepair,
+  completeRepair,
+  getBillsFaultInstance4Repair
 } from "@/api/dms/dmsBillsFaultInstance";
 import { listDmsRepair } from '@/api/dms/dmsRepair'
 import { listDmsRepairInstance } from '@/api/dms/dmsRepairInstance'
@@ -556,6 +547,21 @@ export default {
     },
 
 
+    /** 新增故障报修 */
+    handleAddNew() {
+      this.$router.push('/dms/dmsBillsFaultInstance/detail/new')
+    },
+    /** 查看详情 */
+    handleViewDetail(row) {
+      this.$router.push({
+        path: '/dms/dmsBillsFaultInstance/detail/' + row.repairInstanceId,
+        query: { view: 'true' }
+      })
+    },
+    /** 编辑详情 */
+    handleEditDetail(row) {
+      this.$router.push('/dms/dmsBillsFaultInstance/detail/' + row.repairInstanceId)
+    },
     getJump(row){
       this.$router.push('/dms/activity/index/'+row.repairInstanceId)
     },
@@ -634,6 +640,30 @@ export default {
         this.loading = false;
       });
     },
+    /** 开始维修（列表快捷） */
+    handleStartRepair(row) {
+      const payload = { repairInstanceId: row.repairInstanceId }
+      startRepair(payload).then(() => {
+        this.$modal.msgSuccess('已开始维修')
+        this.getList()
+      })
+    },
+    /** 完成维修（列表快捷） */
+    handleCompleteRepair(row) {
+      getBillsFaultInstance4Repair(row.repairInstanceId).then(res => {
+        const info = res.data || {}
+        const fd = new FormData()
+        fd.append('repairInstanceId', row.repairInstanceId)
+        if (info.instanceActivityId) {
+          fd.append('instanceActivityId', info.instanceActivityId)
+        }
+        fd.append('parts1', '[]')
+        return completeRepair(fd)
+      }).then(() => {
+        this.$modal.msgSuccess('已完成维修')
+        this.getList()
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false;