feat(mes): 优化到货通知单表单交互
- 参考 IQC 表单模式,支持详情查看和新增后自动进入编辑 - 移除用户不应填写的字段(合格数量由 IQC 回调设置) - 使用 MdVendorSelect 组件替换内联选择器 - 添加必填验证(通知单名称、是否检验、到货数量 > 0) - 修复导航:点击编号查看详情,新增入库单按钮查看相关入库单pull/871/MERGE
parent
2fc5362a7e
commit
b460a0e47d
|
|
@ -6,6 +6,7 @@
|
|||
:rules="formRules"
|
||||
label-width="110px"
|
||||
v-loading="formLoading"
|
||||
:disabled="isDetail"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
|
|
@ -33,19 +34,7 @@
|
|||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="供应商" prop="vendorId">
|
||||
<el-select
|
||||
v-model="formData.vendorId"
|
||||
placeholder="请选择供应商"
|
||||
clearable
|
||||
class="!w-1/1"
|
||||
>
|
||||
<el-option
|
||||
v-for="vendor in vendorList"
|
||||
:key="vendor.id"
|
||||
:label="vendor.name"
|
||||
:value="vendor.id"
|
||||
/>
|
||||
</el-select>
|
||||
<MdVendorSelect v-model="formData.vendorId" :disabled="isDetail" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
|
|
@ -81,12 +70,14 @@
|
|||
</el-row>
|
||||
</el-form>
|
||||
<!-- 编辑时展示物料信息 -->
|
||||
<template v-if="formData.id">
|
||||
<template v-if="formType === 'update' && formData.id">
|
||||
<el-divider content-position="center">物料信息</el-divider>
|
||||
<ArrivalNoticeLineList :notice-id="formData.id" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!isDetail">
|
||||
确 定
|
||||
</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
|
@ -95,8 +86,8 @@
|
|||
<script setup lang="ts">
|
||||
import { generateRandomStr } from '@/utils'
|
||||
import { WmArrivalNoticeApi, WmArrivalNoticeVO } from '@/api/mes/wm/arrivalnotice'
|
||||
import { MdVendorApi } from '@/api/mes/md/vendor'
|
||||
import ArrivalNoticeLineList from './ArrivalNoticeLineList.vue'
|
||||
import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
|
||||
|
||||
defineOptions({ name: 'ArrivalNoticeForm' })
|
||||
|
||||
|
|
@ -104,10 +95,17 @@ const { t } = useI18n() // 国际化
|
|||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
||||
const vendorList = ref<any[]>([]) // 供应商列表
|
||||
const formType = ref('') // 表单的类型:create - 新增;update - 修改;detail - 详情
|
||||
const isDetail = computed(() => formType.value === 'detail') // 是否为详情模式
|
||||
const dialogTitle = computed(() => {
|
||||
const titles = {
|
||||
create: '新增到货通知单',
|
||||
update: '修改到货通知单',
|
||||
detail: '查看到货通知单'
|
||||
}
|
||||
return titles[formType.value] || t('action.' + formType.value)
|
||||
})
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
code: undefined,
|
||||
|
|
@ -121,6 +119,7 @@ const formData = ref({
|
|||
})
|
||||
const formRules = reactive({
|
||||
code: [{ required: true, message: '通知单编号不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '通知单名称不能为空', trigger: 'blur' }],
|
||||
vendorId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
|
||||
arrivalDate: [{ required: true, message: '请选择到货日期', trigger: 'change' }]
|
||||
})
|
||||
|
|
@ -134,10 +133,9 @@ const generateCode = () => {
|
|||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
vendorList.value = await MdVendorApi.getVendorSimpleList()
|
||||
// DONE @AI:已改用 MdVendorSelect 组件,该组件会自动加载供应商列表
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
|
|
@ -157,14 +155,17 @@ const submitForm = async () => {
|
|||
try {
|
||||
const data = formData.value as unknown as WmArrivalNoticeVO
|
||||
if (formType.value === 'create') {
|
||||
await WmArrivalNoticeApi.createArrivalNotice(data)
|
||||
const res = await WmArrivalNoticeApi.createArrivalNotice(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
// 新增成功后,切换到修改模式,设置 id
|
||||
formData.value.id = res
|
||||
formType.value = 'update'
|
||||
} else {
|
||||
await WmArrivalNoticeApi.updateArrivalNotice(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
dialogVisible.value = false
|
||||
emit('success')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" width="100" />
|
||||
<!-- TODO @芋艿【不要删除】:后续需要怎么弄 -->
|
||||
<el-table-column label="检验单号" align="center" prop="iqcCode" min-width="140" />
|
||||
<el-table-column label="备注" align="center" prop="remark" min-width="120" />
|
||||
<el-table-column label="操作" align="center" width="120">
|
||||
|
|
@ -67,25 +66,15 @@
|
|||
<el-input-number
|
||||
v-model="formData.arrivalQuantity"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
:min="0.01"
|
||||
controls-position="right"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- DONE @AI:已移除合格数量字段,该字段由 IQC 回调自动设置 -->
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合格数量" prop="qualifiedQuantity">
|
||||
<el-input-number
|
||||
v-model="formData.qualifiedQuantity"
|
||||
:precision="2"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否检验" prop="iqcCheckFlag">
|
||||
<el-switch v-model="formData.iqcCheckFlag" />
|
||||
|
|
@ -165,13 +154,16 @@ const formData = ref({
|
|||
noticeId: undefined as number | undefined,
|
||||
itemId: undefined,
|
||||
arrivalQuantity: undefined,
|
||||
qualifiedQuantity: undefined,
|
||||
iqcCheckFlag: false,
|
||||
remark: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
|
||||
arrivalQuantity: [{ required: true, message: '到货数量不能为空', trigger: 'blur' }]
|
||||
arrivalQuantity: [
|
||||
{ required: true, message: '到货数量不能为空', trigger: 'blur' },
|
||||
{ type: 'number', min: 0.01, message: '到货数量必须大于0', trigger: 'blur' }
|
||||
],
|
||||
iqcCheckFlag: [{ required: true, message: '是否检验不能为空', trigger: 'change' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
|
|
@ -219,7 +211,6 @@ const resetForm = () => {
|
|||
noticeId: undefined,
|
||||
itemId: undefined,
|
||||
arrivalQuantity: undefined,
|
||||
qualifiedQuantity: undefined,
|
||||
iqcCheckFlag: false,
|
||||
remark: undefined
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- TODO @芋艿:【待确认,先忽略】这里的字段映射 -->
|
||||
<el-form-item label="采购订单编号" prop="purchaseOrderCode">
|
||||
<el-input
|
||||
v-model="queryParams.purchaseOrderCode"
|
||||
|
|
@ -103,9 +104,9 @@
|
|||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="通知单编号" align="center" prop="code" min-width="160">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="openLine(scope.row.id)">
|
||||
<el-link type="primary" @click="openForm('detail', scope.row.id)">
|
||||
{{ scope.row.code }}
|
||||
</el-button>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="通知单名称" align="center" prop="name" min-width="150" />
|
||||
|
|
@ -116,6 +117,8 @@
|
|||
min-width="140"
|
||||
/>
|
||||
<el-table-column label="供应商名称" align="center" prop="vendorName" min-width="120" />
|
||||
<el-table-column label="联系人" align="center" prop="contactName" min-width="100" />
|
||||
<el-table-column label="联系方式" align="center" prop="contactTelephone" min-width="120" />
|
||||
<el-table-column
|
||||
label="到货日期"
|
||||
align="center"
|
||||
|
|
@ -123,20 +126,11 @@
|
|||
:formatter="dateFormatter2"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="联系人" align="center" prop="contactName" min-width="100" />
|
||||
<el-table-column label="联系方式" align="center" prop="contactTelephone" min-width="120" />
|
||||
<el-table-column label="单据状态" align="center" prop="status" min-width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.MES_WM_ARRIVAL_NOTICE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" width="220" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
|
|
@ -181,7 +175,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
|
||||
import { dateFormatter2 } from '@/utils/formatTime'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import download from '@/utils/download'
|
||||
import { WmArrivalNoticeApi, WmArrivalNoticeVO } from '@/api/mes/wm/arrivalnotice'
|
||||
|
|
@ -193,7 +187,6 @@ defineOptions({ name: 'MesWmArrivalNotice' })
|
|||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const router = useRouter() // 路由
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<WmArrivalNoticeVO[]>([]) // 列表的数据
|
||||
|
|
@ -236,20 +229,12 @@ const resetQuery = () => {
|
|||
handleQuery()
|
||||
}
|
||||
|
||||
/** 新增/修改 */
|
||||
/** 新增/修改/详情 */
|
||||
const formRef = ref() // 表单弹窗
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 打开明细行 */
|
||||
const openLine = (noticeId: number) => {
|
||||
router.push({
|
||||
name: 'MesWmArrivalNoticeLine',
|
||||
query: { noticeId: String(noticeId) }
|
||||
})
|
||||
}
|
||||
|
||||
/** 提交 */
|
||||
const handleSubmit = async (id: number) => {
|
||||
try {
|
||||
|
|
|
|||
Loading…
Reference in New Issue