329 lines
9.8 KiB
Vue
329 lines
9.8 KiB
Vue
<template>
|
||
<el-card>
|
||
<div style="display: flex; width: 100%; gap: 5px">
|
||
<el-input
|
||
v-model="planQueryParams.planName"
|
||
placeholder="计划名称"
|
||
clearable
|
||
@change="handlePlanQuery"
|
||
style="flex: 1"
|
||
/>
|
||
<el-button icon="el-icon-plus" @click="handleAdd"></el-button>
|
||
</div>
|
||
|
||
|
||
<el-tree
|
||
v-loading="planLoading"
|
||
:data="planTreeData"
|
||
:props="planTreeProps"
|
||
@node-click="handlePlanSelect"
|
||
default-expand-all
|
||
style="margin-top: 10px; height: 550px; overflow: auto;"
|
||
>
|
||
<template slot-scope="{ node, data }">
|
||
<span
|
||
class="plan-node"
|
||
@contextmenu="(e) => handleContextMenu(e, data)"
|
||
>
|
||
<span class="plan-name">{{ data.planName }}</span>
|
||
<!-- 右侧hover触发的下拉菜单 -->
|
||
<el-dropdown
|
||
trigger="hover"
|
||
@command="(cmd) => handleDropdownCommand(cmd, data)"
|
||
style="margin-left: 10px; cursor: pointer;"
|
||
>
|
||
<i class="el-icon-more" @click.stop></i>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||
<el-dropdown-item command="delete">删除</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
|
||
<!-- 右键菜单 -->
|
||
<div
|
||
class="context-menu"
|
||
v-show="menuVisible"
|
||
:style="{ left: menuX + 'px', top: menuY + 'px' }"
|
||
@click.stop
|
||
>
|
||
<el-menu>
|
||
<el-menu-item @click="handleUpdate(currentNodeData)">编辑</el-menu-item>
|
||
<el-menu-item @click="handleDelete(currentNodeData)">删除</el-menu-item>
|
||
</el-menu>
|
||
</div>
|
||
|
||
<pagination
|
||
v-show="planTotal > 0"
|
||
:total="planTotal"
|
||
:page.sync="planQueryParams.pageNum"
|
||
:limit.sync="planQueryParams.pageSize"
|
||
@pagination="getPlanList"
|
||
style="margin-top: 10px;"
|
||
layout="total, prev, jumper, next"
|
||
/>
|
||
|
||
<!-- 添加或修改发货计划对话框 -->
|
||
<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="planName">
|
||
<el-input v-model="form.planName" placeholder="请输入发货计划名称" />
|
||
</el-form-item>
|
||
<el-form-item label="计划日期" prop="planDate">
|
||
<el-date-picker
|
||
clearable
|
||
v-model="form.planDate"
|
||
type="datetime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择计划日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" 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>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { listDeliveryPlan, addDeliveryPlan, updateDeliveryPlan, delDeliveryPlan, getDeliveryPlan } from "@/api/wms/deliveryPlan";
|
||
// 注意：原代码中handleUpdate调用了getDeliveryPlan，但未导入，需补充导入或确认接口名称
|
||
// import { getDeliveryPlan } from "@/api/wms/deliveryPlan";
|
||
|
||
export default {
|
||
name: "PlanList",
|
||
data() {
|
||
return {
|
||
planQueryParams: {
|
||
planName: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
planType: 0,
|
||
},
|
||
selectedPlan: null,
|
||
planLoading: false,
|
||
// 发货计划相关数据
|
||
planList: [],
|
||
planTreeData: [],
|
||
planTreeProps: {
|
||
label: 'planName',
|
||
children: 'children'
|
||
},
|
||
planTotal: 0,
|
||
open: false,
|
||
title: '添加发货计划',
|
||
// 表单参数
|
||
form: {
|
||
planName: '',
|
||
planDate: '',
|
||
orderId: '',
|
||
remark: '',
|
||
},
|
||
// 表单校验
|
||
rules: {},
|
||
// 右键菜单相关
|
||
menuVisible: false, // 右键菜单显示状态
|
||
menuX: 0, // 右键菜单X坐标
|
||
menuY: 0, // 右键菜单Y坐标
|
||
currentNodeData: null, // 右键点击的当前节点数据
|
||
// 按钮加载状态
|
||
buttonLoading: false,
|
||
loading: false // 补充原代码中缺失的loading定义
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getPlanList();
|
||
},
|
||
methods: {
|
||
// 获取发货计划列表
|
||
getPlanList() {
|
||
this.planLoading = true;
|
||
listDeliveryPlan(this.planQueryParams).then(response => {
|
||
this.planList = response.rows;
|
||
this.planTotal = response.total;
|
||
// 转换为树形数据格式（如果接口返回的不是树形结构，需自行处理children）
|
||
this.planTreeData = response.rows;
|
||
this.planLoading = false;
|
||
}).catch(() => {
|
||
this.planLoading = false; // 补充异常处理，防止loading一直显示
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 发货计划搜索
|
||
handlePlanQuery() {
|
||
this.planQueryParams.pageNum = 1;
|
||
this.getPlanList();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
planId: undefined,
|
||
planName: undefined,
|
||
planDate: undefined,
|
||
planType: 0,
|
||
remark: undefined,
|
||
delFlag: undefined,
|
||
createTime: undefined,
|
||
createBy: undefined,
|
||
updateTime: undefined,
|
||
updateBy: undefined,
|
||
orderId: undefined,
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
// 默认选中当前时间并格式化
|
||
const now = new Date();
|
||
this.form.planDate = now.toISOString().slice(0, 19).replace('T', ' ');
|
||
// 发货计划名称格式为年-月-日命名
|
||
const dateStr = now.toLocaleDateString().replace(/\//g, '-');
|
||
this.form.planName = `${dateStr}发货计划`;
|
||
// 计划类型为发货计划
|
||
this.form.planType = 0;
|
||
this.open = true;
|
||
this.title = "添加发货计划";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const planId = row.planId || this.ids;
|
||
// 注意：需确认getDeliveryPlan接口已导入且存在
|
||
getDeliveryPlan(planId).then(response => {
|
||
this.loading = false;
|
||
this.form = response.data;
|
||
this.open = true;
|
||
this.title = "修改发货计划";
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
this.$modal.msgError("获取计划详情失败");
|
||
});
|
||
|
||
// 临时替代方案（需替换为真实接口调用）
|
||
// setTimeout(() => {
|
||
// this.loading = false;
|
||
// this.form = { ...row }; // 直接赋值当前行数据
|
||
// this.open = true;
|
||
// this.title = "修改发货计划";
|
||
// }, 300);
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
const promise = this.form.planId != null
|
||
? updateDeliveryPlan(this.form)
|
||
: addDeliveryPlan(this.form);
|
||
|
||
promise.then(response => {
|
||
const msg = this.form.planId != null ? "修改成功" : "新增成功";
|
||
this.$modal.msgSuccess(msg);
|
||
this.open = false;
|
||
this.getPlanList();
|
||
}).catch(() => {
|
||
const msg = this.form.planId != null ? "修改失败" : "新增失败";
|
||
this.$modal.msgError(msg);
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
async handleDelete(row) {
|
||
const planIds = row.planId || this.ids;
|
||
await this.$modal.confirm(`是否确认删除发货计划编号为"${planIds}"的数据项？会同时删除该计划下的所有发货单及明细且无法还原`);
|
||
this.loading = true;
|
||
await delDeliveryPlan(planIds).then(() => {
|
||
this.loading = false;
|
||
this.getPlanList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
this.$modal.msgError("删除失败");
|
||
});
|
||
},
|
||
// 发货计划重置
|
||
resetPlanQuery() {
|
||
this.planQueryParams.planName = undefined;
|
||
this.handlePlanQuery();
|
||
},
|
||
handlePlanSelect(row) {
|
||
this.selectedPlan = row;
|
||
this.$emit('select', row);
|
||
},
|
||
// 处理右键菜单触发
|
||
handleContextMenu(e, data) {
|
||
e.preventDefault(); // 阻止浏览器默认右键菜单
|
||
// 保存当前节点数据
|
||
this.currentNodeData = data;
|
||
// 设置右键菜单位置
|
||
this.menuX = e.clientX;
|
||
this.menuY = e.clientY;
|
||
// 显示右键菜单
|
||
this.menuVisible = true;
|
||
// 点击页面其他区域关闭右键菜单
|
||
document.addEventListener('click', this.closeMenu);
|
||
},
|
||
// 关闭右键菜单
|
||
closeMenu() {
|
||
this.menuVisible = false;
|
||
// 移除事件监听，避免重复绑定
|
||
document.removeEventListener('click', this.closeMenu);
|
||
},
|
||
// 处理下拉菜单命令
|
||
handleDropdownCommand(command, data) {
|
||
if (command === 'edit') {
|
||
this.handleUpdate(data);
|
||
} else if (command === 'delete') {
|
||
this.handleDelete(data);
|
||
}
|
||
this.closeMenu();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 右键菜单样式 */
|
||
.context-menu {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
min-width: 120px;
|
||
background: #fff;
|
||
border: 1px solid #ebeef5;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 树节点样式调整 */
|
||
.plan-node {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.plan-name {
|
||
flex: 1;
|
||
}
|
||
</style> |