快速工单加上业务线

刘淇
1 parent 6c3b6516
Showing 14 changed files with 2067 additions and 205 deletions
App.vue
api/work-order-manage/work-order-manage.js
pages-sub/daily/maintain-manage/index.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/daily/patrol-manage/pending-plan-detail.vue
pages-sub/daily/quick-order/add-order.vue
pages-sub/problem/regional-order-manage/index.vue
pages-sub/problem/regional-order-manage/order-detail.vue
pages-sub/problem/work-order-manage/add-order.vue
pages-sub/problem/work-order-manage/distribution-order.vue
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
@@ -128,4 +128,6 @@ page {
   font-size: 14px;
   color: #606266
 }
+
+
 </style>
 \ No newline at end of file
@@ -110,3 +110,24 @@ export const todoBuzSimplePage = (params) =&gt; {
 export const workorderCreate = (data) => {
   return post('/app-api/bpm/garden/workorder/create',data);
 };
+
+
+/**
+ *  大区经理问题工单创建
+ * @returns {Promise}
+ */
+export const regionmgrWorkorderCreat = (data) => {
+  return post('/app-api/bpm/regionmgr/workorder',data);
+};
+
+/**
+ *   app端统一审批入口  -- 大区经理
+ * @returns {Promise}
+ */
+export const regionmgrUniversalApproval = (params) => {
+  return post('/app-api/bpm/regionmgr/workorder/universalApproval',params);
+};
+
+
+
+
@@ -83,7 +83,7 @@
               <view class="u-body-item u-flex common-item-center common-justify-between">
                 <view class="u-body-item-title">养护级别： {{uni.$dict.getDictLabel('conserve_level', item.levelId) || '-'}}</view>
-                <view class="u-line-1">
+                <view class="">
                   <up-button
                       type="primary"
                       size="mini"
@@ -95,12 +95,12 @@
                 </view>
               </view>
-              <view class="u-body-item u-flex">
-                <view class="u-body-item-title">计划时间：</view>
-                <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至
-                  {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}
-                </view>
-              </view>
+<!--              <view class="u-body-item u-flex">-->
+<!--                <view class="u-body-item-title">计划时间：</view>-->
+<!--                <view class="u-line-1 u-body-value">{{ timeFormat(item.beginTime, 'yyyy-mm-dd') || '-' }} 至-->
+<!--                  {{ timeFormat(item.endTime, 'yyyy-mm-dd') || '-' }}-->
+<!--                </view>-->
+<!--              </view>-->
             </view>
           </template>
         </up-card>
@@ -138,7 +138,7 @@
               <view class="u-body-item u-flex common-item-center common-justify-between">
                 <view class="u-body-item-title">计划完成次数： {{ item.planNum || 0 }}</view>
-                <view class="u-line-1" v-if="item.finishState!==3">
+                <view class="" v-if="item.finishState!==3">
                   <up-button
                       type="primary"
                       size="mini"
@@ -41,13 +41,13 @@
             <!-- 已完成次数 + 查看记录按钮 -->
             <view class="u-body-item u-flex common-item-center common-justify-between">
               <view class="u-body-item-title">已完成次数： {{ i.planFinishNum || 0 }} 次</view>
-              <view class="u-line-1">
+              <view class="">
                 <up-button
                     type="primary"
                     size="mini"
                     @click="gotoFinishPlanDetail(i)"
                     class="submit-record-btn"
-                    :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
+
                 >
                   查看记录
                 </up-button>
@@ -76,7 +76,7 @@
               <view class="u-body-item u-flex common-item-center common-justify-between">
                 <view class="u-body-item-title">计划完成次数： {{ item.planNum || 0 }}</view>
-                <view class="u-line-1">
+                <view class="">
                   <up-button
                       type="primary"
                       size="mini"
@@ -71,7 +71,7 @@
               <view class="u-body-item u-flex common-item-center common-justify-between">
                 <view class="u-body-item-title">养护级别： {{uni.$dict.getDictLabel('conserve_level', item.levelId) || '-'}}</view>
-                <view class="u-line-1">
+                <view class="">
                   <up-button
                       type="primary"
                       size="mini"
@@ -36,7 +36,7 @@
             <view class="u-body-item u-flex common-item-center common-justify-between">
               <view class="u-body-item-title">计划完成次数： {{ item.planNum || 0 }}</view>
-              <view class="u-line-1">
+              <view class="">
                 <up-button
                     v-if="item.finishState ==3"
                     type="primary"
@@ -8,6 +8,27 @@
           ref="workOrderFormRef"
           labelWidth="160rpx"
       >
+
+        <up-form-item
+            label="业务线"
+            prop="busiLineCn"
+            border-bottom
+            required
+        >
+          <up-radio-group
+              v-model="workOrderForm.busiLineCn"
+              placement="row"
+              @change="handleBusiLineChange"
+          >
+            <up-radio
+                v-for="item in busiLineOptions"
+                :key="item.name"
+                :label="item.name"
+                :name="item.name"
+            ></up-radio>
+          </up-radio-group>
+
+        </up-form-item>
         <!-- 1. 工单位置（地图选择） -->
         <up-form-item
             label="工单位置"
@@ -39,7 +60,6 @@
               disabled-color="#ffffff"
               placeholder="请先选择工单位置"
               border="none"
-
           ></up-input>
           <template #right>
             <up-icon name="arrow-right" size="16" ></up-icon>
@@ -154,24 +174,25 @@
   </view>
 </template>
-<script setup lang="ts">
-import {ref} from 'vue'
-
-import type {UniFormRef} from '@/uni_modules/uview-plus/types'
-// 定义ref供选项式API使用
-const workOrderFormRef = ref<UniFormRef>(null)
-
-</script>
-
 <script lang="ts">
-import {getRoadListByLatLng} from '@/api/common'
-import {uploadImages} from '@/common/utils/upload';
-import {createQuick} from '@/api/quick-order/quick-order'
-
+import { getRoadListByLatLng } from '@/api/common'
+import { uploadImages } from '@/common/utils/upload';
+import { createQuick } from '@/api/quick-order/quick-order'
+import { useUserStore } from '@/pinia/user';
 export default {
   data() {
     return {
+      // 业务线相关
+      busiLineMap: {
+        'yl': '园林',
+        'sz': '市政',
+        'wy': '物业',
+        '园林': 'yl',
+        '市政': 'sz',
+        '物业': 'wy'
+      },
+      busiLineOptions: [], // 业务线选项列表
       // 问题照片列表
       problemImgsList: [],
       // 完成照片列表
@@ -181,36 +202,36 @@ export default {
       showOrderName: false,
       // 下拉列表数据
       roadNameList: [],
-      orderNameList: [
-        // {name: '绿地卫生', code: 'ORDER001'},
-        // {name: '设施维修', code: 'ORDER002'},
-        // {name: '垃圾清理', code: 'ORDER003'}
-      ],
+      orderNameList: [],
       // 工单表单数据
       workOrderForm: {
+        busiLineCn: '', // 业务线中文名称
         roadId: 0,                     // 道路ID
         roadName: '',                  // 道路名称
         workLocation: '',              // 工单位置
         orderName: '',                 // 工单名称
         problemDesc: '',               // 情况描述
-        handleResult: '',          // 处理结果描述（不必填）
+        handleResult: '',              // 处理结果描述（不必填）
         lat: 0,                        // 纬度
         lon: 0                         // 经度
       },
       // 表单校验规则
       workOrderFormRules: {
+        busiLineCn: [ // 业务线必选校验
+          { type: 'string', required: true, message: '请选择业务线', trigger: ['change', 'blur'] }
+        ],
         workLocation: [
-          {type: 'string', required: true, message: '请选择工单位置', trigger: ['change', 'blur']}
+          { type: 'string', required: true, message: '请选择工单位置', trigger: ['change', 'blur'] }
         ],
         roadName: [
-          {type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur']}
+          { type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur'] }
         ],
         orderName: [
-          {type: 'string', required: true, message: '请选择工单名称', trigger: ['change', 'blur']}
+          { type: 'string', required: true, message: '请选择工单名称', trigger: ['change', 'blur'] }
         ],
         problemDesc: [
-          {type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur']},
-          {type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur']}
+          { type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur'] },
+          { type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur'] }
         ],
         problemImgs: [
           {
@@ -218,7 +239,6 @@ export default {
             message: '请上传问题照片',
             trigger: 'change',
             validator: (rule, value, callback) => {
-              // 自定义校验规则：检查是否有成功上传的图片
               const hasSuccessImg = this.problemImgsList.some(item => item.status === 'success')
               hasSuccessImg ? callback() : callback(new Error('请上传至少1张问题照片'))
             }
@@ -230,75 +250,145 @@ export default {
             message: '请上传完成照片',
             trigger: 'change',
             validator: (rule, value, callback) => {
-              // 自定义校验规则：检查是否有成功上传的图片
               const hasSuccessImg = this.completeImgsList.some(item => item.status === 'success')
               hasSuccessImg ? callback() : callback(new Error('请上传至少1张完成照片'))
             }
           }
-        ],
-
+        ]
       }
     }
   },
+  onLoad() {
+    // 初始化业务线选项
+    this.initBusiLineOptions();
+    // 默认选中第一个业务线
+    if (this.busiLineOptions && this.busiLineOptions.length > 0) {
+      this.workOrderForm.busiLineCn = this.busiLineOptions[0].name;
+      console.log('默认选中业务线：', this.workOrderForm.busiLineCn);
+    }
+  },
   onReady() {
-    // 兼容微信小程序，通过setRules设置校验规则
-    this.$refs.workOrderFormRef.setRules(this.workOrderFormRules)
-    console.log('工单表单规则初始化完成')
+    // 设置表单校验规则
+    this.$refs.workOrderFormRef.setRules(this.workOrderFormRules);
+    console.log('工单表单规则初始化完成');
   },
-  onShow(){
-    console.log(uni.$dict.getDictLabel('ai_image_status', 20))
-    console.log(uni.$dict.getDictSimpleList('work_name'))
-    this.orderNameList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
-    console.log(this.orderNameList)
+  onShow() {
+    this.orderNameList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'));
+    console.log('工单名称列表：', this.orderNameList);
   },
   methods: {
+    // 初始化业务线选项
+    initBusiLineOptions() {
+      // 获取pinia中的用户信息
+      const userStore = useUserStore();
+      if (userStore.userInfo?.user?.busiLine) {
+        const rawBusiLines = userStore.userInfo.user.busiLine.split(',');
+        // 生成中文名称列表
+        this.busiLineOptions = rawBusiLines.map(item => ({
+          name: this.busiLineMap[item.trim()] // name=中文名称（园林/市政/物业）
+        }));
+      }
+      console.log('业务线选项：', this.busiLineOptions);
+    },
+    // 工具方法：通过中文名称获取对应的英文标识
+    getBusiLineEnByCn(cnName) {
+      return this.busiLineMap[cnName] || '';
+    },
+    // 业务线切换事件
+    handleBusiLineChange() {
+      // 清空道路信息
+      this.workOrderForm.roadName = '';
+      this.workOrderForm.roadId = 0;
+      this.roadNameList = [];
+      // 若已选择位置，重新请求对应业务线的道路列表
+      if (this.workOrderForm.workLocation) {
+        this.getRoadListByBusiLine();
+      }
+    },
+    // 根据选中业务线请求道路列表
+    async getRoadListByBusiLine() {
+      if (!this.workOrderForm.lat || !this.workOrderForm.lon) {
+        return;
+      }
+      // 中文转英文标识
+      const busiLineEn = this.getBusiLineEnByCn(this.workOrderForm.busiLineCn);
+      if (!busiLineEn) {
+        uni.showToast({ title: '业务线标识异常', icon: 'none' });
+        return;
+      }
+
+      try {
+        uni.showLoading({ title: '获取道路名称中...' });
+        const roadRes = await getRoadListByLatLng({
+          busiLine: busiLineEn, // 传递业务线英文标识
+          latitude: this.workOrderForm.lat,
+          longitude: this.workOrderForm.lon
+        });
+        uni.hideLoading();
+        if (Array.isArray(roadRes)) {
+          this.roadNameList = roadRes.map((item) => ({
+            name: item.roadName || '',
+            code: item.roadCode || '',
+            id: item.roadId || 0
+          }));
+        } else {
+          this.roadNameList = [{ name: '未查询到道路名称', code: '', id: 0 }];
+          uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' });
+        }
+      } catch (err) {
+        uni.hideLoading();
+        console.error('获取道路名称失败：', err);
+        uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' });
+        this.roadNameList = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }];
+      }
+    },
     /**
      * 返回上一页
      */
     navigateBack() {
-      uni.navigateBack()
+      uni.navigateBack();
     },
     /**
      * 删除图片
      */
     deleteImg(event, type) {
-      console.log('删除图片事件：', event, '类型：', type)
+      console.log('删除图片事件：', event, '类型：', type);
       if (type === 'problemImgsList') {
-        this.problemImgsList.splice(event.index, 1)
+        this.problemImgsList.splice(event.index, 1);
       } else if (type === 'completeImgsList') {
-        this.completeImgsList.splice(event.index, 1)
+        this.completeImgsList.splice(event.index, 1);
       }
       // 删除图片后重新校验图片字段
       if (type === 'problemImgsList') {
-        this.$refs.workOrderFormRef.validateField('problemImgs')
+        this.$refs.workOrderFormRef.validateField('problemImgs');
       } else if (type === 'completeImgsList') {
-        this.$refs.workOrderFormRef.validateField('completeImgs')
+        this.$refs.workOrderFormRef.validateField('completeImgs');
       }
-      uni.showToast({title: '图片删除成功', icon: 'success'})
+      uni.showToast({ title: '图片删除成功', icon: 'success' });
     },
     /**
      * 上传图片
      */
     async uploadImgs(event, type) {
-      console.log('上传图片事件：', event, '类型：', type)
-      const fileList = Array.isArray(event.file) ? event.file : [event.file]
-      const targetImgList = type === 'problemImgsList' ? this.problemImgsList : this.completeImgsList
+      console.log('上传图片事件：', event, '类型：', type);
+      const fileList = Array.isArray(event.file) ? event.file : [event.file];
+      const targetImgList = type === 'problemImgsList' ? this.problemImgsList : this.completeImgsList;
-      const filePaths = fileList.map(item => item.url)
+      const filePaths = fileList.map(item => item.url);
       const tempItems = fileList.map(item => ({
         ...item,
         status: 'uploading',
         message: '上传中'
-      }))
-      const startIndex = targetImgList.length
-      targetImgList.push(...tempItems)
+      }));
+      const startIndex = targetImgList.length;
+      targetImgList.push(...tempItems);
       try {
         const uploadResultUrls = await uploadImages({
           filePaths: filePaths,
           ignoreError: true
-        })
-        console.log('上传成功的URL列表：', uploadResultUrls)
+        });
+        console.log('上传成功的URL列表：', uploadResultUrls);
         uploadResultUrls.forEach((url, index) => {
           if (targetImgList[startIndex + index]) {
@@ -307,150 +397,131 @@ export default {
               status: 'success',
               message: '',
               url: url
-            })
+            });
           }
-        })
+        });
         if (uploadResultUrls.length < fileList.length) {
-          const failCount = fileList.length - uploadResultUrls.length
+          const failCount = fileList.length - uploadResultUrls.length;
           for (let i = uploadResultUrls.length; i < fileList.length; i++) {
             if (targetImgList[startIndex + i]) {
               targetImgList.splice(startIndex + i, 1, {
                 ...fileList[i],
                 status: 'failed',
                 message: '上传失败'
-              })
+              });
             }
           }
-          uni.showToast({title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none'})
+          uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' });
         } else {
-          uni.showToast({title: `成功上传${fileList.length}张图片`, icon: 'success'})
+          uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' });
         }
         // 上传完成后重新校验图片字段
         if (type === 'problemImgsList') {
-          this.$refs.workOrderFormRef.validateField('problemImgs')
+          this.$refs.workOrderFormRef.validateField('problemImgs');
         } else if (type === 'completeImgsList') {
-          this.$refs.workOrderFormRef.validateField('completeImgs')
+          this.$refs.workOrderFormRef.validateField('completeImgs');
         }
       } catch (err) {
-        console.error('图片上传失败：', err)
+        console.error('图片上传失败：', err);
         for (let i = 0; i < fileList.length; i++) {
           if (targetImgList[startIndex + i]) {
             targetImgList.splice(startIndex + i, 1, {
               ...fileList[i],
               status: 'failed',
               message: '上传失败'
-            })
+            });
           }
         }
-        uni.showToast({title: '图片上传失败，请重试', icon: 'none'})
+        uni.showToast({ title: '图片上传失败，请重试', icon: 'none' });
         // 上传失败后重新校验图片字段
         if (type === 'problemImgsList') {
-          this.$refs.workOrderFormRef.validateField('problemImgs')
+          this.$refs.workOrderFormRef.validateField('problemImgs');
         } else if (type === 'completeImgsList') {
-          this.$refs.workOrderFormRef.validateField('completeImgs')
+          this.$refs.workOrderFormRef.validateField('completeImgs');
         }
       }
     },
     /**
-     * 选择工单位置（移除isSubmitting判断）
+     * 选择工单位置
      */
     chooseWorkLocation() {
-      let that = this
+      let that = this;
       uni.chooseLocation({
         success: async (res) => {
-          that.workOrderForm.roadName = ''
-          that.workOrderForm.roadId = 0
-          that.roadNameList = []
-
-          that.workOrderForm.workLocation = res.name
-          that.workOrderForm.lat = res.latitude
-          that.workOrderForm.lon = res.longitude
-
-          that.$refs.workOrderFormRef.validateField('workLocation')
-          that.$refs.workOrderFormRef.validateField('roadName')
-
-          try {
-            uni.showLoading({title: '获取道路名称中...'})
-            const roadRes = await getRoadListByLatLng({
-              companyCode: 'sls',
-              latitude: res.latitude,
-              longitude: res.longitude
-            })
-            uni.hideLoading()
-
-            if (Array.isArray(roadRes)) {
-              that.roadNameList = roadRes.map((item) => ({
-                name: item.roadName || '',
-                code: item.roadCode || '',
-                id: item.roadId || 0
-              }))
-            } else {
-              that.roadNameList = [{name: '未查询到道路名称', code: '', id: 0}]
-              uni.showToast({title: '未查询到该位置的道路信息', icon: 'none'})
-            }
-          } catch (err) {
-            uni.hideLoading()
-            console.error('获取道路名称失败：', err)
-            uni.showToast({title: '获取道路名称失败，请重试', icon: 'none'})
-            that.roadNameList = [{name: '获取失败，请重新选择位置', code: '', id: 0}]
-          }
+          that.workOrderForm.roadName = '';
+          that.workOrderForm.roadId = 0;
+          that.roadNameList = [];
+
+          that.workOrderForm.workLocation = res.name;
+          that.workOrderForm.lat = res.latitude;
+          that.workOrderForm.lon = res.longitude;
+
+          that.$refs.workOrderFormRef.validateField('workLocation');
+          that.$refs.workOrderFormRef.validateField('roadName');
+
+          // 调用封装的方法，自动携带业务线
+          await that.getRoadListByBusiLine();
         },
         fail: (err) => {
-          console.error('选择位置失败：', err)
-          uni.showToast({title: '选择位置失败：' + err.errMsg, icon: 'none'})
+          console.error('选择位置失败：', err);
+          uni.showToast({ title: '选择位置失败：' + err.errMsg, icon: 'none' });
         }
-      })
+      });
     },
     /**
      * 选择道路名称
      */
     handleRoadNameSelect(e) {
-      console.log('选择道路名称：', e)
-      this.workOrderForm.roadName = e.name
-      this.workOrderForm.roadId = e.code
-      this.showRoadName = false
-      this.$refs.workOrderFormRef.validateField('roadName')
+      console.log('选择道路名称：', e);
+      this.workOrderForm.roadName = e.name;
+      this.workOrderForm.roadId = e.code;
+      this.showRoadName = false;
+      this.$refs.workOrderFormRef.validateField('roadName');
     },
     /**
      * 选择工单名称
      */
     handleOrderNameSelect(e) {
-      console.log(e)
-      this.workOrderForm.orderName = e.name
-      this.showOrderName = false
-      this.$refs.workOrderFormRef.validateField('orderName')
+      console.log(e);
+      this.workOrderForm.orderName = e.name;
+      this.showOrderName = false;
+      this.$refs.workOrderFormRef.validateField('orderName');
     },
     /**
      * 隐藏键盘
      */
     hideKeyboard() {
-      uni.hideKeyboard()
+      uni.hideKeyboard();
     },
     /**
      * 提取图片URL数组
      */
     getImgUrlList(imgList) {
-      return imgList.filter(item => item.status === 'success').map(item => item.url)
+      return imgList.filter(item => item.status === 'success').map(item => item.url);
     },
     /**
-     * 提交工单（添加成功跳转逻辑）
-     */
-    /**
-     * 提交工单（添加成功跳转逻辑）
+     * 提交工单
      */
     async submitWorkOrder() {
       try {
-        // 先执行表单校验（改用async/await写法，更易维护）
-        await this.$refs.workOrderFormRef.validate()
+        // 先执行表单校验
+        await this.$refs.workOrderFormRef.validate();
+
+        // 中文转英文标识
+        const busiLineEn = this.getBusiLineEnByCn(this.workOrderForm.busiLineCn);
+        if (!busiLineEn) {
+          uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
+          return;
+        }
         const submitData = {
           roadId: this.workOrderForm.roadId,
           roadName: this.workOrderForm.roadName,
           problemsImgs: this.getImgUrlList(this.problemImgsList),
-          endImgs : this.getImgUrlList(this.completeImgsList),
+          endImgs: this.getImgUrlList(this.completeImgsList),
           remark: this.workOrderForm.problemDesc.trim(),
           handleResult: this.workOrderForm.handleResult.trim(),
           latLonType: 2,
@@ -460,50 +531,43 @@ export default {
           pressingType: 2,
           orderName: this.workOrderForm.orderName,
           sourceId: 1,
-          sourceName: '园林',
+          sourceName: this.workOrderForm.busiLineCn, // 业务线中文名称
           thirdWorkNo: '',
-          busiLine:'yl'
-        }
+          busiLine: busiLineEn // 业务线英文标识（yl/sz/wy）
+        };
         // 显示加载中
-        uni.showLoading({title: '提交中...'})
+        uni.showLoading({ title: '提交中...' });
-        // 调用提交接口（await需要async函数支持）
-        const res = await createQuick(submitData)
+        // 调用提交接口
+        const res = await createQuick(submitData);
-        uni.hideLoading()
+        uni.hideLoading();
         uni.showToast({
           title: '工单提交成功',
           icon: 'success',
           duration: 1000
-        })
+        });
-        // 延迟跳转（等待提示框显示完成）
+        // 延迟跳转
         setTimeout(() => {
           uni.reLaunch({
             url: '/pages-sub/daily/quick-order/index'
-          })
-        }, 1000)
+          });
+        }, 1000);
       } catch (error) {
         // 隐藏加载框
-        uni.hideLoading()
+        uni.hideLoading();
         // 区分是表单校验失败还是接口调用失败
-        if (Array.isArray(error)) {
-          // 表单校验失败
-          // uni.showToast({
-          //   title: '表单填写不完整，请检查',
-          //   icon: 'none',
-          //   duration: 2000
-          // })
-        } else {
+        if (!Array.isArray(error)) {
           // 接口调用失败
-          console.error('工单提交失败：', error)
+          console.error('工单提交失败：', error);
           uni.showToast({
             title: '提交失败，请重试',
             icon: 'none',
             duration: 2000
-          })
+          });
         }
       }
     }
@@ -522,6 +586,4 @@ export default {
   background: #fff;
   margin-bottom: 100rpx;
 }
-
-
 </style>
 \ No newline at end of file
-<script lang="ts">
-import {defineComponent} from 'vue'
+<template>
+  <view class="page-container">
+    <!-- 顶部固定区域 -->
+    <up-sticky>
+      <view class="header-wrap">
+        <!-- 第一行：u-tabs 待办/已办切换  :scrollable="false"-->
+        <up-tabs
+            v-model="activeTab"
+            :list="tabList"
+            active-color="#1989fa"
+            inactive-color="#666"
+            font-size="30rpx"
+            @click="handleTabChange"
+        />
-export default defineComponent({
-  name: "index"
-})
-</script>
+        <!-- 第二行：下拉框 + 搜索框 -->
+        <view class="search-header">
+          <!-- 左侧下拉框 -->
+          <view class="select-wrap common-text-color">
+            <up-select
+                v-model:current="selectedSortValue"
+                :options="sortOptions"
+                :showOptionsLabel="true"
+                @select="handleSortChange"
+                border="surround"
+                :style="{ flex: 1 }"
+            />
+          </view>
-<template>
+          <!-- 右侧搜索框 -->
+          <view class="search-input-wrap">
+            <up-search
+                v-model="searchValue"
+                placeholder="请输入关键字"
+                @search="handleSearch"
+                bg-color="#f5f5f5"
+                :clearabled="false"
+                :show-action="true"
+                actionText="搜索"
+                :animation="true"
+                @custom="handleSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </up-sticky>
+
+    <!-- 列表容器 -->
+    <z-paging
+        ref="paging"
+        v-model="orderList"
+        @query="queryList"
+        :auto-show-system-loading="true"
+
+    >
+      <template #empty>
+        <empty-view/>
+      </template>
+
+      <view class="common-card-list" style="padding-top: 200rpx;padding-bottom: 30rpx">
+        <!-- 待办工单卡片 -->
+        <up-card
+            v-if="activeTab == 0"
+            :border="false"
+            :foot-border-top="false"
+            v-for="(item, index) in orderList"
+            :key="`todo_${item.orderNo}_${index}`"
+            :show-head="false"
+            class="order-card"
+        >
+          <template #body>
+            <view class="card-body">
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">工单编号：</view>
+                <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</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.lonLatAddress || '-' }}</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.orderName || '未填写' }}</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.remark || '无' }}</view>
+              </view>
+              <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">
+                  {{ uni.$dict.getDictLabel('workorder_pressing_type', item.pressingType) }}
+                </view>
+              </view>
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">工单状态：</view>
+                <view class="u-line-1 u-body-value">{{buzStatusMap[item.buzStatus] }}</view>
+              </view>
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">提交时间：</view>
+                <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+              </view>
+              <!-- 操作按钮行 -->
+              <view class="u-body-item u-flex common-justify-between common-item-center mt-20">
+                <up-button type="warning" size="mini" @click="handleReject(item)"
+                           v-show="nextStepMap[item.taskKey].backShow">回退
+                </up-button>
+
+                <up-button type="success" size="mini" @click="handleRenew(item)"
+                           v-show="nextStepMap[item.taskKey].renewShow">重新提交
+                </up-button>
+
+                <up-button type="primary" size="mini" @click="handleProcess(item)">{{
+                    nextStepMap[item.taskKey].btnText
+                  }}
+                </up-button>
+                <up-button type="info" size="mini" @click="handleDetail(item)">详情</up-button>
+              </view>
+            </view>
+          </template>
+        </up-card>
+
+        <!-- 已办工单卡片和我发起的 -->
+        <up-card
+            v-if="activeTab == 2||activeTab == 1"
+            :border="false"
+            :foot-border-top="false"
+            v-for="(item, index) in orderList"
+            :key="`done_${item.orderNo}_${index}`"
+            :show-head="false"
+            class="order-card"
+        >
+          <template #body>
+            <view class="card-body">
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">工单编号：</view>
+                <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</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.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.orderName || '未填写' }}</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.remark || '无' }}</view>
+              </view>
+
+              <view class="u-body-item u-flex common-justify-between common-item-center">
+                <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>
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">工单状态：</view>
+                <view class="u-line-1 u-body-value">{{buzStatusMap[item.buzStatus] }}</view>
+              </view>
+              <view class="u-body-item u-flex">
+                <view class="u-body-item-title">提交时间：</view>
+                <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+              </view>
+            </view>
+          </template>
+        </up-card>
+      </view>
+    </z-paging>
+
+    <!-- 底部新增工单按钮（仅巡查员显示） -->
+<!--    <view v-if="isInspector" class="fixed-bottom-btn-wrap">-->
+<!--      <up-button type="primary" size="large" @click="handleAddOrder">-->
+<!--        新增工单-->
+<!--      </up-button>-->
+<!--    </view>-->
+
+    <view class="fixed-bottom-btn-wrap">
+      <up-button type="primary" size="large" @click="handleAddOrder">
+        新增工单
+      </up-button>
+    </view>
+
+
+    <!-- 回退原因弹窗：替换为up-modal（核心修改） -->
+    <up-modal
+        :show="rejectModalShow"
+        title="回退原因"
+        :closeOnClickOverlay="false"
+        :showConfirmButton="true"
+        :showCancelButton="true"
+        @cancel="handleRejectModalCancel"
+        @confirm="confirmReject"
+    >
+      <view class="reject-modal-content">
+        <!-- 回退原因 必填textarea -->
+        <up-textarea
+            v-model.trim="rejectReason"
+            placeholder="请输入回退原因（必填）"
+            rows="6"
+            :count="200"
+            maxlength="200"
+            class="reject-textarea"
+        />
+        <!-- 上传图片（选填）- 按照参考页面改造 -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传图片（选填）</view>
+          <up-upload
+              :file-list="rejectImgs.rawImgList.value|| []"
+              @after-read="rejectImgs.uploadImgs"
+              @delete="rejectImgs.deleteImg"
+              multiple
+              width="70"
+              height="70"
+              :max-count="rejectImgs.uploadConfig.maxCount"
+              :upload-text="rejectImgs.uploadConfig.uploadText"
+              :size-type="rejectImgs.uploadConfig.sizeType"
+          />
+        </view>
+      </view>
+    </up-modal>
+
+    <!-- 验收弹窗 up-modal（含图片上传） -->
+    <up-modal
+        :show="acceptModalShow"
+        title="验收"
+        :closeOnClickOverlay="false"
+        :showConfirmButton="true"
+        :showCancelButton="true"
+        @cancel="handleAcceptModalCancel"
+        @confirm="handleAcceptModalConfirm"
+    >
+      <view class="accept-modal-content">
+        <!-- 第一行：单选框（通过/不通过，默认通过） -->
+        <view class="radio-group-wrap">
+          <up-radio-group v-model="acceptRadioValue">
+            <up-radio name="0" label="通过"></up-radio>
+            <up-radio name="1" label="不通过"></up-radio>
+          </up-radio-group>
+        </view>
+
+        <!-- 第二行：必填textarea，最多200字 -->
+        <view class="textarea-wrap mt-30">
+          <up-textarea
+              v-model.trim="acceptReason"
+              placeholder="请输入验收原因（必填，最多200字）"
+              :required="true"
+              maxlength="200"
+              rows="5"
+              count
+          />
+        </view>
+        <!-- 验收图片上传（选填，参考回退弹窗样式） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传验收图片（选填）</view>
+          <up-upload
+              :file-list="acceptImgs.rawImgList.value || []"
+              @after-read="acceptImgs.uploadImgs"
+              @delete="acceptImgs.deleteImg"
+
+              multiple
+              width="70"
+              height="70"
+              :max-count="acceptImgs.uploadConfig.maxCount"
+              :upload-text="acceptImgs.uploadConfig.uploadText"
+              :size-type="acceptImgs.uploadConfig.sizeType"
+          />
+        </view>
+      </view>
+    </up-modal>
+  </view>
 </template>
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { onShow, onLoad } from '@dcloudio/uni-app';
+import { timeFormat } from '@/uni_modules/uview-plus';
+import {
+  myBuzSimplePage,
+  todoBuzSimplePage,
+  doneBuzSimplePage,
+  universalApproval
+} from '@/api/work-order-manage/work-order-manage'
+// 从用户store获取角色信息
+import { useUserStore } from '@/pinia/user';
+import { nextStepMap, buzStatusMap } from '@/common/utils/common'
+// 引入图片上传组合式函数（与参考页面一致）
+import { useUploadImgs } from '@/common/utils/useUploadImgs'
+
+// ========== 状态管理 ==========
+const userStore = useUserStore();
+// 标签页切换
+const activeTab = ref(0); // 0-待办 1-我发起的 2-已办
+const tabList = ref([
+  {name: '待办'},
+  {name: '我发起的任务'},
+  {name: '已办'}
+]);
+// 排序下拉框
+const selectedSortValue = ref(1);
+const sortOptions = ref([
+  {name: '位置', id: 1},
+  {name: '名称', id: 2},
+  {name: '描述', id: 3},
+  {name: '编号', id: 4},
+]);
+// 搜索
+const searchValue = ref('');
+// 分页
+const paging = ref(null);
+const orderList = ref([]);
+// 角色控制（巡查员显示新增按钮）
+const isInspector = computed(() => {
+  // 增加可选链，避免用户信息不存在报错
+  return userStore.userInfo?.roles?.includes('yl_inspector') || false;
+});
+// 回退弹窗相关
+const rejectModalShow = ref(false); // 回退modal显示开关
+const rejectReason = ref(''); // 回退原因
+const currentRejectItem = ref(null); // 当前回退工单
+
+// 回退图片上传配置（与参考页面风格一致）
+const rejectImgs = useUploadImgs({
+  maxCount: 3, // 最多上传3张
+  uploadText: '选择回退图片', // 自定义上传提示文字
+  sizeType: ['compressed'], // 仅上传压缩图
+  formRef: null, // 该弹窗无表单校验
+  fieldName: 'rejectImgs' // 自定义字段名
+})
+
+
+// ========== 验收弹窗相关状态（含图片上传） ==========
+const acceptModalShow = ref(false); // 验收弹窗显示开关
+const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
+const acceptReason = ref(''); // 验收原因
+const currentAcceptItem = ref(null); // 当前验收的工单项
+
+// 验收图片上传配置（独立实例，参考回退弹窗）
+const acceptImgs = useUploadImgs({
+  maxCount: 3, // 最多上传3张，与回退弹窗一致
+  uploadText: '选择验收图片', // 自定义上传提示文字
+  sizeType: ['compressed'], // 仅上传压缩图，优化性能
+  formRef: null, // 验收弹窗无表单校验
+  fieldName: 'acceptImgs' // 自定义字段名，区分回退图片
+})
+
+// 分页查询列表
+const queryList = async (pageNo, pageSize) => {
+  try {
+    const apiParams = {
+      searchContent: searchValue.value.trim() || '',
+      pageNo,
+      pageSize,
+      type: selectedSortValue.value // 1-位置 2-工单名称 3-情况描述 4-工单编号
+    };
+    let res;
+    if (activeTab.value == 0) {
+      // 待办工单
+      res = await todoBuzSimplePage(apiParams);
+    } else if (activeTab.value == 1) {
+      // 我发起的任务
+      res = await myBuzSimplePage(apiParams);
+    } else {
+      // 已办工单
+      res = await doneBuzSimplePage(apiParams);
+    }
+    // 适配z-paging分页
+    paging.value.complete(res.list, res.total);
+  } catch (error) {
+    console.error('加载工单失败：', error);
+    paging.value?.complete(false);
+    uni.showToast({title: '加载失败，请重试', icon: 'none'});
+  }
+};
+
+// ========== 事件处理 ==========
+// 标签页切换
+const handleTabChange = (item) => {
+  console.log(item)
+  activeTab.value = item.index;
+  paging.value?.reload(); // 切换标签页刷新列表
+};
+// 排序变更
+const handleSortChange = (val) => {
+  selectedSortValue.value = val.id;
+  searchValue.value = '';
+  paging.value?.reload(); // 排序变更刷新列表
+};
+// 搜索
+const handleSearch = (val) => {
+  searchValue.value = val;
+  paging.value?.reload(); // 搜索刷新列表
+};
+// 工单详情
+const handleDetail = (item) => {
+  // 0-待办 1我发起的- 2-已办
+  uni.navigateTo({
+    url: `/pages-sub/problem/regional-order-manage/order-detail?taskId=${item.taskId}&activeTab=${activeTab.value}&processInstanceId=${item.processInstanceId}`,
+    events: {
+      // 自定义事件名：needRefresh（与详情页保持一致）
+      needRefresh: () => {
+        console.log('详情页返回，触发工单列表刷新');
+        if (paging.value) {
+          paging.value.reload(); // 刷新z-paging列表
+        }
+      }
+    }
+  });
+};
+
+// 生成临时key
+const generateTempKey = () => {
+  return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
+};
+
+// 待办-重新提交工单（改造后：大数据存本地，仅传唯一标识）
+const handleRenew = (item) => {
+  // 校验工单有效性
+  if (!item || !item.id) {
+    uni.showToast({title: '工单信息异常，无法重新提交', icon: 'none'});
+    return;
+  }
+
+  // 1. 生成唯一临时标识
+  const tempKey = generateTempKey();
+
+  // 2. 将完整工单数据存入本地临时存储（同步存储，确保数据立即生效）
+  try {
+    uni.setStorageSync(tempKey, item);
+  } catch (error) {
+    console.error('存储工单数据失败：', error);
+    uni.showToast({title: '数据存储异常，无法重新提交', icon: 'none'});
+    return;
+  }
+
+  // 3. URL 仅传递「唯一标识」和「重新提交标记」（数据量极小，无长度问题）
+  uni.navigateTo({
+    url: `/pages-sub/problem/work-order-manage/add-order?isRenew=1&tempKey=${tempKey}`
+  });
+};
+
+// 待办-处理工单
+const handleProcess = async (item) => {
+  console.log(nextStepMap[item.taskKey].name)
+  try {
+    if (nextStepMap[item.taskKey]?.name == '养护组长分配') {
+      uni.navigateTo({
+        url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}&busiLine=${item.busiLine}`
+      })
+    }
+    if (nextStepMap[item.taskKey]?.name == '养护员待实施') {
+
+      // ① 生成唯一临时key（和重新提交工单逻辑一致，避免冲突）
+      const tempKey = `maintain_order_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
+
+      // ② 存储完整item到本地缓存（同步存储，确保立即生效）
+      try {
+        uni.setStorageSync(tempKey, item);
+      } catch (error) {
+        console.error('存储养护工单数据失败：', error);
+        uni.showToast({title: '数据存储异常，无法跳转', icon: 'none'});
+        return;
+      }
+
+      // ③ URL仅传递临时key（可选：携带必要简单参数，方便目标页面快速使用）
+      uni.navigateTo({
+        url: `/pages-sub/problem/regional-order-manage/add-maintain-order?tempKey=${tempKey}`
+      })
+    }
+    // 养护组长验收 - 打开弹窗
+    if (nextStepMap[item.taskKey]?.name == '养护组长验收') {
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+    // 巡查员验收 - 打开弹窗
+    if (nextStepMap[item.taskKey]?.name == '巡查员验收') {
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+
+    // 发起人确认
+    if (nextStepMap[item.taskKey]?.name == '发起人确认') {
+      console.log(item)
+      uni.showModal({
+        title: "结束工单",
+        content: "请确定是否结束工单？",
+        success: async function (res) {
+          if (res.confirm) {
+            // 构建请求参数
+            const requestData = {
+              "returnImgs": rejectImgs.getSuccessImgUrls(), // 改造后：获取上传成功的图片URL
+              "workerDataId": item.id,
+              "taskKey":'ylInspectorStart',
+              "taskId": item.taskId,
+              "operateType": 200,
+              "agree": 1,
+              "reason": '结束工单'
+            };
+            // 调用回退工单接口
+            const res = await universalApproval(requestData);
+            uni.showToast({title: '结束成功', icon: 'success', duration: 1000});
+            rejectModalShow.value = false;
+            paging.value?.reload(); // 刷新列表
+          } else if (res.cancel) {
+            console.log("用户点击取消");
+          }
+        },
+      });
+    }
+  } catch (error) {
+    console.error('处理工单失败：', error);
+    uni.showToast({title: '处理失败，请重试', icon: 'none'});
+  }
+};
+
+// 待办-回退工单（打开回退modal）
+const handleReject = (item) => {
+  console.log('123213')
+  // 校验工单有效性
+  if (!item || !item.id) {
+    uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
+    return;
+  }
+  currentRejectItem.value = item;
+  rejectReason.value = ''; // 清空上次输入
+  rejectImgs.clearImgs(); // 改造后：使用组合式函数的清空方法
+  rejectModalShow.value = true; // 显示回退modal
+};
+
+// 回退modal - 取消按钮
+const handleRejectModalCancel = () => {
+  rejectModalShow.value = false;
+  rejectReason.value = '';
+  rejectImgs.clearImgs(); // 改造后：使用组合式函数的清空方法
+};
+
+// 确认回退工单
+const confirmReject = async () => {
+  // 严格校验回退原因（去除首尾空格）
+  const rejectReasonTrim = rejectReason.value.trim();
+  if (!rejectReasonTrim) {
+    uni.showToast({title: '请填写回退原因', icon: 'none', duration: 1000});
+    return;
+  }
+  // 校验当前工单有效性
+  if (!currentRejectItem.value || !currentRejectItem.value.id) {
+    uni.showToast({title: '工单信息异常，无法提交', icon: 'none', duration:1000});
+    rejectModalShow.value = false;
+    return;
+  }
+  try {
+    // 显示加载中，防止重复提交
+    uni.showLoading({title: '提交中...', mask: true});
+
+    // 构建请求参数
+    const requestData = {
+      "returnImgs": rejectImgs.getSuccessImgUrls(), // 改造后：获取上传成功的图片URL数组
+      "workerDataId": currentRejectItem.value.id,
+      "taskKey": currentRejectItem.value.taskKey,
+      "taskId": currentRejectItem.value.taskId,
+      "operateType": nextStepMap[currentRejectItem.value.taskKey].operateTypeNoPass,
+      "agree": 1,
+      "reason": rejectReasonTrim
+    };
+    // 调用回退工单接口
+    const res = await universalApproval(requestData);
+    uni.showToast({title: '回退成功', icon: 'success', duration: 1000});
+    rejectModalShow.value = false;
+    paging.value?.reload(); // 刷新列表
+  } catch (error) {
+    console.error('回退工单失败：', error);
+    uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
+  } finally {
+    // 隐藏加载中
+    uni.hideLoading();
+  }
+};
+
+// 新增工单
+const handleAddOrder = () => {
+  uni.navigateTo({
+    url: '/pages-sub/problem/regional-order-manage/add-order'
+  });
+};
+
+// 验收弹窗 - 取消按钮（清空状态）
+const handleAcceptModalCancel = () => {
+  acceptModalShow.value = false;
+  acceptReason.value = ''; // 清空验收原因
+  acceptRadioValue.value = '0'; // 重置单选框为“通过”
+  acceptImgs.clearImgs(); // 清空验收图片
+};
+
+// 验收弹窗 - 确定按钮（含returnImgs传参）
+const handleAcceptModalConfirm = async () => {
+  // 1. 校验验收原因是否为空
+  if (!acceptReason.value.trim()) {
+    uni.showToast({title: '请填写验收原因', icon: 'none', duration: 1000});
+    return;
+  }
+  // 2. 校验验收原因长度
+  if (acceptReason.value.length > 200) {
+    uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 1000});
+    return;
+  }
+  try {
+    // 3. 构建请求参数（含returnImgs）
+    console.log(currentAcceptItem.value)
+    let postData = {}
+    if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
+      postData = {
+        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
+        "taskKey": currentAcceptItem.value.taskKey,
+        "workerDataId": currentAcceptItem.value.id,
+        "taskId": currentAcceptItem.value.taskId,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
+        "reason": acceptReason.value.trim()
+      }
+    }
+    if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
+      postData = {
+        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
+        "taskKey": currentAcceptItem.value.taskKey,
+        "taskId": currentAcceptItem.value.taskId,
+        "workerDataId": currentAcceptItem.value.id,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
+        "reason": acceptReason.value.trim(),
+        "agree": acceptRadioValue.value
+      }
+    }
+    const acceptRes = await universalApproval(postData);
+    // 4. 操作成功处理
+    uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
+    handleAcceptModalCancel(); // 清空状态
+    paging.value?.reload(); // 刷新工单列表
+  } catch (error) {
+    // 5. 操作失败处理
+    console.error('验收失败：', error);
+    uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 1000});
+  }
+};
+
+// 页面初始化
+onLoad(() => {
+  // 初始化加载列表
+  paging.value?.reload();
+});
+</script>
+
 <style scoped lang="scss">
+.page-container {
+  min-height: 100vh;
+  background-color: #fafafa;
+}
+
+// 顶部固定区域
+.header-wrap {
+  background-color: #fff;
+}
+
+// 搜索栏样式
+.search-header {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  box-sizing: border-box;
+
+  .select-wrap {
+    width: 120rpx;
+    margin-right: 20rpx;
+
+    :deep(.u-select) {
+      width: 100%;
+      font-size: 28rpx;
+    }
+
+    :deep(.u-input__placeholder) {
+      font-size: 28rpx;
+    }
+  }
+
+  .search-input-wrap {
+    flex: 1;
+  }
+}
+
+// 工单卡片样式
+.order-card {
+  margin: 0 20rpx 20rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.card-body {
+
+}
+
+// 回退modal样式
+.reject-modal-content {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 0;
+}
+
+.textarea-label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+
+  .required-mark {
+    color: #f56c6c;
+    margin-left: 4rpx;
+  }
+}
+
+.upload-wrap {
+  margin-top: 20rpx;
+
+  .upload-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 10rpx;
+  }
+}
+
+.mt-20 {
+  margin-top: 20rpx;
+}
+
+.mt-30 {
+  margin-top: 30rpx;
+}
+
+// 养护组长验收弹窗样式
+.accept-modal-content {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.radio-group-wrap {
+  display: flex;
+  align-items: center;
+  gap: 40rpx; // 单选框之间的间距
+  font-size: 28rpx;
+  margin-bottom: 20rpx;
+}
+
+.textarea-wrap {
+  width: 100%;
+  margin-top: 30rpx;
+}
+.modal-btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10rpx;
+}
 </style>
 \ No newline at end of file
-<script lang="ts">
-import {defineComponent} from 'vue'
+<template>
+  <view class="page-container">
+    <!-- 页面级加载组件 -->
+    <up-loading-page
+        v-if="loading"
+        :loading="true"
+        title="加载中..."
+        color="#3c9cff"
+    ></up-loading-page>
-export default defineComponent({
-  name: "order-detail"
-})
-</script>
+    <!-- 主内容容器 -->
+    <view v-else class="main-content">
+      <!-- 顶部固定Tabs -->
+      <up-sticky :bgColor="'#fff'">
+        <up-tabs
+            v-model="activeTopTab"
+            :list="topTabList"
+            :scrollable="false"
+            sticky
+            active-color="#3c9cff"
+            inactive-color="#666"
+            class="top-tabs"
+            @click="activeTopTabClick"
+        ></up-tabs>
+      </up-sticky>
-<template>
+      <!-- 顶部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.lonLatAddress || '--' }}</view>
+              </template>
+            </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.orderName || '--' }}</view>
+              </template>
+            </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="提交人" :value="orderDetail.userName || '--'" align="middle"></up-cell>
+
+            <!-- 提交时间 -->
+            <up-cell
+                title="提交时间"
+                :value="timeFormat(orderDetail.createTime, 'yyyy-mm-dd hh:MM:ss') || '--'"
+                align="middle"
+            ></up-cell>
+
+            <!-- 处理结果 -->
+            <up-cell v-if="orderDetail.handleResult">
+              <template #title>
+                <view style="min-width: 200rpx">处理结果</view>
+              </template>
+              <template #value>
+                <view class="common-text-color up-line-1">{{ orderDetail.handleResult || '--' }}</view>
+              </template>
+            </up-cell>
+
+            <!-- 街道名称 -->
+            <up-cell title="街道名称" :value="orderDetail.streetName || '--'" align="middle"></up-cell>
+
+            <!-- 问题照片 -->
+            <up-cell title="问题照片">
+              <template #value>
+                <view class="cell-content-wrap">
+                  <up-album
+                      v-if="!!orderDetail.problemsImgs?.length"
+                      :urls="orderDetail.problemsImgs.slice(0, 3)"
+                      :singleSize="70"
+                      :multipleSize="70"
+
+                      :preview-full-image="true"
+                  ></up-album>
+                  <text v-else class="empty-text">暂无问题照片</text>
+                </view>
+              </template>
+            </up-cell>
+
+            <!-- 希望完成时间 -->
+            <up-cell
+                v-if="orderDetail.expectedFinishDate"
+                title="希望完成时间"
+                :value="timeFormat(orderDetail.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss')"
+                align="middle"
+                :border="false"
+            ></up-cell>
+
+            <up-cell
+                v-if="orderDetail.finishDate"
+                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" v-if="orderDetail.startImgs.length>0">
+            <up-cell-group :border="false">
+              <up-cell>
+                <template #title>
+                  <view style="min-width: 200rpx">共同处理人</view>
+                </template>
+                <template #value>
+                  <view class="common-text-color up-line-1">
+                    {{
+                      Array.isArray(orderDetail.coHandlersName) && orderDetail.coHandlersName.length > 0 ? orderDetail.coHandlersName.join(',') : '--'
+                    }}
+                  </view>
+                </template>
+              </up-cell>
+            </up-cell-group>
+            <up-tabs
+                @change='imgTabChange'
+                v-model="activeImgTab"
+                :list="imgTabList"
+                :scrollable="false"
+                active-color="#3c9cff"
+                inactive-color="#666"
+                class="img-tabs"
+            ></up-tabs>
+
+            <!-- 图片Tab内容区 -->
+            <view class="img-tab-content">
+              <up-album
+                  v-if="currentImgList.length"
+                  :urls="currentImgList.slice(0, 3)"
+                  :singleSize="70"
+                  :multipleSize="70"
+                  :preview-full-image="true"
+                  class="img-album custom-album"
+              ></up-album>
+              <text v-else class="empty-img-text">养护员未上传图片</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 2. 流程节点Tab -->
+        <view v-show="activeTopTab == 1" class="process-content">
+          <!-- 竖向步骤条：动态绑定current属性 -->
+          <up-steps
+              v-if="processData.activityNodes && processData.activityNodes.length"
+              :list="processData.activityNodes"
+              :current="getCurrentStepIndex()"
+              direction="column"
+              active-color="#3c9cff"
+              inactive-color="#999"
+              class="vertical-steps"
+          >
+            <template>
+              <up-steps-item
+                  v-for="(item, index) in processData.activityNodes"
+                  :key="`${item.id}_${index}`"
+              >
+                <!-- 唯一自定义模板：content，包含标题、描述、相册所有内容 -->
+                <template #content>
+                  <view class="step-content-wrap">
+                    <!-- 1. 原标题内容：节点名称 + 操作人 -->
+                    <view class="step-title">
+                      {{ item.name }}
+                      <text class="operator-name">
+                        {{
+                          item.tasks && item.tasks[0]?.assigneeUser?.nickname ? '（' + item.tasks[0].assigneeUser.nickname + '）' : '（未知操作人）'
+                        }}
+                      </text>
+                    </view>
+
+                    <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
+                    <view class="step-desc">
+                      <!-- 时间行 -->
+                      <view class="time-line">
+                        处理时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss') }}
+                        <text v-if="item.endTime"> 至 {{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
+                        <text v-else class="processing-tag">（处理中）</text>
+                      </view>
+
+                      <view class="reason-line up-line-1" v-if="index!==0&&item.endTime">
+                        总耗时：{{ calculateFormatTimeDiff(item.startTime, item.endTime) }}
+                      </view>
+
+                      <!-- 原因行 -->
+                      <view class="reason-line up-line-2" v-if="item.tasks && item.tasks[0]?.reason">
+                        描述：{{ getLimitReason(item.tasks && item.tasks[0]?.reason) }}
+                      </view>
+                    </view>
+
+                    <!-- 3. 原相册内容：预留up-album -->
+                    <view class="step-album-wrap">
+                      <up-album
+                          v-if="item.tasks && item.tasks[0]?.attattmentUrls && item.tasks[0].attattmentUrls.length"
+                          :urls="item.tasks[0].attattmentUrls.slice(0, 3)"
+                          :singleSize="70"
+                          :multipleSize="70"
+
+                          :preview-full-image="true"
+                          class="step-album"
+                      ></up-album>
+                    </view>
+                  </view>
+                </template>
+              </up-steps-item>
+            </template>
+
+          </up-steps>
+
+          <!-- 流程节点为空时的提示 -->
+          <up-empty
+              v-else
+              mode="data"
+              title="暂无流程节点数据"
+              class="empty-process"
+          ></up-empty>
+        </view>
+      </view>
+    </view>
+
+    <!-- activeTab==0的时候才出现， 也就是待办 -->
+    <view v-if="activeTab==0&&nextStepMap[orderDetail.taskKey]" class="fixed-bottom-btn-wrap">
+      <view class="u-body-item u-flex common-justify-between common-item-center ">
+        <up-button type="warning" size="normal" @click="handleReject(orderDetail)"
+                   v-show="nextStepMap[orderDetail.taskKey].backShow">回退
+        </up-button>
+
+        <up-button type="success" size="normal" @click="handleRenew(orderDetail)"
+                   v-show="nextStepMap[orderDetail.taskKey].renewShow">重新提交
+        </up-button>
+        <up-button type="primary" size="normal" @click="handleProcess(orderDetail)">{{
+            nextStepMap[orderDetail.taskKey].btnText
+          }}
+        </up-button>
+
+      </view>
+    </view>
+
+    <!-- 回退原因弹窗（新增图片上传） -->
+    <up-modal
+        :show="rejectModalShow"
+        title="回退原因"
+        :closeOnClickOverlay="false"
+        :showConfirmButton="true"
+        :showCancelButton="true"
+        @cancel="handleRejectModalCancel"
+        @confirm="confirmReject"
+    >
+      <view class="reject-modal-content">
+        <up-textarea
+            v-model.trim="rejectReason"
+            placeholder="请输入回退原因（必填）"
+            rows="6"
+            :count="200"
+            maxlength="200"
+            class="reject-textarea"
+        />
+        <!-- 新增：回退图片上传（选填） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传回退图片（选填）</view>
+          <up-upload
+              :file-list="rejectImgs.rawImgList.value || []"
+              @after-read="rejectImgs.uploadImgs"
+              @delete="rejectImgs.deleteImg"
+              multiple
+              width="70"
+              height="70"
+              :max-count="rejectImgs.uploadConfig.maxCount"
+              :upload-text="rejectImgs.uploadConfig.uploadText"
+              :size-type="rejectImgs.uploadConfig.sizeType"
+          />
+        </view>
+      </view>
+    </up-modal>
+
+    <!-- 验收弹窗（新增图片上传） -->
+    <up-modal
+        :show="acceptModalShow"
+        title="验收"
+        :closeOnClickOverlay="false"
+        :showConfirmButton="true"
+        :showCancelButton="true"
+        @cancel="handleAcceptModalCancel"
+        @confirm="handleAcceptModalConfirm"
+    >
+      <view class="accept-modal-content">
+        <!-- 第一行：单选框（通过/不通过，默认通过） -->
+        <view class="radio-group-wrap">
+          <up-radio-group v-model="acceptRadioValue">
+            <up-radio name="0" label="通过"></up-radio>
+            <up-radio name="1" label="不通过"></up-radio>
+          </up-radio-group>
+        </view>
+
+        <!-- 第二行：必填textarea，最多200字 -->
+        <view class="textarea-wrap mt-30">
+          <up-textarea
+              v-model.trim="acceptReason"
+              placeholder="请输入验收原因（必填，最多200字）"
+              :required="true"
+              maxlength="200"
+              rows="5"
+              count
+          />
+        </view>
+
+        <!-- 新增：验收图片上传（选填） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传验收图片（选填）</view>
+          <up-upload
+              :file-list="acceptImgs.rawImgList.value || []"
+              @after-read="acceptImgs.uploadImgs"
+              @delete="acceptImgs.deleteImg"
+              multiple
+              width="70"
+              height="70"
+              :max-count="acceptImgs.uploadConfig.maxCount"
+              :upload-text="acceptImgs.uploadConfig.uploadText"
+              :size-type="acceptImgs.uploadConfig.sizeType"
+          />
+        </view>
+      </view>
+    </up-modal>
+
+  </view>
 </template>
+<script setup lang="ts">
+import {ref, watch} from 'vue';
+import {onLoad, onShow} from '@dcloudio/uni-app';
+import {timeFormat} from '@/uni_modules/uview-plus';
+import {
+  getMyTaskDetail,
+  getDoneTaskDetail,
+  getTodoTaskDetail,
+  getApprovalDetail,
+  universalApproval
+} from '@/api/work-order-manage/work-order-manage';
+import {nextStepMap, buzStatusMap, calculateFormatTimeDiff} from '@/common/utils/common'
+// 引入图片上传组合式函数
+import {useUploadImgs} from '@/common/utils/useUploadImgs'
+
+// 状态管理
+const loading = ref(true);
+const activeTopTab = ref(0); // 顶部Tab激活索引
+const activeImgTab = ref(0); // 图片分类Tab激活索引
+
+// 顶部Tab列表
+const topTabList = ref([
+  {name: '工单详情'},
+  {name: '流程节点'}
+]);
+
+// 流程节点数据（初始化适配接口格式）
+const processData = ref<any>({
+  status: 2,
+  activityNodes: [],
+  formFieldsPermission: null,
+  todoTask: null
+});
+
+// 图片分类Tab列表（带角标配置）
+const imgTabList = ref([
+  {name: '开始', badge: {isDot: true}},
+  {name: '进行中'},
+  {name: '结束', badge: {isDot: true}},
+  {name: '人员'},
+  {name: '材料'}
+]);
+
+// 工单详情数据（初始化赋值，可被接口数据覆盖）
+const orderDetail = ref<any>({
+  id: 0,
+  busiLine: '',
+  orderNo: '',
+  orderName: '',
+  sourceId: 0,
+  sourceName: '',
+  roadId: 0,
+  roadName: '',
+  streetId: '',
+  streetName: '',
+  curingLevelId: 0,
+  curingLevelName: '',
+  commitDate: 0,
+  finishDate: 0,
+  expectedFinishDate: 0,
+  pressingType: 0,
+  userId: 0,
+  userName: '',
+  companyId: 0,
+  latLonType: 0,
+  lat: 0,
+  lon: 0,
+  lonLatAddress: '',
+  thirdWorkNo: '',
+  thirdPushState: 0,
+  buzStatus: null,
+  status: 0,
+  processInstanceId: '',
+  remark: '',
+  handleResult: '',
+  createTime: 0,
+  fileNames: null,
+  coHandlers: null,
+  coHandlersName: null,
+  companyName: null,
+  userMobile: null,
+  taskId: '',
+  taskName: '',
+  taskKey: '',
+  processDefinitionName: '',
+  startTime: 0,
+  endTime: 0,
+  key_: '',
+  problemsImgs: [],
+  startImgs: [],
+  processingImgs: [],
+  endImgs: [],
+  personImgs: [],
+  materialImgs: []
+});
+
+/**
+ * 当前激活的图片列表（无需函数调用，直接访问）
+ */
+const currentImgList = ref([])
+
+const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
+const imgTabChange = (({index}: { index: number }) => {
+  console.log(index)
+  const currentKey = tabKeyMap[index]
+  console.log(currentKey)
+  console.log(orderDetail.value[currentKey])
+  currentImgList.value = orderDetail.value[currentKey]
+})
+
+/**
+ * 截取reason最多200字
+ * @param reason 处理说明
+ * @returns 截取后的字符串
+ */
+const getLimitReason = (reason: string | null | undefined) => {
+  if (!reason) return '无处理说明';
+  if (reason.length <= 200) return reason;
+  return reason.substring(0, 200) + '...';
+}
+
+/**
+ * 动态获取当前步骤索引（核心：根据接口数据的status字段判断）
+ * status=1：当前步骤（处理中）
+ * status=2：已完成步骤
+ * @returns {number} 当前激活的步骤索引（从0开始）
+ */
+const getCurrentStepIndex = () => {
+  const {activityNodes} = processData.value;
+  if (!activityNodes || !activityNodes.length) return 0;
+
+  // 2. 若没有处理中的节点（全部已完成），则激活最后一个节点
+  return activityNodes.length - 1;
+}
+
+/**
+ * 获取工单详情
+ */
+const DetailQuery = async (taskIdStr: string) => {
+  console.log('当前工单ID：', taskIdStr)
+  try {
+    loading.value = true;
+    // 转换activeTab为数字类型，避免类型不一致导致接口调用失败
+    const tabType = Number(activeTab.value);
+    let res: any;
+
+    if (tabType === 0) {
+      res = await getTodoTaskDetail({taskId: taskIdStr});
+    } else if (tabType === 1) {
+      res = await getMyTaskDetail({taskId: taskIdStr});
+    } else if (tabType === 2) {
+      res = await getDoneTaskDetail({taskId: taskIdStr});
+    } else {
+      uni.showToast({title: '无效的工单类型', icon: 'none'});
+      return;
+    }
+
+    // 覆盖工单详情数据
+    if (res) {
+      orderDetail.value = res;
+      currentImgList.value = orderDetail.value.startImgs
+    }
+  } catch (error) {
+    console.error('获取工单详情失败：', error);
+    uni.showToast({title: '加载失败，请重试', icon: 'none'});
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 页面加载参数
+const taskId = ref('')
+const activeTab = ref('')
+const processInstanceId = ref('')
+
+const activeTopTabClick = async (item: any) => {
+  console.log(item)
+  activeTopTab.value = item.index
+  if (activeTopTab.value == 1) {
+    let getData = {
+      processInstanceId: processInstanceId.value,
+    }
+    const res = await getApprovalDetail(getData)
+    console.log(res)
+    // 关键：格式化数据，补充up-steps要求的title字段
+    if (res && res.activityNodes && res.activityNodes.length) {
+      // 1. 先过滤：剔除 name 为 "结束" 的节点
+      const filteredActivityNodes = res.activityNodes.filter(node => {
+        // 返回 true 保留节点，返回 false 剔除节点
+        return node.name !== '结束';
+      });
+      const formatActivityNodes = filteredActivityNodes.map(node => ({
+        ...node,
+        title: node.name // 补充强制字段，满足3.3.48版本组件要求
+      }));
+      processData.value = {
+        ...res,
+        activityNodes: formatActivityNodes
+      };
+    } else {
+      processData.value = res;
+    }
+  }
+}
+
+// ========== 回退弹窗相关状态（新增图片上传实例） ==========
+const rejectModalShow = ref(false); // 回退modal显示开关
+const rejectReason = ref(''); // 回退原因
+const currentRejectItem = ref<any>(null); // 当前回退工单
+// 回退图片上传配置
+const rejectImgs = useUploadImgs({
+  maxCount: 3,
+  uploadText: '选择回退图片',
+  sizeType: ['compressed'],
+  formRef: null,
+  fieldName: 'rejectImgs'
+})
+
+
+// ========== 验收弹窗相关状态（新增图片上传实例） ==========
+const acceptModalShow = ref(false); // 验收弹窗显示开关
+const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
+const acceptReason = ref(''); // 验收原因
+const currentAcceptItem = ref<any>(null); // 当前验收的工单项
+// 验收图片上传配置
+const acceptImgs = useUploadImgs({
+  maxCount: 3,
+  uploadText: '选择验收图片',
+  sizeType: ['compressed'],
+  formRef: null,
+  fieldName: 'acceptImgs'
+})
+
+
+// ========== 生成临时key ==========
+const generateTempKey = () => {
+  return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
+};
+
+// ========== handleRenew 重新提交工单 ==========
+const handleRenew = (item: any) => {
+  // 校验工单有效性
+  if (!item || !item.id) {
+    uni.showToast({title: '工单信息异常，无法重新提交', icon: 'none'});
+    return;
+  }
+
+  // 1. 生成唯一临时标识
+  const tempKey = generateTempKey();
+
+  // 2. 将完整工单数据存入本地临时存储（同步存储，确保数据立即生效）
+  try {
+    uni.setStorageSync(tempKey, item);
+  } catch (error) {
+    console.error('存储工单数据失败：', error);
+    uni.showToast({title: '数据存储异常，无法重新提交', icon: 'none'});
+    return;
+  }
+
+  // 3. URL 仅传递「唯一标识」和「重新提交标记」
+  uni.navigateTo({
+    url: `/pages-sub/problem/work-order-manage/add-order?isRenew=1&tempKey=${tempKey}`
+  });
+};
+
+// ========== handleReject 打开回退弹窗 ==========
+const handleReject = (item: any) => {
+  // 校验工单有效性
+  if (!item || !item.id) {
+    uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
+    return;
+  }
+  currentRejectItem.value = item;
+  rejectReason.value = ''; // 清空上次输入
+  rejectImgs.clearImgs(); // 清空上传图片
+  rejectModalShow.value = true; // 显示回退modal
+};
+
+// ========== 回退弹窗取消按钮 ==========
+const handleRejectModalCancel = () => {
+  rejectModalShow.value = false;
+  rejectReason.value = '';
+  rejectImgs.clearImgs(); // 清空上传图片
+};
+
+// ========== 确认回退工单（新增returnImgs传参） ==========
+const confirmReject = async () => {
+  // 严格校验回退原因（去除首尾空格）
+  const rejectReasonTrim = rejectReason.value.trim();
+  if (!rejectReasonTrim) {
+    uni.showToast({title: '请填写回退原因', icon: 'none', duration: 1000});
+    return;
+  }
+  // 校验当前工单有效性
+  if (!currentRejectItem.value || !currentRejectItem.value.id) {
+    uni.showToast({title: '工单信息异常，无法提交', icon: 'none', duration: 1000});
+    rejectModalShow.value = false;
+    return;
+  }
+  try {
+    // 显示加载中，防止重复提交
+    uni.showLoading({title: '提交中...', mask: true});
+
+    // 构建请求参数（新增returnImgs）
+    const requestData = {
+      "returnImgs": rejectImgs.getSuccessImgUrls(), // 回退图片URL数组
+      "workerDataId": currentRejectItem.value.id,
+      "taskKey": currentRejectItem.value.taskKey,
+      "taskId": currentRejectItem.value.taskId,
+      "operateType": nextStepMap[currentRejectItem.value.taskKey].operateTypeNoPass,
+      "agree": 1,
+      "reason": rejectReasonTrim
+    };
+    // 调用回退工单接口
+    const res = await universalApproval(requestData);
+    uni.showToast({title: '回退成功', icon: 'success', duration: 1000});
+
+    rejectModalShow.value = false;
+    // 重新获取工单详情，刷新页面
+    // await DetailQuery(taskId.value);
+    uni.reLaunch({
+      url: `/pages-sub/problem/work-order-manage/index`
+    });
+  } catch (error) {
+    console.error('回退工单失败：', error);
+    uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
+  } finally {
+    // 隐藏加载中
+    uni.hideLoading();
+  }
+};
+
+// ========== handleProcess 处理工单 ==========
+const handleProcess = async (item: any) => {
+  console.log(nextStepMap[item.taskKey]?.name)
+  try {
+    if (nextStepMap[item.taskKey]?.name == '养护组长分配') {
+      uni.navigateTo({
+        url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}`
+      })
+    }
+    if (nextStepMap[item.taskKey]?.name == '养护员待实施') {
+      // ① 生成唯一临时key
+      const tempKey = `maintain_order_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
+
+      // ② 存储完整item到本地缓存
+      try {
+        uni.setStorageSync(tempKey, item);
+      } catch (error) {
+        console.error('存储养护工单数据失败：', error);
+        uni.showToast({title: '数据存储异常，无法跳转', icon: 'none'});
+        return;
+      }
+
+      // ③ URL仅传递临时key
+      uni.navigateTo({
+        url: `/pages-sub/problem/work-order-manage/add-maintain-order?tempKey=${tempKey}`
+      })
+    }
+    // 养护组长验收 - 打开弹窗
+    if (nextStepMap[item.taskKey]?.name == '养护组长验收') {
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptImgs.clearImgs(); // 清空验收图片
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+    // 巡查员验收 - 打开弹窗
+    if (nextStepMap[item.taskKey]?.name == '巡查员验收') {
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptImgs.clearImgs(); // 清空验收图片
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+
+    // 发起人确认
+    if (nextStepMap[item.taskKey]?.name == '发起人确认') {
+      console.log(item)
+      uni.showModal({
+        title: "结束工单",
+        content: "请确定是否结束工单？",
+        success: async function (res) {
+          if (res.confirm) {
+            // 构建请求参数（携带returnImgs）
+            const requestData = {
+              "returnImgs": rejectImgs.getSuccessImgUrls(),
+              "workerDataId": item.id,
+              "taskKey": 'ylInspectorStart',
+              "taskId": item.taskId,
+              "operateType": 200,
+              "agree": 1,
+              "reason": '结束工单'
+            };
+            // 调用回退工单接口
+            const res = await universalApproval(requestData);
+            uni.showToast({title: '结束成功', icon: 'success', duration: 1000});
+            // 重新获取工单详情，刷新页面
+            await DetailQuery(taskId.value);
+          } else if (res.cancel) {
+            console.log("用户点击取消");
+          }
+        },
+      });
+    }
+  } catch (error) {
+    console.error('处理工单失败：', error);
+    uni.showToast({title: '处理失败，请重试', icon: 'none'});
+  }
+};
+
+// ========== 验收弹窗取消按钮（新增清空图片） ==========
+const handleAcceptModalCancel = () => {
+  acceptModalShow.value = false;
+  acceptReason.value = '';
+  acceptRadioValue.value = '0';
+  acceptImgs.clearImgs(); // 清空验收图片
+};
+
+// ========== 验收弹窗确认按钮（新增returnImgs传参） ==========
+const handleAcceptModalConfirm = async () => {
+  // 1. 校验验收原因是否为空
+  if (!acceptReason.value.trim()) {
+    uni.showToast({title: '请填写验收原因', icon: 'none', duration: 1000});
+    return;
+  }
+  // 2. 校验验收原因长度
+  if (acceptReason.value.length > 200) {
+    uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 1000});
+    return;
+  }
+  try {
+    // 3. 调用验收接口
+    console.log(currentAcceptItem.value)
+    let postData: any = {}
+    if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
+      postData = {
+        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
+        "taskKey": currentAcceptItem.value.taskKey, // ylTeamLeaderConfirm
+        "workerDataId": currentAcceptItem.value.id,
+        "taskId": currentAcceptItem.value.taskId,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
+        "reason": acceptReason.value.trim()
+      }
+    }
+    if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
+      postData = {
+        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
+        "taskKey": currentAcceptItem.value.taskKey,  //ylInspector
+        "taskId": currentAcceptItem.value.taskId,
+        "workerDataId": currentAcceptItem.value.id,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
+        "reason": acceptReason.value.trim(),
+        "agree": acceptRadioValue.value
+      }
+    }
+    const acceptRes = await universalApproval(postData);
+    // 4. 操作成功处理
+
+    handleAcceptModalCancel(); // 清空状态
+    // 重新获取工单详情，刷新页面
+    // await DetailQuery(taskId.value);
+    // uni.reLaunch({
+    //   url: `/pages-sub/problem/work-order-manage/index`
+    // });
+    eventChannel.emit('needRefresh');
+    // 4. 返回列表页
+    uni.navigateBack({delta: 1});
+    uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
+  } catch (error) {
+    // 5. 操作失败处理
+    console.error('验收失败：', error);
+    uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 1000});
+  }
+};
+
+onLoad((options: any) => {
+  console.log('页面入参：', options)
+  const {taskId: taskIdOpt, activeTab: activeTabOpt, processInstanceId: processInstanceIdOpt} = options;
+  // 0-待办 1-我发起的 2-已办
+  taskId.value = taskIdOpt || '';
+  activeTab.value = activeTabOpt || '0';
+  processInstanceId.value = processInstanceIdOpt;
+  DetailQuery(taskId.value);
+});
+
+onShow(() => {
+  // 注释原有逻辑，避免重复加载
+});
+</script>
+
 <style scoped lang="scss">
+// 全局样式
+.page-container {
+  min-height: 100vh;
+}
+
+// 主内容容器
+.main-content {
+  padding-bottom: 80rpx;
+}
+
+// 顶部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 {
+    // 保持原有样式，兼容up-album布局
+  }
+
+  .empty-text {
+    color: #999;
+    font-size: 26rpx;
+  }
+}
+
+// 图片分类Tabs区块
+.img-tabs-block {
+  background-color: #fff;
+  //border-radius: 12rpx;
+  //padding: 16rpx;
+
+  // 图片内容区
+  .img-tab-content {
+    padding: 20rpx 15px ;
+    text-align: center;
+    //min-height: 120rpx;
+    //display: flex;
+    //align-items: center;
+    //justify-content: center;
+    //
+    .img-album {
+      //width: 100%;
+
+    }
+
+    .empty-img-text {
+      height: 75px;
+      line-height: 75px;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+}
+
+// 流程节点区域（完整样式，确保内容可见）
+.process-content {
+  //padding: 16rpx;
+  //min-height: 400rpx;
+
+  .empty-process {
+    margin-top: 100rpx;
+  }
+
+  // 竖向步骤条容器样式
+  .vertical-steps {
+    //width: 100%;
+    background-color: #fff;
+    padding: 20rpx;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx; // 步骤项间距
+  }
+
+  // 自定义内容容器样式
+  .step-content-wrap {
+    width: 100%;
+    //padding: 10rpx 0;
+    box-sizing: border-box;
+
+    // 节点标题 + 操作人样式
+    .step-title {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 12rpx;
+
+      .operator-name {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #333;
+        margin-left: 20rpx;
+      }
+    }
+
+    // 描述（时间 + 处理说明）样式
+    .step-desc {
+      font-size: 24rpx;
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 12rpx;
+
+      .time-line {
+        margin-bottom: 8rpx;
+
+        .processing-tag {
+          color: #f59e0b;
+          margin-left: 10rpx;
+        }
+      }
+
+      .reason-line {
+        word-break: break-all; // 长文本自动换行
+      }
+    }
+
+    // 相册容器样式
+    .step-album-wrap {
+      padding: 10rpx 0;
+
+      .step-album {
+        //width: 100%;
+      }
+
+      .no-img-tip {
+        font-size: 24rpx;
+        color: #999;
+        margin-top: 10rpx;
+      }
+    }
+  }
+}
+
+// 上传图片通用样式
+.upload-wrap {
+  margin-top: 20rpx;
+
+  .upload-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 10rpx;
+  }
+}
+
+.mt-20 {
+  margin-top: 20rpx;
+}
+
+// 回退弹窗样式
+.reject-modal-content {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10rpx 0;
+}
+
+.reject-textarea {
+  width: 100%;
+}
+
+// 验收弹窗样式
+.accept-modal-content {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.radio-group-wrap {
+  display: flex;
+  align-items: center;
+  gap: 40rpx;
+  font-size: 28rpx;
+  margin-bottom: 20rpx;
+}
+
+.textarea-wrap {
+  width: 100%;
+  margin-top: 30rpx;
+}
+
+.mt-30 {
+  margin-top: 30rpx;
+}
+// 针对 up-album 单图容器的样式（穿透 scoped 限制）
+:deep .u-album__row__wrapper image {
+  width: 70px !important;  // 与多图保持一致
+  height: 70px !important;
+}
+
 </style>
 \ No newline at end of file
@@ -5,7 +5,7 @@
           label-position="left"
           :model="workOrderForm"
           ref="workOrderFormRef"
-          labelWidth="190rpx"
+          labelWidth="200rpx"
       >
         <!-- 业务线单选框：移入form内，作为第一个表单项（核心调整） -->
         <up-form-item
@@ -97,6 +97,7 @@ const assigneeList = ref([]) // 养护员列表
 // ========== 工单表单数据（仅保留所需字段） ==========
 const workOrderForm = reactive({
   id:'',
+  busiLine:'',
   taskId:'',
   orderNo: '',        // 工单编号（对应接口参数id）
   assigneeId: '',     // 养护员ID（对应接口参数nextAssignee）
@@ -120,6 +121,9 @@ onLoad((options) =&gt; {
     workOrderForm.orderNo = options.orderNo
     workOrderForm.taskId = options.taskId
     workOrderForm.id = options.id
+    workOrderForm.busiLine = options.busiLine
+
+
   }
   console.log('从URL获取工单编号：', workOrderForm.orderNo)
 })
@@ -141,8 +145,8 @@ const loadAssigneeList = async () =&gt; {
     console.log(userStore.userInfo.user.busiLine)
     let queryData = {
       // roleCode:userStore.userInfo.roles,
-      roleCode: 'yl_worker',
-      busiLine: 'yl',
+      // roleCode: 'yl_worker',
+      busiLine:  workOrderForm.busiLine,
       // busiLine: userStore.userInfo.user.busiLine,
       pageNo: 1,
       pageSize: 100
@@ -202,7 +202,7 @@
         <view class="upload-wrap mt-20">
           <view class="upload-title">上传图片（选填）</view>
           <up-upload
-              :file-list="rejectImgs.imgList"
+              :file-list="rejectImgs.rawImgList.value|| []"
               @after-read="rejectImgs.uploadImgs"
               @delete="rejectImgs.deleteImg"
               multiple
@@ -251,7 +251,7 @@
         <view class="upload-wrap mt-20">
           <view class="upload-title">上传验收图片（选填）</view>
           <up-upload
-              :file-list="acceptImgs.imgList"
+              :file-list="acceptImgs.rawImgList.value || []"
               @after-read="acceptImgs.uploadImgs"
               @delete="acceptImgs.deleteImg"
@@ -325,10 +325,6 @@ const rejectImgs = useUploadImgs({
   fieldName: 'rejectImgs' // 自定义字段名
 })
-// 监听上传实例响应式变化，解决u-upload不刷新问题
-watch(() => rejectImgs.rawImgList.value, (newVal) => {
-  rejectImgs.imgList = newVal
-}, { deep: true })
 // ========== 验收弹窗相关状态（含图片上传） ==========
 const acceptModalShow = ref(false); // 验收弹窗显示开关
@@ -345,11 +341,6 @@ const acceptImgs = useUploadImgs({
   fieldName: 'acceptImgs' // 自定义字段名，区分回退图片
 })
-// 监听验收图片上传实例响应式变化，解决u-upload不刷新问题
-watch(() => acceptImgs.rawImgList.value, (newVal) => {
-  acceptImgs.imgList = newVal
-}, { deep: true })
-
 // 分页查询列表
 const queryList = async (pageNo, pageSize) => {
   try {
@@ -451,7 +442,7 @@ const handleProcess = async (item) =&gt; {
   try {
     if (nextStepMap[item.taskKey]?.name == '养护组长分配') {
       uni.navigateTo({
-        url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}`
+        url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}&busiLine=${item.busiLine}`
       })
     }
     if (nextStepMap[item.taskKey]?.name == '养护员待实施') {
@@ -160,11 +160,10 @@
                   :urls="currentImgList.slice(0, 3)"
                   :singleSize="70"
                   :multipleSize="70"
-
                   :preview-full-image="true"
                   class="img-album custom-album"
               ></up-album>
-              <text v-else class="empty-img-text">暂无图片</text>
+              <text v-else class="empty-img-text">养护员未上传图片</text>
             </view>
           </view>
         </view>
@@ -290,7 +289,7 @@
         <view class="upload-wrap mt-20">
           <view class="upload-title">上传回退图片（选填）</view>
           <up-upload
-              :file-list="rejectImgs.imgList"
+              :file-list="rejectImgs.rawImgList.value || []"
               @after-read="rejectImgs.uploadImgs"
               @delete="rejectImgs.deleteImg"
               multiple
@@ -339,7 +338,7 @@
         <view class="upload-wrap mt-20">
           <view class="upload-title">上传验收图片（选填）</view>
           <up-upload
-              :file-list="acceptImgs.imgList"
+              :file-list="acceptImgs.rawImgList.value || []"
               @after-read="acceptImgs.uploadImgs"
               @delete="acceptImgs.deleteImg"
               multiple
@@ -573,10 +572,7 @@ const rejectImgs = useUploadImgs({
   formRef: null,
   fieldName: 'rejectImgs'
 })
-// 监听上传实例响应式变化，解决u-upload不刷新问题
-watch(() => rejectImgs.rawImgList.value, (newVal) => {
-  rejectImgs.imgList = newVal
-}, {deep: true})
+
 // ========== 验收弹窗相关状态（新增图片上传实例） ==========
 const acceptModalShow = ref(false); // 验收弹窗显示开关
@@ -591,10 +587,7 @@ const acceptImgs = useUploadImgs({
   formRef: null,
   fieldName: 'acceptImgs'
 })
-// 监听验收图片上传实例响应式变化
-watch(() => acceptImgs.rawImgList.value, (newVal) => {
-  acceptImgs.imgList = newVal
-}, {deep: true})
+
 // ========== 生成临时key ==========
 const generateTempKey = () => {
@@ -900,6 +893,7 @@ onShow(() =&gt; {
   // 图片内容区
   .img-tab-content {
     padding: 20rpx 15px ;
+    text-align: center;
     //min-height: 120rpx;
     //display: flex;
     //align-items: center;
@@ -911,8 +905,8 @@ onShow(() =&gt; {
     }
     .empty-img-text {
-      height: 100px;
-      line-height: 100px;
+      height: 75px;
+      line-height: 75px;
       color: #999;
       font-size: 28rpx;
     }