feat(WorkOrderEdit): 添加风险控制卡组件并调整表单样式

- 新增RiskControl.vue组件用于风险控制卡填写 - 修改BasicsInfo.vue中人员选择器的columns参数格式 - 移除WorkNote.vue和GatePassInfo.vue中表单背景色 - 更新index.vue添加风险控制步骤和组件引用
2026-01-19 13:54:47 +08:00 · 2026-01-19 13:54:47 +08:00 · 9efe368f79
parent 485f35157b
commit 9efe368f79
5 changed files with 328 additions and 4 deletions
--- a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
+++ b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
@ -64,7 +64,7 @@
                        </u-tag>
                    </view>
                </view>
-                <u-picker :show="showMemberPicker" :options="MemberArr" keyName="id" @confirm="HandleMemberConfirm"
+                <u-picker :show="showMemberPicker" :columns="[MemberArr]" keyName="name" @confirm="HandleMemberConfirm"
                    @cancel="showMemberPicker = false"></u-picker>
            </view>
        </view>
--- a/src/pages/WorkOrderEdit/compoents/GatePassInfo.vue
+++ b/src/pages/WorkOrderEdit/compoents/GatePassInfo.vue
@ -355,7 +355,7 @@ const HandleDeleteCar = (carId) => {
 }

 .FormBox {
-    background-color: #f5f5f5;
+    // background-color: #f5f5f5;
    height: 100%;

    .FormItem {
--- a/src/pages/WorkOrderEdit/compoents/RiskControl.vue
+++ b/src/pages/WorkOrderEdit/compoents/RiskControl.vue
@ -0,0 +1,316 @@
+<!-- 风险控制 -->
+<template>
+    <view class="MainBox">
+        <view class="FormBox">
+            <view class="H2Box">基础信息</view>
+            <view class="FormItem">
+                <view class="FormLableBox FlexBox">
+                    <view class="mustBox">所属单位</view>
+                    <view class="addBtn" @click="showUnitNamePicker = true">选择</view>
+                </view>
+                <view class="FormValueBox">
+                    <view class="BorderBox">
+                        <view class="grayFont" v-if="!formData.unitName">请选择所属单位</view>
+                        <view v-else>{{ formData.unitName }}</view>
+                    </view>
+                    <u-picker v-model="formData.unitName" :columns="[unitNameList]" :show="showUnitNamePicker"
+                        keyName="name" @confirm="confirmUnitNamePicker" @cancel="showUnitNamePicker = false"></u-picker>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">票证编号</view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.serialNumber" placeholder="请输入票证编号" readonly></u-input>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">工作内容</view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.workContent" placeholder="请输入工作内容"></u-input>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox FlexBox">
+                    <view class="mustBox">工作负责人</view>
+                    <view class="addBtn" @click="showWorkResponsiblePicker = true">选择</view>
+                </view>
+                <view class="FormValueBox">
+                    <view class="BorderBox">
+                        <view class="grayFont" v-if="!formData.workResponsible">请选择工作负责人</view>
+                        <view v-else>{{ formData.workResponsible }}</view>
+                    </view>
+                    <u-picker v-model="formData.workResponsible" :columns="[workResponsibleList]"
+                        :show="showWorkResponsiblePicker" keyName="name" @confirm="confirmWorkResponsiblePicker"
+                        @cancel="showWorkResponsiblePicker = false"></u-picker>
+                </view>
+            </view>
+
+            <view class="H2Box">检查内容</view>
+            <view class="CardBox">
+                <view class="CardBoxItem" v-for="(item, index) in checkContentList" :key="item.id">
+                    {{ index + 1 }}： {{ item.name }}
+                </view>
+            </view>
+
+            <view class="H2Box">附件上传</view>
+            <view style="margin-top: 20rpx;">
+                <up-upload width="100%" @afterRead="afterRead" multiple accept="image/*,application/pdf">
+                    <view class="UploadBox">
+                        <view class="UpIcon">
+                            <img src="@/static/icon/upload-icon.png" alt="">
+                        </view>
+                        <view class="UpTitle">点击上传</view>
+                        <view class="UpDesc">上传现场照片或检测报告，支持JPG,PNG,PDF格式上传，单个文件大小不超过10MB</view>
+                    </view>
+                </up-upload>
+            </view>
+            <view class="UpFileListBox">
+                <view v-for="item in fileList1" :key="item.url" class="UpFileItem">
+                    <view>
+                        <view class="UpFileName">{{ item.name }}</view>
+                        <view class="UpFileSize">{{ item.size }}</view>
+                    </view>
+
+                    <u-button text="删除" type="primary" size="small" @click="deletePic(item.fid)"></u-button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script setup>
+import { generateGuid } from '@/utils/index.js';
+import dayjs from 'dayjs';
+import { ref, defineExpose } from 'vue'
+
+const showUnitNamePicker = ref(false); // 所属单位选择器是否显示
+const unitNameList = ref([
+    { id: 1, name: '公司11' },
+    { id: 2, name: '公司13' },
+    { id: 3, name: '公司12' },
+]);
+
+// 工作负责人选择器是否显示
+const showWorkResponsiblePicker = ref(false);
+// 工作负责人列表
+const workResponsibleList = ref([
+    { id: 1, name: '张三' },
+    { id: 2, name: '李四' },
+    { id: 3, name: '王五' },
+]);
+
+// 检查内容列表
+const checkContentList = ref([
+    { id: 1, name: '动火安全作业票中对应的安全风险分析是否齐全' },
+    { id: 2, name: '检查内容2' },
+    { id: 3, name: '检查内容3' },
+])
+
+// 上传的文件列表
+const fileList1 = ref([]);
+
+const formData = ref({
+    serialNumber: generateGuid(), // 票证编号
+    unitName: '', // 所属单位
+    workContent: '', // 工作内容
+    workResponsible: '', // 工作负责人
+})
+
+// 暴露方法，获取表单数据
+defineExpose({
+    getFormData() {
+        return formData.value;
+    }
+})
+
+// 确认选择所属单位
+const confirmUnitNamePicker = (e) => {
+    formData.value.unitName = e.value[0].name ? e.value[0].name : unitNameList.value[0].name;
+    showUnitNamePicker.value = false;
+}
+
+// 确认选择工作负责人
+const confirmWorkResponsiblePicker = (e) => {
+    formData.value.workResponsible = e.value[0].name ? e.value[0].name : workResponsibleList.value[0].name;
+    showWorkResponsiblePicker.value = false;
+}
+
+// 处理上传文件事件
+const afterRead = (e) => {
+    console.log('上传的文件：', e);
+    let fileInfo = e.file[0];
+    // 判断文件大小
+    if (fileInfo.size > 10 * 1024 * 1024) {
+        uni.showToast({
+            title: '文件大小不能超过10MB',
+            icon: 'none'
+        });
+        return;
+    }
+    // 判断文件类型
+    if (!fileInfo.name.match(/\.(jpg|png|pdf)$/i)) {
+        uni.showToast({
+            title: '请上传JPG,PNG,PDF格式的文件',
+            icon: 'none'
+        });
+        return;
+    }
+
+    let arr = [...fileList1.value];
+    arr.push({
+        fid: generateGuid(),
+        name: fileInfo.name,
+        size: (fileInfo.size / 1024 / 1024).toFixed(2) + 'MB',
+        url: fileInfo.url,
+    });
+    fileList1.value = arr;
+}
+
+// 删除上传的文件
+const deletePic = (fid) => {
+    console.log('删除文件：', fid);
+    let arr = [...fileList1.value];
+    arr = arr.filter(item => item.fid !== fid);
+    fileList1.value = arr;
+}
+
+
+</script>
+<style lang="scss" scoped>
+.H2Box {
+    font-size: 34rpx;
+    font-weight: bold;
+    margin-top: 20rpx;
+}
+
+.BlueTxt {
+    font-size: 28rpx;
+    color: #2979ff;
+    margin: 10rpx 0;
+}
+
+.addBtn {
+    font-size: 30rpx;
+    color: #2979ff;
+    font-weight: bold;
+}
+
+.grayFont {
+    font-size: 28rpx;
+    color: #909399;
+}
+
+.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 {
+    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;
+        }
+    }
+}
+
+.CardBox {
+    height: auto;
+    padding: 20rpx;
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: 10rpx;
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+
+    .CardBoxItem {
+        padding: 20rpx;
+        font-size: 30rpx;
+        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+    }
+}
+
+.UploadBox {
+    width: 100%;
+    height: 300rpx;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20rpx;
+    padding: 20rpx;
+    border: 1rpx dashed #e4e7ed;
+    border-radius: 10rpx;
+
+    .UpTitle {
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #333;
+    }
+
+    .UpDesc {
+        font-size: 24rpx;
+        color: #666;
+    }
+}
+
+.UpFileListBox {
+    margin-top: 20rpx;
+    height: auto;
+
+    .UpFileItem {
+        border: 1rpx solid #e4e7ed;
+        padding: 20rpx;
+        border-radius: 10rpx;
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+
+        .UpFileName {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .UpFileSize {
+            font-size: 24rpx;
+            color: #666;
+        }
+    }
+}
+</style>
--- a/src/pages/WorkOrderEdit/compoents/WorkNote.vue
+++ b/src/pages/WorkOrderEdit/compoents/WorkNote.vue
@ -352,7 +352,7 @@ const addCustomSafeMeasure = () => {
 }

 .FormBox {
-    background-color: #f5f5f5;
+    // background-color: #f5f5f5;
    height: 100%;

    .FormItem {
--- a/src/pages/WorkOrderEdit/index.vue
+++ b/src/pages/WorkOrderEdit/index.vue
@ -18,6 +18,7 @@
            <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>
        </view>
        <view class="FootBox" v-for="item in stepList" :key="item.id">
            <u-button :text="item.PrevBtnName"  type="info"></u-button>
@ -30,6 +31,7 @@ import { ref } from 'vue'
 import BasicsInfo from './compoents/BasicsInfo.vue'
 import GatePassInfo from './compoents/GatePassInfo.vue'
 import WorkNote from './compoents/WorkNote.vue'
+import RiskControl from './compoents/RiskControl.vue'

 const currentStep = ref(1)// 当前步骤
 const basicsInfoRef = ref(null); // 基础信息组件引用
@ -59,7 +61,13 @@ const stepList = ref([
        id: 3,
        Title: '填写工作票',
        PrevBtnName: '保存草稿',
-        NextBtnName: '提交工单',
+        NextBtnName: '提交+下一步（填写风险控制卡）',
+    },
+    {
+        id: 3,
+        Title: '填写风险控制卡',
+        PrevBtnName: '保存草稿',
+        NextBtnName: '提交监理审核',
    },
 ])