fix: refs #7197 rollback crudModel

src/components/CrudModel.vue

@@ -10,7 +10,6 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import SkeletonTable from 'components/ui/SkeletonTable.vue';
 import { tMobile } from 'src/composables/tMobile';
-import VnSubToolbar from './ui/VnSubToolbar.vue';
 
 const { push } = useRouter();
 const quasar = useQuasar();
@@ -68,7 +67,7 @@ const $props = defineProps({
         default: '',
         description: 'It is used for redirect on click "save and continue"',
     },
-    hasSubToolbar: {
+    hasSubtoolbar: {
         type: Boolean,
         default: true,
     },
@@ -80,6 +79,7 @@ const originalData = ref();
 const vnPaginateRef = ref();
 const formData = ref();
 const saveButtonRef = ref(null);
+const watchChanges = ref();
 const formUrl = computed(() => $props.url);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -94,6 +94,7 @@ defineExpose({
     saveChanges,
     getChanges,
     formData,
+    vnPaginateRef,
 });
 
 onBeforeRouteLeave((to, from, next) => {
@@ -115,19 +116,26 @@ async function fetch(data) {
         data.map((d) => (d.$index = $index++));
     }
 
-    originalData.value = data && JSON.parse(JSON.stringify(data));
-    formData.value = data && JSON.parse(JSON.stringify(data));
-    watch(formData, () => (hasChanges.value = true), { deep: true });
+    resetData(data);
 
     emit('onFetch', data);
     return data;
 }
 
+function resetData(data) {
+    if (!data) return;
+    originalData.value = JSON.parse(JSON.stringify(data));
+    formData.value = JSON.parse(JSON.stringify(data));
+
+    if (watchChanges.value) watchChanges.value(); //destoy watcher
+    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
+}
+
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
 }
-// eslint-disable-next-line vue/no-dupe-keys
+
 function filter(value, update, filterOptions) {
     update(
         () => {
@@ -153,7 +161,7 @@ async function onSubmit() {
     await saveChanges($props.saveFn ? formData.value : null);
 }
 
-async function onSubmitAndGo() {
+async function onSumbitAndGo() {
     await onSubmit();
     push({ path: $props.goTo });
 }
@@ -289,8 +297,9 @@ function isEmpty(obj) {
     if (obj.length > 0) return false;
 }
 
-async function reload() {
-    vnPaginateRef.value.fetch();
+async function reload(params) {
+    const data = await vnPaginateRef.value.fetch(params);
+    fetch(data);
 }
 
 watch(formUrl, async () => {
@@ -302,10 +311,11 @@ watch(formUrl, async () => {
     <VnPaginate
         :url="url"
         :limit="limit"
-        v-bind="$attrs"
         @on-fetch="fetch"
+        @on-change="resetData"
         :skeleton="false"
         ref="vnPaginateRef"
+        v-bind="$attrs"
     >
         <template #body v-if="formData">
             <slot
@@ -316,11 +326,8 @@ watch(formUrl, async () => {
             ></slot>
         </template>
     </VnPaginate>
-    <SkeletonTable
-        v-if="!formData && $attrs.autoLoad"
-        :columns="$attrs.columns?.length"
-    />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">
+    <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubtoolbar">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
             <QBtn
@@ -345,7 +352,7 @@ watch(formUrl, async () => {
             />
             <QBtnDropdown
                 v-if="$props.goTo && $props.defaultSave"
-                @click="onSubmitAndGo"
+                @click="onSumbitAndGo"
                 :label="tMobile('globals.saveAndContinue')"
                 :title="t('globals.saveAndContinue')"
                 :disable="!hasChanges"