Commit 788c413a by qinjianhui

feat: 代码优化

parent f7899557
......@@ -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`
## 代码编写原则
-- 只编写解决问题所需的最少代码
-- 避免冗余实现和过渡设计
-- 实现一个复杂功能时,需要合理拆分组件,使每个文件的代码更易维护
-- 封装组件时,要考虑组件的复用性
- 只编写解决问题所需的最少代码
- 避免冗余实现和过渡设计
- 实现一个复杂功能时,需要合理拆分组件,使每个文件的代码更易维护
- 封装组件时,要考虑组件的复用性
......@@ -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 },
)
}
......
......@@ -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
}
......
<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">
......
......@@ -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({
stockSku: filterForm.stockSku || undefined,
styleNo: filterForm.styleNo || undefined,
})
const records = res.data || []
const start = (current - 1) * size
return {
total: records.length,
size,
const res = await getRestockListApi(
{
stockSku: filterForm.stockSku || undefined,
styleNo: filterForm.styleNo || undefined,
},
current,
records: records.slice(start, start + size),
} as PaginationData<RestockData>
size,
)
return res.data
},
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment