巡检记录接口对接

wuye-manager-uniapp/pageSubPack/inspection/inspection_upload.vue

@@ -5,16 +5,16 @@
         <view class="inspection_title flex flex-between">
           <view class="title flex">
             <text class="line"></text>
-            <text>幸福苑小区- B1层地下车库</text>
+            <text>{{ info.villageName }} - {{ info.taskName }}</text>
           </view>
-          <view class="status">
+          <view class="status" v-if="!isComputed">
             <text>未巡检</text>
           </view>
         </view>
         <view class="inspection_item_info_box">
           <view class="inspection_item">
             <text>巡检项目：</text>
-            <text>设备巡检</text>
+            <text>{{ info.planName }}</text>
           </view>
           <view class="inspection_item">
             <text>巡检时间：</text>
@@ -22,106 +22,92 @@
           </view>
           <view class="inspection_item">
             <text>巡检小区：</text>
-            <text>幸福苑小区</text>
+            <text>{{ info.villageName }}</text>
           </view>
-          <view class="inspection_item">
-            <text>巡检路线：</text>
-            <text>常规巡检路线1</text>
-          </view>
-          <view class="inspection_item">
-            <text>巡检点：</text>
-            <text>安全巡检点1；</text>
-            <text>安全巡检点2；</text>
-            <text>安全巡检点3；</text>
-            <text>安全巡检点4；</text>
+          <view class="" v-for="(item, index) in baseFormData" :key="index">
+            <view class="inspection_item">
+              <text>巡检路线：</text>
+              <text>{{ item.routeName }}</text>
+            </view>
+            <view class="inspection_item">
+              <text>巡检点：</text>
+              <text v-for="(ite, ind) in item.points" :key="ind">{{ ite.ponitName }}；</text>
+            </view>
           </view>
         </view>
       </view>
-      <view class="inspection_info_upload_box">
-        <view class="header"> <text>巡检结果</text> </view>
-        <view class="info_body" :key="index" v-for="(item, index) in baseFormData">
-          <view class="info_title" style="margin-bottom: 20rpx"> {{ item.name }} </view>
-          <uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="150">
-            <uni-forms-item label="巡检状态" required>
-              <uni-data-checkbox
-                :disabled="item.complated"
-                v-model="item.status"
-                :localdata="statuslist"
-              />
-            </uni-forms-item>
-            <uni-forms-item label="巡检描述">
-              <uni-easyinput
-                type="textarea"
-                :disabled="item.complated"
-                :input-border="true"
-                v-model="item.desition"
-                placeholder="请输入"
-              ></uni-easyinput>
-            </uni-forms-item>
-            <uni-forms-item label="巡检时间">
-              <uni-datetime-picker
-                type="datetime"
-                :disabled="item.complated"
-                return-type="timestamp"
-                v-model="item.datetimesingle"
-              />
-            </uni-forms-item>
-            <!--    <uni-forms-item label="巡检照片">
-              <uni-file-picker
-                @delete="deleteFile"
-                @select="select"
-                mode="grid"
-                v-model="item.files"
-                :auto-upload="false"
-                :sourceType="['camera']"
-                file-mediatype="image"
-              >
-                <view class="filePicker flex-center">
-                  <uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
-                </view>
-              </uni-file-picker>
-            </uni-forms-item> -->
-            <view class="items_picker_box">
-              <view class="label"> 巡检照片 </view>
-              <view class="filePickerbox" v-if="!item.complated">
-                <filePicker
-                  v-model="item.files"
-                  :sourceType="['camera']"
-                  file-field-name="file"
-                  :extra-data="uploadParams"
-                  @success="onUploadSuccess"
-                  @fail="onUploadFail"
-                ></filePicker>
-              </view>
-              <view class="filePickerbox showimagegrid" v-else>
-                <image
-                  class="img"
-                  mode="scaleToFill"
-                  v-for="(ite, ind) in item.files"
-                  lazy-load
-                  :key="ind"
-                  :src="ite"
-                  @tap="previewImages(item.files, index)"
-                ></image>
-              </view>
-            </view>
-          </uni-forms>
-          <view class="submitbox" @tap="handleSubmit(item.id)">
-            <text>提交</text>
+      <view class="inspection_info_upload_box" v-if="baseFormData.length > 0">
+        <view class="inspection_routes" v-for="(item, index) in baseFormData" :key="index">
+          <view class="header">
+            <text>{{ item.routeName }} - 巡检结果</text>
+          </view>
+          <view class="info_body" v-for="(ite, ind) in item.points" :key="ind">
+            <view class="info_title" style="margin-bottom: 20rpx"> {{ ite.ponitName }} </view>
+            <uni-forms :modelValue="ite" :rules="rules" label-position="left" label-width="150">
+              <uni-forms-item label="巡检状态" required>
+                <uni-data-checkbox
+                  :disabled="ite.complated"
+                  v-model="ite.status"
+                  :localdata="statuslist"
+                />
+              </uni-forms-item>
+              <uni-forms-item label="巡检描述" v-if="!ite.complated">
+                <uni-easyinput
+                  type="textarea"
+                  :disabled="ite.complated"
+                  :input-border="true"
+                  v-model="ite.desition"
+                  placeholder="请输入"
+                ></uni-easyinput>
+              </uni-forms-item>
+              <view class="items_picker_box flex" style="align-items: baseline" v-else>
+                <view class="label"> 巡检描述 </view>
+                <view class="desitionbox flex-1">
+                  <text class="desition">{{ ite.desition }}</text>
+                </view>
+              </view>
+              <view class="items_picker_box">
+                <view class="label"> 巡检照片 </view>
+                <view class="filePickerbox" v-if="!ite.complated">
+                  <filePicker
+                    v-model="ite.files"
+                    :sourceType="['camera']"
+                    file-field-name="file"
+                    :extra-data="uploadParams"
+                    uploadUrl="/resource/oss/upload"
+                    @fail="onUploadFail"
+                  ></filePicker>
+                </view>
+                <view class="filePickerbox showimagegrid" v-else>
+                  <image
+                    class="img"
+                    mode="scaleToFill"
+                    v-for="(ite, ind) in ite.files"
+                    lazy-load
+                    :key="ind"
+                    :src="ite"
+                    @tap="previewImages(ite.files, index)"
+                  ></image>
+                </view>
+              </view>
+            </uni-forms>
+            <view class="submitbox" @tap="handleSubmit(ite)" v-if="!ite.complated">
+              <text>提交</text>
+            </view>
+            <view class="line" v-if="ind + 1 === baseFormData.length"> </view>
           </view>
-          <view class="line" v-if="index + 1 !== baseFormData.length"> </view>
         </view>
-        <!-- <view class="submitbox">
-          <text>提交</text>
-        </view> -->
       </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import filePicker from '@/components/filePicker/filePicker.vue'
+import { getInspectionMain } from '@/api/insepction.js'
+import { onLoad } from '@dcloudio/uni-app'
+import { putInsepctionPoint } from '@/api/insepction.js'
 
 const statuslist = [
   {
@@ -133,27 +119,16 @@ const statuslist = [
     value: 1
   }
 ]
+const taskid = ref('')
 const baseFormData = ref([])
 const info = ref({
-  point: Array.from({ length: 4 }).map((_, index) => {
-    let obj1 = {
-      name: `巡检点${index + 1}`,
-      id: index + ''
-    }
-    let obj = {
-      id: index,
-      name: obj1.name,
-      desition: '', // 描述
-      datetimesingle: '', // 时间
-      status: 0, // 状态 0正常1异常
-      files: [], // 图片
-      complated: false, // 巡检点完成检查
-      fileUrls: '' // 图片
-    }
-
-    baseFormData.value.push(obj)
-    return obj1
-  })
+  planName: '',
+  remindTime: '',
+  routes: [],
+  taskId: '',
+  taskName: '',
+  taskTime: '',
+  villageName: ''
 })
 const rules = {
   status: {
@@ -166,36 +141,86 @@ const rules = {
   }
 }
 
-//  ----------------------------------------------
-const uploadParams = ref({
-  type: 'repair', // 上传类型：报修
-  businessId: '123456', // 关联业务ID
-  userId: '789' // 用户ID
+function init() {
+  if (!taskid.value) return
+  getInspectionMain(taskid.value)
+    .then(res => {
+      info.value = res.data
+      if (!res.data.routes) return
+      let result = res.data.routes
+        .map(item => {
+          if (!item.points || item.points.length <= 0) return false
+          const points = item.points.map(ite => {
+            return {
+              pointId: ite.pointId,
+              ponitName: ite.pointName,
+              status: ite.status ?? 0,
+              desition: ite.remark,
+              complated: ite.status !== null,
+              files: ite.imgUrl ? ite.imgUrl.split(',') : []
+            }
+          })
+          return {
+            routeName: item.routeName,
+            routeId: item.routeId,
+            description: item.description,
+            points: points
+          }
+        })
+        .filter(item => item !== false)
+      baseFormData.value = result
+      console.log(result)
+      console.log(isComputed.value)
+    })
+    .catch(err => {
+      uni.showToast({
+        icon: 'error',
+        title: '网络异常'
+      })
+    })
+}
+onLoad(options => {
+  taskid.value = options.id
+  // taskid.value = '2044684785371725826'
+  init()
 })
 
-// 选择文件
-function onUploadSuccess(e) {
-  console.log('上传成功', e)
-}
+//  ----------------------------------------------
+const uploadParams = ref({})
 
 function onUploadFail(e) {
   console.log('上传失败', e)
 }
 
-function submit() {
-  console.log('最终要提交的图片URL', imageList.value)
-  // 这里调用你的提交接口
-}
-
 /** 提交巡检点 检查情况 */
-function handleSubmit(id) {
-  console.log(typeof id, id, baseFormData.value)
-  const find = baseFormData.value.find(item => item.id === id)
-  if (find) {
-    find.complated = true
+function handleSubmit(item) {
+  console.log(item, baseFormData.value)
+  let obj = {
+    pointId: item.pointId,
+    imgUrl: item.files.length > 0 ? item.files.join(',') : '',
+    remark: item.desition,
+    status: item.status,
+    taskId: taskid.value
   }
+  console.log(obj)
+  putInsepctionPoint(obj)
+    .then(res => {
+      item.complated = true
+      console.log(isComputed.value)
+      console.log(res)
+    })
+    .catch(err => {
+      console.log(err)
+    })
 }
 
+const isComputed = computed(() => {
+  // 遍历每一项
+  return baseFormData.value.every(item => {
+    // 每一项里的所有 points 都必须是已完成
+    return item.points.every(point => point.complated)
+  })
+})
 /**
  * 预览图片
  * @param {Array} images - 所有图片的URL数组
@@ -279,12 +304,22 @@ function previewImages(images, currentIndex) {
     }
     .info_body {
       margin-bottom: 40rpx;
+      .desitionbox {
+        .desition {
+          font-size: small;
+          color: #ccc;
+          line-height: 1;
+          letter-spacing: 1px;
+        }
+      }
     }
     .info_title {
       font-weight: 550;
     }
     .line {
       width: 100%;
+      margin-top: 40rpx;
+      margin-bottom: 40rpx;
       border: 1rpx dashed #ccc;
     }
     .items_picker_box {
@@ -320,7 +355,6 @@ function previewImages(images, currentIndex) {
     color: #ffffff;
     line-height: 80rpx;
     margin-top: 40rpx;
-    margin-bottom: 40rpx;
   }
 }
 </style>