快速工单样式优化

刘淇
1 parent c7df828a
Showing 8 changed files with 376 additions and 217 deletions
pages-sub/daily/maintain-manage/add-record.vue
pages-sub/daily/maintain-manage/pending-plan-detail.vue
pages-sub/daily/maintain-manage/road-detail-list.vue
pages-sub/daily/patrol-manage/index.vue
pages-sub/problem/work-order-manage/add-order.vue
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
pages.json
@@ -13,8 +13,8 @@
             class="form-item"
         >
           <up-textarea
-              v-model="inspectForm.remark"
-              placeholder="请输入巡查描述"
+              v-model.trim="inspectForm.remark"
+              placeholder="请输入养护描述"
               maxlength="200"
               count
           ></up-textarea>
@@ -25,7 +25,7 @@
             label="上传图片"
             prop="images"
             required
-            border-bottom
+
             class="form-item"
         >
           <up-upload
@@ -41,27 +41,27 @@
           ></up-upload>
         </up-form-item>
-        <!-- 3. 完成进度（滑块） -->
-        <up-form-item
-            label="完成进度"
-            prop="progress"
+<!--        &lt;!&ndash; 3. 完成进度（滑块） &ndash;&gt;-->
+<!--        <up-form-item-->
+<!--            label="完成进度"-->
+<!--            prop="progress"-->
-            class="form-item"
-        >
-          <view class="progress-wrap">
-            <up-slider
-                v-model="inspectForm.progress"
-                :min="initProgress"
-                :max="100"
-                active-color="#1989fa"
-                inactive-color="#e5e5e5"
-                block-size="24"
-                :showValue="true"
-                class="progress-slider"
-                @changing="handleProgressChange"
-            ></up-slider>
-          </view>
-        </up-form-item>
+<!--            class="form-item"-->
+<!--        >-->
+<!--          <view class="progress-wrap">-->
+<!--            <up-slider-->
+<!--                v-model="inspectForm.progress"-->
+<!--                :min="initProgress"-->
+<!--                :max="100"-->
+<!--                active-color="#1989fa"-->
+<!--                inactive-color="#e5e5e5"-->
+<!--                block-size="24"-->
+<!--                :showValue="true"-->
+<!--                class="progress-slider"-->
+<!--                @changing="handleProgressChange"-->
+<!--            ></up-slider>-->
+<!--          </view>-->
+<!--        </up-form-item>-->
       </up-form>
     </view>
@@ -94,7 +94,7 @@ export default {
       initProgress: 0,
       inspectForm: {
         remark: '',
-        progress: 0
+        // progress: 0
       },
       paramsOptins: {},
       inspectFormRules: {
@@ -144,10 +144,10 @@ export default {
   onLoad(option) {
     console.log('页面参数：', option)
     this.paramsOptins = option
-    // 初始化初始进度
-    this.initProgress = option.finishPercent ? Number(option.finishPercent)+1 : 0
-    // 关键修复：初始进度值设为 初始进度+1，避免刚进入就触发校验失败
-    this.inspectForm.progress = this.initProgress
+    // // 初始化初始进度
+    // this.initProgress = option.finishPercent ? Number(option.finishPercent)+1 : 0
+    // // 关键修复：初始进度值设为 初始进度+1，避免刚进入就触发校验失败
+    // this.inspectForm.progress = this.initProgress
     console.log('初始进度值：', this.initProgress)
   },
   onReady() {
@@ -278,18 +278,18 @@ export default {
      * 提交巡查表单
      */
     async submitInspect() {
-      console.log('当前完成进度：', this.inspectForm.progress)
+      // console.log('当前完成进度：', this.inspectForm.progress)
       try {
         await this.$refs.inspectFormRef.validate()
         console.log('图片列表：', this.imagesList)
         const submitData = {
-          totalFinishPercent: this.inspectForm.progress,
+          totalFinishPercent: 100,
           "planNo": this.paramsOptins.planNo,
           "imgHost": "1",
           "beginImg": this.getImgUrlList(this.imagesList),
           "commonUserList": [],
-          "remark": this.inspectForm.remark
+          "remark": this.inspectForm.remark.trim()
         }
         uni.showLoading({ title: '提交中...' })
@@ -40,7 +40,7 @@
             <!-- 已完成次数 + 查看记录按钮 -->
             <view class="u-body-item u-flex common-item-center common-justify-between">
-              <view class="u-body-item-title">已完成比例： {{ i.finishPercent || 0 }} %</view>
+              <view class="u-body-item-title">已完成次数： {{ i.planFinishNum || 0 }} 次</view>
               <view class="u-line-1">
                 <up-button
                     type="primary"
@@ -114,10 +114,10 @@
                 </view>
               </view>
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">已完成比例：</view>
-                <view class="u-line-1 u-body-value">{{ item.finishPercent || 0 }}%</view>
-              </view>
+<!--              <view class="u-body-item u-flex">-->
+<!--                <view class="u-body-item-title">已完成比例：</view>-->
+<!--                <view class="u-line-1 u-body-value">{{ item.finishPercent || 0 }}%</view>-->
+<!--              </view>-->
               <view class="u-body-item u-flex">
                 <view class="u-body-item-title">计划有效期：</view>
@@ -61,6 +61,8 @@
                 <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
               </view>
+
+
               <view class="u-body-item u-flex">
                 <view class="u-body-item-title">所属街道：</view>
                 <view class="u-line-1 u-body-value">{{ item.streetName }}
@@ -5,7 +5,7 @@
           label-position="left"
           :model="workOrderForm"
           ref="workOrderFormRef"
-          labelWidth="160rpx"
+          labelWidth="190rpx"
       >
         <!-- 1. 工单位置（地图选择） -->
         <up-form-item
@@ -34,14 +34,14 @@
         >
           <up-input
               v-model="workOrderForm.roadName"
-              disabled
+              readonly
               disabled-color="#ffffff"
               placeholder="请先选择工单位置"
               border="none"
-              :placeholder-style="workOrderForm.workLocation ? '' : 'color:#999;'"
+
           ></up-input>
           <template #right>
-            <up-icon name="arrow-right" size="16" :color="workOrderForm.workLocation ? '#333' : '#999'"></up-icon>
+            <up-icon name="arrow-right" size="16" ></up-icon>
           </template>
         </up-form-item>
@@ -68,7 +68,7 @@
         <!-- 新增：紧急程度选择 -->
         <up-form-item
             label="紧急程度"
-            prop="pressingType"
+            prop="pressingTypeName"
             border-bottom
             required
             @click="handleActionSheetOpen('pressingType'); hideKeyboard()"
@@ -93,7 +93,7 @@
         >
           <up-textarea
               placeholder="请输入情况描述（最多200字）"
-              v-model="workOrderForm.problemDesc"
+              v-model.trim="workOrderForm.problemDesc"
               count
               maxlength="200"
               rows="4"
@@ -117,11 +117,11 @@
         <!-- 完成时间 -->
         <up-form-item
             label="希望完成时间"
-            prop="finishTime"
+            prop="finishDate"
             @click="show=true;hideKeyboard()"
         >
           <up-input
-              v-model="workOrderForm.finishTime"
+              v-model="workOrderForm.finishDate"
               border="none"
               readonly
               placeholder="点击选择时间"
@@ -154,11 +154,11 @@
     <!-- 完成时间选择器 -->
     <up-datetime-picker
         :show="show"
-        v-model="finishTime"
+        v-model="finishDate"
         mode="datetime"
         :min-date="new Date()"
         @cancel="show = false"
-        @confirm="finishTimeConfirm"
+        @confirm="finishDateConfirm"
     ></up-datetime-picker>
   </view>
 </template>
@@ -168,7 +168,7 @@ import { ref, reactive, watch } from &#39;vue&#39;
 import { onReady, onShow } from '@dcloudio/uni-app';
 import { useUploadImgs } from '@/common/utils/useUploadImgs' // 引入改造后的上传逻辑
 import { getRoadListByLatLng } from '@/api/common'
-import { createQuick } from '@/api/quick-order/quick-order'
+import { workorderCreate } from '@/api/work-order-manage/work-order-manage'
 import { timeFormat } from '@/uni_modules/uview-plus'
 // ========== 表单Ref ==========
@@ -199,7 +199,7 @@ const currentActionSheetData = reactive({
 })
 // 完成时间选择器控制
 const show = ref(false)
-const finishTime = ref(Date.now())
+const finishDate = ref(Date.now())
 // ========== 下拉列表数据 ==========
 const roadNameList = ref([])
@@ -212,12 +212,12 @@ const workOrderForm = reactive({
   roadName: '',                  // 道路名称
   workLocation: '',              // 工单位置
   orderName: '',                 // 工单名称
-  pressingType: 0,               // 紧急程度值（提交接口用）
+  pressingType: '',               // 紧急程度值（提交接口用）
   pressingTypeName: '',          // 紧急程度名称（显示用）
   problemDesc: '',               // 情况描述
   lat: 0,                        // 纬度
   lon: 0,                        // 经度
-  finishTime: '',                // 完成时间
+  finishDate: '',                // 完成时间
 })
 // ========== 表单校验规则 ==========
@@ -231,8 +231,8 @@ const workOrderFormRules = reactive({
   orderName: [
     { type: 'string', required: true, message: '请选择工单名称', trigger: ['change', 'blur'] }
   ],
-  pressingType: [
-    { type: 'number', required: true, message: '请选择紧急程度', trigger: ['change'] }
+  pressingTypeName: [
+    { type: 'string', required: true, message: '请选择紧急程度', trigger: ['change'] }
   ],
   problemDesc: [
     { type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur'] },
@@ -324,7 +324,8 @@ const handleActionSheetSelect = (e) =&gt; {
       workOrderFormRef.value?.validateField('orderName')
       break
     case 'pressingType':
-      workOrderForm.pressingType = Number(e.value)
+      console.log(e)
+      workOrderForm.pressingType =e.value
       workOrderForm.pressingTypeName = e.name
       workOrderFormRef.value?.validateField('pressingType')
       break
@@ -393,9 +394,9 @@ const chooseWorkLocation = () =&gt; {
 /**
  * 完成时间确认
  */
-const finishTimeConfirm = (e) => {
+const finishDateConfirm = (e) => {
   console.log('选择的完成时间：', e)
-  workOrderForm.finishTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
+  workOrderForm.finishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
   show.value = false
 }
@@ -418,17 +419,16 @@ const submitWorkOrder = async () =&gt; {
       roadId: workOrderForm.roadId,
       roadName: workOrderForm.roadName,
       imgs: problemImgs.getSuccessImgUrls(), // 复用上传逻辑的URL获取方法
-      remark: workOrderForm.problemDesc,
+      remark: workOrderForm.problemDesc.trim(),
       latLonType: 2,
       lat: workOrderForm.lat,
       lon: workOrderForm.lon,
       lonLatAddress: workOrderForm.workLocation,
       pressingType: workOrderForm.pressingType,
       orderName: workOrderForm.orderName,
-      finishTime: workOrderForm.finishTime,
+      finishDate: workOrderForm.finishDate,
       sourceId: 1,
       sourceName: '园林',
-      thirdWorkNo: '',
       busiLine: 'yl'
     }
@@ -436,7 +436,7 @@ const submitWorkOrder = async () =&gt; {
     uni.showLoading({ title: '提交中...' })
     // 调用提交接口
-    const res = await createQuick(submitData)
+    const res = await workorderCreate(submitData)
     uni.hideLoading()
     uni.showToast({
@@ -448,7 +448,7 @@ const submitWorkOrder = async () =&gt; {
     // 延迟跳转
     setTimeout(() => {
       uni.redirectTo({
-        url: '/pages-sub/daily/quick-order/index'
+        url: '/pages-sub/problem/work-order-manage/index'
       })
     }, 1000)
   } catch (error) {
@@ -11,13 +11,13 @@
             inactive-color="#666"
             font-size="30rpx"
-            @change="handleTabChange"
+            @click="handleTabChange"
         />
         <!-- 第二行：下拉框 + 搜索框 -->
         <view class="search-header">
           <!-- 左侧下拉框 -->
-          <view class="select-wrap">
+          <view class="select-wrap common-text-color">
             <up-select
                 v-model:current="selectedSortValue"
                 :options="sortOptions"
@@ -55,15 +55,13 @@
     >
     <template #empty>
-      <view class="empty-view" style="padding: 100rpx 0; text-align: center; color: #999;">
-        暂无工单数据
-      </view>
+      <empty-view />
     </template>
-    <view class="common-card-list" slot="top">
+    <view class="common-card-list" style="padding-top: 200rpx;padding-bottom: 30rpx">
       <!-- 待办工单卡片 -->
       <up-card
-          v-if="activeTab === 0"
+          v-if="activeTab == 1"
           :border="false"
           :foot-border-top="false"
           v-for="(item, index) in orderList"
@@ -89,10 +87,10 @@
               <view class="u-body-item-title">情况描述：</view>
               <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
             </view>
-            <view class="u-body-item u-flex">
+            <view class="u-body-item u-flex  common-item-center common-justify-between">
               <view class="u-body-item-title">紧急程度：</view>
               <view class="u-line-1 u-body-value">
-                <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
+                {{uni.$dict.getDictLabel('workorder_pressing_type',item.pressingType)}}
               </view>
             </view>
             <view class="u-body-item u-flex">
@@ -109,9 +107,9 @@
         </template>
       </up-card>
-      <!-- 已办工单卡片 -->
+      <!-- 已办工单卡片和我发起的 -->
       <up-card
-          v-if="activeTab === 1"
+          v-if="activeTab == 2||activeTab == 0"
           :border="false"
           :foot-border-top="false"
           v-for="(item, index) in orderList"
@@ -137,14 +135,13 @@
               <view class="u-body-item-title">情况描述：</view>
               <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
             </view>
+
+
             <view class="u-body-item u-flex common-justify-between common-item-center">
-              <view class="u-flex">
-                <view class="u-body-item-title">紧急程度：</view>
-                <view class="u-line-1 u-body-value">
-                  <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
+                <view class="u-body-item-title">紧急程度： {{uni.$dict.getDictLabel('workorder_pressing_type',item.pressingType)}}</view>
+                <view class=" ">
+                  <up-button type="primary" size="mini" @click="handleDetail(item)">工单详情</up-button>
                 </view>
-              </view>
-              <up-button type="info" size="mini" @click="handleDetail(item)">工单详情</up-button>
             </view>
             <view class="u-body-item u-flex">
               <view class="u-body-item-title">提交时间：</view>
@@ -196,16 +193,21 @@
 </template>
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
+import { onReady, onShow } from '@dcloudio/uni-app';
 import { timeFormat } from '@/uni_modules/uview-plus';
+import { myBuzSimplePage, todoBuzSimplePage, doneBuzSimplePage } from '@/api/work-order-manage/work-order-manage'
 // 假设从用户store获取角色信息
 import { useUserStore } from '@/pinia/user';
+import { getDictLabel } from "../../../common/utils/dict";
+import EmptyView from "../../../components/empty-view/empty-view.vue";
 // ========== 状态管理 ==========
 const userStore = useUserStore();
 // 标签页切换
-const activeTab = ref(0); // 0-待办 1-已办
+const activeTab = ref(0); // 0-我发起的 1-待办 2-已办
 const tabList = ref([
+  { name: '我发起的任务' },
   { name: '待办' },
   { name: '已办' }
 ]);
@@ -225,7 +227,7 @@ const orderList = ref([]);
 // 角色控制（巡查员显示新增按钮）
 const isInspector = computed(() => {
   // 假设用户角色字段为role，巡查员标识为inspector
-  return userStore.userInfo.roles === 'yl_inspector';
+  return userStore.userInfo.roles.includes('yl_inspector')
 });
 // 回退弹窗相关
 const rejectPopupShow = ref(false);
@@ -235,28 +237,8 @@ const currentRejectItem = ref(null);
 // 上传地址（根据实际接口配置）
 const uploadUrl = ref('https://xxx.com/upload');
-// ========== 接口请求 ==========
-// 待办工单接口
-const getTodoOrderList = async (params) => {
-  // 替换为实际待办工单接口
-  const res = await uni.request({
-    url: '/api/order/todo',
-    method: 'POST',
-    data: params
-  });
-  return res.data;
-};
-// 已办工单接口
-const getDoneOrderList = async (params) => {
-  // 替换为实际已办工单接口
-  const res = await uni.request({
-    url: '/api/order/done',
-    method: 'POST',
-    data: params
-  });
-  return res.data;
-};
+
 // 分页查询列表
 const queryList = async (pageNo, pageSize) => {
@@ -269,12 +251,15 @@ const queryList = async (pageNo, pageSize) =&gt; {
     };
     let res;
-    if (activeTab.value === 0) {
+    if (activeTab.value == 0) {
+      // 我发起的任务
+      res = await myBuzSimplePage(apiParams);
+    } else if(activeTab.value == 1) {
       // 待办工单
-      res = await getTodoOrderList(apiParams);
-    } else {
+      res = await todoBuzSimplePage(apiParams);
+    }else {
       // 已办工单
-      res = await getDoneOrderList(apiParams);
+      res = await doneBuzSimplePage(apiParams);
     }
     // 适配z-paging分页
@@ -288,8 +273,9 @@ const queryList = async (pageNo, pageSize) =&gt; {
 // ========== 事件处理 ==========
 // 标签页切换
-const handleTabChange = (index) => {
-  activeTab.value = index;
+const handleTabChange = (item) => {
+  console.log(item)
+  activeTab.value = item.index;
   paging.value?.reload(); // 切换标签页刷新列表
 };
@@ -308,8 +294,9 @@ const handleSearch = (val) =&gt; {
 // 工单详情
 const handleDetail = (item) => {
+  // 0-我发起的 1-待办 2-已办
   uni.navigateTo({
-    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
+    url: `/pages-sub/problem/work-order-manage/order-detail?taskId=${item.taskId}&activeTab=${activeTab.value}`
   });
 };
@@ -381,19 +368,7 @@ const handleAddOrder = () =&gt; {
   });
 };
-// 紧急程度标签类型转换
-const getUrgencyType = (level) => {
-  switch (level) {
-    case '紧急':
-      return 'danger';
-    case '重要':
-      return 'warning';
-    case '普通':
-      return 'info';
-    default:
-      return 'default';
-  }
-};
+
 // 上传图片-读取后
 const handleAfterRead = (file) => {
@@ -406,7 +381,7 @@ const handleDeleteFile = (index) =&gt; {
 };
 // 页面初始化
-onMounted(() => {
+onShow(() => {
   // 初始化加载列表
   paging.value?.reload();
 });
@@ -415,13 +390,12 @@ onMounted(() =&gt; {
 <style scoped lang="scss">
 .page-container {
   min-height: 100vh;
-  background-color: #f8f8f8;
 }
 // 顶部固定区域
 .header-wrap {
   background-color: #fff;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  //box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
 // 搜索栏样式
@@ -450,98 +424,5 @@ onMounted(() =&gt; {
   }
 }
-// 工单卡片样式
-.common-card-list {
-  padding: 20rpx;
-}
-
-.order-card {
-  margin-bottom: 20rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  overflow: hidden;
-}
-
-.card-body {
-  padding: 20rpx;
-
-  .u-body-item {
-    margin-bottom: 16rpx;
-    font-size: 28rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .u-body-item-title {
-      color: #666;
-      min-width: 120rpx;
-    }
-
-    .u-body-value {
-      color: #333;
-      flex: 1;
-    }
-  }
-
-  .mt-20 {
-    margin-top: 20rpx;
-  }
-}
-
-// 公共flex样式
-.u-flex {
-  display: flex;
-  align-items: center;
-}
-
-.common-justify-between {
-  justify-content: space-between;
-}
-.common-item-center {
-  align-items: center;
-}
-
-// 底部按钮
-.fixed-bottom-btn-wrap {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20rpx;
-  background-color: #fff;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-  :deep(.u-button) {
-    width: 100%;
-    height: 88rpx;
-    font-size: 32rpx;
-  }
-}
-
-// 回退弹窗样式
-.reject-popup {
-  width: 680rpx;
-  padding: 30rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-
-  .popup-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .upload-title {
-    font-size: 28rpx;
-    color: #666;
-    margin-bottom: 10rpx;
-  }
-
-  .popup-btn-wrap {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
 </style>
 \ No newline at end of file
+<template>
+  <view class="page-container">
+    <!-- 页面级加载组件 -->
+    <up-loading-page
+        v-if="loading"
+        :loading="true"
+        title="加载中..."
+        color="#3c9cff"
+    ></up-loading-page>
+
+    <!-- 主内容容器 -->
+    <view v-else class="main-content">
+      <!-- 顶部固定Tabs -->
+      <up-tabs
+          v-model="activeTopTab"
+          :list="topTabList"
+          :scrollable="false"
+          sticky
+          active-color="#3c9cff"
+          inactive-color="#666"
+          class="top-tabs"
+          @click="activeTopTabClick"
+      ></up-tabs>
+
+      <!-- 顶部Tab内容区 -->
+      <view class="tab-content">
+        <!-- 1. 工单详情Tab -->
+        <view v-show="activeTopTab == 0" class="detail-content">
+          <up-cell-group :border="false"  class="detail-cell-group">
+            <!-- 工单编号 -->
+            <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>
+            <!-- 工单位置 -->
+
+            <up-cell  align="middle">
+
+              <template #title>
+                <view  style="min-width: 200rpx">工单位置</view>
+              </template>
+              <template #value>
+                <view class="common-text-color up-line-1">{{ orderDetail.roadName || '--' }}</view>
+              </template>
+            </up-cell>
+            <!-- 工单名称 -->
+            <up-cell title="工单名称" :value="orderDetail.orderName || '--'" align="middle"></up-cell>
+            <!-- 情况描述 -->
+            <up-cell >
+              <template #title>
+                <view  style="min-width: 200rpx">情况描述</view>
+              </template>
+              <template #value>
+                <view class="common-text-color up-line-1">{{ orderDetail.remark || '--' }}</view>
+              </template>
+            </up-cell>
+            <!-- 紧急程度 -->
+            <up-cell
+                title="紧急程度"
+                :value="uni.$dict.getDictLabel('workorder_pressing_type', orderDetail.pressingType) || '--'"
+                align="middle"
+            ></up-cell>
+
+            <!-- 问题照片 -->
+            <up-cell title="问题照片">
+              <template #value>
+                <view class="cell-content-wrap">
+                  <up-album
+                      v-if="!!orderDetail.problemImgsList?.length"
+                      :urls="orderDetail.problemImgsList.slice(0, 3)"
+                      singleSize="70"
+                      :preview-full-image="true"
+                  ></up-album>
+                  <text v-else class="empty-text">暂无问题照片</text>
+                </view>
+              </template>
+            </up-cell>
+            <!-- 希望完成时间 -->
+            <up-cell
+                title="希望完成时间"
+                :value="timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss') || '--'"
+                align="middle"
+                :border="false"
+            ></up-cell>
+          </up-cell-group>
+
+
+          <!-- 图片分类Tabs区块 -->
+<!--          <view class="img-tabs-block">-->
+<!--            <up-tabs-->
+<!--                v-model="activeImgTab"-->
+<!--                :list="imgTabList"-->
+<!--                :scrollable="false"-->
+<!--                active-color="#3c9cff"-->
+<!--                inactive-color="#666"-->
+<!--                class="img-tabs"-->
+<!--            ></up-tabs>-->
+
+<!--            &lt;!&ndash; 图片Tab内容区 &ndash;&gt;-->
+<!--            <view class="img-tab-content">-->
+<!--              <up-album-->
+<!--                  v-if="getCurrentImgList().length"-->
+<!--                  :urls="getCurrentImgList().slice(0, 3)"-->
+<!--                  singleSize="100"-->
+<!--                  :preview-full-image="true"-->
+<!--                  class="img-album"-->
+<!--              ></up-album>-->
+<!--              <text v-else class="empty-img-text">暂无{{ imgTabList[activeImgTab].name }}图片</text>-->
+<!--            </view>-->
+<!--          </view>-->
+        </view>
+
+        <!-- 2. 流程节点Tab -->
+        <view v-show="activeTopTab == 1" class="process-content">
+          <up-empty
+              mode="data"
+
+          ></up-empty>
+          <!-- 可根据实际需求补充流程节点展示逻辑 -->
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { timeFormat } from '@/uni_modules/uview-plus';
+import { getMyTaskDetail, getDoneTaskDetail, getTodoTaskDetail } from '@/api/work-order-manage/work-order-manage';
+
+// 状态管理
+const loading = ref(true);
+const activeTopTab = ref(0); // 顶部Tab激活索引
+const activeImgTab = ref(0); // 图片分类Tab激活索引
+
+// 顶部Tab列表
+const topTabList = ref([
+  { name: '工单详情' },
+  { name: '流程节点' }
+]);
+
+const activeTopTabClick = (item)=>{
+  console.log(item)
+  activeTopTab.value = item.index
+}
+
+// 图片分类Tab列表（带角标配置）
+const imgTabList = ref([
+  { name: '开始', badge: { isDot: true } },
+  { name: '进行中' },
+  { name: '结束', badge: { isDot: true } },
+  { name: '人员' },
+  { name: '材料' }
+]);
+
+// 工单详情数据
+const orderDetail = ref({});
+
+/**
+ * 获取当前激活的图片列表
+ */
+const getCurrentImgList = computed(() => {
+  const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
+  return orderDetail[tabKeyMap[activeImgTab.value]] || [];
+});
+
+/**
+ * 获取工单详情
+ */
+const getMyTaskDetailQuery = async (taskId) => {
+  try {
+    loading.value = true;
+    const res = await getMyTaskDetail({ taskId });
+    console.log('工单详情接口返回：', res);
+    orderDetail.value = res
+
+  } catch (error) {
+    console.error('获取工单详情失败：', error);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 页面加载
+onLoad((options) => {
+  console.log(options)
+  const { taskId, activeTab } = options;
+  // 0-我发起的 1-待办 2-已办
+  console.log(taskId)
+  if(activeTab==0){
+    getMyTaskDetailQuery(taskId);
+  }
+
+});
+</script>
+
+<style scoped lang="scss">
+// 全局样式
+.page-container {
+  min-height: 100vh;
+
+}
+
+// 主内容容器
+.main-content {
+  padding-bottom: 20rpx;
+}
+
+// 顶部Tabs
+.top-tabs {
+  //background-color: #fff;
+}
+
+// Tab内容区
+.tab-content {
+  padding: 16rpx;
+}
+
+// 工单详情内容
+.detail-content {
+  .detail-cell-group {
+    background-color: #fff;
+
+    margin-bottom: 20rpx;
+  }
+
+
+  .cell-content-wrap {
+    //display: flex;
+    //flex-wrap: wrap;
+    //gap: 12rpx;
+  }
+
+
+}
+
+// 图片分类Tabs区块
+.img-tabs-block {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 16rpx;
+
+  // 图片Tabs样式（平均分配空间）
+  .img-tabs {
+    --u-tabs-item-flex: 1; // 平均分配空间
+    --u-tabs-item-font-size: 26rpx;
+    --u-tabs-item-height: 72rpx;
+    margin-bottom: 16rpx;
+  }
+
+  // 图片内容区
+  .img-tab-content {
+    padding: 10rpx 0;
+    min-height: 120rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .img-album {
+      width: 100%;
+    }
+
+  }
+}
+
+// 流程节点空状态
+.process-content {
+  .empty-process {
+    margin-top: 100rpx;
+  }
+}
+</style>
 \ No newline at end of file
@@ -129,6 +129,11 @@
 					"style": { "navigationBarTitleText": "新增工单" }
 				},
+				{
+					"path": "work-order-manage/order-detail",
+					"style": { "navigationBarTitleText": "工单详情" }
+				},
+
 				{
 					"path": "problem-allot/index",