conflict-nuxt-4/app/pages/index.vue

<template>
  <div>
    <Header
      :tabs="headerTabs"
      v-model:active-tab="activeTabKey"
      :is-sidebar-collapsed="isSidebarCollapsed"
      :unread-notifications="unreadNotifications"
      @tab-change="handleTabChange"
      :headerSchema="headerSchema"
    />

    <component
      :is="currentComponent"
      v-if="currentComponent"
      :activeTabKey="activeTabKey"
      :listConflicts="listConflicts"
      :conflictSelected="conflictSelected"
      :pagination="pagination"
      :conflict_id="conflictSelected?._id"
      @conflict-details="conflictDetails"
      @my-content-action="myContentAction"
      @my-header-tools-search="myHeaderToolsSearch"
      @my-header-tools-multiselect-click="myHeaderToolsMultiselectClick"
      
    />
  </div>
</template>

<script setup>
definePageMeta({
  name: "DashboardBasePage",
  layout: "dashboard-layout",
});
import { ref, onMounted } from "vue";
import tabBarData from "@/json/tab-bar/data-entry/dataEntry.json";
import { defineAsyncComponent } from "vue";
const route = useRoute();
const { $http: httpService } = useNuxtApp();

// State‌های Header
const isSidebarCollapsed = ref(false);
const unreadNotifications = ref(5);
const headerTabs = ref([]);
const listConflicts = ref([]);
headerTabs.value = tabBarData.tabs;
const activeTabKey = ref(tabBarData.tabs[0]?.key || "");
// const contentSchema = computed(() => ({
//   items: items.value,
// }));
const tabComponents = {
  MainList: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/MainList.vue"),
  ),
  RelationEdit: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/RelationEdit.vue"),
  ),
  RuleEdit: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/RuleEdit.vue"),
  ),
  // "DataEntryFarhangestan": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryFarhangestan.vue")),
  // "DataEntryMirbagheri": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryMirbagheri.vue")),
  // ...
};
const currentComponent = computed(() => {
  if (activeTabKey.value == "MainList") {
    return tabComponents.MainList;
  } else if (activeTabKey.value === "RelationEdit") {
    return tabComponents.RelationEdit;
  } else if (activeTabKey.value === "RuleEdit") {
    return tabComponents.RuleEdit;
  }
});
// تابع مدیریت تغییر تب
const handleTabChange = (tab) => {
  // منطق تغییر مسیر یا لود داده
  switch (tab.id) {
    case "dashboard":
      break;
    case "analytics":
      break;
    case "users":
      break;
    case "settings":
      break;
    default:
  }
};
const headerSchema = ref({});
const conflictSelected = ref({});
headerSchema.value = {
  breadcrumb: true,
  logo: false,
};
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
});
const getListConflict = async (textSearch = "", filterExtended = "") => {
  const offset = (pagination.value.page - 1) * pagination.value.limit;
  const limit = pagination.value.limit;

  let tabFilter = "";
  let mode_url = "elp";
  let index_key = "qaconflict";

  // if (props.activeTabKey === "mirbagheri") {
  //   tabFilter = "&f_au=استاد سید محمد مهدی میرباقری";
  //   mode_url = "elp_db";
  // } else if (props.activeTabKey === "monir") {
  //   tabFilter = "&f_au=سید منیر الدین حسینی الهاشمی(ره)";
  //   mode_url = "elp_db";
  // }
  // let allFilters = tabFilter + filterPanel.value;
  const request = utilGetSearchRequest(
    index_key,
    textSearch,
    "normal",
    mode_url,
    tabFilter,
    filterExtended,
    offset,
    limit,
  );

  request.payload_full["search_fields"] = [
    "branch",
    "title",
    "subtitle",
    "author",
  ];
  try {
    const res = await httpService.postRequest(
      request.url,
      request.payload_full,
    );
    // console.log("res", res);

    listConflicts.value = res.hits;
    pagination.value.total = res.hits.total.value;
    // reactiveSampleData.value.pagination = {
    //   total: res.hits.total.value,
    //   page: pagination.value.page,
    //   limit: pagination.value.limit,
    // };
  } catch (err) {
    console.error("خطا در دریافت داده:", err);
  }
};
function conflictDetails(event) {
  conflictSelected.value = event.item;
  activeTabKey.value = "RelationEdit";
  // console.log("event", event);
}
onMounted(() => {
  getListConflict();
  activeTabKey.value = headerTabs.value[0]?.id || "";
});

function myContentAction({ action, payload }) {
  // console.log("payload ==> ", payload);
  // console.log("action ==> ", action);
  if (action === "pagination") {
    const { page, limit } = payload;
    pagination.value.page = page;
    pagination.value.limit = limit;
    // console.log("pagination.value ==> ", pagination.value);

    getListConflict();
    return;
  }
}
function myHeaderToolsSearch(textSearch) {

  getListConflict(textSearch);
}
function myHeaderToolsMultiselectClick(textSearch) {
  console.log("dataqqqq ==> ", textSearch);
  
}
</script>