From 38f3e73486a7d0874bb7b9da2012c586cb69ba64 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 1 Mar 2026 22:16:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=94=80=E5=94=AE=E9=80=80=E8=B4=A7=E5=8D=95=E5=8F=8A=E8=A1=8C?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=E5=92=8C=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增销售退货单及行的相关数据结构、请求和响应对象，包含销售退货单的基本信息、行信息以及相关的 API 接口，支持销售退货单的创建、更新、查询和删除操作，提升了系统的功能性和可维护性。
---
 .../wm/returnsales/ReturnSalesDetailForm.vue  | 155 ++++++++++
 .../wm/returnsales/ReturnSalesDetailList.vue  |  76 +++++
 .../wm/returnsales/ReturnSalesLineList.vue    | 279 ++++++++++++++++++
 3 files changed, 510 insertions(+)
 create mode 100644 src/views/mes/wm/returnsales/ReturnSalesDetailForm.vue
 create mode 100644 src/views/mes/wm/returnsales/ReturnSalesDetailList.vue
 create mode 100644 src/views/mes/wm/returnsales/ReturnSalesLineList.vue

diff --git a/src/views/mes/wm/returnsales/ReturnSalesDetailForm.vue b/src/views/mes/wm/returnsales/ReturnSalesDetailForm.vue
new file mode 100644
index 000000000..e5caa9b2a
--- /dev/null
+++ b/src/views/mes/wm/returnsales/ReturnSalesDetailForm.vue
@@ -0,0 +1,155 @@
+<!-- MES 销售退货上架明细表单弹窗 -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="物料" prop="itemId">
+        <MdItemSelect v-model="formData.itemId" disabled />
+      </el-form-item>
+      <el-form-item label="入库仓库" prop="warehouseId">
+        <WmWarehouseSelect v-model="formData.warehouseId" />
+      </el-form-item>
+      <el-form-item label="库区" prop="locationId" v-if="formData.warehouseId">
+        <WmWarehouseLocationSelect
+          v-model="formData.locationId"
+          :warehouse-id="formData.warehouseId"
+        />
+      </el-form-item>
+      <el-form-item label="库位" prop="areaId" v-if="formData.locationId">
+        <WmWarehouseAreaSelect v-model="formData.areaId" :location-id="formData.locationId" />
+      </el-form-item>
+      <el-form-item label="批次号" prop="batchCode">
+        <el-input v-model="formData.batchCode" placeholder="请输入批次号" />
+      </el-form-item>
+      <el-form-item label="数量" prop="quantity">
+        <el-input-number
+          v-model="formData.quantity"
+          :precision="2"
+          :min="0"
+          controls-position="right"
+          class="!w-1/1"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  WmReturnSalesDetailApi,
+  WmReturnSalesDetailVO
+} from '@/api/mes/wm/returnsales/detail'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
+import WmWarehouseLocationSelect from '@/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue'
+import WmWarehouseAreaSelect from '@/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue'
+
+defineOptions({ name: 'ReturnSalesDetailForm' })
+
+const props = defineProps<{
+  returnId: number
+}>()
+
+const emit = defineEmits(['success'])
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create / update
+const currentLineId = ref<number>() // 当前操作的行 ID
+const formRef = ref() // 表单 Ref
+const formData = ref({
+  id: undefined as number | undefined,
+  lineId: undefined as number | undefined,
+  returnId: undefined as number | undefined,
+  itemId: undefined as number | undefined,
+  quantity: undefined as number | undefined,
+  batchCode: undefined as string | undefined,
+  warehouseId: undefined as number | undefined,
+  locationId: undefined as number | undefined,
+  areaId: undefined as number | undefined
+})
+const formRules = reactive({
+  itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
+  warehouseId: [{ required: true, message: '入库仓库不能为空', trigger: 'change' }],
+  locationId: [{ required: true, message: '库区不能为空', trigger: 'change' }],
+  areaId: [{ required: true, message: '库位不能为空', trigger: 'change' }],
+  quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
+})
+
+/** 打开弹窗 */
+const open = async (type: string, lineId: number, itemId?: number, detailId?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'create' ? '添加上架明细' : '编辑上架明细'
+  formType.value = type
+  currentLineId.value = lineId
+  resetForm()
+  // 修改时，设置数据
+  if (detailId) {
+    formLoading.value = true
+    try {
+      formData.value = await WmReturnSalesDetailApi.getReturnSalesDetail(detailId)
+    } finally {
+      formLoading.value = false
+    }
+  } else if (itemId) {
+    formData.value.itemId = itemId
+  }
+}
+defineExpose({ open })
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = {
+      ...formData.value,
+      returnId: props.returnId,
+      lineId: currentLineId.value
+    } as unknown as WmReturnSalesDetailVO
+    if (formType.value === 'create') {
+      await WmReturnSalesDetailApi.createReturnSalesDetail(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await WmReturnSalesDetailApi.updateReturnSalesDetail(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', currentLineId.value)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    lineId: undefined,
+    returnId: undefined,
+    itemId: undefined,
+    quantity: undefined,
+    batchCode: undefined,
+    warehouseId: undefined,
+    locationId: undefined,
+    areaId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mes/wm/returnsales/ReturnSalesDetailList.vue b/src/views/mes/wm/returnsales/ReturnSalesDetailList.vue
new file mode 100644
index 000000000..5a2a2285e
--- /dev/null
+++ b/src/views/mes/wm/returnsales/ReturnSalesDetailList.vue
@@ -0,0 +1,76 @@
+<!-- MES 销售退货上架明细列表（展开行内嵌子组件） -->
+<template>
+  <div class="pl-60px pr-20px py-10px">
+    <el-table v-loading="loading" :data="list" border size="small">
+      <el-table-column label="批次号" align="center" prop="batchCode" min-width="120" />
+      <el-table-column label="仓库名称" align="center" prop="warehouseName" min-width="100" />
+      <el-table-column label="库区名称" align="center" prop="locationName" min-width="100" />
+      <el-table-column label="库位名称" align="center" prop="areaName" min-width="100" />
+      <el-table-column label="数量" align="center" prop="quantity" width="100" />
+      <el-table-column
+        v-if="props.formType === 'stock'"
+        label="操作"
+        align="center"
+        width="120"
+        fixed="right"
+      >
+        <template #default="scope">
+          <el-button link type="primary" @click="emit('edit-detail', scope.row.id)">
+            编辑
+          </el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  WmReturnSalesDetailApi,
+  WmReturnSalesDetailVO
+} from '@/api/mes/wm/returnsales/detail'
+
+defineOptions({ name: 'ReturnSalesDetailList' })
+
+const props = defineProps<{
+  returnId: number
+  lineId: number
+  itemId: number
+  formType: string
+}>()
+
+const emit = defineEmits(['edit-detail'])
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表的加载中
+const list = ref<WmReturnSalesDetailVO[]>([]) // 明细列表
+
+/** 查询明细列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await WmReturnSalesDetailApi.getReturnSalesDetailListByLineId(props.lineId)
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ getList })
+
+/** 删除上架明细 */
+const handleDelete = async (detailId: number) => {
+  try {
+    await message.delConfirm()
+    await WmReturnSalesDetailApi.deleteReturnSalesDetail(detailId)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 初始化：延迟加载，展开时才触发 */
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mes/wm/returnsales/ReturnSalesLineList.vue b/src/views/mes/wm/returnsales/ReturnSalesLineList.vue
new file mode 100644
index 000000000..d1080898c
--- /dev/null
+++ b/src/views/mes/wm/returnsales/ReturnSalesLineList.vue
@@ -0,0 +1,279 @@
+<!-- MES 销售退货单行列表子组件 -->
+<template>
+  <div>
+    <el-button v-if="isUpdate" type="primary" plain @click="openForm('create')" class="mb-10px">
+      <Icon icon="ep:plus" class="mr-5px" /> 添加物料
+    </el-button>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      border
+      :row-key="(row: any) => row.id"
+    >
+      <el-table-column type="expand">
+        <template #default="scope">
+          <ReturnSalesDetailList
+            :ref="(el: any) => setDetailListRef(scope.row.id, el)"
+            :return-id="props.returnId"
+            :line-id="scope.row.id"
+            :item-id="scope.row.itemId"
+            :form-type="props.formType"
+            @edit-detail="
+              (detailId: number) =>
+                openDetailForm('update', scope.row.id, scope.row.itemId, detailId)
+            "
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="物料编码" align="center" prop="itemCode" min-width="120" />
+      <el-table-column label="物料名称" align="center" prop="itemName" min-width="140" />
+      <el-table-column label="规格型号" align="center" prop="specification" min-width="120" />
+      <el-table-column label="单位" align="center" prop="unitMeasureName" width="80" />
+      <el-table-column label="退货数量" align="center" prop="quantityReturned" width="100" />
+      <el-table-column label="批次号" align="center" prop="batchCode" min-width="120" />
+      <el-table-column
+        v-if="isUpdate || isStock"
+        label="操作"
+        align="center"
+        width="160"
+        fixed="right"
+      >
+        <template #default="scope">
+          <el-button v-if="isUpdate" link type="primary" @click="openForm('update', scope.row.id)">
+            编辑
+          </el-button>
+          <el-button v-if="isUpdate" link type="danger" @click="handleDelete(scope.row.id)">
+            删除
+          </el-button>
+          <el-button v-if="isStock" link type="success" @click="handleStock(scope.row.id)">
+            上架
+          </el-button>
+          <!-- TODO @芋艿：【待定】标签打印 -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+
+  <!-- 添加/编辑行弹窗 -->
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="物料" prop="itemId">
+            <MdItemSelect
+              v-model="formData.itemId"
+              placeholder="请选择物料"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="退货数量" prop="quantityReturned">
+            <el-input-number
+              v-model="formData.quantityReturned"
+              :precision="2"
+              :min="0"
+              controls-position="right"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="批次编码" prop="batchCode">
+            <el-input v-model="formData.batchCode" placeholder="请输入批次编码" />
+          </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-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <!-- 上架明细添加/编辑弹窗 -->
+  <ReturnSalesDetailForm
+    ref="detailFormRef"
+    :return-id="props.returnId"
+    @success="onDetailFormSuccess"
+  />
+</template>
+
+<script setup lang="ts">
+import { WmReturnSalesLineApi, WmReturnSalesLineVO } from '@/api/mes/wm/returnsales/line'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import ReturnSalesDetailList from './ReturnSalesDetailList.vue'
+import ReturnSalesDetailForm from './ReturnSalesDetailForm.vue'
+
+defineOptions({ name: 'ReturnSalesLineList' })
+
+const props = defineProps<{
+  returnId: number
+  formType: string
+}>()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const isUpdate = computed(() => ['create', 'update'].includes(props.formType)) // 是否为编辑模式
+const isStock = computed(() => props.formType === 'stock') // 是否为上架模式
+
+// ==================== 列表 ====================
+const loading = ref(false) // 列表的加载中
+const list = ref<WmReturnSalesLineVO[]>([]) // 行列表
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  returnId: undefined as number | undefined
+})
+
+/** 查询行列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.returnId = props.returnId
+    const data = await WmReturnSalesLineApi.getReturnSalesLinePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 删除 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await WmReturnSalesLineApi.deleteReturnSalesLine(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+// ==================== 添加/编辑表单 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const lineFormType = ref('') // 行表单的类型
+const formData = ref({
+  id: undefined,
+  returnId: undefined as number | undefined,
+  itemId: undefined,
+  quantityReturned: undefined,
+  batchCode: undefined,
+  remark: undefined
+})
+const formRules = reactive({
+  itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
+  quantityReturned: [{ required: true, message: '退货数量不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开表单弹窗 */
+const openForm = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'create' ? '添加销售退货单行' : '修改销售退货单行'
+  lineFormType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await WmReturnSalesLineApi.getReturnSalesLine(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+/** 提交表单 */
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = {
+      ...formData.value,
+      returnId: props.returnId
+    } as unknown as WmReturnSalesLineVO
+    if (lineFormType.value === 'create') {
+      await WmReturnSalesLineApi.createReturnSalesLine(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await WmReturnSalesLineApi.updateReturnSalesLine(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    await getList()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    returnId: undefined,
+    itemId: undefined,
+    quantityReturned: undefined,
+    batchCode: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+// ==================== 展开行：上架明细 ====================
+const detailListRefs = ref<Record<number, InstanceType<typeof ReturnSalesDetailList>>>({})
+
+/** 缓存子组件 ref */
+const setDetailListRef = (lineId: number, el: any) => {
+  if (el) {
+    detailListRefs.value[lineId] = el
+  }
+}
+
+// ==================== 上架明细表单（LineList 层级持有） ====================
+const detailFormRef = ref()
+
+/** 上架：直接打开明细创建表单 */
+const handleStock = (lineId: number) => {
+  const row = list.value.find((r) => r.id === lineId)
+  openDetailForm('create', lineId, row?.itemId)
+}
+
+/** 打开上架明细表单 */
+const openDetailForm = (type: string, lineId: number, itemId?: number, detailId?: number) => {
+  detailFormRef.value.open(type, lineId, itemId, detailId)
+}
+
+/** 明细表单提交成功后，刷新已展开行的 DetailList */
+const onDetailFormSuccess = (lineId: number) => {
+  detailListRefs.value[lineId]?.getList()
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getList()
+})
+</script>