Newer
Older
KaiFengPC / src / views / floodSys / repair / eventYJDetail.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <!-- 电话/网上微信投诉事件详情 -->
  3. <div class="publicContainer">
  4. <div class="publicDetail">
  5. <div class="part">
  6. <p class="title">事件名称:</p>
  7. <p class="content">{{ detailData.eventName }}</p>
  8. </div>
  9. <div class="part">
  10. <p class="title">事件编号:</p>
  11. <p class="content">{{ detailData.eventNo }}</p>
  12. </div>
  13. <div class="part">
  14. <p class="title">事件状态:</p>
  15. <p class="content">
  16. <dict-tag :options="eventStatusType" :value="detailData.eventStatus" />
  17. </p>
  18. </div>
  19. <div class="part">
  20. <p class="title">事件类型:</p>
  21. <p class="content">
  22. <dict-tag :options="eventTypes" :value="detailData.eventType" />
  23. </p>
  24. </div>
  25. <div class="part">
  26. <p class="title">事件紧急程度:</p>
  27. <p class="content"><dict-tag :options="urgencyType" :value="detailData.eventUrgency" /></p>
  28. </div>
  29.  
  30. <div class="part">
  31. <p class="title">事件发生时间:</p>
  32. <p class="content">{{ detailData.eventHappenTime || '--' }}</p>
  33. </div>
  34. <div class="part" style="width: 100%">
  35. <p class="title">事件要求:</p>
  36. <p class="content">{{ detailData.eventRequirement || '--' }}</p>
  37. </div>
  38. <div class="part">
  39. <p class="title">期望完成时间:</p>
  40. <p class="content">{{ detailData.rpExpectTime || '--' }}</p>
  41. </div>
  42. <div class="part">
  43. <p class="title">实际完成时间:</p>
  44. <p class="content">{{ detailData.rpEndTime || '--' }}</p>
  45. </div>
  46. <div class="part">
  47. <p class="title">维修类型:</p>
  48. <p class="content">{{ detailData.rpType == 'minor' ? '小修' : '专项维修' }}</p>
  49. </div>
  50. <div class="part">
  51. <p class="title">事件处理前照片:</p>
  52. <p class="content">
  53. <ImagePreview :src="item.url" v-for="item in detailData.scenePhotosFileList" :key="item.id"></ImagePreview>
  54. </p>
  55. </div>
  56. <div class="part">
  57. <p class="title">维修人员:</p>
  58. <p class="content">{{ detailData.rpUserName || '--' }}</p>
  59. </div>
  60. <div class="part" style="width: 100%">
  61. <p class="title">维修完成情况说明:</p>
  62. <p class="content">{{ detailData.rpEndDesc || '--' }}</p>
  63. </div>
  64. <el-divider />
  65. <div class="part" style="width: 100%">
  66. <p class="title" style="width: 100%">事件处理进度:</p>
  67. <el-table :data="detailData.eventHistoryList" max-height="300px">
  68. <el-table-column label="时间" prop="createTime" />
  69. <el-table-column label="操作人" prop="createUserName" />
  70. <el-table-column label="事件状态" prop="remark" />
  71. <!-- <el-table-column label="事件状态" prop="eventStatus">
  72. <template #default="scope">
  73. <dict-tag :options="eventStatusType" :value="scope.row.eventStatus" />
  74. </template>
  75. </el-table-column> -->
  76. </el-table>
  77. </div>
  78. <el-divider />
  79. <div class="part" style="width: 100%">
  80. <p class="title" style="width: 100%">历史处理进度:</p>
  81. <el-table :data="detailData.operateRepairOrderVo.repairOrderHistoryList" max-height="300px">
  82. <el-table-column label="时间" prop="createTime" />
  83. <el-table-column label="现场处理描述" prop="rpOrderDesc" />
  84. <el-table-column label="处置照片" prop="postName">
  85. <template #default="scope">
  86. <ImagePreview :src="item.url" v-for="item in scope.row.repairPhotosFileList" :key="item.id"></ImagePreview>
  87. </template>
  88. </el-table-column>
  89. </el-table>
  90. </div>
  91. </div>
  92. </div>
  93. </template>
  94.  
  95. <script setup name="page">
  96. import { eventManageDetail } from '@/api/floodSys/repair';
  97.  
  98. const { proxy } = getCurrentInstance();
  99. const props = defineProps({
  100. eventId: {
  101. type: String,
  102. default: '',
  103. },
  104. });
  105. const detailData = ref({
  106. operateRepairOrderVo: {
  107. repairOrderHistoryList: [],
  108. },
  109. });
  110. const eventStatusType = proxy.fixDict['eventStatusType']; //事件处理状态
  111. const urgencyType = proxy.fixDict['urgencyType']; //事件紧急程度
  112. const eventTypes = proxy.fixDict['eventTypes']; //事件类型
  113.  
  114. // 获取详情数据
  115. function getDataList() {
  116. proxy.$modal.loading('加载中...');
  117. eventManageDetail(props.eventId).then(response => {
  118. detailData.value = response.data;
  119. proxy.$modal.closeLoading(); //关闭loading
  120. });
  121. }
  122. onMounted(() => {
  123. getDataList();
  124. });
  125. </script>
  126. <style lang="scss"></style>