验收加上验收图片非必传

刘淇
1 parent 2b13ab68
Showing 2 changed files with 158 additions and 48 deletions
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
@@ -215,14 +215,14 @@
       </view>
     </up-modal>
  
-    <!-- 验收弹窗 up-modal -->
+    <!-- 验收弹窗 up-modal（含图片上传） -->
     <up-modal
         :show="acceptModalShow"
         title="验收"
         :closeOnClickOverlay="false"
         :showConfirmButton="true"
         :showCancelButton="true"
-        @cancel="acceptModalShow=false"
+        @cancel="handleAcceptModalCancel"
         @confirm="handleAcceptModalConfirm"
     >
       <view class="accept-modal-content">
@@ -245,6 +245,22 @@
               count
           />
         </view>
+
+        <!-- 验收图片上传（选填，参考回退弹窗样式） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传验收图片（选填）</view>
+          <up-upload
+              :file-list="acceptImgs.imgList"
+              @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>
@@ -252,7 +268,7 @@
  
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { onReady, onShow } from '@dcloudio/uni-app';
+import { onShow } from '@dcloudio/uni-app';
 import { timeFormat } from '@/uni_modules/uview-plus';
 import {
   myBuzSimplePage,
@@ -293,31 +309,45 @@ const isInspector = computed(() =&gt; {
   // 增加可选链，避免用户信息不存在报错
   return userStore.userInfo?.roles?.includes('yl_inspector') || false;
 });
-// 回退弹窗相关（核心改造：使用useUploadImgs替代原始图片管理）
+// 回退弹窗相关
 const rejectModalShow = ref(false); // 回退modal显示开关
 const rejectReason = ref(''); // 回退原因
 const currentRejectItem = ref(null); // 当前回退工单
  
-// ========== 核心改造：回退图片上传配置（与参考页面风格一致） ==========
+// 回退图片上传配置（与参考页面风格一致）
 const rejectImgs = useUploadImgs({
-  maxCount: 3, // 最多上传3张，与原有逻辑一致
+  maxCount: 3, // 最多上传3张
   uploadText: '选择回退图片', // 自定义上传提示文字
-  sizeType: ['compressed'], // 仅上传压缩图，优化性能
-  formRef: null, // 该弹窗无表单校验，传null即可
-  fieldName: 'rejectImgs' // 自定义字段名，用于标识该上传实例
+  sizeType: ['compressed'], // 仅上传压缩图
+  formRef: null, // 该弹窗无表单校验
+  fieldName: 'rejectImgs' // 自定义字段名
 })
  
-// 监听上传实例响应式变化，解决u-upload不刷新问题（与参考页面一致）
+// 监听上传实例响应式变化，解决u-upload不刷新问题
 watch(() => rejectImgs.rawImgList.value, (newVal) => {
   rejectImgs.imgList = newVal
 }, { deep: true })
  
-// ========== 新增：养护组长验收弹窗相关状态 ==========
+// ========== 验收弹窗相关状态（含图片上传） ==========
 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' // 自定义字段名，区分回退图片
+})
+
+// 监听验收图片上传实例响应式变化，解决u-upload不刷新问题
+watch(() => acceptImgs.rawImgList.value, (newVal) => {
+  acceptImgs.imgList = newVal
+}, { deep: true })
+
 // 分页查询列表
 const queryList = async (pageNo, pageSize) => {
   try {
@@ -431,10 +461,6 @@ const handleProcess = async (item) =&gt; {
       uni.navigateTo({
         url: `/pages-sub/problem/work-order-manage/add-maintain-order?tempKey=${tempKey}`
       })
-
-      // uni.navigateTo({
-      //   url: `/pages-sub/problem/work-order-manage/add-maintain-order?taskId=${item.taskId}&id=${item.id}&orderNo=${item.orderNo}`
-      // })
     }
     // 养护组长验收 - 打开弹窗
     if (nextStepMap[item.taskKey]?.name == '养护组长验收') {
@@ -556,8 +582,15 @@ const handleAddOrder = () =&gt; {
   });
 };
  
-// ========== 验收弹窗事件 ==========
-// 验收弹窗 - 确定按钮（含表单校验）
+// 验收弹窗 - 取消按钮（清空状态）
+const handleAcceptModalCancel = () => {
+  acceptModalShow.value = false;
+  acceptReason.value = ''; // 清空验收原因
+  acceptRadioValue.value = '0'; // 重置单选框为“通过”
+  acceptImgs.clearImgs(); // 清空验收图片
+};
+
+// 验收弹窗 - 确定按钮（含returnImgs传参）
 const handleAcceptModalConfirm = async () => {
   // 1. 校验验收原因是否为空
   if (!acceptReason.value.trim()) {
@@ -570,12 +603,13 @@ const handleAcceptModalConfirm = async () =&gt; {
     return;
   }
   try {
-    // 3. 调用验收接口
+    // 3. 构建请求参数（含returnImgs）
     console.log(currentAcceptItem.value)
     let postData = {}
     if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
       postData = {
-        "taskKey": currentAcceptItem.value.taskKey, // ylTeamLeaderConfirm
+        "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,
@@ -584,7 +618,8 @@ const handleAcceptModalConfirm = async () =&gt; {
     }
     if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
       postData = {
-        "taskKey": currentAcceptItem.value.taskKey,  //ylInspector
+        "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,
@@ -595,12 +630,11 @@ const handleAcceptModalConfirm = async () =&gt; {
     const acceptRes = await universalApproval(postData);
     // 4. 操作成功处理
     uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
-    acceptModalShow.value = false;
-    acceptReason.value = ''; // 清空验收原因
+    handleAcceptModalCancel(); // 清空状态
     paging.value?.reload(); // 刷新工单列表
   } catch (error) {
     // 5. 操作失败处理
-    console.error('养护组长验收失败：', error);
+    console.error('验收失败：', error);
     uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 1000});
   }
 };
@@ -621,7 +655,6 @@ onShow(() =&gt; {
 // 顶部固定区域
 .header-wrap {
   background-color: #fff;
-  //box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
  
 // 搜索栏样式
@@ -662,7 +695,6 @@ onShow(() =&gt; {
  
 }
  
-
 // 回退modal样式
 .reject-modal-content {
   width: 100%;
@@ -681,7 +713,6 @@ onShow(() =&gt; {
   }
 }
  
-
 .upload-wrap {
   margin-top: 20rpx;
  
@@ -696,6 +727,10 @@ onShow(() =&gt; {
   margin-top: 20rpx;
 }
  
+.mt-30 {
+  margin-top: 30rpx;
+}
+
 // 养护组长验收弹窗样式
 .accept-modal-content {
   width: 100%;
@@ -259,7 +259,7 @@
       </view>
     </view>
  
-    <!-- 回退原因弹窗 -->
+    <!-- 回退原因弹窗（新增图片上传） -->
     <up-modal
         :show="rejectModalShow"
         title="回退原因"
@@ -278,17 +278,32 @@
             maxlength="200"
             class="reject-textarea"
         />
+        <!-- 新增：回退图片上传（选填） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传回退图片（选填）</view>
+          <up-upload
+              :file-list="rejectImgs.imgList"
+              @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="acceptModalShow=false"
+        @cancel="handleAcceptModalCancel"
         @confirm="handleAcceptModalConfirm"
     >
       <view class="accept-modal-content">
@@ -311,6 +326,22 @@
               count
           />
         </view>
+
+        <!-- 新增：验收图片上传（选填） -->
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传验收图片（选填）</view>
+          <up-upload
+              :file-list="acceptImgs.imgList"
+              @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>
  
@@ -522,8 +553,7 @@ const activeTopTabClick = async (item: any) =&gt; {
   }
 }
  
-
-// ========== 新增：回退弹窗相关状态 ==========
+// ========== 回退弹窗相关状态（新增图片上传实例） ==========
 const rejectModalShow = ref(false); // 回退modal显示开关
 const rejectReason = ref(''); // 回退原因
 const currentRejectItem = ref<any>(null); // 当前回退工单
@@ -535,23 +565,35 @@ const rejectImgs = useUploadImgs({
   formRef: null,
   fieldName: 'rejectImgs'
 })
-// 监听上传实例响应式变化
+// 监听上传实例响应式变化，解决u-upload不刷新问题
 watch(() => rejectImgs.rawImgList.value, (newVal) => {
   rejectImgs.imgList = newVal
 }, { deep: true })
  
-// ========== 新增：验收弹窗相关状态 ==========
+// ========== 验收弹窗相关状态（新增图片上传实例） ==========
 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'
+})
+// 监听验收图片上传实例响应式变化
+watch(() => acceptImgs.rawImgList.value, (newVal) => {
+  acceptImgs.imgList = newVal
+}, { deep: true })
  
-// ========== 新增：生成临时key ==========
+// ========== 生成临时key ==========
 const generateTempKey = () => {
   return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
 };
  
-// ========== 新增：handleRenew 重新提交工单 ==========
+// ========== handleRenew 重新提交工单 ==========
 const handleRenew = (item: any) => {
   // 校验工单有效性
   if (!item || !item.id) {
@@ -577,7 +619,7 @@ const handleRenew = (item: any) =&gt; {
   });
 };
  
-// ========== 新增：handleReject 打开回退弹窗 ==========
+// ========== handleReject 打开回退弹窗 ==========
 const handleReject = (item: any) => {
   // 校验工单有效性
   if (!item || !item.id) {
@@ -590,14 +632,14 @@ const handleReject = (item: any) =&gt; {
   rejectModalShow.value = true; // 显示回退modal
 };
  
-// ========== 新增：回退弹窗取消按钮 ==========
+// ========== 回退弹窗取消按钮 ==========
 const handleRejectModalCancel = () => {
   rejectModalShow.value = false;
   rejectReason.value = '';
   rejectImgs.clearImgs(); // 清空上传图片
 };
  
-// ========== 新增：确认回退工单 ==========
+// ========== 确认回退工单（新增returnImgs传参） ==========
 const confirmReject = async () => {
   // 严格校验回退原因（去除首尾空格）
   const rejectReasonTrim = rejectReason.value.trim();
@@ -615,9 +657,9 @@ const confirmReject = async () =&gt; {
     // 显示加载中，防止重复提交
     uni.showLoading({title: '提交中...', mask: true});
  
-    // 构建请求参数
+    // 构建请求参数（新增returnImgs）
     const requestData = {
-      "returnImgs": rejectImgs.getSuccessImgUrls(),
+      "returnImgs": rejectImgs.getSuccessImgUrls(), // 回退图片URL数组
       "workerDataId": currentRejectItem.value.id,
       "taskKey": currentRejectItem.value.taskKey,
       "taskId": currentRejectItem.value.taskId,
@@ -628,9 +670,13 @@ const confirmReject = async () =&gt; {
     // 调用回退工单接口
     const res = await universalApproval(requestData);
     uni.showToast({title: '回退成功', icon: 'success', duration: 1000});
+
     rejectModalShow.value = false;
     // 重新获取工单详情，刷新页面
-    await DetailQuery(taskId.value);
+    // 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});
@@ -640,7 +686,7 @@ const confirmReject = async () =&gt; {
   }
 };
  
-// ========== 新增：handleProcess 处理工单 ==========
+// ========== handleProcess 处理工单 ==========
 const handleProcess = async (item: any) => {
   console.log(nextStepMap[item.taskKey]?.name)
   try {
@@ -672,6 +718,7 @@ const handleProcess = async (item: any) =&gt; {
       currentAcceptItem.value = item; // 存储当前工单信息
       acceptReason.value = ''; // 清空上次的验收原因
       acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptImgs.clearImgs(); // 清空验收图片
       acceptModalShow.value = true; // 显示验收弹窗
     }
     // 巡查员验收 - 打开弹窗
@@ -679,6 +726,7 @@ const handleProcess = async (item: any) =&gt; {
       currentAcceptItem.value = item; // 存储当前工单信息
       acceptReason.value = ''; // 清空上次的验收原因
       acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptImgs.clearImgs(); // 清空验收图片
       acceptModalShow.value = true; // 显示验收弹窗
     }
  
@@ -690,7 +738,7 @@ const handleProcess = async (item: any) =&gt; {
         content: "请确定是否结束工单？",
         success: async function (res) {
           if (res.confirm) {
-            // 构建请求参数
+            // 构建请求参数（携带returnImgs）
             const requestData = {
               "returnImgs": rejectImgs.getSuccessImgUrls(),
               "workerDataId": item.id,
@@ -717,7 +765,15 @@ const handleProcess = async (item: any) =&gt; {
   }
 };
  
-// ========== 新增：验收弹窗确认按钮 ==========
+// ========== 验收弹窗取消按钮（新增清空图片） ==========
+const handleAcceptModalCancel = () => {
+  acceptModalShow.value = false;
+  acceptReason.value = '';
+  acceptRadioValue.value = '0';
+  acceptImgs.clearImgs(); // 清空验收图片
+};
+
+// ========== 验收弹窗确认按钮（新增returnImgs传参） ==========
 const handleAcceptModalConfirm = async () => {
   // 1. 校验验收原因是否为空
   if (!acceptReason.value.trim()) {
@@ -735,6 +791,7 @@ const handleAcceptModalConfirm = async () =&gt; {
     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,
@@ -744,6 +801,7 @@ const handleAcceptModalConfirm = async () =&gt; {
     }
     if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
       postData = {
+        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
         "taskKey": currentAcceptItem.value.taskKey,  //ylInspector
         "taskId": currentAcceptItem.value.taskId,
         "workerDataId": currentAcceptItem.value.id,
@@ -755,10 +813,12 @@ const handleAcceptModalConfirm = async () =&gt; {
     const acceptRes = await universalApproval(postData);
     // 4. 操作成功处理
     uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
-    acceptModalShow.value = false;
-    acceptReason.value = ''; // 清空验收原因
+    handleAcceptModalCancel(); // 清空状态
     // 重新获取工单详情，刷新页面
-    await DetailQuery(taskId.value);
+    // await DetailQuery(taskId.value);
+    uni.reLaunch({
+      url: `/pages-sub/problem/work-order-manage/index`
+    });
   } catch (error) {
     // 5. 操作失败处理
     console.error('验收失败：', error);
@@ -926,7 +986,20 @@ onShow(() =&gt; {
   }
 }
  
+// 上传图片通用样式
+.upload-wrap {
+  margin-top: 20rpx;
+
+  .upload-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 10rpx;
+  }
+}
  
+.mt-20 {
+  margin-top: 20rpx;
+}
  
 // 回退弹窗样式
 .reject-modal-content {
@@ -935,6 +1008,9 @@ onShow(() =&gt; {
   padding: 10rpx 0;
 }
  
+.reject-textarea {
+  width: 100%;
+}
  
 // 验收弹窗样式
 .accept-modal-content {
@@ -955,7 +1031,6 @@ onShow(() =&gt; {
   margin-top: 30rpx;
 }
  
-
 .mt-30 {
   margin-top: 30rpx;
 }