1、调整配载、总单
2、新增收付款模块
This commit is contained in:
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<section class="bill-ledger-search">
|
||||
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
|
||||
<div class="bill-ledger-search__grid">
|
||||
<el-form-item label="票据编号">
|
||||
<el-input v-model="query.billNo" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="出票日期">
|
||||
<el-date-picker
|
||||
v-model="query.issueDateRange"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
clearable
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出票单位">
|
||||
<el-input v-model="query.issuerName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收票单位">
|
||||
<el-input v-model="query.receiverName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="expanded" label="汇票类型">
|
||||
<el-select v-model="query.billType" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in billTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="expanded" label="到期状态">
|
||||
<el-select v-model="query.maturityStatus" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in maturityStatusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="bill-ledger-search__shortcut-row">
|
||||
<span class="bill-ledger-search__shortcut-label">到期快捷筛选</span>
|
||||
<el-segmented v-model="query.expiryShortcut" :options="shortcutOptions" />
|
||||
</div>
|
||||
<div class="bill-ledger-search__actions">
|
||||
<el-button type="primary" :loading="loading" @click="$emit('search')">查询</el-button>
|
||||
<el-button @click="$emit('reset')">重置</el-button>
|
||||
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
|
||||
<el-button text @click="expanded = !expanded">
|
||||
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import { billTypeOptions, maturityStatusOptions } from '@/api/payment/billLedger';
|
||||
|
||||
export default {
|
||||
name: 'BillLedgerSearch',
|
||||
props: {
|
||||
query: { type: Object, required: true },
|
||||
counts: { type: Object, default: () => ({}) },
|
||||
loading: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['search', 'reset'],
|
||||
data() {
|
||||
return {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
expanded: false,
|
||||
billTypeOptions,
|
||||
maturityStatusOptions,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shortcutOptions() {
|
||||
return [
|
||||
{ label: `全部（${this.counts.all || 0}）`, value: 'all' },
|
||||
{ label: `30天内到期（${this.counts.within30 || 0}）`, value: 'within30' },
|
||||
{ label: `90天内到期（${this.counts.within90 || 0}）`, value: 'within90' },
|
||||
{ label: `90天以上（${this.counts.over90 || 0}）`, value: 'over90' },
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bill-ledger-search {
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.bill-ledger-search__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
}
|
||||
.bill-ledger-search :deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bill-ledger-search :deep(.el-input),
|
||||
.bill-ledger-search :deep(.el-select),
|
||||
.bill-ledger-search :deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
.bill-ledger-search__shortcut-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
}
|
||||
.bill-ledger-search__shortcut-label {
|
||||
width: 160px;
|
||||
padding-right: 12px;
|
||||
color: var(--el-text-color-regular);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bill-ledger-search__shortcut-row :deep(.el-segmented) {
|
||||
--el-segmented-item-selected-bg-color: #409eff;
|
||||
--el-segmented-item-selected-color: #fff;
|
||||
}
|
||||
.bill-ledger-search__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.bill-ledger-search__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.bill-ledger-search__shortcut-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.bill-ledger-search__shortcut-row :deep(.el-segmented) {
|
||||
max-width: calc(100% - 160px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<section class="bill-ledger-table">
|
||||
<div class="bill-ledger-table__toolbar">
|
||||
<div class="bill-ledger-table__title">汇票台账列表</div>
|
||||
<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 }">
|
||||
<span v-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', '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: space-between;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.bill-ledger-table__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="bill-payment-search">
|
||||
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
|
||||
<div class="bill-payment-search__grid">
|
||||
<el-form-item label="单据号">
|
||||
<el-input v-model="query.paymentNo" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用部门">
|
||||
<el-input v-model="query.deptName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="付款日期">
|
||||
<el-date-picker
|
||||
v-model="query.paymentDateRange"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
clearable
|
||||
value-format="YYYY-MM-DD"
|
||||
range-separator="~"
|
||||
start-placeholder="年/月/日"
|
||||
end-placeholder="年/月/日"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单据状态">
|
||||
<el-select v-model="query.approvalStatus" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in approvalStatusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="bill-payment-search__actions">
|
||||
<el-button type="primary" :loading="loading" @click="$emit('search')">查询</el-button>
|
||||
<el-button @click="$emit('reset')">重置</el-button>
|
||||
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
|
||||
<el-button text @click="expanded = !expanded">
|
||||
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import { approvalStatusOptions } from '@/api/payment/billPayment';
|
||||
|
||||
export default {
|
||||
name: 'BillPaymentSearch',
|
||||
props: {
|
||||
query: { type: Object, required: true },
|
||||
loading: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['search', 'reset'],
|
||||
data() {
|
||||
return { ArrowDown, ArrowUp, expanded: false, approvalStatusOptions };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bill-payment-search {
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.bill-payment-search__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
}
|
||||
.bill-payment-search :deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bill-payment-search :deep(.el-input),
|
||||
.bill-payment-search :deep(.el-select),
|
||||
.bill-payment-search :deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
.bill-payment-search__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.bill-payment-search__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<section class="bill-payment-table">
|
||||
<div class="bill-payment-table__toolbar">
|
||||
<el-button v-if="hasPermission('bill_payment_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-tag v-if="column.status" :type="statusType(row.approvalStatus)">
|
||||
{{ row[column.prop] || '-' }}
|
||||
</el-tag>
|
||||
<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-payment-table__links">
|
||||
<el-link
|
||||
v-if="
|
||||
['reviewing', 'approved', 'voided'].includes(row.approvalStatus) &&
|
||||
hasPermission('bill_payment_view')
|
||||
"
|
||||
type="primary"
|
||||
@click="$emit('view', row)"
|
||||
>查看</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="row.approvalStatus === 'draft' && hasPermission('bill_payment_delete')"
|
||||
type="danger"
|
||||
@click="$emit('delete', row)"
|
||||
>删除</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="
|
||||
['draft', 'returned'].includes(row.approvalStatus) &&
|
||||
hasPermission('bill_payment_edit')
|
||||
"
|
||||
type="primary"
|
||||
@click="$emit('edit', row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="row.approvalStatus !== 'draft'"
|
||||
type="primary"
|
||||
@click="$emit('flow', row)"
|
||||
>流程</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="row.approvalStatus === 'approved' && hasPermission('bill_payment_void')"
|
||||
type="danger"
|
||||
@click="$emit('void', row)"
|
||||
>作废</el-link
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="bill-payment-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 { billPaymentTableColumns } from '@/option/payment/billPayment';
|
||||
|
||||
export default {
|
||||
name: 'BillPaymentTable',
|
||||
props: {
|
||||
rows: { type: Array, default: () => [] },
|
||||
loading: { type: Boolean, default: false },
|
||||
page: { type: Object, required: true },
|
||||
},
|
||||
emits: ['add', 'view', 'edit', 'delete', 'flow', 'void', 'page-change', 'size-change'],
|
||||
data() {
|
||||
return { columns: billPaymentTableColumns };
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
return String(this.userInfo?.authority || '').includes('admin');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.permission?.[code] === true;
|
||||
},
|
||||
statusType(status) {
|
||||
return (
|
||||
{ reviewing: 'warning', returned: 'danger', approved: 'success', voided: 'info' }[status] ||
|
||||
''
|
||||
);
|
||||
},
|
||||
displayValue(value) {
|
||||
return value === null || value === undefined || value === '' ? '-' : value;
|
||||
},
|
||||
formatMoney(value) {
|
||||
return Number(value || 0).toFixed(2);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bill-payment-table {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.bill-payment-table__toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.bill-payment-table__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.bill-payment-table__pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.bill-payment-table :deep(.el-table) {
|
||||
--el-table-border-color: #eff1f7;
|
||||
}
|
||||
.bill-payment-table :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user