feat: refs #8197 working rightMenu

src/components/VnTable/VnTableFilter.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnFilter from 'components/VnTable/VnFilter.vue';
@@ -22,7 +21,6 @@ defineProps({
     },
 });
 const { t } = useI18n();
-const stateStore = useStateStore();
 
 const tableFilterRef = ref([]);
 
@@ -34,13 +32,7 @@ function columnName(col) {
 }
 </script>
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
-        <QScrollArea class="fit">
-            <VnFilterPanel
-                v-bind="$attrs"
-                :search-button="true"
-                :disable-submit-event="true"
-            >
         <template #body="{ params, orders }">
             <div
                 class="row no-wrap flex-center"
@@ -55,10 +47,7 @@ function columnName(col) {
                     :search-url="searchUrl"
                 />
                 <VnTableOrder
-                            v-if="
+                    v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
-                                col?.columnFilter !== false &&
-                                col?.name !== 'tableActions'
-                            "
                     v-model="orders[col.orderBy ?? col.name]"
                     :name="col.orderBy ?? col.name"
                     :data-key="$attrs['data-key']"
@@ -80,6 +69,4 @@ function columnName(col) {
             </div>
         </template>
     </VnFilterPanel>
-        </QScrollArea>
-    </QDrawer>
 </template>

src/components/common/VnCardMain.vue

@@ -1,6 +1,7 @@
 <script setup>
 import LeftMenu from '../LeftMenu.vue';
 import { useStateStore } from 'stores/useStateStore';
+import RightMenu from './RightMenu.vue';
 const stateStore = useStateStore();
 
 defineProps({
@@ -17,5 +18,9 @@ defineProps({
     </Teleport>
     <slot name="body" v-if="section == $route.name" />
     <RouterView v-else />
-    <slot name="rightPanel" />
+    <RightMenu>
+        <template #right-panel v-if="$slots['rightMenu']">
+            <slot name="rightMenu" />
+        </template>
+    </RightMenu>
 </template>

src/pages/Account/AccountList.vue

@@ -136,7 +136,7 @@ function exprBuilder(param, value) {
                 :right-search="false"
             />
         </template>
-        <template #rightPanel>
+        <template #rightMenu>
             <VnTableFilter :data-key="dataKey" :columns="columns" />
         </template>
     </VnCardMain>

src/pages/Account/Role/AccountRoles.vue

@@ -114,6 +114,7 @@ const exprBuilder = (param, value) => {
                 :columns="columns"
                 default-mode="table"
                 redirect="account/role"
+                :right-search="false"
             />
         </template>
     </VnCardMain>