多维表格

109 lines
3.1 KiB

<template>
<div class="h-100" style="overflow: auto">
<v-toolbar height="30" class="elevation-0">
<v-spacer />
<v-btn small outlined @click="loadAudits">
<v-icon small class="mr-2"> refresh </v-icon>
<!-- Reload -->
{{ $t('general.reload') }}
</v-btn>
</v-toolbar>
<v-container class="d-flex flex-column tableScroll">
<v-simple-table v-if="audits" dense style="max-width: 1000px; overflow: auto" class="mx-auto flex-grow-1">
<thead>
<tr>
<th class="caption">
<!--Operation Type-->
{{ $t('labels.operationType') }}
</th>
<th class="caption">
<!---->
{{ $t('labels.operationSubType') }}
</th>
<th class="caption">
<!--Description-->
{{ $t('labels.description') }}
</th>
<th class="caption">
<!--User-->
{{ $t('objects.user') }}
</th>
<!-- <th class="caption">Ip</th>-->
<th class="caption">
<!--Created-->
{{ $t('labels.created') }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(audit, i) in audits" :key="i">
<td class="caption">
{{ audit.op_type }}
</td>
<td class="caption">
{{ audit.op_sub_type }}
</td>
<td class="caption">
{{ audit.description }}
</td>
<td class="caption">
{{ audit.user == null ? 'Shared base' : audit.user }}
</td>
<!-- <td class="caption">-->
<!-- {{ audit.ip }}-->
<!-- </td>-->
<td class="caption">
<v-tooltip bottom>
<template #activator="{ on }">
<span v-on="on">{{ calculateDiff(audit.created_at) }}</span>
</template>
<span class="caption">{{ audit.created_at }}</span>
</v-tooltip>
</td>
</tr>
</tbody>
</v-simple-table>
<v-pagination v-model="page" :length="Math.ceil(count / limit)" :total-visible="8" @input="loadAudits" />
</v-container>
</div>
</template>
<script>
import { calculateDiff } from '~/helpers';
export default {
name: 'Audit',
data: () => ({
audits: null,
count: 0,
limit: 25,
page: 1,
}),
created() {
this.loadAudits();
},
methods: {
async loadAudits() {
// const { list, count } = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcAuditList', {
// limit: this.limit,
// offset: this.limit * (this.page - 1)
// }])
const { list, pageInfo } = await this.$api.project.auditList(this.$store.state.project.projectId, {
limit: this.limit,
offset: this.limit * (this.page - 1),
});
this.audits = list;
this.count = pageInfo.totalRows;
},
calculateDiff,
},
};
</script>
<style scoped lang="scss">
.tableScroll {
height: calc(90vh - 150px);
}
</style>