268 lines
8.1 KiB
Vue
268 lines
8.1 KiB
Vue
<template>
|
|
<div class="fs-table-panel">
|
|
<div class="fs-table-panel__toolbar">
|
|
<div>
|
|
<el-button
|
|
v-if="hasPermission('formal_settlement_add')"
|
|
type="primary"
|
|
@click="$emit('create')"
|
|
>新增</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('formal_settlement_payment')"
|
|
type="primary"
|
|
plain
|
|
:disabled="!selection.length"
|
|
@click="$emit('payment')"
|
|
>付款申请</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('formal_settlement_sync')"
|
|
type="primary"
|
|
plain
|
|
:disabled="selection.length !== 1"
|
|
@click="$emit('sync')"
|
|
>同步金蝶</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('formal_settlement_print')"
|
|
type="primary"
|
|
plain
|
|
@click="emitSingle('print')"
|
|
>打印结算单</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('formal_settlement_export')"
|
|
type="primary"
|
|
plain
|
|
@click="$emit('export')"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
<div class="fs-table-panel__toolbar-right">
|
|
<el-tooltip content="刷新" placement="top">
|
|
<el-button :icon="Refresh" text @click="$emit('refresh')" />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
ref="tableRef"
|
|
v-loading="loading"
|
|
:data="rows"
|
|
border
|
|
highlight-current-row
|
|
@current-change="handleCurrentChange"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
|
<el-table-column type="selection" width="52" 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 && row[column.prop]"
|
|
type="primary"
|
|
@click="emitAction('view', row)"
|
|
>{{ row[column.prop] }}</el-link
|
|
>
|
|
<el-tag
|
|
v-else-if="column.status"
|
|
:type="statusType(row.approvalStatus)"
|
|
class="status-text"
|
|
>{{ displayValue(row[column.prop]) }}</el-tag
|
|
>
|
|
<span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
|
|
<span
|
|
v-else-if="column.prop === 'invoiceStatusName'"
|
|
:class="['fs-table-panel__invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]"
|
|
>{{ invoiceName(row.invoiceStatus, row.settlementType) }}</span>
|
|
<span v-else-if="column.prop === 'paymentStatusName'">{{
|
|
paymentName(row.paymentStatus)
|
|
}}</span>
|
|
<span v-else-if="column.prop === 'kingdeeSyncStatus'">{{
|
|
kingdeeSyncName(row.kingdeeSyncStatus)
|
|
}}</span>
|
|
<span v-else>{{ displayValue(row[column.prop]) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="320" fixed="right" align="center">
|
|
<template #default="{ row }"
|
|
><div class="fs-table-panel__links">
|
|
<el-link
|
|
v-for="action in rowActions(row)"
|
|
:key="action.type"
|
|
:type="action.danger ? 'danger' : 'primary'"
|
|
@click="emitAction(action.type, row)"
|
|
>{{ action.label }}</el-link
|
|
>
|
|
</div></template
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="fs-table-panel__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="current => $emit('page-change', { current, size: page.size })"
|
|
@size-change="size => $emit('page-change', { current: 1, size })"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Refresh } from '@element-plus/icons-vue';
|
|
import {
|
|
invoiceStatusName,
|
|
kingdeeSyncStatusOptions,
|
|
paymentStatusOptions,
|
|
} from '@/option/settlement/formalSettlementSearch';
|
|
|
|
export default {
|
|
name: 'FormalSettlementTablePanel',
|
|
props: {
|
|
rows: { type: Array, default: () => [] },
|
|
columns: { type: Array, default: () => [] },
|
|
loading: { type: Boolean, default: false },
|
|
page: { type: Object, required: true },
|
|
hasPermission: { type: Function, required: true },
|
|
},
|
|
emits: [
|
|
'create',
|
|
'payment',
|
|
'sync',
|
|
'print',
|
|
'export',
|
|
'refresh',
|
|
'page-change',
|
|
'action',
|
|
'update:selection',
|
|
],
|
|
data() {
|
|
return {
|
|
Refresh,
|
|
selection: [],
|
|
};
|
|
},
|
|
watch: {
|
|
rows() {
|
|
this.selection = [];
|
|
this.$refs.tableRef?.clearSelection();
|
|
this.$emit('update:selection', this.selection);
|
|
},
|
|
},
|
|
methods: {
|
|
handleCurrentChange(row) {
|
|
if (!row && this.selection.length === 1) {
|
|
this.selection = [];
|
|
this.$emit('update:selection', this.selection);
|
|
}
|
|
},
|
|
handleSelectionChange(selection) {
|
|
this.selection = selection;
|
|
this.$emit('update:selection', selection);
|
|
},
|
|
emitAction(type, row) {
|
|
this.$emit('action', { type, row });
|
|
},
|
|
emitSingle(type) {
|
|
if (this.selection.length !== 1) {
|
|
this.$message.warning(`${type === 'print' ? '打印' : '操作'}需选择一条正式结算单`);
|
|
return;
|
|
}
|
|
this.$emit('action', { type, row: this.selection[0] });
|
|
},
|
|
isEditable(row) {
|
|
return ['draft', 'returned'].includes(row.approvalStatus);
|
|
},
|
|
rowActions(row) {
|
|
const actions = [];
|
|
if (this.hasPermission('formal_settlement_view'))
|
|
actions.push({ type: 'view', label: '查看' });
|
|
if (this.hasPermission('formal_settlement_edit') && this.isEditable(row))
|
|
actions.push({ type: 'edit', label: '编辑' });
|
|
if (this.hasPermission('formal_settlement_delete') && row.approvalStatus === 'draft')
|
|
actions.push({ type: 'delete', label: '删除', danger: true });
|
|
if (this.hasPermission('formal_settlement_submit') && this.isEditable(row))
|
|
actions.push({ type: 'submit', label: '提交' });
|
|
if (this.hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing') {
|
|
actions.push({ type: 'approve', label: '通过' });
|
|
actions.push({ type: 'return', label: '驳回', danger: true });
|
|
}
|
|
if (
|
|
this.hasPermission('formal_settlement_void') &&
|
|
row.approvalStatus === 'approved' &&
|
|
row.kingdeeSyncStatus !== 'synced'
|
|
)
|
|
actions.push({ type: 'void', label: '作废', danger: true });
|
|
return actions;
|
|
},
|
|
statusType(status) {
|
|
return (
|
|
{ approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
|
|
''
|
|
);
|
|
},
|
|
invoiceName(value, settlementType) {
|
|
return invoiceStatusName(value, settlementType);
|
|
},
|
|
paymentName(value) {
|
|
return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
|
|
},
|
|
kingdeeSyncName(value) {
|
|
return kingdeeSyncStatusOptions.find(item => item.value === value)?.label || value || '-';
|
|
},
|
|
displayValue(value) {
|
|
return value === null || value === undefined || value === '' ? '-' : value;
|
|
},
|
|
formatMoney(value, currency = 'RMB') {
|
|
return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.fs-table-panel__toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
}
|
|
.fs-table-panel__toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.fs-table-panel__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.fs-table-panel__invoice-status {
|
|
&.is-unreceived {
|
|
color: #f56c6c;
|
|
}
|
|
&.is-partial {
|
|
color: #e6a23c;
|
|
}
|
|
&.is-completed {
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
.fs-table-panel__pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|