115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<!-- 工单编辑-外壳 -->
|
|
<template>
|
|
<view class="PageBox">
|
|
<view class="TopBox FlexBox">
|
|
<view class="iconBox FlexBox">
|
|
<!-- 返回上一页 -->
|
|
<u-icon name="arrow-leftward" size="24"></u-icon>
|
|
<!-- 返回主页 -->
|
|
<u-icon name="home" 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">
|
|
<BasicsInfo ref="basicsInfoRef"></BasicsInfo>
|
|
</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>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import BasicsInfo from './compoents/BasicsInfo.vue'
|
|
const currentStep = ref(1)// 当前步骤
|
|
const basicsInfoRef = ref(null); // 基础信息组件引用
|
|
|
|
// 步骤列表
|
|
const stepList = ref([
|
|
{
|
|
id: 1,
|
|
Title: '工单基础信息',
|
|
PrevBtnName: '保存草稿',
|
|
NextBtnName: '下一步（申请出入证）',
|
|
},
|
|
{
|
|
id: 2,
|
|
Title: '出入证申请',
|
|
PrevBtnName: '返回修改',
|
|
NextBtnName: '提交+下一步（填写工作票）',
|
|
},
|
|
{
|
|
id: 3,
|
|
Title: '填写工作票',
|
|
PrevBtnName: '保存草稿',
|
|
NextBtnName: '提交工单',
|
|
},
|
|
])
|
|
|
|
// 点击下一步
|
|
const nextStep = () => {
|
|
console.log(basicsInfoRef.value.getFormData());
|
|
}
|
|
|
|
|
|
</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> |