b2894lxlx
6f2383a7e5
付款申请汇票筛选与提示去重、结算菜单拆分与金蝶同步弹框、应收应付详情高度、合同计费与半月结调整，以及导入运单批量删除校验。 Co-authored-by: Cursor <cursoragent@cursor.com>
352 lines
11 KiB
Vue
352 lines
11 KiB
Vue
<template>
|
|
<div class="fs-table-panel">
|
|
<div class="fs-table-panel__toolbar">
|
|
<div>
|
|
<el-button
|
|
v-if="hasPermission('add')"
|
|
type="primary"
|
|
@click="$emit('create')"
|
|
>新增</el-button
|
|
>
|
|
<el-button
|
|
v-if="showPaymentAction && hasPermission('payment')"
|
|
type="primary"
|
|
plain
|
|
:disabled="!selection.length"
|
|
@click="$emit('payment')"
|
|
>付款申请</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('sync')"
|
|
type="primary"
|
|
plain
|
|
:disabled="!selection.length"
|
|
:loading="syncLoading"
|
|
@click="$emit('sync')"
|
|
>同步金蝶</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('print')"
|
|
type="primary"
|
|
plain
|
|
@click="emitSingle('print')"
|
|
>打印结算单</el-button
|
|
>
|
|
<el-button
|
|
v-if="hasPermission('export')"
|
|
type="primary"
|
|
plain
|
|
@click="$emit('export')"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
<settlement-table-tools
|
|
:columns="columnSettingOptions"
|
|
v-model:visible-column-keys="visibleColumnKeys"
|
|
v-model:table-size="tableSize"
|
|
:search-visible="searchVisible"
|
|
@update:search-visible="$emit('update:searchVisible', $event)"
|
|
@refresh="$emit('refresh')"
|
|
/>
|
|
</div>
|
|
<el-table
|
|
ref="tableRef"
|
|
v-loading="loading"
|
|
:data="rows"
|
|
:size="tableSize"
|
|
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 visibleColumns"
|
|
: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>
|
|
<template v-else-if="column.prop === 'kingdeeLockStatus'">
|
|
<el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
|
|
<el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
|
|
</el-tooltip>
|
|
<span v-else>-</span>
|
|
</template>
|
|
<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 {
|
|
invoiceStatusName,
|
|
kingdeeSyncStatusOptions,
|
|
paymentStatusOptions,
|
|
} from '@/option/settlement/formalSettlementSearch';
|
|
import SettlementTableTools from './settlement-table-tools.vue';
|
|
|
|
export default {
|
|
name: 'FormalSettlementTablePanel',
|
|
components: { SettlementTableTools },
|
|
props: {
|
|
rows: { type: Array, default: () => [] },
|
|
columns: { type: Array, default: () => [] },
|
|
loading: { type: Boolean, default: false },
|
|
syncLoading: { type: Boolean, default: false },
|
|
page: { type: Object, required: true },
|
|
hasPermission: { type: Function, required: true },
|
|
mkEnabled: { type: Boolean, default: false },
|
|
searchVisible: { type: Boolean, default: true },
|
|
/** 是否展示付款申请按钮（仅付款结算单） */
|
|
showPaymentAction: { type: Boolean, default: true },
|
|
billLabel: { type: String, default: '结算单' },
|
|
},
|
|
emits: [
|
|
'create',
|
|
'payment',
|
|
'sync',
|
|
'print',
|
|
'export',
|
|
'refresh',
|
|
'page-change',
|
|
'action',
|
|
'update:selection',
|
|
'update:searchVisible',
|
|
],
|
|
data() {
|
|
return {
|
|
selection: [],
|
|
tableSize: 'default',
|
|
visibleColumnKeys: [],
|
|
knownColumnProps: [],
|
|
};
|
|
},
|
|
computed: {
|
|
columnSettingOptions() {
|
|
return this.columns.map(column => ({
|
|
prop: column.prop,
|
|
label: column.label,
|
|
}));
|
|
},
|
|
visibleColumns() {
|
|
if (!this.visibleColumnKeys.length) return this.columns;
|
|
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
|
|
},
|
|
},
|
|
watch: {
|
|
columns: {
|
|
immediate: true,
|
|
handler(columns) {
|
|
const props = columns.map(column => column.prop);
|
|
if (!this.visibleColumnKeys.length) {
|
|
this.visibleColumnKeys = props;
|
|
this.knownColumnProps = props;
|
|
return;
|
|
}
|
|
const visible = new Set(this.visibleColumnKeys);
|
|
const known = new Set(this.knownColumnProps || []);
|
|
props.forEach(prop => {
|
|
if (!known.has(prop)) visible.add(prop);
|
|
});
|
|
this.knownColumnProps = props;
|
|
this.visibleColumnKeys = props.filter(prop => visible.has(prop));
|
|
},
|
|
},
|
|
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' ? '打印' : '操作'}需选择一条${this.billLabel}`);
|
|
return;
|
|
}
|
|
this.$emit('action', { type, row: this.selection[0] });
|
|
},
|
|
isEditable(row) {
|
|
return ['draft', 'returned'].includes(row.approvalStatus);
|
|
},
|
|
rowActions(row) {
|
|
const actions = [];
|
|
if (this.hasPermission('view')) actions.push({ type: 'view', label: '查看' });
|
|
if (this.hasPermission('edit') && this.isEditable(row))
|
|
actions.push({ type: 'edit', label: '编辑' });
|
|
if (this.hasPermission('delete') && row.approvalStatus === 'draft')
|
|
actions.push({ type: 'delete', label: '删除', danger: true });
|
|
if (this.hasPermission('submit') && this.isEditable(row))
|
|
actions.push({ type: 'submit', label: '提交' });
|
|
if (
|
|
this.mkEnabled &&
|
|
this.hasPermission('approve') &&
|
|
['reviewing', 'approved'].includes(row.approvalStatus)
|
|
) {
|
|
actions.push({ type: 'mkAudit', label: '流程' });
|
|
}
|
|
if (!this.mkEnabled && this.hasPermission('approve') && row.approvalStatus === 'reviewing') {
|
|
actions.push({ type: 'approve', label: '通过' });
|
|
actions.push({ type: 'return', label: '驳回', danger: true });
|
|
}
|
|
if (
|
|
this.hasPermission('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 || '-';
|
|
},
|
|
lockTag(row) {
|
|
if (row.kingdeeLockStatus === 'locked') {
|
|
return { show: true, type: 'danger', label: '金蝶锁定中', tip: '该单据已被金蝶锁定，不可编辑/作废' };
|
|
}
|
|
if (row.kingdeeLockStatus === 'failed') {
|
|
if ((row.kingdeeTryCount || 0) >= 5) {
|
|
return {
|
|
show: true,
|
|
type: 'danger',
|
|
label: '锁定失败·已达上限',
|
|
tip: row.kingdeeLockFailReason || '自动补偿次数已用完，请重推「同步金蝶」立即补锁',
|
|
};
|
|
}
|
|
return {
|
|
show: true,
|
|
type: 'warning',
|
|
label: '锁定失败·补偿中',
|
|
tip: row.kingdeeLockFailReason || '系统将自动补偿重锁',
|
|
};
|
|
}
|
|
// 金蝶解锁终态标识：删单解锁的源单已作废，此标签用于区分人工作废与金蝶删单
|
|
if (row.kingdeeUnlockTime) {
|
|
const isDelete = row.kingdeeUnlockOperationName === '金蝶删单';
|
|
return {
|
|
show: true,
|
|
type: isDelete ? 'danger' : 'warning',
|
|
label: row.kingdeeUnlockOperationName || '金蝶解锁',
|
|
tip: `${row.kingdeeUnlockOperator || '-'} 于 ${this.$dayjs(row.kingdeeUnlockTime).format('YYYY-MM-DD HH:mm:ss')} 解锁`,
|
|
};
|
|
}
|
|
return { show: false };
|
|
},
|
|
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__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>
|