|
|
@@ -20,17 +20,13 @@
|
|
|
<view class="period" v-if="pageType==0">
|
|
|
<view class="period_l"><i>*</i>开始时间</view>
|
|
|
<view class="period_r">
|
|
|
- <picker mode="multiSelector" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
|
|
|
- <input class="picker-text" disabled type="text" v-model="form.usageStartTime" placeholder="开始时间">
|
|
|
- </picker>
|
|
|
+ <input class="picker-text" @click="changeDateTime()" disabled type="text" v-model="form.usageStartTime" placeholder="开始时间">
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="period" v-if="pageType==0">
|
|
|
<view class="period_l"><i>*</i>结束时间</view>
|
|
|
<view class="period_r">
|
|
|
- <picker mode="multiSelector" @change="changeDateTime2" @columnchange="changeDateTimeColumn" :range="dateTimeArray">
|
|
|
- <input class="picker-text" disabled type="text" v-model="form.usageEndTime" placeholder="结束时间">
|
|
|
- </picker>
|
|
|
+ <input class="picker-text" @click="changeDateTime2()" disabled type="text" v-model="form.usageEndTime" disabled placeholder="结束时间">
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="register_li_min" v-if="pageType==0">
|
|
|
@@ -66,16 +62,35 @@
|
|
|
<view class="btn_r" @click="submitForm(1)">登记完成</view>
|
|
|
</view>
|
|
|
<view v-if="pageType==1" class="sub_btn" @click="submitForm(2)">提交余量不符并使用</view>
|
|
|
+ <!-- 一遮罩-->
|
|
|
+ <view class="shade-outfire" v-if="dialogVisible">
|
|
|
+ <view class="null-box" @click="dialogOutfire()"></view>
|
|
|
+ <view class="shade-outfire-n">
|
|
|
+ <view class="btns">
|
|
|
+ <text @click="dialogOutfire()">取消</text>
|
|
|
+ <text @click="submitDate()">确认</text>
|
|
|
+ </view>
|
|
|
+ <DateTimePicker
|
|
|
+ @onChange="onChangeStartDate"
|
|
|
+ :defaultDate="startDate"
|
|
|
+ :maxDate="endDate"
|
|
|
+ :mode="4"
|
|
|
+ @="StartDate"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
|
|
|
import {airbottleStockFindByBeaconTag,airbottleUsageRecordAdd} from '@/api/index.js'
|
|
|
import { config } from '@/api/request/config.js'
|
|
|
- import { dateTimePicker,getMonthDay} from '@/api/../component/date.js'
|
|
|
export default {
|
|
|
-
|
|
|
name: "gasRecycle",
|
|
|
+ components: {
|
|
|
+ DateTimePicker
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
baseUrl:config.base_url,
|
|
|
@@ -100,6 +115,7 @@
|
|
|
specificationName:{},
|
|
|
currentStatus:null,
|
|
|
beaconTag:'',
|
|
|
+ dialogVisible:false,
|
|
|
//时间年月日时分秒
|
|
|
dateTime: null,
|
|
|
dateTimeArray: null,
|
|
|
@@ -108,12 +124,13 @@
|
|
|
timeStr:'',
|
|
|
usageTimeUnit:'分钟',
|
|
|
currentDate:'',//开始时间默认当前时间
|
|
|
+ startDate:'',
|
|
|
+ endDate:'',
|
|
|
+ dateType:0,//0开始时间 1结束时间
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.currentDateStartFun()
|
|
|
- this.currentDateFun()
|
|
|
- this.initTime()
|
|
|
if(option.beaconTag){
|
|
|
this.beaconTag=option.beaconTag;
|
|
|
}
|
|
|
@@ -141,96 +158,70 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
- currentDateFun(){
|
|
|
- let date = new Date(); //Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
|
|
|
- this.startYear= date.getFullYear(); //获取完整的年份(4位)
|
|
|
- this.endYear= date.getFullYear()+70;
|
|
|
- },
|
|
|
//当前时间年月日时分
|
|
|
currentDateStartFun(){
|
|
|
var self = this;
|
|
|
let yy = new Date().getFullYear();
|
|
|
let mm = new Date().getMonth()+1;
|
|
|
let dd = new Date().getDate();
|
|
|
+ dd = (dd < 10 ? '0' : '') + dd
|
|
|
let hh = new Date().getHours();
|
|
|
let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
|
|
|
let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
|
|
|
self.currentDate=yy+'-'+mm+'-'+dd+' '+hh+':'+mf;
|
|
|
},
|
|
|
- initTime(){
|
|
|
- let date = new Date();
|
|
|
- let endYear = date.getFullYear();
|
|
|
- // 获取完整的年月日 时分秒，以及默认显示的数组
|
|
|
- let obj = dateTimePicker(this.startYear, this.endYear);
|
|
|
- // 精确到分的处理，将数组的秒去掉
|
|
|
- // let lastArray = obj.dateTimeArray.pop();
|
|
|
- // let lastTime = obj.dateTime.pop();
|
|
|
-
|
|
|
- this.dateTimeArray=obj.dateTimeArray
|
|
|
- this.dateTime=obj.dateTime
|
|
|
- },
|
|
|
durationFun(){
|
|
|
let self=this;
|
|
|
let duration=new Date(self.form.usageEndTime).getTime()-new Date(self.form.usageStartTime).getTime()
|
|
|
let minutes = parseInt(duration/(1000 * 60))
|
|
|
this.$set(this.form,'usageTime',minutes);
|
|
|
},
|
|
|
- //开始时间
|
|
|
- changeDateTime(e) {
|
|
|
- this.dateTime = e.detail.value;
|
|
|
- let start= this.createTimeStr(this.dateTimeArray,this.dateTime);
|
|
|
- if(new Date(start).getTime()>new Date(this.form.usageEndTime).getTime()){
|
|
|
- uni.showToast({
|
|
|
- title: '结束时间不能小于开始时间',
|
|
|
- icon:"none",
|
|
|
- mask:true,
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.form.usageStartTime= start;
|
|
|
+ //时间确定
|
|
|
+ submitDate(){
|
|
|
+ this.dialogVisible=false;
|
|
|
+ },
|
|
|
+ //弹出层关闭
|
|
|
+ dialogOutfire() {
|
|
|
+ this.dialogVisible = !this.dialogVisible
|
|
|
+ },
|
|
|
+ //选中的时间
|
|
|
+ onChangeStartDate(date) {
|
|
|
+ console.log(date)
|
|
|
+ if(this.dateType==0){//开始时间
|
|
|
+ if(new Date(date).getTime()>new Date(this.form.usageEndTime).getTime()){
|
|
|
+ uni.showToast({
|
|
|
+ title: '开始时间不能大于结束时间',
|
|
|
+ icon:"none",
|
|
|
+ mask:true,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.form.usageStartTime= date;
|
|
|
+ }
|
|
|
+ }else if(this.dateType==1){//结束时间
|
|
|
+ if(new Date(date).getTime()<new Date(this.form.usageStartTime).getTime()){
|
|
|
+ uni.showToast({
|
|
|
+ title: '结束时间不能小于开始时间',
|
|
|
+ icon:"none",
|
|
|
+ mask:true,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.form.usageEndTime= date
|
|
|
+ this.durationFun();//使用时长
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- //ios时间不能用'-'解析成时间戳
|
|
|
+
|
|
|
+ },
|
|
|
+ //开始时间
|
|
|
+ changeDateTime() {
|
|
|
+ this.dateType=0;
|
|
|
+ this.dialogVisible=true;
|
|
|
},
|
|
|
//结束时间
|
|
|
- changeDateTime2(e) {
|
|
|
- this.dateTime = e.detail.value;
|
|
|
- let end= this.createTimeStr(this.dateTimeArray,this.dateTime);
|
|
|
-
|
|
|
- if(new Date(this.form.usageStartTime).getTime()>new Date(end).getTime()){
|
|
|
- uni.showToast({
|
|
|
- title: '结束时间不能小于开始时间',
|
|
|
- icon:"none",
|
|
|
- mask:true,
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.form.usageEndTime= end
|
|
|
- //ios时间不能用'-'解析成时间戳
|
|
|
- this.durationFun();//使用时长
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- /*年,月切换时重新更新计算*/
|
|
|
- changeDateTimeColumn(e) {
|
|
|
- //let {id} = e.target;
|
|
|
- let {column,value} = e.detail;
|
|
|
- if(column==0 || column==1){
|
|
|
- //直接修改数组下标视图不更新,用深拷贝之后替换数组
|
|
|
- let dateTime = JSON.parse(JSON.stringify(this.dateTime));
|
|
|
- let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
|
|
|
- dateTime[column] = value;
|
|
|
- dateTimeArray[2] = getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
|
|
|
- this.dateTime = dateTime;
|
|
|
- this.dateTimeArray = dateTimeArray;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- createTimeStr(dateTimeArray,dateTime){
|
|
|
- let timeStr = dateTimeArray[0][dateTime[0]]+'-'+dateTimeArray[1][dateTime[1]]+'-'+dateTimeArray[2][dateTime[2]]+' '+dateTimeArray[3][dateTime[3]]+":"+dateTimeArray[4][dateTime[4]];
|
|
|
- return timeStr
|
|
|
+ changeDateTime2() {
|
|
|
+ this.dateType=1;
|
|
|
+ this.dialogVisible=true;
|
|
|
},
|
|
|
//点击事件
|
|
|
handleClick(doType) {
|
|
|
@@ -666,5 +657,47 @@
|
|
|
padding-bottom: 106rpx;
|
|
|
}
|
|
|
}
|
|
|
+ /* 弹窗 */
|
|
|
+ .shade-outfire {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ z-index: 10;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ .null-box {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ /* 内容 */
|
|
|
+ .shade-outfire-n {
|
|
|
+ width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ .btns{
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1rpx solid #dedede;
|
|
|
+ >text{
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ >text:nth-of-type(2){
|
|
|
+ color: #42a06c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
heyang