12M_DotNet_Projects/2025_Vuejs_Mpi_Panel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

listelere ve tablar ileri-geri gidildiğinde kaldığı yere dönüyor.

Browse Source
This commit is contained in:
M. Bestami
2025-10-02 21:18:49 +03:00
parent cab06c51a2
commit 0e3c6e658f
31 changed files with 413 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/global/DataTable.vue
View File

@ -138,7 +138,8 @@
</div>
<data-table-pagination
v-if="pagination !== undefined && showPagination && !isPreview"
v-model:pagination="localPagination" />
v-model:pagination="localPagination"
:isUseRoute="isUseRoute" />
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
@ -146,6 +147,9 @@
import { useGlobalStore } from '@/stores/globalStore'
import icourl from '@/assets/images/icons.svg'
const globalStore = useGlobalStore()
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
interface ITableHead {
[key: string]: any
@ -178,12 +182,14 @@
rowActions?: Record<string, any>[]
actionFixed?: boolean
rowActionStyle?: string
isUseRoute?: boolean
}
const props = withDefaults(defineProps<Props>(), {
tableData: () => [],
rowNumber: false,
isPreview: false,
actionFixed: false
actionFixed: false,
isUseRoute: false
})
const emit = defineEmits(['update:sortData', 'update:pagination'])
@ -254,9 +260,19 @@
localSort.value.sortColumn = d.name
localSort.value.sortOrder = 'desc'
}
if (props.isUseRoute) {
router.push({
query: {
...route.query,
sortColumn: localSort.value.sortColumn,
sortOrder: localSort.value.sortOrder
}
})
}
emit('update:sortData', localSort.value)
}
}
const CellData = (d: Record<string, any>, key: string): any => {
if (d[key] === null) return d
else return d[key]

35
src/components/global/DataTablePagination.vue
View File

@ -29,10 +29,13 @@
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, onBeforeMount, watch } from 'vue'
import type { Ref } from 'vue'
import { useGlobalStore } from '@/stores/globalStore'
import { useValidationStore } from '@/stores/validationStore'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const globalStore = useGlobalStore()
const validationStore = useValidationStore()
@ -45,9 +48,11 @@
export interface Props {
pagination: IPagination
isUseRoute?: boolean
}
const props = withDefaults(defineProps<Props>(), {
isUseRoute: false
})
const emit = defineEmits(['update:pagination'])
@ -66,6 +71,14 @@
if (Number(pageNumber.value) < totalPage()) pageNumber.value++
}
localPagination.value.pageNumber = pageNumber.value
if (props.isUseRoute) {
router.push({
query: {
...route.query,
pageNumber: pageNumber.value
}
})
}
emit('update:pagination', localPagination.value)
}
@ -76,7 +89,7 @@
(e.target as HTMLInputElement).value = String(totalPage())
pageNumber.value = Number((e.target as HTMLInputElement).value)
if((e as KeyboardEvent).key === 'Enter') getPage()
if ((e as KeyboardEvent).key === 'Enter') getPage()
}
const PageNumberFocus = (e: Event) => {
;(e.target as HTMLInputElement).select()
@ -85,4 +98,22 @@
localPagination.value.pageNumber = pageNumber.value
emit('update:pagination', localPagination.value)
}
const SetPageNumber = () => {
if (props.isUseRoute) {
if (route.query.pageNumber !== undefined && route.query.pageNumber !== '') {
localPagination.value.pageNumber = pageNumber.value = Number(
route.query.pageNumber
)
}
}
}
onBeforeMount(() => {
SetPageNumber()
})
watch(
() => route.query.pageNumber,
() => {
SetPageNumber()
}
)
</script>

7
src/components/global/FormSelect.vue
View File

@ -142,7 +142,7 @@
multipleText: 'Tümü'
})
const emit = defineEmits(['update:modelValue', 'change','clear'])
const emit = defineEmits(['update:modelValue', 'change', 'clear'])
const activated = ref<Boolean>(false)
const multipleAllSelected = ref<boolean>(false)
@ -214,9 +214,8 @@
} else {
let text = props.listData.filter((v: Record<string, any>) => {
let val = props.listVal !== undefined ? v[props.listVal] : v
return localValue.value === val
return String(localValue.value) === String(val)
})[0]
return text !== undefined
? props.listText !== undefined
? text[props.listText]
@ -357,7 +356,7 @@
const SetSelectedOption = () => {
selectedOption.value = props.listData.filter((v: Record<string, any>) => {
return v[props.listVal as string] === props.modelValue
return String(v[props.listVal as string]) === String(props.modelValue)
})[0]
}

218
src/components/global/ListTableContent.vue
View File

@ -120,13 +120,17 @@
:isPreview="isPreview"
:rowActions="rowActions"
:actionFixed="actionFixed"
:rowActionStyle="rowActionStyle" />
:rowActionStyle="rowActionStyle"
:isUseRoute="isUseRoute" />
</slot>
</div>
<panel-wrapper v-if="filterPanel" v-model="filterPanel" :panel-title="'Filtreleme'">
<template #panelContent>
<panel-filter :filterHead="tableHeader" v-model:filterParams="localFilterParams" />
<panel-filter
:filterHead="tableHeader"
v-model:filterParams="localFilterParams"
:isUseRoute="isUseRoute" />
</template>
<template #footerButton>
<div class="button-c button-save" @click="FilterData">Filtrele</div>
@ -140,8 +144,11 @@
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeMount, watch, computed } from 'vue'
import { ref, reactive, onBeforeMount, watch, computed, nextTick } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { useGlobalStore } from '@/stores/globalStore'
const globalStore = useGlobalStore()
@ -200,7 +207,8 @@
isPreview?: boolean
rowActions?: Record<string, any>[]
actionFixed?: boolean
rowActionStyle?:string
rowActionStyle?: string
isUseRoute?: boolean
}
const props = withDefaults(defineProps<Props>(), {
@ -213,7 +221,8 @@
search: true,
rowNumber: false,
isPreview: false,
actionFixed:false
actionFixed: false,
isUseRoute: false
})
const emit = defineEmits([
@ -238,6 +247,7 @@
const localPagination = ref<IPagination>({} as IPagination)
const localTotalValues = reactive<Record<string, any>>({})
const searchFieldPos = ref<string>('')
const localLoaded = ref<boolean>(false)
if (props.totalValues !== undefined) Object.assign(localTotalValues, props.totalValues)
@ -265,8 +275,26 @@
}
const FilterData = async () => {
Object.keys(filterParams).forEach((k) => {
delete filterParams[k]
})
Object.assign(filterParams, localFilterParams.value)
EqualObjects(filterParams, localFilterParams.value)
if (props.isUseRoute) {
Object.keys(route.query).forEach((k) => {
if (k.includes('Filters[')) delete route.query[k]
})
const q = {
query: {
...route.query
}
}
Object.keys(filterParams).forEach((f, k) => {
q.query['Filters[' + f + ']'] = filterParams[f].op + filterParams[f].val
})
router.push(q)
}
setTimeout(async () => {
await GetLocalData()
filterPanel.value = false
@ -289,6 +317,11 @@
const RemoveFilterKey = (k: string) => {
delete localFilterParams.value[k]
delete filterParams[k]
const query: Record<string, any> = { ...route.query }
Object.keys(query).forEach((q) => {
if (q.includes(k)) delete query[q]
})
router.push({ query: query })
GetLocalData()
}
const RemoveSearch = () => {
@ -296,13 +329,132 @@
searched.value = false
GetLocalData()
}
const pageNumberChanging = ref<boolean>(false)
const sortChanging = ref<boolean>(false)
const searchChanging = ref<boolean>(false)
const filterChanging = ref<boolean>(false)
const RoutePageControl = () => {
if (props.isUseRoute) {
const q = { ...route.query }
pageNumberChanging.value = true
if (q.pageNumber !== undefined && q.pageNumber !== '') {
localPagination.value.pageNumber = Number(q.pageNumber)
} else {
q.pageNumber = String(1)
localPagination.value.pageNumber = localPagination.value.pageNumber || 1
}
router.push({ query: q })
nextTick(() => {
pageNumberChanging.value = false
})
}
}
const RouteSortControl = () => {
if (props.isUseRoute) {
const q = { ...route.query }
sortChanging.value = true
if (q.sortOrder !== undefined && q.sortOrder !== null && q.sortOrder !== '') {
localSort.value.sortColumn = q.sortColumn as string
localSort.value.sortOrder = q.sortOrder as string
} else {
delete q.sortOrder
delete q.sortColumn
delete localSort.value.sortColumn
delete localSort.value.sortOrder
}
router.push({ query: q })
nextTick(() => {
sortChanging.value = false
})
}
}
const RouteSearchControl = () => {
if (props.isUseRoute) {
const q = { ...route.query }
searchChanging.value = true
if (
q.searchString !== undefined &&
q.searchString !== null &&
q.searchString !== ''
) {
localQuery.value = q.searchString as string
} else {
localQuery.value = ''
delete q.searchString
}
router.push({ query: q })
nextTick(() => {
searchChanging.value = false
})
}
}
const RouteFilterControl = () => {
if (props.isUseRoute) {
const q = { ...route.query }
localFilterParams.value = {}
Object.keys(filterParams).forEach((k) => {
delete filterParams[k]
})
filterChanging.value = true
if (Object.keys(route.query).length > 0) {
Object.keys(route.query).forEach((key) => {
if (key.includes('Filters[')) {
const newKey = key.match(/(?<=\[)[^\]]+(?=\])/)![0]
filterParams[newKey] = {}
localFilterParams.value[newKey] = {}
filterParams[newKey].op = (route.query[key]! as string).charAt(0)
localFilterParams.value[newKey].op = (route.query[key]! as string).charAt(0)
filterParams[newKey].val = (route.query[key]! as string).slice(1)
localFilterParams.value[newKey].val = (route.query[key]! as string).slice(1)
}
})
}
props.tableHeader.forEach((head: Record<string, any>) => {
if (head.filter !== undefined) {
Object.keys(filterParams).forEach((key) => {
if (
(head.filter.filterId !== undefined && key === head.filter.filterId) ||
key === head.name
) {
filterParams[key].title = head.title
localFilterParams.value[key].title = head.title
if (
head.filter.type === 'select' &&
head.filter.data !== undefined &&
head.filter.data.length > 0
) {
const forText = head.filter.data.find((o: Record<string, any>) => {
return String(o[head.filter.listVal]) === String(filterParams[key].val)
})
filterParams[key].text = forText[head.filter.listText]
localFilterParams.value[key].text = forText[head.filter.listText]
}
}
})
}
})
nextTick(() => {
filterChanging.value = false
})
}
}
const GetLocalData = async () => {
console.log("GetLocalData",selectedExport.value)
localLoaded.value = false
if (selectedExport.value !== null) {
let exportUrl = ''
let fileType = ''
let fileName = ''
// Export tipine göre URL ve dosya ayarları
if (selectedExport.value === 1) {
// PDF
@ -315,15 +467,13 @@
fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
fileName = 'export.xlsx'
}
console.log("dataStore",dataStore)
// Axios ile dosya indirme - interceptor otomatik olarak token ekleyecek
try {
const response = await axios.get(exportUrl, {
responseType: 'blob'
})
const blob = new Blob([response.data], { type: fileType })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
@ -392,6 +542,9 @@
}
emit('update:refresh', false)
}
nextTick(() => {
localLoaded.value = true
})
}
const OpenMobileButtons = () => {
searchForm.value = false
@ -422,6 +575,14 @@
const SearchQuery = () => {
if (props.apiList !== undefined) GetLocalData()
else emit('update:query', localQuery.value)
if (props.isUseRoute) {
router.push({
query: {
...route.query,
searchString: localQuery.value
}
})
}
searchForm.value = false
searched.value = true
}
@ -432,6 +593,10 @@
onBeforeMount(() => {
if (globalStore.screenWidth >= globalStore.breakPoints.tabletp)
mobileButtons.value = true
RoutePageControl()
RouteSortControl()
RouteSearchControl()
RouteFilterControl()
if (props.apiList !== undefined) GetLocalData()
@ -439,17 +604,37 @@
})
watch(
() => localSort.value,
() => [localSort.value],
() => {
if (!sortChanging.value) GetLocalData()
},
{ deep: true }
)
watch(
() => [route],
() => {
RoutePageControl()
RouteSortControl()
RouteSearchControl()
RouteFilterControl()
GetLocalData()
},
{ deep: true }
)
watch(
() => localPagination.value.pageNumber,
() => {
GetLocalData()
if (!pageNumberChanging.value) {
GetLocalData()
}
}
)
watch(
() => localPagination.value.pageNumber,
() => {
if (!pageNumberChanging.value) {
GetLocalData()
}
}
)
watch(
@ -461,8 +646,9 @@
watch(
() => localQuery.value,
() => {
if (props.apiList !== undefined && localQuery.value.length === 0) GetLocalData()
else if (localQuery.value.length === 0) emit('update:query', localQuery.value)
if (props.apiList !== undefined && localQuery.value.length === 0) {
if (!searchChanging.value) GetLocalData()
} else if (localQuery.value.length === 0) emit('update:query', localQuery.value)
}
)
watch(

9
src/components/global/PanelFilter.vue
View File

@ -49,7 +49,7 @@
:listVal="filter.filter.listVal"
:extraData="filter"
:label="filter.title"
v-model="localFilterData[filter.filter.filterId || filter.name]"
v-model="localFilterData[filter.filter.filterId || filter.name] as number"
@change="UpdateFilterSelect"
clearable />
</div>
@ -58,11 +58,15 @@
</template>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import { ref, reactive, onBeforeMount, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const props = defineProps<{
filterHead: Record<string, any>
filterParams: Record<string, any>
isUseRoute?: boolean
}>()
const emit = defineEmits(['update:filterParams'])
@ -117,6 +121,7 @@
}
emit('update:filterParams', localFilterParams)
}
onBeforeMount(() => {
createFilterData()
})

9
src/components/global/Tabs.vue
View File

@ -46,10 +46,10 @@
}
export interface Props {
tabList: TabObj[]
route?: boolean
isUseRoute?: boolean
}
const props = withDefaults(defineProps<Props>(), { route: false })
const props = withDefaults(defineProps<Props>(), { isUseRoute: false })
const currentTab = ref<number>(0)
const rnd = ref<number>(Math.ceil(Number(Math.random() * 1000000000)))
@ -84,7 +84,7 @@
} else {
currentTab.value = Number(d)
}
if (props.route) {
if (props.isUseRoute) {
router.push({
params: { ...route.params, tabid: props.tabList[currentTab.value].id }
})
@ -107,7 +107,7 @@
CalculateNavPosition()
}
const RouteTabControl = () => {
if (props.route) {
if (props.isUseRoute) {
if (route.params.tabid !== undefined && route.params.tabid !== '') {
currentTab.value = props.tabList.findIndex((t) => t.id === route.params.tabid)
}
@ -129,7 +129,6 @@
watch(
() => route.params.tabid,
(t) => {
console.log('---')
RouteTabControl()
},
{ immediate: true }