feat(工单编辑): 添加移动球机申领功能

- 在WorkNote组件中添加申领按钮并绑定openApplyForMachine事件
- 新增ApplyForMachine组件用于球机申领表单
- 修改index.vue实现球机申领流程跳转
- 调整步骤导航逻辑支持子步骤

src/pages/WorkOrderEdit/compoents/ApplyForMachine.vue

@@ -0,0 +1,147 @@
+<!-- 球机申领 -->
+<template>
+    <view class="MainBox">
+        <view class="FormBox">
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">作业地点</view>
+                <view class="FormValueBox">
+                    <u-input v-model="allData.workLocation" placeholder="请输入作业地点" readonly></u-input>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">作业周期</view>
+                <view class="FormValueBox">
+                    <view class="date-range-box">
+                        <view class="date-item">
+                            <u-input v-model="allData.startTime" placeholder="开始时间" readonly></u-input>
+                        </view>
+                        <view class="date-separator">至</view>
+                        <view class="date-item">
+                            <u-input v-model="allData.endTime" placeholder="结束时间" readonly></u-input>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">申领数量</view>
+                <view class="FormValueBox">
+                    <up-number-box v-model="formData.applyQuantity" @change="valChange"></up-number-box>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">安装位置</view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.installationSite" placeholder="请输入安装位置"></u-input>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">联系人+联系方式</view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.linkman" placeholder="请输入联系人+联系方式"></u-input>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script setup>
+import { generateGuid } from '@/utils/index.js';
+import dayjs from 'dayjs';
+import { ref, defineExpose } from 'vue'
+
+const props = defineProps({
+    allData: {
+        type: Object,
+        default: () => { },
+    },
+})
+
+const formData = ref({
+    applyQuantity: '', // 申领数量
+    installationSite: '', // 安装位置
+    linkman: '', // 联系人+联系方式
+})
+
+defineExpose({
+    getFormData() {
+        return formData.value;
+    }
+})
+
+</script>
+<style lang="scss" scoped>
+.BlueTxt {
+    font-size: 28rpx;
+    color: #2979ff;
+    margin: 10rpx 0;
+}
+
+.addBtn {
+    font-size: 30rpx;
+    color: #2979ff;
+    font-weight: bold;
+}
+
+.BorderBox {
+    border: 1rpx solid #e4e7ed;
+    padding: 20rpx;
+    border-radius: 10rpx;
+}
+
+.FlexBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20rpx;
+}
+
+.MainBox {
+    padding: 20rpx;
+    background-color: #fff;
+    height: 100%;
+    overflow: auto;
+}
+
+.mustBox::after {
+    content: "*";
+    color: red;
+    font-size: 30rpx;
+    margin-left: 10rpx;
+}
+
+.FormBox {
+    // background-color: #f5f5f5;
+    height: 100%;
+
+    .FormItem {
+        padding: 20rpx;
+        background-color: #fff;
+
+        .FormLableBox {
+            font-size: 30rpx;
+            font-weight: bold;
+            margin-bottom: 20rpx;
+        }
+
+        .FormValueBox {
+            font-size: 30rpx;
+            margin-top: 20rpx;
+        }
+    }
+}
+
+.date-range-box {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    flex: 1;
+
+    .date-item {
+        flex: 1;
+    }
+
+    .date-separator {
+        color: #999;
+        font-size: 28rpx;
+    }
+}
+</style>

src/pages/WorkOrderEdit/compoents/WorkNote.vue

@@ -130,7 +130,7 @@
                     </view>
                 </view>
                 <view class="FormValueBox">
-                    <u-button type="primary" :disabled="!needApplyBallMachine">申领移动球机</u-button>
+                    <u-button type="primary" :disabled="!needApplyBallMachine" @click="openApplyForMachine">申领移动球机</u-button>
                 </view>
             </view>
 
@@ -143,6 +143,18 @@ import { generateGuid } from '@/utils/index.js';
 import dayjs from 'dayjs';
 import { ref, defineExpose } from 'vue'
 
+// 定义props
+const props = defineProps({
+    allData: {
+        type: Object,
+        default: () => { },
+    },
+    openApplyForMachine: {
+        type: Function,
+        default: () => { },
+    },
+})
+
 // 风险类型列表
 const riskTypeList = ref([
     {

src/pages/WorkOrderEdit/index.vue

@@ -6,23 +6,26 @@
                 <!-- 返回上一页 -->
                 <u-icon name="arrow-leftward" size="24" @click="prevStep"></u-icon>
                 <!-- 返回主页 -->
-                 <u-icon name="home" size="24"></u-icon>
+                <u-icon name="home" size="24"></u-icon>
             </view>
-            <view class="Title">{{stepList[currentStep - 1].Title}}</view>
+            <view class="Title">{{ currentStep.Title }}</view>
             <view class="informBox">
                 <u-icon name="bell-fill" size="24"></u-icon>
                 <view class="MsgTxt"></view>
             </view>
         </view>
         <view class="ContentBox">
-            <BasicsInfo ref="basicsInfoRef" :allData="allData" v-if="currentStep == 1"></BasicsInfo>
-            <GatePassInfo ref="gatePassInfoRef" :allData="allData" v-if="currentStep == 2"></GatePassInfo>
-            <WorkNote ref="workNoteRef" :allData="allData" v-if="currentStep == 3"></WorkNote>   
-            <RiskControl ref="riskControlRef" :allData="allData" v-if="currentStep == 4"></RiskControl>
+            <BasicsInfo ref="basicsInfoRef" :allData="allData" v-if="currentStep.id == 1"></BasicsInfo>
+            <GatePassInfo ref="gatePassInfoRef" :allData="allData" v-if="currentStep.id == 2"></GatePassInfo>
+            <WorkNote ref="workNoteRef" :allData="allData" :openApplyForMachine="openApplyForMachine"
+                v-if="currentStep.id == 3"></WorkNote>
+            <RiskControl ref="riskControlRef" :allData="allData" v-if="currentStep.id == 4"></RiskControl>
+            <ApplyForMachine ref="applyForMachineRef" :allData="allData" v-if="currentStep.id == '3a'">
+            </ApplyForMachine>
         </view>
-        <view class="FootBox" v-for="item in stepList" :key="item.id">
-            <u-button :text="item.PrevBtnName"  type="info"></u-button>
-            <u-button :text="item.NextBtnName"  color="#2979ff" @click="nextStep"></u-button>
+        <view class="FootBox">
+            <u-button :text="currentStep.PrevBtnName" type="info"></u-button>
+            <u-button :text="currentStep.NextBtnName" color="#2979ff" @click="nextStep"></u-button>
         </view>
     </view>
 </template>
@@ -32,10 +35,19 @@ import BasicsInfo from './compoents/BasicsInfo.vue'
 import GatePassInfo from './compoents/GatePassInfo.vue'
 import WorkNote from './compoents/WorkNote.vue'
 import RiskControl from './compoents/RiskControl.vue'
+import ApplyForMachine from './compoents/ApplyForMachine.vue'
 
-const currentStep = ref(1)// 当前步骤
+const currentStep = ref({
+    id: 1,
+    Title: '工单基础信息',
+    PrevBtnName: '返回上一页',
+    NextBtnName: '下一步（申请出入证）',
+})// 当前步骤
 const basicsInfoRef = ref(null); // 基础信息组件引用
 const gatePassInfoRef = ref(null); // 出入证申请组件引用
+const workNoteRef = ref(null); // 工作票填写组件引用
+const riskControlRef = ref(null); // 风险控制卡填写组件引用
+const applyForMachineRef = ref(null); // 球机申领组件引用
 
 // 各个页面汇总数据
 const allData = ref({
@@ -61,33 +73,60 @@ const stepList = ref([
         id: 3,
         Title: '填写工作票',
         PrevBtnName: '保存草稿',
-        NextBtnName: '提交+下一步（填写风险控制卡）',
+        NextBtnName: '提交+下一步（风险控制卡）',
     },
     {
-        id: 3,
+        id: 4,
         Title: '填写风险控制卡',
         PrevBtnName: '保存草稿',
         NextBtnName: '提交监理审核',
     },
+    {
+        id: '3a',
+        Title: '球机申领',
+        PrevBtnName: '取消申领',
+        NextBtnName: '返回申领',
+    },
 ])
 
 // 返回上一步
-const prevStep = () => {
-    currentStep.value--;
+const prevStep = (id) => {
+    if (id == '3a') {
+        currentStep.value = stepList.value.find(item => item.id == 3);
+    } else {
+        currentStep.value = stepList.value.find(item => item.id == currentStep.value.id - 1);
+    }
 }
 
 // 点击下一步
-const nextStep = () => {
-    if (currentStep.value == 1) {
+const nextStep = (id) => {
+    if (currentStep.value.id == 1) {
         console.log(basicsInfoRef.value.getFormData());
         allData.value.BasicsInfo = basicsInfoRef.value.getFormData();
-    } else if (currentStep.value == 2) {
+    } else if (currentStep.value.id == 2) {
         console.log(gatePassInfoRef.value.getFormData());
         allData.value.GatePassInfo = gatePassInfoRef.value.getFormData();
+    } else if (currentStep.value.id == 3) {
+        console.log(workNoteRef.value.getFormData());
+        allData.value.WorkNote = workNoteRef.value.getFormData();
+    } else if (currentStep.value.id == '3a') {
+        console.log(applyForMachineRef.value.getFormData());
+        allData.value.ApplyForMachine = applyForMachineRef.value.getFormData();
+        currentStep.value = stepList.value.find(item => item.id == 3);
+        return;
+    } else if (currentStep.value.id == 4) {
+        console.log(riskControlRef.value.getFormData());
+        allData.value.RiskControl = riskControlRef.value.getFormData();
     }
-    currentStep.value++;
+
+    currentStep.value = stepList.value.find(item => item.id == currentStep.value.id + 1);
 }
 
+// 打开球机申领
+const openApplyForMachine = (e) => {
+    console.log(e);
+    currentStep.value = stepList.value.find(item => item.id == '3a');
+}
 
 </script>
 <style lang="scss" scoped>
@@ -107,24 +146,27 @@ const nextStep = () => {
         height: 100rpx;
         padding: 20rpx;
         background-color: #fff;
+
         .iconBox {
-           font-size: 32rpx;
+            font-size: 32rpx;
         }
-        .Title{
+
+        .Title {
             font-size: 32rpx;
             font-weight: bold;
             color: #333;
         }
+
         .informBox {
-          .MsgTxt{
-            padding: 8rpx;
-            background-color: hsla(17, 100%, 50%, 0.849);
-            color: #fff;
-            position: absolute;
-            top: 16rpx;
-            right: 16rpx;
-            border-radius: 50%;
-          }
+            .MsgTxt {
+                padding: 8rpx;
+                background-color: hsla(17, 100%, 50%, 0.849);
+                color: #fff;
+                position: absolute;
+                top: 16rpx;
+                right: 16rpx;
+                border-radius: 50%;
+            }
         }
     }