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

🎈 perf: 处理一些细节问题

Browse Source
This commit is contained in:
砂糖
2025-08-27 16:25:52 +08:00
parent cd822d4296
commit 278b0c8258
12 changed files with 484 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,8 +65,8 @@
</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>
@@ -106,7 +106,7 @@
<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>
<el-button @click="handleAddSpec" style="width: 100%;">新增产品规范</el-button>
</template>
</el-select>
</div>
@@ -158,7 +158,7 @@ export default {
EOrderStatus,
queryParams: {
pageNum: 1,
pageSize: 20,
pageSize: 100,
orderId: this.orderId,
productId: undefined,
quantity: undefined,

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

@@ -2,7 +2,7 @@
<div class="app-container">
<!-- 左右布局容器 -->
<el-row :gutter="20">
<!-- 左侧：自定义简洁订单列表区（占8列） -->
<!-- 左侧：使用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"
@@ -19,54 +19,33 @@
</el-row>
</el-form>
<!-- 功能按钮区 -->
<!-- <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> -->
<!-- klp-list组件 -->
<klp-list
:list-data="orderList"
:model-value="selectedIds"
title-field="orderCode"
list-key="orderId"
title-label="订单编号"
:loading="loading"
@item-click="handleRowClick"
>
<!-- 自定义操作按钮 -->
<template #actions="{ item }">
<!-- 预订单确认按钮 -->
<el-button size="mini" plain title="预订单确认" type="success" icon="el-icon-check" v-if="isPre"
@click.stop="handleStartProduction(item)"></el-button>
<!-- 自定义简洁列表 -->
<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>
<!-- 删除按钮 -->
<el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
</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>
<!-- 右侧：详情区（占16列） -->
<!-- 右侧：详情区（占18列） -->
<el-col :span="18">
<div>
<!-- 未选中行时显示提示 -->
@@ -81,56 +60,45 @@
<!-- 订单信息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 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">
@@ -203,10 +171,11 @@ import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/w
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 },
components: { OrderDetailPanel, CustomerSelect, klpList },
dicts: ['order_status'],
props: {
isPre: {
@@ -227,10 +196,8 @@ export default {
buttonLoading: false,
// 列表加载遮罩
loading: true,
// 选中的订单ID集合（用于批量操作）
// 选中的订单ID集合
selectedIds: {},
// 非多个禁用（批量删除用）
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
@@ -304,7 +271,6 @@ export default {
// 重置选中状态
this.selectedIds = {};
this.checkMultipleStatus();
// 如果之前选中的订单不在列表中了，清空选中状态
if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
@@ -337,18 +303,6 @@ export default {
});
},
/** 处理复选框变化 */
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 => {
@@ -463,30 +417,13 @@ export default {
/** 删除订单 */
handleDelete(row) {
// 获取要删除的订单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.$modal.confirm(`是否确认删除订单"${row.orderCode}"？`).then(() => {
this.loading = true;
return delOrder(orderIds);
return delOrder([row.orderId]);
}).then(() => {
this.$modal.msgSuccess("删除成功");
// 如果删除的是当前选中的订单，清空详情
if (row && this.selectedOrderId === row.orderId) {
if (this.selectedOrderId === row.orderId) {
this.selectedOrderId = null;
}
this.getList();
@@ -525,78 +462,6 @@ export default {
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;
@@ -617,4 +482,4 @@ export default {
padding: 0 10px !important;
text-align: center !important;
}
</style>
</style>