From 78e8ec1772b6d92b5429b72accce2e36286479bc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 28 Mar 2026 17:19:31 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7=E8=8B=B1=E6=96=87=E5=90=8D=E7=A7=B0=E5=8F=8A?=
 =?UTF-8?q?=E5=87=BA=E5=BA=93=E5=8D=95=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增客户英文名称字段，优化客户信息展示。实现按客户编号查询销售出库单列表的功能，提升用户体验。
---
 .../md/client/ClientProductSalesLineTab.vue   | 76 ++++++++++++++++
 .../mes/md/client/ClientProductSalesTab.vue   | 86 +++++++++++++++++++
 src/views/mes/md/client/MdClientForm.vue      | 47 ++++++----
 src/views/mes/md/client/index.vue             | 18 +++-
 src/views/mes/utils/constants.ts              |  1 +
 5 files changed, 209 insertions(+), 19 deletions(-)
 create mode 100644 src/views/mes/md/client/ClientProductSalesLineTab.vue
 create mode 100644 src/views/mes/md/client/ClientProductSalesTab.vue

diff --git a/src/views/mes/md/client/ClientProductSalesLineTab.vue b/src/views/mes/md/client/ClientProductSalesLineTab.vue
new file mode 100644
index 000000000..738dd123f
--- /dev/null
+++ b/src/views/mes/md/client/ClientProductSalesLineTab.vue
@@ -0,0 +1,76 @@
+<template>
+  <!-- 客户详情-产品清单 tab（复用 getProductSalesLinePage 分页接口） -->
+  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table-column label="物料编码" align="center" prop="itemCode" width="140">
+      <template #default="scope">
+        <el-button link type="primary" @click="handleViewItem(scope.row.itemId)">
+          {{ scope.row.itemCode }}
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column label="物料名称" align="center" prop="itemName" />
+    <el-table-column label="规格型号" align="center" prop="specification" />
+    <el-table-column label="单位" align="center" prop="unitMeasureName" />
+    <el-table-column label="出库数量" align="center" prop="quantity" />
+    <el-table-column label="批次号" align="center" prop="batchCode" />
+  </el-table>
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 物料详情弹窗 -->
+  <MdItemForm ref="itemFormRef" />
+</template>
+
+<script setup lang="ts">
+import { WmProductSalesLineApi } from '@/api/mes/wm/productsales/line'
+import MdItemForm from '@/views/mes/md/item/MdItemForm.vue'
+
+defineOptions({ name: 'ClientProductSalesLineTab' })
+
+const props = defineProps<{
+  clientId: number
+}>()
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  clientId: undefined as number | undefined
+})
+
+/** 查询列表 */
+const getList = async () => {
+  if (!queryParams.clientId) return
+  loading.value = true
+  try {
+    const data = await WmProductSalesLineApi.getProductSalesLinePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 查看物料详情 */
+const itemFormRef = ref()
+const handleViewItem = (itemId: number) => {
+  itemFormRef.value.open('detail', itemId)
+}
+
+/** 监听 clientId 变化，自动加载 */
+watch(
+  () => props.clientId,
+  (val) => {
+    queryParams.clientId = val
+    queryParams.pageNo = 1
+    getList()
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/mes/md/client/ClientProductSalesTab.vue b/src/views/mes/md/client/ClientProductSalesTab.vue
new file mode 100644
index 000000000..81cbf5c60
--- /dev/null
+++ b/src/views/mes/md/client/ClientProductSalesTab.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- 客户详情-销售记录 tab（复用 getProductSalesPage 分页接口） -->
+  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table-column label="出库单编号" align="center" prop="code" min-width="160">
+      <template #default="scope">
+        <el-button link type="primary" @click="handleDetail(scope.row.id)">
+          {{ scope.row.code }}
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column label="出库单名称" align="center" prop="name" min-width="150" />
+    <el-table-column
+      label="出库日期"
+      align="center"
+      prop="salesDate"
+      :formatter="dateFormatter2"
+      width="180px"
+    />
+    <el-table-column label="单据状态" align="center" prop="status" min-width="100">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.MES_WM_PRODUCT_SALES_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+  </el-table>
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 销售出库单详情弹窗 -->
+  <ProductSalesForm ref="formRef" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { WmProductSalesApi } from '@/api/mes/wm/productsales'
+import ProductSalesForm from '@/views/mes/wm/productsales/ProductSalesForm.vue'
+
+defineOptions({ name: 'ClientProductSalesTab' })
+
+const props = defineProps<{
+  clientId: number
+}>()
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  clientId: undefined as number | undefined
+})
+
+/** 查询列表 */
+const getList = async () => {
+  if (!queryParams.clientId) return
+  loading.value = true
+  try {
+    const data = await WmProductSalesApi.getProductSalesPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 查看详情 */
+const formRef = ref()
+const handleDetail = (id: number) => {
+  formRef.value.open('detail', id)
+}
+
+/** 监听 clientId 变化，自动加载 */
+watch(
+  () => props.clientId,
+  (val) => {
+    queryParams.clientId = val
+    queryParams.pageNo = 1
+    getList()
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/mes/md/client/MdClientForm.vue b/src/views/mes/md/client/MdClientForm.vue
index 0f1b694d9..772aab2de 100644
--- a/src/views/mes/md/client/MdClientForm.vue
+++ b/src/views/mes/md/client/MdClientForm.vue
@@ -6,6 +6,7 @@
       :rules="formRules"
       label-width="120px"
       v-loading="formLoading"
+      :disabled="isDetail"
     >
       <el-row>
         <el-col :span="12">
@@ -149,19 +150,19 @@
         </el-col>
       </el-row>
     </el-form>
-    <!-- 编辑时显示关联数据 tab -->
-    <el-tabs v-if="formType === 'update'" v-model="activeTab" class="mt-10px">
-      <el-tab-pane label="产品清单" name="item">
-        <!-- TODO @芋艿：客户详情-产品清单 tab，依赖物料模块按客户查询 -->
-        <el-empty description="功能开发中，敬请期待" />
+    <!-- 编辑/详情时显示关联数据 tab -->
+    <el-tabs v-if="formType !== 'create' && formData.id" v-model="activeTab" class="mt-10px">
+      <el-tab-pane label="产品清单" name="productSalesLine" lazy>
+        <ClientProductSalesLineTab :clientId="formData.id" />
       </el-tab-pane>
-      <el-tab-pane label="销售记录" name="salesRecord">
-        <!-- TODO @芋艿：客户详情-销售记录 tab，依赖 WM 销售出库模块 -->
-        <el-empty description="功能开发中，敬请期待" />
+      <el-tab-pane label="销售记录" name="productSales" lazy>
+        <ClientProductSalesTab :clientId="formData.id" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -169,8 +170,11 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { MdClientApi, MdClientVO } from '@/api/mes/md/client'
+import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { CommonStatusEnum } from '@/utils/constants'
-import { generateRandomStr } from '@/utils'
+import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import ClientProductSalesLineTab from './ClientProductSalesLineTab.vue'
+import ClientProductSalesTab from './ClientProductSalesTab.vue'
 
 defineOptions({ name: 'MdClientForm' })
 
@@ -178,10 +182,18 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
+const dialogTitle = computed(() => {
+  const titles: Record<string, string> = {
+    create: '新增客户',
+    update: '修改客户',
+    detail: '查看客户'
+  }
+  return titles[formType.value] || formType.value
+})
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const activeTab = ref('item') // 当前激活的 tab
+const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
+const isDetail = computed(() => formType.value === 'detail') // 是否详情模式（只读）
+const activeTab = ref('productSalesLine') // 当前激活的 tab
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -238,18 +250,17 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 生成客户编码 */
-const generateCode = () => {
-  // TODO @芋艿：后续对接后端编码生成接口
-  formData.value.code = 'CL' + generateRandomStr(12)
+const generateCode = async () => {
+  formData.value.code = await AutoCodeRecordApi.generateAutoCode(MesAutoCodeRuleCode.MD_CLIENT_CODE)
 }
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
   formType.value = type
+  activeTab.value = 'productSalesLine'
   resetForm()
-  // 修改时，设置数据
+  // 修改/详情时，设置数据
   if (id) {
     formLoading.value = true
     try {
diff --git a/src/views/mes/md/client/index.vue b/src/views/mes/md/client/index.vue
index edccfbf70..bd681a81b 100644
--- a/src/views/mes/md/client/index.vue
+++ b/src/views/mes/md/client/index.vue
@@ -35,6 +35,15 @@
           class="!w-240px"
         />
       </el-form-item>
+      <el-form-item label="英文名称" prop="englishName">
+        <el-input
+          v-model="queryParams.englishName"
+          placeholder="请输入客户英文名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
       <el-form-item label="客户类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择客户类型" clearable class="!w-240px">
           <el-option
@@ -90,7 +99,13 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="客户编码" align="center" prop="code" />
+      <el-table-column label="客户编码" align="center" prop="code">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
+            {{ scope.row.code }}
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="客户名称" align="center" prop="name" width="150" />
       <el-table-column label="客户简称" align="center" prop="nickname" />
       <el-table-column label="客户类型" align="center" prop="type">
@@ -171,6 +186,7 @@ const queryParams = reactive({
   code: undefined,
   name: undefined,
   nickname: undefined,
+  englishName: undefined,
   type: undefined,
   status: undefined
 })
diff --git a/src/views/mes/utils/constants.ts b/src/views/mes/utils/constants.ts
index 9f1171b52..28931eedd 100644
--- a/src/views/mes/utils/constants.ts
+++ b/src/views/mes/utils/constants.ts
@@ -415,6 +415,7 @@ export const MesAutoCodePaddedMethodEnum = {
 export const MesAutoCodeRuleCode = {
   MD_ITEM_CODE: 'MD_ITEM_CODE', // 物料编码
   MD_VENDOR_CODE: 'MD_VENDOR_CODE', // 供应商编码
+  MD_CLIENT_CODE: 'MD_CLIENT_CODE', // 客户编码
   WM_SN_CODE: 'WM_SN_CODE', // SN 码
   WM_PACKAGE_CODE: 'WM_PACKAGE_CODE', // 装箱单编码
   WM_BATCH_CODE: 'WM_BATCH_CODE', // 批次编码