Newer
Older
KaiFengPC / src / views / floodSys / repair / repairDetail.vue
@鲁yixuan 鲁yixuan on 29 Aug 3 KB updata
  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.rpOrderDesc }}</p>
  8. </div>
  9. <div class="part">
  10. <p class="title">维修状态:</p>
  11. <p class="content"><dict-tag :options="statusType" :value="detailData.rpStatus" /></p>
  12. </div>
  13. <div class="part">
  14. <p class="title">工单类型:</p>
  15. <p class="content"><dict-tag :options="orderType" :value="detailData.rpOrderType" /></p>
  16. </div>
  17. <div class="part">
  18. <p class="title">维修开始时间:</p>
  19. <p class="content">{{ detailData.rpStartTime || '--' }}</p>
  20. </div>
  21. <div class="part">
  22. <p class="title">期望完成时间:</p>
  23. <p class="content">{{ detailData.rpExpectTime || '--' }}</p>
  24. </div>
  25. <div class="part">
  26. <p class="title">维修结束时间:</p>
  27. <p class="content">{{ detailData.rpEndTime || '--' }}</p>
  28. </div>
  29. <div class="part">
  30. <p class="title">维修预估费用:</p>
  31. <p class="content">{{ detailData.rpCost || '--' }}</p>
  32. </div>
  33. <div class="part">
  34. <p class="title">工程整治措施:</p>
  35. <p class="content">{{ detailData.rpMeasures || '--' }}</p>
  36. </div>
  37. <div class="part">
  38. <p class="title">问题照片:</p>
  39. <p class="content">
  40. <ImagePreview :src="item.url" v-for="item in detailData.problemFileList" :key="item.id"></ImagePreview>
  41. </p>
  42. </div>
  43. <div class="part">
  44. <p class="title">维修人员:</p>
  45. <p class="content">{{ detailData.rpUserName || '--' }}</p>
  46. </div>
  47. <div class="part" style="width: 100%">
  48. <p class="title">维修要求:</p>
  49. <p class="content">{{ detailData.rpRequire || '--' }}</p>
  50. </div>
  51. <div class="part" style="width: 100%">
  52. <p class="title">维修完成情况:</p>
  53. <p class="content">{{ detailData.rpEndDesc || '--' }}</p>
  54. </div>
  55. <div class="part">
  56. <p class="title">审核意见:</p>
  57. <p class="content">{{ detailData.emAppraise || '--' }}</p>
  58. </div>
  59. <el-divider />
  60. <div class="part" style="width: 100%">
  61. <p class="title" style="width: 100%">历史处置记录:</p>
  62. <el-table :data="detailData.repairOrderHistoryList" max-height="300px">
  63. <el-table-column label="开始时间" prop="createTime" />
  64. <el-table-column label="现场处理描述" prop="rpEndDesc" />
  65. <el-table-column label="处置照片" prop="repairPhotosFileList">
  66. <template #default="scope">
  67. <ImagePreview :src="item.url" v-for="item in scope.row.repairPhotosFileList" :key="item.id"></ImagePreview>
  68. </template>
  69. </el-table-column>
  70. </el-table>
  71. </div>
  72. </div>
  73. </div>
  74. </template>
  75.  
  76. <script setup name="page">
  77. import { repairDetail } from '@/api/floodSys/repair';
  78.  
  79. const { proxy } = getCurrentInstance();
  80. const statusType = ref([
  81. { label: '待处理', value: 'unprocess' },
  82. { label: '处理中', value: 'ongoing' },
  83. { label: '已处理待评价', value: 'completed' },
  84. { label: '已审核评价', value: 'examined' },
  85. ]);
  86. const orderType = ref([
  87. { label: '电话投诉事件', value: 'phone' },
  88. { label: '网上投诉事件', value: 'internet' },
  89. { label: '微信公众投诉事件', value: 'weChat' },
  90. { label: '设备故障维修工单', value: 'device_fault' },
  91. ]);
  92.  
  93. const props = defineProps({
  94. eventId: {
  95. type: String,
  96. default: '',
  97. },
  98. });
  99. const detailData = ref({
  100. operateRepairOrderVo: {
  101. repairOrderHistoryList: [],
  102. },
  103. });
  104. // 获取详情数据
  105. function getDataList() {
  106. proxy.$modal.loading('加载中...');
  107. repairDetail(props.eventId).then(response => {
  108. detailData.value = response.data;
  109. proxy.$modal.closeLoading(); //取消loading
  110. });
  111. }
  112. onMounted(() => {
  113. getDataList();
  114. });
  115. </script>
  116. <style lang="scss"></style>