You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.0 KiB
104 lines
2.0 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="filtrate-row">
|
|
<slot name="search"></slot>
|
|
</div>
|
|
|
|
<div class="table-list">
|
|
<div class="table-pagination">
|
|
<div class="table-operation">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
v-show="options.add"
|
|
icon="Plus"
|
|
@click="clickAdd()"
|
|
>录入</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
v-show="options.export"
|
|
icon="Download"
|
|
@click="clickExport()"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
<div class="table-el">
|
|
<slot name="table"></slot>
|
|
</div>
|
|
</div>
|
|
<div class="pagination">
|
|
<slot name="pagination"></slot>
|
|
</div>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
options: {
|
|
type: Object,
|
|
default: {
|
|
add: true, //录入
|
|
export: true, //导出
|
|
},
|
|
},
|
|
});
|
|
const emits = defineEmits(["handlerAdd", "handlerExport"]);
|
|
|
|
const clickAdd = () => {
|
|
emits("handlerAdd");
|
|
};
|
|
const clickExport = () => {
|
|
emits("handlerExport");
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
& > div {
|
|
box-sizing: border-box;
|
|
padding: 20px 16px;
|
|
background-color: #fff;
|
|
box-shadow: 0px 4px 4px 0px rgba(168, 196, 237, 0.25);
|
|
}
|
|
}
|
|
.filtrate-row {
|
|
height: 134px;
|
|
}
|
|
.table-operation {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
gap: 10px;
|
|
}
|
|
.table-list {
|
|
padding-bottom: 0px !important;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
.table-pagination {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
gap: 20px;
|
|
}
|
|
.table-el {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 65px;
|
|
}
|
|
}
|
|
</style>
|