155 lines
3.6 KiB
Vue
155 lines
3.6 KiB
Vue
<template>
|
|
<Page>
|
|
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
|
<ElFormItem label="表名称">
|
|
<ElInput
|
|
v-model="searchForm.tableName"
|
|
placeholder="表名称"/>
|
|
</ElFormItem>
|
|
<ElFormItem>
|
|
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
|
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<div class="tool-bar">
|
|
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
|
</div>
|
|
<ElTable v-loading="searching" :data="tableData"
|
|
cell-class-name="table-cell"
|
|
class="table-list"
|
|
empty-text="暂无数据"
|
|
header-row-class-name="table-header"
|
|
row-key="id">
|
|
<ElTableColumn label="数据库名称" prop="tableSchema"/>
|
|
<ElTableColumn label="表名称" prop="tableName"/>
|
|
<ElTableColumn label="备注" prop="tableComment"/>
|
|
<ElTableColumn label="操作" width="180">
|
|
<template #default="scope">
|
|
<div class="action-btn">
|
|
<ElButton text type="primary" @click="previewHandler(scope)">预览</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
</ElTable>
|
|
<ElPagination
|
|
v-model:current-page="searchForm.current"
|
|
v-model:page-size="searchForm.size"
|
|
:hide-on-single-page="false"
|
|
:page-sizes="[10, 20, 50, 100, 500]"
|
|
:teleported="false"
|
|
:total="totalCount"
|
|
layout="->, sizes, total, prev, pager, next"
|
|
@change="paging"/>
|
|
<CodePreview ref="codePreview"/>
|
|
</Page>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import Page from '@/components/page/Page.vue'
|
|
import { elIcons } from '@/common/element/element.ts'
|
|
import CodePreview from '@/pages/sys/gen/db-table/CodePreview.vue'
|
|
import DbTableApi from '@/pages/sys/gen/db-table/db-table-api.ts'
|
|
|
|
const totalCount = ref(0)
|
|
const tableData = ref<DbTableTypes.TableInfo[]>([])
|
|
const searchForm = ref<DbTableTypes.SearchTplParam>({
|
|
current: 1,
|
|
size: 20,
|
|
})
|
|
const searching = ref(false)
|
|
const showSearchForm = ref(true)
|
|
const codePreviewIns = useTemplateRef<InstanceType<typeof CodePreview>>('codePreview')
|
|
|
|
function showDialog(data?: DbTableTypes.TableInfo) {
|
|
codePreviewIns.value?.open(data)
|
|
}
|
|
|
|
function previewHandler({row}: { row: DbTableTypes.TableInfo }) {
|
|
showDialog(row)
|
|
}
|
|
|
|
function reset() {
|
|
searchForm.value = {
|
|
current: 1,
|
|
size: 20,
|
|
}
|
|
paging()
|
|
}
|
|
|
|
|
|
function paging() {
|
|
searching.value = true
|
|
DbTableApi.tablePaing(searchForm.value)
|
|
.then(res => {
|
|
totalCount.value = res.data?.total ?? 0
|
|
tableData.value = res.data.records ?? []
|
|
})
|
|
.finally(() => {
|
|
searching.value = false
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
paging()
|
|
})
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
.table-list {
|
|
flex 1;
|
|
margin 0 0 20px 0
|
|
width 100%
|
|
|
|
:deep(.table-header) {
|
|
color #454C59
|
|
|
|
th {
|
|
background-color #EDF1F7
|
|
font-weight 500
|
|
position relative
|
|
|
|
& > div {
|
|
display flex
|
|
gap 5px
|
|
align-items center
|
|
}
|
|
|
|
&:not(:first-child) > div::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1px;
|
|
width: 1px;
|
|
background-color: #D3D7DE;
|
|
transform: translateY(-50%);
|
|
content: "";
|
|
height 50%
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.table-cell) {
|
|
color #2F3540
|
|
}
|
|
|
|
.action-btn {
|
|
width 100%
|
|
display flex
|
|
flex-wrap wrap
|
|
|
|
& > button {
|
|
margin 0
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool-bar {
|
|
display flex
|
|
justify-content space-between
|
|
margin 0 0 20px 0
|
|
}
|
|
|
|
|
|
.pagination {
|
|
justify-content: end;
|
|
margin: 8px;
|
|
}
|
|
</style>
|