巡检工单

package.json

@@ -10,7 +10,7 @@
     "dev-server": "vite --mode dev",
     "ts:check": "vue-tsc --noEmit",
     "build:local": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
-    "build:dev": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode dev",
+    "build:dev": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode dev",
     "build:test": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode test",
     "build:stage": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode stage",
     "build:prod": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode prod",

src/api/pms/inspect/order/index.ts

@@ -1,45 +1,49 @@
-import request from '@/config/axios'
-
-// 巡检工单 VO
-export interface IotInspectOrderVO {
-  id: number // 主键id
-  inspectOrderTitle: string // 巡检工单名
-  inspectOrderCode: string // 巡检工单编码
-  status: string // 巡检工单状态
-  remark: string // 备注
-  deptId: number // 部门id
-  deviceIds: string // 设备id
-}
-
-// 巡检工单 API
-export const IotInspectOrderApi = {
-  // 查询巡检工单分页
-  getIotInspectOrderPage: async (params: any) => {
-    return await request.get({ url: `/rq/iot-inspect-order/page`, params })
-  },
-
-  // 查询巡检工单详情
-  getIotInspectOrder: async (id: number) => {
-    return await request.get({ url: `/rq/iot-inspect-order/get?id=` + id })
-  },
-
-  // 新增巡检工单
-  createIotInspectOrder: async (data: IotInspectOrderVO) => {
-    return await request.post({ url: `/rq/iot-inspect-order/create`, data })
-  },
-
-  // 修改巡检工单
-  updateIotInspectOrder: async (data: IotInspectOrderVO) => {
-    return await request.put({ url: `/rq/iot-inspect-order/update`, data })
-  },
-
-  // 删除巡检工单
-  deleteIotInspectOrder: async (id: number) => {
-    return await request.delete({ url: `/rq/iot-inspect-order/delete?id=` + id })
-  },
-
-  // 导出巡检工单 Excel
-  exportIotInspectOrder: async (params) => {
-    return await request.download({ url: `/rq/iot-inspect-order/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 巡检工单 VO
+export interface IotInspectOrderVO {
+  id: number // 主键id
+  inspectOrderTitle: string // 巡检工单名
+  inspectOrderCode: string // 巡检工单编码
+  status: string // 巡检工单状态
+  remark: string // 备注
+  deptId: number // 部门id
+  deviceIds: string // 设备id
+}
+
+// 巡检工单 API
+export const IotInspectOrderApi = {
+  // 查询巡检工单分页
+  getIotInspectOrderPage: async (params: any) => {
+    return await request.get({ url: `/rq/iot-inspect-order/page`, params })
+  },
+
+  // 查询巡检工单详情
+  getIotInspectOrder: async (id: number) => {
+    return await request.get({ url: `/rq/iot-inspect-order/get?id=` + id })
+  },
+
+  // 新增巡检工单
+  createIotInspectOrder: async (data: IotInspectOrderVO) => {
+    return await request.post({ url: `/rq/iot-inspect-order/create`, data })
+  },
+
+  // 修改巡检工单
+  updateIotInspectOrder: async (data: IotInspectOrderVO) => {
+    return await request.put({ url: `/rq/iot-inspect-order/update`, data })
+  },
+
+  // 删除巡检工单
+  deleteIotInspectOrder: async (id: number) => {
+    return await request.delete({ url: `/rq/iot-inspect-order/delete?id=` + id })
+  },
+
+  // 导出巡检工单 Excel
+  exportIotInspectOrder: async (params) => {
+    return await request.download({ url: `/rq/iot-inspect-order/export-excel`, params })
+  },
+  //填写巡检工单
+  writeIotInspectOrder: async (data: any, orderId) => {
+    return await request.post({ url: `/rq/iot-inspect-order/write/`+orderId, data })
+  },
+}

src/views/pms/inspect/order/WriteOrder.vue

@@ -1,7 +1,8 @@
 <template>
     <ContentWrap>
     <el-tabs v-model="activeTab" type="border-card" tab-position="left" v-loading="loading" style="height: 80vh">
-      <el-tab-pane style="height: 100%"
+      <el-tab-pane
+        style="height: 100%"
         v-for="(tab, tabIndex) in tabs"
         :key="tab.deviceName"
         :name="String(tabIndex)"
@@ -43,7 +44,6 @@
                     placement="top"
                     effect="dark"
                   >
-<!--                    <el-icon class="tip-icon"/>-->
                     <Icon icon="ep:info-filled"/>
                   </el-tooltip>
                 </div>
@@ -58,7 +58,7 @@
               ref="formRefs"
               label-width="120px"
             >
-              <el-form-item label="设备id" prop="deviceId">
+              <el-form-item label="设备id" v-if="false" prop="deviceId">
                 <el-input
                   v-model="formData[tabIndex][currentStep[tabIndex]].deviceId"
                   :model-value="tab.deviceId"
@@ -83,9 +83,8 @@
               <el-form-item label="异常描述" prop="description">
                 <el-input
                   v-model="formData[tabIndex][currentStep[tabIndex]].description"
-                  :min="0"
                   type="textarea"
-                  controls-position="right"
+                  :rows="5"
                   placeholder="请填写异常描述"
                 />
               </el-form-item>
@@ -106,7 +105,7 @@
               <el-button
                 type="primary"
                 :disabled="!isStepValid(tabIndex)"
-                @click="handleNext(tabIndex)"
+                @click="handleNext(tabIndex, tab.deviceId)"
               >
                 {{ isLastStep(tabIndex) ? '完成提交' : '下一步' }}
               </el-button>
@@ -119,10 +118,14 @@
 </template>
 
 <script setup>
+const { push } = useRouter() // 路由
+
+const { t } = useI18n() // 国际化
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import {IotInspectOrderApi} from "@/api/pms/inspect/order";
 import {DICT_TYPE, getBoolDictOptions} from "@/utils/dict";
+const message = useMessage() // 消息弹窗
 
 const tabs = ref([])
 const { params, name } = useRoute() // 查询参数
@@ -157,27 +160,17 @@ const formRules = reactive({
 // 初始化表单数据
 const initFormData = (tabsData) => {
   tabsData.forEach((tab, tabIndex) => {
-    formData[tabIndex] = JSON.parse(tab.itemJson).map(() => ({
-      ifNormal: '',
-      description: null,
-      picUrl: ''
+    formData[tabIndex] = JSON.parse(tab.itemJson).map((item) => ({
+      deviceId: item.deviceId,
+      indexId: item.indexId,
+      ifNormal: item.ifNormal,
+      description: item.description,
+      picUrl: item.picUrl,
     }))
     currentStep.value[tabIndex] = 0
   })
 }
 
-// 获取数据
-const fetchData = async () => {
-  try {
-    const data = await mockApi()
-    tabs.value = data
-    initFormData(data)
-  } catch (error) {
-    ElMessage.error('数据加载失败')
-  } finally {
-  }
-}
-
 // 步骤状态计算
 const getStepStatus = (tabIndex, stepIndex) => {
   if (stepIndex < currentStep.value[tabIndex]) return 'finish'
@@ -194,8 +187,7 @@ const completedSteps = (tabIndex) => {
 // 步骤验证
 const isStepValid = (tabIndex) => {
   const current = currentStep.value[tabIndex]
-  debugger
-  return formData[tabIndex][current].ifNormal &&
+  return formData[tabIndex][current].ifNormal!=null &&
     formData[tabIndex][current].description !== null&&formData[tabIndex][current].description !== ''
 }
 
@@ -206,17 +198,21 @@ const handlePrev = (tabIndex) => {
   }
 }
 
-const handleNext = async (tabIndex) => {
+const handleNext =  (tabIndex, deviceId) => {
   if (!isStepValid(tabIndex)) {
     return ElMessage.warning('请先完成当前步骤的必填项')
   }
-
+  const current = currentStep.value[tabIndex]
   const totalSteps = JSON.parse(tabs.value[tabIndex].itemJson).length
-  debugger
   if (currentStep.value[tabIndex] < totalSteps - 1) {
+    formData[tabIndex][current].indexId = current+1
+    formData[tabIndex][current].deviceId = deviceId
     currentStep.value[tabIndex]++
+     submitForm(tabIndex, current, '')
   } else {
-    await submitForm(tabIndex)
+    formData[tabIndex][current].indexId = current+1
+    formData[tabIndex][current].deviceId = deviceId
+     submitForm(tabIndex, current,'finish')
   }
 }
 
@@ -225,11 +221,14 @@ const isLastStep = (tabIndex) => {
 }
 
 // 提交表单
-const submitForm = async (tabIndex) => {
+const submitForm =  (tabIndex,current,type) => {
   try {
     debugger
-    // 这里添加实际提交逻辑
-    ElMessage.success(`提交成功：${tabs.value[tabIndex].deviceName}`)
+    IotInspectOrderApi.writeIotInspectOrder(formData[tabIndex][current], id)
+    if (type === 'finish') {
+      message.success(t('common.createSuccess'))
+      push({ name: 'IotInspectOrder' })
+    }
   } catch (error) {
     ElMessage.error('提交失败，请检查数据')
   }
@@ -238,10 +237,6 @@ const submitForm = async (tabIndex) => {
 </script>
 
 <style scoped>
-.container {
-  padding: 10px;
-  background: #f5f7fa;
-}
 
 .step-container {
   display: grid;
@@ -269,40 +264,15 @@ const submitForm = async (tabIndex) => {
 }
 
 .custom-label {
-  font-weight: 500;
-  padding: 0 15px;
+  font-weight: 1000;
+  font-size: 17px;
+  padding: 0 10px;
 }
 ::v-deep .el-step__icon {
   background-color: #409eff;
   color: #fff;
   border: 0px;
 }
-.el-step__title {
-  font-size: 14px;
-}
-
-.el-form-item {
-  margin-bottom: 22px;
-}
-.hint-icon {
-  color: #909399;
-  font-size: 14px;
-  cursor: help;
-  transition: color 0.2s;
-
-  &:hover {
-    color: #409eff;
-  }
-}
-.step-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-}
-
-
-
 .step-title-wrapper {
   display: inline-flex;
   align-items: center;
@@ -311,21 +281,6 @@ const submitForm = async (tabIndex) => {
   padding-right: 25px;
 }
 
-/* 提示图标样式 */
-.tip-icon {
-  font-size: 16px;
-  color: #e6a23c;
-  cursor: help;
-  transition:
-    color 0.3s ease,
-    transform 0.2s ease;
-
-  &:hover {
-    color: #f56c6c;
-    transform: scale(1.1);
-  }
-}
-
 /* 覆盖步骤条默认样式 */
 :deep(.custom-steps) {
   /* 调整头部位置 */

src/views/pms/inspect/route/IotInspectRoute.vue

@@ -204,6 +204,7 @@ const close = () => {
   })
 }
 const itemsWithIndex = computed(() => {
+  debugger
   return items.value.map((item, index) => ({
     itemId: item.id,
     item: item.item,