601 lines
16 KiB
Vue
601 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<page-layout>
|
||
|
|
<a-row :gutter="[10, 10]">
|
||
|
|
<a-col :span="24" style="height: 100%;">
|
||
|
|
<a-card>
|
||
|
|
<pro-query :searchParam="searchParam" @on-search="search"></pro-query>
|
||
|
|
<!-- 列表 -->
|
||
|
|
<pro-table style="margin-top: 20px;" rowKey="id" ref="tableRef" :fetch="fetch" :columns="columns"
|
||
|
|
:toolbar="toolbar" :operate="operate" :param="state.param" :pagination="pagination"
|
||
|
|
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
|
||
|
|
</pro-table>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24" style="height: 50%;">
|
||
|
|
<a-card>
|
||
|
|
<outBillDetail :visible="state.visibleDetail" :record="state.recordDetail"></outBillDetail>
|
||
|
|
</a-card>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</page-layout>
|
||
|
|
<addOutBillDetail :visible="state.visibleSave" @close="closeSave" :record="state.currentBill"></addOutBillDetail>
|
||
|
|
<edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import addOutBillDetail from "./addOutBillDetail/addOutBillDetail";
|
||
|
|
import edit from "./modal/edit";
|
||
|
|
import data from "./modal/outBillDetail";
|
||
|
|
import {
|
||
|
|
message,
|
||
|
|
modal
|
||
|
|
} from 'ant-design-vue';
|
||
|
|
import {
|
||
|
|
ExclamationCircleOutlined
|
||
|
|
} from '@ant-design/icons-vue';
|
||
|
|
import {
|
||
|
|
page,
|
||
|
|
remove,
|
||
|
|
removeBatch,
|
||
|
|
billsAllot,
|
||
|
|
billsConform,
|
||
|
|
billsExecute,
|
||
|
|
billsCancelAllot
|
||
|
|
} from "@/api/wms/outBill";
|
||
|
|
import {
|
||
|
|
reactive,
|
||
|
|
createVNode,
|
||
|
|
ref,
|
||
|
|
toRaw
|
||
|
|
} from 'vue';
|
||
|
|
const removeKey = "remove";
|
||
|
|
const removeBatchKey = "removeBatch";
|
||
|
|
const billsAllotKey = "billsAllot";
|
||
|
|
const billsConformKey = "billsConform";
|
||
|
|
const billsExecuteKey = "billsExecute";
|
||
|
|
const billsCancelAllotKey = "billsCancelAllot";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
addOutBillDetail,
|
||
|
|
edit,
|
||
|
|
outBillDetail: data,
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
|
||
|
|
const tableRef = ref()
|
||
|
|
|
||
|
|
const columns = [{
|
||
|
|
dataIndex: "invoiceCode",
|
||
|
|
key: "invoiceCode",
|
||
|
|
title: "单据号",
|
||
|
|
showSearch:true,
|
||
|
|
width: 200,
|
||
|
|
}, {
|
||
|
|
dataIndex: "extCode",
|
||
|
|
key: "extCode",
|
||
|
|
title: "外部单据号",
|
||
|
|
showSearch:true,
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "priority",
|
||
|
|
key: "priority",
|
||
|
|
title: "优先级",
|
||
|
|
width: 100,
|
||
|
|
dictionary: {
|
||
|
|
type: 'tag',
|
||
|
|
code: 'priority'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "businessType",
|
||
|
|
key: "businessType",
|
||
|
|
title: "业务类型",
|
||
|
|
showSearch:true,
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "deliver",
|
||
|
|
key: "deliver",
|
||
|
|
title: "搬运类型",
|
||
|
|
showSearch:true,
|
||
|
|
width: 130,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "platform",
|
||
|
|
key: "platform",
|
||
|
|
title: "卸货站台",
|
||
|
|
showSearch:true,
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "truckCode",
|
||
|
|
key: "truckCode",
|
||
|
|
title: "车牌号",
|
||
|
|
showSearch:true,
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "driver",
|
||
|
|
key: "driver",
|
||
|
|
title: "司机",
|
||
|
|
showSearch:true,
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "telephone",
|
||
|
|
key: "telephone",
|
||
|
|
title: "联系电话",
|
||
|
|
showSearch:true,
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "customer",
|
||
|
|
key: "customer",
|
||
|
|
title: "客户",
|
||
|
|
showSearch:true,
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "status",
|
||
|
|
key: "status",
|
||
|
|
title: "单据状态",
|
||
|
|
width: 100,
|
||
|
|
dictionary: {
|
||
|
|
type: 'tag',
|
||
|
|
code: 'outBillStatus'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "allotStatus",
|
||
|
|
key: "allotStatus",
|
||
|
|
title: "单据分配状态",
|
||
|
|
width: 130,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "beginDate",
|
||
|
|
key: "beginDate",
|
||
|
|
title: "开始时间",
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "endDate",
|
||
|
|
key: "endDate",
|
||
|
|
title: "结束时间",
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
dataIndex: "createBy",
|
||
|
|
key: "createBy",
|
||
|
|
title: "录入人",
|
||
|
|
width: 120,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "createTime",
|
||
|
|
key: "createTime",
|
||
|
|
title: "录入时间",
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "updateBy",
|
||
|
|
key: "updateBy",
|
||
|
|
title: "修改人",
|
||
|
|
width: 120,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "updateTime",
|
||
|
|
key: "updateTime",
|
||
|
|
title: "修改时间",
|
||
|
|
width: 200,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
dataIndex: "remark",
|
||
|
|
key: "remark",
|
||
|
|
title: "备注",
|
||
|
|
width: 100,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
/// 数据来源 [模拟]
|
||
|
|
const fetch = async (param) => {
|
||
|
|
var response = await page(param);
|
||
|
|
return {
|
||
|
|
total: response.data.total,
|
||
|
|
data: response.data.record,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
// 删除数据
|
||
|
|
const removeMethod = (record) => {
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要删除?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: removeKey
|
||
|
|
});
|
||
|
|
remove({
|
||
|
|
"id": record.id
|
||
|
|
}).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "删除成功",
|
||
|
|
key: removeKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "删除失败",
|
||
|
|
key: removeKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 批量删除
|
||
|
|
const removeBatchMethod = (ids) => {
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要删除?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: removeBatchKey
|
||
|
|
});
|
||
|
|
removeBatch({
|
||
|
|
"ids": ids
|
||
|
|
}).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "删除成功",
|
||
|
|
key: removeBatchKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "删除失败",
|
||
|
|
key: removeBatchKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// billAllot 分配单据
|
||
|
|
const billAllotMethod = (ids) => {
|
||
|
|
if (ids == undefined || ids.length == 0) {
|
||
|
|
message.error({
|
||
|
|
content: "请先选择需要操作的单据信息",
|
||
|
|
key: billsAllotKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要分配选择的数据?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: billsAllotKey
|
||
|
|
});
|
||
|
|
billsAllot(toRaw(ids)).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "单据分配成功",
|
||
|
|
key: billsAllotKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "单据分配失败",
|
||
|
|
key: billsAllotKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//billsConform 确认单据
|
||
|
|
const billsConformMethod = (ids) => {
|
||
|
|
if (ids == undefined || ids.length == 0) {
|
||
|
|
message.error({
|
||
|
|
content: "请先选择需要操作的单据信息",
|
||
|
|
key: billsConformKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要确认选择的数据?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: billsConformKey
|
||
|
|
});
|
||
|
|
billsConform(toRaw(ids)).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "单据确认成功",
|
||
|
|
key: billsConformKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "单据确认失败",
|
||
|
|
key: billsConformKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//billsExecute 执行单据
|
||
|
|
const billsExecuteMethod = (ids) => {
|
||
|
|
if (ids == undefined || ids.length == 0) {
|
||
|
|
message.error({
|
||
|
|
content: "请先选择需要操作的单据信息",
|
||
|
|
key: billsExecuteKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要执行选择的数据?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: billsExecuteKey
|
||
|
|
});
|
||
|
|
billsExecute(toRaw(ids)).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "单据执行成功",
|
||
|
|
key: billsExecuteKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "单据执行失败",
|
||
|
|
key: billsExecuteKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//billsCancelAllot 取消分配
|
||
|
|
const billsCancelAllotMethod = (ids) => {
|
||
|
|
if (ids == undefined || ids.length == 0) {
|
||
|
|
message.error({
|
||
|
|
content: "请先选择需要操作的单据信息",
|
||
|
|
key: billsCancelAllotKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
modal.confirm({
|
||
|
|
title: '您是否确定要取消分配选择的数据?',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
okText: '确定',
|
||
|
|
cancelText: '取消',
|
||
|
|
onOk() {
|
||
|
|
message.loading({
|
||
|
|
content: "提交中...",
|
||
|
|
key: billsCancelAllotKey
|
||
|
|
});
|
||
|
|
billsCancelAllot(toRaw(ids)).then((response) => {
|
||
|
|
if (response.success) {
|
||
|
|
message.success({
|
||
|
|
content: "单据取消分配成功",
|
||
|
|
key: billsCancelAllotKey,
|
||
|
|
duration: 1
|
||
|
|
}).then(() => {
|
||
|
|
tableRef.value.reload()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
message.error({
|
||
|
|
content: "单据取消分配失败",
|
||
|
|
key: billsCancelAllotKey,
|
||
|
|
duration: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/// 工具栏
|
||
|
|
const toolbar = [{
|
||
|
|
label: "新增",
|
||
|
|
code: "wms:outBill:add",
|
||
|
|
event: function() {
|
||
|
|
state.currentBill = {}
|
||
|
|
state.visibleSave = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "删除",
|
||
|
|
code: "wms:outBill:removeBatch",
|
||
|
|
event: function() {
|
||
|
|
removeBatchMethod(state.selectedRowKeys)
|
||
|
|
},
|
||
|
|
type: 'danger'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "分配",
|
||
|
|
code: "wms:outBill:allot",
|
||
|
|
event: function() {
|
||
|
|
billAllotMethod(state.selectedRowKeys)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "确认",
|
||
|
|
code: "wms:outBill:confirm",
|
||
|
|
event: function() {
|
||
|
|
billsConformMethod(state.selectedRowKeys)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "执行",
|
||
|
|
code: "wms:outBill:execute",
|
||
|
|
event: function() {
|
||
|
|
billsExecuteMethod(state.selectedRowKeys)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "取消分配",
|
||
|
|
code: "wms:outBill:CancelAllot",
|
||
|
|
event: function() {
|
||
|
|
billsCancelAllotMethod(state.selectedRowKeys)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
/// 行操作
|
||
|
|
const operate = [{
|
||
|
|
label: "查看",
|
||
|
|
code: "wms:outBill:look",
|
||
|
|
event: function(record) {
|
||
|
|
console.log(record)
|
||
|
|
state.visibleDetail = true, state.recordDetail = record
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "修改",
|
||
|
|
code: "wms:outBill:edit",
|
||
|
|
event: function(record) {
|
||
|
|
console.log("这里")
|
||
|
|
state.visibleEdit = true, state.recordEdit = record
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "删除",
|
||
|
|
code: "wms:outBill:remove",
|
||
|
|
event: function(record) {
|
||
|
|
removeMethod(record)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// label: "新增明细",
|
||
|
|
// event: function(record) {
|
||
|
|
// state.currentBill = record
|
||
|
|
// state.visibleSave = true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const pagination = {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
showSizeChanger: true, // 显示可改变每页条数
|
||
|
|
pageSizeOptions: ["5", "10", "20", "50"], // 每页条数选项设置
|
||
|
|
showTotal: total => `共 ${total} 条记录`, // 显示总条数
|
||
|
|
showSizeChange: (current, pageSize) => (this.pageSize = pageSize) // 改变每页条数时更新显示
|
||
|
|
};
|
||
|
|
|
||
|
|
const state = reactive({
|
||
|
|
selectedRowKeys: [],
|
||
|
|
param: {
|
||
|
|
|
||
|
|
},
|
||
|
|
visibleEdit: false,
|
||
|
|
visibleSave: false,
|
||
|
|
visibleDetail: false,
|
||
|
|
|
||
|
|
recordDetail: {},
|
||
|
|
recordEdit: {},
|
||
|
|
currentBill: {},
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
const searchParam = [{
|
||
|
|
key: "invoiceCode",
|
||
|
|
type: "input",
|
||
|
|
label: "单据号"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "extCode",
|
||
|
|
type: "input",
|
||
|
|
label: "外部单据号"
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const search = function(value) {
|
||
|
|
console.log("主表查询" + JSON.stringify(value))
|
||
|
|
console.log(value)
|
||
|
|
state.param = value
|
||
|
|
tableRef.value.reload()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const onSelectChange = selectedRowKeys => {
|
||
|
|
state.selectedRowKeys = selectedRowKeys;
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeSave = function() {
|
||
|
|
state.visibleSave = false
|
||
|
|
tableRef.value.reload()
|
||
|
|
}
|
||
|
|
|
||
|
|
const closeEdit = function() {
|
||
|
|
state.visibleEdit = false
|
||
|
|
tableRef.value.reload()
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
state,
|
||
|
|
fetch,
|
||
|
|
search,
|
||
|
|
toolbar,
|
||
|
|
columns,
|
||
|
|
operate,
|
||
|
|
closeSave,
|
||
|
|
closeEdit,
|
||
|
|
pagination,
|
||
|
|
searchParam,
|
||
|
|
onSelectChange,
|
||
|
|
tableRef
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|