feat:

优化逻辑

src/page/main/ticket/business-ticket-manage/detail/index.vue

@@ -46,6 +46,34 @@
       </div>
       <gap-title :hasLine="true" title="实例工单"></gap-title>
       <div>
+        <div class="filter_list">
+          <div class="filter_item">
+            <span class="filter_title">工单等级</span>
+            <el-select v-model="filter.order_level" @change="filterAction" placeholder="请选择" style="width: 160px">
+              <el-option
+                v-for="(item, index) in ticketLevelOptions"
+                :key="'order_level_options' + index"
+                :label="item"
+                :value="index">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="filter_item">
+            <span class="filter_title">状态</span>
+            <el-select v-model="filter.order_state" @change="filterAction" placeholder="请选择" style="width: 160px">
+              <el-option
+                v-for="(item, index) in statusOptions"
+                :key="'order_state_options' + index"
+                :label="item"
+                :value="index">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </div>
         <bg-table
           ref="ticket_table"
           :headers="ticketHeaders"
@@ -90,7 +118,7 @@
 </template>
 
 <script setup>
-import { onBeforeMount, ref } from "vue";
+import { nextTick, onBeforeMount, reactive, ref } from "vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
 import Info from "@/components/warn-detail/info.vue";
 import gapTitle from "@/components/gap-title.vue";
@@ -103,8 +131,8 @@ import { dateStringToDate } from "@/components/env";
 const route = useRoute();
 const { id } = route.query;
 const router = useRouter();
-const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
-const statusOptions = ["", "待处置", "已完成", "已关闭"];
+const ticketLevelOptions = ["全部", "紧急任务", "重要任务", "一般任务"];
+const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
 const timeStateOptions = ["禁用", "启用"];
 const weekDayOptions = {
   1: "周一",
@@ -115,6 +143,10 @@ const weekDayOptions = {
   6: "周六",
   7: "周日",
 };
+const filter = reactive({
+  order_level: 0,
+  order_state: 0,
+});
 const labelData = [
   [
     {
@@ -293,8 +325,18 @@ const changePage = (p) => {
   page.value = p;
   getOrderLists();
 };
+const filterAction = async () => {
+  await nextTick();
+  getOrderLists();
+};
+const filterClear = () => {
+  filter.order_level = 0;
+  filter.order_state = 0;
+  getOrderLists();
+};
 const getOrderLists = () => {
   const params = {
+    ...filter,
     id,
     page: page.value,
     page_size: page_size.value,
@@ -368,6 +410,18 @@ onBeforeMount(() => {
       display: flex;
       align-items: center;
     }
+    .filter_list {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 16px;
+      .filter_item {
+        margin-bottom: 0;
+      }
+      .filter_title {
+        width: auto;
+      }
+    }
   }
 }
 </style>