<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { usePopup } from '@jnpf/ui/popup';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { delOrder, getOrderEntryList, getOrderList, getOrderPlanList } from '#/api/extend/order';
|
import { useFlowState } from '#/hooks/flow/useFlowStatus';
|
import { $t } from '#/locales';
|
import FlowParser from '#/views/workFlow/components/FlowParser.vue';
|
|
defineOptions({ name: 'ExtendOrder' });
|
|
const flowId = ref<string>('585361795057715206');
|
const { createMessage } = useMessage();
|
const { getFlowStatusContent, getFlowStatusColor } = useFlowState();
|
const [registerFlowParser, { openPopup: openFlowParser }] = usePopup();
|
const columns: BasicColumn[] = [
|
{ title: '订单编码', dataIndex: 'orderCode', width: 150 },
|
{ title: '订单日期', dataIndex: 'orderDate', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '客户名称', dataIndex: 'customerName', width: 200 },
|
{ title: '业务人员', dataIndex: 'salesmanName', width: 120 },
|
{ title: '付款金额', dataIndex: 'receivableMoney', width: 100 },
|
{ title: '制单人员', dataIndex: 'creatorUser', width: 120 },
|
{ title: '订单备注', dataIndex: 'description' },
|
{ title: '状态', dataIndex: 'currentState', width: 120, align: 'center', slots: { default: 'currentState' } },
|
];
|
const goodsColumns: BasicColumn[] = [
|
{ title: '序号', width: 50, align: 'center', type: 'seq' },
|
{ title: '商品名称', field: 'goodsName' },
|
{ title: '规格型号', field: 'specifications', width: 80 },
|
{ title: '单位', field: 'unit', width: 80 },
|
{ title: '数量', field: 'qty', width: 80 },
|
{ title: '单价', field: 'price', width: 80 },
|
{ title: '金额', field: 'amount', width: 80 },
|
{ title: '折扣%', field: 'discount', width: 80 },
|
{ title: '税率%', field: 'cess', width: 80 },
|
{ title: '实际单价', field: 'actualPrice', width: 80 },
|
{ title: '实际金额', field: 'actualAmount', width: 80 },
|
];
|
const planColumns: BasicColumn[] = [
|
{ title: '序号', width: 50, align: 'center', type: 'seq' },
|
{ title: '收款日期', field: 'receivableDate', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '收款比率%', field: 'receivableRate', width: 100 },
|
{ title: '收款金额', field: 'receivableMoney', width: 100 },
|
{ title: '收款方式', field: 'receivableMode', width: 100 },
|
{ title: '收款摘要', field: 'abstract' },
|
];
|
const searchInfo = {
|
flowId: flowId.value,
|
};
|
const [registerTable, { reload }] = useVxeTable({
|
api: getOrderList,
|
columns,
|
searchInfo,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: { placeholder: $t('common.enterKeyword'), submitOnPressEnter: true },
|
},
|
{
|
field: 'pickerVal',
|
label: '订单日期',
|
component: 'DateRange',
|
componentProps: {
|
format: 'YYYY-MM-DD HH:mm:ss',
|
showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
|
placeholder: ['开始时间', '结束时间'],
|
},
|
},
|
],
|
fieldMapToTime: [['pickerVal', ['startTime', 'endTime']]],
|
},
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
showExpandColumn: true,
|
expandConfig: {
|
lazy: true,
|
loadMethod({ row }) {
|
return new Promise((resolve) => {
|
if (row.goodsList?.length || row.planList?.length) return;
|
row.childTableLoading = true;
|
getOrderEntryList(row.id)
|
.then((res) => {
|
row.childTableLoading = false;
|
row.goodsList = res.data.list;
|
resolve(row);
|
})
|
.catch(() => {
|
row.childTableLoading = false;
|
});
|
getOrderPlanList(row.id).then((res) => {
|
row.planList = res.data.list;
|
resolve(row);
|
});
|
});
|
},
|
},
|
});
|
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
disabled: ![0, 8, 9].includes(record.currentState),
|
onClick: toDetail.bind(null, record, '-1'),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
disabled: ![0, 9].includes(record.currentState),
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
{
|
label: $t('common.detailText'),
|
disabled: !record.currentState,
|
onClick: toDetail.bind(null, record, 0),
|
},
|
];
|
}
|
function handleDelete(id) {
|
delOrder(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function toDetail(record, opType) {
|
const data = {
|
id: record.flowTaskId || record.id,
|
flowId: flowId.value,
|
opType,
|
};
|
openFlowParser(true, data);
|
}
|
function handleAdd() {
|
const data = {
|
id: '',
|
flowId: flowId.value,
|
opType: '-1',
|
};
|
openFlowParser(true, data);
|
}
|
function goodsFooterMethod({ columns, data }) {
|
return [
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) return '合计';
|
if ([1, 2].includes(columnIndex)) return '';
|
let sumVal = data.reduce((sum, d) => sum + Number.parseFloat(d[column.property as any]), 0);
|
sumVal = Number.isNaN(sumVal) ? '' : sumVal;
|
sumVal = sumVal && !Number.isInteger(sumVal) ? sumVal.toFixed(2) : sumVal;
|
return sumVal;
|
}),
|
];
|
}
|
function planFooterMethod({ columns, data }) {
|
return [
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) return '合计';
|
if ([1, 4, 5].includes(columnIndex)) return '';
|
let sumVal = data.reduce((sum, d) => sum + Number.parseFloat(d[column.property as any]), 0);
|
sumVal = Number.isNaN(sumVal) ? '' : sumVal;
|
sumVal = sumVal && !Number.isInteger(sumVal) ? sumVal.toFixed(2) : sumVal;
|
return sumVal;
|
}),
|
];
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="handleAdd()">{{ $t('common.addText') }}</a-button>
|
</template>
|
<template #expandedRowRender="{ record }">
|
<a-tabs size="small" v-loading="record.childTableLoading">
|
<a-tab-pane key="1" tab="订单商品">
|
<VxeGrid :data="record.goodsList" :columns="goodsColumns" show-footer :footer-method="goodsFooterMethod" />
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="收款计划">
|
<VxeGrid :data="record.planList" :columns="planColumns" show-footer :footer-method="planFooterMethod" />
|
</a-tab-pane>
|
</a-tabs>
|
</template>
|
<template #currentState="{ record }">
|
<JnpfTextTag :content="getFlowStatusContent(record.currentState)" :color="getFlowStatusColor(record.currentState)" />
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<FlowParser @register="registerFlowParser" @reload="reload" />
|
</div>
|
</template>
|
