120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<section class="bill-ledger-table">
|
|
<div class="bill-ledger-table__toolbar">
|
|
<el-button v-if="hasPermission('bill_ledger_add')" type="primary" @click="$emit('add')">
|
|
新增
|
|
</el-button>
|
|
</div>
|
|
<el-table v-loading="loading" :data="rows" border>
|
|
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
|
<el-table-column
|
|
v-for="column in columns"
|
|
:key="column.prop"
|
|
v-bind="column"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="{ row }">
|
|
<el-link v-if="column.link" type="primary" @click="$emit('view', row)">{{
|
|
displayValue(row[column.prop])
|
|
}}</el-link>
|
|
<span v-else-if="column.money">{{ formatMoney(row[column.prop]) }}</span>
|
|
<span v-else>{{ displayValue(row[column.prop]) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="220" fixed="right" align="center">
|
|
<template #default="{ row }">
|
|
<div class="bill-ledger-table__links">
|
|
<el-link
|
|
v-if="hasPermission('bill_ledger_edit')"
|
|
type="primary"
|
|
@click="$emit('edit', row)"
|
|
>
|
|
编辑
|
|
</el-link>
|
|
<el-link
|
|
v-if="hasPermission('bill_ledger_delete')"
|
|
type="danger"
|
|
@click="$emit('delete', row)"
|
|
>
|
|
删除
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="bill-ledger-table__pagination">
|
|
<el-pagination
|
|
:current-page="page.current"
|
|
:page-size="page.size"
|
|
:total="page.total"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="$emit('page-change', $event)"
|
|
@size-change="$emit('size-change', $event)"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { billLedgerTableColumns } from '@/option/payment/billLedger';
|
|
|
|
export default {
|
|
name: 'BillLedgerTable',
|
|
props: {
|
|
rows: { type: Array, default: () => [] },
|
|
loading: { type: Boolean, default: false },
|
|
page: { type: Object, required: true },
|
|
},
|
|
emits: ['add', 'view', 'edit', 'delete', 'page-change', 'size-change'],
|
|
data() {
|
|
return { columns: billLedgerTableColumns };
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission']),
|
|
},
|
|
methods: {
|
|
hasPermission(code) {
|
|
return this.permission?.[code] !== false;
|
|
},
|
|
displayValue(value) {
|
|
return value === null || value === undefined || value === '' ? '-' : value;
|
|
},
|
|
formatMoney(value) {
|
|
return Number(value || 0).toFixed(2);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bill-ledger-table {
|
|
margin-top: 8px;
|
|
}
|
|
.bill-ledger-table__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 12px 0;
|
|
}
|
|
.bill-ledger-table__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.bill-ledger-table__pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 16px 0;
|
|
}
|
|
.bill-ledger-table :deep(.el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
}
|
|
.bill-ledger-table :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
|
|
background: #fafafa;
|
|
}
|
|
</style>
|