|
@@ -7,10 +7,12 @@
|
|
|
start-placeholder="开始日期"
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
end-placeholder="结束日期"
|
|
|
@change="change"
|
|
@change="change"
|
|
|
- :shortcuts="shortcuts"
|
|
|
|
|
|
|
+ style="max-width: 299px"
|
|
|
></el-date-picker>
|
|
></el-date-picker>
|
|
|
<div class="shortcut">
|
|
<div class="shortcut">
|
|
|
- <el-button @click="">最近一周</el-button>
|
|
|
|
|
|
|
+ <el-button @click="changeDateToday">今日</el-button>
|
|
|
|
|
+ <el-button @click="changeDateThisMonth">本月</el-button>
|
|
|
|
|
+ <el-button @click="changeDateTotal">累计</el-button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -18,47 +20,39 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
|
|
|
|
|
- const dateRange = ref('');
|
|
|
|
|
|
|
+ const dateRange = ref<Date[]>();
|
|
|
const change = (val: any) => {
|
|
const change = (val: any) => {
|
|
|
console.log(val);
|
|
console.log(val);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const shortcuts = [
|
|
|
|
|
- {
|
|
|
|
|
- text: '今日',
|
|
|
|
|
- value: () => {
|
|
|
|
|
- const end = new Date();
|
|
|
|
|
- const start = new Date();
|
|
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
|
|
|
|
- return [start, end];
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- text: '本月',
|
|
|
|
|
- value: () => {
|
|
|
|
|
- const end = new Date();
|
|
|
|
|
- const start = new Date();
|
|
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
|
- return [start, end];
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- text: '累计',
|
|
|
|
|
- value: () => {
|
|
|
|
|
- const end = new Date();
|
|
|
|
|
- const start = new Date();
|
|
|
|
|
- start.setTime(0);
|
|
|
|
|
- return [start, end];
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- ];
|
|
|
|
|
|
|
+ const changeDateToday = () => {
|
|
|
|
|
+ const end = new Date();
|
|
|
|
|
+ const start = new Date();
|
|
|
|
|
+ dateRange.value = [start, end];
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const changeDateThisMonth = () => {
|
|
|
|
|
+ const end = new Date();
|
|
|
|
|
+ const start = new Date();
|
|
|
|
|
+ const nowDate = start.getDate();
|
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * (nowDate - 1));
|
|
|
|
|
+ dateRange.value = [start, end];
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const changeDateTotal = () => {
|
|
|
|
|
+ const end = new Date();
|
|
|
|
|
+ const start = new Date();
|
|
|
|
|
+ start.setTime(0);
|
|
|
|
|
+ dateRange.value = [start, end];
|
|
|
|
|
+ };
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.timenation {
|
|
.timenation {
|
|
|
|
|
+ padding-right: 25px;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|