✨ feat: 生产管理初步重构
This commit is contained in:
44
klp-ui/src/api/work/manufacturingSpec.js
Normal file
44
klp-ui/src/api/work/manufacturingSpec.js
Normal 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'
|
||||
})
|
||||
}
|
||||
44
klp-ui/src/api/work/productSpec.js
Normal file
44
klp-ui/src/api/work/productSpec.js
Normal 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'
|
||||
})
|
||||
}
|
||||
44
klp-ui/src/api/work/productSpecGroup.js
Normal file
44
klp-ui/src/api/work/productSpecGroup.js
Normal 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'
|
||||
})
|
||||
}
|
||||
44
klp-ui/src/api/work/productionTask.js
Normal file
44
klp-ui/src/api/work/productionTask.js
Normal 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'
|
||||
})
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -346,3 +346,11 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-button--text {
|
||||
padding: 0;
|
||||
margin-left: 4px !important;
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
|
||||
138
klp-ui/src/views/wms/order/components/PSpecSelect.vue
Normal file
138
klp-ui/src/views/wms/order/components/PSpecSelect.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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',
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
391
klp-ui/src/views/wms/order/panels/orderPage.vue
Normal file
391
klp-ui/src/views/wms/order/panels/orderPage.vue
Normal 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>
|
||||
287
klp-ui/src/views/wms/order/panels/spec.vue
Normal file
287
klp-ui/src/views/wms/order/panels/spec.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
138
klp-ui/src/views/work/components/MSpecSelect.vue
Normal file
138
klp-ui/src/views/work/components/MSpecSelect.vue
Normal 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>
|
||||
319
klp-ui/src/views/work/craft/index.vue
Normal file
319
klp-ui/src/views/work/craft/index.vue
Normal 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>
|
||||
196
klp-ui/src/views/work/line/GanttChartEcharts.vue
Normal file
196
klp-ui/src/views/work/line/GanttChartEcharts.vue
Normal 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>
|
||||
416
klp-ui/src/views/work/line/index.vue
Normal file
416
klp-ui/src/views/work/line/index.vue
Normal 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>
|
||||
457
klp-ui/src/views/work/mspec/index.vue
Normal file
457
klp-ui/src/views/work/mspec/index.vue
Normal 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>
|
||||
0
klp-ui/src/views/work/plan/index.vue
Normal file
0
klp-ui/src/views/work/plan/index.vue
Normal file
287
klp-ui/src/views/work/pspec/components/detail.vue
Normal file
287
klp-ui/src/views/work/pspec/components/detail.vue
Normal 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>
|
||||
319
klp-ui/src/views/work/pspec/index.vue
Normal file
319
klp-ui/src/views/work/pspec/index.vue
Normal 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>
|
||||
143
klp-ui/src/views/work/schedule/index.vue
Normal file
143
klp-ui/src/views/work/schedule/index.vue
Normal 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>
|
||||
86
klp-ui/src/views/work/task/components/OrderSelect.vue
Normal file
86
klp-ui/src/views/work/task/components/OrderSelect.vue
Normal 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>
|
||||
371
klp-ui/src/views/work/task/index.vue
Normal file
371
klp-ui/src/views/work/task/index.vue
Normal 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>
|
||||
83
klp-ui/src/views/work/task/panels/createByOrder.vue
Normal file
83
klp-ui/src/views/work/task/panels/createByOrder.vue
Normal 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>
|
||||
Reference in New Issue
Block a user