决策信息查询修改

src/pages/DecisionInfoManage.vue

@@ -27,13 +27,51 @@
         </q-td>
       </template>
       <template v-slot:top-right>
-        <q-btn
-          class="q-mr-md"
-          color="primary"
-          label="查询"
-          @click="openSearchDialog"
-        />
-        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+        <q-form ref="myForm" @submit="searchDecisionInfo" style="width: 100%">
+          <div class="q-gutter-md q-mt-none row justify-center items-start">
+            <q-select
+              dense
+              v-model="filter.lineId"
+              :options="searchOptionsLineId"
+              emit-value
+              map-options
+              options-dense
+              label="线路ID"
+              style="width: 75px"
+              no-error-icon
+              lazy-rules
+              :rules="[(val) => val >= 0 || '请选择线路ID！']"
+            />
+            <q-select
+              dense
+              outlined
+              label="线路类型"
+              v-model="filter.lineType"
+              :options="searchOptionsLineType"
+              style="width: 100px"
+            />
+            <q-select
+              dense
+              outlined
+              label="故障类型"
+              v-model="filter.alertType"
+              :options="searchOptionsAlertType"
+              style="width: 130px"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="filter.areaConfigName"
+              label="区域名称"
+            ></q-input>
+            <q-btn color="primary" label="查询" type="submit" />
+            <q-btn
+              color="primary"
+              label="新建"
+              @click="createFormShow = true"
+            />
+          </div>
+        </q-form>
       </template>
 
       <template v-slot:body-cell-operations="props">
@@ -134,38 +172,6 @@
         </q-form>
       </q-card>
     </q-dialog>
-
-    <q-dialog
-      v-model="searchDialog"
-      persistent
-      transition-show="scale"
-      transition-hide="scale"
-    >
-      <q-card style="width: 300px">
-        <q-card-section>
-          <div class="text-h6">查询决策信息</div>
-        </q-card-section>
-        <q-card-section>
-          <q-select
-            outlined
-            label="故障类型"
-            v-model="filter.alertType"
-            :options="optionsAlertType"
-            class="q-mb-md"
-          />
-          <q-input
-            outlined
-            v-model="filter.areaConfigName"
-            label="区域名称"
-          ></q-input>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn color="primary" label="确定" @click="searchDecisionInfo()" />
-          <q-btn label="取消" v-close-popup />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </div>
 </template>
 
@@ -287,16 +293,42 @@ const pagination = ref({
   rowsNumber: 10,
 });
 
+const filter = ref({
+  alertType: '全部',
+  areaConfigName: '',
+  lineId: 0,
+  lineType: '全部',
+});
+
 const onRequest: QTable['onRequest'] = async (props) => {
   const { page, rowsPerPage, sortBy, descending } = props.pagination;
   loading.value = true;
   try {
-    let response = await alarmInfoPageQuery({
+    const params = {
       current: page,
       size: rowsPerPage,
-      alertType: (saveAlertTypeData as never)[filter.value.alertType],
-      areaConfigName: filter.value.areaConfigName,
-    });
+    };
+    if (filter.value.lineId !== 0) {
+      Object.assign(params, {
+        lineId: filter.value.lineId,
+      });
+    }
+    if (filter.value.lineType !== '全部') {
+      Object.assign(params, {
+        lineType: filter.value.lineType,
+      });
+    }
+    if (filter.value.alertType !== '全部') {
+      Object.assign(params, {
+        alertType: (saveAlertTypeData as never)[filter.value.alertType],
+      });
+    }
+    if (filter.value.areaConfigName) {
+      Object.assign(params, {
+        areaConfigName: filter.value.areaConfigName,
+      });
+    }
+    let response = await alarmInfoPageQuery(params);
     const pageData = response;
     pagination.value.rowsNumber = pageData.total;
     pagination.value.page = page;
@@ -321,17 +353,7 @@ onMounted(() => {
   });
 });
 
-const searchDialog = ref(false);
-const filter = ref({
-  alertType: '',
-  areaConfigName: '',
-});
-function openSearchDialog() {
-  filter.value = { alertType: '', areaConfigName: '' };
-  searchDialog.value = true;
-}
 function searchDecisionInfo() {
-  searchDialog.value = false;
   tableRef.value.requestServerInteraction();
 }
 
@@ -349,6 +371,9 @@ const creatForm = reactive({
 });
 
 const optionsLineId = ref<{ label: string; value: number }[]>([]);
+const searchOptionsLineId = ref<{ label: string; value: number }[]>([
+  { label: '全部', value: 0 },
+]);
 async function queryLineInfo() {
   try {
     let response = await pageQuery({
@@ -357,6 +382,7 @@ async function queryLineInfo() {
     });
     response.records.forEach((info) => {
       optionsLineId.value.push({ label: info.name, value: info.lineId });
+      searchOptionsLineId.value.push({ label: info.name, value: info.lineId });
     });
   } catch (err) {
     const error = err as ApiError;
@@ -367,6 +393,7 @@ async function queryLineInfo() {
   }
 }
 const optionsLineType = ['NCC', 'OCC'];
+const searchOptionsLineType = ['全部', ...optionsLineType];
 const optionsAlertType = [
   '蓝显',
   '全线蓝显',
@@ -388,6 +415,7 @@ const optionsAlertType = [
   '联锁区橙光带',
   '联锁区失表',
 ];
+const searchOptionsAlertType = ['全部', ...optionsAlertType];
 let optionsLocationType = ref<string[]>([]);
 let optionsLocationList: AreaConfigItem[] = [];
 async function searchLocationType() {