laboratory_maintenance_app/pages/inspection/questOrder.vue

<template>
    <view class="page-css">
        <view class="info">
            <view class="info_title">基本信息</view>
            <view class="info_item">
                <text class="item_left_txt">单位名称：</text>
                <text class="item_right_txt">张三</text>
            </view>
            <view class="info_item">
                <text class="item_left_txt">巡检项目名称：</text>
                <text class="item_right_txt">张三</text>
            </view>
            <view class="info_item">
                <text class="item_left_txt">项目地址：</text>
                <text class="item_right_txt">张三</text>
            </view>
        </view>
        <view class="info">
            <view class="info_title">巡检配置</view>
            <!-- <view class="info_item">
                <text class="item_left_txt">巡检内容：</text>
                <text class="item_right_txt">张三</text>
            </view>
            <view class="info_item">
                <text class="item_left_txt">任务开始时间：</text>
                <text class="item_right_txt"></text>
            </view>
            <view class="info_item">
                <text class="item_left_txt">预约上门时间：</text>
                <text class="item_right_txt"></text>
            </view> -->
            <u-form labelPosition="left" ref="sendOrderForm" :model="detailForm" :label-width="200" class="repair_form">
                <u-form-item label="巡检内容:" prop="dispatchTime" :border-bottom="false">
                    <betone-new-input label="" v-model="detailForm.dispatchTime" placeholder="" />
                </u-form-item>
                <u-form-item label="任务开始时间:" prop="planCompleteTime" :border-bottom="false">
                    <!-- <u-input v-model="sendOrder.planCompleteTime" type="select" @click="calendarShow = true"
                        :border="true" placeholder="请选择时间"  /> -->
                </u-form-item>
                <u-form-item label="预约上门时间:" prop="customerOpinion" :border-bottom="false">
                    <u-input v-model="reservationTime" type="select" @click="calendarShow = true" :border="true"
                        placeholder="请选择时间" />
                </u-form-item>
            </u-form>
        </view>
        <view class="info">
            <view class="info_title">巡检任务</view>
            <detailsCollapse type="view"></detailsCollapse>
        </view>
        <!-- <view class="repair-btn" style="margin-right: 32rpx;width:100%">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary">提交</u-button>
        </view> -->
        <!-- 维修人员接收任务单 -->
        <view class="repair-btn" style="margin-right: 32rpx;width:100%">
            <u-button size="medium" @click="endOrderCancel()">取消</u-button>
            <u-button size="medium" type="primary" @click="receiveQuest()">接收</u-button>
        </view>

        <u-calendar v-model="calendarShow" mode="date" @change="calendarChange" :min-date="minDate"
            :max-date="maxDate"></u-calendar>
    </view>
</template>
<script>
import detailsCollapse from './components/detailsCollapse.vue'
export default {
    components: {
        detailsCollapse,
    },
    computed: {
        dataTypes() {
            return this.$store.state.dataType
        },
    },
    data() {
        return {
            detailForm: {},
            orderId: '',//巡检任务id
            optionsType: '',//可操作类型
            reservationTime: '',//预约上门时间
            minDate: null,
            maxDate: null,
            calendarShow: false,//预约时间

        }
    },
    onLoad(options) {
        this.optionsType = options.type
        this.orderId = options.id
        this.getDetails()
        this.initDate()
    },
    methods: {
        getDetails() {
            let query = {
                id: this.orderId
            }
            this.$u.api.getTaskDetail(query).then(res => {
                if (res.code == 200) {
                    this.detailForm = res.data
                }
            })
        },
        endOrderCancel() {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回退一个页面
            })
        },
        // 维修人员接收
        receiveQuest() {
            let query = {
                id: this.detailForm.id
            }
            this.$u.api.taskServicemanreceive(query).then(res => {
                if (res.code == 200) {
                    // setTimeout(() => {
                    //     uni.navigateBack({
                    //         delta: 1 // 默认值是1，表示回退一个页面
                    //     })
                    // },500)
                }
            })
        },
        // 设置最大可选择时间
        initDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            let minyear = year;
            this.minDate = minyear + "-" + month + "-" + day;
            //let maxyear = year + 1;
            this.maxDate = year + 1 + "-" + month + "-" + day; // 最大日期可选到一年后
            //this.maxDate = year  + '-'+ month +'-' + day; // 最大日期可选到今天
        },
        calendarChange(e) {
            this.reservationTime = e.result
        }
    }
}
</script>
<style lang="scss" scoped>
.page-css {
    width: 100%;
    padding: 0;
    padding-top: 26rpx;

    .info {
        margin: 0 24rpx 20rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 6rpx 0 34rpx;

        .info_title {
            line-height: 60rpx;
            color: rgba(0, 0, 0, 1);
            font-size: 32rpx;
            text-align: left;
            font-family: SourceHanSansSC-bold;
            margin: 18rpx 0 0rpx 20rpx;
            font-weight: bold;
        }

        .info_item {
            padding: 4rpx 20rpx 0;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .item_left_txt {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: SourceHanSansSC-regular;
                width: 210rpx;
                margin-right: 20rpx;
                line-height: 60rpx;
            }

            .item_right_txt {
                max-width: calc(100% - 220rpx);
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                // text-align: left;
                text-align: justify;
                font-family: SourceHanSansSC-regular;
            }
        }
    }

    .repair-btn {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: space-between;
        /* 水平均匀分布 */
        margin-top: 32rpx;
        padding: 0 32rpx;

        /deep/.u-btn {
            width: 48%;
        }
    }

    .repair_form {
        padding: 0 18rpx;
    }
}
</style>