From b0ccd2d131b2e3df5d901385e38ed0077b8d0fbc Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 14 Apr 2025 12:31:31 +0800
Subject: [PATCH] feat:修改任务管理内容
---
src/components/CommonDateTime.vue | 188 +++++++++++++++++++++++++++++------------------
1 files changed, 116 insertions(+), 72 deletions(-)
diff --git a/src/components/CommonDateTime.vue b/src/components/CommonDateTime.vue
index 7a7a9a2..07202e5 100644
--- a/src/components/CommonDateTime.vue
+++ b/src/components/CommonDateTime.vue
@@ -1,83 +1,127 @@
<template>
- <div class="common-date-time">
- <el-date-picker
- v-model="newTime"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- <div class="time-card">
- <div class="card-item" :class="item==checked?'active':''" v-for="item in timeList" @click="timeClick(item)">
- {{ item }}
- </div>
- </div>
+ <div class="common-date-time">
+ <el-date-picker
+ v-model="model"
+ type="daterange"
+ value-format="YYYY-MM-DD"
+ range-separator="-"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ @change="change"
+ disabled
+ />
+ <div class="time-card">
+ <div
+ class="card-item"
+ :class="item === checked ? 'active' : ''"
+ v-for="(item, index) in timeList"
+ @click="timeClick(item,index)"
+ >
+ {{ timeListStr[index] }}
+ </div>
</div>
+ </div>
</template>
<script setup>
-const newTime = ref([]);
-let timeList = ['今日','本周','本月','本年' ];
+import dayjs from 'dayjs';
+import { ref, defineEmits } from 'vue';
-let checked = ref('今日');
-let timeClick = (item) => {
- checked.value = item;
-}
+const emit = defineEmits(['change']);
+
+const model = defineModel();
+
+let timeList = ['today', 'week', 'month', 'year'];
+let timeListStr = ['今日', '本周', '本月', '本年'];
+let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
+let checked = ref('today');
+
+const getDateRange = unit => {
+ if (unit === 'today') {
+ return [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
+ }
+ return [dayjs().startOf(unit).format('YYYY-MM-DD'), dayjs().endOf(unit).format('YYYY-MM-DD')];
+};
+
+const dateRanges = {
+ today: getDateRange('today'),
+ week: getDateRange('week'),
+ month: getDateRange('month'),
+ year: getDateRange('year'),
+};
+
+const change = value => {
+ // todo 待对接
+ // emit('change', value);
+};
+
+let timeClick = (item,index) => {
+ checked.value = item;
+ model.value = dateRanges[item];
+ emit('change', dateRanges[item],timeListEnum[index]);
+};
</script>
<style scoped lang="scss">
- .common-date-time {
- position: relative;
- top: 19px;
- display: flex ;
- justify-content: space-between;
- :deep(.el-date-editor) {
- background: rgba(0,15,34,0.5);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #306FCA;
- height: 28px;
-
- .el-input__wrapper {
- background-color: transparent;
- box-shadow: 0 0 0 1px #0070FF;
-
- &.is-focus {
- box-shadow: 0 0 0 1px #0070FF;
- }
- }
+.common-date-time {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
- .el-range-input {
- background-color: transparent;
- color: #fff;
- height: 28px;
- &::placeholder {
- color: rgba(255, 255, 255, 0.6);
- }
- }
- }
- .time-card {
- width: 156px;
- height: 28px;
- background: linear-gradient( 270deg, #195BAD 0%, rgba(25,91,173,0) 100%);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #306FCA;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
- display: flex;
- .card-item {
- width: 40px;
- height: 28px;
- line-height: 28px;
- cursor: pointer;
- }
- .active {
- background: linear-gradient( 270deg, #19AD8D 0%, rgba(25,173,141,0) 100%);
- box-shadow: inset 0px 0px 8px 0px rgba(0,255,200,0.6);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #30CAA9;
- }
- }
+ :deep(.el-date-editor) {
+ box-shadow: none;
+ width: 0;
+ flex: 1;
+ margin-right: 4px;
+
+ background: rgba(0, 15, 34, 0.5);
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #306fca;
+ height: 28px;
+
+ .el-input__wrapper {
+ background-color: transparent;
+ box-shadow: 0 0 0 1px #0070ff;
+
+ &.is-focus {
+ box-shadow: 0 0 0 1px #0070ff;
+ }
}
-</style>
\ No newline at end of file
+
+ .el-range-input {
+ background-color: transparent;
+ color: #fff;
+ height: 28px;
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
+ }
+
+ .time-card {
+ text-align: center;
+ background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
+ border: 1px solid #306fca;
+ font-family: Source Han Sans CN, Source Han Sans CN, serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ display: flex;
+ height: 28px;
+
+ .card-item {
+ width: 39px;
+ height: 100%;
+ line-height: 26px;
+ cursor: pointer;
+ }
+
+ .active {
+ background: linear-gradient(270deg, #19ad8d 0%, rgba(25, 173, 141, 0) 100%);
+ box-shadow: inset 0px 0px 8px 0px rgba(0, 255, 200, 0.6);
+ border-radius: 0px 0px 0px 0px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3