删除frappe-gantt
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = "添加采购计划明细";
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user