From 6a624d9a3a238dbf162a61c6ceff64f60d4f4f6d Mon Sep 17 00:00:00 2001
From: monanxiao <monanxiao@qq.com>
Date: Thu, 24 Oct 2024 11:52:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=86=99=E6=97=B6=E9=97=B4=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=EF=BC=8C=E5=B9=B4=E6=9C=88=E6=97=A5=E5=88=86=E7=A6=BB?=
 =?UTF-8?q?=EF=BC=8C=E5=B7=B2=E5=AE=8C=E6=88=90=E5=AF=B9=E6=8E=A5=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/user.js   |   1 -
 src/views/order/index.vue | 210 +++++++++++++++++++++++++++-----------
 2 files changed, 153 insertions(+), 58 deletions(-)

diff --git a/src/api/modules/user.js b/src/api/modules/user.js
index bf973e1..1b2aca7 100644
--- a/src/api/modules/user.js
+++ b/src/api/modules/user.js
@@ -34,6 +34,5 @@ export function deleteUser(ItemId) {
     return service({
         method: "delete",
         url: `/application/role/${ItemId}`,
-        data: query,
     });
 }
\ No newline at end of file
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 1bae733..022adc3 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -39,12 +39,44 @@
         />
       </el-form-item>
 
-      <el-form-item label="时间">
+      <br>
+      <el-form-item label="按年">
         <el-date-picker
-            v-model="formSearch.date"
+            v-model="formSearch.year"
+            type="year"
+            placeholder="请选择年份"
+            :disabled-date="disablePastAndSpecificYear"
+            style="margin-right: 20px"
+            @clear="clearYearDate"
+            @change="isYearClick"
+        />
+      </el-form-item>
+
+      <el-form-item label="按月">
+        <el-date-picker
+            v-model="formSearch.month"
+            type="month"
+            placeholder="请选择月份"
+            :disabled="!formSearch.year"
+            :disabled-date="disablePastAndSpecificMonth"
+            @clear="clearMonthDate"
+            @change="isMonthClick"
+            :default-value="new Date(formatDate(formSearch.year).year, 1, 1)"
+            :arrow-control="true"
+        />
+      </el-form-item>
+
+      <el-form-item label="按天">
+        <el-date-picker
+            v-model="formSearch.day"
+            :disabled="!formSearch.month"
+            :disabled-date="disablePastAndSpecificDay"
             type="date"
-            placeholder="请选择时间"
+            placeholder="请选择日期"
             @clear="clearDate"
+            @change="isDayClick"
+            :default-value="new Date(formatDate(formSearch.year).year, formatDate(formSearch.month).month-1, 1)"
+            :arrow-control="true"
         />
       </el-form-item>
 
@@ -378,6 +410,7 @@
 
 import {nextTick, onMounted, reactive, ref} from 'vue'
 import {exportOrder, getOrderList} from "../../api/modules/order";
+import {ElMessage} from "element-plus";
 
 const tableData = ref([])
 const table = ref()
@@ -441,11 +474,98 @@ const handleCurrentChange = (val) => {
   initData(formSearch.value)
 }
 
+// 清空年份
+const clearYearDate = () => {
+  formSearch.value.year = ''
+}
+
+// 清空月份
+const clearMonthDate = () => {
+  formSearch.value.month = ''
+}
+
 // 清空日期
 const clearDate = () => {
   formSearch.value.date = ''
 }
 
+// 禁止选择之后的年份
+const disablePastAndSpecificYear = (date) => {
+  // 获取当前日期
+  const currentDate = new Date();
+
+  currentDate.setDate(currentDate.getDate() - 1);
+
+  // 禁止选择今天的前一天及之前的日期（不包含今天）
+  if (date > currentDate) {
+    return true;
+  }
+
+  // 禁止选择特定的未来日期，例如节假日
+  const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
+  return disabledDates.some((disabledDate) => {
+    return (
+        date.getFullYear() === disabledDate.getFullYear() &&
+        date.getMonth() === disabledDate.getMonth() &&
+        date.getDate() === disabledDate.getDate()
+    );
+  });
+};
+
+// 选中年份
+const isYearClick = () => {
+  formSearch.value.month = '';
+  formSearch.value.day = '';
+}
+
+// 选中月份
+const isMonthClick = () => {
+  formSearch.value.day = '';
+}
+
+// 选中天
+const isDayClick = () => {
+
+}
+
+// 选中月份禁止调整年份
+const disablePastAndSpecificMonth = (date) => {
+
+  if (!formSearch.value.year) {
+    return true; // 未选择年份时，禁用所有月份
+  }
+
+  const selectedYear = formatDate(formSearch.value.year).year;
+  const year = date.getFullYear();
+
+  // 只允许选择选中年份的月份
+  if (year !== selectedYear) {
+    return true;
+  }
+
+  return false;
+};
+
+// 选中年月禁止调整天
+const disablePastAndSpecificDay = (date) => {
+
+  if (!formSearch.value.month) {
+    return true; // 未选择月份时，禁用所有日期
+  }
+
+  const selectedYear = formatDate(formSearch.value.year).year;
+  const selectedMonth = formatDate(formSearch.value.month).month;
+  const year = date.getFullYear();
+  const month = date.getMonth()+1;
+
+  if (year !== selectedYear || month != selectedMonth) {
+    return true;
+  }
+
+  return false;
+
+}
+
 const excelDown = async () => {
   const url = downloadFile();
 
@@ -512,13 +632,31 @@ const onSearchSubmit = ()=> {
     params.status = parseInt(params.status, 10);
   }
 
-  if(params.date !== '')
+  if(params.year !== '')
+  {
+    let {
+      year
+    } = {...formatDate(params.year)};
+
+    params.year = year;
+  }
+
+  if(params.month !== '')
+  {
+    let {
+      month
+    } = {...formatDate(params.month)};
+
+    params.month = month;
+  }
+
+  if(params.day !== '')
   {
     let {
       year,
       month,
       day
-    } = {...formatDate(params.date)};
+    } = {...formatDate(params.day)};
 
     params.year = year;
     params.month = month;
@@ -535,6 +673,15 @@ const onSearchSubmit = ()=> {
 // 日期格式
 const formatDate = (date) => {
 
+  if(date === '')
+  {
+    return {
+      year: 1999,
+      month: 1,
+      day: 1,
+    };
+  }
+
   if (typeof date === 'string') {
     // 检查是否已经是格式化的字符串
     const regex = /^\d{4}-\d{2}-\d{2}$/;
@@ -547,13 +694,11 @@ const formatDate = (date) => {
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
 
-  let data = {
+  return {
     year: year,
     month: month,
     day: day,
   };
-
-  return data;
 };
 onMounted(() => {
   initData()
@@ -561,54 +706,5 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.mt-4 {
-  float: right;
-  text-align: right;
-  margin-bottom: 20px;
-}
 
-.demo-form-inline {
-}
-
-.dragClass {
-  background: rgba($color: #41c21a, $alpha: 0.5) !important;
-}
-
-// 停靠
-.ghostClass {
-  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
-}
-
-// 选择
-.chosenClass:hover > td {
-  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
-}
-
-.icon-view {
-  font-size: 20px;
-  color: #673ab7;
-  margin: 0 10px;
-}
-
-.icon-edit {
-  font-size: 20px;
-  color: #2f60c2;
-  margin: 0 10px;
-}
-
-.icon-dele {
-  font-size: 20px;
-  color: #ff5722;
-}
-
-.btn-color {
-  background: #fff;
-  color: #4c60cc;
-}
-
-.expand-title {
-  padding: 10px;
-  color: #919399;
-  font-weight: 600;
-}
 </style>