Blame view

pages-sub/daily/quick-order/order-detail.vue 4.63 KB
9b30ab8c   刘淇   新增快速工单,原版
1
  <template>
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
2
    <view class="page-container">
420cb443   刘淇   快速工单列表
3
      <!-- 页面级加载组件 -->
9b30ab8c   刘淇   新增快速工单,原版
4
5
6
7
8
9
10
      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  
420cb443   刘淇   快速工单列表
11
      <!-- 内容容器 -->
9b30ab8c   刘淇   新增快速工单,原版
12
      <view v-else class="content-wrap">
420cb443   刘淇   快速工单列表
13
        <!-- 空状态 -->
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
14
15
        <view v-if="!Object.keys(orderDetail).length" >
          <empty-view />
420cb443   刘淇   快速工单列表
16
17
18
        </view>
  
        <!-- 工单详情内容 -->
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
19
        <up-cell-group :border="false" inset  v-else>
9b30ab8c   刘淇   新增快速工单,原版
20
21
22
23
24
25
26
27
28
29
          <!-- 1. 工单编号 -->
          <up-cell
              title="工单编号"
              :value="orderDetail.orderNo || '--'"
              class="up-line-1"
              align="middle"
          ></up-cell>
  
          <!-- 2. 工单位置 -->
          <up-cell
9b30ab8c   刘淇   新增快速工单,原版
30
              align="middle"
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
31
32
33
34
35
          >
            <template #title>
              <view  style="min-width: 200rpx">工单位置</view>
            </template>
            <template #value>
c7df828a   刘淇   快速工单 样式优化
36
              <view  class="up-line-1 common-text-color" >{{orderDetail.roadName || '--'}}</view>
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
37
38
39
            </template>
  
          </up-cell>
9b30ab8c   刘淇   新增快速工单,原版
40
41
42
43
44
45
46
47
48
49
50
  
          <!-- 3. 工单名称 -->
          <up-cell
              title="工单名称"
              :value="orderDetail.orderName || '--'"
              class="up-line-1"
              align="middle"
          ></up-cell>
  
          <!-- 4. 情况描述 -->
          <up-cell
9b30ab8c   刘淇   新增快速工单,原版
51
              align="middle"
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
52
53
54
55
56
          >
            <template #title>
              <view  style="min-width: 200rpx">情况描述</view>
            </template>
            <template #value>
c7df828a   刘淇   快速工单 样式优化
57
              <view  class="up-line-1 common-text-color" >{{orderDetail.remark || '--'}}</view>
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
58
59
            </template>
          </up-cell>
9b30ab8c   刘淇   新增快速工单,原版
60
  
420cb443   刘淇   快速工单列表
61
62
63
          <!-- 5. 问题照片(核心修复:判断条件+空值处理) -->
          <up-cell title="问题照片" >
            <template #value>
9b30ab8c   刘淇   新增快速工单,原版
64
            <view class="cell-content-wrap">
420cb443   刘淇   快速工单列表
65
66
  
              <!-- 修复1:正确判断problemImgsList,补充空数组默认值 -->
9b30ab8c   刘淇   新增快速工单,原版
67
              <up-album
420cb443   刘淇   快速工单列表
68
69
70
                  v-if="!!orderDetail.problemImgsList?.length"
                  :urls="orderDetail.problemImgsList || []"
                  singleSize="70"
9b30ab8c   刘淇   新增快速工单,原版
71
                  :preview-full-image="true"
420cb443   刘淇   快速工单列表
72
  
9b30ab8c   刘淇   新增快速工单,原版
73
74
75
              ></up-album>
              <text v-else class="empty-text">暂无问题照片</text>
            </view>
420cb443   刘淇   快速工单列表
76
            </template>
9b30ab8c   刘淇   新增快速工单,原版
77
78
          </up-cell>
  
420cb443   刘淇   快速工单列表
79
          <!-- 6. 完成照片(优化:空值处理+容错) -->
9b30ab8c   刘淇   新增快速工单,原版
80
          <up-cell title="完成照片" align="top">
420cb443   刘淇   快速工单列表
81
            <template #value>
9b30ab8c   刘淇   新增快速工单,原版
82
83
            <view class="cell-content-wrap">
              <up-album
420cb443   刘淇   快速工单列表
84
85
86
                  v-if="!!orderDetail.completeImgsList?.length"
                  :urls="orderDetail.completeImgsList || []"
                  singleSize="70"
9b30ab8c   刘淇   新增快速工单,原版
87
                  :preview-full-image="true"
420cb443   刘淇   快速工单列表
88
  
9b30ab8c   刘淇   新增快速工单,原版
89
90
91
              ></up-album>
              <text v-else class="empty-text">暂无完成照片</text>
            </view>
420cb443   刘淇   快速工单列表
92
            </template>
9b30ab8c   刘淇   新增快速工单,原版
93
94
95
96
          </up-cell>
  
          <!-- 7. 处理结果 -->
          <up-cell
9b30ab8c   刘淇   新增快速工单,原版
97
98
              align="middle"
              :border="false"
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
99
100
101
102
103
          >
            <template #title>
              <view  style="min-width: 200rpx">处理结果</view>
            </template>
            <template #value>
c7df828a   刘淇   快速工单 样式优化
104
              <view  class="up-line-1 common-text-color" >{{orderDetail.handleResult || '--'}}</view>
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
105
106
            </template>
          </up-cell>
9b30ab8c   刘淇   新增快速工单,原版
107
        </up-cell-group>
9b30ab8c   刘淇   新增快速工单,原版
108
109
110
111
112
113
114
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { inspectionPlanDetail } from "@/api/quick-order/quick-order";
9b30ab8c   刘淇   新增快速工单,原版
115
  import { onLoad, onShow } from '@dcloudio/uni-app';
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
116
  import EmptyView from "../../../components/empty-view/empty-view.vue";
420cb443   刘淇   快速工单列表
117
  
9b30ab8c   刘淇   新增快速工单,原版
118
119
120
121
  // 状态管理
  const loading = ref(true);
  const orderDetail = ref({});
  
9b30ab8c   刘淇   新增快速工单,原版
122
123
124
125
126
127
128
129
  
  /**
   * 获取工单详情
   */
  const getOrderDetail = async (id: string) => {
    try {
      loading.value = true;
      const res = await inspectionPlanDetail({ id });
420cb443   刘淇   快速工单列表
130
131
132
133
134
135
136
      console.log('接口返回:', res);
      // 优化:确保图片数组为数组类型,避免非数组导致渲染错误
      orderDetail.value = {
        ...res,
        problemImgsList: Array.isArray(res.problemImgsList) ? res.problemImgsList : [],
        completeImgsList: Array.isArray(res.completeImgsList) ? res.completeImgsList : []
      };
9b30ab8c   刘淇   新增快速工单,原版
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
    } catch (error) {
      console.error('获取工单详情失败:', error);
      uni.showToast({ title: '加载失败,请重试', icon: 'none' });
    } finally {
      loading.value = false;
    }
  };
  
  // 页面加载
  onLoad((options) => {
    const { id } = options;
    if (id) {
      getOrderDetail(id);
    } else {
      loading.value = false;
      uni.showToast({ title: '缺少工单ID', icon: 'none' });
    }
  });
  </script>
  
  <style scoped lang="scss">
420cb443   刘淇   快速工单列表
158
159
  // 页面基础样式
  .u-page {
b0e2f1a9   刘淇   快速工单和巡查计划样式优化
160
  
420cb443   刘淇   快速工单列表
161
  }
9b30ab8c   刘淇   新增快速工单,原版
162
  
420cb443   刘淇   快速工单列表
163
  // 内容容器
9b30ab8c   刘淇   新增快速工单,原版
164
165
166
167
  .content-wrap {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
420cb443   刘淇   快速工单列表
168
169
  }
  
420cb443   刘淇   快速工单列表
170
  
420cb443   刘淇   快速工单列表
171
  
420cb443   刘淇   快速工单列表
172
  
9b30ab8c   刘淇   新增快速工单,原版
173
  </style>