add:添加工单页面
This commit is contained in:
zhangzq
305
nladmin-ui/src/views/wms/pm_manage/work_order/index.vue
Normal file
305
nladmin-ui/src/views/wms/pm_manage/work_order/index.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<!-- 查询区域 -->
|
||||
<div>
|
||||
<el-form :inline="true" label-position="right" label-width="100px" label-suffix=":" class="demo-form-inline">
|
||||
<el-form-item label="工单编号">
|
||||
<el-input v-model="query.order_code" clearable size="mini" placeholder="请输入工单编号" @keyup.enter.native="crud.toQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称">
|
||||
<el-input v-model="query.product_name" clearable size="mini" placeholder="请输入产品名称" @keyup.enter.native="crud.toQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="BOM编码">
|
||||
<el-input v-model="query.bom_code" clearable size="mini" placeholder="请输入BOM编码" @keyup.enter.native="crud.toQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作区域">
|
||||
<el-input v-model="query.work_area" clearable size="mini" placeholder="请输入工作区域" @keyup.enter.native="crud.toQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="query.status" clearable size="mini" placeholder="请选择状态" class="filter-item" @change="crud.toQuery">
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<rrOperation :crud="crud" />
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div style="margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
|
||||
<crudOperation :permission="permission" />
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="960px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="120px" label-suffix=":" style="border: 1px solid #cfe0df; margin-top: 10px; padding: 10px;">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工单编号" prop="order_code">
|
||||
<el-input v-model.trim="form.order_code" style="width: 280px;" placeholder="请输入工单编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品编码" prop="product_code">
|
||||
<el-input v-model.trim="form.product_code" style="width: 280px;" placeholder="请输入产品编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品名称" prop="product_name">
|
||||
<el-input v-model.trim="form.product_name" style="width: 280px;" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品规格" prop="product_spec">
|
||||
<el-input v-model.trim="form.product_spec" style="width: 280px;" placeholder="请输入产品规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划数量" prop="order_qty">
|
||||
<el-input-number v-model="form.order_qty" :min="0" :step="1" style="width: 280px;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model.trim="form.unit" style="width: 280px;" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="BOM编码" prop="bom_code">
|
||||
<el-input v-model.trim="form.bom_code" style="width: 280px;" placeholder="请输入BOM编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工作区域" prop="work_area">
|
||||
<el-input v-model.trim="form.work_area" style="width: 280px;" placeholder="请输入工作区域" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划开始时间" prop="plan_started_on">
|
||||
<el-date-picker v-model="form.plan_started_on" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择计划开始时间" style="width: 280px;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计划完成时间" prop="plan_finished_on">
|
||||
<el-date-picker v-model="form.plan_finished_on" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择计划完成时间" style="width: 280px;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" style="width: 280px;" placeholder="请选择状态">
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model.trim="form.remark" style="width: 280px;" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 工单明细对话框 -->
|
||||
<el-dialog
|
||||
:visible.sync="detailVisible"
|
||||
title="工单明细（BOM清单）"
|
||||
width="1100px"
|
||||
:close-on-click-modal="false"
|
||||
@close="closeDetailDialog"
|
||||
>
|
||||
<div style="margin-bottom: 10px; color: #606266; font-size: 13px;">
|
||||
工单编号：<strong>{{ currentWorkOrder.order_code }}</strong> |
|
||||
产品：<strong>{{ currentWorkOrder.product_code }} {{ currentWorkOrder.product_name }}</strong> |
|
||||
计划数量：<strong style="color: #E6A23C;">{{ currentWorkOrder.order_qty }} {{ currentWorkOrder.unit }}</strong>
|
||||
</div>
|
||||
<el-table v-loading="detailLoading" :data="bomList" size="small" border max-height="480">
|
||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="item_no" label="行号" width="60" align="center" />
|
||||
<el-table-column prop="material_code" label="物料编码" min-width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="material_name" label="物料名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="spec" label="规格" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="unit" label="单位" width="70" align="center" />
|
||||
<el-table-column prop="bom_qty" label="BOM用量" width="100" align="right" />
|
||||
<el-table-column prop="use_bom_qty" label="已用数量" width="100" align="right" />
|
||||
<el-table-column prop="wms_qty" label="WMS数量" width="100" align="right" />
|
||||
<el-table-column prop="warehouse_name" label="仓库" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="load_port" label="上料口" width="90" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="work_center" label="工作中心" min-width="110" show-overflow-tooltip />
|
||||
<el-table-column prop="track_no" label="跟踪号" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="bomStatusTagType(scope.row.status)" size="mini">{{ bomStatusLabel(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeDetailDialog">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 主列表 -->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
size="small"
|
||||
border
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
@expand-change="handleExpandChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="ID" width="220" show-overflow-tooltip />
|
||||
<el-table-column prop="order_code" label="工单编号" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="product_code" label="产品编码" min-width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="product_name" label="产品名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="product_spec" label="产品规格" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="order_qty" label="计划数量" width="90" align="right" />
|
||||
<el-table-column prop="use_order_qty" label="已用数量" width="90" align="right" />
|
||||
<el-table-column prop="finished_qty" label="完成数量" width="90" align="right" />
|
||||
<el-table-column prop="unit" label="单位" width="70" align="center" />
|
||||
<el-table-column prop="bom_code" label="BOM编码" min-width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="work_area" label="工作区域" min-width="110" show-overflow-tooltip />
|
||||
<el-table-column prop="plan_started_on" label="计划开始" min-width="155" show-overflow-tooltip />
|
||||
<el-table-column prop="plan_finished_on" label="计划完成" min-width="155" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="statusTagType(scope.row.status)" size="mini">{{ statusLabel(scope.row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间" min-width="155" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="210" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<udOperation style="display: inline" :data="scope.row" :permission="permission" />
|
||||
<el-button size="mini" type="primary" plain style="margin-left: 4px;" @click="openDetailDialog(scope.row.order_code)">明细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudWorkOrder from './workOrder'
|
||||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation.vue'
|
||||
import udOperation from '@crud/UD.operation.vue'
|
||||
import rrOperation from '@crud/RR.operation.vue'
|
||||
import pagination from '@crud/Pagination.vue'
|
||||
|
||||
const createDefaultForm = () => ({
|
||||
id: null,
|
||||
order_code: '',
|
||||
product_code: '',
|
||||
product_name: '',
|
||||
product_spec: '',
|
||||
order_qty: undefined,
|
||||
unit: '',
|
||||
bom_code: '',
|
||||
work_area: '',
|
||||
plan_started_on: '',
|
||||
plan_finished_on: '',
|
||||
status: undefined,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'WorkOrder',
|
||||
components: { pagination, crudOperation, rrOperation, udOperation },
|
||||
mixins: [presenter(), header(), form(createDefaultForm()), crud()],
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '工单管理',
|
||||
url: 'api/workOrder',
|
||||
idField: 'id',
|
||||
sort: 'plan_started_on,desc',
|
||||
crudMethod: { ...crudWorkOrder },
|
||||
optShow: { add: true, reset: true }
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
permission: {},
|
||||
statusOptions: [
|
||||
{ value: 1, label: '待执行' },
|
||||
{ value: 2, label: '执行中' },
|
||||
{ value: 3, label: '完成' },
|
||||
{ value: 4, label: '暂停' },
|
||||
{ value: 5, label: '撤销' }
|
||||
],
|
||||
bomStatusOptions: [
|
||||
{ value: 0, label: '待备料' },
|
||||
{ value: 1, label: '备料中' },
|
||||
{ value: 2, label: '已备料' }
|
||||
],
|
||||
detailVisible: false,
|
||||
detailLoading: false,
|
||||
currentWorkOrder: {},
|
||||
bomList: [],
|
||||
multipleSelection: [],
|
||||
rules: {
|
||||
order_code: [{ required: true, message: '请输入工单编号', trigger: 'blur' }],
|
||||
product_code: [{ required: true, message: '请输入产品编码', trigger: 'blur' }],
|
||||
product_name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
|
||||
order_qty: [{ required: true, message: '请输入计划数量', trigger: 'change' }],
|
||||
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
||||
bom_code: [{ required: true, message: '请输入BOM编码', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusLabel(status) {
|
||||
const target = this.statusOptions.find(item => Number(item.value) === Number(status))
|
||||
return target ? target.label : status
|
||||
},
|
||||
statusTagType(status) {
|
||||
const map = { 1: 'info', 2: 'primary', 3: 'success', 4: 'warning', 5: 'danger' }
|
||||
return map[Number(status)] || ''
|
||||
},
|
||||
bomStatusLabel(status) {
|
||||
const target = this.bomStatusOptions.find(item => Number(item.value) === Number(status))
|
||||
return target ? target.label : (status !== undefined && status !== null ? status : '-')
|
||||
},
|
||||
bomStatusTagType(status) {
|
||||
const map = { 0: 'info', 1: 'warning', 2: 'success' }
|
||||
return map[Number(status)] || ''
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.multipleSelection = selection
|
||||
},
|
||||
handleExpandChange(row) {
|
||||
// BOM data is already loaded with the row from the backend
|
||||
},
|
||||
openDetailDialog(order) {
|
||||
crudWorkOrder.getItem(order).then(result => {
|
||||
this.bomList = result.content || []
|
||||
this.detailVisible = true
|
||||
}).catch(error => {
|
||||
this.bomList = []
|
||||
}).finally(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
closeDetailDialog() {
|
||||
this.detailVisible = false
|
||||
this.currentWorkOrder = {}
|
||||
this.bomList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
35
nladmin-ui/src/views/wms/pm_manage/work_order/workOrder.js
Normal file
35
nladmin-ui/src/views/wms/pm_manage/work_order/workOrder.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: 'api/workOrder',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function del(ids) {
|
||||
return request({
|
||||
url: 'api/workOrder',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: 'api/workOrder',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
export function getItem(data) {
|
||||
return request({
|
||||
url: 'api/workOrder/getOrderItem',
|
||||
method: 'get',
|
||||
params: {
|
||||
orderCode: data
|
||||
}
|
||||
})
|
||||
}
|
||||
export default { add, edit, del, getItem }
|
||||
@@ -27,7 +27,8 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<crudOperation :permission="permission">
|
||||
<el-button slot="right" class="filter-item" type="warning" icon="el-icon-s-promotion" size="mini" :disabled="audit_flag" @click="issueReturnBill">下发回传单</el-button>
|
||||
<el-button slot="right" class="filter-item" type="warning" icon="el-icon-s-promotion" size="mini" :disabled="audit_flag" @click="issueReturnBill">强制回传</el-button>
|
||||
<el-button slot="right" class="filter-item" type="success" size="mini" @click="issueReturnBill">条码打印</el-button>
|
||||
</crudOperation>
|
||||
<el-table ref="table" v-loading="crud.loading" size="mini" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange" @select="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
|
||||
Reference in New Issue
Block a user