✨ feat(mes): 优化到货通知单和行的表单逻辑
调整到货通知单和行的表单结构,增强用户体验。修改了表单字段的布局和逻辑,确保数据的有效性和可用性。更新了相关组件的引用,提升代码的可读性和维护性。pull/871/MERGE
parent
88dcf7f74f
commit
f7f6e7ce93
|
|
@ -116,11 +116,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
|
|
||||||
import { MesAutoCodeRuleCode, MesWmArrivalNoticeStatusEnum } from '@/views/mes/utils/constants'
|
|
||||||
import { WmArrivalNoticeApi, WmArrivalNoticeVO } from '@/api/mes/wm/arrivalnotice'
|
import { WmArrivalNoticeApi, WmArrivalNoticeVO } from '@/api/mes/wm/arrivalnotice'
|
||||||
import ArrivalNoticeLineList from './ArrivalNoticeLineList.vue'
|
import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
|
||||||
import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
|
import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
|
||||||
|
import ArrivalNoticeLineList from './ArrivalNoticeLineList.vue'
|
||||||
|
import {
|
||||||
|
MesAutoCodeRuleCode,
|
||||||
|
MesWmArrivalNoticeStatusEnum
|
||||||
|
} from '@/views/mes/utils/constants'
|
||||||
|
|
||||||
defineOptions({ name: 'ArrivalNoticeForm' })
|
defineOptions({ name: 'ArrivalNoticeForm' })
|
||||||
const emit = defineEmits(['success'])
|
const emit = defineEmits(['success'])
|
||||||
|
|
@ -153,7 +156,6 @@ const formData = ref({
|
||||||
contactTelephone: undefined,
|
contactTelephone: undefined,
|
||||||
remark: undefined
|
remark: undefined
|
||||||
})
|
})
|
||||||
const originalFormData = ref<string>('') // 原始表单数据快照,用于脏检查
|
|
||||||
const formRules = reactive({
|
const formRules = reactive({
|
||||||
code: [{ required: true, message: '通知单编号不能为空', trigger: 'blur' }],
|
code: [{ required: true, message: '通知单编号不能为空', trigger: 'blur' }],
|
||||||
name: [{ required: true, message: '通知单名称不能为空', trigger: 'blur' }],
|
name: [{ required: true, message: '通知单名称不能为空', trigger: 'blur' }],
|
||||||
|
|
@ -161,6 +163,7 @@ const formRules = reactive({
|
||||||
arrivalDate: [{ required: true, message: '请选择到货日期', trigger: 'change' }]
|
arrivalDate: [{ required: true, message: '请选择到货日期', trigger: 'change' }]
|
||||||
})
|
})
|
||||||
const formRef = ref() // 表单 Ref
|
const formRef = ref() // 表单 Ref
|
||||||
|
const originalFormData = ref<string>('') // 原始表单数据快照,用于脏检查
|
||||||
|
|
||||||
/** 生成通知单编号 */
|
/** 生成通知单编号 */
|
||||||
const generateCode = async () => {
|
const generateCode = async () => {
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" width="100" />
|
<el-table-column label="合格数量" align="center" prop="qualifiedQuantity" width="100" />
|
||||||
<!-- TODO @AI:是不是按需读取下; -->
|
|
||||||
<el-table-column label="检验单号" align="center" prop="iqcCode" min-width="140" />
|
<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" prop="remark" min-width="120" />
|
||||||
<el-table-column v-if="isEditable" label="操作" align="center" width="120">
|
<el-table-column v-if="isEditable" label="操作" align="center" width="120">
|
||||||
|
|
@ -35,8 +34,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 添加/编辑行弹窗 -->
|
<!-- 添加/编辑行弹窗 -->
|
||||||
<!-- TODO @AI:一行 3 个 -->
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
|
||||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="700px">
|
|
||||||
<el-form
|
<el-form
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
|
|
@ -45,26 +43,16 @@
|
||||||
v-loading="formLoading"
|
v-loading="formLoading"
|
||||||
>
|
>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="8">
|
||||||
<el-form-item label="物料" prop="itemId">
|
<el-form-item label="物料" prop="itemId">
|
||||||
<!-- TODO @AI:换成选择器 -->
|
<MdItemSelect
|
||||||
<el-select
|
|
||||||
v-model="formData.itemId"
|
v-model="formData.itemId"
|
||||||
placeholder="请选择物料"
|
placeholder="请选择物料"
|
||||||
filterable
|
|
||||||
clearable
|
|
||||||
class="!w-1/1"
|
class="!w-1/1"
|
||||||
>
|
/>
|
||||||
<el-option
|
|
||||||
v-for="item in itemList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="`${item.code} - ${item.name}`"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="8">
|
||||||
<el-form-item label="到货数量" prop="arrivalQuantity">
|
<el-form-item label="到货数量" prop="arrivalQuantity">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="formData.arrivalQuantity"
|
v-model="formData.arrivalQuantity"
|
||||||
|
|
@ -75,9 +63,7 @@
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
<el-col :span="8">
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="是否检验" prop="iqcCheckFlag">
|
<el-form-item label="是否检验" prop="iqcCheckFlag">
|
||||||
<el-switch v-model="formData.iqcCheckFlag" />
|
<el-switch v-model="formData.iqcCheckFlag" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -101,7 +87,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DICT_TYPE } from '@/utils/dict'
|
import { DICT_TYPE } from '@/utils/dict'
|
||||||
import { WmArrivalNoticeLineApi, WmArrivalNoticeLineVO } from '@/api/mes/wm/arrivalnotice/line'
|
import { WmArrivalNoticeLineApi, WmArrivalNoticeLineVO } from '@/api/mes/wm/arrivalnotice/line'
|
||||||
import { MdItemApi } from '@/api/mes/md/item'
|
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
|
||||||
|
|
||||||
defineOptions({ name: 'ArrivalNoticeLineList' })
|
defineOptions({ name: 'ArrivalNoticeLineList' })
|
||||||
|
|
||||||
|
|
@ -110,11 +96,11 @@ const props = defineProps<{
|
||||||
formType?: string
|
formType?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isEditable = computed(() => ['create', 'update'].includes(props.formType || ''))
|
|
||||||
|
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const isEditable = computed(() => ['create', 'update'].includes(props.formType || ''))
|
||||||
|
|
||||||
// ==================== 列表 ====================
|
// ==================== 列表 ====================
|
||||||
const loading = ref(false) // 列表的加载中
|
const loading = ref(false) // 列表的加载中
|
||||||
const list = ref<WmArrivalNoticeLineVO[]>([]) // 行列表
|
const list = ref<WmArrivalNoticeLineVO[]>([]) // 行列表
|
||||||
|
|
@ -152,8 +138,7 @@ const handleDelete = async (id: number) => {
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
const dialogTitle = ref('') // 弹窗的标题
|
const dialogTitle = ref('') // 弹窗的标题
|
||||||
const formLoading = ref(false) // 表单的加载中
|
const formLoading = ref(false) // 表单的加载中
|
||||||
const dialogFormType = ref('') // 表单的类型
|
const lineFormType = ref('') // 行表单的类型
|
||||||
const itemList = ref<any[]>([]) // 物料列表
|
|
||||||
const formData = ref({
|
const formData = ref({
|
||||||
id: undefined,
|
id: undefined,
|
||||||
noticeId: undefined as number | undefined,
|
noticeId: undefined as number | undefined,
|
||||||
|
|
@ -175,10 +160,9 @@ const formRef = ref() // 表单 Ref
|
||||||
/** 打开表单弹窗 */
|
/** 打开表单弹窗 */
|
||||||
const openForm = async (type: string, id?: number) => {
|
const openForm = async (type: string, id?: number) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
dialogTitle.value = t('action.' + type)
|
dialogTitle.value = type === 'create' ? '添加到货通知单行' : '修改到货通知单行'
|
||||||
dialogFormType.value = type
|
lineFormType.value = type
|
||||||
resetForm()
|
resetForm()
|
||||||
itemList.value = await MdItemApi.getItemSimpleList()
|
|
||||||
if (id) {
|
if (id) {
|
||||||
formLoading.value = true
|
formLoading.value = true
|
||||||
try {
|
try {
|
||||||
|
|
@ -194,8 +178,11 @@ const submitForm = async () => {
|
||||||
await formRef.value.validate()
|
await formRef.value.validate()
|
||||||
formLoading.value = true
|
formLoading.value = true
|
||||||
try {
|
try {
|
||||||
const data = { ...formData.value, noticeId: props.noticeId } as unknown as WmArrivalNoticeLineVO
|
const data = {
|
||||||
if (dialogFormType.value === 'create') {
|
...formData.value,
|
||||||
|
noticeId: props.noticeId
|
||||||
|
} as unknown as WmArrivalNoticeLineVO
|
||||||
|
if (lineFormType.value === 'create') {
|
||||||
await WmArrivalNoticeLineApi.createArrivalNoticeLine(data)
|
await WmArrivalNoticeLineApi.createArrivalNoticeLine(data)
|
||||||
message.success(t('common.createSuccess'))
|
message.success(t('common.createSuccess'))
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,6 @@
|
||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||||
|
|
@ -124,7 +123,22 @@
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- TODO @AI:【待入库】后,需要前往哪里操作?是不是得有个提示给用户 -->
|
<el-button
|
||||||
|
link
|
||||||
|
type="warning"
|
||||||
|
v-if="scope.row.status === MesWmArrivalNoticeStatusEnum.PENDING_QC"
|
||||||
|
@click="message.alert('请前往【质量管理 - 待检任务】中进行来料检验操作')"
|
||||||
|
>
|
||||||
|
执行质检
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="success"
|
||||||
|
v-if="scope.row.status === MesWmArrivalNoticeStatusEnum.PENDING_RECEIPT"
|
||||||
|
@click="message.alert('请前往【仓库管理 - 采购入库】中进行入库操作')"
|
||||||
|
>
|
||||||
|
执行入库
|
||||||
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -167,6 +181,7 @@ const queryParams = reactive({
|
||||||
arrivalDate: undefined
|
arrivalDate: undefined
|
||||||
})
|
})
|
||||||
const queryFormRef = ref() // 搜索的表单
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
const formRef = ref() // 表单弹窗
|
||||||
|
|
||||||
/** 查询列表 */
|
/** 查询列表 */
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
|
|
@ -180,20 +195,19 @@ const getList = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 搜索 */
|
/** 搜索按钮操作 */
|
||||||
const handleQuery = () => {
|
const handleQuery = () => {
|
||||||
queryParams.pageNo = 1
|
queryParams.pageNo = 1
|
||||||
getList()
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 重置 */
|
/** 重置按钮操作 */
|
||||||
const resetQuery = () => {
|
const resetQuery = () => {
|
||||||
queryFormRef.value.resetFields()
|
queryFormRef.value.resetFields()
|
||||||
handleQuery()
|
handleQuery()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 新增/修改/详情 */
|
/** 添加/修改操作 */
|
||||||
const formRef = ref() // 表单弹窗
|
|
||||||
const openForm = (type: string, id?: number) => {
|
const openForm = (type: string, id?: number) => {
|
||||||
formRef.value.open(type, id)
|
formRef.value.open(type, id)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue