工单详情

刘淇
1 parent 5059c4dd
Showing 5 changed files with 355 additions and 96 deletions
api/work-order-manage/work-order-manage.js
common/utils/common.js
pages-sub/problem/work-order-manage/add-maintain-order.vue
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
 import { post, get, put } from '@/common/utils/request';
-// /app-api/bpm/garden/workorder/getApprovalDetail 获得审批详情
 // /app-api/bpm/garden/workorder/approve             验收通过调用此接口、巡查员结束工单也调用此接口
@@ -8,6 +7,15 @@ import { post, get, put } from &#39;@/common/utils/request&#39;;
 /**
+ *   获得审批详情  流程节点
+ * @returns {Promise}
+ */
+export const getApprovalDetail = (params) => {
+  return get('/app-api/bpm/garden/workorder/getApprovalDetail',params);
+};
+
+
+/**
  *   养护员工单实施页面提交接口
  * @returns {Promise}
  */
@@ -18,4 +18,11 @@ export const nextStepMap = {
     operateTypeNoPass: 230,  // 养护组长验收不通过：230
     backShow:false
   },
+  ylInspector:{
+    name: '巡查员验收',
+    btnText:'验收',
+    operateTypePass: 140, //巡查员验收通过: 140
+    operateTypeNoPass: 240,  // 巡查员验收不通过：230
+    backShow:false
+  }
 }
 \ No newline at end of file
@@ -448,7 +448,7 @@ const submitWorkOrder = async () =&gt; {
     const submitData = {
       taskId: workOrderForm.taskId,
       taskKey:'ylWorker',
-      operateType:nextStepMap['ylWorker'].operateType,
+      operateType:nextStepMap['ylWorker'].operateTypePass,
       workerDataId:Number(workOrderForm.workerDataId),
       // nextStepMap
       handleResult: workOrderForm.reason.trim(),
@@ -10,7 +10,6 @@
             active-color="#1989fa"
             inactive-color="#666"
             font-size="30rpx"
-
             @click="handleTabChange"
         />
@@ -52,7 +51,6 @@
         v-model="orderList"
         @query="queryList"
         :auto-show-system-loading="true"
-
     >
       <template #empty>
         <empty-view/>
@@ -102,7 +100,9 @@
                 <up-button type="warning" size="mini" @click="handleReject(item)"
                            v-show="nextStepMap[item.taskKey].backShow">回退
                 </up-button>
-                <up-button type="primary" size="mini" @click="handleProcess(item)">{{ nextStepMap[item.taskKey].btnText }}
+                <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>
@@ -174,7 +174,7 @@
             placeholder="请输入回退原因（必填）"
             :required="true"
             maxlength="-1"
-            rows="4"
+            rows="6"
             class="mt-20"
         />
         <view class="upload-wrap mt-20">
@@ -194,6 +194,41 @@
         </view>
       </view>
     </up-popup>
+
+    <!-- 新增：养护组长验收弹窗 up-modal -->
+    <up-modal
+        :show="acceptModalShow"
+        title="验收"
+        :closeOnClickOverlay="false"
+        :showConfirmButton="true"
+        :showCancelButton="true"
+        @cancel="acceptModalShow=false"
+        @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>
+    </up-modal>
   </view>
 </template>
@@ -201,7 +236,12 @@
 import { ref, computed } from 'vue';
 import { onReady, onShow } from '@dcloudio/uni-app';
 import { timeFormat } from '@/uni_modules/uview-plus';
-import { myBuzSimplePage, todoBuzSimplePage, doneBuzSimplePage } from '@/api/work-order-manage/work-order-manage'
+import {
+  myBuzSimplePage,
+  todoBuzSimplePage,
+  doneBuzSimplePage,
+  universalApproval
+} from '@/api/work-order-manage/work-order-manage'
 // 假设从用户store获取角色信息
 import { useUserStore } from '@/pinia/user';
 import { nextStepMap } from '@/common/utils/common'
@@ -239,6 +279,11 @@ const rejectFileList = ref([]);
 const currentRejectItem = ref(null);
 // 上传地址（根据实际接口配置）
 const uploadUrl = ref('https://xxx.com/upload');
+// ========== 新增：养护组长验收弹窗相关状态 ==========
+const acceptModalShow = ref(false); // 验收弹窗显示开关
+const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
+const acceptReason = ref(''); // 验收原因
+const currentAcceptItem = ref(null); // 当前验收的工单项
 // 分页查询列表
 const queryList = async (pageNo, pageSize) => {
   try {
@@ -289,12 +334,12 @@ const handleSearch = (val) =&gt; {
 const handleDetail = (item) => {
   // 0-待办 1我发起的- 2-已办
   uni.navigateTo({
-    url: `/pages-sub/problem/work-order-manage/order-detail?taskId=${item.taskId}&activeTab=${activeTab.value}`
+    url: `/pages-sub/problem/work-order-manage/order-detail?taskId=${item.taskId}&activeTab=${activeTab.value}&processInstanceId=${item.processInstanceId}`
   });
 };
 // 待办-处理工单
 const handleProcess = async (item) => {
-  console.log(nextStepMap)
+  console.log(nextStepMap[item.taskKey].name)
   try {
     if (nextStepMap[item.taskKey].name == '养护组长分配') {
       uni.navigateTo({
@@ -306,6 +351,24 @@ const handleProcess = async (item) =&gt; {
         url: `/pages-sub/problem/work-order-manage/add-maintain-order?taskId=${item.taskId}&id=${item.id}&orderNo=${item.orderNo}`
       })
     }
+    // 养护组长验收 - 打开弹窗
+    if (nextStepMap[item.taskKey].name == '养护组长验收') {
+      console.log('123')
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+
+    // 巡查员验收 - 打开弹窗
+    if (nextStepMap[item.taskKey].name == '巡查员验收') {
+      console.log('456')
+      currentAcceptItem.value = item; // 存储当前工单信息
+      acceptReason.value = ''; // 清空上次的验收原因
+      acceptRadioValue.value = '0'; // 重置默认选中“通过”
+      acceptModalShow.value = true; // 显示验收弹窗
+    }
+
   } catch (error) {
     console.error('处理工单失败：', error);
     uni.showToast({title: '处理失败，请重试', icon: 'none'});
@@ -357,6 +420,58 @@ const handleAfterRead = (file) =&gt; {
 const handleDeleteFile = (index) => {
   rejectFileList.value.splice(index, 1);
 };
+// ========== 新增：养护组长验收弹窗事件 ==========
+// 验收弹窗 - 取消按钮
+const handleAcceptModalCancel = () => {
+  acceptModalShow.value = false;
+  acceptReason.value = ''; // 清空验收原因
+};
+// 验收弹窗 - 确定按钮（含表单校验）
+const handleAcceptModalConfirm = async () => {
+  // 1. 校验验收原因是否为空
+  if (!acceptReason.value.trim()) {
+    uni.showToast({title: '请填写验收原因', icon: 'none', duration: 2000});
+    return;
+  }
+  // 2. 校验验收原因长度（虽textarea已限制maxlength，此处做兜底校验）
+  if (acceptReason.value.length > 200) {
+    uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 2000});
+    return;
+  }
+  try {
+    // 3. 调用验收接口
+    console.log(currentAcceptItem.value)
+    let postData = {}
+    if(currentAcceptItem.value.taskKey == 'ylTeamLeaderConfirm'){   //   养护组长验收
+      postData = {
+        "taskKey": "ylTeamLeaderConfirm",
+        "taskId": currentAcceptItem.value.taskId,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap['ylTeamLeaderConfirm'].operateTypePass : nextStepMap['ylTeamLeaderConfirm'].operateTypeNoPass,
+        "reason": acceptReason.value.trim()
+      }
+    }
+    if(currentAcceptItem.value.taskKey == 'ylInspector'){   //   巡查员验收
+      postData = {
+        "taskKey": "ylTeamLeaderConfirm",
+        "taskId": currentAcceptItem.value.taskId,
+        "operateType": acceptRadioValue.value == 0 ? nextStepMap['ylTeamLeaderConfirm'].operateTypePass : nextStepMap['ylTeamLeaderConfirm'].operateTypeNoPass,
+        "reason": acceptReason.value.trim(),
+        "agree":acceptRadioValue.value
+      }
+    }
+
+    const acceptRes = await universalApproval(postData);
+    // 4. 操作成功处理
+    uni.showToast({title: '提交成功', icon: 'success', duration: 1500});
+    acceptModalShow.value = false;
+    acceptReason.value = ''; // 清空验收原因
+    paging.value?.reload(); // 刷新工单列表
+  } catch (error) {
+    // 5. 操作失败处理
+    console.error('养护组长验收失败：', error);
+    uni.showToast({title: '验收提交失败，请重试', icon: 'none', duration: 2000});
+  }
+};
 // 页面初始化
 onShow(() => {
   // 初始化加载列表
@@ -401,5 +516,28 @@ onShow(() =&gt; {
   }
 }
+// 新增：养护组长验收弹窗样式
+.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%;
+}
+.modal-btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10rpx;
+}
 </style>
 \ No newline at end of file
@@ -26,31 +26,33 @@
       <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-group :border="false" class="detail-cell-group">
             <!-- 工单编号 -->
             <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>
-            <!-- 工单位置 -->
-
-            <up-cell  align="middle">
+            <!-- 工单位置 -->
+            <up-cell align="middle">
               <template #title>
-                <view  style="min-width: 200rpx">工单位置</view>
+                <view style="min-width: 200rpx">工单位置</view>
               </template>
               <template #value>
                 <view class="common-text-color up-line-1">{{ orderDetail.roadName || '--' }}</view>
               </template>
             </up-cell>
+
             <!-- 工单名称 -->
             <up-cell title="工单名称" :value="orderDetail.orderName || '--'" align="middle"></up-cell>
+
             <!-- 情况描述 -->
-            <up-cell >
+            <up-cell>
               <template #title>
-                <view  style="min-width: 200rpx">情况描述</view>
+                <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="紧急程度"
@@ -58,6 +60,29 @@
                 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>
+              <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>
@@ -72,48 +97,49 @@
                 </view>
               </template>
             </up-cell>
+
             <!-- 希望完成时间 -->
             <up-cell
                 title="希望完成时间"
-                :value="timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss') || '--'"
+                :value="orderDetail.finishDate === 0 ? '未设置' : timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss')"
                 align="middle"
                 :border="false"
             ></up-cell>
           </up-cell-group>
-
           <!-- 图片分类Tabs区块 -->
-<!--          <view class="img-tabs-block">-->
-<!--            <up-tabs-->
-<!--                v-model="activeImgTab"-->
-<!--                :list="imgTabList"-->
-<!--                :scrollable="false"-->
-<!--                active-color="#3c9cff"-->
-<!--                inactive-color="#666"-->
-<!--                class="img-tabs"-->
-<!--            ></up-tabs>-->
-
-<!--            &lt;!&ndash; 图片Tab内容区 &ndash;&gt;-->
-<!--            <view class="img-tab-content">-->
-<!--              <up-album-->
-<!--                  v-if="getCurrentImgList().length"-->
-<!--                  :urls="getCurrentImgList().slice(0, 3)"-->
-<!--                  singleSize="100"-->
-<!--                  :preview-full-image="true"-->
-<!--                  class="img-album"-->
-<!--              ></up-album>-->
-<!--              <text v-else class="empty-img-text">暂无{{ imgTabList[activeImgTab].name }}图片</text>-->
-<!--            </view>-->
-<!--          </view>-->
+          <view class="img-tabs-block">
+            <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="80"
+                  multipleSize="80"
+                  :preview-full-image="true"
+                  class="img-album"
+              ></up-album>
+              <text v-else class="empty-img-text">暂无图片</text>
+            </view>
+          </view>
         </view>
         <!-- 2. 流程节点Tab -->
         <view v-show="activeTopTab == 1" class="process-content">
-          <up-empty
-              mode="data"
-
-          ></up-empty>
-          <!-- 可根据实际需求补充流程节点展示逻辑 -->
+<!--          <up-empty-->
+<!--              mode="data"-->
+<!--          ></up-empty>-->
+<!--          &lt;!&ndash; 可根据实际需求补充流程节点展示逻辑 &ndash;&gt;-->
         </view>
       </view>
     </view>
@@ -124,7 +150,7 @@
 import { ref, computed } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import { timeFormat } from '@/uni_modules/uview-plus';
-import { getMyTaskDetail, getDoneTaskDetail, getTodoTaskDetail } from '@/api/work-order-manage/work-order-manage';
+import { getMyTaskDetail, getDoneTaskDetail, getTodoTaskDetail, getApprovalDetail } from '@/api/work-order-manage/work-order-manage';
 // 状态管理
 const loading = ref(true);
@@ -137,9 +163,16 @@ const topTabList = ref([
   { name: '流程节点' }
 ]);
-const activeTopTabClick = (item)=>{
+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)
+  }
 }
 // 图片分类Tab列表（带角标配置）
@@ -151,42 +184,100 @@ const imgTabList = ref([
   { name: '材料' }
 ]);
-// 工单详情数据
-const orderDetail = ref({});
+// 工单详情数据（初始化赋值，可被接口数据覆盖）
+const orderDetail = ref<any>({
+  id: 0,
+  busiLine: '',
+  orderNo: '',
+  orderName: '',
+  sourceId: 0,
+  sourceName: '',
+  roadId: 0,
+  roadName: '',
+  streetId: '',
+  streetName: '',
+  curingLevelId: 0,
+  curingLevelName: '',
+  commitDate: 0,
+  finishDate: 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 getCurrentImgList = computed(() => {
-  const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
-  return orderDetail[tabKeyMap[activeImgTab.value]] || [];
-});
+const currentImgList = ref([])
+
+const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
+const imgTabChange = (({index})=>{
+  console.log(index)
+  const currentKey = tabKeyMap[index]
+  console.log(currentKey)
+  console.log(orderDetail.value[currentKey])
+  currentImgList.value = orderDetail.value[currentKey]
+})
+
 /**
  * 获取工单详情
  */
-const DetailQuery = async (taskIdStr) => {
-  console.log(taskIdStr)
+const DetailQuery = async (taskIdStr: string) => {
+  console.log('当前工单ID：', taskIdStr)
   try {
     loading.value = true;
-    if(activeTab.value==0){
-
-      const res = await getTodoTaskDetail({ taskId:taskIdStr });
-      orderDetail.value = res
+    // 转换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(activeTab.value==1){
-
-      const res = await getMyTaskDetail({ taskId:  taskIdStr });
-      orderDetail.value = res
+    // 覆盖工单详情数据
+    if (res) {
+      orderDetail.value = res;
+      currentImgList.value =  orderDetail.value.startImgs
     }
-    if(activeTab.value==2){
-
-      const res = await getDoneTaskDetail({ taskId:  taskIdStr });
-      orderDetail.value = res
-    }
-
-
   } catch (error) {
     console.error('获取工单详情失败：', error);
     uni.showToast({ title: '加载失败，请重试', icon: 'none' });
@@ -195,28 +286,33 @@ const DetailQuery = async (taskIdStr) =&gt; {
   }
 };
-// 页面加载
+// 页面加载参数
 const taskId = ref('')
 const activeTab = ref('')
-onLoad((options) => {
-  console.log(options)
-  const { taskId: taskIdOpt, activeTab: activeTabOpt  } = options;
-  // 0-待办 1我发起的- 2-已办
-  console.log(taskIdOpt)
-  taskId.value = taskIdOpt
-  activeTab.value = activeTabOpt
+const processInstanceId = ref('')
+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 ;
+});
+onShow(() => {
+  if (taskId.value) {
+    DetailQuery(taskId.value);
+  } else {
+    loading.value = false;
+    uni.showToast({ title: '缺少工单ID参数', icon: 'none' });
+  }
 });
-onShow(()=>{
-  DetailQuery(taskId.value)
-})
 </script>
 <style scoped lang="scss">
 // 全局样式
 .page-container {
   min-height: 100vh;
-
 }
 // 主内容容器
@@ -238,18 +334,17 @@ onShow(()=&gt;{
 .detail-content {
   .detail-cell-group {
     background-color: #fff;
-
     margin-bottom: 20rpx;
   }
-
   .cell-content-wrap {
-    //display: flex;
-    //flex-wrap: wrap;
-    //gap: 12rpx;
+    // 保持原有样式，兼容up-album布局
   }
-
+  .empty-text {
+    color: #999;
+    font-size: 26rpx;
+  }
 }
 // 图片分类Tabs区块
@@ -258,13 +353,13 @@ onShow(()=&gt;{
   border-radius: 12rpx;
   padding: 16rpx;
-  // 图片Tabs样式（平均分配空间）
-  .img-tabs {
-    --u-tabs-item-flex: 1; // 平均分配空间
-    --u-tabs-item-font-size: 26rpx;
-    --u-tabs-item-height: 72rpx;
-    margin-bottom: 16rpx;
-  }
+  //// 图片Tabs样式（平均分配空间）
+  //.img-tabs {
+  //  --u-tabs-item-flex: 1; // 平均分配空间
+  //  --u-tabs-item-font-size: 26rpx;
+  //  --u-tabs-item-height: 72rpx;
+  //  margin-bottom: 16rpx;
+  //}
   // 图片内容区
   .img-tab-content {
@@ -278,11 +373,22 @@ onShow(()=&gt;{
       width: 100%;
     }
+    .empty-img-text {
+      height: 100px;
+      line-height: 100px;
+      color: #999;
+      font-size: 28rpx;
+    }
   }
 }
 // 流程节点空状态
 .process-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400rpx;
+
   .empty-process {
     margin-top: 100rpx;
   }