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

refactor: 移除工单相关功能模块 

删除工单审批、工单编辑、工单详情页面及相关组件
移除pages.json中的工单路由配置
清理不再使用的工单功能代码
This commit is contained in:
liangbin 2026-01-21 14:40:36 +08:00
parent 58f73d563e
commit 2ccc63358f
9 changed files with 1 additions and 2103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages.json
View File

@ -7,27 +7,7 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/WorkOrderApproval/index",
"style": {
"navigationBarTitleText": "工单审批",
"enablePullDownRefresh": true
}
},
{
"path": "pages/WorkOrderEdit/index",
"style": {
"navigationBarTitleText": "工单编辑",
"navigationStyle": "custom"
}
},
{
"path": "pages/WorkOrderDetails/index",
"style": {
"navigationBarTitleText": "工单详情",
"navigationStyle": "custom"
}
},
{
"path": "pages/ProjectList/index",
"style": {

147
src/pages/WorkOrderApproval/index.vue
View File

@ -1,147 +0,0 @@
<!-- 工单审批-列表页 -->
<template>
<view class="PageBox">
<view class="FlexBox TopBox">
<view class="SelectBox">
<u-select :current="TypeValue" :options="TypeList" placeholder="请选择工单类型" size="large" showOptionsLabel
@update:current="TypeValue = $event"></u-select>
</view>
<view class="BtnBox">
<u-button type="primary" text="查询" @click="HandleNewAdd">新建工单</u-button>
</view>
</view>
<view class="ListBox">
<u-virtual-list :list-data="dataSource" :item-height="200" height="100%">
<template #default="{ item, index }">
<view class="CardBox">
<view class="FlexBox">
<view class="Title">{{ item.name }}</view>
<view class="DetailBtn">详情</view>
</view>
<view class="CodeTxt">项目编号：{{ item.projectCode }}</view>
<view class="TagBox">
<u-tag text="代填工作票" shape="circle"></u-tag>
</view>
<view class="BtnList">
<u-button text="修改" plain color="#2979ff" size="small"></u-button>
<u-button text="撤回" plain color="#ff9900" size="small"></u-button>
<u-button text="删除" plain color="#fa3534" size="small"></u-button>
</view>
</view>
</template>
</u-virtual-list>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const TypeValue = ref('1') // 工单类型
// 类型列表
const TypeList = ref([
{ name: '全部项目', id: '1' },
{ name: '我负责的项目', id: '2' },
{ name: '草稿', id: '3' },
{ name: '待审核', id: '4' },
{ name: '已撤回', id: '5' },
])
const dataSource = ref([
{ id: 1, name: '工单1', projectCode: '123456' },
{ id: 2, name: '工单2', projectCode: '123457' },
{ id: 3, name: '工单3', projectCode: '123458' },
{ id: 4, name: '工单4', projectCode: '123459' },
{ id: 5, name: '工单5', projectCode: '123460' },
{ id: 6, name: '工单6', projectCode: '123461' },
{ id: 7, name: '工单7', projectCode: '123462' },
])
// 跳转新建工单
const HandleNewAdd = () => {
uni.navigateTo({
url: '/pages/WorkOrderEdit/index'
})
}
</script>
<style lang="scss" scoped>
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
}
.PageBox {
padding: 20rpx;
background-color: #fff;
height: calc(100vh - 170rpx);
.TopBox {
.SelectBox {
width: calc(50% - 10rpx);
height: 80rpx;
border-radius: 10rpx;
border: 1rpx solid #ccc;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx;
.u-select {
width: 100%;
}
}
.BtnBox {
width: 300rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.ListBox {
padding: 20rpx 0px;
margin-top: 20rpx;
height: calc(100vh - 300rpx);
overflow: hidden;
.CardBox {
width: calc(100% - 30rpx);
height: calc(100% - 30rpx);
margin: 0 auto;
padding: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08), 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 10rpx;
overflow: auto;
.Title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.DetailBtn {
font-size: 24rpx;
color: #666;
}
.CodeTxt {
margin-top: 20rpx;
font-size: 24rpx;
color: #666;
}
.TagBox {
margin-top: 20rpx;
}
.BtnList {
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
}
}
}
</style>

80
src/pages/WorkOrderDetails/index.vue
View File

@ -1,80 +0,0 @@
<!-- 工单详情 -->
<template>
<view class="PageBox">
<view class="TopBox FlexBox">
<view class="iconBox FlexBox">
<!-- 返回上一页 -->
<u-icon name="arrow-leftward" size="24"></u-icon>
</view>
<view class="Title">工单详情</view>
<view class="informBox">
<u-icon name="bell-fill" size="24"></u-icon>
<view class="MsgTxt"></view>
</view>
</view>
<view class="ContentBox">
展示内容
</view>
<view class="FootBox">
<u-button text="撤回" type="info"></u-button>
<u-button text="提交实施" color="#2979ff"></u-button>
</view>
</view>
</template>
<style lang="scss" scoped>
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.PageBox {
background-color: #ff9900;
height: 100vh;
overflow: hidden;
.TopBox {
height: 100rpx;
padding: 20rpx;
background-color: #fff;
.iconBox {
font-size: 32rpx;
}
.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%;
}
}
}
.ContentBox {
padding: 20rpx;
background-color: #c5d5d6;
height: calc(100vh - 200rpx);
overflow: hidden;
}
.FootBox {
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
}
}
</style>

147
src/pages/WorkOrderEdit/compoents/ApplyForMachine.vue
View File

@ -1,147 +0,0 @@
<!-- 球机申领 -->
<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>

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

@ -1,387 +0,0 @@
<!-- 工单基础信息 -->
<template>
<view class="MainBox">
<view class="FormBox">
<view class="FormItem">
<view class="FormLableBox mustBox">项目名称</view>
<view class="FormValueBox">
<u-input v-model="formData.ProjectName" placeholder="请输入项目名称"></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业地点</view>
<view class="MapBox" id="tianditu-map"> </view>
<view class="FormValueBox">
<u-input v-model="formData.SpecificAddress" placeholder="请输入具体楼层或区域"></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="startDateText" placeholder="开始日期" readonly>
<template #suffix>
<u-button type="primary" size="small"
@click="showStartDatePicker = true">选择日期</u-button>
</template>
</u-input>
<up-datetime-picker :show="showStartDatePicker" v-model="startDate" mode="date"
:minDate="minTimestamp" @confirm="HandleStartDateConfirm"
@cancel="showStartDatePicker = false"></up-datetime-picker>
</view>
<view class="date-separator">至</view>
<view class="date-item">
<u-input v-model="endDateText" placeholder="结束日期" readonly>
<template #suffix>
<u-button type="primary" size="small"
@click="showEndDatePicker = true">选择日期</u-button>
</template>
</u-input>
<up-datetime-picker :show="showEndDatePicker" v-model="endDate" mode="date"
:minDate="minTimestamp" @confirm="HandleEndDateConfirm"
@cancel="showEndDatePicker = false"></up-datetime-picker>
</view>
</view>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业负责人</view>
<view class="FormValueBox">
<u-input v-model="formData.ResponsiblePerson" placeholder="请输入作业负责人"></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox FlexBox">
<view class="mustBox">作业班成员</view>
<view class="addBtn" @click="showMemberPicker = true">添加</view>
</view>
<view class="FormValueBox">
<view class="MemberBox">
<u-tag v-for="(member, index) in formData.MemberList" :key="member.id" closable shape="circle"
@close="RemoveMember(index)">
{{ member.name }}
</u-tag>
</view>
</view>
<u-picker :show="showMemberPicker" :columns="[MemberArr]" keyName="name" @confirm="HandleMemberConfirm"
@cancel="showMemberPicker = false"></u-picker>
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed, onMounted, defineExpose } from "vue";
import dayjs from 'dayjs';
// 地图实例
let mapEntity = null;
// 当前标记点
let currentMarker = null;
const showStartDatePicker = ref(false); // 是否显示开始日期选择器
const showEndDatePicker = ref(false); // 是否显示结束日期选择器
const startDate = ref(null); // 开始日期时间戳
const endDate = ref(null); // 结束日期时间戳
const startDateText = ref(''); // 开始日期显示文本
const endDateText = ref(''); // 结束日期显示文本
const minTimestamp = ref(dayjs('2020-01-01').valueOf()); // 最小可选日期时间戳
// 结束日期的最小时间戳（不能小于开始日期）
const endDateMinTimestamp = computed(() => {
if (startDate.value) {
return startDate.value;
}
return minTimestamp.value;
});
const showMemberPicker = ref(false); // 是否显示成员选择器
//成员列表信息
const MemberArr = ref([
{
id: "123456", // 成员ID
name: "张三", // 成员姓名
phone: "13800000000", // 成员手机号
},
{
id: "654321", // 成员ID
name: "李四", // 成员姓名
phone: "13900000000", // 成员手机号
}
]); // 作业班成员列表
// 表单信息
const formData = ref({
ProjectName: "", // 项目名称
Location: "", // 作业地点（经纬度）
SpecificAddress: "", // 具体楼层或区域
period: [], // 作业周期 [开始日期, 结束日期]
ResponsiblePerson: "", // 作业负责人
MemberList: [], // 作业班成员列表
});
// 暴露方法给父组件调用
defineExpose({
getFormData: () => formData.value,
});
// 生命周期钩子函数
onMounted(() => {
initTiandituMap();
});
// 处理开始日期确认事件
const HandleStartDateConfirm = (e) => {
console.log('选中的开始日期：', e);
// 如果没有选择日期，使用默认值
const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
startDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
startDate.value = selectedDate;
endDateText.value = '';
endDate.value = null;
showStartDatePicker.value = false;
UpdatePeriod();
};
// 处理结束日期确认事件
const HandleEndDateConfirm = (e) => {
console.log('选中的结束日期：', e);
// 如果没有选择日期，使用默认值
const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
// 检查是否选择了开始日期
if (startDate.value && dayjs(selectedDate).isBefore(dayjs(startDate.value))) {
uni.showToast({
title: '结束日期不能小于开始日期',
icon: 'none',
duration: 2000
});
return;
}
endDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
endDate.value = selectedDate;
showEndDatePicker.value = false;
UpdatePeriod();
};
// 更新作业周期
const UpdatePeriod = () => {
if (startDateText.value && endDateText.value) {
formData.value.period = [startDateText.value, endDateText.value];
} else if (startDateText.value) {
formData.value.period = [startDateText.value, ''];
} else if (endDateText.value) {
formData.value.period = ['', endDateText.value];
} else {
formData.value.period = [];
}
console.log('作业周期：', formData.value.period);
};
// 处理成员选择确认事件
const HandleMemberConfirm = (e) => {
console.log('选中的成员完整信息：', e);
console.log('e.value:', e.value);
console.log('e.value[0]:', e.value ? e.value[0] : 'undefined');
console.log('MemberArr:', MemberArr.value);
if (e.value && e.value.length > 0) {
const selectedMember = e.value[0];
console.log('选中的成员：', selectedMember);
console.log('selectedMember 的类型:', typeof selectedMember);
let memberInfo;
// 判断返回的是对象还是字符串
if (typeof selectedMember === 'object' && selectedMember !== null) {
// 如果是对象，直接使用
memberInfo = selectedMember;
console.log('返回的是对象，直接使用：', memberInfo);
} else {
// 如果是字符串，从 MemberArr 中根据id查找
memberInfo = MemberArr.value.find(item => item.id === selectedMember);
console.log('返回的是字符串，从 MemberArr 根据id查找：', memberInfo);
}
if (memberInfo && memberInfo.id) {
// 根据id检查成员是否已存在
const isExist = formData.value.MemberList.some(item => item.id === memberInfo.id);
console.log('成员是否已存在：', isExist);
console.log('当前成员列表：', formData.value.MemberList);
if (!isExist) {
formData.value.MemberList.push({
id: memberInfo.id,
name: memberInfo.name
});
console.log('添加成员成功：', memberInfo);
console.log('添加后的成员列表：', formData.value.MemberList);
} else {
uni.showToast({
title: '该成员已存在',
icon: 'none',
duration: 2000
});
}
} else {
console.log('未找到成员信息或成员信息无效');
}
} else {
console.log('e.value 为空或长度为0');
}
showMemberPicker.value = false;
};
// 删除成员
const RemoveMember = (index) => {
formData.value.MemberList.splice(index, 1);
console.log('删除成员成功');
};
// 初始化天地图
const initTiandituMap = () => {
try {
// 1. 创建地图容器
const container = document.getElementById("tianditu-map");
if (!container) {
console.error("地图容器未找到");
return;
}
// 2. 初始化地图（中心点设为北京，缩放级别12）
mapEntity = new T.Map("tianditu-map");
const centerPoint = new T.LngLat(116.403874, 39.914885);
mapEntity.centerAndZoom(centerPoint, 12);
// 3. 开启地图拖拽、缩放交互
mapEntity.enableDrag();
mapEntity.enableScrollWheelZoom();
// 4. 添加天地图图层（矢量图层 + 注记图层）
const vecLayer = new T.TileLayer("vec_w", { key: "你的天地图Key" });
const cvaLayer = new T.TileLayer("cva_w", { key: "你的天地图Key" });
const layerGroup = new T.LayerGroup([vecLayer, cvaLayer]);
mapEntity.addLayer(layerGroup);
// 5. 添加地图点击事件监听器
mapEntity.addEventListener("click", (e) => {
const lng = e.lnglat.getLng();
const lat = e.lnglat.getLat();
// 如果已存在标记点，先移除
if (currentMarker) {
mapEntity.removeOverLay(currentMarker);
}
// 创建新的标记点
const marker = new T.Marker(new T.LngLat(lng, lat));
mapEntity.addOverLay(marker);
currentMarker = marker;
// 将经纬度存储到Location字段
formData.value.Location = `${lng},${lat}`;
console.log("标记点位置：", lng, lat);
});
console.log("天地图初始化成功");
} catch (error) {
console.error("天地图初始化失败：", error);
}
};
</script>
<style lang="scss" scoped>
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.addBtn {
font-size: 30rpx;
color: #2979ff;
font-weight: bold;
}
.MainBox {
padding: 20rpx;
background-color: #fff;
height: 100%;
overflow: auto;
}
.mustBox::after {
content: "*";
color: red;
font-size: 30rpx;
margin-left: 10rpx;
}
.MapBox {
width: 100%;
height: 400rpx;
}
.MemberBox {
height: 100rpx;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20rpx;
flex-wrap: wrap;
border: 1rpx solid #e4e7ed;
padding: 20rpx;
border-radius: 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>

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

@ -1,377 +0,0 @@
<!-- 出入证申请 -->
<template>
<view class="MainBox">
<view class="FormBox">
<view class="FormItem">
<view class="FormLableBox">项目名称</view>
<view class="FormValueBox">
<u-input v-model="allData.BasicsInfo.ProjectName" placeholder="请输入项目名称" readonly></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox">作业地点</view>
<view class="FormValueBox">
<u-input v-model="allData.BasicsInfo.SpecificAddress" placeholder="请输入作业地点" readonly></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox">作业班成员</view>
<view class="FormValueBox">
<u-input v-model="allData.BasicsInfo.JobClassMembers" placeholder="请输入作业班成员" readonly></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">出入证有效日期</view>
<view class="FormValueBox">
<u-input v-model="formData.validTime" placeholder="请输入出入证有效日期" readonly>
<template #suffix>
<u-button text="选择日期" type="primary" size="small"
@click="showValidTimePicker = true"></u-button>
</template>
</u-input>
</view>
<up-datetime-picker :show="showValidTimePicker" v-model="formData.validTime" mode="date"
:minDate="minTimestamp" @confirm="HandleValidTimeConfirm" @cancel="showValidTimePicker = false"
format="YYYY-MM-DD"></up-datetime-picker>
</view>
<view class="FormItem">
<view class="FormLableBox FlexBox">
<view class="mustBox">随行车辆信息</view>
<view class="addBtn" @click="showCarPicker = true">添加</view>
</view>
<view class="FormValueBox">
<view class="CarListBox">
<view v-for="item in formData.CarList" :key="item.id" class="CarItem">
<view class="CarInfoBox">
<view class="CarTitleBox">{{ item.name }} （{{ item.code }}）</view>
<view class="CartypeBox">{{ item.type }}</view>
</view>
<view>
<u-button text="删除" type="primary" size="small"
@click="HandleDeleteCar(item.id)"></u-button>
</view>
</view>
</view>
</view>
<u-picker :show="showCarPicker" :columns="[CarArr]" keyName="name" @confirm="HandleCarConfirm"
@cancel="showCarPicker = false"></u-picker>
</view>
<view class="FormItem">
<view class="FormLableBox">附件上传</view>
<view class="FormValueBox">
<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>
</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 showValidTimePicker = ref(false); // 出入证有效日期选择器是否显示
const minTimestamp = ref(dayjs('2020-01-01').valueOf()); // 最小可选日期时间戳
const showCarPicker = ref(false); // 随行车辆选择器是否显示
// 车辆选项列表
const CarArr = ref([
{
id: 1,
name: '车辆1',
type: '皮卡车',
code: '京A123456',
},
{
id: 2,
name: '车辆2',
type: '轿车',
code: '京B123456',
},
]);
// 组件数据
const formData = ref({
validTime: '', // 出入证有效日期
CarList: [], // 随行车辆数组
})
const fileList1 = ref([]); // 上传的文件列表
// 处理上传文件事件
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;
}
// 组件暴露方法
defineExpose({
getFormData() {
return formData.value;
}
})
// 处理出入证有效日期选择器确认事件
const HandleValidTimeConfirm = (e) => {
const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
formData.value.validTime = dayjs(selectedDate).format('YYYY-MM-DD');
showValidTimePicker.value = false;
}
// 处理车辆选择确认事件
const HandleCarConfirm = (e) => {
console.log('选中的车辆：', e);
if (e.value && e.value.length > 0) {
const selectedCar = e.value[0];
console.log('选中的车辆：', selectedCar);
console.log('selectedCar 的类型:', typeof selectedCar);
let carInfo;
// 判断返回的是对象还是字符串
if (typeof selectedCar === 'object' && selectedCar !== null) {
// 如果是对象，直接使用
carInfo = selectedCar;
console.log('返回的是对象，直接使用：', carInfo);
} else {
// 如果是字符串，从 CarArr 中根据id查找
carInfo = CarArr.value.find(item => item.id === selectedCar);
console.log('返回的是字符串，从 CarArr 根据id查找：', carInfo);
}
if (carInfo && carInfo.id) {
// 根据id检查车辆是否已存在
const isExist = formData.value.CarList.some(item => item.id === carInfo.id);
console.log('车辆是否已存在：', isExist);
if (!isExist) {
formData.value.CarList.push({
id: carInfo.id,
name: carInfo.name,
code: carInfo.code,
type: carInfo.type
});
console.log('添加车辆成功：', carInfo);
console.log('添加后的车辆列表：', formData.value.CarList);
} else {
uni.showToast({
title: '该车辆已存在',
icon: 'none',
duration: 2000
});
}
} else {
console.log('未找到车辆信息或车辆信息无效');
}
} else {
console.log('e.value 为空或长度为0');
}
showCarPicker.value = false;
};
// 删除车辆
const HandleDeleteCar = (carId) => {
const index = formData.value.CarList.findIndex(item => item.id === carId);
if (index !== -1) {
formData.value.CarList.splice(index, 1);
console.log('删除车辆成功');
}
};
</script>
<style lang="scss" scoped>
.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;
}
}
}
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.addBtn {
font-size: 30rpx;
color: #2979ff;
font-weight: bold;
}
.MainBox {
padding: 20rpx;
background-color: #fff;
height: 100%;
overflow: auto;
}
.mustBox::after {
content: "*";
color: red;
font-size: 30rpx;
margin-left: 10rpx;
}
.CarListBox {
border: 1rpx solid #e4e7ed;
padding: 20rpx;
border-radius: 10rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.CarItem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
flex-wrap: wrap;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
padding: 20rpx;
border-radius: 10rpx;
.CarInfoBox {
.CarTitleBox {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.CartypeBox {
font-size: 24rpx;
color: #666;
}
}
}
}
.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;
}
}
}
</style>

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

@ -1,316 +0,0 @@
<!-- 风险控制 -->
<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>

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

@ -1,423 +0,0 @@
<!-- 工作票 -->
<template>
<view class="MainBox">
<view class="FormBox">
<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.projectName" placeholder="请输入所属项目" readonly></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业地点</view>
<view class="FormValueBox">
<u-input v-model="formData.workLocation" placeholder="请输入作业地点" readonly></u-input>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业负责人</view>
<view class="FormValueBox">
<u-input v-model="formData.workResponsible" placeholder="请输入作业负责人" readonly></u-input>
</view>
</view>
<view class="H2Box">核心信息</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业内容</view>
<view class="FormValueBox">
<u-textarea v-model="formData.workContent" placeholder="请输入作业内容" readonly></u-textarea>
</view>
</view>
<view class="FormItem">
<view class="FormLableBox FlexBox">
<view class="mustBox">风险类型</view>
<view class="addBtn" @click="showPicker = true">选择</view>
</view>
<view class="FormValueBox">
<view class="BorderBox">{{ formData.riskType }}</view>
<u-picker v-model="formData.riskType" :columns="[riskTypeList]" :show="showPicker" keyName="name"
@confirm="confirmRiskTypePicker" @cancel="showPicker = false"></u-picker>
</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="startDateText" placeholder="开始日期" readonly>
<template #suffix>
<u-button type="primary" size="small"
@click="showStartDatePicker = true">选择日期</u-button>
</template>
</u-input>
<up-datetime-picker :show="showStartDatePicker" v-model="startDate" mode="date"
:minDate="minTimestamp" @confirm="HandleStartDateConfirm"
@cancel="showStartDatePicker = false"></up-datetime-picker>
</view>
<view class="date-separator">至</view>
<view class="date-item">
<u-input v-model="endDateText" placeholder="结束日期" readonly>
<template #suffix>
<u-button type="primary" size="small"
@click="showEndDatePicker = true">选择日期</u-button>
</template>
</u-input>
<up-datetime-picker :show="showEndDatePicker" v-model="endDate" mode="date"
:minDate="minTimestamp" @confirm="HandleEndDateConfirm"
@cancel="showEndDatePicker = false"></up-datetime-picker>
</view>
</view>
</view>
</view>
<view class="H2Box">安全措施</view>
<view class="FormItem">
<view class="FormLableBox mustBox">通用安全措施</view>
<view class="FormValueBox">
<up-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
<up-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in safeMeasureList"
:key="item.id" :label="item.name" :name="item.name">
</up-checkbox>
</up-checkbox-group>
</view>
<view class="FlexBox" v-if="showMeasureBox">
<u-input v-model="customSafeMeasure" placeholder="请输入自定义安全措施"></u-input>
<view class="FlexBox">
<u-button type="info" size="small" @click="showMeasureBox = false">取消</u-button>
<u-button type="primary" size="small" @click="addCustomSafeMeasure">确认</u-button>
</view>
</view>
<view class="BlueTxt" @click="showMeasureBox = true">添加自定义措施</view>
</view>
<view class="FormItem">
<view class="FormLableBox mustBox">作业班成员资质确认</view>
<view class="FormValueBox">
<view class="MemberBox">
<view class="MemberItem" v-for="(item, index) in memberList" :key="item.id">
<view class="FlexBox">
<view class="MemberName">{{ item.name }}</view>
<view class="">
<u-tag type="primary" v-if="item.status == '持证'">{{ item.status }}</u-tag>
<u-tag type="warning" plain v-else>{{ item.status }}</u-tag>
</view>
</view>
<view class="FlexBox">
<u-checkbox v-model="checkedList" label="已经确认特种作业资格"></u-checkbox>
</view>
</view>
</view>
</view>
</view>
<view class="H2Box">高风险作业专项</view>
<view class="FormItem">
<view class="FormLableBox FlexBox">
<view >是否需要申领移动球机</view>
<view class="FlexBox">
<span>否</span>
<up-switch v-model="needApplyBallMachine" @change="change"></up-switch>
<span>是</span>
</view>
</view>
<view class="FormValueBox">
<u-button type="primary" :disabled="!needApplyBallMachine" @click="openApplyForMachine">申领移动球机</u-button>
</view>
</view>
</view>
</view>
</template>·
<script setup>
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([
{
id: 1,
name: '电气作业-低等风险',
value: '1',
},
{
id: 2,
name: '电气作业-中等风险',
value: '2',
},
{
id: 3,
name: '电气作业-高等风险',
value: '3',
},
])
// 安全措施列表
const safeMeasureList = ref([
{
id: 1,
name: '断电并挂牌上锁',
},
{
id: 2,
name: '验电确认无电压',
},
{
id: 3,
name: '设置临时接地线',
},
{
id: 4,
name: '穿戴绝缘手套和防护服',
},
{
id: 5,
name: '安排专人监护',
},
])
const showMeasureBox = ref(false); // 是否显示自定义安全措施输入框
const customSafeMeasure = ref(''); // 自定义安全措施输入框值
// 作业班成员资质确认
const memberList = ref([
{
id: 1,
name: '张三',
status: '持证',
},
{
id: 2,
name: '李四',
status: '未持证',
},
{
id: 3,
name: '王五',
status: '持证',
},
])
// 是否需要申领移动球机
const needApplyBallMachine = ref(false);
// 组件数据
const formData = ref({
serialNumber: '', // 票证编号
projectName: '', // 所属项目
workLocation: '', // 作业地点
workResponsible: '', // 作业负责人
workContent: '', // 作业内容
riskType: '', // 风险类型
})
// 显示风险类型选择器
const showPicker = ref(false);
const showStartDatePicker = ref(false); // 是否显示开始日期选择器
const showEndDatePicker = ref(false); // 是否显示结束日期选择器
const startDate = ref(null); // 开始日期时间戳
const endDate = ref(null); // 结束日期时间戳
const startDateText = ref(''); // 开始日期显示文本
const endDateText = ref(''); // 结束日期显示文本
const minTimestamp = ref(dayjs('2020-01-01').valueOf()); // 最小可选日期时间戳
// 暴露的组件方法
defineExpose({
getFormData() {
return formData.value;
}
})
// 确认选择风险类型
const confirmRiskTypePicker = (e) => {
formData.value.riskType = e.value[0].name;
showPicker.value = false;
}
// 处理开始日期确认事件
const HandleStartDateConfirm = (e) => {
console.log('选中的开始日期：', e);
// 如果没有选择日期，使用默认值
const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
startDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
startDate.value = selectedDate;
endDateText.value = '';
endDate.value = null;
showStartDatePicker.value = false;
UpdatePeriod();
};
// 处理结束日期确认事件
const HandleEndDateConfirm = (e) => {
console.log('选中的结束日期：', e);
// 如果没有选择日期，使用默认值
const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
// 检查是否选择了开始日期
if (startDate.value && dayjs(selectedDate).isBefore(dayjs(startDate.value))) {
uni.showToast({
title: '结束日期不能小于开始日期',
icon: 'none',
duration: 2000
});
return;
}
endDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
endDate.value = selectedDate;
showEndDatePicker.value = false;
UpdatePeriod();
};
// 更新作业周期
const UpdatePeriod = () => {
if (startDateText.value && endDateText.value) {
formData.value.period = [startDateText.value, endDateText.value];
} else if (startDateText.value) {
formData.value.period = [startDateText.value, ''];
} else if (endDateText.value) {
formData.value.period = ['', endDateText.value];
} else {
formData.value.period = [];
}
console.log('作业周期：', formData.value.period);
};
// 添加自定义安全措施
const addCustomSafeMeasure = () => {
if (customSafeMeasure.value.trim() !== '') {
safeMeasureList.value.push({
id: generateGuid(8),
name: customSafeMeasure.value,
});
customSafeMeasure.value = '';
showMeasureBox.value = false;
}
}
</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;
}
}
}
.MemberBox{
display: flex;
flex-direction: column;
gap: 20rpx;
.MemberItem{
border: 1rpx solid #e4e7ed;
padding: 20rpx;
border-radius: 10rpx;
.MemberName{
font-size: 30rpx;
}
}
}
.date-range-box {
display: flex;
align-items: center;
gap: 20rpx;
flex: 1;
.date-item {
flex: 1;
}
.date-separator {
color: #999;
font-size: 28rpx;
}
}
.H2Box {
font-size: 34rpx;
font-weight: bold;
margin-top: 20rpx;
}
</style>

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

@ -1,205 +0,0 @@
<!-- 工单编辑-外壳 -->
<template>
<view class="PageBox">
<view class="TopBox FlexBox">
<view class="iconBox FlexBox">
<!-- 返回上一页 -->
<u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
<!-- 返回主页 -->
<u-icon name="home" size="24" @click="goHome"></u-icon>
</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.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">
<u-button :text="currentStep.PrevBtnName" type="info" @click="prevStep"></u-button>
<u-button :text="currentStep.NextBtnName" color="#2979ff" @click="nextStep"></u-button>
</view>
</view>
</template>
<script setup>
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'
import ApplyForMachine from './compoents/ApplyForMachine.vue'
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({
BasicsInfo: {}, // 基础信息
GatePassInfo: {}, // 出入证申请
});
// 步骤列表
const stepList = ref([
{
id: 1,
Title: '工单基础信息',
PrevBtnName: '保存草稿',
NextBtnName: '下一步（申请出入证）',
},
{
id: 2,
Title: '出入证申请',
PrevBtnName: '返回修改',
NextBtnName: '提交+下一步（填写工作票）',
},
{
id: 3,
Title: '填写工作票',
PrevBtnName: '保存草稿',
NextBtnName: '提交+下一步（风险控制卡）',
},
{
id: 4,
Title: '填写风险控制卡',
PrevBtnName: '保存草稿',
NextBtnName: '提交监理审核',
},
{
id: '3a',
Title: '球机申领',
PrevBtnName: '取消申领',
NextBtnName: '返回申领',
},
])
// 返回上一步
const goBack = () => {
if (currentStep.value.id == '3a') {
currentStep.value = stepList.value.find(item => item.id == 3);
} if (currentStep.value.id == 1) {
goHome();
} else {
currentStep.value = stepList.value.find(item => item.id == currentStep.value.id - 1);
}
}
// 返回主页
const goHome = () => {
uni.switchTab({ url: '/pages/WorkOrderApproval/index' })
}
// 点击上一步
const prevStep = () => {
if (currentStep.value.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.id == 1) {
console.log(basicsInfoRef.value.getFormData());
allData.value.BasicsInfo = basicsInfoRef.value.getFormData();
} 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 = 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>
.FlexBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.PageBox {
background-color: #ff9900;
height: 100vh;
overflow: hidden;
.TopBox {
height: 100rpx;
padding: 20rpx;
background-color: #fff;
.iconBox {
font-size: 32rpx;
}
.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%;
}
}
}
.ContentBox {
background-color: #c5d5d6;
height: calc(100vh - 200rpx);
overflow: hidden;
}
.FootBox {
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
padding: 20rpx;
background-color: #fff;
}
}
</style>