feat: 生产管理初步重构

This commit is contained in:
砂糖
2025-08-25 18:06:32 +08:00
parent 781c7f8bac
commit 49cca6281d
31 changed files with 3981 additions and 990 deletions

View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询制造规范列表
export function listManufacturingSpec(query) {
return request({
url: '/klp/manufacturingSpec/list',
method: 'get',
params: query
})
}
// 查询制造规范详细
export function getManufacturingSpec(specId) {
return request({
url: '/klp/manufacturingSpec/' + specId,
method: 'get'
})
}
// 新增制造规范
export function addManufacturingSpec(data) {
return request({
url: '/klp/manufacturingSpec',
method: 'post',
data: data
})
}
// 修改制造规范
export function updateManufacturingSpec(data) {
return request({
url: '/klp/manufacturingSpec',
method: 'put',
data: data
})
}
// 删除制造规范
export function delManufacturingSpec(specId) {
return request({
url: '/klp/manufacturingSpec/' + specId,
method: 'delete'
})
}

View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询产品规范(键值对模式)列表
export function listProductSpec(query) {
return request({
url: '/klp/productSpec/list',
method: 'get',
params: query
})
}
// 查询产品规范(键值对模式)详细
export function getProductSpec(specId) {
return request({
url: '/klp/productSpec/' + specId,
method: 'get'
})
}
// 新增产品规范(键值对模式)
export function addProductSpec(data) {
return request({
url: '/klp/productSpec',
method: 'post',
data: data
})
}
// 修改产品规范(键值对模式)
export function updateProductSpec(data) {
return request({
url: '/klp/productSpec',
method: 'put',
data: data
})
}
// 删除产品规范(键值对模式)
export function delProductSpec(specId) {
return request({
url: '/klp/productSpec/' + specId,
method: 'delete'
})
}

View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询产品规范组列表
export function listProductSpecGroup(query) {
return request({
url: '/klp/productSpecGroup/list',
method: 'get',
params: query
})
}
// 查询产品规范组详细
export function getProductSpecGroup(groupId) {
return request({
url: '/klp/productSpecGroup/' + groupId,
method: 'get'
})
}
// 新增产品规范组
export function addProductSpecGroup(data) {
return request({
url: '/klp/productSpecGroup',
method: 'post',
data: data
})
}
// 修改产品规范组
export function updateProductSpecGroup(data) {
return request({
url: '/klp/productSpecGroup',
method: 'put',
data: data
})
}
// 删除产品规范组
export function delProductSpecGroup(groupId) {
return request({
url: '/klp/productSpecGroup/' + groupId,
method: 'delete'
})
}

View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询生产任务列表
export function listProductionTask(query) {
return request({
url: '/klp/productionTask/list',
method: 'get',
params: query
})
}
// 查询生产任务详细
export function getProductionTask(taskId) {
return request({
url: '/klp/productionTask/' + taskId,
method: 'get'
})
}
// 新增生产任务
export function addProductionTask(data) {
return request({
url: '/klp/productionTask',
method: 'post',
data: data
})
}
// 修改生产任务
export function updateProductionTask(data) {
return request({
url: '/klp/productionTask',
method: 'put',
data: data
})
}
// 删除生产任务
export function delProductionTask(taskId) {
return request({
url: '/klp/productionTask/' + taskId,
method: 'delete'
})
}

View File

@@ -12,7 +12,7 @@
--spacing-lg: 16px;
--spacing-base: 8px; /* 基础间距,表单、表格统一用这个值做倍数调整 */
--form-item-margin: var(--spacing-base); /* 表单项底部间距 */
--btn-height: 20px; /* 按钮统一高度 */
--btn-height: 24px; /* 按钮统一高度 */
}
/* 全局样式调整 */
@@ -276,10 +276,17 @@ body {
div.pagination-container {
background-color: transparent !important;
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
.el-pagination {
padding: 0 !important;
margin: 0 !important;
// margin: 0 !important;
.el-input__suffix {
position: absolute;
line-height: 0px;
}
}
}
@@ -344,17 +351,15 @@ div.pagination-container {
.el-input--small .el-input__inner,
.el-input--medium .el-input__inner {
.el-input--medium .el-input__inner,
.el-input--large .el-input__inner {
height: var(--btn-height);
line-height: var(--btn-height);
}
// .el-input-number--medium .el-input-number__increase,
// .el-input-number--medium .el-input-number__decrease {
// height: calc(var(--btn-height) - 2px);
// line-height: calc(var(--btn-height) - 2px);
// }
.el-input--medium .el-input__icon {
.el-input--small .el-input__icon,
.el-input--medium .el-input__icon,
.el-input--large .el-input__icon {
height: var(--btn-height);
line-height: var(--btn-height);
}

View File

@@ -16,43 +16,19 @@
<AllApplications />
</el-row>
<el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="12">
<FlowTable />
<el-card style="height: 500px;">
<FlowTable />
</el-card>
</el-col>
<el-col :span="12">
<OrderDashboard />
<el-card style="height: 500px;">
<OrderDashboard />
</el-card>
</el-col>
</el-row>
<!-- 数据概览区 -->
<!-- <div class="data-overview">
<div v-for="(card, index) in dataCards" :key="index"
class="data-card">
<div class="data-card-header">
<div>
<h3 class="data-card-title">{{ card.title }}</h3>
<p class="data-card-value">{{ card.value }}</p>
</div>
<i :class="['data-card-icon', card.icon, getIconColor(card.color)]"></i>
</div>
<div class="data-card-chart">
<div ref="charts" class="chart-inner"></div>
</div>
</div>
</div> -->
<!-- 业务功能区 -->
<!-- <div class="business-modules">
<div v-for="(module, index) in businessModules" :key="index"
class="business-module" @click="handleLink(module.link)">
<div :class="['business-module-icon', getModuleBg(module.bgColor)]">
<i :class="module.icon"></i>
</div>
<h3 class="business-module-title">{{ module.title }}</h3>
</div>
</div> -->
</div>
</template>

View File

@@ -346,3 +346,11 @@ export default {
}
};
</script>
<style scoped>
.el-button--text {
padding: 0;
margin-left: 4px !important;
margin-right: 4px !important;
}
</style>

View File

@@ -3,30 +3,18 @@
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="分类类型" prop="categoryType">
<el-select v-model="queryParams.categoryType" placeholder="请选择分类类型" clearable>
<el-option
v-for="dict in dict.type.category_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dict.type.category_type" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="分类名称" prop="categoryName">
<el-input
v-model="queryParams.categoryName"
placeholder="请输入分类名称"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="是否启用" prop="isEnabled">
<el-select v-model="queryParams.isEnabled" placeholder="请选择是否启用" clearable>
<el-option
v-for="dict in dict.type.common_swicth"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dict.type.common_swicth" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item>
@@ -37,42 +25,18 @@
<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-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-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-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-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -81,7 +45,7 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="分类类型" align="center" prop="categoryType">
<template slot-scope="scope">
<dict-tag :options="dict.type.category_type" :value="scope.row.categoryType"/>
<dict-tag :options="dict.type.category_type" :value="scope.row.categoryType" />
</template>
</el-table-column>
<el-table-column label="分类编码" align="center" prop="categoryCode" />
@@ -90,46 +54,27 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="是否启用" align="center" prop="isEnabled">
<template slot-scope="scope">
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled" />
</template>
</el-table-column>
<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-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<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"
/>
<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="categoryType">
<el-select v-model="form.categoryType" placeholder="请选择分类类型">
<el-option
v-for="dict in dict.type.category_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
<el-option v-for="dict in dict.type.category_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分类编码" prop="categoryCode">
@@ -146,12 +91,8 @@
</el-form-item>
<el-form-item label="是否启用" prop="isEnabled">
<el-select v-model="form.isEnabled" placeholder="请选择是否启用">
<el-option
v-for="dict in dict.type.common_swicth"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
<el-option v-for="dict in dict.type.common_swicth" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)"></el-option>
</el-select>
</el-form-item>
</el-form>
@@ -266,7 +207,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.categoryId)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */

View File

@@ -0,0 +1,138 @@
<template>
<el-select
v-model="innerValue"
placeholder="请选择或搜索制造规范"
clearable
filterable
remote
:remote-method="handleRemoteSearch"
:loading="loading"
@change="handleSelectChange"
style="width: 100%"
>
<!-- 下拉选项循环制造规范列表 -->
<el-option
v-for="item in mSpecList"
:key="item.specId"
:label="item.specName"
:value="item.specId"
/>
<!-- 无数据提示 -->
<el-option
v-if="mSpecList.length === 0 && !loading"
value=""
disabled
>
暂无匹配制造规范
</el-option>
</el-select>
</template>
<script>
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
import { debounce } from 'lodash' // 防抖:避免频繁触发接口请求
export default {
name: 'MSpecSelect',
// 1. 接收外部传入的v-model值必加双向绑定的入口
props: {
value: {
type: [String, Number, undefined], // 支持字符串/数字ID兼容不同后端返回类型
default: undefined // 初始值默认undefined未选择状态
},
// 可选:允许外部自定义搜索参数的字段名(增强组件复用性)
searchKey: {
type: String,
default: 'specName' // 默认为“规范名称”搜索对应接口的mSpecName参数
},
// 可选:每页加载数量(外部可配置)
pageSize: {
type: Number,
default: 20
}
},
data() {
return {
mSpecList: [], // 制造规范列表数据
loading: false, // 远程请求加载状态
queryParams: {
// 搜索参数默认用specName可通过searchKey自定义
specName: undefined,
pageNum: 1, // 分页:当前页码
pageSize: this.pageSize // 分页每页条数关联props的pageSize
}
}
},
computed: {
// 2. 核心内部值与外部value的双向同步桥梁
innerValue: {
get() {
// 外部传入的value -> 内部el-select的v-model值初始回显
return this.value
},
set(newVal) {
// 内部el-select值变化时 -> 触发input事件同步给外部v-model
this.$emit('input', newVal)
}
}
},
watch: {
// 3. 监听外部value变化如父组件直接修改v-model值同步更新内部选择状态
value(newVal) {
// 仅当外部值与内部值不一致时更新(避免死循环)
if (newVal !== this.innerValue) {
this.innerValue = newVal
}
},
// 监听searchKey变化外部修改搜索字段时重置搜索参数
searchKey(newKey) {
// 清空原搜索字段的值(避免残留旧字段的搜索条件)
this.queryParams[this.searchKey] = undefined
}
},
created() {
// 初始化:加载默认制造规范列表
this.getList()
// 初始化防抖函数300ms延迟可根据需求调整
this.debouncedSearch = debounce(this.getList, 300)
},
methods: {
// 4. 远程搜索逻辑(输入时触发)
handleRemoteSearch(query) {
// 根据searchKey设置搜索参数specName=query
this.queryParams[this.searchKey] = query.trim() // 去除首尾空格,避免无效搜索
this.queryParams.pageNum = 1 // 重置页码为1新搜索从第一页开始
this.debouncedSearch() // 防抖后执行搜索
},
// 5. 获取制造规范列表(远程接口请求)
getList() {
this.loading = true // 开始加载:显示加载动画
listManufacturingSpec(this.queryParams)
.then(res => {
// 接口成功赋值列表数据兼容res.rows或res.data.rows避免接口返回格式差异
this.mSpecList = res.rows || res.data?.rows || []
})
.catch(() => {
// 接口失败:清空列表,避免旧数据残留
this.mSpecList = []
this.$message.error('获取制造规范列表失败,请重试') // 错误提示(优化用户体验)
})
.finally(() => {
this.loading = false // 结束加载:隐藏加载动画
})
},
// 6. 选择变化时触发(返回完整订单项,方便父组件使用)
handleSelectChange(mSpecId) {
// 根据选中的ID找到对应的完整制造规范对象
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
// 触发change事件返回完整项父组件可通过@change接收
this.$emit('change', selectedItem)
// 可选触发input事件后额外触发change事件符合常规组件使用习惯
this.$emit('update:value', selectedItem)
}
}
}
</script>

View File

@@ -1,397 +1,16 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input
v-model="queryParams.salesManager"
placeholder="请输入销售经理"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
size="mini"
@click="goDashboard"
>订单分析</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单ID" align="center" prop="orderId" v-if="false" />
<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="taxAmount" />
<el-table-column label="无税金额" align="center" prop="noTaxAmount" />
<el-table-column label="订单状态" align="center" prop="orderStatus">
<template slot-scope="scope">
<el-select v-model="scope.row.orderStatus" @change="handleOrderStatusChange(scope.row)">
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
</el-select>
<!-- <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" class-name="small-padding fixed-width">
<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>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="showDetail(scope.row)"
>明细</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="copyOrderId(scope.row)"
>复制订单ID</el-button>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-s-operation"
@click="showClac(scope.row)"
v-if="scope.row.orderStatus === EOrderStatus.NEW"
>初次采购推荐</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-alert title="创建订单后默认为预订单,需要到预订单管理中查看" type="warning" style="margin-bottom: 10px;"/>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="订单编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="form.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input v-model="form.salesManager" placeholder="请输入销售经理" />
</el-form-item>
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.taxAmount" placeholder="请输入含税金额" />
</el-form-item>
<el-form-item label="无税金额" prop="noTaxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.noTaxAmount" 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>
<!-- 订单明细弹窗 -->
<el-dialog title="订单明细" :visible.sync="detailDialogVisible" width="900px" append-to-body>
<OrderDetailPanel :orderId="detailOrderId" />
</el-dialog>
<!-- 智能采购单弹窗, 底部弹出 -->
<!-- <el-drawer :title="`智能采购单订单ID${clacOrderId}`" direction="btt" :visible.sync="clacDialogVisible" width="100%" size="90%" append-to-body>
<clac-panel :orderId="clacOrderId" @confirm="handleRecommendConfirm" />
</el-drawer> -->
<div>
<OrderPage :isPre="false" />
</div>
</template>
<script>
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
import OrderDetailPanel from './panels/detail.vue';
import { EOrderStatus } from "@/utils/enums";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
import OrderPage from './panels/orderPage.vue';
export default {
name: "Order",
components: { OrderDetailPanel, CustomerSelect },
dicts: ['order_status'],
data() {
return {
// 订单状态枚举
EOrderStatus,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 订单主表格数据
orderList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: -1,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
detailDialogVisible: false,
detailOrderId: null,
clacDialogVisible: false,
clacOrderId: null,
};
},
created() {
this.getList();
},
methods: {
/** 查询订单主列表 */
getList() {
this.loading = true;
listByStatus(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
goDashboard() {
this.$router.push('/shop/order/dashboard');
},
/** 推荐采购计划确认 */
// handleRecommendConfirm(data) {
// console.log('推荐采购计划数据:', data);
// this.$modal.msgSuccess("推荐采购计划已生成");
// this.clacDialogVisible = false;
// this.getList();
// },
handleOrderStatusChange(row) {
// console.log(row);
updateOrder(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.getList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
orderId: undefined,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
taxAmount: undefined,
noTaxAmount: 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.orderId)
this.single = selection.length!==1
this.multiple = !selection.length
},
copyOrderId(row) {
// 获取浏览器剪切板对象并复制row.orderId
// 先检查是否支持
if (navigator.clipboard) {
navigator.clipboard.writeText(row.orderId);
this.$modal.msgSuccess("复制成功");
} else {
this.$modal.msgError("浏览器不支持复制功能");
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加订单主";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const orderId = row.orderId || this.ids
getOrder(orderId).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.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$modal.confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项?').then(() => {
this.loading = true;
return delOrder(orderIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/order/export', {
...this.queryParams
}, `order_${new Date().getTime()}.xlsx`)
},
showDetail(row) {
this.detailOrderId = row.orderId;
this.detailDialogVisible = true;
},
showClac(row) {
this.clacOrderId = row.orderId;
this.clacDialogVisible = true;
},
name: 'Order',
components: {
OrderPage
}
};
</script>
}
</script>

View File

@@ -87,6 +87,12 @@
:disabled="!canEdit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="handleSpec(scope.row)"
>产品规范</el-button>
<el-button
size="mini"
type="text"
@@ -136,16 +142,34 @@
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="500px" append-to-body>
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit"/>
<div v-else-if="canEdit">
<el-select placeholder="请选择产品规范" @change="handleChangeSpec">
<el-option v-for="item in productSpecList" :key="item.groupId" :label="item.specName" :value="item.groupId" />
<template #empty>
<el-button type="primary" @click="handleAddSpec">新增产品规范</el-button>
</template>
</el-select>
</div>
<div v-else>
暂无产品规范
</div>
</el-dialog>
</div>
</template>
<script>
import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
import { listProductSpecGroup } from "@/api/work/productSpecGroup";
import { getOrder } from "@/api/wms/order";
import ProductSelect from '@/components/KLPService/ProductSelect';
import { EOrderStatus } from "@/utils/enums";
import { ProductInfo } from '@/components/KLPService';
import BomInfoMini from '@/components/KLPService/Renderer/BomInfoMini.vue';
import ProductSpec from './spec.vue';
export default {
name: "OrderDetailPanel",
@@ -159,7 +183,8 @@ export default {
components: {
ProductSelect,
ProductInfo,
BomInfoMini
BomInfoMini,
ProductSpec
},
data() {
return {
@@ -200,7 +225,9 @@ export default {
unit: [
{ required: true, message: "单位不能为空", trigger: "blur" }
],
}
},
specDialogVisible: false,
productSpecList: [],
};
},
computed: {
@@ -219,6 +246,9 @@ export default {
},
created() {
this.getOrderInfo();
listProductSpecGroup().then(response => {
this.productSpecList = response.rows;
});
this.getList();
},
methods: {
@@ -344,6 +374,22 @@ export default {
this.download && this.download('wms/orderDetail/export', {
...this.queryParams
}, `orderDetail_${new Date().getTime()}.xlsx`)
},
handleSpec(row) {
this.specDialogVisible = true;
this.form = row;
},
handleChangeSpec(groupId) {
// 确认更换
this.$modal && this.$modal.confirm('是否确认更换产品规范?').then(() => {
this.form.groupId = groupId;
this.submitForm();
});
},
handleAddSpec() {
this.$router.push({
path: '/production/pspec',
});
}
},
};

View File

@@ -0,0 +1,391 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input
v-model="queryParams.salesManager"
placeholder="请输入销售经理"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单ID" align="center" prop="orderId" v-if="false"/>
<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="taxAmount" />
<el-table-column label="无税金额" align="center" prop="noTaxAmount" />
<el-table-column label="订单状态" align="center" prop="orderStatus" v-if="!isPre">
<template slot-scope="scope">
<el-select v-model="scope.row.orderStatus" @change="handleOrderStatusChange(scope.row)">
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
</el-select>
<!-- <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" class-name="small-padding fixed-width">
<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>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="showDetail(scope.row)"
>明细</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="copyOrderId(scope.row)"
>复制订单ID</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-operation"
@click="handleStartProduction(scope.row)"
v-if="!isPre"
>
确认订单
</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="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="form.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input v-model="form.salesManager" placeholder="请输入销售经理" />
</el-form-item>
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.taxAmount" placeholder="请输入含税金额" />
</el-form-item>
<el-form-item label="无税金额" prop="noTaxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.noTaxAmount" 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>
<!-- 订单明细弹窗 -->
<el-dialog title="订单明细" :visible.sync="detailDialogVisible" width="1200px" append-to-body>
<OrderDetailPanel :orderId="detailOrderId" />
</el-dialog>
</div>
</template>
<script>
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
import OrderDetailPanel from './detail.vue';
import { EOrderStatus } from "@/utils/enums";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
export default {
name: "Order",
components: { OrderDetailPanel, CustomerSelect },
dicts: ['order_status'],
props: {
isPre: {
type: Boolean,
required: true
}
},
computed: {
orderQueryStatus() {
return this.isPre ? 0 : -1;
}
},
data() {
return {
// 订单状态枚举
EOrderStatus,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 订单主表格数据
orderList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: this.orderQueryStatus,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
detailDialogVisible: false,
detailOrderId: null,
clacDialogVisible: false,
clacOrderId: null,
};
},
created() {
this.getList();
},
methods: {
/** 查询订单主列表 */
getList() {
this.loading = true;
listByStatus(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
goDashboard() {
this.$router.push('/shop/order/dashboard');
},
handleOrderStatusChange(row) {
// console.log(row);
updateOrder(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.getList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
orderId: undefined,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
taxAmount: undefined,
noTaxAmount: 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.orderId)
this.single = selection.length!==1
this.multiple = !selection.length
},
copyOrderId(row) {
// 获取浏览器剪切板对象并复制row.orderId
// 先检查是否支持
if (navigator.clipboard) {
navigator.clipboard.writeText(row.orderId);
this.$modal.msgSuccess("复制成功");
} else {
this.$modal.msgError("浏览器不支持复制功能");
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加订单主";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const orderId = row.orderId || this.ids
getOrder(orderId).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.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$modal.confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项?').then(() => {
this.loading = true;
return delOrder(orderIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/order/export', {
...this.queryParams
}, `order_${new Date().getTime()}.xlsx`)
},
showDetail(row) {
this.detailOrderId = row.orderId;
this.detailDialogVisible = true;
},
showClac(row) {
this.clacOrderId = row.orderId;
this.clacDialogVisible = true;
},
handleStartProduction(row) {
updateOrder({
orderId: row.orderId,
orderStatus: 1
}).then(response => {
this.$modal.msgSuccess("已转化为正式订单");
this.getList();
});
}
}
};
</script>

View File

@@ -0,0 +1,287 @@
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8" v-if="!readonly">
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="specId" v-if="false"/>
<el-table-column label="所属产品规范组ID" align="center" prop="groupId" />
<el-table-column label="规范名称" align="center" prop="specKey" />
<el-table-column label="规范值" align="center" prop="specValue" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" v-if="!readonly" align="center" class-name="small-padding fixed-width">
<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="所属产品规范组ID" prop="groupId">
<el-input v-model="form.groupId" placeholder="请输入所属产品规范组ID" />
</el-form-item> -->
<el-form-item label="规范键" prop="specKey">
<el-input v-model="form.specKey" placeholder="请输入规范键" />
</el-form-item>
<el-form-item label="规范值" prop="specValue">
<el-input v-model="form.specValue" type="textarea" placeholder="请输入内容" />
</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>
</div>
</template>
<script>
import { listProductSpec, getProductSpec, delProductSpec, addProductSpec, updateProductSpec } from "@/api/work/productSpec";
export default {
name: "ProductSpec",
props: {
groupId: {
type: String,
default: ""
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 产品规范(键值对模式)表格数据
productSpecList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
groupId: undefined,
specKey: undefined,
specValue: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
groupId: [
{ required: true, message: "所属产品规范组ID不能为空", trigger: "blur" }
],
specKey: [
{ required: true, message: "规范键不能为空", trigger: "blur" }
],
specValue: [
{ required: true, message: "规范值不能为空", trigger: "blur" }
],
}
};
},
watch: {
groupId: {
handler(newVal) {
// if (newVal) {
this.queryParams.groupId = newVal;
this.getList();
// }
},
immediate: true
},
},
methods: {
/** 查询产品规范(键值对模式)列表 */
getList() {
this.loading = true;
listProductSpec(this.queryParams).then(response => {
this.productSpecList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
specId: undefined,
groupId: this.groupId,
specKey: undefined,
specValue: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: 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.specId)
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 specId = row.specId || this.ids
getProductSpec(specId).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.specId != null) {
updateProductSpec(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProductSpec(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const specIds = row.specId || this.ids;
this.$modal.confirm('是否确认删除产品规范(键值对模式)编号为"' + specIds + '"的数据项?').then(() => {
this.loading = true;
return delProductSpec(specIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/productSpec/export', {
...this.queryParams
}, `productSpec_${new Date().getTime()}.xlsx`)
}
}
};
</script>

View File

@@ -1,398 +1,16 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input
v-model="queryParams.salesManager"
placeholder="请输入销售经理"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
size="mini"
@click="goDashboard"
>订单分析</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="订单ID" align="center" prop="orderId" v-if="false"/>
<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="taxAmount" />
<el-table-column label="无税金额" align="center" prop="noTaxAmount" />
<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-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="showDetail(scope.row)"
>明细</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="copyOrderId(scope.row)"
>复制订单ID</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-s-operation"
@click="handleStartProduction(scope.row)"
>
开始生产
</el-button>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-s-operation"
@click="showClac(scope.row)"
v-if="scope.row.orderStatus === EOrderStatus.NEW"
>初次采购推荐</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="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select v-model="form.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input v-model="form.salesManager" placeholder="请输入销售经理" />
</el-form-item>
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.taxAmount" placeholder="请输入含税金额" />
</el-form-item>
<el-form-item label="无税金额" prop="noTaxAmount">
<el-input-number :controls=false controls-position="right" v-model="form.noTaxAmount" 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>
<!-- 订单明细弹窗 -->
<el-dialog title="订单明细" :visible.sync="detailDialogVisible" width="900px" append-to-body>
<OrderDetailPanel :orderId="detailOrderId" />
</el-dialog>
<div>
<OrderPage :isPre="true" />
</div>
</template>
<script>
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
import OrderDetailPanel from './panels/detail.vue';
import { EOrderStatus } from "@/utils/enums";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
import OrderPage from './panels/orderPage.vue';
export default {
name: "Order",
components: { OrderDetailPanel, CustomerSelect },
dicts: ['order_status'],
data() {
return {
// 订单状态枚举
EOrderStatus,
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 订单主表格数据
orderList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: 0,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
detailDialogVisible: false,
detailOrderId: null,
clacDialogVisible: false,
clacOrderId: null,
};
},
created() {
this.getList();
},
methods: {
/** 查询订单主列表 */
getList() {
this.loading = true;
listByStatus(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
goDashboard() {
this.$router.push('/shop/order/dashboard');
},
/** 推荐采购计划确认 */
// handleRecommendConfirm(data) {
// console.log('推荐采购计划数据:', data);
// this.$modal.msgSuccess("推荐采购计划已生成");
// this.clacDialogVisible = false;
// this.getList();
// },
handleOrderStatusChange(row) {
// console.log(row);
updateOrder(row).then(response => {
this.$modal.msgSuccess("修改成功");
this.getList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
orderId: undefined,
orderCode: undefined,
customerId: undefined,
salesManager: undefined,
orderStatus: undefined,
remark: undefined,
delFlag: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined,
taxAmount: undefined,
noTaxAmount: 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.orderId)
this.single = selection.length!==1
this.multiple = !selection.length
},
copyOrderId(row) {
// 获取浏览器剪切板对象并复制row.orderId
// 先检查是否支持
if (navigator.clipboard) {
navigator.clipboard.writeText(row.orderId);
this.$modal.msgSuccess("复制成功");
} else {
this.$modal.msgError("浏览器不支持复制功能");
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加订单主";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const orderId = row.orderId || this.ids
getOrder(orderId).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.orderId != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addOrder(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$modal.confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项?').then(() => {
this.loading = true;
return delOrder(orderIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/order/export', {
...this.queryParams
}, `order_${new Date().getTime()}.xlsx`)
},
showDetail(row) {
this.detailOrderId = row.orderId;
this.detailDialogVisible = true;
},
showClac(row) {
this.clacOrderId = row.orderId;
this.clacDialogVisible = true;
},
handleStartProduction(row) {
updateOrder({
orderId: row.orderId,
orderStatus: 1
}).then(response => {
this.$modal.msgSuccess("已转化为正式订单");
this.getList();
});
}
name: 'OrderPre',
components: {
OrderPage
}
};
</script>
}
</script>

View File

@@ -66,8 +66,7 @@
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@@ -77,8 +76,7 @@
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@@ -87,8 +85,7 @@
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -133,7 +130,7 @@
<BomInfoMini :bomId="scope.row.bomId" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"

View File

@@ -7,21 +7,6 @@
</div>
<!-- 右侧图表 -->
<div style="flex: 1; height: calc(100vh - 100px); overflow-y: scroll; overflow-x: hidden;">
<el-row>
<el-col :span="24">
<el-card>
<template #header>
仓库库存
</template>
<div style="height: 600px;">
<ChartWrapper>
<rea-tree ref="reaTree" :stock-data="stockData" :warehouse-tree-data="warehouseTreeData" height="600px" />
</ChartWrapper>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-card>
@@ -55,6 +40,20 @@
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-card>
<template #header>
仓库库存
</template>
<div style="height: 600px;">
<ChartWrapper>
<rea-tree ref="reaTree" :stock-data="stockData" :warehouse-tree-data="warehouseTreeData" height="600px" />
</ChartWrapper>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>

View File

@@ -16,8 +16,8 @@
<el-input v-model="queryParams.unit" placeholder="请输入单位" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>

View File

@@ -19,24 +19,6 @@
<el-tab-pane label="生产任务管理" name="batch">
<BatchPanel :planId="planId" v-if="activeTab === 'batch'" />
</el-tab-pane>
<!-- <el-tab-pane label="计划明细" name="detail">
<el-button type="primary" size="mini" style="float:right" @click="openDetailDialog()">新增明细</el-button>
<el-table :data="detailList" v-loading="loading" style="width: 100%" v-if="activeTab === 'detail'">
<el-table-column prop="detailId" label="明细ID" align="center" />
<el-table-column prop="lineName" label="产线名称" align="center" />
<el-table-column prop="batchNo" label="批次号" align="center" />
<el-table-column prop="quantity" label="排产数量" align="center" />
<el-table-column prop="startDate" label="开始日期" align="center" />
<el-table-column prop="endDate" label="结束日期" align="center" />
<el-table-column prop="remark" label="备注" align="center" />
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="openDetailDialog(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane> -->
</el-tabs>
<el-dialog :title="detailDialogTitle" :visible.sync="detailDialogVisible" width="700px"

View File

@@ -1,34 +1,29 @@
<template>
<div class="app-container">
<el-row style="margin-bottom: 20px; padding: 0 10px;">
<!-- 任务列表容器 -->
<div class="task-list-container">
<!-- 单个任务项 -->
<div v-for="(item, index) in taskList"
:key="index"
class="task-item"
:style="{marginBottom: index === taskList.length - 1 ? '0' : '20px'}">
<!-- 产品信息区域 -->
<div class="product-info-wrapper">
<ProductInfo :productId="item && item[0] && item[0].productId" />
</div>
<!-- 工艺流程区域 -->
<div class="process-flow-container">
<div v-for="(process, pIndex) in item"
:key="process.processId"
class="process-item"
:style="{
marginRight: pIndex !== item.length - 1 ? '15px' : '0',
// 最后一个工艺项不加右侧间距
}">
<CraftInfo :craftId="process.processId" />
<el-row>
<!-- 任务列表容器 -->
<div class="task-list-container">
<!-- 单个任务项 -->
<div v-for="(item, index) in taskList" :key="index" class="task-item"
:style="{ marginBottom: index === taskList.length - 1 ? '0' : '20px' }">
<!-- 产品信息区域 -->
<div class="product-info-wrapper">
<ProductInfo :productId="item && item[0] && item[0].productId" />
</div>
<!-- 工艺流程区域 -->
<div class="process-flow-container">
<div v-for="(process, pIndex) in item" :key="process.processId" class="process-item" :style="{
marginRight: pIndex !== item.length - 1 ? '15px' : '0',
// 最后一个工艺项不加右侧间距
}">
<CraftInfo :craftId="process.processId" />
</div>
</div>
</div>
</div>
</div>
</div>
</el-row>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
@@ -63,7 +58,8 @@
<el-table-column label="生产任务总数量" align="center" prop="totalQuantity" />
<el-table-column label="合并来源" align="center" prop="mergeSource">
<template slot-scope="scope">
<div v-for="item in scope.row.mergeSource.split(',')" style="display: flex; align-items: center; justify-content: center; gap: 10px;" :key="item">
<div v-for="item in scope.row.mergeSource.split(',')"
style="display: flex; align-items: center; justify-content: center; gap: 10px;" :key="item">
<ProductInfo :productId="getTaskInfo(item).productId" />
<CraftInfo :craftId="getTaskInfo(item).processId" />
</div>
@@ -106,12 +102,8 @@
<el-input v-model="form.totalQuantity" placeholder="请输入批次总数量" />
</el-form-item> -->
<el-form-item label="合并来源" prop="mergeSource">
<merge-source-selector
v-model="form.mergeSource"
:unmerged-tasks="unmergedTaskList"
:all-tasks="allTasks"
@change="handleMergeSourceChange"
/>
<merge-source-selector v-model="form.mergeSource" :unmerged-tasks="unmergedTaskList" :all-tasks="allTasks"
@change="handleMergeSourceChange" />
<!-- <el-input v-model="form.mergeSource" type="textarea" placeholder="请输入内容" /> -->
</el-form-item>
<el-form-item label="预计开始时间" prop="estimatedStartTime">
@@ -457,9 +449,11 @@ export default {
/* 产品信息容器 */
.product-info-wrapper {
min-width: 180px; /* 固定产品信息宽度,保证对齐 */
min-width: 180px;
/* 固定产品信息宽度,保证对齐 */
padding: 8px 0;
border-right: 1px dashed #e5e7eb; /* 分隔线 */
border-right: 1px dashed #e5e7eb;
/* 分隔线 */
margin-right: 15px;
}
@@ -467,23 +461,22 @@ export default {
.process-flow-container {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 工艺项之间的间距 */
gap: 12px;
/* 工艺项之间的间距 */
padding: 8px 0;
flex: 1; /* 占满剩余空间 */
flex: 1;
/* 占满剩余空间 */
}
/* 单个工艺项样式 */
.process-item {
flex: 0 0 auto; /* 不自动拉伸 */
padding: 8px 12px;
border-radius: 4px;
flex: 0 0 auto;
background-color: #fff;
border: 1px solid #eee;
transition: border-color 0.2s ease;
}
.process-item:hover {
border-color: #409eff; /* 高亮边框 */
border-color: #409eff;
/* 高亮边框 */
}
</style>

View File

@@ -0,0 +1,138 @@
<template>
<el-select
v-model="innerValue"
placeholder="请选择或搜索制造规范"
clearable
filterable
remote
:remote-method="handleRemoteSearch"
:loading="loading"
@change="handleSelectChange"
style="width: 100%"
>
<!-- 下拉选项循环制造规范列表 -->
<el-option
v-for="item in mSpecList"
:key="item.specId"
:label="item.specName"
:value="item.specId"
/>
<!-- 无数据提示 -->
<el-option
v-if="mSpecList.length === 0 && !loading"
value=""
disabled
>
暂无匹配制造规范
</el-option>
</el-select>
</template>
<script>
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
import { debounce } from 'lodash' // 防抖:避免频繁触发接口请求
export default {
name: 'MSpecSelect',
// 1. 接收外部传入的v-model值必加双向绑定的入口
props: {
value: {
type: [String, Number, undefined], // 支持字符串/数字ID兼容不同后端返回类型
default: undefined // 初始值默认undefined未选择状态
},
// 可选:允许外部自定义搜索参数的字段名(增强组件复用性)
searchKey: {
type: String,
default: 'specName' // 默认为“规范名称”搜索对应接口的mSpecName参数
},
// 可选:每页加载数量(外部可配置)
pageSize: {
type: Number,
default: 20
},
},
data() {
return {
mSpecList: [], // 制造规范列表数据
loading: false, // 远程请求加载状态
queryParams: {
// 搜索参数默认用specName可通过searchKey自定义
specName: undefined,
pageNum: 1, // 分页:当前页码
pageSize: this.pageSize // 分页每页条数关联props的pageSize
}
}
},
computed: {
// 2. 核心内部值与外部value的双向同步桥梁
innerValue: {
get() {
// 外部传入的value -> 内部el-select的v-model值初始回显
return this.value
},
set(newVal) {
// 内部el-select值变化时 -> 触发input事件同步给外部v-model
this.$emit('input', newVal)
}
}
},
watch: {
// 3. 监听外部value变化如父组件直接修改v-model值同步更新内部选择状态
value(newVal) {
// 仅当外部值与内部值不一致时更新(避免死循环)
if (newVal !== this.innerValue) {
this.innerValue = newVal
}
},
// 监听searchKey变化外部修改搜索字段时重置搜索参数
searchKey(newKey) {
// 清空原搜索字段的值(避免残留旧字段的搜索条件)
this.queryParams[this.searchKey] = undefined
}
},
created() {
// 初始化:加载默认制造规范列表
this.getList()
// 初始化防抖函数300ms延迟可根据需求调整
this.debouncedSearch = debounce(this.getList, 300)
},
methods: {
// 4. 远程搜索逻辑(输入时触发)
handleRemoteSearch(query) {
// 根据searchKey设置搜索参数specName=query
this.queryParams[this.searchKey] = query.trim() // 去除首尾空格,避免无效搜索
this.queryParams.pageNum = 1 // 重置页码为1新搜索从第一页开始
this.debouncedSearch() // 防抖后执行搜索
},
// 5. 获取制造规范列表(远程接口请求)
getList() {
this.loading = true // 开始加载:显示加载动画
listManufacturingSpec(this.queryParams)
.then(res => {
// 接口成功赋值列表数据兼容res.rows或res.data.rows避免接口返回格式差异
this.mSpecList = res.rows || res.data?.rows || []
})
.catch(() => {
// 接口失败:清空列表,避免旧数据残留
this.mSpecList = []
this.$message.error('获取制造规范列表失败,请重试') // 错误提示(优化用户体验)
})
.finally(() => {
this.loading = false // 结束加载:隐藏加载动画
})
},
// 6. 选择变化时触发(返回完整订单项,方便父组件使用)
handleSelectChange(mSpecId) {
// 根据选中的ID找到对应的完整制造规范对象
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
// 触发change事件返回完整项父组件可通过@change接收
this.$emit('change', selectedItem)
// 可选触发input事件后额外触发change事件符合常规组件使用习惯
this.$emit('update:value', selectedItem)
}
}
}
</script>

View File

@@ -0,0 +1,319 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="工艺编码" prop="processCode">
<el-input
v-model="queryParams.processCode"
placeholder="请输入工艺编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工艺名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入工艺名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="产出产品" prop="outputProductId">
<el-input
v-model="queryParams.outputProductId"
placeholder="请输入产出产品"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="工艺描述" prop="processDesc">
<el-input
v-model="queryParams.processDesc"
placeholder="请输入工艺描述"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="标准工时" prop="standardTime">
<el-input
v-model="queryParams.standardTime"
placeholder="请输入标准工时"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="processeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="工艺ID" align="center" prop="processId" v-if="false"/>
<el-table-column label="工艺编码" align="center" prop="processCode" />
<el-table-column label="工艺名称" align="center" prop="processName" />
<!-- <el-table-column label="产出产品" align="center" prop="outputProductId" /> -->
<el-table-column label="工艺描述" align="center" prop="processDesc" />
<el-table-column label="标准工时" align="center" prop="standardTime" />
<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-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="processCode">
<el-input v-model="form.processCode" placeholder="请输入工艺编码" />
</el-form-item>
<el-form-item label="工艺名称" prop="processName">
<el-input v-model="form.processName" placeholder="请输入工艺名称" />
</el-form-item>
<!-- <el-form-item label="产出产品" prop="outputProductId">
<el-input v-model="form.outputProductId" placeholder="请输入产出产品" />
</el-form-item> -->
<el-form-item label="工艺描述" prop="processDesc">
<el-input v-model="form.processDesc" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="标准工时" prop="standardTime">
<el-input v-model="form.standardTime" 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 { listProcesse, getProcesse, delProcesse, addProcesse, updateProcesse } from "@/api/wms/craft";
export default {
name: "Processe",
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 工艺表格数据
processeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
processCode: undefined,
processName: undefined,
outputProductId: undefined,
processDesc: undefined,
standardTime: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询工艺列表 */
getList() {
this.loading = true;
listProcesse(this.queryParams).then(response => {
this.processeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
processId: undefined,
processCode: undefined,
processName: undefined,
outputProductId: undefined,
processDesc: undefined,
standardTime: undefined,
delFlag: undefined,
remark: 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.processId)
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 processId = row.processId || this.ids
getProcesse(processId).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.processId != null) {
updateProcesse(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProcesse(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const processIds = row.processId || this.ids;
this.$modal.confirm('是否确认删除工艺编号为"' + processIds + '"的数据项?').then(() => {
this.loading = true;
return delProcesse(processIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/processe/export', {
...this.queryParams
}, `processe_${new Date().getTime()}.xlsx`)
}
}
};
</script>

View File

@@ -0,0 +1,196 @@
<template>
<div ref="ganttChart" class="echarts-gantt-wrapper" style="width:100%;height:320px;"></div>
</template>
<script>
import * as echarts from 'echarts';
const colorList = [
'#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
'#13C2C2', '#B37FEB', '#FF85C0', '#36CBCB', '#FFC53D'
];
function getColor(lineId, orderId, idx) {
if (!lineId) return colorList[idx % colorList.length];
const base = Math.abs(Number(lineId)) % colorList.length;
if (!orderId) return colorList[base];
return colorList[(base + Math.abs(Number(orderId)) % colorList.length) % colorList.length];
}
export default {
name: 'GanttChartEcharts',
props: {
tasks: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
};
},
watch: {
tasks: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.renderChart();
window.addEventListener('resize', this.resizeChart);
},
beforeDestroy() {
if (this.chart) this.chart.dispose();
window.removeEventListener('resize', this.resizeChart);
},
methods: {
renderChart() {
if (!this.$refs.ganttChart) return;
if (this.chart) this.chart.dispose();
this.chart = echarts.init(this.$refs.ganttChart);
if (!this.tasks || this.tasks.length === 0) {
this.chart.clear();
return;
}
// 处理数据,兼容多种字段名,保证任务名唯一
const taskData = this.tasks.map((item, idx) => {
const name = (item.remark || item.taskName || item.productName || item.name || `任务${idx+1}`) + (item.productName ? `-${item.productName}` : '');
const start = item.startDate || item.start_time || item.start || item.start_date;
const end = item.endDate || item.end_time || item.end || item.end_date;
console.log(item.lineId, item.orderId, idx, '颜色取值依据')
return {
name,
value: [start, end],
itemStyle: {
color: getColor(item.lineId, item.orderId, idx),
borderRadius: 6
},
lineId: item.lineId,
orderId: item.orderId,
productId: item.productId,
quantity: item.quantity,
startDate: start,
endDate: end
};
});
// 先全部用 getColor 分配基础色
taskData.forEach((item, idx) => {
item._color = getColor(item.lineId, item.orderId, idx);
});
// 检查冲突(同产线时间重叠),有冲突的都标红
for (let i = 0; i < taskData.length; i++) {
for (let j = i + 1; j < taskData.length; j++) {
if (
taskData[i].lineId &&
taskData[i].lineId === taskData[j].lineId &&
new Date(taskData[i].value[0]) < new Date(taskData[j].value[1]) &&
new Date(taskData[i].value[1]) > new Date(taskData[j].value[0])
) {
taskData[i]._color = '#F56C6C';
taskData[j]._color = '#F56C6C';
}
}
}
// 颜色映射
const colorMap = taskData.map(d => d._color);
// Y轴任务名
const yData = taskData.map(d => d.name);
// X轴时间范围
const minDate = Math.min(...taskData.map(d => new Date(d.value[0]).getTime()));
const maxDate = Math.max(...taskData.map(d => new Date(d.value[1]).getTime()));
// 自动调整时间轴范围,避免跨度过大导致任务条重叠
const oneMonth = 30 * 24 * 3600 * 1000;
let xMin = minDate - oneMonth;
let xMax = maxDate + oneMonth;
// 如果跨度大于一年,仍然只扩展一个月
// 如果跨度小于一个月,最小跨度为两个月
if (xMax - xMin < 2 * oneMonth) {
xMax = xMin + 2 * oneMonth;
}
console.log(taskData);
// 配置
const option = {
tooltip: {
confine: true,
formatter: params => {
// 用 params.data[2] 作为索引查找 taskData
const idx = params.data && params.data[2];
const d = (typeof idx === 'number' && taskData[idx]) ? taskData[idx] : {};
return `任务:${d.name || ''}` +
`<br/>开始:${d.startDate || ''}` +
`<br/>结束:${d.endDate || ''}` +
`<br/>日产能:${d.capacity != null ? d.capacity : d.capacity || ''}` +
`<br/>总产能:${d.totalCapacity != null ? d.totalCapacity : d.total_capacity || ''}` +
`<br/>目标生产:${d.planQuantity != null ? d.planQuantity : d.plan_quantity || ''}` +
`<br/>天数:${d.days != null ? d.days : d.day || ''}` +
`<br/>数量:${d.quantity != null ? d.quantity : ''}`;
}
},
grid: { left: 120, right: 40, top: 30, bottom: 80 },
xAxis: {
type: 'time',
min: xMin,
max: xMax,
axisLabel: {
formatter: v => echarts.format.formatTime('yyyy-MM-dd', v),
rotate: 45 // 关键倾斜45度
}
},
yAxis: {
type: 'category',
data: yData,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { fontWeight: 'bold' }
},
series: [{
type: 'custom',
renderItem: (params, api) => {
const categoryIndex = api.value(2);
const start = api.coord([api.value(0), categoryIndex]);
const end = api.coord([api.value(1), categoryIndex]);
const barHeight = 18;
// 颜色从 colorMap 查
const idx = params.dataIndex;
let fillColor = colorMap[idx] || '#409EFF';
return {
type: 'rect',
shape: {
x: start[0],
y: start[1] - barHeight / 2,
width: end[0] - start[0],
height: barHeight,
r: 6
},
style: {
fill: fillColor
}
};
},
encode: {
x: [0, 1],
y: 2
},
data: taskData.map((d, i) => [d.value[0], d.value[1], i]),
itemStyle: {
borderRadius: 6
}
}]
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) this.chart.resize();
}
}
};
</script>
<style>
.echarts-gantt-wrapper {
width: 100%;
min-height: 220px;
background: #fff;
}
</style>

View File

@@ -0,0 +1,416 @@
<template>
<div class="production-line-page">
<el-tabs v-model="activeTab">
<el-tab-pane label="列表" name="list">
<!-- 原有列表内容 -->
<div v-show="activeTab === 'list'">
<!-- 保持原有内容不变 -->
<div class="list-content">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="产线编号" prop="lineCode">
<el-input
v-model="queryParams.lineCode"
placeholder="请输入产线编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="产线名称" prop="lineName">
<el-input
v-model="queryParams.lineName"
placeholder="请输入产线名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productionLineList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="产线编号" align="center" prop="lineCode" />
<el-table-column label="产线名称" align="center" prop="lineName" />
<el-table-column label="日产能" align="center" prop="capacity" />
<el-table-column label="负载任务数/预计耗时" align="center" prop="unit">
<template slot-scope="scope">
<span>{{ scope.row.planDetailCount }}</span> /
<span>{{ scope.row.totalPlanDays }}</span>
</template>
</el-table-column>
<el-table-column label="产能单位" align="center" prop="unit" />
<el-table-column label="是否启用" align="center" prop="isEnabled">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnabled"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用"
@change="handleEnabledChange(scope.row)"
/>
</template>
</el-table-column>
<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-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="lineCode">
<el-input v-model="form.lineCode" placeholder="请输入产线编号" />
</el-form-item>
<el-form-item label="产线名称" prop="lineName">
<el-input v-model="form.lineName" placeholder="请输入产线名称" />
</el-form-item>
<el-form-item label="日产能" prop="capacity">
<el-input v-model="form.capacity" placeholder="请输入日产能" />
</el-form-item>
<el-form-item label="产能单位" prop="unit">
<el-input v-model="form.unit" placeholder="请输入产能单位" />
</el-form-item>
<el-form-item label="是否启用" prop="isEnabled">
<el-switch
v-model="form.isEnabled"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用"
/>
</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>
</div>
</el-tab-pane>
<el-tab-pane label="甘特图" name="gantt">
<div v-show="activeTab === 'gantt'">
<div style="margin-bottom: 16px; display: flex; gap: 16px; align-items: center;">
<el-select v-model="selectedLineId" placeholder="选择产线" style="width: 180px" @change="fetchGanttData">
<el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
</el-select>
</div>
<GanttChartEcharts :tasks="ganttTasks" v-if="ganttTasks.length > 0" />
<el-empty v-else description="暂无甘特图数据" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import GanttChartEcharts from './GanttChartEcharts.vue';
import { listProductionLine, getProductionLine, delProductionLine, addProductionLine, updateProductionLine, ganttProductionLine } from "@/api/wms/productionLine";
import { listOrder } from '@/api/wms/order';
export default {
name: "ProductionLine",
components: { GanttChartEcharts },
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 产线表格数据
productionLineList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
lineCode: undefined,
lineName: undefined,
capacity: undefined,
unit: undefined,
isEnabled: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
lineCode: [
{ required: true, message: "产线编号不能为空", trigger: "blur" }
],
lineName: [
{ required: true, message: "产线名称不能为空", trigger: "blur" }
],
capacity: [
{ required: true, message: "日产能不能为空", trigger: "blur" }
],
unit: [
{ required: true, message: "产能单位不能为空", trigger: "blur" }
],
isEnabled: [
{ required: true, message: "是否启用不能为空", trigger: "blur" }
],
},
activeTab: 'list',
lineList: [],
orderList: [],
selectedLineId: null,
selectedOrderId: null,
ganttTasks: [],
ganttOrders: [],
ganttOrder: {},
ganttOrderDetails: []
};
},
created() {
this.getList();
this.loadLines();
this.loadOrders();
},
methods: {
/** 查询产线列表 */
getList() {
this.loading = true;
listProductionLine(this.queryParams).then(response => {
this.productionLineList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
lineId: undefined,
lineCode: undefined,
lineName: undefined,
capacity: undefined,
unit: undefined,
isEnabled: undefined,
remark: 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.lineId)
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 lineId = row.lineId || this.ids
getProductionLine(lineId).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.lineId != null) {
updateProductionLine(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProductionLine(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const lineIds = row.lineId || this.ids;
this.$modal.confirm('是否确认删除产线编号为"' + lineIds + '"的数据项?').then(() => {
this.loading = true;
return delProductionLine(lineIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('wms/productionLine/export', {
...this.queryParams
}, `productionLine_${new Date().getTime()}.xlsx`)
},
handleEnabledChange(row) {
// 只更新isEnabled字段
const updateData = {
lineId: row.lineId,
isEnabled: row.isEnabled
};
this.loading = true;
updateProductionLine(updateData)
.then(() => {
this.$modal.msgSuccess("状态更新成功");
})
.catch(() => {
this.$modal.msgError("状态更新失败");
// 回滚状态
row.isEnabled = row.isEnabled === 1 ? 0 : 1;
})
.finally(() => {
this.loading = false;
});
},
loadLines() {
listProductionLine({}).then(res => {
this.lineList = res.rows || [];
});
},
loadOrders() {
listOrder({}).then(res => {
this.orderList = res.rows || [];
});
},
fetchGanttData() {
if (!this.selectedLineId) {
this.ganttTasks = [];
this.ganttOrders = [];
return;
}
ganttProductionLine({
lineId: this.selectedLineId
}).then(res => {
this.ganttTasks = res.data.tasks || [];
this.ganttOrders = res.data.orders || [];
});
}
}
};
</script>
<style scoped>
.production-line-page {
padding: 16px;
}
</style>

View File

@@ -0,0 +1,457 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="规范名称" prop="specName">
<el-input
v-model="queryParams.specName"
placeholder="请输入制造规范名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="工艺路线" prop="processRoute">
<el-input
v-model="queryParams.processRoute"
placeholder="请输入工艺路线"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.work_mspec_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="规范类型" prop="specType">
<el-select v-model="queryParams.specType" placeholder="请选择规范类型" clearable>
<el-option
v-for="dict in dict.type.work_mspec_type"
: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="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="manufacturingSpecList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="specId" v-if="false"/>
<el-table-column label="制造规范编码" align="center" prop="specCode" />
<el-table-column label="制造规范名称" align="center" prop="specName" />
<!-- 工艺路线列溢出显示省略号 -->
<el-table-column
label="工艺路线"
align="center"
prop="processRoute"
width="220"
show-overflow-tooltip
/>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.work_mspec_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="规范类型" align="center" prop="specType">
<template slot-scope="scope">
<dict-tag :options="dict.type.work_mspec_type" :value="scope.row.specType"/>
</template>
</el-table-column>
<el-table-column label="理论工时(h)" align="center" prop="standardHours" />
<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-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="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="规范编码" prop="specCode">
<el-input v-model="form.specCode" placeholder="请输入制造规范编码" />
</el-form-item>
<el-form-item label="规范名称" prop="specName">
<el-input v-model="form.specName" placeholder="请输入制造规范名称" />
</el-form-item>
<!-- 工艺路线动态输入框组 -->
<el-form-item label="工艺路线" prop="processSteps">
<div v-for="(step, index) in form.processSteps" :key="index" class="process-step-item">
<el-input
v-model="form.processSteps[index]"
placeholder="请输入工艺步骤"
class="step-input"
/>
<el-button
type="text"
icon="el-icon-delete"
size="mini"
class="delete-btn"
@click="removeStep(index)"
:disabled="form.processSteps.length <= 1"
/>
</div>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="addStep"
class="add-step-btn"
>
添加工艺步骤
</el-button>
<div class="form-hint">提示点击"+"添加步骤点击"×"删除步骤</div>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.work_mspec_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="规范类型" prop="specType">
<el-select v-model="form.specType" placeholder="请选择规范类型">
<el-option
v-for="dict in dict.type.work_mspec_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="理论工时(h)" prop="standardHours">
<el-input v-model="form.standardHours" placeholder="请输入理论工时(h)" />
</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>
</div>
</template>
<script>
import { listManufacturingSpec, getManufacturingSpec, delManufacturingSpec, addManufacturingSpec, updateManufacturingSpec } from "@/api/work/manufacturingSpec";
export default {
name: "ManufacturingSpec",
dicts: ['work_mspec_status', 'work_mspec_type'],
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 制造规范表格数据
manufacturingSpecList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
specCode: undefined,
specName: undefined,
processRoute: undefined,
status: undefined,
specType: undefined,
standardHours: undefined,
},
// 表单参数
form: {
processSteps: [] // 用于存储多个工艺步骤的数组
},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询制造规范列表 */
getList() {
this.loading = true;
listManufacturingSpec(this.queryParams).then(response => {
this.manufacturingSpecList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
specId: undefined,
specCode: undefined,
specName: undefined,
businessUnit: undefined,
projectTeam: undefined,
productModule: undefined,
identifier: undefined,
material: undefined,
specification: undefined,
processRoute: undefined,
processSteps: [''], // 初始化至少一个输入框
processParams: undefined,
scope: undefined,
inspectionStandard: undefined,
status: undefined,
specType: undefined,
version: undefined,
versionDate: undefined,
standardHours: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: undefined,
remark: 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.specId)
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 specId = row.specId || this.ids
getManufacturingSpec(specId).then(response => {
this.loading = false;
const data = response.data;
// 将工艺路线字符串拆分为步骤数组
if (data.processRoute) {
data.processSteps = data.processRoute
.split('-')
.filter(line => line); // 过滤空行
} else {
data.processSteps = [''];
}
this.form = data;
this.open = true;
this.title = "修改制造规范";
});
},
/** 添加工艺步骤输入框 */
addStep() {
this.form.processSteps.push('');
},
/** 移除工艺步骤输入框 */
removeStep(index) {
if (this.form.processSteps.length <= 1) {
this.$message.warning('至少保留一个工艺步骤');
return;
}
this.form.processSteps.splice(index, 1);
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
// 验证至少有一个非空步骤
const hasValidStep = this.form.processSteps.some(step => step.trim() !== '');
if (!hasValidStep) {
this.$message.error('请至少输入一个工艺步骤');
this.buttonLoading = false;
return;
}
// 处理工艺路线格式,将步骤数组合并为带-前缀的字符串
this.form.processRoute = this.form.processSteps
.map(step => step.trim())
.filter(step => step) // 过滤空行
.join('-');
if (this.form.specId != null) {
updateManufacturingSpec(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addManufacturingSpec(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const specIds = row.specId || this.ids;
this.$modal.confirm('是否确认删除制造规范编号为"' + specIds + '"的数据项?').then(() => {
this.loading = true;
return delManufacturingSpec(specIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/manufacturingSpec/export', {
...this.queryParams
}, `manufacturingSpec_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped>
.process-step-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.step-input {
flex: 1;
margin-right: 10px;
}
.delete-btn {
color: #F56C6C;
}
.add-step-btn {
margin-top: 10px;
}
.form-hint {
margin-top: 5px;
color: #606266;
font-size: 12px;
line-height: 1.5;
}
</style>

View File

View File

@@ -0,0 +1,287 @@
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8" v-if="!readonly">
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productSpecList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="specId" v-if="false"/>
<el-table-column label="所属产品规范组ID" align="center" prop="groupId" />
<el-table-column label="规范名称" align="center" prop="specKey" />
<el-table-column label="规范值" align="center" prop="specValue" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" v-if="!readonly" align="center" class-name="small-padding fixed-width">
<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="所属产品规范组ID" prop="groupId">
<el-input v-model="form.groupId" placeholder="请输入所属产品规范组ID" />
</el-form-item> -->
<el-form-item label="规范键" prop="specKey">
<el-input v-model="form.specKey" placeholder="请输入规范键" />
</el-form-item>
<el-form-item label="规范值" prop="specValue">
<el-input v-model="form.specValue" type="textarea" placeholder="请输入内容" />
</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>
</div>
</template>
<script>
import { listProductSpec, getProductSpec, delProductSpec, addProductSpec, updateProductSpec } from "@/api/work/productSpec";
export default {
name: "ProductSpec",
props: {
groupId: {
type: String,
default: ""
},
readonly: {
type: Boolean,
default: false
}
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 产品规范(键值对模式)表格数据
productSpecList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
groupId: undefined,
specKey: undefined,
specValue: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
groupId: [
{ required: true, message: "所属产品规范组ID不能为空", trigger: "blur" }
],
specKey: [
{ required: true, message: "规范键不能为空", trigger: "blur" }
],
specValue: [
{ required: true, message: "规范值不能为空", trigger: "blur" }
],
}
};
},
watch: {
groupId: {
handler(newVal) {
// if (newVal) {
this.queryParams.groupId = newVal;
this.getList();
// }
},
immediate: true
},
},
methods: {
/** 查询产品规范(键值对模式)列表 */
getList() {
this.loading = true;
listProductSpec(this.queryParams).then(response => {
this.productSpecList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
specId: undefined,
groupId: this.groupId,
specKey: undefined,
specValue: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: 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.specId)
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 specId = row.specId || this.ids
getProductSpec(specId).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.specId != null) {
updateProductSpec(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProductSpec(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const specIds = row.specId || this.ids;
this.$modal.confirm('是否确认删除产品规范(键值对模式)编号为"' + specIds + '"的数据项?').then(() => {
this.loading = true;
return delProductSpec(specIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/productSpec/export', {
...this.queryParams
}, `productSpec_${new Date().getTime()}.xlsx`)
}
}
};
</script>

View File

@@ -0,0 +1,319 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="规范组编码" prop="groupCode">
<el-input
v-model="queryParams.groupCode"
placeholder="请输入产品规范组编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="绑定产品" prop="productId">
<ProductSelect v-model="queryParams.productId" />
</el-form-item>
<el-form-item label="规范组名称" prop="groupName">
<el-input
v-model="queryParams.groupName"
placeholder="请输入产品规范组名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<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="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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productSpecGroupList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="groupId" v-if="true"/>
<el-table-column label="规范组编码" align="center" prop="groupCode" />
<!-- <el-table-column label="绑定产品" align="center" prop="productId" /> -->
<el-table-column label="绑定产品" align="center">
<template slot-scope="scope">
<ProductInfo :productId="scope.row.productId" />
</template>
</el-table-column>
<el-table-column label="产品规范组名称" align="center" prop="groupName" />
<el-table-column label="状态" align="center" prop="status" />
<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-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-document"
@click="showDetail(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="groupCode">
<el-input v-model="form.groupCode" placeholder="请输入产品规范组编码" />
</el-form-item>
<el-form-item label="绑定产品" prop="productId">
<ProductSelect v-model="form.productId" />
</el-form-item>
<el-form-item label="规范组名称" prop="groupName">
<el-input v-model="form.groupName" placeholder="请输入产品规范组名称" />
</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-dialog title="产品规范组明细" :visible.sync="detailDialogVisible" width="1200px" append-to-body>
<Detail :groupId="detailGroupId" />
</el-dialog>
</div>
</template>
<script>
import { listProductSpecGroup, getProductSpecGroup, delProductSpecGroup, addProductSpecGroup, updateProductSpecGroup } from "@/api/work/productSpecGroup";
import Detail from "./components/detail.vue";
import ProductSelect from "@/components/KLPService/ProductSelect";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
export default {
name: "ProductSpecGroup",
components: {
Detail,
ProductSelect,
ProductInfo
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 产品规范组表格数据
productSpecGroupList: [],
// 产品规范组明细
detailGroupId: "",
detailDialogVisible: false,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
groupCode: undefined,
productId: undefined,
groupName: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询产品规范组列表 */
getList() {
this.loading = true;
listProductSpecGroup(this.queryParams).then(response => {
this.productSpecGroupList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
groupId: undefined,
groupCode: undefined,
productId: undefined,
groupName: undefined,
status: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: 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.groupId)
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 groupId = row.groupId || this.ids
getProductSpecGroup(groupId).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.groupId != null) {
updateProductSpecGroup(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProductSpecGroup(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const groupIds = row.groupId || this.ids;
this.$modal.confirm('是否确认删除产品规范组编号为"' + groupIds + '"的数据项?').then(() => {
this.loading = true;
return delProductSpecGroup(groupIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/productSpecGroup/export', {
...this.queryParams
}, `productSpecGroup_${new Date().getTime()}.xlsx`)
},
showDetail(row) {
this.detailGroupId = row.groupId;
this.detailDialogVisible = true;
}
}
};
</script>

View File

@@ -0,0 +1,143 @@
<template>
<el-row style="margin: 20px;">
<el-col :span="12">
<div style="max-height:60vh;overflow:auto;padding-right:8px;">
<el-form :model="detailForm" :rules="detailRules" ref="detailForm" label-width="80px" style="overflow:visible;">
<el-form-item label="产线" prop="lineId">
<el-select clearable v-model="detailForm.lineId" placeholder="请选择产线" filterable @change="onLineChange">
<el-option v-for="item in productionLineList" :key="item.lineId" :label="item.lineName"
:value="item.lineId" />
</el-select>
</el-form-item>
<el-form-item label="批次" prop="batchId">
<!-- <el-select v-model="detailForm.productId" placeholder="请选择产品" filterable>
<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
:value="item.productId" />
</el-select> -->
<el-select clearable v-model="detailForm.batchId" placeholder="请选择批次" filterable @change="onBatchChange">
<el-option v-for="item in batchList" :key="item.batchId" :label="item.batchNo" :value="item.batchId" />
</el-select>
</el-form-item>
<el-form-item label="排产数量" prop="quantity">
<el-input-number :controls=false controls-position="right" v-model="detailForm.quantity" disabled :min="0.01" :step="0.01" style="width:100%" />
</el-form-item>
<el-form-item label="计划日期" prop="dateRange">
<el-date-picker v-model="detailForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" style="width:100%" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="detailForm.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
</div>
<el-button type="primary" @click="submitDetailForm">提交排产</el-button>
</el-col>
<el-col :span="12">
<div style="margin: 12px 0; max-width:100%; min-width:600px; height:220px; overflow-x:auto; overflow-y:hidden;">
<GanttChartEcharts v-if="lineGanttTasks.length > 0 || previewTask"
:tasks="previewTask ? [...lineGanttTasks, previewTask] : lineGanttTasks"
style="height:220px; min-width:600px;" />
<el-empty v-else description="请选择产线以查看排产情况" />
</div>
</el-col>
</el-row>
</template>
<script>
import { listProductionLine } from '@/api/wms/productionLine';
import { ganttProductionLine } from '@/api/wms/productionLine';
import { addSchedulePlanDetail, updateSchedulePlanDetail } from '@/api/wms/schedulePlanDetail';
import { listBatch } from '@/api/wms/batch';
import GanttChartEcharts from '../line/GanttChartEcharts.vue';
export default {
components: {
GanttChartEcharts
},
data() {
return {
detailForm: {
detailId: undefined,
planId: undefined,
lineId: undefined,
// productId: undefined,
batchId: undefined,
quantity: 0,
dateRange: [],
startDate: '',
endDate: '',
remark: ''
},
detailRules: {
batchId: [{ required: true, message: '请选择产品', trigger: 'change' }],
lineId: [{ required: true, message: '请选择产线', trigger: 'change' }],
quantity: [{ required: true, message: '请输入排产数量', trigger: 'blur' }],
dateRange: [{ required: true, type: 'array', len: 2, message: '请选择计划日期区间', trigger: 'change' }]
},
lineGanttTasks: [],
productionLineList: [],
previewTask: null,
}
},
created() {
this.fetchBatchList();
this.fetchProductionLineList();
},
methods: {
fetchProductionLineList() {
listProductionLine({ pageNum: 1, pageSize: 1000 }).then(res => {
this.productionLineList = res.rows || [];
});
},
onLineChange(lineId) {
if (!lineId) {
this.lineGanttTasks = [];
return;
}
ganttProductionLine({ lineId }).then(res => {
this.lineGanttTasks = res.data.tasks || [];
this.updatePreviewTask();
});
},
onBatchChange(batchId) {
if (batchId) {
// 从batchList中查找
const batch = this.batchList.find(item => item.batchId == batchId);
console.log(batch);
if (batch) {
this.detailForm.quantity = batch.totalQuantity;
this.detailForm.dateRange = [
batch.estimatedStartTime,
batch.estimatedEndTime
];
}
}
},
fetchBatchList() {
listBatch({ pageNum: 1, pageSize: 1000 }).then(res => {
this.batchList = res.rows || [];
});
},
submitDetailForm() {
this.$refs.detailForm.validate(valid => {
if (!valid) return;
if (this.detailForm.dateRange && this.detailForm.dateRange.length === 2) {
this.detailForm.startDate = this.detailForm.dateRange[0].replace(' ', "T") + '.000Z';
this.detailForm.endDate = this.detailForm.dateRange[1].replace(' ', "T") + '.000Z';
} else {
this.detailForm.startDate = '';
this.detailForm.endDate = '';
}
const api = this.detailForm.detailId ? updateSchedulePlanDetail : addSchedulePlanDetail;
const data = Object.assign({}, this.detailForm, { planId: this.planId });
api(data).then(() => {
this.$message.success(this.detailForm.detailId ? '修改成功' : '新增成功');
this.detailDialogVisible = false;
this.fetchDetailList();
});
});
}
}
}
</script>

View File

@@ -0,0 +1,86 @@
<template>
<el-select
v-model="selectedValue"
placeholder="请选择或搜索订单"
clearable
filterable
remote
:remote-method="handleRemoteSearch"
:loading="loading"
@change="handleSelectChange"
style="width: 100%"
>
<!-- 下拉选项 -->
<el-option
v-for="item in orderList"
:key="item.orderId"
:label="item.orderCode"
:value="item.orderId"
/>
<!-- 无数据提示 -->
<el-option
v-if="orderList.length === 0 && !loading"
value=""
disabled
>
暂无匹配订单
</el-option>
</el-select>
</template>
<script>
import { listOrder } from '@/api/wms/order'
import { debounce } from 'lodash' // 引入防抖函数
export default {
name: 'OrderSelect',
data() {
return {
orderList: [],
loading: false,
queryParams: {
orderCode: undefined,
pageNum: 1,
pageSize: 20
},
selectedValue: undefined
}
},
created() {
// 初始化加载订单列表
this.getList()
// 初始化防抖搜索方法300ms延迟
this.debouncedSearch = debounce(this.getList, 300)
},
methods: {
// 远程搜索方法
handleRemoteSearch(query) {
this.queryParams.orderCode = query
this.queryParams.pageNum = 1 // 重置页码
this.debouncedSearch() // 使用防抖搜索
},
// 获取订单列表
getList() {
this.loading = true
listOrder(this.queryParams).then(res => {
this.orderList = res.rows || []
this.loading = false
}).catch(() => {
this.loading = false
this.orderList = []
})
},
// 选择变化时触发
handleSelectChange(orderId) {
// 找到选中的完整订单项
const selectedItem = this.orderList.find(item => item.orderId === orderId)
// 通过onchange事件返回完整订单项
this.$emit('change', selectedItem)
}
}
}
</script>

View File

@@ -0,0 +1,371 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="产品规范" prop="productSpecGroupId">
<el-input
v-model="queryParams.productSpecGroupId"
placeholder="请输入产品规范组ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="制造规范" prop="manufacturingSpecId">
<el-input
v-model="queryParams.manufacturingSpecId"
placeholder="请输入制造规范ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="订单" prop="orderId">
<el-input
v-model="queryParams.orderId"
placeholder="请输入订单ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="计划名称" prop="planName">
<el-input
v-model="queryParams.planName"
placeholder="请输入计划名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="计划编号" prop="planCode">
<el-input
v-model="queryParams.planCode"
placeholder="请输入计划编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleCreateFromOrder"
>从订单创建</el-button>
</el-col>
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productionTaskList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="taskId" v-if="true"/>
<el-table-column label="产品规范组ID" align="center" prop="productSpecGroupId" />
<el-table-column label="制造规范ID" align="center" prop="manufacturingSpecId" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="订单明细ID" align="center" prop="orderItemId" />
<el-table-column label="计划名称" align="center" prop="planName" />
<el-table-column label="计划编号" align="center" prop="planCode" />
<el-table-column label="状态" align="center" prop="status" />
<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-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="100px">
<el-form-item label="产品规范组" prop="productSpecGroupId">
<el-input v-model="form.productSpecGroupId" placeholder="请输入产品规范组" />
</el-form-item>
<el-form-item label="制造规范" prop="manufacturingSpecId">
<el-input v-model="form.manufacturingSpecId" placeholder="请输入制造规范" />
</el-form-item>
<!-- <el-form-item label="订单" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单" />
</el-form-item>
<el-form-item label="订单明细" prop="orderItemId">
<OrderSelect v-model="form.orderId" @change="handleOrderChange" />
</el-form-item> -->
<el-form-item label="计划名称" prop="planName">
<el-input v-model="form.planName" placeholder="请输入计划名称" />
</el-form-item>
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="form.planCode" placeholder="请输入计划编号" />
</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-dialog title="从订单创建生产任务" :visible.sync="detailDialogVisible" width="500px" append-to-body>
<CreateByOrder @create="handleConfirmCreate" />
</el-dialog>
</div>
</template>
<script>
import { listProductionTask, getProductionTask, delProductionTask, addProductionTask, updateProductionTask } from "@/api/work/productionTask";
import CreateByOrder from "./panels/createByOrder.vue";
export default {
name: "ProductionTask",
components: {
CreateByOrder
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 生产任务表格数据
productionTaskList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
productSpecGroupId: undefined,
manufacturingSpecId: undefined,
orderId: undefined,
orderItemId: undefined,
planName: undefined,
planCode: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
productSpecGroupId: [
{ required: true, message: "产品规范组ID不能为空", trigger: "blur" }
],
manufacturingSpecId: [
{ required: true, message: "制造规范ID不能为空", trigger: "blur" }
],
},
detailDialogVisible: false,
};
},
created() {
this.getList();
},
methods: {
/** 查询生产任务列表 */
getList() {
this.loading = true;
listProductionTask(this.queryParams).then(response => {
this.productionTaskList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
taskId: undefined,
productSpecGroupId: undefined,
manufacturingSpecId: undefined,
orderId: undefined,
orderItemId: undefined,
planName: undefined,
planCode: undefined,
status: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: 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.taskId)
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 taskId = row.taskId || this.ids
getProductionTask(taskId).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.taskId != null) {
updateProductionTask(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addProductionTask(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const taskIds = row.taskId || this.ids;
this.$modal.confirm('是否确认删除生产任务编号为"' + taskIds + '"的数据项?').then(() => {
this.loading = true;
return delProductionTask(taskIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/productionTask/export', {
...this.queryParams
}, `productionTask_${new Date().getTime()}.xlsx`)
},
handleCreateFromOrder() {
this.reset();
this.detailDialogVisible = true;
},
handleConfirmCreate(orderItems) {
console.log(orderItems);
Promise.all(orderItems.map(item => {
return addProductionTask({
productSpecGroupId: item.productSpecGroupId,
manufacturingSpecIds: item.manufacturingSpecIds,
orderId: item.orderId,
orderItemId: item.orderItemId,
});
})).then(res => {
this.$modal.msgSuccess("创建成功");
this.detailDialogVisible = false;
this.getList();
});
}
}
};
</script>

View File

@@ -0,0 +1,83 @@
<template>
<div>
<el-row style="margin-bottom: 10px;">
<el-col :span="12">
<OrderSelect @change="handleOrderChange" />
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary" @click="handleCreate">确认创建</el-button>
</el-col>
</el-row>
<el-table :data="orderItems" style="width: 100%;">
<el-table-column label="产品">
<template slot-scope="scope">
<ProductInfo :productId="scope.row.productId" />
</template>
</el-table-column>
<el-table-column label="规格">
<template slot-scope="scope">
<el-button type="text" @click="handleSpec(scope.row)">查看规格</el-button>
</template>
</el-table-column>
<el-table-column label="制造规格">
<template slot-scope="scope">
<MSpecSelect v-model="scope.row.manufacturingSpecIds" />
</template>
</el-table-column>
</el-table>
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="600px" append-to-body>
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="false"/>
<div v-else>
暂无产品规格
</div>
</el-dialog>
</div>
</template>
<script>
import OrderSelect from "../components/OrderSelect";
import { listOrderDetail } from "@/api/wms/orderDetail";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import MSpecSelect from "@/views/work/components/MSpecSelect";
import ProductSpec from "@/views/wms/order/panels/spec.vue";
export default {
name: 'CreateByOrder',
components: {
OrderSelect,
ProductInfo,
MSpecSelect,
ProductSpec
},
data() {
return {
order: null,
orderItems: [],
specDialogVisible: false,
form: {
groupId: undefined
}
}
},
methods: {
handleOrderChange(order) {
this.order = order;
listOrderDetail({
orderId: order.orderId
}).then(res => {
this.orderItems = res.rows
})
},
handleCreate() {
console.log(this.orderItems);
this.$emit('create', this.orderItems);
},
handleSpec(row) {
this.specDialogVisible = true;
this.form = row;
}
}
}
</script>