yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(mes): 新增工艺路线启用功能及相关逻辑 

实现工艺路线的启用功能，允许用户在确认工序和产品 BOM 配置完整后启用工艺路线。同时，优化了表单的状态管理，增强了用户体验。
pull/871/MERGE
YunaiV 2026-04-04 12:08:06 +08:00
parent aa5cb50d1d
commit 609cbb654c
5 changed files with 178 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/mes/pro/route/RouteForm.vue
View File

@ -7,11 +7,12 @@
:rules="formRules"
label-width="100px"
v-loading="formLoading"
:disabled="isDetail"
>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入编码">
<el-input v-model="formData.code" placeholder="请输入编码" :disabled="isHeaderReadonly">
<template #append>
<el-button @click="generateCode"> 生成 </el-button>
</template>
@ -20,12 +21,16 @@
</el-col>
<el-col :span="8">
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
<el-input
v-model="formData.name"
placeholder="请输入名称"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio-group v-model="formData.status" :disabled="isHeaderReadonly">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
@ -43,27 +48,48 @@
type="textarea"
:rows="3"
placeholder="请输入工艺路线说明"
:disabled="isHeaderReadonly"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入备注"
:disabled="isHeaderReadonly"
/>
</el-form-item>
<!-- 编辑时展示 Tab -->
<!-- 编辑/启用/详情时展示 Tab -->
<template v-if="formData.id">
<el-divider content-position="left">详细信息</el-divider>
<el-tabs v-model="activeTab">
<el-tab-pane label="组成工序" name="process">
<RouteProcessList :routeId="formData.id" />
<RouteProcessList :routeId="formData.id" :form-type="formType" />
</el-tab-pane>
<el-tab-pane label="关联产品" name="product">
<RouteProductList :routeId="formData.id" />
<RouteProductList :routeId="formData.id" :form-type="formType" />
</el-tab-pane>
</el-tabs>
</template>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
<el-button
v-if="isEditable"
type="primary"
@click="submitForm"
:disabled="formLoading"
>
保 存
</el-button>
<el-button
v-if="isEnable"
type="success"
@click="handleEnable"
:disabled="formLoading"
>
确认启用
</el-button>
<el-button @click="dialogVisible = false">关 闭</el-button>
</template>
</Dialog>
</template>
@ -77,14 +103,25 @@ import RouteProcessList from './RouteProcessList.vue'
import RouteProductList from './RouteProductList.vue'
defineOptions({ name: 'RouteForm' })
const emit = defineEmits(['success'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formLoading = ref(false) // 表单的加载中
const formType = ref<string>('create') // 表单的类型：create / update / enable / detail
const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
const isEnable = computed(() => formType.value === 'enable') // 是否为启用模式
const isDetail = computed(() => ['detail', 'enable'].includes(formType.value)) // 是否为详情模式（只读）
const isHeaderReadonly = computed(() => ['enable', 'detail'].includes(formType.value)) // 是否只读
const dialogTitle = computed(() => {
const titles: Record<string, string> = {
create: '新增工艺路线',
update: '编辑工艺路线',
enable: '启用工艺路线',
detail: '工艺路线详情'
}
return titles[formType.value] || formType.value
})
const activeTab = ref('process') // 子表当前激活的 Tab
const formData = ref<ProRouteVO>({
id: undefined,
@ -109,10 +146,10 @@ const generateCode = () => {
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = type === 'create' ? '新增工艺路线' : '编辑工艺路线'
formType.value = type
activeTab.value = 'process'
resetForm()
// 修改/启用/详情时，加载数据
if (id) {
formLoading.value = true
try {
@ -122,26 +159,40 @@ const open = async (type: string, id?: number) => {
}
}
}
defineExpose({ open })
/** 提交表单 */
const emit = defineEmits(['success'])
/** 提交表单（create/update 模式） */
const submitForm = async () => {
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
await formRef.value.validate()
formLoading.value = true
try {
const data = { ...formData.value }
if (formType.value === 'create') {
await ProRouteApi.createRoute(data)
message.success(t('common.createSuccess'))
const res = await ProRouteApi.createRoute(data)
message.success('新增成功')
// 创建成功后，更新表单数据和状态为编辑模式
formData.value.id = res
formData.value.status = CommonStatusEnum.DISABLE
formType.value = 'update'
} else {
await ProRouteApi.updateRoute(data)
message.success(t('common.updateSuccess'))
message.success('修改成功')
}
emit('success')
} finally {
formLoading.value = false
}
}
/** 确认启用 */
const handleEnable = async () => {
try {
await message.confirm('确认启用"' + formData.value.name + '"工艺路线吗？启用前请确认工序和产品 BOM 配置完整。')
formLoading.value = true
await ProRouteApi.updateRouteStatus(formData.value.id!, CommonStatusEnum.ENABLE)
message.success('启用成功')
dialogVisible.value = false
emit('success')
} catch {
} finally {
formLoading.value = false
}
@ -159,4 +210,6 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
defineExpose({ open })
</script>

42
src/views/mes/pro/route/RouteProcessList.vue
View File

@ -2,7 +2,7 @@
<template>
<div>
<!-- 操作栏 -->
<el-row class="mb-10px">
<el-row v-if="isEditable" class="mb-10px">
<el-button type="primary" plain @click="openForm('create')">
<Icon icon="ep:plus" class="mr-5px" /> 添加工序
</el-button>
@ -68,7 +68,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="130" fixed="right">
<el-table-column v-if="isEditable" label="操作" align="center" width="130" fixed="right">
<template #default="scope">
<el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
@ -151,8 +151,8 @@
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
<el-button @click="formVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
</template>
</Dialog>
</div>
@ -167,28 +167,19 @@ defineOptions({ name: 'RouteProcessList' })
const props = defineProps<{
routeId: number
formType: string
}>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const isEditable = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
// ==================== 列表 ====================
const loading = ref(false) // 列表的加载中
const list = ref<ProRouteProcessVO[]>([]) // 列表的数据
const processList = ref<any[]>([]) // 工序下拉列表
// 表单相关
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
processId: [{ required: true, message: '工序不能为空', trigger: 'change' }],
linkType: [{ required: true, message: '工序关系不能为空', trigger: 'change' }]
})
/** 查询列表 */
const getList = async () => {
loading.value = true
@ -199,6 +190,19 @@ const getList = async () => {
}
}
// ==================== 添加/编辑表单 ====================
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType2 = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
processId: [{ required: true, message: '工序不能为空', trigger: 'change' }],
linkType: [{ required: true, message: '工序关系不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
/** 加载工序列表 */
const loadProcessList = async () => {
processList.value = await ProProcessApi.getProcessSimpleList()
@ -208,7 +212,7 @@ const loadProcessList = async () => {
const openForm = (type: string, row?: ProRouteProcessVO) => {
formVisible.value = true
formTitle.value = type === 'create' ? '添加工序' : '编辑工序'
formType.value = type
formType2.value = type
if (type === 'create') {
const maxSort = list.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
formData.value = {
@ -233,7 +237,7 @@ const submitForm = async () => {
if (!valid) return
formLoading.value = true
try {
if (formType.value === 'create') {
if (formType2.value === 'create') {
await ProRouteProcessApi.createRouteProcess(formData.value)
message.success(t('common.createSuccess'))
} else {

29
src/views/mes/pro/route/RouteProductBomList.vue
View File

@ -50,8 +50,8 @@
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
<el-button @click="formVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
</template>
</Dialog>
</div>
@ -70,26 +70,15 @@ const props = defineProps<{
productName?: string
}>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// ==================== 列表 ====================
const loading = ref(false) // 列表的加载中
const bomList = ref<ProRouteProductBomVO[]>([]) // BOM 列表的数据
const processList = ref<any[]>([]) // 工序列表（用于 Tab）
const activeProcessId = ref('') // 当前选中的工序 Tab
// 表单相关
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
itemId: [{ required: true, message: 'BOM 物料不能为空', trigger: 'change' }],
quantity: [{ required: true, message: '用料比例不能为空', trigger: 'blur' }]
})
/** 查询工序列表 */
const loadProcessList = async () => {
const list = await ProRouteProcessApi.getRouteProcessListByRoute(props.routeId)
@ -120,6 +109,18 @@ const handleTabChange = () => {
getBomList()
}
// ==================== 添加/编辑表单 ====================
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
itemId: [{ required: true, message: 'BOM 物料不能为空', trigger: 'change' }],
quantity: [{ required: true, message: '用料比例不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 添加/修改操作 */
const openForm = (type: string, row?: ProRouteProductBomVO) => {
formVisible.value = true

40
src/views/mes/pro/route/RouteProductList.vue
View File

@ -2,7 +2,7 @@
<template>
<div>
<!-- 操作栏 -->
<el-row class="mb-10px">
<el-row v-if="isEditable" class="mb-10px">
<el-button type="primary" plain @click="openForm('create')">
<Icon icon="ep:plus" class="mr-5px" /> 关联产品
</el-button>
@ -23,7 +23,7 @@
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" min-width="120" />
<el-table-column label="操作" align="center" width="130" fixed="right">
<el-table-column v-if="isEditable" label="操作" align="center" width="130" fixed="right">
<template #default="scope">
<el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
@ -69,7 +69,7 @@
</el-form-item>
</el-form>
<!-- 编辑时展示产品 BOM 配置 -->
<template v-if="formType === 'update' && formData.id">
<template v-if="formType2 === 'update' && formData.id">
<el-divider content-position="left">产品 BOM 配置</el-divider>
<RouteProductBomList
:routeId="routeId"
@ -78,8 +78,8 @@
/>
</template>
<template #footer>
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
<el-button @click="formVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
</template>
</Dialog>
</div>
@ -95,25 +95,18 @@ defineOptions({ name: 'RouteProductList' })
const props = defineProps<{
routeId: number
formType: string
}>()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const isEditable = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
// ==================== 列表 ====================
const loading = ref(false) // 列表的加载中
const list = ref<ProRouteProductVO[]>([]) // 列表的数据
// 表单相关
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
itemId: [{ required: true, message: '产品不能为空', trigger: 'change' }]
})
/** 查询列表 */
const getList = async () => {
loading.value = true
@ -124,11 +117,22 @@ const getList = async () => {
}
}
// ==================== 添加/编辑表单 ====================
const formVisible = ref(false) // 表单弹窗的是否展示
const formTitle = ref('') // 表单弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType2 = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<any>({}) // 表单数据
const formRules = reactive({
itemId: [{ required: true, message: '产品不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
/** 添加/修改操作 */
const openForm = (type: string, row?: ProRouteProductVO) => {
formVisible.value = true
formTitle.value = type === 'create' ? '关联产品' : '编辑产品'
formType.value = type
formType2.value = type
if (type === 'create') {
formData.value = {
routeId: props.routeId,
@ -148,7 +152,7 @@ const submitForm = async () => {
if (!valid) return
formLoading.value = true
try {
if (formType.value === 'create') {
if (formType2.value === 'create') {
await ProRouteProductApi.createRouteProduct(formData.value)
message.success(t('common.createSuccess'))
} else {

72
src/views/mes/pro/route/index.vue
View File

@ -38,8 +38,8 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@ -64,10 +64,16 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="路线编码" align="center" prop="code" width="180" />
<el-table-column label="路线名称" align="center" prop="name" width="200" />
<el-table-column label="路线编码" align="center" prop="code" min-width="180">
<template #default="scope">
<el-button link type="primary" @click="openForm('detail', scope.row.id)">
{{ scope.row.code }}
</el-button>
</template>
</el-table-column>
<el-table-column label="路线名称" align="center" prop="name" min-width="200" />
<el-table-column label="路线说明" align="center" prop="description" min-width="200" />
<el-table-column label="状态" align="center" prop="status" width="100">
<el-table-column label="状态" align="center" prop="status" min-width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
@ -80,33 +86,46 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" width="220">
<el-table-column label="操作" align="center" width="220" fixed="right">
<template #default="scope">
<!-- 停用状态：编辑、启用、删除 -->
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:pro-route:update']"
v-if="scope.row.status === CommonStatusEnum.DISABLE"
>
编辑
</el-button>
<el-button
link
:type="scope.row.status === CommonStatusEnum.ENABLE ? 'warning' : 'success'"
@click="handleStatusChange(scope.row)"
type="success"
@click="openForm('enable', scope.row.id)"
v-hasPermi="['mes:pro-route:update']"
v-if="scope.row.status === CommonStatusEnum.DISABLE"
>
{{ scope.row.status === CommonStatusEnum.ENABLE ? '禁用' : '启用' }}
启用
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:pro-route:delete']"
:disabled="scope.row.status === CommonStatusEnum.ENABLE"
v-if="scope.row.status === CommonStatusEnum.DISABLE"
>
删除
</el-button>
<!-- 启用状态：禁用 -->
<el-button
link
type="warning"
@click="handleDisable(scope.row)"
v-hasPermi="['mes:pro-route:update']"
v-if="scope.row.status === CommonStatusEnum.ENABLE"
>
禁用
</el-button>
</template>
</el-table-column>
</el-table>
@ -119,7 +138,7 @@
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<!-- 表单弹窗：添加/修改/启用/详情 -->
<RouteForm ref="formRef" @success="getList" />
</template>
@ -139,6 +158,7 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ProRouteVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const exportLoading = ref(false) // 导出的加载中
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@ -147,7 +167,7 @@ const queryParams = reactive({
status: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const formRef = ref() // 表单弹窗
/** 查询列表 */
const getList = async () => {
@ -174,24 +194,16 @@ const resetQuery = () => {
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 修改工艺路线状态 */
const handleStatusChange = async (row: ProRouteVO) => {
/** 禁用按钮操作 */
const handleDisable = async (row: ProRouteVO) => {
try {
// 目标状态：当前禁用 → 启用
const newStatus =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
const text = newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用'
// 修改状态的二次确认
await message.confirm('确认要"' + text + '""' + row.name + '"工艺路线吗?')
// 发起修改状态
await ProRouteApi.updateRouteStatus(row.id!, newStatus)
message.success(text + '成功')
// 刷新列表
await message.confirm('确认要停用"' + row.name + '"工艺路线吗?')
await ProRouteApi.updateRouteStatus(row.id!, CommonStatusEnum.DISABLE)
message.success('停用成功')
await getList()
} catch {}
}
@ -199,11 +211,8 @@ const handleStatusChange = async (row: ProRouteVO) => {
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ProRouteApi.deleteRoute(id)
// 删除成功的提示
message.success(t('common.delSuccess'))
await getList()
} catch {}
@ -216,13 +225,14 @@ const handleExport = async () => {
exportLoading.value = true
const data = await ProRouteApi.exportRoute(queryParams)
download.excel(data, '工艺路线.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(async () => {
await getList()
/** 初始化 */
onMounted(() => {
getList()
})
</script>