- ListTableContent Action sütunu eklendi.

- DialogStore id elle girilebilecek

src/components/global/DataTable.vue

@@ -7,12 +7,12 @@
             <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',
                   headCell.sort !== undefined && headCell.sort ? 'clickable' : ''
-                ]"                
+                ]"
                 @click="SortColumn(headCell)">
                 <span>{{ headCell.title }}</span>
                 <template
@@ -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>

src/components/global/DialogItem.vue

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

src/components/global/ListTableContent.vue

@@ -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([
@@ -360,7 +367,7 @@
     searchForm.value = false
     mobileButtons.value = !mobileButtons.value
   }
-  const OpenSearchForm = (e: Event) => {    
+  const OpenSearchForm = (e: Event) => {
     searchFieldPos.value = ''
     if (globalStore.screenWidth <= globalStore.breakPoints.tabletp) {
       mobileButtons.value = false

src/components/global/dialogStore.ts

@@ -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 {