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

重构发货通知单的表单和列表展示，新增执行出库按钮，优化客户选择组件，提升用户体验。调整表单字段的可编辑状态，确保在不同操作模式下的交互逻辑清晰。

src/views/mes/wm/salesnotice/SalesNoticeForm.vue

@@ -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: '修改发货通知单',
+    update: '编辑发货通知单',
-    detail: '查看发货通知单'
+    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 = {

src/views/mes/wm/salesnotice/index.vue

@@ -35,19 +35,7 @@
         />
       </el-form-item>
       <el-form-item label="客户" prop="clientId">
-        <el-select
+        <MdClientSelect v-model="queryParams.clientId" class="!w-240px" />
-          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>
       </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 message = useMessage() // 消息弹窗
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
 
-const loading = ref(true)
+const loading = ref(true) // 列表的加载中
-const list = ref<WmSalesNoticeVO[]>([])
+const list = ref<WmSalesNoticeVO[]>([]) // 列表的数据
-const total = ref(0)
+const total = ref(0) // 列表的总页数
-const exportLoading = ref(false)
+const exportLoading = ref(false) // 导出的加载中
-const clientList = ref<any[]>([])
 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 () => {
+onMounted(() => {
-  clientList.value = await MdClientApi.getClientSimpleList()
+  getList()
-  await getList()
 })
 </script>