删除frappe-gantt

This commit is contained in:
砂糖
2025-07-19 10:26:00 +08:00
parent 69e1178fee
commit df2d9a3025
7 changed files with 409 additions and 175 deletions

View File

@@ -44,7 +44,6 @@
"echarts": "5.4.0",
"element-ui": "2.15.12",
"file-saver": "2.0.5",
"frappe-gantt": "^1.0.3",
"fuse.js": "6.4.3",
"highlight.js": "10.5.0",
"js-beautify": "1.13.0",

View File

@@ -42,3 +42,20 @@ export function delPurchasePlan(planId) {
method: 'delete'
})
}
// 获取推荐的采购计划
export function recommendPurchasePlan(orderId) {
return request({
url: '/wms/purchasePlan/recommend/' + orderId,
method: 'get'
})
}
// 创建采购计划(含明细)
export function createPurchasePlan(data) {
return request({
url: '/wms/purchasePlan/addWithDetails',
method: 'post',
data
})
}

View File

@@ -171,7 +171,7 @@ import ClacPanel from '../purchasePlan/panels/clac.vue';
export default {
name: "Order",
components: { OrderDetailPanel, ClacPanel },
dict: ['order_status'],
dicts: ['order_status'],
data() {
return {
// 按钮loading

View File

@@ -1,135 +0,0 @@
<template>
<div class="gantt-chart-wrapper">
<div ref="ganttContainer" class="gantt-container"></div>
<div class="gantt-info">
<el-card class="task-table-card" shadow="never" style="margin-bottom: 16px;">
<div slot="header">生产任务列表</div>
<el-table :data="tasks" size="mini" stripe>
<el-table-column prop="remark" label="任务名称" min-width="120" />
<el-table-column prop="productId" label="产品ID" width="100" />
<el-table-column prop="startDate" label="开始时间" width="140">
<template slot-scope="scope">{{ formatDate(scope.row.startDate) }}</template>
</el-table-column>
<el-table-column prop="endDate" label="结束时间" width="140">
<template slot-scope="scope">{{ formatDate(scope.row.endDate) }}</template>
</el-table-column>
<el-table-column prop="quantity" label="数量" width="80" />
<el-table-column prop="orderId" label="订单编号" width="120" />
</el-table>
</el-card>
<el-card class="order-table-card" shadow="never">
<div slot="header">相关订单信息</div>
<el-table :data="orders" size="mini" stripe>
<el-table-column prop="orderCode" label="订单编号" width="120" />
<el-table-column prop="salesManager" label="负责人" width="120" />
<el-table-column prop="customerName" label="客户" width="120" />
<el-table-column prop="orderStatus" label="状态" width="100" />
</el-table>
</el-card>
</div>
</div>
</template>
<script>
import Gantt from 'frappe-gantt';
const colorClasses = [
'gantt-color-1', 'gantt-color-2', 'gantt-color-3', 'gantt-color-4', 'gantt-color-5',
'gantt-color-6', 'gantt-color-7', 'gantt-color-8', 'gantt-color-9', 'gantt-color-10'
];
function getColorClass(lineId, orderId, idx) {
// 先按产线分色,同产线下不同订单再细分
if (!lineId) return colorClasses[idx % colorClasses.length];
const base = Math.abs(Number(lineId)) % colorClasses.length;
if (!orderId) return colorClasses[base];
return colorClasses[(base + Math.abs(Number(orderId)) % colorClasses.length) % colorClasses.length];
}
export default {
name: 'GanttChart',
props: {
tasks: {
type: Array,
default: () => []
},
orders: {
type: Array,
default: () => []
}
},
watch: {
tasks: {
handler() {
this.renderGantt();
},
deep: true
}
},
mounted() {
this.renderGantt();
},
methods: {
renderGantt() {
if (!this.$refs.ganttContainer) return;
this.$refs.ganttContainer.innerHTML = '';
if (!this.tasks || this.tasks.length === 0) return;
const data = this.tasks.map((item, idx) => ({
id: String(item.detailId || idx),
name: item.remark || `任务${idx+1}`,
start: item.startDate ? this.formatDate(item.startDate) : '',
end: item.endDate ? this.formatDate(item.endDate) : '',
progress: 100,
custom_class: getColorClass(item.lineId, item.orderId, idx),
}));
// 调试打印data确认custom_class
console.log('Gantt data:', data);
new Gantt(this.$refs.ganttContainer, data, {
view_mode: 'Month',
language: 'zh',
custom_popup_html: null
});
},
formatDate(val) {
if (!val) return '';
const d = typeof val === 'string' ? new Date(val) : val;
return d.toISOString().slice(0, 10);
}
}
};
</script>
<style scoped>
.gantt-chart-wrapper {
width: 100%;
min-height: 400px;
}
.gantt-container {
width: 100%;
min-height: 220px;
height: auto;
overflow: visible;
position: relative;
}
.gantt-container svg {
display: block;
width: 100% !important;
height: auto !important;
}
.gantt-info {
margin-top: 8px;
}
.order-info {
margin-bottom: 8px;
}
</style>
<style>
.bar.gantt-color-1 { fill: #409EFF !important; }
.bar.gantt-color-2 { fill: #67C23A !important; }
.bar.gantt-color-3 { fill: #E6A23C !important; }
.bar.gantt-color-4 { fill: #F56C6C !important; }
.bar.gantt-color-5 { fill: #909399 !important; }
.bar.gantt-color-6 { fill: #13C2C2 !important; }
.bar.gantt-color-7 { fill: #B37FEB !important; }
.bar.gantt-color-8 { fill: #FF85C0 !important; }
.bar.gantt-color-9 { fill: #36CBCB !important; }
.bar.gantt-color-10 { fill: #FFC53D !important; }
</style>

View File

@@ -70,6 +70,15 @@
@click="handleExport"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-magic-stick"
size="mini"
@click="handleRecommend"
>推荐采购计划</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -83,6 +92,12 @@
<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-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@@ -128,14 +143,124 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 订单选择弹窗 -->
<el-dialog title="选择订单" :visible.sync="orderSelectOpen" width="800px" append-to-body>
<el-form :model="orderQueryParams" ref="orderQueryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="orderQueryParams.orderCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleOrderQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="customerName">
<el-input
v-model="orderQueryParams.customerName"
placeholder="请输入客户名称"
clearable
@keyup.enter.native="handleOrderQuery"
/>
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input
v-model="orderQueryParams.salesManager"
placeholder="请输入销售经理"
clearable
@keyup.enter.native="handleOrderQuery"
/>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="orderQueryParams.orderStatus" placeholder="请选择订单状态" clearable>
<el-option
v-for="dict in dict.type.order_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrderQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetOrderQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="orderLoading" :data="orderList" @row-click="handleOrderSelect" style="cursor: pointer;">
<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="orderStatus">
<template slot-scope="scope">
<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" prop="createTime" width="180" />
</el-table>
<pagination
v-show="orderTotal>0"
:total="orderTotal"
:page.sync="orderQueryParams.pageNum"
:limit.sync="orderQueryParams.pageSize"
@pagination="getOrderList"
/>
<div slot="footer" class="dialog-footer">
<el-button @click="orderSelectOpen = false"> </el-button>
</div>
</el-dialog>
<!-- 推荐采购计划弹窗 -->
<el-dialog title="推荐采购计划" :visible.sync="recommendOpen" width="1200px" append-to-body>
<div v-if="selectedOrderId">
<p style="margin-bottom: 20px; color: #666;">
当前选择订单ID: <strong>{{ selectedOrderId }}</strong>
<el-button type="text" @click="handleReSelectOrder" style="margin-left: 10px;">重新选择订单</el-button>
</p>
<PurchasePlanClac
:orderId="selectedOrderId"
@confirm="handleRecommendConfirm"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="recommendOpen = false"> </el-button>
</div>
</el-dialog>
<!-- 采购计划详情弹窗 -->
<el-dialog title="采购计划详情" :visible.sync="detailOpen" width="1400px" append-to-body>
<div v-if="selectedPlanId">
<p style="margin-bottom: 20px; color: #666;">
当前采购计划ID: <strong>{{ selectedPlanId }}</strong>
</p>
<PurchasePlanDetail
ref="purchasePlanDetail"
:planId="selectedPlanId"
/>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="detailOpen = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listPurchasePlan, getPurchasePlan, delPurchasePlan, addPurchasePlan, updatePurchasePlan } from "@/api/wms/purchasePlan";
import { listOrder } from "@/api/wms/order";
import PurchasePlanClac from "./panels/clac.vue";
import PurchasePlanDetail from "./panels/detail.vue";
export default {
name: "PurchasePlan",
components: {
PurchasePlanClac,
PurchasePlanDetail
},
dicts: ['order_status'],
data() {
return {
// 按钮loading
@@ -158,6 +283,22 @@ export default {
title: "",
// 是否显示弹出层
open: false,
// 订单选择弹窗
orderSelectOpen: false,
// 推荐采购计划弹窗
recommendOpen: false,
// 采购计划详情弹窗
detailOpen: false,
// 选中的订单ID
selectedOrderId: null,
// 选中的采购计划ID
selectedPlanId: null,
// 订单列表
orderList: [],
// 订单总数
orderTotal: 0,
// 订单加载状态
orderLoading: false,
// 查询参数
queryParams: {
pageNum: 1,
@@ -167,6 +308,15 @@ export default {
orderId: undefined,
status: undefined,
},
// 订单查询参数
orderQueryParams: {
pageNum: 1,
pageSize: 10,
orderCode: undefined,
customerName: undefined,
salesManager: undefined,
orderStatus: undefined,
},
// 表单参数
form: {},
// 表单校验
@@ -300,6 +450,60 @@ export default {
this.download('klp/purchasePlan/export', {
...this.queryParams
}, `purchasePlan_${new Date().getTime()}.xlsx`)
},
/** 推荐采购计划按钮操作 */
handleRecommend() {
this.orderSelectOpen = true;
this.getOrderList();
},
/** 获取订单列表 */
getOrderList() {
this.orderLoading = true;
listOrder(this.orderQueryParams).then(response => {
this.orderList = response.rows;
this.orderTotal = response.total;
this.orderLoading = false;
});
},
/** 订单查询 */
handleOrderQuery() {
this.orderQueryParams.pageNum = 1;
this.getOrderList();
},
/** 重置订单查询 */
resetOrderQuery() {
this.orderQueryParams = {
pageNum: 1,
pageSize: 10,
orderCode: undefined,
customerName: undefined,
salesManager: undefined,
orderStatus: undefined,
};
this.handleOrderQuery();
},
/** 选择订单 */
handleOrderSelect(row) {
this.selectedOrderId = row.orderId;
this.orderSelectOpen = false;
this.recommendOpen = true;
},
/** 重新选择订单 */
handleReSelectOrder() {
this.recommendOpen = false;
this.orderSelectOpen = true;
},
/** 推荐采购计划确认 */
handleRecommendConfirm(data) {
console.log('推荐采购计划数据:', data);
this.$modal.msgSuccess("推荐采购计划已生成");
this.recommendOpen = false;
this.getList(); // 刷新列表
},
/** 详情按钮操作 */
handleDetail(row) {
this.selectedPlanId = row.planId;
this.detailOpen = true;
}
}
};

View File

@@ -1,14 +1,38 @@
<template>
<div>
<el-form :inline="true" @submit.native.prevent>
<el-form-item>
<el-button type="success" @click="addRow">新增</el-button>
<!-- 全局loading遮罩 -->
<div v-if="globalLoading" class="global-loading-overlay">
<el-loading-spinner></el-loading-spinner>
<p>正在加载推荐数据...</p>
</div>
<!-- 采购计划主数据表单 -->
<el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 20px;" v-loading="formLoading" element-loading-text="正在加载主数据...">
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
</el-form-item>
<el-form-item label="负责人" prop="owner">
<el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%; margin-top: 20px" border>
<el-table-column prop="raw_material_id" label="原材料ID" width="120">
<el-form :inline="true" @submit.native.prevent>
</el-form>
<el-table
:data="tableData"
style="width: 100%; margin-top: 20px"
border
:loading="tableLoading"
element-loading-text="正在加载明细数据..."
element-loading-spinner="el-icon-loading"
:empty-text="tableLoading ? '正在加载数据...' : '暂无数据'"
>
<el-table-column prop="rawMaterialId" label="原材料ID" width="120">
<template #default="scope">
<el-input v-model="scope.row.raw_material_id" size="small" />
<RawMaterialSelect v-model="scope.row.rawMaterialId" size="small" :loading="selectLoading" />
</template>
</el-table-column>
<el-table-column prop="owner" label="负责人" width="120">
@@ -37,15 +61,21 @@
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px; text-align: right;">
<el-button type="primary" @click="confirm">确认</el-button>
<div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
<el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || tableLoading || formLoading">
{{ submitLoading ? '提交中...' : '确认' }}
</el-button>
</div>
</div>
</template>
<script>
import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
export default {
name: 'PurchasePlanClac',
components: { RawMaterialSelect },
props: {
orderId: {
type: [String, Number],
@@ -54,7 +84,26 @@ export default {
},
data() {
return {
tableData: []
tableData: [],
// 细化的loading状态
globalLoading: false, // 全局loading
formLoading: false, // 表单loading
tableLoading: false, // 表格loading
selectLoading: false, // 选择器loading
submitLoading: false, // 提交loading
mainForm: {
planCode: '',
owner: '',
remark: ''
},
mainFormRules: {
planCode: [
{ required: true, message: '请输入计划编号', trigger: 'blur' }
],
owner: [
{ required: true, message: '请输入负责人', trigger: 'blur' }
]
}
}
},
watch: {
@@ -63,49 +112,97 @@ export default {
handler(newVal) {
this.loadData(newVal)
}
},
tableData: {
handler() {
this.ensureEmptyRow();
},
deep: true
}
},
methods: {
loadData(orderId) {
// 模拟接口返回数据根据orderId加载不同数据
// 实际开发中可根据orderId请求后端接口
// 设置全局loading
this.globalLoading = true;
this.formLoading = true;
this.tableLoading = true;
this.selectLoading = true;
if (!orderId) {
this.tableData = []
this.clearAllLoading();
this.ensureEmptyRow();
return
}
this.tableData = [
{
raw_material_id: 1,
owner: '张三',
quantity: 100,
unit: 'kg',
remark: '紧急采购'
},
{
raw_material_id: 2,
owner: '李四',
quantity: 50,
unit: '件',
remark: ''
}
]
},
addRow() {
this.tableData.push({
raw_material_id: '',
owner: '',
quantity: 0,
unit: '',
remark: ''
recommendPurchasePlan(orderId).then(res => {
console.log(res, '推荐数据')
this.tableData = res.data.detailList;
this.mainForm = res.data;
this.ensureEmptyRow();
}).finally(() => {
this.clearAllLoading();
})
},
clearAllLoading() {
this.globalLoading = false;
this.formLoading = false;
this.tableLoading = false;
this.selectLoading = false;
},
removeRow(index) {
this.tableData.splice(index, 1)
this.ensureEmptyRow();
},
confirm() {
this.$message.success('操作已确认');
console.log(this.tableData);
this.$emit('confirm', this.tableData);
this.submitLoading = true;
// 校验主数据表单
this.$refs.mainFormRef.validate((valid) => {
if (!valid) {
this.$message.error('请完整填写主数据信息');
this.submitLoading = false;
return;
}
// 校验表格数据除remark外都不能为空
const filtered = this.tableData.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
const invalid = filtered.some(row => {
return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
});
if (invalid) {
this.$message.error('请完整填写所有必填项');
this.submitLoading = false;
return;
}
// 合并主数据和明细数据
const submitData = {
...this.mainForm,
orderId: this.orderId,
detailList: filtered
};
createPurchasePlan(submitData);
this.$message.success('操作已确认');
console.log(submitData);
this.$emit('confirm', submitData);
this.submitLoading = false;
});
},
ensureEmptyRow() {
// 如果tableData为空或最后一行已填写原材料则补充一个空行
if (
this.tableData.length === 0 ||
(this.tableData[this.tableData.length - 1] && this.tableData[this.tableData.length - 1].rawMaterialId)
) {
this.tableData.push({
rawMaterialId: '',
owner: '',
quantity: 0,
unit: '',
remark: ''
});
}
}
}
}
@@ -115,4 +212,36 @@ export default {
.el-form {
margin-bottom: 20px;
}
.global-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2000;
border-radius: 4px;
}
.global-loading-overlay p {
margin-top: 10px;
color: #409EFF;
font-size: 14px;
}
/* 表格loading样式优化 */
.el-table .el-loading-mask {
background-color: rgba(255, 255, 255, 0.8);
}
.el-table .el-loading-spinner .el-loading-text {
color: #409EFF;
font-size: 14px;
margin-top: 10px;
}
</style>

View File

@@ -112,6 +112,12 @@ import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, a
export default {
name: "PurchasePlanDetail",
props: {
planId: {
type: [String, Number],
default: null
}
},
data() {
return {
// 按钮loading
@@ -169,6 +175,17 @@ export default {
created() {
this.getList();
},
watch: {
planId: {
handler(newVal) {
if (newVal) {
this.queryParams.planId = newVal;
this.getList();
}
},
immediate: true
}
},
methods: {
/** 查询采购计划明细列表 */
getList() {
@@ -221,6 +238,9 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
if (this.planId) {
this.form.planId = this.planId;
}
this.open = true;
this.title = "添加采购计划明细";
},