<template>
<el-dialog :title="title" v-model="open" width="1500px" append-to-body :before-close="cancel">
<el-
form ref="
formRef" :model="
form" :rules="rules" label-width="100px">
<!-- 分组
标题 -->
<div class="section-title" align="center">基础信息</div>
<el-row :gutter="20">
<el-col :span="8">
<el-
form-item label="工艺路线编号" prop="processroutenumber" required>
<el-input v-model
.trim="
form.processroutenumber" placeholder="请输入" :disabled="isSystemCode" />
</el-
form-item>
</el-col>
<el-col :span="6">
<el-
form-item label="系统编号">
<el-switch v-model="isSystemCode" @change="handleSystemCodeChange" />
</el-
form-item>
</el-col>
<el-col :span="10">
<el-
form-item label="工序路线名称" prop="processroutename" required>
<el-input v-model
.trim="
form.processroutename" placeholder="请输入" />
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-
form-item label="状态" prop="Status" required>
<el-radio-group v-model="
form.Status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-
form-item label="说明" prop="processroutedescription">
<el-input v-model
.trim="
form.processroutedescription" type="textarea" :rows="3" placeholder="请输入" />
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-
form-item label="备注" prop="remarks">
<el-input v-model
.trim="
form.remarks" type="textarea" :rows="3" placeholder="请输入" />
</el-
form-item>
</el-col>
</el-row>
</el-
form>
<el-
form :rules="rules" label-width="100px">
<!-- 分组
标题 -->
<div class="section-title" align="center">工序组成</div>
<el-button type="primary" @click="AddCommposeIsOpen=true">添加</el-button>
//<el-button type="primary" plain>编辑</el-button>
<el-button type="primary" plain @click="handleBatchDelete">批量删除</el-button>
<el-table v-
loading="
loading" :data="processManagementRsult" @selection-change="handleSelectionChange">
<el-table-column type="selection" :selectable="selectable" width="55" />
<el-table-column type="index" label="序号" width="60px" />
<el-table-column prop="processCompositionNo" label="工序组成编号" v-if="columns[0]
.visible" />
<el-table-column prop="processName" label="工序名称" v-if="columns[1]
.visible"/>
<el-table-column prop="nextProcessName" label="下一道工序" v-if="columns[2]
.visible"/>
<el-table-column prop="nextRelation" label="与下一道工序关系" v-if="columns[3]
.visible"/>
<el-table-column prop="keyProcess" label="关键工序" v-if="columns[4]
.visible" >
<template #default="scope">
{{ scope
.row
.keyProcess==1?'是':'否' }}
</template>
</el-table-column>
<el-table-column prop="preparationTime" label="准备
时间" v-if="columns[5]
.visible" >
<template #default="scope">
{{ moment(scope
.row
.preparationTime)
.format("YYYY-MM-DD") }}
</template>
</el-table-column>
<el-table-column prop="waitingTime" label="
等待时间" v-if="columns[6]
.visible" >
<template #default="scope">
{{ moment(scope
.row
.waitingTime)
.format("YYYY-MM-DD") }}
</template>
</el-table-column>
<el-table-column prop="color" label="颜色" v-if="columns[7]
.visible">
<template #default="scope">
<el-color-picker v-model="scope
.row
.color"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" :icon="Edit" @click="handleUpdategx(scope
.row)">
修改</el-button>
<el-popconfirm placement="top" title="确认是否删除?" @confirm="handleDeletegx(scope
.row)">
<template #reference>
<el-button link type="primary" :icon="Delete">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-
form>
<el-
form ref="
formRef" :model="
form" :rules="rules" label-width="100px">
<!-- 分组
标题 -->
<div class="section-title" align="center">关联产品</div>
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-button type="primary" plain>移除</el-button>
<el-table :data="tableData" border style="width: 100%">
<el-table-column type="selection" :selectable1="selectable1" width="55" />
<el-table-column type="index" label="序号" width="180" align="center"/>
<el-table-column prop="material_No" label="产品编号" width="180" align="center"/>
<el-table-column prop="material_Name" label="产品名称" width="180" align="center"/>
<el-table-column prop="spec_model" label="规格型号" width="180" align="center"/>
<el-table-column prop="unit_name" label="单位" width="180" align="center"/>
<el-table-column prop="name5" label="BOM编号" width="180" align="center"/>
<el-table-column prop="name6" label="BOM版本" width="180" align="center"/>
<el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" :icon="Edit" @click="handleUpdate(scope
.row)">
修改</el-button>
<el-popconfirm placement="top" title="确认是否删除?" @confirm="handleDelete(scope
.row)">
<template #reference>
<el-button link type="primary" :icon="Delete">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-
form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" :
loading="
loading" @click="submit
Form">确 定</el-button>
</div>
</template>
</el-dialog>
<!--
修改工序组成的弹窗（复用添加弹窗组件，通过参数区分状态） -->
<el-dialog v-model="editCommposeIsOpen" :title="editTitle" width="800px">
<!-- 传递type="edit"和当前编辑的row
数据给子组件 -->
<AddCommpose
ref="EditComposeRef"
:editRow="currentEditRow"
:type="editType"
@re
loadList="updateCommposeIntoList"
></AddCommpose>
</el-dialog>
<el-dialog v-model="AddCommposeIsOpen" title="添加工序组成" width="800px">
<AddCommpose ref="AddComposeRef" @re
loadList="addCommposeIntoList"></AddCommpose>
</el-dialog>
</template>
<script setup>
//api接口
import {AddRoute} from "@/api/production/Route"
import { ref, reactive, defineExpose, defineEmits, getCurrentInstance } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import moment from "moment";
import { Edit, Delete } from '@element-plus/icons-vue' // 确保引入图标
const { proxy } = getCurrentInstance
()
// import listCompose from '
./model/ComposeIndex
.vue'
import AddCommpose from '@/views/production/Compose/model/AddCommpose
.vue'
import { DeleteDefectlevel } from "@/api/production/Defectlevel";
//工序组成表
const processManagementRsult= ref([])
const columns = ref([
{ key: 0, label: '工序组成编号', visible: true },
{ key: 1, label: '工序名称', visible: true },
{ key: 2, label: '下一道工序', visible: true },
{ key: 3, label: '与下一道工序关系', visible: true },
{ key: 4, label: '关键工序', visible: true },
{ key: 5, label: '准备
时间', visible: true },
{ key: 6, label: '
等待时间', visible: true },
{ key: 7, label: '颜色', visible: true }
])
//刷新列表
const emits = defineEmits(['re
loadList'])
//空值按钮的
加载状态
const
loading = ref(false)
//控制对话框 true 显示 false 隐藏
const open = ref(false)
const title = ref("")
const
formRef = ref(null)
const isSystemCode = ref(true)
//添加组成
const AddComposeRef = ref
()
const AddCommposeIsOpen=ref(false)
const
form = reactive({
"ct": 1,
"processroutenumber": "",
"processroutename": "",
"status": "",
"processroutedescription": "",
"remarks": "",
"composeAdd": [],
"materialPo": []
})
const rules = {
processNo: [{ required: true, message: "工序编号不能为空", trigger: "blur" }],
processName: [{ required: true, message: "工序名称不能为空", trigger: "blur" }],
ProcessStatus: [{ required: true, message: "状态不能为空", trigger: "change" }],
}
function handleSystemCodeChange(val) {
if (val) {
// 当启用系统编号
时，自动生成编号
generateSystemCode
()
} else {
// 当禁用系统编号
时，清空编号，让用户手动输入
form.processroutenumber = ''
}
}
function generateSystemCode
() {
// Date
.now
()获取当前
时间戳（毫秒数）
//
.toString
()将数字转换为字符串
//
.slice(-6)取字符串的最后6位字符
// 最终格式如：GX123456
const timestamp = Date
.now
().toString
()
form.processroutenumber = `GX${timestamp
.slice(-6)}`
}
/**
* 提交表单
* 对表单进行验证，验证通过后调用API接口保存
数据
* 根据是否有id判断是新增还是编辑操作
*/
function submit
Form() {
formRef
.value
.validate(async (valid) => {
if (valid) {
loading
.value = true // 显示
加载状态，防止重复提交
try {
// 构造请求参数对象
const params = {
ct:
form.ct,
id:
form.id, // 编辑
时需要传递id
processroutenumber:
form.processroutenumber, // 工艺路线
processroutename:
form.processroutename,
status:
form.status,
processroutedescription:
form.processroutedescription || '',
remarks:
form.remarks || '',
composeAdd: processManagementRsult
.value
.data,//工序列表
数据暂存params,做添加操作
materialPo:
form.materialPo,
}
// 根据是否有id判断是新增还是编辑
if (params
.id) {
// 有id表示编辑操作，调用更新接口
await UpdateProcess(params)
ElMessage
.success('
修改成功') // 显示成功提示
} else {
// 没有id表示新增操作，调用添加接口
await AddRoute(params)
ElMessage
.success('新增成功') // 显示成功提示
}
cancel
() // 关闭对话框并重置表单
emits('re
loadList') // 通知父组件重新
加载列表
数据
} catch (error) {
// 捕获错误并显示错误提示
console
.log(error) // 在控制台打印错误信息，便于调试
ElMessage
.error('操作失败')
} finally {
// 无论成功还是失败，都要取消
加载状态
loading
.value = false
}
}
})
}
function addCommposeIntoList(commpose)
{
processManagementRsult
.value
.push(commpose);
AddCommposeIsOpen
.value = commpose
.AddCommposeIsOpen
}
function cancel
() {
open
.value = false // 关闭对话框
reset
() // 重置表单
}
/**
* 重置表单
* 清空所有表单字段的
数据，恢复到初始状态
*/
function reset
() {
// 调用Element Plus表单组件的resetFields方法，清除验证状态
formRef
.value
.resetFields
()
// 手动清空所有字段
数据
form.processroutenumber = undefined
form.processroutename = undefined
form.status = 1 // 重置为默认值：启用
form.processroutedescription = undefined
form.remarks = undefined
form.composeAdd=undefined
form.materialPo=undefined
form.id = undefined
// 重置系统编号开关为开启状态
isSystemCode
.value = true
}
function setInfo(row) {
// 从row对象中解构出需要的字段
const { id, processroutenumber, processroutename, status,processroutedescription,remarks,composeAdd,materialPo } = row
console
.log(row);
// 将
数据赋值给
form对象
form.id = id
form.processroutenumber =row
.processroutenumber
form.processroutename =row
.processroutename
form.status =row
.status
form.processroutedescription =row
.processroutedescription
form.remarks = row
.remarks
form.composeAdd=row
.composeAdd
form.materialPo=row
.materialPo
console
.log(
form);
// 编辑
时禁用系统编号开关，不允许
修改编号
isSystemCode
.value = false
}
async function openFun(row) {
// 设置对话框
标题
title
.value = row
.title
// 根据操作类型执行不同的逻辑
if (row
.type === 'edit') {
// 编辑模式：将
数据填充到表单中
setInfo(row
.data)
} else {
// 新增模式：如果系统编号开关是开启状态，自动生成编号
if (isSystemCode
.value) {
generateSystemCode
()
}
}
// 打开对话框
open
.value = true;
}
defineExpose({
openFun,
})
const selectedComposes = ref([])
// 监听表格选择变化，更新选中的行
const handleSelectionChange = (val) => {
selectedComposes
.value = val // 实
时更新选中的项
}
//删除
async function handleDeletegx(row){
// 找到当前行在数组中的索引
const index = processManagementRsult
.value
.findIndex(item => item
.id === row
.id)
if (index !== -1) {
// 从数组中删除该元素
processManagementRsult
.value
.splice(index, 1)
ElMessage
.success('删除成功')
} else {
ElMessage
.warning('未找到该
数据')
}
}
// 批量删除（纯前端）
const handleBatchDelete =
() => {
// 校验是否选中
数据
if (selectedComposes
.value
.length === 0) {
ElMessage
.warning('请先选择需要删除的工序组成')
return
}
// 二次确认
ElMessageBox
.confirm(
`确定要删除选中的${selectedComposes
.value
.length}
条工序组成吗？`,
'删除确认',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(
() => {
// 获取选中项的id列表
const deleteIds = selectedComposes
.value
.map(item => item
.id)
// 过滤掉需要删除的项（保留未选中的）
processManagementRsult
.value = processManagementRsult
.value
.filter(
item => !deleteIds
.includes(item
.id)
)
// 清空选中状态
selectedComposes
.value = []
ElMessage
.success('批量删除成功')
})
.catch(
() => {
// 取消删除
时不做操作
})
}
//
修改
// 新增：控制
修改弹窗的变量
const editCommposeIsOpen = ref(false) //
修改弹窗显示状态
const editTitle = ref("
修改工序组成") //
修改弹窗
标题
const editType = ref("edit") // 标识当前是编辑状态
const currentEditRow = ref(null) // 存储当前正在编辑的行
数据
const EditComposeRef = ref(null) //
修改弹窗组件引用
// 点击“
修改”按钮：打开弹窗并传入当前行
数据
const handleUpdategx = (row) => {
// 深拷贝行
数据（避免直接
修改原
数据）
currentEditRow
.value = JSON
.parse(JSON
.stringify(row))
// 打开
修改弹窗
editCommposeIsOpen
.value = true
}
// 接收
修改弹窗返回的新
数据，更新表格
const updateCommposeIntoList = (updatedRow) => {
// 关闭弹窗
editCommposeIsOpen
.value = false
if (!updatedRow) return // 若未传递
数据则不处理
// 找到原
数据在数组中的索引
const index = processManagementRsult
.value
.findIndex(item => item
.id === updatedRow
.id)
if (index !== -1) {
// 替换原
数据（触发响应式更新，表格实
时刷新）
processManagementRsult
.value
.splice(index, 1, updatedRow)
ElMessage
.success('
修改成功')
} else {
ElMessage
.warning('未找到对应
数据，
修改失败')
}
}
// 原有添加逻辑不变（补充type区分）
function addCommposeIntoList(commpose) {
processManagementRsult
.value
.push(commpose);
AddCommposeIsOpen
.value = false // 关闭添加弹窗
}
</script>
<style scoped lang="scss">
.section-title {
font-size: 16px;
font-weight: 600;
color: #409eff;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e4e7ed;
}
</style> 根据添加工序组成还有
修改按钮来写一个暂存
数据的
修改 下面的是添加工序组成的vue <template>
<el-card>
<el-
form ref="
formRef" :model="
form" :rules="rules" label-width="100px">
<!-- 分组
标题 -->
<div class="section-title" align="center">{{ type === 'add' ? '添加工序组成' : '
修改工序组成' }}</div>
<el-row :gutter="20">
<el-col :span="12">
<el-
form-item label="序号" prop="processCompositionNo" >
<el-input v-model
.trim="
form.processCompositionNo" placeholder="请输入" type="number"/>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="工序" prop="processid">
<el-select v-model="
form.processid" placeholder="请选择状态" style="width: 240px">
<el-option v-for="i in checktypelist" :key="i
.id" :label="i
.processName" :value="i
.id" @click="GetprocessName(i
.processName)"/>
</el-select>
</el-
form-item>
{{
form.processName }}
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-
form-item label="下一道工序" prop="nextProcessid" >
<el-select v-model="
form.nextProcessid" placeholder="请选择状态" clearable style="width: 240px">
<el-option v-for="i in checktypelist" :key="i
.id" :label="i
.processName" :value="i
.id" @click="GetprocessNames(i
.processName)"/>
</el-select>
</el-
form-item>
{{
form.nextProcessName }}
</el-col>
<el-col :span="12">
<el-
form-item label="关系" prop="nextRelation" >
<el-input v-model
.trim="
form.nextRelation" placeholder="请输入" />
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-
form-item label="关键工序" prop="keyProcess" >
<el-radio-group v-model="
form.keyProcess">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="显示颜色" prop="color" >
<el-color-picker v-model="
form.color" />
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-
form-item label="准备
时间" prop="preparationTime" >
<el-date-picker
v-model="
form.preparationTime"
type="datetime"
placeholder="选择准备
时间"
style="width: 100%"
/>
</el-
form-item>
</el-col>
<el-col :span="12">
<el-
form-item label="
等待时间" prop="waitingTime" >
<el-date-picker
v-model="
form.waitingTime"
type="datetime"
placeholder="选择准备
时间"
style="width: 100%"
/>
</el-
form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-
form-item label="备注" prop="remarks">
<el-input v-model
.trim="
form.remarks" type="textarea" :rows="3" placeholder="请输入" />
</el-
form-item>
</el-col>
</el-row>
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" :
loading="
loading" @click="submit
Form">{{ type === 'add' ? '确 定' : '保 存' }}</el-button>
</el-
form>
</el-card>
</template>
<script setup>
//api接口
import {AddRoute} from "@/api/production/Route"
import { ref, reactive, defineExpose, defineEmits, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import {listProcess} from "@/api/production/processManagement" // 工序列表接口
const { proxy } = getCurrentInstance
()
// 接收父组件传递的参数：模式（add/edit）和编辑
数据
const props = defineProps({
type: {
type: String,
default: 'add' // 默认是新增模式
},
editRow: {
type: Object,
default: null // 编辑模式
时传递的行
数据
}
})
//工序和下一个工序下拉框绑定
onMounted(
()=>{
GetListgx
();
});
// 绑定显示查询参数
const queryParams = reactive({
pageIndex: 1,
pageSize: 10,
codeOrName: null,
status: null,
ct: 1,
orderBy: null,
orderByType: 1
})
//下拉
const checktypelist=ref([]);
//显示下拉工序
数据
async function GetListgx
(){
var a=await listProcess(queryParams);
checktypelist
.value=a
.data;
}
//刷新列表
// 向父组件传递结果（新增/
修改后的
数据）
const emits = defineEmits(['re
loadList', 'cancel'])
//空值按钮的
加载状态
const
loading = ref(false)
//控制对话框 true 显示 false 隐藏o
const open = ref(false)
const
formRef = ref(null)
const GetprocessName = (GetprocessName)=>{
form.processName = GetprocessName;
}
const GetprocessNames = (GetprocessNames)=>{
form.nextProcessName=GetprocessNames;
}
const
form = reactive({
processCompositionNo:undefined,
processid:undefined,
nextProcessid:undefined,
processName:"",
nextProcessName:"",
nextRelation:undefined,
keyProcess:undefined,
color:undefined,
preparationTime: undefined,
waitingTime:undefined,
remarks: undefined,
routeId:undefined,
id: undefined,
ct:1,
})
const rules = {
processCompositionNo: [{ required: true, message: "工序编号不能为空", trigger: "blur" }],
}
async function submit
Form() {
formRef
.value
.validate(async (valid) => {
console
.log('开始验证');
if (valid) {
console
.log('验证通过');
loading
.value = true // 显示
加载状态，防止重复提交
try{
const params = {
ct:
form.ct,
id:
form.id,
processCompositionNo:
form.processCompositionNo,
processName:
form.processName,
nextProcessName:
form.nextProcessName,
processid:
form.processid,
nextProcessid:
form.nextProcessid,
nextRelation:
form.nextRelation,
keyProcess:
form.keyProcess,
color:
form.color,
preparationTime:
form.preparationTime ,
waitingTime:
form.waitingTime ,
routeId:
form.routeId ,
remarks:
form.remarks || '',
}
// await AddRoute(params)
// ElMessage
.success('新增成功') // 显示成功提示
cancel
()
emits('re
loadList',params) // 通知父组件重新
加载列表
数据
cancel
()
}catch (error) {
// 若接口调用失败（如网络错误、后端校验失败），捕获错误并提示
console
.log('添加失败原因：', error) // 控制台打印错误，方便调试
ElMessage
.error('操作失败，请重试')
} finally {
// 无论成功还是失败，最终都要关闭
加载状态（恢复按钮可用）
loading
.value = false
}
}
})
}
function cancel
() {
open
.value = false // 关闭对话框
reset
() // 重置表单
}
/**
* 重置表单
* 清空所有表单字段的
数据，恢复到初始状态
*/
function reset
() {
// 调用Element Plus表单组件的resetFields方法，清除验证状态
formRef
.value
.resetFields
()
// 手动清空所有字段
数据
form.processCompositionNo = undefined
form.processid = undefined
form.nextProcessid = undefined // 重置为默认值：启用
form.nextRelation = undefined
form.keyProcess = undefined
form.color = undefined
form.preparationTime = undefined
form.waitingTime = undefined
form.routeId = undefined
form.remarks = undefined
form.id = undefined
}
// defineExpose({
// openFun,
// })
</script>
<style scoped lang="scss">
.section-title {
font-size: 16px;
font-weight: 600;
color: #409eff;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e4e7ed;
}
</style>
本文介绍了一种在表单中加载数据并显示等待消息的方法。通过设置特定参数，可以实现在加载过程中显示‘请稍等’及‘Loading’的消息，并且能够限制等待指示器仅在表单界面内显示。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
