Commit 8fd0565b authored by 刘威龙's avatar 刘威龙

运单页面调整

parent 648dba92
<template>
<view class="datetimePicker" @touchmove.stop.prevent="moveHandle">
<u-datetime-picker ref="datetimePicker" itemHeight="120" :visibleItemCount="visibleItem" :show="visible"
v-model="timestamp" :mode="dateType" @confirm="onSelsectDate" @cancel="onVisible" />
v-model="timestamp" :mode="effectiveMode" @confirm="onSelsectDate" @cancel="onVisible" />
</view>
</template>
......@@ -16,7 +16,13 @@
},
dateType: {
type: String,
default: 'date'
default: 'date' // 默认改为 datetime 模式
}
},
computed: {
// 计算实际使用的模式,兼容旧用法
effectiveMode() {
return this.dateType === 'date' ? 'date' : 'datetime';
}
},
onReady() {
......@@ -29,28 +35,31 @@
showPopup: false,
timestamp: new Date().getTime(),
dateValue: "", //时间戳转换后 年-月-日
visibleItem: 4,
visibleItem: 4, // 增加可见行数,以显示小时、分钟和秒
};
},
methods: {
moveHandle(){
},
//自定义时间格式
// 自定义时间格式 - 增加对秒的格式化
formatter(type, value) {
if (type === 'year') {
return `${value}年`;
}
if (type === 'month') {
return `${value}月`;
switch (type) {
case 'year':
return `${value}年`;
case 'month':
return `${value}月`;
case 'day':
return `${value}日`;
case 'hour':
return `${value}时`;
case 'minute':
return `${value}分`;
case 'second':
return `${value}秒`;
default:
return value;
}
if (type === 'day') {
return `${value}日`;
}
if (type === 'hour') {
return `${value}时`;
}
return `${value}分`;
},
onVisible() {
......@@ -64,18 +73,20 @@
this.$emit('onSelsectDate', { dateValue: date, timestamp: dateInfo.value, })
},
//时间戳转换
// 时间戳转换 - 增加对秒的显示
formatDate(timestamp) {
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
const hour = nowDate.getHours()
const minute = nowDate.getMinutes()
const hour = nowDate.getHours().toString().padStart(2, '0');
const minute = nowDate.getMinutes().toString().padStart(2, '0');
const second = nowDate.getSeconds().toString().padStart(2, '0');
if (this.dateType === 'date') {
return `${year}-${ month}-${date}`
return `${year}-${month}-${date}`;
} else {
return `${year}-${ month}-${date} ${hour}-${ minute}`
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
}
},
}
......@@ -87,7 +98,7 @@
z-index: 1000;
/* #ifdef MP */
/deep/.u-popup__content {
height: 40vh !important;
height: 50vh !important; /* 增加高度,以显示更多内容 */
.u-picker__view__column {
.u-picker__view__column__item {
......@@ -99,4 +110,4 @@
/* #endif */
}
</style>
</style>
\ No newline at end of file
This diff is collapsed.
......@@ -368,6 +368,17 @@
this.formData[key] = ''; // 清空对应字段
this.$refs.myForm.clearValidate(key); // 清除表单验证状态(如果有)
},
onNavBack() {
uni.navigateBack({
delta: 1, // 返回的页面数,如果是1则表示返回上一页,默认为1
success: () => {
console.log('返回成功');
},
fail: (err) => {
console.error('返回失败:', err);
}
});
}
}
}
</script>
......
<template>
<view class="shipmentDispatch-list content_box">
<view class="shipmentDispatch-item">
<!-- 基本信息 -->
<view class="module-title flex">
<text class="font_bolder">在途上报信息</text>
</view>
<!-- 注册内容 -->
<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
<view class="basic-info">
<u-form-item prop="report_explain" label="事件内容" labelWidth="25%" borderBottom>
<u-textarea
:disabledColor="'#ffffff'"
border="none"
v-model="formData.report_explain"
:rows="4"
/>
</u-form-item>
<u-form-item prop="report_location" required label="上报地点" labelWidth="25%" borderBottom>
<u-input :disabledColor="'#ffffff'" border="none" v-model="formData.report_location" />
</u-form-item>
<u-form-item prop="report_time" required label="上报时间" labelWidth="35%" borderBottom>
<view @click="onVisibleDate('report_time')">
<u-input
:disabledColor="'#ffffff'"
disabled
border="none"
readonly
placeholder="请选择上报时间"
:value="convertTimeHh24(formData.report_time)"
>
<!-- 使用 suffix 插槽添加清除图标 -->
<template #suffix>
<view v-if="formData.report_time" @click.stop="clearDate('report_time')">
<u-icon name="close-circle-fill" size="24" color="#909399" />
</view>
</template>
</u-input>
</view>
</u-form-item>
</view>
</u--form>
</view>
<!-- 底部按钮 -->
<view class="operation-btn flex_sb">
<button class="backBtn common_btn" @click="onNavBack">返回</button>
<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
</view>
<!-- 时间选择 -->
<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate"
@onSelsectDate="onSelsectDate" dateType="datetime"/>
</view>
</template>
<script>
import {getMassShipmentTruckList} from '../../api/apiList.js'
export default {
name: 'shipmentReport',
options: { styleIsolation: 'shared' },
data() {
return {
pageNum: 1, //页码
pageSize: 10, //每页条数
isEmpty: true, //是否为空
rows: [], //当前展开面板
formData: {
report_explain: "", //事件内容
report_location: "", //上报地点
report_time: "", //上报时间
},
rules: {
'report_location': { required: true }, //上报地点
'report_time': { required: true } //上报时间
},
showPopup: false, //时间选择
visibleKey: '', //当前显示字段的key
optionEnums: [], //候选项枚举
popTitle: '', //弹窗标题
visible: false, //类型选择
visible1: false, //类型选择
visible2:false,
viewEnums:[],//车辆枚举视图
driverViewEnums:[],//司机方式枚举
searchValue: "", //搜索值--车辆
searchValue1: "", //搜索值--司机
selectEnum:[],//接受返回值
selectEnum1:[],//接受返回值
currentChecked:'',
currentChecked1:'',
placeholder: "请输入搜索车牌号", //默认提示
placeholder1: "请输入搜索司机", //默认提示
carrier:''
}
},
onLoad(options) {
const data = getApp().globalData.choose;//勾选的数据
const isEmpty = !Object.keys(data).length
},
methods: {
// 提交表单数据
onSubmitForm() {
const rows = getApp().globalData.choose;
this.formData.rows= rows;
this.formData.ship_event_code="report";//派车接单
this.formData.report_time= this.convertTimeHh24(this.formData.report_time)
console.log(this.formData)
var baseData = {
"aux": {
"rows":rows,
"aux":this.formData,
},
}
//在途上报操作
getMassShipmentTruckList(baseData).then(res => {
if (res.data.data.messageType === 'success') {
uni.showToast({
title: '操作成功!',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
})
},
//设置显示枚举
setViewEnums(optionEnums, key) {
let viewEnums = {}
optionEnums.map(item => {
viewEnums[item.value] = item.label
})
this[key] = viewEnums
},
//确认选择
onConfirmPicker(value) {
this.setFormData(value)
this.visible = false
this.visible1 = false
this.visible2 = false
},
//页面展示时间戳转换为日期
convertTime(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
return `${year}-${ month}-${date}`
},
//页面展示时间戳转换为年月日时分秒
convertTimeHh24(timestamp) {
if (!timestamp) return
const nowDate = new Date(timestamp)
var year = nowDate.getFullYear();
var month = nowDate.getMonth() < 9 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
var date = nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate();
var hour = nowDate.getHours() < 10 ? '0' + nowDate.getHours() : nowDate.getHours();
var minute = nowDate.getMinutes() < 10 ? '0' + nowDate.getMinutes() : nowDate.getMinutes();
var second = nowDate.getSeconds() < 10 ? '0' + nowDate.getSeconds() : nowDate.getSeconds();
return `${year}-${month}-${date} ${hour}:${minute}:${second}`
},
//设置formData
setFormData(value) {
//情况时间
const key = this.visibleKey
if (key.includes('.')) { //对象特殊处理
const keys = key.split('.')
this.formData[keys[0]][keys[1]] = value
} else {
this.formData[key] = value
}
},
clearDate(key) {
this.formData[key] = ''; // 清空对应字段
this.$refs.myForm.clearValidate(key); // 清除表单验证状态(如果有)
},
onVisibleDate(type) {
if (type) {
this.visibleKey = type
}
this.showPopup = !this.showPopup
},
// 时间选择
onSelsectDate(dateInfo) {
const {
timestamp
} = dateInfo
this.setFormData(timestamp)
this.showPopup = false
},
onNavBack() {
uni.navigateBack({
delta: 1, // 返回的页面数,如果是1则表示返回上一页,默认为1
success: () => {
console.log('返回成功');
},
fail: (err) => {
console.error('返回失败:', err);
}
});
}
}
}
</script>
<style lang="scss">
.shipmentDispatch-list {
.module-title {
margin-top: 20rpx;
//padding: 15rpx 0rpx 16rpx;
//background-color:#a2a2a2;
.vertical-separate {
height: 40rpx;
border-left: 7rpx solid #797979;
margin-right: 20rpx;
}
}
.select-container {
min-width: 70vw;
height: 50vh;
padding: 30rpx;
font-weight: 400;
.popTitle {
color: #8C8C8C;
font-size: 32rpx;
text-align: center;
margin-bottom: 44rpx;
}
.select-list{
height: 460rpx;
}
}
.shipmentDispatch-item {
padding: 32rpx;
margin-bottom: 24rpx;
background: #FFFFFF;
.detail-title {
font-size: 28rpx;
padding: 8rpx 0 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.t-icon-order {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
/deep/.custom-cell-row {
margin-top: 10rpx;
.custom-cell-label {
color: #8C8C8C;
}
}
.outer-frame {
margin-top: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #F0F0F0;
overflow: hidden;
.foldPanel-title {
color: #2E75E6;
font-size: 28rpx;
padding-left: 20rpx;
height: 96rpx;
background: rgba(46, 117, 230, .1);
.foldPanel-right-icon {
margin-right: 20rpx;
}
}
/deep/.cargo-detail-table {
background: #FFFFFF;
padding-bottom: 10rpx;
.detail-row-title {
color: #8C8C8C;
background: #FAFAFA;
padding: 20rpx 0;
}
.detail-col-item {
margin: 20rpx;
.cargo-title {
font-size: 28rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.snapshoot image {
margin: 20rpx 15rpx;
width: 140rpx;
height: 140rpx;
}
/deep/.basic-info,
/deep/.driving-license {
padding: 0 10rpx;
background-color: #ffffff;
.input-tip {
font-size: 28rpx;
color: #BFBFBF;
}
.u-form-item__body__left__content__label {
color: #8C8C8C;
font-size: 28rpx;
}
.u-form-item__body {
padding: 25rpx 0;
}
.u-icon {
margin-left: 20rpx;
}
.u-upload__wrap>view {
width: 100%;
}
.previewImages {
width: 100%;
.previewImg {
width: 100% !important;
height: 240rpx !important;
}
}
.uploadeBtn {
width: 100% !important;
height: 240rpx !important;
margin-bottom: 30rpx;
margin-left: 0 !important;
}
.orderTotal {
display: none;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment