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): 优化工作站模块，新增获取车间列表和车间 Map 方法，重构表单弹窗逻辑

pull/871/MERGE
YunaiV 2026-02-16 15:47:05 +08:00
parent 435496bdbd
commit b0548b329d
6 changed files with 144 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/mes/md/workstation/index.ts
View File

@ -1,7 +1,5 @@
import request from '@/config/axios'
// DONE @AI：【遵守我说的！】是不是每个 VO 独立文件；例如说 tool/ 、worker/、machine/ 等等
// MES 工作站 VO
export interface MdWorkstationVO {
id: number // 工作站编号

6
src/views/mes/md/workstation/WorkstationForm.vue
View File

@ -90,9 +90,9 @@ import { MdWorkstationApi, MdWorkstationVO } from '@/api/mes/md/workstation'
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
import { CommonStatusEnum } from '@/utils/constants'
import { generateRandomStr } from '@/utils'
import WorkstationMachinePanel from './components/WorkstationMachinePanel.vue'
import WorkstationToolPanel from './components/WorkstationToolPanel.vue'
import WorkstationWorkerPanel from './components/WorkstationWorkerPanel.vue'
import WorkstationMachinePanel from './WorkstationMachinePanel.vue'
import WorkstationToolPanel from './WorkstationToolPanel.vue'
import WorkstationWorkerPanel from './WorkstationWorkerPanel.vue'
defineOptions({ name: 'WorkstationForm' })

58
src/views/mes/md/workstation/components/WorkstationMachinePanel.vue → src/views/mes/md/workstation/WorkstationMachinePanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-button type="primary" plain size="small" @click="openAddForm" class="mb-10px">
<el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
<Icon icon="ep:plus" class="mr-5px" /> 添加设备
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
@ -16,8 +16,8 @@
</el-table>
<!-- 添加设备弹窗 -->
<Dialog title="添加设备" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
<el-form-item label="设备" prop="machineryId">
<!-- TODO @芋艿：对接设备下拉列表，等 DV 设备模块完成后对接 -->
<el-input-number
@ -39,7 +39,7 @@
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary">确 定</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@ -53,7 +53,9 @@ const props = defineProps<{
workstationId: number // 工作站编号
}>()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表加载中
const list = ref<MdWorkstationMachineVO[]>([]) // 设备资源列表
@ -69,8 +71,12 @@ const getList = async () => {
// ==================== 添加设备 ====================
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formLoading = ref(false) // 表单的提交加载中
const formRef = ref() // 表单 Ref
const formData = ref({
id: undefined as number | undefined,
workstationId: undefined as number | undefined,
machineryId: undefined as number | undefined,
quantity: 1,
@ -81,10 +87,38 @@ const formRules = reactive({
quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
}) // 表单校验规则
/** 打开添加弹窗 */
const openAddForm = () => {
/** 打开表单弹窗 */
const openForm = (type: string) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
}
/** 提交表单 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as MdWorkstationMachineVO
await MdWorkstationMachineApi.createWorkstationMachine(data)
message.success(t('common.createSuccess'))
dialogVisible.value = false
// 刷新列表
await getList()
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
workstationId: props.workstationId,
machineryId: undefined,
quantity: 1,
@ -93,17 +127,6 @@ const openAddForm = () => {
formRef.value?.resetFields()
}
/** 提交表单 */
const submitForm = async () => {
await formRef.value.validate()
await MdWorkstationMachineApi.createWorkstationMachine(
formData.value as unknown as MdWorkstationMachineVO
)
message.success('添加成功')
dialogVisible.value = false
await getList()
}
/** 删除 */
const handleDelete = async (id: number) => {
try {
@ -114,7 +137,6 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 监听 workstationId 变化 */
watch(
() => props.workstationId,
(val) => {

87
src/views/mes/md/workstation/components/WorkstationToolPanel.vue → src/views/mes/md/workstation/WorkstationToolPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-button type="primary" plain size="small" @click="openAddForm" class="mb-10px">
<el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
<Icon icon="ep:plus" class="mr-5px" /> 添加工具
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
@ -10,7 +10,7 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button link type="primary" @click="openEditForm(scope.row)">编辑</el-button>
<el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
@ -18,7 +18,13 @@
<!-- 添加/编辑弹窗 -->
<Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="工具类型" prop="toolTypeId">
<!-- TODO @芋艿：对接工具类型下拉列表，等 TM 工具模块完成后对接 -->
<el-input-number
@ -41,7 +47,7 @@
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary">确 定</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@ -55,7 +61,9 @@ const props = defineProps<{
workstationId: number // 工作站编号
}>()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表加载中
const list = ref<MdWorkstationToolVO[]>([]) // 工装夹具资源列表
@ -73,6 +81,7 @@ const getList = async () => {
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formLoading = ref(false) // 表单的提交加载中
const formRef = ref() // 表单 Ref
const formData = ref({
id: undefined as number | undefined,
@ -86,12 +95,45 @@ const formRules = reactive({
quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
}) // 表单校验规则
/** 打开添加弹窗 */
// TODO @AI：是不是 openForm、resetForm 更好？因为编辑和添加其实是同一个表单，区别只是 formType 不同；这样和别的模块，更统一；
const openAddForm = () => {
/** 打开表单弹窗 */
const openForm = (type: string, row?: MdWorkstationToolVO) => {
dialogVisible.value = true
dialogTitle.value = '添加工具'
formType.value = 'create'
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，何止数据
if (type === 'update' && row) {
formData.value = { ...row }
}
}
/** 提交表单 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as MdWorkstationToolVO
if (formType.value === 'create') {
await MdWorkstationToolApi.createWorkstationTool(data)
message.success(t('common.updateSuccess'))
} else {
await MdWorkstationToolApi.updateWorkstationTool(data)
message.success(t('common.createSuccess'))
}
dialogVisible.value = false
// 刷新列表
await getList()
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
workstationId: props.workstationId,
@ -102,33 +144,6 @@ const openAddForm = () => {
formRef.value?.resetFields()
}
/** 打开编辑弹窗 */
const openEditForm = (row: MdWorkstationToolVO) => {
dialogVisible.value = true
dialogTitle.value = '编辑工具'
formType.value = 'update'
formData.value = { ...row }
}
/** 提交表单 */
const submitForm = async () => {
// TODO @AI：和别的模块保持一致；类似 loading 啥的
await formRef.value.validate()
if (formType.value === 'update') {
await MdWorkstationToolApi.updateWorkstationTool(
formData.value as unknown as MdWorkstationToolVO
)
message.success('编辑成功')
} else {
await MdWorkstationToolApi.createWorkstationTool(
formData.value as unknown as MdWorkstationToolVO
)
message.success('添加成功')
}
dialogVisible.value = false
await getList()
}
/** 删除 */
const handleDelete = async (id: number) => {
try {

85
src/views/mes/md/workstation/components/WorkstationWorkerPanel.vue → src/views/mes/md/workstation/WorkstationWorkerPanel.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-button type="primary" plain size="small" @click="openAddForm" class="mb-10px">
<el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
<Icon icon="ep:plus" class="mr-5px" /> 添加人员
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
@ -10,7 +10,7 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button link type="primary" @click="openEditForm(scope.row)">编辑</el-button>
<el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
@ -18,13 +18,12 @@
<!-- 添加/编辑弹窗 -->
<Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
<el-form-item label="岗位" prop="postId">
<el-select
v-model="formData.postId"
placeholder="请选择岗位"
class="!w-1/1"
:disabled="formType === 'update'"
>
<el-option
v-for="post in postList"
@ -47,7 +46,7 @@
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary">确 定</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@ -62,7 +61,9 @@ const props = defineProps<{
workstationId: number // 工作站编号
}>()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表加载中
const list = ref<MdWorkstationWorkerVO[]>([]) // 人力资源列表
const postList = ref<PostApi.PostVO[]>([]) // 岗位下拉列表
@ -81,6 +82,7 @@ const getList = async () => {
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formLoading = ref(false) // 表单的提交加载中
const formRef = ref() // 表单 Ref
const formData = ref({
id: undefined as number | undefined,
@ -94,15 +96,47 @@ const formRules = reactive({
quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
}) // 表单校验规则
// TODO @AI：是不是 openForm、resetForm 更好？因为编辑和添加其实是同一个表单，区别只是 formType 不同；这样和别的模块，更统一；
/** 打开添加弹窗 */
const openAddForm = async () => {
/** 打开表单弹窗 */
const openForm = async (type: string, row?: MdWorkstationWorkerVO) => {
dialogVisible.value = true
dialogTitle.value = '添加人员'
formType.value = 'create'
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 加载岗位列表
postList.value = await PostApi.getSimplePostList()
// 修改时，设置数据
if (type === 'update' && row) {
formData.value = { ...row }
}
}
/** 提交表单 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as MdWorkstationWorkerVO
if (formType.value === 'create') {
await MdWorkstationWorkerApi.createWorkstationWorker(data)
message.success(t('common.createSuccess'))
} else {
await MdWorkstationWorkerApi.updateWorkstationWorker(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 刷新列表
await getList()
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
workstationId: props.workstationId,
@ -113,35 +147,6 @@ const openAddForm = async () => {
formRef.value?.resetFields()
}
/** 打开编辑弹窗 */
const openEditForm = async (row: MdWorkstationWorkerVO) => {
dialogVisible.value = true
dialogTitle.value = '编辑人员'
formType.value = 'update'
// 加载岗位列表
postList.value = await PostApi.getSimplePostList()
formData.value = { ...row }
}
/** 提交表单 */
const submitForm = async () => {
// TODO @AI：和别的模块保持一致；类似 loading 啥的
await formRef.value.validate()
if (formType.value === 'update') {
await MdWorkstationWorkerApi.updateWorkstationWorker(
formData.value as unknown as MdWorkstationWorkerVO
)
message.success('编辑成功')
} else {
await MdWorkstationWorkerApi.createWorkstationWorker(
formData.value as unknown as MdWorkstationWorkerVO
)
message.success('添加成功')
}
dialogVisible.value = false
await getList()
}
/** 删除 */
const handleDelete = async (id: number) => {
try {

12
src/views/mes/md/workstation/index.vue
View File

@ -77,15 +77,13 @@
<!-- 列表 -->
<ContentWrap>
<!-- @AI：宽度的设置有问题，参考下别的模块；已对齐列宽 -->
<!-- @AI：我指的是，你这么写，宽度占不满屏幕 -->
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="工作站编码" align="center" prop="code" width="120" />
<el-table-column label="工作站名称" align="center" prop="name" width="150" />
<el-table-column label="工作站地点" align="center" prop="address" width="150" />
<el-table-column label="所在车间" align="center" prop="workshopName" width="120" />
<el-table-column label="工作站编码" align="center" prop="code" min-width="120" />
<el-table-column label="工作站名称" align="center" prop="name" min-width="150" />
<el-table-column label="工作站地点" align="center" prop="address" min-width="150" />
<el-table-column label="所在车间" align="center" prop="workshopName" min-width="120" />
<!-- TODO @芋艿：所属工序，等工序模块完成后对接 -->
<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>