111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
|
<ListView
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:options="{
|
|
selectable: options.selectable || false,
|
|
onRowClick: row => (options.onRowClick ? options.onRowClick(row) : {}),
|
|
getRowRoute: options.route ? getRowRoute : null
|
|
}"
|
|
row-key="name"
|
|
@update:selections="e => this.$emit('update:selections', e)"
|
|
>
|
|
<ListHeader>
|
|
<template v-for="column in columns" :key="column.field">
|
|
<ListHeaderItem :item="column">
|
|
<template #prefix>
|
|
<FeatherIcon
|
|
v-if="column.icon"
|
|
:name="column.icon"
|
|
class="h-4 w-4"
|
|
/>
|
|
</template>
|
|
</ListHeaderItem>
|
|
</template>
|
|
</ListHeader>
|
|
<ListRows>
|
|
<div
|
|
v-if="rows.length === 0"
|
|
class="text-center text-sm leading-10 text-gray-500"
|
|
>
|
|
未找到结果
|
|
</div>
|
|
<ListRow v-for="(row, i) in rows" :row="row" :key="row.name">
|
|
<template v-slot="{ column, item }">
|
|
<ObjectListCell
|
|
:row="row"
|
|
:column="column"
|
|
:idx="i"
|
|
:context="context"
|
|
/>
|
|
</template>
|
|
</ListRow>
|
|
</ListRows>
|
|
</ListView>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ListHeader,
|
|
ListView,
|
|
ListHeaderItem,
|
|
ListRow,
|
|
ListSelectBanner
|
|
} from 'jingrow-ui';
|
|
import ObjectListCell from './ObjectListCell.vue';
|
|
|
|
export default {
|
|
name: 'GenericList',
|
|
components: {
|
|
ListView,
|
|
ListHeader,
|
|
ListHeaderItem,
|
|
ListRow,
|
|
ListSelectBanner,
|
|
ObjectListCell
|
|
},
|
|
props: ['options'],
|
|
emits: ['update:selections'],
|
|
computed: {
|
|
columns() {
|
|
if (!this.options.columns && this.options.data.length > 0) {
|
|
return Object.keys(this.options.data[0]).map(fieldname => {
|
|
return {
|
|
fieldname,
|
|
key: fieldname,
|
|
label: fieldname
|
|
};
|
|
});
|
|
}
|
|
return this.options.columns
|
|
.filter(column => {
|
|
if (column.condition) {
|
|
return column.condition(this.context);
|
|
}
|
|
return true;
|
|
})
|
|
.map(column => {
|
|
if (!column.key) {
|
|
column.key = column.fieldname;
|
|
}
|
|
return column;
|
|
});
|
|
},
|
|
rows() {
|
|
return this.options.data;
|
|
},
|
|
context() {
|
|
return this.options.context;
|
|
}
|
|
},
|
|
methods: {
|
|
getRowRoute(row) {
|
|
if (this.options.route) {
|
|
let route = this.options.route(row);
|
|
return route || this.$route;
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
</script> |