feat(mes): 优化工作站模块，新增获取车间列表和车间 Map 方法，重构表单弹窗逻辑

src/api/mes/md/workstation/index.ts

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

src/views/mes/md/workstation/WorkstationForm.vue

@@ -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 WorkstationMachinePanel from './WorkstationMachinePanel.vue'
-import WorkstationToolPanel from './components/WorkstationToolPanel.vue'
+import WorkstationToolPanel from './WorkstationToolPanel.vue'
-import WorkstationWorkerPanel from './components/WorkstationWorkerPanel.vue'
+import WorkstationWorkerPanel from './WorkstationWorkerPanel.vue'
 
 defineOptions({ name: 'WorkstationForm' })
 

src/views/mes/md/workstation/WorkstationMachinePanel.vue

@@ -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">
+    <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="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) => {

src/views/mes/md/workstation/WorkstationToolPanel.vue

@@ -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 openForm = (type: string, row?: MdWorkstationToolVO) => {
-const openAddForm = () => {
   dialogVisible.value = true
-  dialogTitle.value = '添加工具'
+  dialogTitle.value = t('action.' + type)
-  formType.value = 'create'
+  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 {

src/views/mes/md/workstation/WorkstationWorkerPanel.vue

@@ -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 openForm = async (type: string, row?: MdWorkstationWorkerVO) => {
-/** 打开添加弹窗 */
-const openAddForm = async () => {
   dialogVisible.value = true
-  dialogTitle.value = '添加人员'
+  dialogTitle.value = t('action.' + type)
-  formType.value = 'create'
+  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 {

src/views/mes/md/workstation/index.vue

@@ -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="code" min-width="120" />
-      <el-table-column label="工作站名称" align="center" prop="name" width="150" />
+      <el-table-column label="工作站名称" align="center" prop="name" min-width="150" />
-      <el-table-column label="工作站地点" align="center" prop="address" width="150" />
+      <el-table-column label="工作站地点" align="center" prop="address" min-width="150" />
-      <el-table-column label="所在车间" align="center" prop="workshopName" width="120" />
+      <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>