574 lines
18 KiB
Vue
574 lines
18 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 左右布局容器 -->
|
||
<el-row :gutter="20">
|
||
<!-- 左侧：使用klp-list组件（占6列） -->
|
||
<el-col :span="6" style="display: table-cell;">
|
||
<!-- 搜索表单 - 精简搜索项 -->
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
|
||
class="mb-4">
|
||
<el-row :gutter="10">
|
||
<el-col :span="16">
|
||
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @change="handleQuery" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||
class="w-full">新增订单</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<!-- klp-list组件 -->
|
||
<klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleRowClick"
|
||
info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
|
||
<!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
|
||
<template slot="info4" slot-scope="{ item }">
|
||
<span class="info-value info-value--primary">
|
||
{{ item.taxAmount }}元（含税）
|
||
</span>
|
||
</template>
|
||
|
||
<!-- info1 插槽：同理修改插槽语法 -->
|
||
<template slot="info1" slot-scope="{ item }">
|
||
<span class="info-value info-value--primary">
|
||
{{ item.salesManager }}【{{ item.orderCode }}】
|
||
</span>
|
||
</template>
|
||
|
||
<!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
|
||
<template slot="info2" slot-scope="{ item }">
|
||
<dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
|
||
</template>
|
||
|
||
<!-- actions 插槽：操作区 -->
|
||
<template slot="actions" slot-scope="{ item }">
|
||
<el-button
|
||
size="mini"
|
||
plain
|
||
title="预订单确认"
|
||
type="success"
|
||
icon="el-icon-check"
|
||
v-if="isPre"
|
||
@click.stop="handleStartProduction(item)"
|
||
/>
|
||
<el-button
|
||
size="mini"
|
||
plain
|
||
type="primary"
|
||
icon="el-icon-s-operation"
|
||
title="进入排产中心"
|
||
@click.stop="goApsSchedule(item)"
|
||
>
|
||
排产
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="text"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
@click.stop="handleDelete(item)"
|
||
/>
|
||
</template>
|
||
</klp-list>
|
||
|
||
<!-- 分页组件 -->
|
||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
|
||
</el-col>
|
||
|
||
<!-- 右侧：详情区（占18列） -->
|
||
<el-col :span="18">
|
||
<div>
|
||
<!-- 未选中行时显示提示 -->
|
||
<div v-if="!selectedOrderId" class="empty-tip">
|
||
<el-empty description="请从左侧选择一个订单查看详情" />
|
||
</div>
|
||
|
||
<!-- 选中行时显示Tab详情 -->
|
||
<div v-else>
|
||
<!-- 订单详情操作区 -->
|
||
<div class="order-detail-header">
|
||
<div class="order-detail-title">
|
||
当前订单：{{ form.orderCode || form.orderId }}
|
||
</div>
|
||
<div class="order-detail-actions">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-magic-stick"
|
||
:disabled="!form.orderId"
|
||
@click="goApsOneKeySchedule"
|
||
>
|
||
排产
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- Tab容器 -->
|
||
<el-tabs v-loading="loading" v-model="activeTab" type="border-card" class="mt-2">
|
||
<!-- 订单信息Tab -->
|
||
<el-tab-pane label="订单信息" name="orderInfo">
|
||
<el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
|
||
<el-form-item label="订单ID" prop="orderId">
|
||
<el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
|
||
<el-button style="padding: -1;" slot="append" size="mini" type="text" icon="el-icon-document-copy"
|
||
@click.stop="copyOrderId(form.orderId)"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="订单编号" prop="orderCode">
|
||
<el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="客户名称" prop="customerId">
|
||
<customer-select style="width: 60%;" v-model="form.customerId" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="销售经理" prop="salesManager">
|
||
<el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="含税金额" prop="taxAmount">
|
||
<el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00"
|
||
precision="2" :min="0" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||
<el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00"
|
||
precision="2" :min="0" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="订单状态" prop="orderStatus" v-if="!isPre">
|
||
<el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange"
|
||
size="mini">
|
||
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label"
|
||
:value="parseInt(item.value)" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
|
||
</el-form-item>
|
||
|
||
<!-- 更新按钮 -->
|
||
<el-form-item class="text-right">
|
||
<el-button type="primary" size="mini" :loading="buttonLoading"
|
||
@click="submitDetailForm">更新订单信息</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
|
||
<!-- 订单详情Tab -->
|
||
<el-tab-pane label="订单详情" name="orderDetail">
|
||
<div class="mt-4">
|
||
<OrderDetailPanel :orderId="selectedOrderId" />
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 新增订单弹窗 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||
<el-form ref="addForm" :model="form" :rules="rules" label-width="100px">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="订单编号" prop="orderCode">
|
||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="客户名称" prop="customerId">
|
||
<customer-select v-model="form.customerId" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="销售经理" prop="salesManager">
|
||
<el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="含税金额" prop="taxAmount">
|
||
<el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额"
|
||
precision="2" :min="0" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||
<el-input-number :controls="false" v-model="form.noTaxAmount" placeholder="请输入无税金额" precision="2"
|
||
:min="0" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
|
||
import OrderDetailPanel from './detail.vue';
|
||
import { EOrderStatus } from "@/utils/enums";
|
||
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
|
||
import klpList from "@/components/KLPUI/KLPList/index.vue";
|
||
|
||
export default {
|
||
name: "Order",
|
||
components: { OrderDetailPanel, CustomerSelect, klpList },
|
||
dicts: ['order_status'],
|
||
props: {
|
||
isPre: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
},
|
||
computed: {
|
||
orderQueryStatus() {
|
||
return this.isPre ? 0 : -1;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 订单状态枚举
|
||
EOrderStatus,
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 列表加载遮罩
|
||
loading: true,
|
||
// 选中的订单ID集合
|
||
selectedIds: {},
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 订单列表数据
|
||
orderList: [],
|
||
// 新增弹窗标题
|
||
title: "",
|
||
// 新增弹窗显示状态
|
||
open: false,
|
||
// 当前选中的订单ID（控制右侧详情显示）
|
||
selectedOrderId: null,
|
||
// 右侧激活的Tab
|
||
activeTab: "orderDetail",
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
orderCode: undefined,
|
||
customerId: undefined,
|
||
salesManager: undefined,
|
||
orderStatus: undefined,
|
||
},
|
||
// 表单参数
|
||
form: {
|
||
orderId: undefined,
|
||
orderCode: undefined,
|
||
customerId: undefined,
|
||
salesManager: undefined,
|
||
orderStatus: undefined,
|
||
remark: undefined,
|
||
delFlag: undefined,
|
||
createTime: undefined,
|
||
createBy: undefined,
|
||
updateTime: undefined,
|
||
updateBy: undefined,
|
||
taxAmount: 0,
|
||
noTaxAmount: 0,
|
||
},
|
||
// 表单校验规则
|
||
rules: {
|
||
orderCode: [
|
||
{ required: true, message: "请输入订单编号", trigger: "blur" }
|
||
],
|
||
customerId: [
|
||
{ required: true, message: "请选择客户名称", trigger: "change" }
|
||
],
|
||
salesManager: [
|
||
{ required: true, message: "请输入销售经理", trigger: "blur" }
|
||
],
|
||
taxAmount: [
|
||
{ required: true, message: "请输入含税金额", trigger: "blur" }
|
||
],
|
||
noTaxAmount: [
|
||
{ required: true, message: "请输入无税金额", trigger: "blur" }
|
||
]
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
/** 查询订单列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listByStatus(this.queryParams).then(response => {
|
||
this.orderList = response.rows;
|
||
this.total = response.total;
|
||
|
||
// 重置选中状态
|
||
this.selectedIds = {};
|
||
|
||
// 如果之前选中的订单不在列表中了，清空选中状态
|
||
if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
|
||
this.selectedOrderId = null;
|
||
}
|
||
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
/** 点击列表项加载详情 */
|
||
handleRowClick(item) {
|
||
this.selectedOrderId = item.orderId;
|
||
this.loadOrderDetail(item.orderId);
|
||
},
|
||
|
||
/** 加载订单详情 */
|
||
loadOrderDetail(orderId) {
|
||
this.buttonLoading = true;
|
||
getOrder(orderId).then(response => {
|
||
this.form = { ...response.data };
|
||
this.form.taxAmount = this.form.taxAmount || 0;
|
||
this.form.noTaxAmount = this.form.noTaxAmount || 0;
|
||
}).catch(() => {
|
||
this.$modal.msgError("加载订单详情失败");
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
},
|
||
|
||
/** 订单状态变更 */
|
||
handleOrderStatusChange() {
|
||
updateOrder(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.$modal.msgError("修改失败");
|
||
this.loadOrderDetail(this.selectedOrderId); // 失败后重新加载原数据
|
||
});
|
||
},
|
||
|
||
/** 取消新增 */
|
||
cancel() {
|
||
this.open = false;
|
||
this.resetForm("addForm");
|
||
this.form = {
|
||
orderId: undefined,
|
||
orderCode: undefined,
|
||
customerId: undefined,
|
||
salesManager: undefined,
|
||
orderStatus: this.orderQueryStatus,
|
||
remark: undefined,
|
||
taxAmount: 0,
|
||
noTaxAmount: 0,
|
||
};
|
||
},
|
||
|
||
/** 搜索 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
|
||
/** 重置搜索 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||
this.handleQuery();
|
||
},
|
||
|
||
/** 重置表单 */
|
||
resetForm(formRef) {
|
||
if (this.$refs[formRef]) {
|
||
this.$refs[formRef].resetFields();
|
||
}
|
||
},
|
||
|
||
/** 复制订单ID */
|
||
copyOrderId(orderId) {
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(orderId).then(() => {
|
||
this.$modal.msgSuccess("复制成功");
|
||
}).catch(() => {
|
||
this.$modal.msgError("复制失败，请手动复制");
|
||
});
|
||
} else {
|
||
this.$modal.msgError("浏览器不支持复制功能");
|
||
}
|
||
},
|
||
|
||
/** 新增订单 */
|
||
handleAdd() {
|
||
this.resetForm("addForm");
|
||
this.form = {
|
||
orderId: undefined,
|
||
orderCode: undefined,
|
||
customerId: undefined,
|
||
salesManager: undefined,
|
||
orderStatus: this.orderQueryStatus,
|
||
remark: undefined,
|
||
taxAmount: 0,
|
||
noTaxAmount: 0,
|
||
};
|
||
this.open = true;
|
||
this.title = "添加订单";
|
||
},
|
||
|
||
/** 提交新增表单 */
|
||
submitAddForm() {
|
||
this.$refs["addForm"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
addOrder(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.$modal.msgError("新增失败");
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/** 提交详情更新表单 */
|
||
submitDetailForm() {
|
||
this.$refs["detailForm"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
updateOrder(this.form).then(response => {
|
||
this.$modal.msgSuccess("更新成功");
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.$modal.msgError("更新失败");
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/** 删除订单 */
|
||
handleDelete(row) {
|
||
this.$modal.confirm(`是否确认删除订单"${row.orderCode}"？`).then(() => {
|
||
this.loading = true;
|
||
return delOrder([row.orderId]);
|
||
}).then(() => {
|
||
this.$modal.msgSuccess("删除成功");
|
||
// 如果删除的是当前选中的订单，清空详情
|
||
if (this.selectedOrderId === row.orderId) {
|
||
this.selectedOrderId = null;
|
||
}
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.$modal.msgError("删除失败");
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
/** 预订单确认 */
|
||
handleStartProduction(row) {
|
||
this.$modal.confirm(`是否确认将订单"${row.orderCode}"转为正式订单？`).then(() => {
|
||
return updateOrder({
|
||
orderId: row.orderId,
|
||
orderStatus: 1
|
||
});
|
||
}).then(response => {
|
||
this.$modal.msgSuccess("已转化为正式订单");
|
||
if (this.selectedOrderId === row.orderId) {
|
||
this.selectedOrderId = null;
|
||
}
|
||
this.getList();
|
||
}).catch(() => {
|
||
this.$modal.msgError("转化失败");
|
||
});
|
||
},
|
||
|
||
/** 跳转到 APS 排产中心，携带当前订单标识 */
|
||
goApsSchedule(row) {
|
||
if (!row || !row.orderId) {
|
||
this.$modal.msgWarning("当前订单数据异常，无法进入排产");
|
||
return;
|
||
}
|
||
this.$router
|
||
.push({
|
||
path: "/aps/index",
|
||
query: { orderId: row.orderId, orderCode: row.orderCode }
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
/** 从订单详情一键排产并查看结果 */
|
||
goApsOneKeySchedule() {
|
||
if (!this.form || !this.form.orderId) {
|
||
this.$modal.msgWarning("请先选择需要排产的订单");
|
||
return;
|
||
}
|
||
this.$router
|
||
.push({
|
||
path: "/aps/index",
|
||
query: { orderId: this.form.orderId, orderCode: this.form.orderCode, autoOneKey: "1" }
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器样式 */
|
||
.page-container {
|
||
height: 100%;
|
||
padding: 16px;
|
||
}
|
||
|
||
/* 空提示样式 */
|
||
.empty-tip {
|
||
height: 400px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 表单样式调整 */
|
||
.el-form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.order-detail-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
}
|
||
.order-detail-title {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
::v-deep .el-input-group__append,
|
||
::v-deep .el-input-group__prepend {
|
||
width: 20px !important;
|
||
box-sizing: border-box !important;
|
||
padding: 0 10px !important;
|
||
text-align: center !important;
|
||
}
|
||
</style>
|