<template>
|
<div class="app-list-page" v-loading="loading">
|
<div class="content">
|
<div :class="`item ${item[rowKey] === form.active[rowKey] ? 'active' : ''}`" v-for="item in tableData"
|
:key="item[rowKey]" @click="onActive(item)">
|
<slot v-bind="item"/>
|
</div>
|
<el-empty v-if="!tableData.length"/>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
small
|
:background="true"
|
v-model:current-page="pageAble.pageNo"
|
v-model:page-size="pageAble.pageSize"
|
:page-sizes="[10, 50, 200, 400]"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageAble.recordCount"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
|
import {table} from '@/hooks';
|
|
const {useTable} = table;
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: ''
|
},
|
rowKey: {
|
type: String,
|
default: 'id'
|
},
|
subRequest: {
|
type: Function,
|
default: () => {
|
}
|
},
|
subActive: {
|
type: Function,
|
default: () => {
|
}
|
}
|
});
|
|
const [
|
{
|
tableData,
|
pageAble,
|
loading
|
},
|
{
|
getTableData,
|
handleSizeChange,
|
handleCurrentChange
|
}
|
] = useTable(props.subRequest);
|
|
watch(tableData, (val) => {
|
if (!Object.keys(form.active).length) {
|
form.active = val[0];
|
props.subActive(val[0]);
|
}
|
})
|
|
|
const form = reactive({
|
active: {}
|
});
|
|
const onActive = (item) => {
|
form.active = item;
|
props.subActive(item);
|
}
|
|
defineExpose({
|
/**
|
* 初始化
|
*/
|
getTableData
|
});
|
|
</script>
|
|
<style lang="scss">
|
.app-list-page {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
> .search {
|
padding: 10px;
|
display: flex;
|
|
.btn {
|
margin-left: 10px;
|
}
|
}
|
|
> .content {
|
flex: 1;
|
overflow: auto;
|
|
> .active {
|
color: var(--el-color-primary);
|
background-color: var(--el-color-primary-light-9) !important;
|
}
|
|
> .item {
|
padding: 8px;
|
|
&:hover {
|
background-color: var(--el-fill-color-light);
|
cursor: pointer;
|
}
|
}
|
}
|
|
> .pagination {
|
display: flex;
|
flex-direction: row-reverse;
|
|
.el-select {
|
width: 80px;
|
}
|
|
.el-pager {
|
display: none;
|
}
|
|
button {
|
display: none;
|
}
|
|
.el-pagination__sizes {
|
margin-left: 7px;
|
}
|
|
.el-pagination__jump {
|
margin-left: 7px;
|
}
|
|
.el-pagination__editor {
|
width: 30px;
|
}
|
}
|
}
|
</style>
|
