121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<template>
|
||
<div>
|
||
<template v-if="mode === 'DESIGN'">
|
||
<el-date-picker size="medium" v-model="_value" disabled :type="type" :start-placeholder="placeholder[0]"
|
||
:end-placeholder="placeholder[1]"/>
|
||
<div v-if="showLength" class="length">
|
||
<span>时长：</span>
|
||
<span>{{ timeLength }}</span>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<template v-if="perm === 'E'">
|
||
<el-date-picker v-model="_value" size="medium" clearable :value-format="format" :type="type"
|
||
:start-placeholder="placeholder[0]" :end-placeholder="placeholder[1]"/>
|
||
</template>
|
||
<template v-else-if="perm === 'R'">
|
||
<!-- <div v-if="type==='daterange'">-->
|
||
<!-- <span style="float:left;">{{_value[0]}}</span>-->
|
||
<!-- <span style="padding:0 9px">至</span>-->
|
||
<!-- <span>{{ _value[1] }}</span>-->
|
||
<!-- </div>-->
|
||
<div>
|
||
<span style="float:left;">{{ _value[0] }}</span>
|
||
<span style="padding:0 9px">至</span>
|
||
<span>{{ _value[1] }}</span>
|
||
</div>
|
||
</template>
|
||
<div v-if="showLength" class="length">
|
||
<span>时长：</span>
|
||
<span>{{timeLength}}</span>
|
||
<!-- <span>{{type==='daterange'? parseInt(timeLength)+1: timeLength }}</span>-->
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import componentMinxins from "../ComponentMinxins";
|
||
import moment from "moment";
|
||
import {timeLength} from '@/utils/date'
|
||
export default {
|
||
mixins: [componentMinxins],
|
||
name: "DateTimeRange",
|
||
components: {},
|
||
props: {
|
||
value: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
},
|
||
perm: {
|
||
type: String,
|
||
default: "E"
|
||
},
|
||
format: {
|
||
type: String,
|
||
default: "yyyy-MM-dd HH:mm"
|
||
},
|
||
placeholder: {
|
||
type: Array,
|
||
default: () => {
|
||
return ["开始时间", "结束时间"];
|
||
}
|
||
},
|
||
showLength: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
length: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
computed: {
|
||
type() {
|
||
switch (this.format) {
|
||
case "yyyy-MM-dd":
|
||
return "daterange";
|
||
case "yyyy-MM-dd HH:mm":
|
||
return "datetimerange";
|
||
default:
|
||
return "daterange";
|
||
}
|
||
},
|
||
timeLength() {
|
||
//求时长算法
|
||
if (Array.isArray(this.value)) {
|
||
// let start = moment(this.value[0]).format(this.format.replaceAll("dd", "DD"));
|
||
// let end = moment(this.value[1]).format(this.format.replaceAll("dd", "DD"));
|
||
if (this.value[0] === this.value[1]) {
|
||
return "0 （时长为0，请确认）";
|
||
}
|
||
return timeLength(this.value[0],this.value[1])
|
||
} else {
|
||
return "先选择时间哦";
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
methods: {}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.length {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.length:nth-child(2) {
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
/deep/ .el-date-editor--datetimerange.el-input__inner {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
</style>
|