147 lines
3.6 KiB
Vue
147 lines
3.6 KiB
Vue
<!-- 球机申领 -->
|
|
<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> |