[Core] [UI] [Refactor] Add width for table

This commit is contained in:
qianmoQ 2024-03-14 16:52:44 +08:00
parent 142a9a3a6d
commit c034688316
5 changed files with 37 additions and 15 deletions

View File

@ -1,5 +1,6 @@
export default {
common: {
list: 'Schedule List'
list: 'Schedule List',
history: 'Schedule History'
}
}

View File

@ -1,5 +1,6 @@
export default {
common: {
list: '调度列表'
list: '调度列表',
history: '调度历史'
}
}

View File

@ -5,12 +5,14 @@
<Table v-else>
<TableHeader>
<TableRow>
<TableHead v-for="item in columns" :key="item.key" :class="item.class ? item.class : ''">{{ item.header }}</TableHead>
<TableHead v-for="item in columns" :key="item.key" :class="item.class ? item.class : ''" :style="{width: item.width ? item.width + 'px' : 'auto'}">
{{ item.header }}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="row in data" :key="row.id">
<TableCell v-for="column in columns" :key="column.key" :class="column.class ? column.class : ''">
<TableCell v-for="column in columns" :key="column.key" :class="column.class ? column.class : ''" :style="{width: column.width ? column.width + 'px' : 'auto'}">
<template v-if="column.slot">
<slot :name="column.slot" :row="row"></slot>
</template>

View File

@ -12,6 +12,20 @@
<template #system="{row}">
<Switch disabled :default-checked="row.system"/>
</template>
<template #action="{row}">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<Button variant="outline" size="sm" class="p-2" @click="handlerChangeInfo(true, row)">
<History :size="15"></History>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{{ $t('schedule.common.history') }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</template>
</TableCommon>
</CardContent>
</Card>
@ -24,7 +38,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import TableCommon from '@/views/components/table/TableCommon.vue'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ArrowBigUp, Pencil } from 'lucide-vue-next'
import { ArrowBigUp, History, Pencil } from 'lucide-vue-next'
import { FilterModel } from '@/model/filter'
import { createHeaders } from './ScheduleUtils'
import { useI18n } from 'vue-i18n'
@ -35,11 +49,9 @@ import { Switch } from '@/components/ui/switch';
export default defineComponent({
name: 'ScheduleHome',
components: {
Switch,
ArrowBigUp,
Button,
ArrowBigUp, History, Pencil,
Button, Switch,
Card, CardHeader, CardTitle, CardContent,
Pencil,
Tooltip, TooltipProvider, TooltipContent, TooltipTrigger,
TableCommon
},
@ -81,6 +93,12 @@ export default defineComponent({
}
})
.finally(() => this.loading = false)
},
handlerChangePage(value: PaginationModel)
{
this.filter.page = value.currentPage
this.filter.size = value.pageSize
this.handlerInitialize()
}
}
})

View File

@ -1,15 +1,15 @@
const createHeaders = (i18n: any) => {
return [
{key: 'id', hidden: true, header: i18n.t('common.id')},
{key: 'name', hidden: true, header: i18n.t('common.name')},
{key: 'id', hidden: true, header: i18n.t('common.id'), width: 80},
{key: 'name', hidden: true, header: i18n.t('common.name'), width: 100},
{key: 'description', hidden: true, header: i18n.t('common.description')},
{key: 'expression', hidden: true, header: i18n.t('common.expression')},
{key: 'active', hidden: true, header: i18n.t('common.active'), slot: 'active'},
{key: 'system', hidden: true, header: i18n.t('common.system'), slot: 'system'},
{key: 'expression', hidden: true, header: i18n.t('common.expression'), width: 100},
{key: 'active', hidden: true, header: i18n.t('common.active'), slot: 'active', width: 80},
{key: 'system', hidden: true, header: i18n.t('common.system'), slot: 'system', width: 80},
{key: 'type', hidden: true, header: i18n.t('common.type')},
{key: 'createTime', hidden: true, header: i18n.t('common.createTime')},
{key: 'updateTime', hidden: true, header: i18n.t('common.updateTime')},
{key: 'action', hidden: true, header: i18n.t('common.action'), slot: 'action', class: 'text-right'}
{key: 'action', hidden: true, header: i18n.t('common.action'), slot: 'action', width: 80, class: 'text-right'}
]
}