first commit
This commit is contained in:
135
src/views/mes/production/process/ProcessOperationForm.vue
Normal file
135
src/views/mes/production/process/ProcessOperationForm.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="formType === 'create' ? '新增工序' : '编辑工序'"
|
||||
v-model="visible"
|
||||
width="500px"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px" v-loading="formLoading">
|
||||
<el-form-item label="工序编码" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入工序编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工序名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入工序名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工序描述" prop="description">
|
||||
<el-input v-model="form.description" placeholder="请输入工序描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工序类型" prop="type">
|
||||
<el-input v-model.number="form.type" placeholder="请输入工序类型（数字）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标准工时(分钟)" prop="standardTime">
|
||||
<el-input v-model.number="form.standardTime" placeholder="请输入标准工时" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
YVHcreateProcessOperation,
|
||||
YVHupdateProcessOperation,
|
||||
YVHgetProcessOperation
|
||||
} from '@/api/mes/production/process-operation'
|
||||
|
||||
// 生成工序编码
|
||||
const generateOperationCode = () => {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
const random = Math.floor(Math.random() * 1000)
|
||||
.toString()
|
||||
.padStart(3, '0')
|
||||
return `OP${year}${month}${day}${random}`
|
||||
}
|
||||
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const formLoading = ref(false) // 表单加载状态
|
||||
const formType = ref<'create' | 'update'>('create')
|
||||
const form = reactive<any>({})
|
||||
const formRef = ref()
|
||||
|
||||
const rules = {
|
||||
code: [{ required: true, message: '请输入工序编码', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入工序名称', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const open = async (type: 'create' | 'update', id?: number) => {
|
||||
formType.value = type
|
||||
visible.value = true
|
||||
formLoading.value = true // 开始加载，禁用表单
|
||||
|
||||
try {
|
||||
// 重置表单
|
||||
Object.assign(form, {
|
||||
code: type === 'create' ? generateOperationCode() : '',
|
||||
name: '',
|
||||
description: '',
|
||||
type: 1, // 默认工序类型为1
|
||||
standardTime: 30, // 默认标准工时30分钟
|
||||
status: 1,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
if (type === 'update' && id) {
|
||||
const res = await YVHgetProcessOperation(id)
|
||||
// 直接使用接口返回的数据，不进行解构
|
||||
Object.assign(form, res)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化表单失败:', error)
|
||||
ElMessage.error('加载数据失败，请重试')
|
||||
visible.value = false
|
||||
} finally {
|
||||
formLoading.value = false // 加载完成，启用表单
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return
|
||||
loading.value = true
|
||||
try {
|
||||
if (formType.value === 'create') {
|
||||
await YVHcreateProcessOperation(form)
|
||||
ElMessage.success('新增成功')
|
||||
} else {
|
||||
await YVHupdateProcessOperation(form)
|
||||
ElMessage.success('修改成功')
|
||||
}
|
||||
visible.value = false
|
||||
emits('success')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 对外暴露 open 方法
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
211
src/views/mes/production/process/index.vue
Normal file
211
src/views/mes/production/process/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<doc-alert title="【MES】工序管理" url="https://doc.iocoder.cn/mes/process-operation/" />
|
||||
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="工序编码" prop="code">
|
||||
<el-input
|
||||
v-model="queryParams.code"
|
||||
placeholder="请输入工序编码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="工序名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入工序名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</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
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['mes:process-operation:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
@click="handleDelete(selectionList.map((item) => item.id))"
|
||||
v-hasPermi="['mes:process-operation:delete']"
|
||||
:disabled="selectionList.length === 0"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> 删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column type="selection" width="50" />
|
||||
<el-table-column width="80" label="工序ID" align="center" prop="id" />
|
||||
<el-table-column min-width="120" label="工序编码" align="center" prop="code" />
|
||||
<el-table-column min-width="120" label="工序名称" align="center" prop="name" />
|
||||
<el-table-column min-width="180" label="工序描述" align="center" prop="description" />
|
||||
<el-table-column min-width="120" label="工序类型" align="center" prop="type" />
|
||||
<el-table-column min-width="120" label="标准工时(分钟)" align="center" prop="standardTime" />
|
||||
<el-table-column min-width="100" label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120" label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" fixed="right" width="120">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['mes:process-operation:update']"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])"
|
||||
v-hasPermi="['mes:process-operation:delete']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<ProcessOperationForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
YVHgetProcessOperationPage,
|
||||
YVHdeleteProcessOperation
|
||||
} from '@/api/mes/production/process-operation'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import ProcessOperationForm from './ProcessOperationForm.vue'
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref()
|
||||
const formRef = ref()
|
||||
const selectionList = ref<any[]>([])
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await YVHgetProcessOperationPage(queryParams)
|
||||
list.value = res.list
|
||||
total.value = res.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.()
|
||||
queryParams.code = undefined
|
||||
queryParams.name = undefined
|
||||
queryParams.status = undefined
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const openForm = (type: 'create' | 'update', id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
const handleDelete = async (ids: number[]) => {
|
||||
if (!ids || ids.length === 0) return
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除选中的工序吗？', '提示', { type: 'warning' })
|
||||
for (const id of ids) {
|
||||
await YVHdeleteProcessOperation(id)
|
||||
}
|
||||
ElMessage.success('删除成功')
|
||||
getList()
|
||||
selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const handleSelectionChange = (rows: any[]) => {
|
||||
selectionList.value = rows
|
||||
}
|
||||
|
||||
/** 行点击操作 */
|
||||
const handleRowClick = (row: any, column: any, event: MouseEvent) => {
|
||||
// 检查是否点击了按钮、链接或其他交互元素
|
||||
const target = event.target as HTMLElement
|
||||
if (
|
||||
target.tagName === 'BUTTON' ||
|
||||
target.tagName === 'A' ||
|
||||
target.tagName === 'I' ||
|
||||
target.tagName === 'svg' ||
|
||||
target.closest('button') ||
|
||||
target.closest('a') ||
|
||||
target.closest('.el-button') ||
|
||||
target.closest('.el-checkbox')
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
// 直接打开编辑页面
|
||||
openForm('update', row.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user