142 lines
6.0 KiB
Vue
142 lines
6.0 KiB
Vue
<template>
|
|
<div class="pb-8 px-0 sm:px-0 lg:px-0">
|
|
<div
|
|
class="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg"
|
|
>
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
scope="col"
|
|
:class="heading['class']"
|
|
>
|
|
{{ heading['title'] }}
|
|
</th>
|
|
|
|
<th
|
|
v-for="(action, index) in actions"
|
|
:key="index + headings.length"
|
|
scope="col"
|
|
class="relative py-3.5 pl-3 pr-4 sm:pr-6"
|
|
>
|
|
<span class="sr-only">{{ action }}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<tr v-if="data.length == 0">
|
|
<td>
|
|
<div class="py-3.5 pl-3 pr-4 sm:pr-6">
|
|
{{ noDataMessage }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
|
|
<td
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:class="heading['subClass']"
|
|
>
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['key'],
|
|
item[heading['key']]
|
|
)
|
|
: item[heading['key']]
|
|
}}
|
|
|
|
<dl
|
|
v-for="(hItem, hItemIndex) in heading[
|
|
'hiddenInfo'
|
|
]['dts']"
|
|
:key="hItemIndex"
|
|
:class="heading['hiddenInfo']['headClass']"
|
|
>
|
|
<dt
|
|
:class="
|
|
heading['hiddenInfo']['dts'][
|
|
hItemIndex
|
|
]['class']
|
|
"
|
|
>
|
|
{{
|
|
heading['hiddenInfo']['dts'][
|
|
hItemIndex
|
|
]['title']
|
|
}}
|
|
</dt>
|
|
<dd
|
|
:class="
|
|
heading['hiddenInfo']['dds'][
|
|
hItemIndex
|
|
]['class']
|
|
"
|
|
>
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['hiddenInfo']['dds'][
|
|
hItemIndex
|
|
]['key'],
|
|
item[
|
|
heading['hiddenInfo'][
|
|
'dds'
|
|
][hItemIndex]['key']
|
|
]
|
|
)
|
|
: item[
|
|
heading['hiddenInfo']['dds'][
|
|
hItemIndex
|
|
]['key']
|
|
]
|
|
}}
|
|
</dd>
|
|
</dl>
|
|
</td>
|
|
|
|
<td
|
|
class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<a
|
|
v-for="(action, index) in actions"
|
|
:key="index"
|
|
href="javascript:void(0)"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
@click="doAction(action, item[actionKey])"
|
|
>{{ action
|
|
}}<span class="sr-only"
|
|
>, {{ item['serial'] }}</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
headings: { type: Array<object>, required: true },
|
|
actions: { type: Array<string>, default: [] },
|
|
keys: { type: Array<string>, default: [] },
|
|
data: { type: Array<object>, required: true },
|
|
actionKey: { type: String, default: 'serial' },
|
|
columnFilter: {
|
|
type: Function,
|
|
default: (key: string, val: string) => val,
|
|
},
|
|
doAction: {
|
|
type: Function,
|
|
default: (key: string) => {
|
|
return key;
|
|
},
|
|
},
|
|
noDataMessage: { type: String, default: '검색된 데이터가 없습니다.' },
|
|
});
|
|
</script>
|