yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(mes): 优化发货通知单表单和列表功能 

重构发货通知单的表单和列表展示，新增执行出库按钮，优化客户选择组件，提升用户体验。调整表单字段的可编辑状态，确保在不同操作模式下的交互逻辑清晰。
pull/871/MERGE
YunaiV 2026-03-30 18:22:30 +08:00
parent 12c04def97
commit 0ff490499e
2 changed files with 90 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/mes/wm/salesnotice/SalesNoticeForm.vue
View File

@ -11,28 +11,40 @@
<el-row>
<el-col :span="8">
<el-form-item label="通知单编号" prop="noticeCode">
<el-input v-model="formData.noticeCode" placeholder="请输入通知单编号">
<el-input
v-model="formData.noticeCode"
placeholder="请输入通知单编号"
:disabled="isHeaderReadonly"
>
<template #append>
<el-button @click="generateCode"> 生成 </el-button>
<el-button @click="generateCode" :disabled="isHeaderReadonly"> 生成 </el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="通知单名称" prop="noticeName">
<el-input v-model="formData.noticeName" placeholder="请输入通知单名称" />
<el-input
v-model="formData.noticeName"
placeholder="请输入通知单名称"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="销售订单编号" prop="salesOrderCode">
<el-input v-model="formData.salesOrderCode" placeholder="请输入销售订单编号" />
<el-input
v-model="formData.salesOrderCode"
placeholder="请输入销售订单编号"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="客户" prop="clientId">
<MdClientSelect v-model="formData.clientId" :disabled="isDetail" />
<MdClientSelect v-model="formData.clientId" :disabled="isHeaderReadonly" />
</el-form-item>
</el-col>
<el-col :span="8">
@ -43,7 +55,7 @@
value-format="x"
placeholder="请选择发货日期"
class="!w-1/1"
:disabled="isDetail"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
@ -51,24 +63,41 @@
<el-row>
<el-col :span="8">
<el-form-item label="收货人" prop="recipientName">
<el-input v-model="formData.recipientName" placeholder="请输入收货人" />
<el-input
v-model="formData.recipientName"
placeholder="请输入收货人"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式" prop="recipientTelephone">
<el-input v-model="formData.recipientTelephone" placeholder="请输入联系方式" />
<el-input
v-model="formData.recipientTelephone"
placeholder="请输入联系方式"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="收货地址" prop="recipientAddress">
<el-input v-model="formData.recipientAddress" placeholder="请输入收货地址" />
<el-input
v-model="formData.recipientAddress"
placeholder="请输入收货地址"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入备注"
:disabled="isHeaderReadonly"
/>
</el-form-item>
</el-col>
</el-row>
@ -90,6 +119,9 @@
>
提 交
</el-button>
<el-button v-if="isFinish" @click="handleFinish" type="success" :disabled="formLoading">
执行出库
</el-button>
<el-button @click="dialogVisible = false">关 闭</el-button>
</template>
</Dialog>
@ -106,17 +138,19 @@ defineOptions({ name: 'SalesNoticeForm' })
const emit = defineEmits(['success'])
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formType = ref<string>('create') // 表单的类型：create / update / detail
const formType = ref<string>('create') // 表单的类型：create / update / finish / detail
const isEditable = computed(() => ['create', 'update'].includes(formType.value)) // 是否为编辑模式
const isDetail = computed(() => formType.value === 'detail') // 是否为详情模式
const isFinish = computed(() => formType.value === 'finish') // 是否为执行出库模式
const isDetail = computed(() => ['detail', 'finish'].includes(formType.value)) // 是否为详情模式
const isHeaderReadonly = computed(() => ['detail', 'finish'].includes(formType.value)) // 是否只读
const dialogTitle = computed(() => {
const titles: Record<string, string> = {
create: '新增发货通知单',
update: '修改发货通知单',
detail: '查看发货通知单'
update: '编辑发货通知单',
finish: '执行出库',
detail: '发货通知单详情'
}
return titles[formType.value] || formType.value
})
@ -154,6 +188,7 @@ const open = async (type: string, id?: number) => {
dialogVisible.value = true
formType.value = type
resetForm()
// 修改/详情时，加载数据
if (id) {
formLoading.value = true
try {
@ -168,13 +203,16 @@ const open = async (type: string, id?: number) => {
/** 提交表单（create/update 模式） */
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as WmSalesNoticeVO
if (formType.value === 'create') {
const res = await WmSalesNoticeApi.createSalesNotice(data)
message.success('新增成功')
// 创建成功后，更新表单数据和状态为编辑模式
formData.value.id = res
formData.value.status = MesWmSalesNoticeStatusEnum.PREPARE
formType.value = 'update'
@ -184,6 +222,7 @@ const submitForm = async () => {
}
// 更新快照
originalFormData.value = JSON.stringify(formData.value)
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
@ -192,6 +231,7 @@ const submitForm = async () => {
/** 提交操作：表单修改过则先保存，再提交 */
const handleSubmit = async () => {
// 校验表单
await formRef.value.validate()
try {
await message.confirm('确认提交该发货通知单？【提交后将不能修改】')
@ -212,6 +252,11 @@ const handleSubmit = async () => {
}
}
/** 执行出库操作（暂未实现） */
const handleFinish = () => {
message.info('执行出库功能暂时不支持，敬请期待！')
}
/** 重置表单 */
const resetForm = () => {
formData.value = {

82
src/views/mes/wm/salesnotice/index.vue
View File

@ -35,19 +35,7 @@
/>
</el-form-item>
<el-form-item label="客户" prop="clientId">
<el-select
v-model="queryParams.clientId"
placeholder="请选择客户"
clearable
class="!w-240px"
>
<el-option
v-for="client in clientList"
:key="client.id"
:label="client.name"
:value="client.id"
/>
</el-select>
<MdClientSelect v-model="queryParams.clientId" class="!w-240px" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
@ -77,9 +65,9 @@
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="通知单编号" align="center" prop="noticeCode" min-width="160">
<template #default="scope">
<el-link type="primary" @click="openForm('detail', scope.row.id)">
<el-button link type="primary" @click="openForm('detail', scope.row.id)">
{{ scope.row.noticeCode }}
</el-link>
</el-button>
</template>
</el-table-column>
<el-table-column label="通知单名称" align="center" prop="noticeName" min-width="150" />
@ -100,8 +88,9 @@
<dict-tag :type="DICT_TYPE.MES_SALES_NOTICE_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="220" fixed="right">
<el-table-column label="操作" align="center" width="200" fixed="right">
<template #default="scope">
<!-- 草稿：编辑、删除 -->
<el-button
link
type="primary"
@ -111,15 +100,6 @@
>
编辑
</el-button>
<el-button
link
type="warning"
@click="handleSubmit(scope.row.id)"
v-hasPermi="['mes:wm-sales-notice:update']"
v-if="scope.row.status === MesWmSalesNoticeStatusEnum.PREPARE"
>
提交
</el-button>
<el-button
link
type="danger"
@ -129,6 +109,16 @@
>
删除
</el-button>
<!-- 待出库：执行出库 -->
<el-button
link
type="success"
@click="openForm('finish', scope.row.id)"
v-hasPermi="['mes:wm-sales-notice:update']"
v-if="scope.row.status === MesWmSalesNoticeStatusEnum.APPROVED"
>
执行出库
</el-button>
</template>
</el-table-column>
</el-table>
@ -145,23 +135,22 @@
<script setup lang="ts">
import { dateFormatter2 } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import { WmSalesNoticeApi, WmSalesNoticeVO } from '@/api/mes/wm/salesnotice'
import { MdClientApi } from '@/api/mes/md/client'
import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
import SalesNoticeForm from './SalesNoticeForm.vue'
import { MesWmSalesNoticeStatusEnum } from '@/views/mes/utils/constants'
defineOptions({ name: 'MesWmSalesNotice' })
const message = useMessage()
const { t } = useI18n()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true)
const list = ref<WmSalesNoticeVO[]>([])
const total = ref(0)
const exportLoading = ref(false)
const clientList = ref<any[]>([])
const loading = ref(true) // 列表的加载中
const list = ref<WmSalesNoticeVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const exportLoading = ref(false) // 导出的加载中
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@ -170,7 +159,8 @@ const queryParams = reactive({
salesOrderCode: undefined,
clientId: undefined
})
const queryFormRef = ref()
const queryFormRef = ref() // 搜索的表单
const formRef = ref() // 表单弹窗
/** 查询列表 */
const getList = async () => {
@ -184,34 +174,23 @@ const getList = async () => {
}
}
/** 搜索 */
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置 */
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 新增/修改/详情 */
const formRef = ref()
/** 添加/修改操作 */
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 提交 */
const handleSubmit = async (id: number) => {
try {
await message.confirm('确认提交该发货通知单？')
await WmSalesNoticeApi.submitSalesNotice(id)
message.success('提交成功')
await getList()
} catch {}
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
@ -236,8 +215,7 @@ const handleExport = async () => {
}
/** 初始化 */
onMounted(async () => {
clientList.value = await MdClientApi.getClientSimpleList()
await getList()
onMounted(() => {
getList()
})
</script>