<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { usePopup } from '@jnpf/ui/popup';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
import { delOrder, getOrderList, getProductEntry } from '#/api/extend/saleOrder';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'ExtendOrderDemo' });
|
|
interface State {
|
activeId: string;
|
productList: any[];
|
productDetailList: any[];
|
}
|
|
const state = reactive<State>({
|
activeId: '',
|
productList: [],
|
productDetailList: [],
|
});
|
const { productList, productDetailList } = toRefs(state);
|
const { createMessage, createConfirm } = useMessage();
|
const columns: BasicColumn[] = [
|
{ title: '订单编号', dataIndex: 'code', minWidth: 150, slots: { default: 'code' } },
|
{ title: '客户名称', dataIndex: 'customerName', minWidth: 150, slots: { default: 'customerName' } },
|
{ title: '审核状态', dataIndex: 'auditState', width: 80, slots: { default: 'auditState' } },
|
{ title: '发货通知状态', dataIndex: 'goodsState', width: 80, slots: { default: 'goodsState' } },
|
{ title: '关闭状态', dataIndex: 'closeState', width: 80, slots: { default: 'closeState' } },
|
{ title: '关闭日期', dataIndex: 'closeDate', width: 120, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '业务员', dataIndex: 'business', width: 120 },
|
{ title: '送货地址', dataIndex: 'address', width: 120 },
|
{ title: '联系方式', dataIndex: 'contactTel', width: 120 },
|
];
|
const productColumns: BasicColumn[] = [
|
{ title: '产品编号', dataIndex: 'productCode', width: 100, slots: { default: 'productCode' } },
|
{ title: '产品名称', dataIndex: 'productName', width: 100, slots: { default: 'productName' } },
|
{ title: '发货通知数', dataIndex: 'qty', width: 100 },
|
{ title: '订货类型', dataIndex: 'type', width: 100 },
|
{ title: '活动', dataIndex: 'activity', minWidth: 100 },
|
];
|
const productColumns_: BasicColumn[] = [
|
{ title: '产品规格', dataIndex: 'productSpecification', minWidth: 100 },
|
{ title: '数量', dataIndex: 'qty', minWidth: 100 },
|
{ title: '单价', dataIndex: 'price', width: 100 },
|
{ title: '折后单价', dataIndex: 'money', width: 100 },
|
{ title: '控制方式', dataIndex: 'commandType', width: 100 },
|
{ title: '单位', dataIndex: 'util', width: 100 },
|
];
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useVxeTable({
|
api: getOrderList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'code',
|
label: '订单编号',
|
component: 'Input',
|
componentProps: { placeholder: '请输入' },
|
},
|
{
|
field: 'customerName',
|
label: '客户名称',
|
component: 'Input',
|
componentProps: { placeholder: '请输入' },
|
},
|
{
|
field: 'auditState',
|
label: '审核状态',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
options: [
|
{ id: 0, fullName: '全部' },
|
{ id: 1, fullName: '未审核' },
|
{ id: 2, fullName: '已审核' },
|
],
|
},
|
},
|
{
|
field: 'closeState',
|
label: '关闭状态',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
options: [
|
{ id: 0, fullName: '全部' },
|
{ id: 1, fullName: '未审核' },
|
{ id: 2, fullName: '已审核' },
|
],
|
},
|
},
|
{
|
field: 'creatorUser',
|
label: '制单人',
|
component: 'Input',
|
componentProps: { placeholder: '请输入' },
|
},
|
],
|
},
|
rowSelection: { type: 'checkbox' },
|
clickToRowSelect: false,
|
});
|
const [registerProductTable] = useVxeTable({
|
columns: productColumns,
|
useSearchForm: false,
|
immediate: false,
|
showTableSetting: false,
|
pagination: false,
|
});
|
const [registerProductDetailTable] = useVxeTable({
|
columns: productColumns_,
|
useSearchForm: false,
|
immediate: false,
|
showTableSetting: false,
|
pagination: false,
|
});
|
const [registerForm, { openPopup: openFormPopup }] = usePopup();
|
|
function handleRowClick(item) {
|
if (state.activeId === item.id) return;
|
state.activeId = item.id;
|
getProductEntry(state.activeId).then((res) => {
|
state.productList = res.data.list;
|
});
|
}
|
function handleProductRowClick(item) {
|
state.productDetailList = item.dataList || [];
|
}
|
function handleAdd() {
|
openFormPopup(true, {});
|
}
|
function handleUpdate() {
|
const selectedList: any[] = getSelectRows();
|
if (selectedList.length != 1) return createMessage.error('请只选择一条数据');
|
openFormPopup(true, { id: selectedList[0].id });
|
}
|
function handleDel() {
|
const selectedList: any[] = getSelectRows();
|
if (selectedList.length != 1) return createMessage.error('请只选择一条数据');
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.delTip'),
|
onOk: () => {
|
delOrder(selectedList[0].id).then((res) => {
|
reload();
|
state.productList = [];
|
state.productDetailList = [];
|
clearSelectedRowKeys();
|
createMessage.success(res.msg);
|
});
|
},
|
});
|
}
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper h-full">
|
<div class="jnpf-content-wrapper-center">
|
<div class="sale-order-content">
|
<BasicVxeTable @register="registerTable" @row-click="handleRowClick">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="handleAdd()">{{ $t('common.addText') }}</a-button>
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-edit" @click="handleUpdate()">{{ $t('common.editText') }}</a-button>
|
<a-button type="link" pre-icon="icon-ym icon-ym-delete" @click="handleDel()">{{ $t('common.delText') }}</a-button>
|
<a-button type="link"><DownOutlined class="icon-more mr-[-8px]" />{{ $t('common.moreText') }} </a-button>
|
</template>
|
<template #code="{ record }">
|
<span @click="handleRowClick(record)">{{ record.code }}</span>
|
</template>
|
<template #customerName="{ record }">
|
<span @click="handleRowClick(record)">{{ record.customerName }}</span>
|
</template>
|
<template #auditState>
|
<a-tag color="error">未审核</a-tag>
|
</template>
|
<template #goodsState>
|
<a-tag color="error">未通知</a-tag>
|
</template>
|
<template #closeState>
|
<a-tag color="error">未关闭</a-tag>
|
</template>
|
</BasicVxeTable>
|
</div>
|
<div class="sale-order-footer w-full bg-white">
|
<BasicVxeTable @register="registerProductTable" :data-source="productList" @row-click="handleProductRowClick">
|
<template #productCode="{ record }">
|
<span @click="handleProductRowClick(record)">{{ record.productCode }}</span>
|
</template>
|
<template #productName="{ record }">
|
<span @click="handleProductRowClick(record)">{{ record.productName }}</span>
|
</template>
|
</BasicVxeTable>
|
<BasicVxeTable class="ml-[10px]" @register="registerProductDetailTable" :data-source="productDetailList" />
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.sale-order-content {
|
height: calc(100% - 300px);
|
}
|
|
.sale-order-footer {
|
display: flex;
|
flex-shrink: 0;
|
height: 300px;
|
margin-top: 10px;
|
|
.jnpf-vxe-table {
|
width: 50%;
|
}
|
}
|
</style>
|
