feat: 对列表数据进行勾选后，界面的状态切换与RP要求不符

src/views/final/comp/FilterModal.vue

@@ -8,6 +8,7 @@ import {
   reactive,
   ref,
   unref,
+  computed,
 } from "vue";
 import { NDataTable } from "naive-ui";
 import type { DataTableColumns, DataTableRowKey } from "naive-ui";
@@ -26,6 +27,7 @@ const emit = defineEmits<{
 }>();
 
 const show = ref(false);
+const checkedRowKeys = ref([]);
 
 const cardStyle = {
   width: "800px",
@@ -109,7 +111,7 @@ const pagination = reactive({
     },
   ],
   showQuickJumper: true,
-  prefix:()=>`共 ${total.value} 条数据`
+  prefix: () => `共 ${total.value} 条数据`,
 });
 const tableData = ref<Array<RowData>>([]);
 const keyword = ref("");
@@ -119,7 +121,7 @@ async function query(page: number, pageSize: number) {
     search_searchname: { value: keyword.value, op: "like", type: "string" },
   };
   const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
-  const { data, pageCount,total:totalCount } = result;
+  const { data, pageCount, total: totalCount } = result;
   total.value = totalCount;
   tableData.value = data;
   pagination.page = page;
@@ -283,6 +285,10 @@ const inputHandler = debounce((word) => {
   keyword.value = word;
   query(1, 5);
 }, 300);
+
+const showSearch = computed(() => {
+  return selectionIds.value.length > 0;
+});
 </script>
 
 <template>
@@ -307,7 +313,7 @@ const inputHandler = debounce((word) => {
               <span :style="{ 'margin-left': '18px' }">基本信息</span>
             </div>
           </div>
-          <div class="wrapper-form">
+          <div class="wrapper-form" v-if="!showSearch">
             <n-input
               :style="{ width: '360px', border: '1px solid #cad2dd' }"
               placeholder="请输入过滤条件名称搜索"
@@ -324,6 +330,21 @@ const inputHandler = debounce((word) => {
               </template>
             </n-button>
           </div>
+
+          <div class="wrapper-form" v-else>
+            <div class="del_btn">
+              <n-button icon-placement="left" size="medium">
+                <template #icon>
+                  <SvgIcon  name="delete-history" size="16" />
+                </template>
+                删除</n-button>
+            </div>
+            <div class="msg">
+              <span>已选中 <span style="color:#507afd;font-size:16px">{{ selectionIds.length }}</span> 项</span>
+              <a @click="selectionIds = []">清空</a>
+            </div>
+          </div>
+
           <div class="wrapper-table">
             <NDataTable
               ref="tableRef"
@@ -337,6 +358,7 @@ const inputHandler = debounce((word) => {
               @update:page="handlePageChange"
               @update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
+              :checked-row-keys="selectionIds"
             />
           </div>
         </div>
@@ -378,6 +400,16 @@ const inputHandler = debounce((word) => {
       width: 300px;
       border: 1px solid gray;
     }
+    .del_btn{
+
+    }
+    .msg{
+      a{
+        margin-left: 30px;
+        cursor: pointer;
+        color: #507afd;
+      }
+    }
   }
 
   &-table {

src/views/home/aside/comp/modals/FilterModal.vue

@@ -1,5 +1,14 @@
 <script lang="ts" setup>
-import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from "vue";
+import {
+  computed,
+  defineOptions,
+  h,
+  nextTick,
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+} from "vue";
 import { NDataTable } from "naive-ui";
 import type { DataTableColumns, DataTableRowKey } from "naive-ui";
 import type { SortableEvent } from "sortablejs";
@@ -111,7 +120,7 @@ async function query(page: number, pageSize: number) {
     search_searchname: { value: keyword.value, op: "like", type: "string" },
   };
   const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0);
-  const { data, pageCount, total:totalCount } = result;
+  const { data, pageCount, total: totalCount } = result;
   tableData.value = data;
   pagination.page = page;
   total.value = totalCount;
@@ -265,6 +274,7 @@ defineExpose({
   showModal,
 });
 
+
 const inputHandler = debounce((word) => {
   keyword.value = word;
   query(1, 5);
@@ -317,6 +327,7 @@ const inputHandler = debounce((word) => {
               </template>
             </n-button>
           </div>
+
           <div class="wrapper-table">
             <NDataTable
               ref="tableRef"
@@ -331,6 +342,7 @@ const inputHandler = debounce((word) => {
               @update:page="handlePageChange"
               @update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
+
             />
           </div>
         </div>