feat: 代码优化

.cursor/rules/factory-rule.mdc

@@ -10,21 +10,21 @@ Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
 
 ## UI 相关编码要求
 
--- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
--- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
--- `ElDialog`组件中`footer`插槽都放在中间位置
+- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
+- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
+- `ElDialog`组件中`footer`插槽都放在中间位置
 
 ## 接口相关
 
--- 所有接口统一放在 `src/api/`目录下，当模块多时，可按模块创建子目录，例如 `src/api/factoryOrderNew/xxx1`、`src/api/factoryOrderNew/xxx2`、`src/api/factoryOrderNew/xxx3`
+- 所有接口统一放在 `src/api/`目录下，当模块多时，可按模块创建子目录，例如 `src/api/factoryOrderNew/xxx1`、`src/api/factoryOrderNew/xxx2`、`src/api/factoryOrderNew/xxx3`
 
 ## TS 类型定义相关
 
--- 所有类型定义统一放在 `src/types/`目录下，当模块多时，可按模块创建子目录，例如 `src/types/factoryOrderNew/xxx1`、`src/types/factoryOrderNew/xxx2`、`src/types/factoryOrderNew/xxx3`
+- 所有类型定义统一放在 `src/types/`目录下，当模块多时，可按模块创建子目录，例如 `src/types/factoryOrderNew/xxx1`、`src/types/factoryOrderNew/xxx2`、`src/types/factoryOrderNew/xxx3`
 
 ## 代码编写原则
 
--- 只编写解决问题所需的最少代码
--- 避免冗余实现和过渡设计
--- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护
--- 封装组件时，要考虑组件的复用性
+- 只编写解决问题所需的最少代码
+- 避免冗余实现和过渡设计
+- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护
+- 封装组件时，要考虑组件的复用性

src/api/factoryOrderNew.ts

@@ -36,7 +36,7 @@ export function getFactoryOrderNewListApi(
 
 export function getFactoryOrderNewDetailApi(id: number | string) {
   return axios.get<never, BaseRespData<ProductListData[]>>(
-    'factory/orderNew/detail',
+    'factory/podOrder/get',
     {
       params: { id },
     },
@@ -45,7 +45,7 @@ export function getFactoryOrderNewDetailApi(id: number | string) {
 
 export function getFactoryOrderNewLogApi(id: number | string) {
   return axios.get<never, BaseRespData<LogListData[]>>(
-    'factory/orderNew/log',
+    'factory/podOrder/getLog',
     {
       params: { id },
     },
@@ -167,13 +167,51 @@ export function pickFailApi(ids: (number | string)[]) {
   )
 }
 
-export function getRestockListApi(params: {
-  stockSku?: string
-  styleNo?: string
-}) {
-  return axios.get<never, BaseRespData<RestockData[]>>(
-    'factory/orderNew/restockList',
-    { params },
+export function getCardLayoutListApi(
+  data: Record<string, unknown>,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<FactoryOrderNewListData>>(
+    'factory/podOrderBatchDownload/list_page',
+    { ...data, currentPage, pageSize },
+  )
+}
+
+export function getSuspendListApi(
+  data: SearchForm,
+  currentPage: number,
+  pageSize: number,
+  statusCode?: string,
+) {
+  return axios.post<never, BasePaginationData<FactoryOrderNewListData>>(
+    'factory/podOrderPauseControl/list_page',
+    { ...data, currentPage, pageSize, statusCode },
+  )
+}
+
+export function getSuspendDetailApi(id: number | string) {
+  return axios.get<never, BaseRespData<ProductListData[]>>(
+    'factory/podOrderPauseControl/get',
+    { params: { id } },
+  )
+}
+
+export function getSuspendLogApi(id: number | string) {
+  return axios.get<never, BaseRespData<LogListData[]>>(
+    'factory/podOrderPauseControl/getLog',
+    { params: { id } },
+  )
+}
+
+export function getRestockListApi(
+  data: Record<string, unknown>,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<RestockData>>(
+    'factory/podOrderBatchDownload/list_page',
+    { ...data, currentPage, pageSize },
   )
 }
 
@@ -183,7 +221,7 @@ export function getBatchManageListApi(
   pageSize: number,
 ) {
   return axios.post<never, BasePaginationData<BatchManageData>>(
-    'factory/orderNew/batchManage/list_page',
+    'factory/podOrderBatchDownload/list_page',
     { ...data, currentPage, pageSize },
   )
 }

src/types/api/factoryOrderNew.ts

@@ -8,13 +8,13 @@ export interface StatusTreeNode {
 export interface SearchForm {
   platform?: string
   craftCode?: string | string[]
-  stockSku?: string
-  styleNo?: string
-  batchNo?: string
+  thirdSkuCode?: string
+  supplierProductNo?: string
+  batchArrangeNumber?: string
   orderNumber?: string
   customerOrderNumber?: string
   shopOrderNumber?: string
-  productType?: string | number | (string | number)[]
+  productMark?: string | number | (string | number)[]
   multi?: boolean | null
   timeType?: number | null
   startTime?: string | null
@@ -28,11 +28,10 @@ export interface SearchForm {
   replaceShipment?: number | string
   shipmentType?: number | string
   tagsIdArr?: string[]
-  productMark?: string
   source?: string
   size?: string
   logisticsCompanyCode?: string
-  blocking?: boolean
+  interceptStatus?: boolean
   standardDesignImage?: number
 }
 

src/views/order/factoryOrderNew/component/BatchManageTable.vue

@@ -14,7 +14,7 @@
         </ElFormItem>
         <ElFormItem label="创建人">
           <ElSelect
-            v-model="filterForm.creator"
+            v-model="filterForm.employeeId"
             placeholder="请选择"
             clearable
             filterable
@@ -24,7 +24,7 @@
               v-for="item in employeeList"
               :key="item.id"
               :label="item.account"
-              :value="item.account"
+              :value="item.id"
             />
           </ElSelect>
         </ElFormItem>
@@ -50,35 +50,35 @@
             clearable
             style="width: 120px"
           >
-            <ElOption label="未下载" value="NOT_DOWNLOADED" />
-            <ElOption label="已下载" value="DOWNLOADED" />
+            <ElOption label="未下载" :value="0" />
+            <ElOption label="已下载" :value="1" />
           </ElSelect>
         </ElFormItem>
         <ElFormItem label="排版状态">
           <ElSelect
-            v-model="filterForm.layoutStatus"
+            v-model="filterForm.syntheticStatus"
             placeholder="请选择"
             clearable
             style="width: 120px"
           >
-            <ElOption label="未排版" value="NOT_LAYOUT" />
-            <ElOption label="已排版" value="LAYOUT" />
+            <ElOption label="否" :value="0" />
+            <ElOption label="是" :value="1" />
           </ElSelect>
         </ElFormItem>
         <ElFormItem label="自动排版">
           <ElSelect
-            v-model="filterForm.autoLayout"
+            v-model="filterForm.automaticComposing"
             placeholder="请选择"
             clearable
             style="width: 120px"
           >
-            <ElOption label="是" :value="true" />
-            <ElOption label="否" :value="false" />
+            <ElOption label="是" :value="1" />
+            <ElOption label="否" :value="0" />
           </ElSelect>
         </ElFormItem>
         <ElFormItem label="批次号">
           <ElInput
-            v-model="filterForm.batchNo"
+            v-model="filterForm.batchArrangeNumber"
             placeholder="批次号"
             clearable
             style="width: 140px"
@@ -161,7 +161,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew'
 import type { BatchManageData } from '@/types/api/factoryOrderNew'
 import type { PaginationData } from '@/types/api'
-import type { CustomColumn } from '@/types/table'
 import TableView from '@/components/TableView.vue'
 import ArrangeDialog from './ArrangeDialog.vue'
 import { getEmployeeListApi } from '@/api/common'
@@ -205,8 +204,7 @@ const getStandardDesignImageText = (value: number): string => {
   const map: Record<number, string> = { 0: '否', 1: '是', 2: '混合' }
   return map[value] ?? '-'
 }
-const columns: CustomColumn<BatchManageData>[] = [
-  [
+const columns = [
   {
     label: '批次号',
     prop: 'batchArrangeNum',
@@ -218,11 +216,11 @@ const columns: CustomColumn<BatchManageData>[] = [
     slot: 'downloadStatus',
     width: 90,
     align: 'center',
-      render: (item: BatchManageData) => {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
       return (
         <div>
-            <el-tag type={item.downloadStatus ? 'success' : 'danger'}>
-              {item.downloadStatus ? '已下载' : '未下载'}
+          <el-tag type={row?.downloadStatus ? 'success' : 'danger'}>
+            {row?.downloadStatus ? '已下载' : '未下载'}
           </el-tag>
         </div>
       )
@@ -251,23 +249,21 @@ const columns: CustomColumn<BatchManageData>[] = [
     width: 150,
     prop: 'craftType',
     align: 'center',
-      render: (item: BatchManageData) => {
-        if (!item.craftType) {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
+      if (row && !row.craftType) {
         return (
           <div>
             <span>-</span>
           </div>
         )
       }
-        const labels = item.craftType
-          .split(',')
-          .map((type) => type.trim())
-          .map(
-            (type) =>
+      const labels: string[] = row?.craftType?.split(',') ?? []
+        .map((type: string) => type.trim())
+        .map((type: string) =>
           processType.value.find((e: ProcessTypeData) => e.value === type)
             ?.label || type,
         )
-          .filter(Boolean)
+        .filter((type: string | undefined) => type !== undefined)
 
       return (
         <div>
@@ -281,11 +277,11 @@ const columns: CustomColumn<BatchManageData>[] = [
     minWidth: 180,
     prop: 'standardDesignImage',
     align: 'center',
-      render: (item: BatchManageData) => {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
       return (
         <div>
           <span>
-              {getStandardDesignImageText(item.standardDesignImage ?? 0)}
+            {getStandardDesignImageText(row?.standardDesignImage ?? 0)}
           </span>
         </div>
       )
@@ -296,10 +292,10 @@ const columns: CustomColumn<BatchManageData>[] = [
     minWidth: 250,
     prop: 'failReason',
     align: 'left',
-      render: (item: BatchManageData) => {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
       return (
         <div>
-            <span v-html={item.failReason}></span>
+          <span v-html={row?.failReason}></span>
         </div>
       )
     },
@@ -321,10 +317,10 @@ const columns: CustomColumn<BatchManageData>[] = [
     width: 85,
     prop: 'automaticComposing',
     align: 'center',
-      render: (item: BatchManageData) => {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
       return (
         <div>
-            <span>{item.automaticComposing ? '是' : '否'}</span>
+          <span>{row?.automaticComposing ? '是' : '否'}</span>
         </div>
       )
     },
@@ -334,10 +330,10 @@ const columns: CustomColumn<BatchManageData>[] = [
     width: 140,
     prop: 'composingParam',
     align: 'center',
-      render: (item: BatchManageData) => {
+    render: ({ row }: { row: BatchManageData; index: number }) => {
       return (
         <div>
-            <span>{item.composingParam?.split(';').join('\n')}</span>
+          <span>{row?.composingParam?.split(';').join('\n')}</span>
         </div>
       )
     },
@@ -350,20 +346,16 @@ const columns: CustomColumn<BatchManageData>[] = [
     fixed: 'right',
     prop: 'operate',
   },
-  ],
 ]
 
 const filterForm = reactive({
   createTimeRange: [] as string[],
-  startTimeRange: [] as string[],
-  finishTimeRange: [] as string[],
-  creator: '',
-  arrangeGroup: '',
+  employeeId: '' as string | number,
   craftType: '',
-  downloadStatus: '',
-  layoutStatus: '',
-  autoLayout: '' as string | boolean,
-  batchNo: '',
+  downloadStatus: '' as string | number,
+  syntheticStatus: '' as string | number,
+  automaticComposing: '' as string | number,
+  batchArrangeNumber: '',
 })
 
 const {
@@ -378,7 +370,13 @@ const {
 } = usePageList<BatchManageData>({
   initPageSize: 50,
   query: async (current, size) => {
-    const res = await getBatchManageListApi({ ...filterForm }, current, size)
+    const { createTimeRange, ...rest } = filterForm
+    const params: Record<string, unknown> = { ...rest }
+    if (createTimeRange?.length === 2) {
+      params.startTime = createTimeRange[0]
+      params.endTime = createTimeRange[1]
+    }
+    const res = await getBatchManageListApi(params, current, size)
     return (res.data || {
       total: 0,
       size,

src/views/order/factoryOrderNew/component/CardLayout.vue

 <template>
-  <div class="card-layout">
-    <div v-if="data.length > 0" class="card-grid">
+  <div v-loading="loading" class="card-layout">
+    <div v-if="cardData.length > 0" class="card-grid">
       <div
-        v-for="item in data"
+        v-for="item in cardData"
         :key="item.id"
         class="card-grid-item"
         @click="handleCardClick(item)"
@@ -115,23 +115,26 @@
         条数据
       </div>
       <ElPagination
-        v-model:current-page="currentPageModel"
-        v-model:page-size="pageSizeModel"
+        :current-page="currentPage"
+        :page-size="pageSize"
         :page-sizes="[50, 100, 200, 300]"
         background
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
         style="margin: 0 auto"
-        @size-change="$emit('page-size-change', $event)"
-        @current-change="$emit('current-page-change', $event)"
+        @size-change="onPageSizeChange"
+        @current-change="onCurrentPageChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
+import { getCardLayoutListApi } from '@/api/factoryOrderNew'
+import type { PaginationData } from '@/types/api'
+import usePageList from '@/utils/hooks/usePageList'
 
 interface CardItem {
   id: number | string
@@ -139,29 +142,38 @@ interface CardItem {
 }
 
 const props = defineProps<{
-  data: CardItem[]
-  total: number
-  currentPage: number
-  pageSize: number
+  status: string
+  queryPayload: Record<string, unknown>
+  initPageSize?: number
 }>()
 
 const emit = defineEmits<{
-  'page-size-change': [size: number]
-  'current-page-change': [page: number]
   'selection-change': [items: CardItem[]]
 }>()
 
-const selectedItems = ref<CardItem[]>([])
-
-const currentPageModel = computed({
-  get: () => props.currentPage,
-  set: (val) => emit('current-page-change', val),
-})
-const pageSizeModel = computed({
-  get: () => props.pageSize,
-  set: (val) => emit('page-size-change', val),
+const {
+  loading,
+  currentPage,
+  pageSize,
+  total,
+  data: cardData,
+  onCurrentPageChange,
+  onPageSizeChange,
+  refresh,
+} = usePageList<CardItem>({
+  initPageSize: props.initPageSize || 100,
+  query: async (current, size) => {
+    const payload = {
+      ...props.queryPayload,
+      statusCode: props.status === 'ALL' ? undefined : props.status,
+    }
+    const res = await getCardLayoutListApi(payload, current, size)
+    return res.data as unknown as PaginationData<CardItem>
+  },
 })
 
+const selectedItems = ref<CardItem[]>([])
+
 const isSelected = (item: CardItem) =>
   selectedItems.value.some((s) => s.id === item.id)
 
@@ -187,7 +199,7 @@ const clearSelection = () => {
 
 const getSelectedIds = () => selectedItems.value.map((i) => i.id)
 
-defineExpose({ clearSelection, getSelectedIds })
+defineExpose({ clearSelection, getSelectedIds, refresh })
 </script>
 
 <style scoped lang="scss">

src/views/order/factoryOrderNew/component/WaitingRestockTable.vue

@@ -77,7 +77,6 @@ import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew'
 import type { RestockData } from '@/types/api/factoryOrderNew'
-import type { PaginationData } from '@/types/api'
 import type { CustomColumn } from '@/types/table'
 import TableView from '@/components/TableView.vue'
 import usePageList from '@/utils/hooks/usePageList'
@@ -99,18 +98,15 @@ const {
 } = usePageList<RestockData>({
   initPageSize: 50,
   query: async (current, size) => {
-    const res = await getRestockListApi({
+    const res = await getRestockListApi(
+      {
         stockSku: filterForm.stockSku || undefined,
         styleNo: filterForm.styleNo || undefined,
-    })
-    const records = res.data || []
-    const start = (current - 1) * size
-    return {
-      total: records.length,
-      size,
+      },
       current,
-      records: records.slice(start, start + size),
-    } as PaginationData<RestockData>
+      size,
+    )
+    return res.data
   },
 })