Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/ListTools.vue
Show First 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | export const ListTable = { | ||||
ListFoot | ListFoot | ||||
}, | }, | ||||
props: { | props: { | ||||
current: { type: Object, default: () => null }, | current: { type: Object, default: () => null }, | ||||
list: { type: Array, default: () => [] }, | list: { type: Array, default: () => [] }, | ||||
setup: { type: Object, default: () => {} }, | setup: { type: Object, default: () => {} }, | ||||
}, | }, | ||||
methods: { | methods: { | ||||
content(column, item) { | |||||
if (column.contentLabel) { | |||||
return this.$t(column.contentLabel(item)) | |||||
} | |||||
if (column.content) { | |||||
return column.content(item) | |||||
} | |||||
return item[column.prop] | |||||
}, | |||||
label(label) { | label(label) { | ||||
let l = `${this.setup.prefix || this.setup.model}${label}` | let l = `${this.setup.prefix || this.setup.model}${label}` | ||||
return this.$te(l) ? l : `form${label}` | return this.$te(l) ? l : `form${label}` | ||||
}, | }, | ||||
url(item) { | url(item) { | ||||
return `/${this.setup.model}/${item.id}` | return `/${this.setup.model}/${item.id}` | ||||
} | } | ||||
}, | }, | ||||
template: | template: | ||||
`<table class="table table-sm table-hover"> | `<table class="table table-sm table-hover"> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th v-for="col in setup.cols" scope="col">{{ $t(col.label || label('.' + col.prop)) }}</th> | <th v-for="column in setup.columns" scope="col">{{ $t(column.label || label('.' + column.prop)) }}</th> | ||||
<th v-if="setup.buttons" scope="col"></th> | |||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="item in list" :key="item.id" @click="$root.clickRecord"> | <tr v-for="(item, index) in list" :key="item.id || index" :id="setup.model ? (setup.model + (item.id || index)) : null" @click="$root.clickRecord"> | ||||
<td v-for="col in setup.cols" :key="col.prop + item.id"> | <td v-for="column in setup.columns" :key="column.prop + (item.id || index)" :class="column.className"> | ||||
<svg-icon v-if="col.icon" :icon="col.icon" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon> | <svg-icon v-if="column.icon" :icon="column.icon" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon> | ||||
<span v-if="col.contentLabel" >{{ $t(col.contentLabel(item)) }}</span> | <router-link v-if="column.link && (!current || current.id != item.id)" :to="url(item)">{{ content(column, item) }}</router-link> | ||||
<router-link v-else-if="!current || current.id != item.id" :to="url(item)">{{ item[col.prop] }}</router-link> | <slot v-else-if="column.contentSlot" :name="column.contentSlot" v-bind:item="item"></slot> | ||||
<span v-else>{{ item[col.prop] }}</span> | <span v-else>{{ content(column, item) }}</span> | ||||
</td> | |||||
<td v-if="setup.buttons" class="buttons"> | |||||
<slot name="buttons" v-bind:item="item"></slot> | |||||
</td> | </td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
<list-foot :text="$t(label('.list-empty'))" :colspan="setup.cols.length"></list-foot> | <list-foot :text="$t(setup.footLabel || label('.list-empty'))" :colspan="setup.columns.length + (setup.buttons ? 1 : 0)"></list-foot> | ||||
</table>` | </table>` | ||||
} | } | ||||
export default { | export default { | ||||
components: { | components: { | ||||
ListFoot, | ListFoot, | ||||
ListMore, | ListMore, | ||||
ListSearch, | ListSearch, | ||||
▲ Show 20 Lines • Show All 56 Lines • Show Last 20 Lines |