DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 生产管理

Browse Source
This commit is contained in:
砂糖
2025-08-26 16:51:23 +08:00
parent 666c42a128
commit 503b30ced5
13 changed files with 838 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/views/wms/order/components/PSpecSelect.vue
View File

@@ -31,7 +31,7 @@
<script>
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
import { debounce } from 'lodash' // 防抖：避免频繁触发接口请求
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
export default {
name: 'MSpecSelect',

56
klp-ui/src/views/wms/order/customer.vue
View File

@@ -9,62 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="手机" prop="mobile">
<el-input
v-model="queryParams.mobile"
placeholder="请输入手机"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="电话" prop="telephone">
<el-input
v-model="queryParams.telephone"
placeholder="请输入电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input
v-model="queryParams.qq"
placeholder="请输入QQ"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="微信" prop="wechat">
<el-input
v-model="queryParams.wechat"
placeholder="请输入微信"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
v-model="queryParams.email"
placeholder="请输入邮箱"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="地区编号" prop="areaId">
<el-input
v-model="queryParams.areaId"
placeholder="请输入地区编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="详细地址" prop="detailAddress">
<el-input
v-model="queryParams.detailAddress"
placeholder="请输入详细地址"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="客户等级" prop="level">
<el-input
v-model="queryParams.level"

116
klp-ui/src/views/wms/order/panels/detail.vue
View File

@@ -1,60 +1,36 @@
<template>
<div>
<!-- 订单信息展示区域 -->
<el-descriptions title="订单信息" class="margin-top mb8" :column="4" size="medium" border v-if="orderInfo">
<!-- <el-descriptions title="订单信息" class="margin-top mb8" :column="4" size="medium" border v-if="orderInfo">
<el-descriptions-item>
<template slot="label">
订单编号
</template>
{{ orderInfo.orderCode }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
{{ orderInfo.orderCode }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
订单状态
</template>
<dict-tag :options="dict.type.order_status" :value="orderInfo.orderStatus"/>
</el-descriptions-item>
</el-descriptions>
<dict-tag :options="dict.type.order_status" :value="orderInfo.orderStatus" />
</el-descriptions-item>
</el-descriptions> -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
:disabled="!canEdit"
@click="handleAdd"
>新增</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="!canEdit"
@click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single || !canEdit"
@click="handleUpdate"
>修改</el-button>
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single || !canEdit"
@click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple || !canEdit"
@click="handleDelete"
>删除</el-button>
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || !canEdit"
@click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
</el-row>
@@ -78,39 +54,19 @@
<el-table-column label="含税单价" align="center" prop="taxPrice" />
<el-table-column label="无税单价" align="center" prop="noTaxPrice" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
:disabled="!canEdit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="handleSpec(scope.row)"
>产品规范</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
:disabled="!canEdit"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="!canEdit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="!canEdit"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改订单明细对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -131,7 +87,8 @@
<el-input-number :controls=false controls-position="right" v-model="form.taxPrice" placeholder="请输入含税单价" />
</el-form-item>
<el-form-item label="无税单价" prop="noTaxPrice">
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价" :min="0" :max="form.taxPrice" />
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价"
:min="0" :max="form.taxPrice" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
@@ -143,12 +100,11 @@
</div>
</el-dialog>
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="500px" append-to-body>
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit"/>
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit" />
<div v-else-if="canEdit">
<el-select placeholder="请选择产品规范" @change="handleChangeSpec">
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.specName" :value="item.groupId" />
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
<template #empty>
<el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
</template>
@@ -294,7 +250,7 @@ export default {
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.detailId)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
handleAdd() {
@@ -383,7 +339,13 @@ export default {
// 确认更换
this.$modal && this.$modal.confirm('是否确认更换产品规范？').then(() => {
this.form.groupId = groupId;
this.submitForm();
updateOrderDetail(this.form).then(response => {
this.$modal && this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
});
},
handleAddSpec() {
@@ -396,4 +358,8 @@ export default {
</script>
<style scoped>
.el-button--text {
margin: 0 4px;
padding: 0;
}
</style>

785
klp-ui/src/views/wms/order/panels/orderPage.vue
View File

@@ -1,169 +1,200 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input
v-model="queryParams.salesManager"
placeholder="请输入销售经理"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 左右布局容器 -->
<el-row :gutter="20">
<!-- 左侧：自定义简洁订单列表区（占8列） -->
<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>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
<!-- 功能按钮区 -->
<!-- <el-row :gutter="10" class="mb-4">
<el-col :span="6">
</el-col>
<el-col :span="6">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
class="w-full">批量删除</el-button>
</el-col>
</el-row> -->
<!-- 自定义简洁列表 -->
<div class="custom-list-container" v-loading="loading">
<!-- 列表项 -->
<div v-for="(item, index) in orderList" :key="item.orderId" class="order-item"
:class="{ 'active': selectedOrderId === item.orderId }" @click="handleRowClick(item)">
<!-- 复选框 -->
<!-- <el-checkbox v-model="selectedIds[item.orderId]" @change.stop="handleCheckboxChange(item, $event)"
class="checkbox"></el-checkbox> -->
<!-- 订单编号 -->
<div class="order-code">
<span class="label">订单编号：</span>
<span class="value">{{ item.orderCode }}</span>
</div>
<!-- 操作按钮组 -->
<div class="order-actions">
<!-- 预订单确认按钮 -->
<el-button size="mini" plain title="预订单确认" type="success" icon="el-icon-check" v-if="isPre"
@click.stop="handleStartProduction(item)"></el-button>
<!-- 删除按钮 -->
<el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
</div>
</div>
<!-- 空状态 -->
<div v-if="orderList.length === 0 && !loading" class="empty-state">
<el-empty description="暂无订单数据" />
</div>
</div>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
<!-- 右侧：详情区（占16列） -->
<el-col :span="18">
<div>
<!-- 未选中行时显示提示 -->
<div v-if="!selectedOrderId" class="empty-tip">
<el-empty description="请从左侧选择一个订单查看详情" />
</div>
<!-- 选中行时显示Tab详情 -->
<div v-else>
<!-- 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-row :gutter="20"> -->
<!-- <el-col :span="12"> -->
<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-col> -->
<!-- <el-col :span="12"> -->
<el-form-item label="订单编号" prop="orderCode">
<el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
</el-form-item>
<!-- </el-col> -->
<!-- <el-col :span="12"> -->
<el-form-item label="客户名称" prop="customerId">
<customer-select style="width: 60%;" v-model="form.customerId" />
</el-form-item>
<!-- </el-col> -->
<!-- <el-col :span="12"> -->
<el-form-item label="销售经理" prop="salesManager">
<el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
</el-form-item>
<!-- </el-col> -->
<!-- <el-col :span="12"> -->
<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-col> -->
<!-- <el-col :span="12"> -->
<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-col> -->
<!-- <el-col :span="12" v-if="!isPre"> -->
<el-form-item label="订单状态" prop="orderStatus">
<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-col> -->
<!-- <el-col :span="24"> -->
<el-form-item label="备注" prop="remark">
<el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
</el-form-item>
<!-- </el-col> -->
<!-- </el-row> -->
<!-- 更新按钮 -->
<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-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单ID" align="center" prop="orderId" v-if="false"/>
<el-table-column label="订单编号" align="center" prop="orderCode" />
<el-table-column label="客户名称" align="center" prop="customerName" />
<el-table-column label="销售经理" align="center" prop="salesManager" />
<el-table-column label="含税金额" align="center" prop="taxAmount" />
<el-table-column label="无税金额" align="center" prop="noTaxAmount" />
<el-table-column label="订单状态" align="center" prop="orderStatus" v-if="!isPre">
<template slot-scope="scope">
<el-select v-model="scope.row.orderStatus" @change="handleOrderStatusChange(scope.row)">
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
</el-select>
<!-- <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/> -->
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="showDetail(scope.row)"
>明细</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="copyOrderId(scope.row)"
>复制订单ID</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-operation"
@click="handleStartProduction(scope.row)"
v-if="!isPre"
>
确认订单
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改订单主对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="form.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input v-model="form.salesManager" placeholder="请输入销售经理" />
</el-form-item>
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.taxAmount" placeholder="请输入含税金额" />
</el-form-item>
<el-form-item label="无税金额" prop="noTaxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.noTaxAmount" placeholder="请输入无税金额" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<!-- 新增订单弹窗 -->
<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="submitForm">确 定</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 订单明细弹窗 -->
<el-dialog title="订单明细" :visible.sync="detailDialogVisible" width="1200px" append-to-body>
<OrderDetailPanel :orderId="detailOrderId" />
</el-dialog>
</div>
</template>
@@ -194,24 +225,26 @@ export default {
EOrderStatus,
// 按钮loading
buttonLoading: false,
// 遮罩层
// 列表加载遮罩
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
// 选中的订单ID集合（用于批量操作）
selectedIds: {},
// 非多个禁用（批量删除用）
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 订单主表格数据
// 订单列表数据
orderList: [],
// 弹出层标题
// 新增弹窗标题
title: "",
// 是否显示弹出层
// 新增弹窗显示状态
open: false,
// 当前选中的订单ID（控制右侧详情显示）
selectedOrderId: null,
// 右侧激活的Tab
activeTab: "orderDetail",
// 查询参数
queryParams: {
pageNum: 1,
@@ -219,50 +252,10 @@ export default {
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: this.orderQueryStatus,
orderStatus: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
detailDialogVisible: false,
detailOrderId: null,
clacDialogVisible: false,
clacOrderId: null,
};
},
created() {
this.getList();
},
methods: {
/** 查询订单主列表 */
getList() {
this.loading = true;
listByStatus(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
goDashboard() {
this.$router.push('/shop/order/dashboard');
},
handleOrderStatusChange(row) {
// console.log(row);
updateOrder(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.getList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
form: {
orderId: undefined,
orderCode: undefined,
customerId: undefined,
@@ -274,118 +267,354 @@ export default {
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
taxAmount: undefined,
noTaxAmount: undefined,
};
this.resetForm("form");
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 = {};
this.checkMultipleStatus();
// 如果之前选中的订单不在列表中了，清空选中状态
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;
});
},
/** 处理复选框变化 */
handleCheckboxChange(item, checked) {
this.selectedIds[item.orderId] = checked;
this.checkMultipleStatus();
},
/** 检查批量操作状态 */
checkMultipleStatus() {
const selectedCount = Object.values(this.selectedIds).filter(checked => checked).length;
this.multiple = selectedCount === 0;
},
/** 订单状态变更 */
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();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.orderId)
this.single = selection.length!==1
this.multiple = !selection.length
/** 重置表单 */
resetForm(formRef) {
if (this.$refs[formRef]) {
this.$refs[formRef].resetFields();
}
},
copyOrderId(row) {
// 获取浏览器剪切板对象并复制row.orderId
// 先检查是否支持
/** 复制订单ID */
copyOrderId(orderId) {
if (navigator.clipboard) {
navigator.clipboard.writeText(row.orderId);
this.$modal.msgSuccess("复制成功");
navigator.clipboard.writeText(orderId).then(() => {
this.$modal.msgSuccess("复制成功");
}).catch(() => {
this.$modal.msgError("复制失败，请手动复制");
});
} else {
this.$modal.msgError("浏览器不支持复制功能");
}
},
/** 新增按钮操作 */
/** 新增订单 */
handleAdd() {
this.reset();
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 = "添加订单主";
this.title = "添加订单";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const orderId = row.orderId || this.ids
getOrder(orderId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改订单主";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
/** 提交新增表单 */
submitAddForm() {
this.$refs["addForm"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
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) {
const orderIds = row.orderId || this.ids;
this.$modal.confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项？').then(() => {
// 获取要删除的订单ID
let orderIds;
if (row) {
// 单条删除
orderIds = [row.orderId];
} else {
// 批量删除
orderIds = Object.entries(this.selectedIds)
.filter(([id, checked]) => checked)
.map(([id]) => id);
}
if (!orderIds.length) {
this.$modal.msgWarning("请选择要删除的订单");
return;
}
this.$modal.confirm(`是否确认删除选中的 ${orderIds.length} 个订单？`).then(() => {
this.loading = true;
return delOrder(orderIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
// 如果删除的是当前选中的订单，清空详情
if (row && this.selectedOrderId === row.orderId) {
this.selectedOrderId = null;
}
this.getList();
}).catch(() => {
this.$modal.msgError("删除失败");
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/order/export', {
...this.queryParams
}, `order_${new Date().getTime()}.xlsx`)
},
showDetail(row) {
this.detailOrderId = row.orderId;
this.detailDialogVisible = true;
},
showClac(row) {
this.clacOrderId = row.orderId;
this.clacDialogVisible = true;
},
/** 预订单确认 */
handleStartProduction(row) {
updateOrder({
orderId: row.orderId,
orderStatus: 1
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("转化失败");
});
}
}
};
</script>
<style scoped>
/* 页面容器样式 */
.page-container {
height: 100%;
padding: 16px;
}
/* 自定义列表容器 */
.custom-list-container {
max-height: calc(100vh - 220px);
overflow-y: auto;
padding-right: 8px;
margin-top: 10px;
}
/* 列表项样式 */
.order-item {
padding: 12px 16px;
margin-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 选中状态 */
.order-item.active {
border-left: 3px solid #409eff;
background-color: #f5f7fa;
}
/* 订单编号样式 */
.order-code {
display: flex;
align-items: center;
}
.order-code .label {
color: #606266;
margin-right: 6px;
font-size: 13px;
}
.order-code .value {
color: #303133;
font-weight: 500;
font-size: 14px;
}
/* 操作按钮组 */
.order-actions {
display: flex;
align-items: center;
gap: 4px;
}
/* 复选框样式调整 */
.checkbox {
margin-left: 8px;
}
/* 空状态样式 */
.empty-state {
padding: 40px 0;
text-align: center;
}
/* 右侧详情容器 */
.detail-container {
height: 100%;
background: #fff;
border-radius: 4px;
padding: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
min-height: calc(100vh - 32px);
}
/* 空提示样式 */
.empty-tip {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
/* 表单样式调整 */
.el-form-item {
margin-bottom: 16px;
}
::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>