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

- ListTableContent Action sütunu eklendi.

Browse Source 
- DialogStore id elle girilebilecek
This commit is contained in:
Kevser
2025-07-22 08:03:30 +03:00
parent ae583a7dc5
commit d6deb5ab09
8 changed files with 283 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
<div class="table-head-content">Sıra No</div>
</th>
<template v-for="(headCell, h) in tableHeader">
<th :style="headCell.style || ''">
<th :style="[headCell.style || '']">
<div
:class="[
'table-head-content',
@ -47,13 +47,16 @@
</div>
</th>
</template>
<th
:style="[rowActionStyle || '']"
v-if="rowActions !== undefined && rowActions.length > 0">
<div class="table-head-content">İşlemler</div>
</th>
</tr>
</thead>
<tbody>
<tr v-if="tableData.length === 0 && !isPreview">
<td :colspan="rowNumber ? tableHeader.length + 1 : tableHeader.length">
Veri bulunamadı
</td>
<td :colspan="ColSpan">Veri bulunamadı</td>
</tr>
<tr
v-else
@ -87,6 +90,25 @@
<td v-else v-html="dataCell.computeHtml(dataRow)"></td>
</template>
</slot>
<td
v-if="rowActions !== undefined && rowActions.length > 0"
:class="[actionFixed ? 'action-fixed' : '']">
<template v-for="(action, ai) in rowActions">
<button
:class="[
'button-c button-icon button-export',
action.class !== undefined ? 'back-grad back-grad-' + action.class : ''
]"
@click="LocalRowDataAction($event, action.action, dataRow, i)">
<i class="ico-c" v-if="action.icon !== undefined">
<svg>
<use :href="icourl + '#' + action.icon"></use>
</svg>
</i>
<span class="panel-date">{{ action.text }}</span>
</button>
</template>
</td>
</tr>
<template
v-if="
@ -120,6 +142,7 @@
import { ref, reactive, computed, watch } from 'vue'
import type { Ref } from 'vue'
import { useGlobalStore } from '@/stores/globalStore'
import icourl from '@/assets/images/icons.svg'
const globalStore = useGlobalStore()
interface ITableHead {
@ -150,11 +173,15 @@
rowNumber?: boolean
totalValues?: Record<string, any>
isPreview?: boolean
rowActions?: Record<string, any>[]
actionFixed?: boolean
rowActionStyle?: string
}
const props = withDefaults(defineProps<Props>(), {
tableData: () => [],
rowNumber: false,
isPreview: false
isPreview: false,
actionFixed: false
})
const emit = defineEmits(['update:sortData', 'update:pagination'])
@ -186,9 +213,27 @@
}
})
const ColSpan = computed<number>(() => {
var span = props.tableHeader.length
if (props.rowNumber) span++
if (props.rowActions) span++
return span
})
const LocalRowAction = (d: Record<string, any>) => {
if (props.rowAction !== undefined) {
(props.rowAction! as Function)(d)
;(props.rowAction! as Function)(d)
}
}
const LocalRowDataAction = (
e: Event,
action: Function | undefined,
dataRow: Record<string, any>,
i: number | string
) => {
if (action !== undefined) {
e.stopImmediatePropagation()
action(dataRow, i)
}
}
@ -223,3 +268,11 @@
{ deep: true }
)
</script>
<style scoped>
.action-fixed {
position: absolute;
z-index: 9;
top: 0;
right: 0;
}
</style>

2
src/components/global/DialogItem.vue
View File

@ -42,7 +42,7 @@
const dialogStore = useDialogStore()
export interface Props {
id: number
id: number | string
dialogData: Record<string, any>
}
const props = withDefaults(defineProps<Props>(), {})

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

@ -117,7 +117,10 @@
v-model:pagination="localPagination"
:rowNumber="rowNumber"
:totalValues="localTotalValues"
:isPreview="isPreview" />
:isPreview="isPreview"
:rowActions="rowActions"
:actionFixed="actionFixed"
:rowActionStyle="rowActionStyle" />
</slot>
</div>
@ -194,6 +197,9 @@
rowNumber?: boolean
totalValues?: Record<string, any>
isPreview?: boolean
rowActions?: Record<string, any>[]
actionFixed?: boolean
rowActionStyle?:string
}
const props = withDefaults(defineProps<Props>(), {
@ -205,7 +211,8 @@
export: true,
search: true,
rowNumber: false,
isPreview: false
isPreview: false,
actionFixed:false
})
const emit = defineEmits([

10
src/components/global/dialogStore.ts
View File

@ -7,11 +7,13 @@ export const useDialogStore = defineStore('dialogStore', () => {
const CreateDialog = (data: Record<string, any>) => {
const rnd: number = Number(Math.floor(Math.random() * 10000000000))
dialogs[rnd] = {} as Record<string, any>
dialogs[rnd].id = rnd
dialogs[rnd].data = data
const localId = data.id || rnd
dialogs[localId] = {} as Record<string, any>
dialogs[localId].id = localId
dialogs[localId].data = data
}
const CloseDialog = (id: number) => {
const CloseDialog = (id: number | string) => {
delete dialogs[id]
}
return {

3
src/init/axios-init.ts
View File

@ -2,7 +2,8 @@ import axios from 'axios'
import { useUsersStore } from '@/stores/usersStore'
import router from '@/router'
axios.defaults.baseURL = 'https://panelapi.cekilisevi.gov.tr/'
//axios.defaults.baseURL = 'https://panelapi.cekilisevi.gov.tr/'
axios.defaults.baseURL = 'https://mpiapi.beyaz.net/'
//axios.defaults.timeout = 2000;
axios.defaults.headers['Content-Type'] = 'application/json; charset=utf-8'
import { useDataStore } from '@/stores/dataStore'

122
src/module/site-yonetimi/views/PopupListe.vue
View File

@ -1,65 +1,56 @@
<template>
<AdminLayout>
<Breadcrumb currentPageText='Popup Listesi' />
<section class='section-list'>
<Breadcrumb currentPageText="Popup Listesi" />
<section class="section-list">
<list-table-content
:tableHeader='tableHeader'
:rowAction='updateAction'
:addAction='addAction'
icon='sitemanagement'
title='Popup Listesi'
listText='Popup'
:tableData='popups'
apiText='Popup Listesi'
apiList='Popup'
:tableHeader="tableHeader"
:rowAction="updateAction"
:addAction="addAction"
icon="sitemanagement"
title="Popup Listesi"
listText="Popup"
:tableData="popups"
apiText="Popup Listesi"
apiList="Popup"
v-model:refresh="refresh"
/>
:rowActions="rowActions"
:rowActionStyle="'width:10%;'" />
</section>
<panel-wrapper
v-if='panel'
v-model='panel'
:panel-title="
isUpdate
? 'Popup Düzenle'
: 'Popup Ekle'
">
v-if="panel"
v-model="panel"
:panel-title="isUpdate ? 'Popup Düzenle' : 'Popup Ekle'">
<template #panelContent>
<form-input
v-model='panelPopup.baslik'
label='Başlık' />
<form-input
v-model='panelPopup.url'
label='Url' />
<form-input v-model="panelPopup.baslik" label="Başlık" />
<form-input v-model="panelPopup.url" label="Url" />
<form-file
v-model='panelPopup.resimUrl'
label='Resim Url'
:fileTypes="['png','jpg','jpeg']"
elclass='panel-documents-item'
fileType='img' />
<div class='image-preview-wrapper' v-if='resimPreview'>
<img :src='resimPreview' alt='Seçilen Resim' />
v-model="panelPopup.resimUrl"
label="Resim Url"
:fileTypes="['png', 'jpg', 'jpeg']"
elclass="panel-documents-item"
fileType="img" />
<div class="image-preview-wrapper" v-if="resimPreview">
<img :src="resimPreview" alt="Seçilen Resim" />
</div>
<form-checkbox
:listData="Checker"
listText="label"
listVal="val"
v-model="panelPopup.durum" >
v-model="panelPopup.durum">
<template #checktext0>
<span>
Aktif
</span>
<span>Aktif</span>
</template>
</form-checkbox>
</template>
<template #footerButton>
<div class='button-c button-save' @click='save'>
<div class="button-c button-save" @click="save">
{{ isUpdate ? 'Kaydet' : 'Ekle' }}
</div>
</template>
</panel-wrapper>
</AdminLayout>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import AdminLayout from '@/layouts/AdminLayout.vue'
import { Breadcrumb } from '@/components/global'
@ -68,6 +59,8 @@
import PanelWrapper from '@/components/PanelWrapper.vue'
import { useGlobalStore } from '@/stores/globalStore'
const globalStore = useGlobalStore()
import { useDialogStore } from '@/components/global/dialogStore'
const dialogStore = useDialogStore()
const Checker = ref([
{
@ -80,8 +73,8 @@
const isUpdate = ref<boolean>(false)
const refresh = ref<boolean>(false)
const panelPopup = ref<Record<string,any>>({})
const popups = ref<Record<string,any>[]>([])
const panelPopup = ref<Record<string, any>>({})
const popups = ref<Record<string, any>[]>([])
const tableHeader = ref<Record<string, any>[]>([
{
@ -116,6 +109,40 @@
}
}
])
const DeleteRowPop = (data: Record<string, any>, i: number) => {
dialogStore.CreateDialog({
title: 'Popup Sil',
id: 'deletepop',
content: 'Popup silmek istediğinize emin misiniz?',
closeText: 'Vazgeç',
buttons: [
{
label: 'Popup Sil',
type: 'alert',
function: DeleteRow(data.id)
}
]
})
}
const DeleteRow = async (id: number | string) => {
var dt = await dataStore.dataDelete('Katilimci/DeleteCekilisKatilimci/' + id)
if (dt !== 'errorfalse') {
dialogStore.CloseDialog('deletepop')
refresh.value = true
}
}
const rowActions = ref<Record<string, any>[]>([
{
text: 'Sil',
class: 'alert',
action: DeleteRowPop
}
])
const resimPreview = computed(() => {
if (!panelPopup.value.resimUrl) return null
@ -127,7 +154,6 @@
return URL.createObjectURL(panelPopup.value.resimUrl)
})
const OpenMenu = (row: any) => {
router.push('slider-yonetimi/' + row.id)
}
@ -136,21 +162,19 @@
panelPopup.value = {
baslik: '',
resimUrl: '',
url:'',
url: '',
durum: false
}
panel.value = true
}
const updateAction = (row: any) => {
panelPopup.value = popups.value.find(x => x.id == row.id) || {}
panelPopup.value = popups.value.find((x) => x.id == row.id) || {}
panel.value = true
isUpdate.value = true
}
const save = async () => {
if (isUpdate.value)
{
if (isUpdate.value) {
const formData = new FormData()
formData.append('Baslik', panelPopup.value.baslik)
formData.append('Durum', panelPopup.value.durum)
@ -158,7 +182,7 @@
formData.append('ResimUrl', panelPopup.value.resimUrl)
}
let update:any = dataStore.dataPut('Popup/'+panelPopup.value.id,{
let update: any = dataStore.dataPut('Popup/' + panelPopup.value.id, {
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
})
@ -167,8 +191,7 @@
isUpdate.value = false
refresh.value = true
}
}
else {
} else {
let add = await dataStore.dataPost('Popup', {
data: panelPopup.value,
headers: { 'Content-Type': 'multipart/form-data' }
@ -179,7 +202,6 @@
refresh.value = true
}
}
}
</script>
<style>

48
src/module/site-yonetimi/views/SayfaListesi.vue
View File

@ -10,24 +10,64 @@
listText="Sayfa"
addRoute="yeni-sayfa"
apiList="Page"
apiText="Sayfa Listesi" />
apiText="Sayfa Listesi"
:refresh="refresh"
:rowActions="rowActions"
:rowActionStyle="'width:10%;'" />
</section>
</AdminLayout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import AdminLayout from '@/layouts/AdminLayout.vue'
import { useGlobalStore } from '@/stores/globalStore'
const globalStore = useGlobalStore()
import { useDialogStore } from '@/components/global/dialogStore'
const dialogStore = useDialogStore()
import { useDataStore } from '@/stores/dataStore'
const dataStore = useDataStore()
import router from '@/router'
const tableHeader = ref<Record<string,any>[]>([
const tableHeader = ref<Record<string, any>[]>([
{
name: 'title',
title: 'Sayfa Başlığı',
sort: true
}
])
const refresh = ref<boolean>(false)
const DeleteRowPop = (data: Record<string, any>, i: number) => {
dialogStore.CreateDialog({
title: 'Slider Sil',
id: 'deleteslider',
content: 'Slider silmek istediğinize emin misiniz?',
closeText: 'Vazgeç',
buttons: [
{
label: 'Slider Sil',
type: 'alert',
function: DeleteRow(data.id)
}
]
})
}
const DeleteRow = async (id: number | string) => {
var dt = await dataStore.dataDelete('Katilimci/DeleteCekilisKatilimci/' + id)
if (dt !== 'errorfalse') {
dialogStore.CloseDialog('deleteslider')
refresh.value = true
}
}
const rowActions = ref<Record<string, any>[]>([
{
text: 'Sil',
class: 'alert',
action: DeleteRowPop
}
])
const pageDetail = (row: any) => {
router.push('/sayfalar/detay/' + row.id)
}

122
src/module/site-yonetimi/views/SliderListe.vue
View File

@ -1,73 +1,63 @@
<template>
<AdminLayout>
<Breadcrumb currentPageText='Slider Listesi' />
<section class='section-list'>
<Breadcrumb currentPageText="Slider Listesi" />
<section class="section-list">
<list-table-content
:tableHeader='tableHeader'
:rowAction='updateAction'
:addAction='addAction'
icon='sitemanagement'
title='Slider Listesi'
listText='Slider'
:tableData='sliders'
apiText='Slider Listesi'
apiList='Slider'
v-model:refresh='refresh'
/>
:tableHeader="tableHeader"
:rowAction="updateAction"
:addAction="addAction"
icon="sitemanagement"
title="Slider Listesi"
listText="Slider"
:tableData="sliders"
apiText="Slider Listesi"
apiList="Slider"
v-model:refresh="refresh"
:rowActions="rowActions"
:rowActionStyle="'width:10%;'" />
</section>
<panel-wrapper
v-if='panel'
v-model='panel'
:panel-title="
isUpdate
? 'Slider Düzenle'
: 'Slider Ekle'
">
v-if="panel"
v-model="panel"
:panel-title="isUpdate ? 'Slider Düzenle' : 'Slider Ekle'">
<template #panelContent>
<form-input
required
v-model='panelSlider.baslik'
label='Başlık' />
<form-input required v-model="panelSlider.baslik" label="Başlık" />
<form-file
v-model='panelSlider.resimUrl'
label='Resim Url'
:fileTypes="['png','jpg','jpeg']"
elclass='panel-documents-item'
fileType='img' />
<div class='image-preview-wrapper' v-if='resimPreview'>
<img :src='resimPreview' alt='Seçilen Resim' />
v-model="panelSlider.resimUrl"
label="Resim Url"
:fileTypes="['png', 'jpg', 'jpeg']"
elclass="panel-documents-item"
fileType="img" />
<div class="image-preview-wrapper" v-if="resimPreview">
<img :src="resimPreview" alt="Seçilen Resim" />
</div>
<form-input
required
v-model='panelSlider.url'
label='Url' />
<form-input
required
v-model='panelSlider.sira'
label='Sıra' />
<form-input required v-model="panelSlider.url" label="Url" />
<form-input required v-model="panelSlider.sira" label="Sıra" />
</template>
<template #footerButton>
<div class='button-c button-save' @click='save'>
<div class="button-c button-save" @click="save">
{{ isUpdate ? 'Kaydet' : 'Ekle' }}
</div>
</template>
</panel-wrapper>
</AdminLayout>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import AdminLayout from '@/layouts/AdminLayout.vue'
import { Breadcrumb } from '@/components/global'
import router from '@/router'
import { useDataStore } from '@/stores/dataStore'
import PanelWrapper from '@/components/PanelWrapper.vue'
import { useDialogStore } from '@/components/global/dialogStore'
const dialogStore = useDialogStore()
const dataStore = useDataStore()
const panel = ref<boolean>(false)
const isUpdate = ref<boolean>(false)
const refresh = ref<boolean>(false)
const panelSlider = ref<Record<string,any>>({})
const sliders = ref<Record<string,any>[]>([])
const panelSlider = ref<Record<string, any>>({})
const sliders = ref<Record<string, any>[]>([])
const tableHeader = ref<Record<string, any>[]>([
{
@ -91,6 +81,40 @@
sort: true
}
])
const DeleteRowPop = (data: Record<string, any>, i: number) => {
dialogStore.CreateDialog({
title: 'Slider Sil',
id: 'deleteslider',
content: 'Slider silmek istediğinize emin misiniz?',
closeText: 'Vazgeç',
buttons: [
{
label: 'Slider Sil',
type: 'alert',
function: DeleteRow(data.id)
}
]
})
}
const DeleteRow = async (id: number | string) => {
var dt = await dataStore.dataDelete('Katilimci/DeleteCekilisKatilimci/' + id)
if (dt !== 'errorfalse') {
dialogStore.CloseDialog('deleteslider')
refresh.value = true
}
}
const rowActions = ref<Record<string, any>[]>([
{
text: 'Sil',
class: 'alert',
action: DeleteRowPop
}
])
const resimPreview = computed(() => {
if (!panelSlider.value.resimUrl) return null
@ -114,10 +138,9 @@
sira: 1
}
panel.value = true
}
const updateAction = (row: any) => {
panelSlider.value = sliders.value.find(x => x.id == row.id) || {}
panelSlider.value = sliders.value.find((x) => x.id == row.id) || {}
panel.value = true
isUpdate.value = true
}
@ -130,8 +153,7 @@
}
const save = async () => {
if (isUpdate.value)
{
if (isUpdate.value) {
const formData = new FormData()
formData.append('Baslik', panelSlider.value.baslik)
formData.append('Url', panelSlider.value.url)
@ -140,7 +162,7 @@
formData.append('ResimUrl', panelSlider.value.resimUrl)
}
let update:any = dataStore.dataPut('Slider/'+panelSlider.value.id,{
let update: any = dataStore.dataPut('Slider/' + panelSlider.value.id, {
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
})
@ -149,8 +171,7 @@
isUpdate.value = false
refresh.value = true
}
}
else {
} else {
let add = await dataStore.dataPost('Slider/CreateSlider', {
data: panelSlider.value,
headers: { 'Content-Type': 'multipart/form-data' }
@ -161,7 +182,6 @@
refresh.value = true
}
}
}
onMounted(() => {