feat:事件工单

张含笑

2025-10-11 446823f71c9f7b867244035433febb3d8fd66573

 src/subPackages/workDetail/index.vue

@@ -1,18 +1,239 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-09-29 13:52:16
 * @LastEditors  : yuan
 * @LastEditTime : 2025-09-29 13:53:32
 * @FilePath     : \src\subPackages\workDetail\index.vue
 * @Description  :
 * Copyright 2025 OBKoro1, All Rights Reserved.
 * 2025-09-29 13:52:16
-->
<!-- 工单详情 - 包含待审核、待处理、处理中、已完成 -->
<template>
  <view> 基础 </view>
   <view class="workDetailContainer">
      <div class="detailTop">
         <div class="image-container">
            <u-image class="detailImage" :src="workDetailData.photo_url" mode="cover" width="100%" height="200px"
               @click="previewImage(workDetailData.photo_url)"></u-image>
            <div class="detailTitle">
               <div class="titleText">
                  <p>{{workDetailData.event_name}}</p>
                  <p>{{workDetailData.create_time}}</p>
               </div>
            </div>
         </div>
      </div>
      <!-- 步骤条 -->
      <div class="stepContainer">
        <up-steps :current="currentStep" direction="column">
            <up-steps-item 
              v-for="(step, index) in stepTitles" 
              :key="index"
            >
              <template #title>
                <div class="horizontal-step">
                  <span class="step-title">{{ step.title }}</span>
                  <div class="step-desc" v-if="stepResponse[index]">
                    <span>{{ stepResponse[index].name || '' }}</span>
                    <span>{{ stepResponse[index].create_time || '' }}</span>
                  </div>
                </div>
              </template>
            </up-steps-item>
          </up-steps>
      </div>
      <!-- 工单内容 -->
      <div class="workOrderContent">
         <div class="workOrderTitle">工单内容</div>
         <div class="workOrderContainer">
            <div>工单名称:{{workDetailData.event_name}}</div>
            <div>工单类型:{{workDetailData.$type}}</div>
            <div>关联任务:{{workDetailData.job_name}}</div>
            <div>工单创建人:{{workDetailData.creator}}</div>
            <div>事件地址:{{workDetailData.address}}</div>
            <div>关联算法:{{workDetailData.ai_types}}</div>
            <div>发起部门:{{workDetailData.dept_name}}</div>
            <div>发起任务时间:{{workDetailData.create_time}}</div>
            <div>工单内容:{{workDetailData.remark}}</div>
         </div>
      </div>
      <!-- 操作按钮 -->
      <div class="actionButton">
         <div class="leftBtn" @click="leftClick">
            上一页
         </div>
         <div class="btngroups">
            <up-button type="primary" text="通过"></up-button>
            <up-button type="error" text="不通过"></up-button>
         </div>
         <div class="leftBtn" @click="rightClick">
            下一页
         </div>
      </div>

   </view>
</template>

<script setup></script>
<script setup>
   import {getStepInfo,getList} from '/src/api/work/index.js'
   const eventNum = ref('');
   const currentStatus = ref('')
   const stepResponse = ref([]);
   const currentStep = ref(0);
   // 工单内容
   const workDetailData = ref({})
   const stepTitles  =ref([
      {
         title: '待审核',
         status: '2'
      },
      {
         title: '待处理',
         status: '0'
      },
		
      {
         title: '处理中',
         status: '3'
      },{
         title: '已完成',
         status: '4'
      }
   ])
   onLoad(async (options) => {
     eventNum.value = options.eventNum;
     await getDataList(eventNum.value); 
     await getStepInfoData(eventNum.value); 
   });
   const getDataList = async (val) => {
     const params = {
       current: 1,
       size: 9999,
       source: 1,  
       event_name: val
     }
     const res = await getList(params);
     const response = res.data.data.records;
     workDetailData.value = response[0];
     currentStatus.value = workDetailData.value.status;
	  
   }
   // 步骤条
   const calculateCurrentStep = (status) => {
     const statusToStep = {
       '2': 0,  // 待审核 -> 第0步
       '0': 1,  // 待处理 -> 第1步
       '3': 2,  // 处理中 -> 第2步
       '4': 3   // 已完成 -> 第3步
     }
     return statusToStep[String(status)] || 0 
   }
   const getStepInfoData = async (val) => {
     const res = await getStepInfo(val);
     stepResponse.value = res.data.data;
     currentStep.value = calculateCurrentStep(currentStatus.value);
   }
   // 图片预览
   const previewImage = (url) => {
      uni.previewImage({
         urls: [url],
         current: 0
      });
   };
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
   .workDetailContainer {
      padding: 0 10px;

      .detailTop {
         .image-container {
            position: relative;
            width: 100%;
            height: 200px;

            .detailImage {
               width: 100%;
               height: 100%;
               display: block;
               object-fit: cover
            }

            .detailTitle {
               position: absolute;
               left: 0;
               bottom: 0;
                   width: 100%; 
            }

            .titleText {
               display: flex;
               width: 100%;
               justify-content: space-between;
               align-items: center;
            }
         }
      }

      .stepContainer {
         margin-top: 10px;
         display: flex;
         background-color: aquamarine;
         border-radius: 5px;
         padding: 10px;
          .horizontal-step {
             display: flex;
             align-items: center;
             gap: 12px;
			    
             .step-title {
               min-width: 60px; 
             }
			    
             .step-desc {
               display: flex;
              justify-content: space-around;
               gap: 8px;
               // color: #666;
               font-size: 14px;
             }
           }

      }

		
      .actionButton{
         display: flex;
         justify-content: space-between;
      margin-bottom: 10px;
         .btngroups {
            display: flex;
            justify-content: space-between;
            .u-button {
               padding: 9px 20px;
                 height: 32px;
                 &:last-child {
                     margin-left: 12px;
                     margin-right: 12px;
                   }
            }
         }
         .leftBtn {
           width: 70px;
           height: 32px;
           background-color: #999;
           border-radius: 5px;
           text-align: center;
           line-height: 32px;
           color: #fff;
           cursor: pointer;
           opacity: 0.8;
         }
         .disableds {
           background: #999 !important;
           cursor: not-allowed !important;
           pointer-events: none;
           opacity: 0.3 !important;
         }
      }
      .workOrderContent {
         margin-top: 15px;
         .workOrderContainer {
            div {
               margin-bottom: 10px;
            }
         }
      }
		
   }
</style>