♻️ refactor(mes): 优化组件状态管理及注释说明
YunaiV
parent
7e0c226c24
commit
12566d6860
|
|
@ -117,9 +117,9 @@ const isEditable = computed(
|
|||
const isConfirmed = computed(() => props.workOrder.status === MesProWorkOrderStatusEnum.CONFIRMED) // 是否确认
|
||||
|
||||
// ==================== BOM 列表 ====================
|
||||
const loading = ref(false)
|
||||
const bomList = ref<ProWorkOrderBomVO[]>([])
|
||||
const bomTotal = ref(0)
|
||||
const loading = ref(false) // 列表的加载中
|
||||
const bomList = ref<ProWorkOrderBomVO[]>([]) // 列表的数据
|
||||
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 dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
// TODO @AI：这里的 create | update 不用枚举，简洁一点；
|
||||
const bomFormType = ref<'create' | 'update'>('update')
|
||||
const formRef = ref()
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const bomFormType = ref('create') // 表单类型
|
||||
const dialogTitle = computed(() => bomFormType.value === 'create' ? '添加 BOM 物料' : '编辑 BOM 物料')
|
||||
const formRef = ref() // 表单 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: 'create' | 'update', row?: any) => {
|
||||
const openForm = (type: string, 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 }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 formLoading = ref(false)
|
||||
const formType = ref<string>('create') // create / update / confirm / finish / detail
|
||||
const isEditable = computed(() => ['create', 'update'].includes(formType.value))
|
||||
const isConfirm = computed(() => formType.value === 'confirm')
|
||||
const isFinish = computed(() => formType.value === 'finish')
|
||||
const isDetail = computed(() => ['detail', 'confirm', 'finish'].includes(formType.value))
|
||||
const isHeaderReadonly = computed(() => ['confirm', 'finish', 'detail'].includes(formType.value))
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formType = ref<string>('create') // 表单的类型：create / update / confirm / finish / detail
|
||||
const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
|
||||
const isConfirm = computed(() => formType.value === 'confirm') // 是否为确认模式
|
||||
const isFinish = computed(() => formType.value === 'finish') // 是否为完成模式
|
||||
const isDetail = computed(() => ['detail', 'confirm', 'finish'].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>
|
||||
|
|
|
|||
|
|
@ -253,13 +253,13 @@ import {
|
|||
|
||||
defineOptions({ name: 'MesProWorkOrder' })
|
||||
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<ProWorkOrderVO[]>([])
|
||||
const total = ref(0)
|
||||
const exportLoading = ref(false)
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ProWorkOrderVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
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 formRef = ref()
|
||||
const queryFormRef = 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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue