src/components/FormModel.vue

@@ -131,7 +131,13 @@ onMounted(async () => {
 
     if (!$props.formInitialData) {
         if ($props.autoLoad && $props.url) await fetch();
-        else if (arrayData.store.data) updateAndEmit('onFetch', arrayData.store.data);
+        else if (arrayData.store.data)
+            updateAndEmit(
+                'onFetch',
+                Array.isArray(arrayData.store.data)
+                    ? arrayData.store.data[0]
+                    : arrayData.store.data
+            );
     }
     if ($props.observeFormChanges) {
         watch(
@@ -151,7 +157,10 @@ onMounted(async () => {
 if (!$props.url)
     watch(
         () => arrayData.store.data,
-        (val) => updateAndEmit('onFetch', val)
+        (val) => {
+            if (Array.isArray(val)) val = val[0] ?? {};
+            updateAndEmit('onFetch', val);
+        }
     );
 
 watch(

src/components/common/VnCard.vue

@@ -47,17 +47,15 @@ onBeforeMount(async () => {
     }
 });
 
-if (!props.idInWhere) {
+onBeforeRouteUpdate(async (to, from) => {
-    onBeforeRouteUpdate(async (to, from) => {
+    if (to.params.id !== from.params.id) {
-        if (to.params.id !== from.params.id) {
+        arrayData.store.url = !regex.test(props.url)
-            arrayData.store.url = !regex.test(props.url)
+            ? `${props.url}/${to.params.id}`
-                ? `${props.url}/${to.params.id}`
+            : props.url.replace(regex, `/${to.params.id}`);
-                : props.url.replace(regex, `/${to.params.id}`);
 
-            await arrayData.fetch({ append: false, updateRouter: false });
+        await arrayData.fetch({ append: false, updateRouter: false });
-        }
+    }
-    });
+});
-}
 </script>
 <template>
     <QDrawer

src/pages/Account/Role/AccountExprBuilder.js

@@ -0,0 +1,16 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'description':
+            return { [param]: { like: `%${value}%` } };
+    }
+};

src/pages/Account/Role/AccountRoles.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RoleSummary from './Card/RoleSummary.vue';
+import exprBuilder from './AccountExprBuilder.js';
 const route = useRoute();
 const { t } = useI18n();
 const $props = defineProps({
@@ -62,24 +63,7 @@ const columns = computed(() => [
         ],
     },
 ]);
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : {
-                      or: [
-                          { name: { like: `%${value}%` } },
-                          { nickname: { like: `%${value}%` } },
-                      ],
-                  };
-        case 'name':
-        case 'description':
-            return { [param]: { like: `%${value}%` } };
-    }
-};
 </script>
-
 <template>
     <VnSearchbar
         data-key="Roles"

src/pages/Account/Role/Card/RoleBasicData.vue

@@ -1,24 +1,16 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-const route = useRoute();
-const { t } = useI18n();
 </script>
 <template>
-    <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
+    <FormModel model="Role" auto-load>
         <template #form="{ data }">
             <VnRow>
-                <div class="col">
+                <VnInput v-model="data.name" :label="$t('globals.name')" />
-                    <VnInput v-model="data.name" :label="t('globals.name')" />
-                </div>
             </VnRow>
             <VnRow>
-                <div class="col">
+                <VnInput v-model="data.description" :label="$t('role.description')" />
-                    <VnInput v-model="data.description" :label="t('role.description')" />
-                </div>
             </VnRow>
         </template>
     </FormModel>

src/pages/Account/Role/Card/RoleCard.vue

@@ -1,20 +1,21 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
-
+import exprBuilder from '../AccountExprBuilder.js';
-const { t } = useI18n();
 </script>
 <template>
     <VnCard
+        url="VnRoles"
+        :id-in-where="true"
         data-key="Role"
         :descriptor="RoleDescriptor"
-        search-data-key="AccountRoles"
+        search-data-key="Roles"
         :searchbar-props="{
             url: 'VnRoles',
-            label: t('role.searchRoles'),
+            label: $t('role.searchRoles'),
-            info: t('role.searchInfo'),
+            info: $t('role.searchInfo'),
             searchUrl: 'table',
+            exprBuilder,
         }"
     />
 </template>

src/pages/Account/Role/Card/RoleDescriptor.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
@@ -26,11 +25,6 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
-const filter = {
-    where: { id: entityId },
-};
 const removeRole = async () => {
     try {
         await axios.delete(`VnRoles/${entityId.value}`);
@@ -43,13 +37,10 @@ const removeRole = async () => {
 
 <template>
     <CardDescriptor
-        :url="`VnRoles/${entityId}`"
+        url="VnRoles"
-        :filter="filter"
+        :filter="{ where: { id: entityId } }"
         module="Role"
-        @on-fetch="setData"
+        data-key="Role"
-        data-key="accountData"
-        :title="data.title"
-        :subtitle="data.subtitle"
         :summary="$props.summary"
     >
         <template #menu>

src/pages/Account/Role/Card/RoleSummary.vue

@@ -19,18 +19,15 @@ const $props = defineProps({
 const { store } = useArrayData('Role');
 const role = ref(store.data);
 const entityId = computed(() => $props.id || route.params.id);
-const filter = {
-    where: { id: entityId },
-};
 </script>
 
 <template>
     <CardSummary
         ref="summary"
-        :url="`VnRoles`"
+        url="VnRoles"
-        :filter="filter"
+        :filter="{ where: { id: entityId } }"
         @on-fetch="(data) => (role = data)"
-        data-key="RoleSummary"
+        data-key="Role"
     >
         <template #header> {{ role.id }} - {{ role.name }} </template>
         <template #body>