♻️ refactor(mes): 优化组件状态管理及注释说明

src/views/mes/pro/workorder/WorkOrderBomList.vue

@@ -117,9 +117,9 @@ const isEditable = computed(
 const isConfirmed = computed(() => props.workOrder.status === MesProWorkOrderStatusEnum.CONFIRMED) // 是否确认
 
 // ==================== BOM 列表 ====================
-const loading = ref(false)
+const loading = ref(false) // 列表的加载中
-const bomList = ref<ProWorkOrderBomVO[]>([])
+const bomList = ref<ProWorkOrderBomVO[]>([]) // 列表的数据
-const bomTotal = ref(0)
+const bomTotal = ref(0) // 列表的总页数
 const bomQueryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -155,12 +155,11 @@ const handleDelete = async (id: number) => {
 }
 
 // ==================== BOM 新增/编辑表单 ====================
-const dialogVisible = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('')
+const formLoading = ref(false) // 表单的加载中
-const formLoading = ref(false)
+const bomFormType = ref('create') // 表单类型
-// TODO @AI：这里的 create | update 不用枚举，简洁一点；
+const dialogTitle = computed(() => bomFormType.value === 'create' ? '添加 BOM 物料' : '编辑 BOM 物料')
-const bomFormType = ref<'create' | 'update'>('update')
+const formRef = ref() // 表单 Ref
-const formRef = ref()
 const formData = ref({
   id: undefined as number | undefined,
   workOrderId: undefined as number | undefined,
@@ -190,17 +189,13 @@ const resetForm = () => {
 }
 
 /** 打开 BOM 弹窗 */
-// TODO @AI：这里的 create | update 不用写，简洁一点；
+const openForm = (type: string, row?: any) => {
-const openForm = (type: 'create' | 'update', row?: any) => {
   resetForm()
   bomFormType.value = type
   dialogVisible.value = true
   if (type === 'create') {
-    // TODO @AI：dialogTitle 通过 compute 计算
-    dialogTitle.value = '添加 BOM 物料'
     formData.value.workOrderId = props.workOrderId
   } else {
-    dialogTitle.value = '编辑 BOM 物料'
     formData.value = { ...row }
   }
 }

src/views/mes/pro/workorder/WorkorderForm.vue

@@ -95,7 +95,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="8" v-if="formData.orderSourceType === MesProWorkOrderSourceTypeEnum.ORDER">
           <el-form-item label="客户" prop="clientId">
             <MdClientSelect v-model="formData.clientId" :disabled="isHeaderReadonly" />
           </el-form-item>
@@ -211,16 +211,16 @@ import {
 defineOptions({ name: 'WorkOrderForm' })
 const emit = defineEmits(['success'])
 
-const message = useMessage()
+const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false)
+const formLoading = ref(false) // 表单的加载中
-const formType = ref<string>('create') // create / update / confirm / finish / detail
+const formType = ref<string>('create') // 表单的类型：create / update / confirm / finish / detail
-const isEditable = computed(() => ['create', 'update'].includes(formType.value))
+const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
-const isConfirm = computed(() => formType.value === 'confirm')
+const isConfirm = computed(() => formType.value === 'confirm') // 是否为确认模式
-const isFinish = computed(() => formType.value === 'finish')
+const isFinish = computed(() => formType.value === 'finish') // 是否为完成模式
-const isDetail = computed(() => ['detail', 'confirm', 'finish'].includes(formType.value))
+const isDetail = computed(() => ['detail', 'confirm', 'finish'].includes(formType.value)) // 是否为详情模式
-const isHeaderReadonly = computed(() => ['confirm', 'finish', 'detail'].includes(formType.value))
+const isHeaderReadonly = computed(() => ['confirm', 'finish', 'detail'].includes(formType.value)) // 表头是否只读
 const dialogTitle = computed(() => {
   if (['create', 'update'].includes(formType.value) && formData.value.parentId) {
     return formType.value === 'create' ? '新增子工单' : '编辑子工单'
@@ -234,7 +234,7 @@ const dialogTitle = computed(() => {
   }
   return titles[formType.value] || formType.value
 })
-const activeTab = ref('bom')
+const activeTab = ref('bom') // 当前选中的 Tab
 const formData = ref({
   id: undefined as number | undefined,
   parentId: undefined as number | undefined,
@@ -261,7 +261,7 @@ const formRules = reactive({
   quantity: [{ required: true, message: '工单数量不能为空', trigger: 'blur' }],
   requestDate: [{ required: true, message: '需求日期不能为空', trigger: 'change' }]
 })
-const formRef = ref()
+const formRef = ref() // 表单 Ref
 const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查
 
 /** 生成工单编码 */
@@ -320,14 +320,14 @@ const handleGenerateWorkOrder = (bomRow: any) => {
   message.info('已从 BOM 物料预填子工单，请补充工单编码等信息后保存')
 }
 
-defineExpose({ open })
 
-/** 工单来源变更：非客户订单时清空来源单据编号 */
+/** 工单来源变更：非客户订单时清空来源单据编号和客户 */
 watch(
   () => formData.value.orderSourceType,
   (val) => {
     if (val !== MesProWorkOrderSourceTypeEnum.ORDER) {
       formData.value.orderSourceCode = undefined
+      formData.value.clientId = undefined
     }
   }
 )
@@ -375,11 +375,12 @@ const handleConfirm = async () => {
   try {
     await message.confirm('确认要完成工单编制吗？确认后将不能更改。')
     formLoading.value = true
-    // 编辑模式下，表单有修改时先保存
+    // 1. 编辑模式下，表单有修改时先保存
     if (isEditable.value && JSON.stringify(formData.value) !== originalFormData.value) {
       const data = formData.value as unknown as ProWorkOrderVO
       await ProWorkOrderApi.updateWorkOrder(data)
     }
+    // 2. 确认工单
     await ProWorkOrderApi.confirmWorkOrder(formData.value.id!)
     message.success('工单已确认')
     dialogVisible.value = false
@@ -426,4 +427,6 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+defineExpose({ open })
 </script>

src/views/mes/pro/workorder/index.vue

@@ -253,13 +253,13 @@ import {
 
 defineOptions({ name: 'MesProWorkOrder' })
 
-const message = useMessage()
+const message = useMessage() // 消息弹窗
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
 
-const loading = ref(true)
+const loading = ref(true) // 列表的加载中
-const list = ref<ProWorkOrderVO[]>([])
+const list = ref<ProWorkOrderVO[]>([]) // 列表的数据
-const total = ref(0)
+const total = ref(0) // 列表的总页数
-const exportLoading = ref(false)
+const exportLoading = ref(false) // 导出的加载中
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -271,8 +271,9 @@ const queryParams = reactive({
   type: undefined,
   requestDate: undefined
 })
-const queryFormRef = ref()
+const queryFormRef = ref() // 搜索的表单
-const formRef = ref()
+const formRef = ref() // 表单弹窗
+const barcodeDetailRef = ref() // 条码详情弹窗
 
 /** 查询列表（分页 + 前端 handleTree 拼接树） */
 const getList = async () => {
@@ -329,7 +330,6 @@ const handleDelete = async (id: number) => {
 }
 
 /** 查看工单条码 */
-const barcodeDetailRef = ref()
 const handleBarcode = async (row: ProWorkOrderVO) => {
   await barcodeDetailRef.value.openByBusiness(
     row.id,