liangbin
/
UniappVue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

- 新增RiskControl.vue组件用于风险控制卡填写
- 修改BasicsInfo.vue中人员选择器的columns参数格式
- 移除WorkNote.vue和GatePassInfo.vue中表单背景色
- 更新index.vue添加风险控制步骤和组件引用
This commit is contained in:
liangbin 2026-01-19 13:54:47 +08:00
parent 485f35157b
commit 9efe368f79
5 changed files with 328 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
View File

@ -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>

2
src/pages/WorkOrderEdit/compoents/GatePassInfo.vue
View File

@ -355,7 +355,7 @@ const HandleDeleteCar = (carId) => {
}
.FormBox {
background-color: #f5f5f5;
// background-color: #f5f5f5;
height: 100%;
.FormItem {

316
src/pages/WorkOrderEdit/compoents/RiskControl.vue Normal file
View File

@ -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>

2
src/pages/WorkOrderEdit/compoents/WorkNote.vue
View File

@ -352,7 +352,7 @@ const addCustomSafeMeasure = () => {
}
.FormBox {
background-color: #f5f5f5;
// background-color: #f5f5f5;
height: 100%;
.FormItem {

10
src/pages/WorkOrderEdit/index.vue
View File

@ -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: '提交监理审核',
},
])