✨ feat(mes): 优化销售出库表单布局和交互逻辑
调整销售出库表单的模板结构,改善运输信息的展示逻辑,确保在不同模式下的可用性和可读性。增加了对表单项的计算属性支持,以提升用户体验。pull/871/MERGE
parent
47db6c3b4c
commit
87a286ca5d
|
|
@ -1,5 +1,6 @@
|
||||||
<!-- MES 销售出库拣货明细表单弹窗 -->
|
<!-- MES 销售出库拣货明细表单弹窗 -->
|
||||||
<template>
|
<template>
|
||||||
|
<!-- TODO @AI:改成 3 行 -->
|
||||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
|
||||||
<el-form
|
<el-form
|
||||||
ref="formRef"
|
ref="formRef"
|
||||||
|
|
@ -18,6 +19,7 @@
|
||||||
@change="handleStockChange"
|
@change="handleStockChange"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!-- TODO @AI:下面应该都是 disabled?我记得有模块是这么干的; -->
|
||||||
<el-form-item label="出库仓库" prop="warehouseId">
|
<el-form-item label="出库仓库" prop="warehouseId">
|
||||||
<WmWarehouseSelect v-model="formData.warehouseId" />
|
<WmWarehouseSelect v-model="formData.warehouseId" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
|
||||||
|
|
@ -111,28 +111,30 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- 运输信息:填写运单/详情模式下展示,或已有运输数据时展示 -->
|
<!-- 运输信息:填写运单/详情模式下展示,或已有运输数据时展示 -->
|
||||||
<template v-if="isShipping || formType === 'detail' || formData.carrier || formData.shippingNumber">
|
<template
|
||||||
|
v-if="isShipping || formType === 'detail' || formData.carrier || formData.shippingNumber"
|
||||||
|
>
|
||||||
<el-divider content-position="left">运输信息</el-divider>
|
<el-divider content-position="left">运输信息</el-divider>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="承运商" prop="carrier">
|
<el-form-item label="承运商" prop="carrier">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="formData.carrier"
|
v-model="formData.carrier"
|
||||||
placeholder="请输入承运商"
|
placeholder="请输入承运商"
|
||||||
:disabled="!isShipping && isHeaderReadonly"
|
:disabled="!isShipping && isHeaderReadonly"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="运输单号" prop="shippingNumber">
|
<el-form-item label="运输单号" prop="shippingNumber">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="formData.shippingNumber"
|
v-model="formData.shippingNumber"
|
||||||
placeholder="请输入运输单号"
|
placeholder="请输入运输单号"
|
||||||
:disabled="!isShipping && isHeaderReadonly"
|
:disabled="!isShipping && isHeaderReadonly"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- 非新建模式展示行项目信息(出库物料) -->
|
<!-- 非新建模式展示行项目信息(出库物料) -->
|
||||||
|
|
@ -191,7 +193,9 @@ const isUpdate = computed(() => ['create', 'update'].includes(formType.value)) /
|
||||||
const isPick = computed(() => formType.value === 'stock') // 是否为拣货模式
|
const isPick = computed(() => formType.value === 'stock') // 是否为拣货模式
|
||||||
const isShipping = computed(() => formType.value === 'shipping') // 是否为填写运单模式
|
const isShipping = computed(() => formType.value === 'shipping') // 是否为填写运单模式
|
||||||
const isFinish = computed(() => formType.value === 'finish') // 是否为执行出库模式
|
const isFinish = computed(() => formType.value === 'finish') // 是否为执行出库模式
|
||||||
const isHeaderReadonly = computed(() => ['stock', 'shipping', 'finish', 'detail'].includes(formType.value)) // 是否只读
|
const isHeaderReadonly = computed(() =>
|
||||||
|
['stock', 'shipping', 'finish', 'detail'].includes(formType.value)
|
||||||
|
) // 是否只读
|
||||||
const dialogTitle = computed(() => {
|
const dialogTitle = computed(() => {
|
||||||
const titles = {
|
const titles = {
|
||||||
create: '新增销售出库单',
|
create: '新增销售出库单',
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,12 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="产品" prop="itemId">
|
<el-form-item label="产品" prop="itemId">
|
||||||
<MdItemSelect v-model="formData.itemId" placeholder="请选择产品" class="!w-1/1" :disabled="!!formData.noticeLineId" />
|
<MdItemSelect
|
||||||
|
v-model="formData.itemId"
|
||||||
|
placeholder="请选择产品"
|
||||||
|
class="!w-1/1"
|
||||||
|
:disabled="!!formData.noticeLineId"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!-- TODO @AI:/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/productsales 模块下,减少 formType == ;而是更过 isXXX,通过 compute 计算 -->
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-form
|
<el-form
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue