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

feat(wms): 新增发货计划订单明细组件和操作记录功能

Browse Source 
添加发货计划订单明细组件planOrder.vue，实现订单明细的增删改查功能
新增发货计划钢卷操作记录API和相关功能，记录钢卷的插入和删除操作
优化发货计划页面布局和样式，分离订单明细和钢卷管理区域
This commit is contained in:
砂糖
2025-12-17 15:59:56 +08:00
parent 57616ed494
commit a0652ca5fb
6 changed files with 643 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
klp-ui/src/api/wms/coil.js
View File

@@ -148,4 +148,19 @@ export function listCoilByIds(coilIds) {
pageSize: 1000
}
})
}
// 根据钢卷id查询最近的操作人和操作时间
export function listCoilOperation({coilIds, planId}) {
return request({
url: '/wms/deliveryPlanCoilOperate/coilOperate',
method: 'get',
params: {
// 至少要穿一个空字符串兜底
coilIds: coilIds,
planId,
pageNum: 1,
pageSize: 1000
}
})
}

44
klp-ui/src/api/wms/deliveryPlanCoilOperate.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询发货计划钢卷操作记录列表
export function listDeliveryPlanCoilOperate(query) {
return request({
url: '/wms/deliveryPlanCoilOperate/list',
method: 'get',
params: query
})
}
// 查询发货计划钢卷操作记录详细
export function getDeliveryPlanCoilOperate(operateId) {
return request({
url: '/wms/deliveryPlanCoilOperate/' + operateId,
method: 'get'
})
}
// 新增发货计划钢卷操作记录
export function addDeliveryPlanCoilOperate(data) {
return request({
url: '/wms/deliveryPlanCoilOperate',
method: 'post',
data: data
})
}
// 修改发货计划钢卷操作记录
export function updateDeliveryPlanCoilOperate(data) {
return request({
url: '/wms/deliveryPlanCoilOperate',
method: 'put',
data: data
})
}
// 删除发货计划钢卷操作记录
export function delDeliveryPlanCoilOperate(operateId) {
return request({
url: '/wms/deliveryPlanCoilOperate/' + operateId,
method: 'delete'
})
}

44
klp-ui/src/api/wms/deliveryPlanDetail.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询发货计划明细列表
export function listDeliveryPlanDetail(query) {
return request({
url: '/wms/deliveryPlanDetail/list',
method: 'get',
params: query
})
}
// 查询发货计划明细详细
export function getDeliveryPlanDetail(detailId) {
return request({
url: '/wms/deliveryPlanDetail/' + detailId,
method: 'get'
})
}
// 新增发货计划明细
export function addDeliveryPlanDetail(data) {
return request({
url: '/wms/deliveryPlanDetail',
method: 'post',
data: data
})
}
// 修改发货计划明细
export function updateDeliveryPlanDetail(data) {
return request({
url: '/wms/deliveryPlanDetail',
method: 'put',
data: data
})
}
// 删除发货计划明细
export function delDeliveryPlanDetail(detailId) {
return request({
url: '/wms/deliveryPlanDetail/' + detailId,
method: 'delete'
})
}

0
klp-ui/src/views/wms/delivery/components/planList.vue Normal file
View File

330
klp-ui/src/views/wms/delivery/components/planOrder.vue Normal file
View File

@@ -0,0 +1,330 @@
<template>
<div>
<el-descriptions title="订单明细">
</el-descriptions>
<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-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="!currentRow.detailId"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="!currentRow.detailId"
@click="handleDelete"
>删除</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" border :data="deliveryPlanDetailList" highlight-current-row @row-click="handleRowClick">
<!-- <el-table-column label="订单ID" align="center" prop="orderId" /> -->
<el-table-column label="订单详情" align="center" prop="orderDetail" width="150px" show-overflow-tooltip/>
<!-- <el-table-column label="客户ID" align="center" prop="customerId" /> -->
<el-table-column label="客户名称" align="center" prop="customerDetail" width="150px" show-overflow-tooltip/>
<el-table-column label="地址" align="center" prop="address" width="150px" show-overflow-tooltip/>
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
<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>
</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="orderId">
<!-- 支出远程搜索的下拉选 -->
<!-- <el-input v-model="form.orderId" placeholder="请输入订单ID" /> -->
<el-select v-model="form.orderId" placeholder="选择订单后自动填写其他信息" filterable @change="handleOrderChange">
<el-option
v-for="item in orderList"
:key="item.orderId"
:label="item.orderCode"
:value="item.orderId"
/>
</el-select>
</el-form-item>
<el-form-item label="订单详情" prop="orderDetail">
<el-input v-model="form.orderDetail" placeholder="请输入内容" />
</el-form-item>
<!-- 这个不显示 -->
<!-- <el-form-item label="客户ID" prop="customerId">
<el-input v-model="form.customerId" placeholder="请输入客户ID" />
</el-form-item> -->
<el-form-item label="客户详情" prop="customerDetail">
<el-input v-model="form.customerDetail" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDeliveryPlanDetail, getDeliveryPlanDetail, delDeliveryPlanDetail, addDeliveryPlanDetail, updateDeliveryPlanDetail } from "@/api/wms/deliveryPlanDetail";
import { listOrder } from '@/api/crm/order'
export default {
name: "DeliveryPlanDetail",
props: {
planId: {
type: String,
default: undefined
}
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 发货计划明细表格数据
deliveryPlanDetailList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
planId: this.planId,
orderId: undefined,
orderDetail: undefined,
customerId: undefined,
customerDetail: undefined,
address: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
orderList: [],
currentRow: {}
};
},
created() {
// this.getList();
this.getOrder();
},
watch: {
planId: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.queryParams.planId = newVal;
this.getList();
this.currentRow = {};
}
},
immediate: true
}
},
methods: {
/** 查询发货计划明细列表 */
getList() {
this.loading = true;
listDeliveryPlanDetail(this.queryParams).then(response => {
this.deliveryPlanDetailList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getOrder() {
listOrder({
orderId: this.form.orderId,
pageNum: 1,
pageSize: 999,
orderType: 1
}).then(response => {
this.orderList = response.rows;
})
},
handleRowClick(row) {
this.currentRow = row;
// this.form = {
// detailId: row.detailId,
// planId: this.planId,
// orderId: row.orderId,
// orderDetail: row.orderDetail,
// customerId: row.customerId,
// customerDetail: row.customerDetail,
// address: row.address,
// remark: row.remark,
// delFlag: row.delFlag,
// createTime: row.createTime,
// createBy: row.createBy,
// updateTime: row.updateTime,
// updateBy: row.updateBy
// };
},
handleOrderChange(orderId) {
console.log(orderId);
// 查找改订单
const order = this.orderList.find(item => item.orderId === orderId);
console.log(order);
if (order) {
this.form.orderDetail = order.orderCode;
this.form.customerId = order.customerId;
this.form.customerDetail = order.customerCode;
this.form.address = order.address;
}
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
detailId: undefined,
planId: this.planId,
orderId: undefined,
orderDetail: undefined,
customerId: undefined,
customerDetail: undefined,
address: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.detailId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加发货计划明细";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const detailId = row.detailId || this.currentRow.detailId;
getDeliveryPlanDetail(detailId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改发货计划明细";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.detailId != null) {
updateDeliveryPlanDetail(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addDeliveryPlanDetail(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const detailIds = row.detailId || this.currentRow.detailId;
this.$modal.confirm('是否确认删除发货计划明细编号为"' + detailIds + '"的数据项？').then(() => {
this.loading = true;
return delDeliveryPlanDetail(detailIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
}
};
</script>

335
klp-ui/src/views/wms/delivery/plan/index.vue
View File

@@ -19,14 +19,6 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
@click="handleUpdate">修改</el-button>
</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>
@@ -34,40 +26,28 @@
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-row :gutter="20" v-loading="loading">
<el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
<!-- 左侧发货计划列表 - 新增left-col类 -->
<el-col :span="5" class="left-col">
<!-- 卡片容器 - 新增left-card-container类 -->
<el-row :gutter="10" v-loading="loading" class="left-card-container">
<el-col :span="24" v-for="(row, index) in deliveryPlanList" :key="row.planId">
<el-card shadow="hover" class="delivery-plan-card" @click.native="handleCardClick(row)">
<div class="card-header">
<el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
<div class="card-title">{{ row.planName }}</div>
</div>
<div class="card-content">
<div class="content-item">
<span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
<span>
<el-tag type="success" v-if="row.auditStatus == 1">已审批</el-tag>
<el-tag type="primary" v-else>待审批</el-tag>
</span>
</div>
<div class="content-item">
<span>{{ row.createBy }}({{ parseTime(row.updateTime, '{y}-{m}-{d}') }})</span>
</div>
<div class="content-item">
<span class="label">
<el-tooltip v-if="row.orderId" :content="'已绑定订单：' + row.orderId">
<el-icon class="el-icon-paperclip"></el-icon>
</el-tooltip>
备注：
</span>
<span>
</span>
<span class="label">备注：</span>
<span>{{ row.remark || '-' }}</span>
</div>
</div>
<div class="card-actions">
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleApprove(row)" v-if="row.auditStatus != 1">审批</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(row)">删除</el-button>
</div>
@@ -75,46 +55,63 @@
</el-col>
</el-row>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
:limit.sync="queryParams.pageSize" @pagination="getList" class="pagination-container" />
</el-col>
<!-- 钢卷列表 -->
<el-col :span="16" v-loading="rightLoading">
<!-- 右侧钢卷列表 - 新增right-col类 -->
<el-col :span="19" v-loading="rightLoading" class="right-col">
<!-- 选中的钢卷表格为空时的提示 -->
<div v-if="!currentPlan.planId" class="empty-tip">
<el-empty description="请先选择发货计划" />
</div>
<div v-else>
<coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange" :filters="coilFilters"></coil-selector>
<div v-if="selectedCoilList.length > 0 && currentPlan.planId">
<el-table :data="selectedCoilList" highlight-current-row height="400px" style="width: 100%">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
<el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120"
:show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="itemName" width="100" />
<el-table-column label="规格" align="center" prop="specification" width="100" />
<el-table-column label="材质" align="center" prop="material" />
<el-table-column label="厂家" align="center" prop="manufacturer" />
<el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
<el-table-column label="库区" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100" v-if="currentPlan.auditStatus != 1">
<template slot-scope="scope">
<el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<plan-order :plan-id="currentPlan.planId"></plan-order>
</div>
<div v-else class="empty-tip">
<el-empty description="暂无数据" />
<div>
<el-descriptions title="配卷">
</el-descriptions>
<coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"
:filters="coilFilters"></coil-selector>
<div v-if="selectedCoilList.length > 0 && currentPlan.planId">
<el-table :data="selectedCoilList" border highlight-current-row style="width: 100%" max-height="400px">
<el-table-column type="index" width="50" align="center" label="序号" />
<el-table-column label="卷号" align="center" prop="coilDetail.currentCoilNo"
:show-overflow-tooltip="true" />
<el-table-column label="存储位置" align="center" prop="coilDetail.actualWarehouseName" width="120"
:show-overflow-tooltip="true" />
<el-table-column label="物料" align="center" prop="coilDetail.itemName" width="100" />
<el-table-column label="规格" align="center" prop="coilDetail.specification" width="100" />
<el-table-column label="材质" align="center" prop="coilDetail.material" />
<el-table-column label="厂家" align="center" prop="coilDetail.manufacturer" />
<el-table-column label="重量(t)" align="center" prop="coilDetail.netWeight" width="100" />
<el-table-column label="库区" align="center" prop="coilDetail.warehouseName" width="120"
:show-overflow-tooltip="true" />
<el-table-column label="操作时间" align="center" prop="createTime"
:show-overflow-tooltip="true"><template slot-scope="scope">
{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
</template></el-table-column>
<el-table-column label="操作人" align="center" prop="createBy" width="120"
:show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-else class="empty-tip">
<el-empty description="暂无数据" />
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 添加或修改发货计划对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -126,9 +123,6 @@
placeholder="请选择计划日期">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="绑定订单" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单号" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
@@ -143,13 +137,16 @@
<script>
import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
import { listCoilByIds, getMaterialCoil } from "@/api/wms/coil";
import { listCoilOperation } from "@/api/wms/coil";
import { addDeliveryPlanCoilOperate } from "@/api/wms/deliveryPlanCoilOperate";
import coilSelector from "@/components/CoilSelector";
import PlanOrder from "../components/planOrder.vue";
export default {
name: "DeliveryPlan",
components: {
coilSelector,
PlanOrder,
},
data() {
return {
@@ -197,7 +194,9 @@ export default {
// 防抖定时器
debounceTimer: null,
coilFilters: {
status: 0
status: 0,
materialType: '成品',
selectType: 'product'
}
};
},
@@ -226,36 +225,46 @@ export default {
this.open = false;
this.reset();
},
handleApprove(row) {
async handleApprove(row) {
// 二次确认
this.$confirm('确定审批通过该发货计划吗？', '提示', {
await this.$confirm('确定审批通过该发货计划吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
this.buttonLoading = true;
const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
updateDeliveryPlan({
planId: row.planId,
auditStatus: 1,
auditBy: this.$store.getters.name,
auditTime: auditTime,
}).then(res => {
this.loading = false;
this.buttonLoading = false;
// 如何当前选中的计划是被审批的计划，需要同步修改数据
if (row.planId == this.currentPlan.planId) {
this.currentPlan.auditStatus = 1;
}
this.$message({
message: '审批成功',
type: 'success'
});
this.getList();
})
})
this.loading = true;
this.buttonLoading = true;
const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
await updateDeliveryPlan({
planId: row.planId,
auditStatus: 1,
auditBy: this.$store.getters.name,
auditTime: auditTime,
})
this.loading = false;
this.buttonLoading = false;
// 如何当前选中的计划是被审批的计划，需要同步修改数据
if (row.planId == this.currentPlan.planId) {
this.currentPlan.auditStatus = 1;
}
this.$message({
message: '审批成功',
type: 'success'
});
this.getList();
},
getCoilList() {
if (!this.currentPlan.planId) {
this.selectedCoilList = [];
return;
}
this.rightLoading = true;
console.log(this.currentPlan)
listCoilOperation({ coilIds: this.currentPlan.coil, planId: this.currentPlan.planId }).then(response => {
this.selectedCoilList = response.data || [];
this.rightLoading = false;
});
},
handleCardClick(row) {
// 防抖处理，防止频繁点击
@@ -264,23 +273,17 @@ export default {
}
this.debounceTimer = setTimeout(() => {
this.currentPlan = row;
if (!row.coil) {
this.selectedCoilList = [];
return;
}
this.rightLoading = true;
listCoilByIds(row.coil).then(response => {
this.selectedCoilList = response.rows || [];
this.rightLoading = false;
});
this.getCoilList();
}, 300); // 300ms防抖时间
},
handleCoilChange(coilId) {
const ids = this.selectedCoilList.map(item => item.coilId);
const ids = this.selectedCoilList.map(item => item.coilDetail.coilId);
if (coilId) {
// 检查是否已存在
if (!ids.includes(coilId)) {
ids.push(coilId);
const idsStr = ids.join(',');
this.currentPlan.coil = idsStr;
// 从后端查询详细信息
this.rightLoading = true;
updateDeliveryPlan({
@@ -288,14 +291,12 @@ export default {
coil: ids.join(',')
}).then(_ => {
this.getList();
})
getMaterialCoil(coilId).then(res => {
this.selectedCoilList.push(res.data);
this.rightLoading = false;
this.$message({
message: '添加成功',
type: 'success'
});
this.getCoilList();
addDeliveryPlanCoilOperate({
planId: this.currentPlan.planId,
coilId: coilId,
operateType: '插入',
})
})
} else {
this.$message({
@@ -306,23 +307,31 @@ export default {
}
},
// 处理删除选中钢卷
handleDeleteCoil(row) {
async handleDeleteCoil(row) {
await this.$modal.confirm('确定删除选中的钢卷吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
// 从选中的钢卷列表中删除选中的行
this.selectedCoilList = this.selectedCoilList.filter(item => item !== row);
// 更新发货计划
this.rightLoading = true;
updateDeliveryPlan({
await updateDeliveryPlan({
planId: this.currentPlan.planId,
coil: this.selectedCoilList.map(item => item.coilId).join(',')
}).then(res => {
this.rightLoading = false;
this.$message({
message: '删除成功',
type: 'success'
});
this.getList();
coil: this.selectedCoilList.map(item => item.coilDetail.coilId).join(',')
})
this.rightLoading = false;
this.$message({
message: '删除成功',
type: 'success'
});
addDeliveryPlanCoilOperate({
planId: this.currentPlan.planId,
coilId: row.coilId,
operateType: '删除',
})
this.getList();
},
// 表单重置
reset() {
@@ -433,8 +442,64 @@ export default {
</script>
<style scoped>
/* 左侧列容器样式 */
.left-col {
height: calc(100vh - 180px);
/* 自适应高度，减去顶部栏高度 */
box-sizing: border-box;
padding-right: 8px;
}
/* 左侧卡片容器 - 独立滚动 */
.left-card-container {
height: calc(100% - 50px);
/* 减去分页高度 */
overflow-y: auto;
padding-right: 5px;
/* 避免滚动条遮挡内容 */
}
/* 左侧滚动条美化 */
.left-card-container::-webkit-scrollbar {
width: 6px;
}
.left-card-container::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
border-radius: 3px;
}
.left-card-container::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 右侧列容器样式 - 独立滚动 */
.right-col {
height: calc(100vh - 180px);
/* 和左侧等高 */
overflow-y: auto;
box-sizing: border-box;
padding-left: 8px;
}
/* 右侧滚动条美化 */
.right-col::-webkit-scrollbar {
width: 6px;
}
.right-col::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
border-radius: 3px;
}
.right-col::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 发货计划卡片样式 - 更紧凑 */
.delivery-plan-card {
margin-bottom: 20px;
margin-bottom: 8px;
/* 减少卡片间距 */
height: 100%;
}
@@ -442,40 +507,60 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
margin-bottom: 6px;
/* 减少间距 */
}
.card-title {
font-size: 16px;
font-weight: bold;
font-size: 14px;
/* 减小标题字体 */
font-weight: 600;
color: #333;
}
.card-content {
margin-bottom: 20px;
margin-bottom: 6px;
/* 减少间距 */
}
.content-item {
margin-bottom: 10px;
display: flex;
gap: 10px;
margin-bottom: 4px;
/* 减少内容项间距 */
display: flex;
gap: 6px;
/* 减小间距 */
align-items: center;
}
.content-item:last-child {
margin-bottom: 0;
font-size: 12px;
/* 减小字体 */
color: #606266;
}
.label {
width: 80px;
width: 50px;
/* 减小标签宽度 */
font-weight: 500;
color: #606266;
margin-right: 10px;
margin-right: 4px;
}
.card-actions {
display: flex;
justify-content: center;
gap: 5px;
font-size: 12px;
}
</style>
/* 空状态提示 */
.empty-tip {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 分页容器 */
.pagination-container {
margin-top: 10px;
text-align: right;
}
</style>