功能选择背景色样式更改

frontend/src/views/plan/planList/index.vue

@@ -14,7 +14,7 @@
           <el-form-item label="检测时间">
             <el-select
               v-model="searchForm.intervalType"
-              style="width: 100px !important"
+              style="width: 80px !important"
             >
               <el-option :value="0" label="按周">按周</el-option>
               <el-option :value="1" label="按月">按月</el-option>
@@ -22,7 +22,17 @@
             </el-select>
           </el-form-item>
           <el-form-item label="">
-            <el-date-picker> </el-date-picker>
+            <!-- <el-date-picker v-model="searchForm.time"></el-date-picker> -->
+            <el-date-picker
+              style="width: 220px"
+              v-model="searchForm.time"
+              type="daterange"
+              unlink-panels
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :shortcuts="shortcuts"
+            />
           </el-form-item>
           <el-form-item label="检测状态">
             <el-select v-model="searchForm.checkStatus">
@@ -49,8 +59,10 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary">查询</el-button>
-            <el-button>重置</el-button>
+            <el-button type="primary" :icon="Search" @click="handleSearch"
+              >查询</el-button
+            >
+            <el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
           </el-form-item>
         </el-form>
 
@@ -139,9 +151,42 @@ import {
   Upload,
   View,
   Refresh,
+  Search,
 } from "@element-plus/icons-vue";
 import { getPlanList } from "@/api/plan/planList";
 const router = useRouter();
+const value1 = ref("");
+const value2 = ref("");
+
+const shortcuts = [
+  {
+    text: "最近一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      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(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
 
 // 跳转详情页
 const toDetail = () => {
@@ -151,6 +196,7 @@ const toDetail = () => {
 };
 const searchForm = ref({
   intervalType: 0,
+  time: ["2024-08-20", "2024-08-27"],
   searchBeginTime: "",
   searchEndTime: "",
   checkStatus: 0,
@@ -185,7 +231,6 @@ const getTableList = (params: any) => {
   delete newParams.createTime;
   return getPlanList(newParams);
 };
-
 // 表格配置项
 const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { type: "selection", fixed: "left", width: 70 },
@@ -326,7 +371,26 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   },
   { prop: "operation", label: "操作", fixed: "right", width: 250 },
 ]);
-
+//重置查询条件
+const resetSearchForm = () => {
+  searchForm.value = {
+    intervalType: 0,
+    time: ["2024-08-20", "2024-08-27"],
+    searchBeginTime: "",
+    searchEndTime: "",
+    checkStatus: 0,
+    checkReportStatus: 0,
+    checkResult: 0,
+  };
+};
+//查询
+const handleSearch = () => {
+  proTable.value?.getTableList();
+};
+//重置
+const handleRefresh = () => {
+  proTable.value?.getTableList();
+};
 // 表格拖拽排序
 const sortTable = ({
   newIndex,
@@ -386,7 +450,7 @@ onMounted(() => {
   height: calc(100vh - 130px);
 }
 ::v-deep .el-select {
-  width: 180px !important;
+  width: 150px !important;
 }
 
 .el-form {