energy_app/src/views/energyEfficiency/InitiateAppointment.vue

<template>
    <div>
    
        <!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
    
        <!-- 选项卡 -->
    
        <div class="container">
    
            <div class="part">
    
                <div class="nengyuan">
    
                    <van-cell-group>
    
                        <van-cell required :title="userName" is-link :value="customerName" @click="clientSelect" />
    
                        <van-field v-model="address" label="地址" placeholder="请输入" input-align="right">
    
                        </van-field>
    
                        <van-cell required title="预约日期" is-link :value="dateTime" @click="datePicker = true" />
    
                        <van-cell required title="计划完成日期" is-link :value="computedTime" @click="datePicker2 = true" />
    
                    </van-cell-group>
    
                </div>
    
                <div class="btn">
    
                    <van-button size="large" class="faqi" @click="submit">确认</van-button>
    
                </div>
    
            </div>
    
        </div>
    
        <!-- 年份选择 -->
    
        <van-popup v-model="datePicker" position="bottom">
    
            <van-datetime-picker v-model="currentDate" type="date"  :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="datePicker = false" />
    
        </van-popup>
    
        <!-- 年份选择 -->
    
        <van-popup v-model="datePicker2" position="bottom">
    
            <van-datetime-picker v-model="currentDate2" type="date" :min-date="minDate2" :max-date="maxDate" @confirm="onConfirm2" @cancel="datePicker2 = false" />
    
        </van-popup>
    
    </div>
</template>
<script>
// import Header from "@/components/headerNew";
import { takeInitiate } from "@/api/api.js";
export default {
    components: {
        // Header
    },
    data() {
        return {
            showPicker1: false,
            datePicker: false,
            datePicker2: false,
            currentDate: new Date(),
            currentDate2: new Date(),
            minDate: new Date(),
            title: "发起预约",
            // 客户ID
            customerId: "",
            // 客户名称
            customerName: "请选择",
            // 地址
            address: "",
            // 日期
            dateTime: "请选择",
            computedTime: "请选择"
        };
    },
    computed:{
    userName(){
      return this.$store.getters.validate? '用户名称':'客户名称'
    },
        maxDate(){
            const now = new Date()
            return new Date(now.getFullYear(), 11, 31)
        },
        minDate2(){
            return new Date(this.currentDate)
        },

    },
    created() {
        let customer = sessionStorage.getItem("customer");
        let customerMsg = JSON.parse(customer)
        if (customerMsg) {
            this.customerId = customerMsg.customerId;
            this.customerName = customerMsg.customerName;
            this.address = customerMsg.detailAddress;
        }
    },
    mounted() {},
    beforeDestroy() {
      sessionStorage.removeItem('customer')
    },
    methods: {
        clientSelect() {
          this.$router.push("/clientSelect");
        },
        // 日期选择赋值
        onConfirm(val) {
            var date2 = new Date(val);
            var y = date2.getFullYear();
            var m = date2.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date2.getDate();
            d = d < 10 ? "0" + d : d;
            this.dateTime = y + "-" + m + "-" + d;
            this.datePicker = false;
            if (this.computedTime&&!(Date.parse(this.computedTime) > Date.parse(this.dateTime))) {
                console.log('true');
                this.computedTime = '请选择'
            }
        },
        // 日期选择赋值
        onConfirm2(val) {
            var date2 = new Date(val);
            var y = date2.getFullYear();
            var m = date2.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date2.getDate();
            d = d < 10 ? "0" + d : d;
            this.computedTime = y + "-" + m + "-" + d;
            this.datePicker2 = false;
        },
        // 数据提交
        submit() {
            if (this.customerId == "") {
                this.$toast("客户名称为必填项");
                return;
            }
            if (this.dateTime == "请选择") {
                this.$toast("预约时间为必填项")
                return;
            }
            if (this.computedTime == "请选择") {
                this.$toast("计划完成时间为必填项")
                return;
            }
            let params = {
                customerId: this.customerId,
                appointmentTime: this.dateTime,
                planFinishTime: this.computedTime
            };
            takeInitiate(params)
                .then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.$toast("发起成功");
                        this.$router.push('/taskManage');
                    } else {
                        this.$toast(res.msg);
                    }
                })
                .catch(() => {
                    this.$toast("失败");
                });
        }
    }
};
</script>
<style lang="less" scoped>
.part {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    .nengyuan {
        width: 100%;
        border-radius: 10px;
        background: #fff;
        box-sizing: border-box;
        overflow: hidden;
        min-height: 550px;
    }
    .faqi {
        background-color: #63cbb6;
        color: #fff;
        border-radius: 8px;
        margin-top: 20px;
    }
}

::v-deep .van-field__control--right {
    color: #969799;
}

::v-deep .van-field__label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 0.32rem;
    color: #000;
    text-align: left;
    word-wrap: break-word;
}

.uploader {
    padding: 0 15px;
}

.container {
    height: calc(100vh - 50px);
    overflow-y: auto;
}

::v-deep .van-picker__confirm {
    color: #34baae;
}
</style>