Skip to content

F
factory_front
Commit 788c413a by qinjianhui
Options

feat: 代码优化

parent f7899557
Showing with 225 additions and 186 deletions
.cursor/rules/factory-rule.mdc
...@@ -10,21 +10,21 @@ Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite ...@@ -10,21 +10,21 @@ Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
## UI 相关编码要求 ## UI 相关编码要求
-- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽 - 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
-- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽 - 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
-- `ElDialog`组件中`footer`插槽都放在中间位置 - `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 类型定义相关 ## 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( ...@@ -36,7 +36,7 @@ export function getFactoryOrderNewListApi(
export function getFactoryOrderNewDetailApi(id: number | string) { export function getFactoryOrderNewDetailApi(id: number | string) {
return axios.get<never, BaseRespData<ProductListData[]>>( return axios.get<never, BaseRespData<ProductListData[]>>(
'factory/orderNew/detail', 'factory/podOrder/get',
{ {
params: { id }, params: { id },
}, },
...@@ -45,7 +45,7 @@ export function getFactoryOrderNewDetailApi(id: number | string) { ...@@ -45,7 +45,7 @@ export function getFactoryOrderNewDetailApi(id: number | string) {
export function getFactoryOrderNewLogApi(id: number | string) { export function getFactoryOrderNewLogApi(id: number | string) {
return axios.get<never, BaseRespData<LogListData[]>>( return axios.get<never, BaseRespData<LogListData[]>>(
'factory/orderNew/log', 'factory/podOrder/getLog',
{ {
params: { id }, params: { id },
}, },
...@@ -167,13 +167,51 @@ export function pickFailApi(ids: (number | string)[]) { ...@@ -167,13 +167,51 @@ export function pickFailApi(ids: (number | string)[]) {
) )
} }
export function getRestockListApi(params: { export function getCardLayoutListApi(
stockSku?: string data: Record<string, unknown>,
styleNo?: string currentPage: number,
}) { pageSize: number,
return axios.get<never, BaseRespData<RestockData[]>>( ) {
'factory/orderNew/restockList', return axios.post<never, BasePaginationData<FactoryOrderNewListData>>(
{ params }, '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( ...@@ -183,7 +221,7 @@ export function getBatchManageListApi(
pageSize: number, pageSize: number,
) { ) {
return axios.post<never, BasePaginationData<BatchManageData>>( return axios.post<never, BasePaginationData<BatchManageData>>(
'factory/orderNew/batchManage/list_page', 'factory/podOrderBatchDownload/list_page',
{ ...data, currentPage, pageSize }, { ...data, currentPage, pageSize },
) )
} }
......
src/types/api/factoryOrderNew.ts
...@@ -8,13 +8,13 @@ export interface StatusTreeNode { ...@@ -8,13 +8,13 @@ export interface StatusTreeNode {
export interface SearchForm { export interface SearchForm {
platform?: string platform?: string
craftCode?: string | string[] craftCode?: string | string[]
stockSku?: string thirdSkuCode?: string
styleNo?: string supplierProductNo?: string
batchNo?: string batchArrangeNumber?: string
orderNumber?: string orderNumber?: string
customerOrderNumber?: string customerOrderNumber?: string
shopOrderNumber?: string shopOrderNumber?: string
productType?: string | number | (string | number)[] productMark?: string | number | (string | number)[]
multi?: boolean | null multi?: boolean | null
timeType?: number | null timeType?: number | null
startTime?: string | null startTime?: string | null
...@@ -28,11 +28,10 @@ export interface SearchForm { ...@@ -28,11 +28,10 @@ export interface SearchForm {
replaceShipment?: number | string replaceShipment?: number | string
shipmentType?: number | string shipmentType?: number | string
tagsIdArr?: string[] tagsIdArr?: string[]
productMark?: string
source?: string source?: string
size?: string size?: string
logisticsCompanyCode?: string logisticsCompanyCode?: string
blocking?: boolean interceptStatus?: boolean
standardDesignImage?: number standardDesignImage?: number
} }
......
src/views/order/factoryOrderNew/component/BatchManageTable.vue
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</ElFormItem> </ElFormItem>
<ElFormItem label="创建人"> <ElFormItem label="创建人">
<ElSelect <ElSelect
v-model="filterForm.creator" v-model="filterForm.employeeId"
placeholder="请选择" placeholder="请选择"
clearable clearable
filterable filterable
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
v-for="item in employeeList" v-for="item in employeeList"
:key="item.id" :key="item.id"
:label="item.account" :label="item.account"
:value="item.account" :value="item.id"
/> />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
...@@ -50,35 +50,35 @@ ...@@ -50,35 +50,35 @@
clearable clearable
style="width: 120px" style="width: 120px"
> >
<ElOption label="未下载" value="NOT_DOWNLOADED" /> <ElOption label="未下载" :value="0" />
<ElOption label="已下载" value="DOWNLOADED" /> <ElOption label="已下载" :value="1" />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
<ElFormItem label="排版状态"> <ElFormItem label="排版状态">
<ElSelect <ElSelect
v-model="filterForm.layoutStatus" v-model="filterForm.syntheticStatus"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 120px" style="width: 120px"
> >
<ElOption label="未排版" value="NOT_LAYOUT" /> <ElOption label="否" :value="0" />
<ElOption label="已排版" value="LAYOUT" /> <ElOption label="是" :value="1" />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
<ElFormItem label="自动排版"> <ElFormItem label="自动排版">
<ElSelect <ElSelect
v-model="filterForm.autoLayout" v-model="filterForm.automaticComposing"
placeholder="请选择" placeholder="请选择"
clearable clearable
style="width: 120px" style="width: 120px"
> >
<ElOption label="是" :value="true" /> <ElOption label="是" :value="1" />
<ElOption label="否" :value="false" /> <ElOption label="否" :value="0" />
</ElSelect> </ElSelect>
</ElFormItem> </ElFormItem>
<ElFormItem label="批次号"> <ElFormItem label="批次号">
<ElInput <ElInput
v-model="filterForm.batchNo" v-model="filterForm.batchArrangeNumber"
placeholder="批次号" placeholder="批次号"
clearable clearable
style="width: 140px" style="width: 140px"
...@@ -161,7 +161,6 @@ import { ElMessage, ElMessageBox } from 'element-plus' ...@@ -161,7 +161,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew' import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew'
import type { BatchManageData } from '@/types/api/factoryOrderNew' import type { BatchManageData } from '@/types/api/factoryOrderNew'
import type { PaginationData } from '@/types/api' import type { PaginationData } from '@/types/api'
import type { CustomColumn } from '@/types/table'
import TableView from '@/components/TableView.vue' import TableView from '@/components/TableView.vue'
import ArrangeDialog from './ArrangeDialog.vue' import ArrangeDialog from './ArrangeDialog.vue'
import { getEmployeeListApi } from '@/api/common' import { getEmployeeListApi } from '@/api/common'
...@@ -205,8 +204,7 @@ const getStandardDesignImageText = (value: number): string => { ...@@ -205,8 +204,7 @@ const getStandardDesignImageText = (value: number): string => {
const map: Record<number, string> = { 0: '否', 1: '是', 2: '混合' } const map: Record<number, string> = { 0: '否', 1: '是', 2: '混合' }
return map[value] ?? '-' return map[value] ?? '-'
} }
const columns: CustomColumn<BatchManageData>[] = [ const columns = [
[
{ {
label: '批次号', label: '批次号',
prop: 'batchArrangeNum', prop: 'batchArrangeNum',
...@@ -218,11 +216,11 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -218,11 +216,11 @@ const columns: CustomColumn<BatchManageData>[] = [
slot: 'downloadStatus', slot: 'downloadStatus',
width: 90, width: 90,
align: 'center', align: 'center',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
return ( return (
<div> <div>
<el-tag type={item.downloadStatus ? 'success' : 'danger'}> <el-tag type={row?.downloadStatus ? 'success' : 'danger'}>
{item.downloadStatus ? '已下载' : '未下载'} {row?.downloadStatus ? '已下载' : '未下载'}
</el-tag> </el-tag>
</div> </div>
) )
...@@ -251,23 +249,21 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -251,23 +249,21 @@ const columns: CustomColumn<BatchManageData>[] = [
width: 150, width: 150,
prop: 'craftType', prop: 'craftType',
align: 'center', align: 'center',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
if (!item.craftType) { if (row && !row.craftType) {
return ( return (
<div> <div>
<span>-</span> <span>-</span>
</div> </div>
) )
} }
const labels = item.craftType const labels: string[] = row?.craftType?.split(',') ?? []
.split(',') .map((type: string) => type.trim())
.map((type) => type.trim()) .map((type: string) =>
.map(
(type) =>
processType.value.find((e: ProcessTypeData) => e.value === type) processType.value.find((e: ProcessTypeData) => e.value === type)
?.label || type, ?.label || type,
) )
.filter(Boolean) .filter((type: string | undefined) => type !== undefined)
return ( return (
<div> <div>
...@@ -281,11 +277,11 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -281,11 +277,11 @@ const columns: CustomColumn<BatchManageData>[] = [
minWidth: 180, minWidth: 180,
prop: 'standardDesignImage', prop: 'standardDesignImage',
align: 'center', align: 'center',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
return ( return (
<div> <div>
<span> <span>
{getStandardDesignImageText(item.standardDesignImage ?? 0)} {getStandardDesignImageText(row?.standardDesignImage ?? 0)}
</span> </span>
</div> </div>
) )
...@@ -296,10 +292,10 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -296,10 +292,10 @@ const columns: CustomColumn<BatchManageData>[] = [
minWidth: 250, minWidth: 250,
prop: 'failReason', prop: 'failReason',
align: 'left', align: 'left',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
return ( return (
<div> <div>
<span v-html={item.failReason}></span> <span v-html={row?.failReason}></span>
</div> </div>
) )
}, },
...@@ -321,10 +317,10 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -321,10 +317,10 @@ const columns: CustomColumn<BatchManageData>[] = [
width: 85, width: 85,
prop: 'automaticComposing', prop: 'automaticComposing',
align: 'center', align: 'center',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
return ( return (
<div> <div>
<span>{item.automaticComposing ? '是' : '否'}</span> <span>{row?.automaticComposing ? '是' : '否'}</span>
</div> </div>
) )
}, },
...@@ -334,10 +330,10 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -334,10 +330,10 @@ const columns: CustomColumn<BatchManageData>[] = [
width: 140, width: 140,
prop: 'composingParam', prop: 'composingParam',
align: 'center', align: 'center',
render: (item: BatchManageData) => { render: ({ row }: { row: BatchManageData; index: number }) => {
return ( return (
<div> <div>
<span>{item.composingParam?.split(';').join('\n')}</span> <span>{row?.composingParam?.split(';').join('\n')}</span>
</div> </div>
) )
}, },
...@@ -350,20 +346,16 @@ const columns: CustomColumn<BatchManageData>[] = [ ...@@ -350,20 +346,16 @@ const columns: CustomColumn<BatchManageData>[] = [
fixed: 'right', fixed: 'right',
prop: 'operate', prop: 'operate',
}, },
],
] ]
const filterForm = reactive({ const filterForm = reactive({
createTimeRange: [] as string[], createTimeRange: [] as string[],
startTimeRange: [] as string[], employeeId: '' as string | number,
finishTimeRange: [] as string[],
creator: '',
arrangeGroup: '',
craftType: '', craftType: '',
downloadStatus: '', downloadStatus: '' as string | number,
layoutStatus: '', syntheticStatus: '' as string | number,
autoLayout: '' as string | boolean, automaticComposing: '' as string | number,
batchNo: '', batchArrangeNumber: '',
}) })
const { const {
...@@ -378,7 +370,13 @@ const { ...@@ -378,7 +370,13 @@ const {
} = usePageList<BatchManageData>({ } = usePageList<BatchManageData>({
initPageSize: 50, initPageSize: 50,
query: async (current, size) => { 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 || { return (res.data || {
total: 0, total: 0,
size, size,
......
src/views/order/factoryOrderNew/component/CardLayout.vue
<template> <template>
<div class="card-layout"> <div v-loading="loading" class="card-layout">
<div v-if="data.length > 0" class="card-grid"> <div v-if="cardData.length > 0" class="card-grid">
<div <div
v-for="item in data" v-for="item in cardData"
:key="item.id" :key="item.id"
class="card-grid-item" class="card-grid-item"
@click="handleCardClick(item)" @click="handleCardClick(item)"
...@@ -115,23 +115,26 @@ ...@@ -115,23 +115,26 @@
条数据 条数据
</div> </div>
<ElPagination <ElPagination
v-model:current-page="currentPageModel" :current-page="currentPage"
v-model:page-size="pageSizeModel" :page-size="pageSize"
:page-sizes="[50, 100, 200, 300]" :page-sizes="[50, 100, 200, 300]"
background background
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style="margin: 0 auto" style="margin: 0 auto"
@size-change="$emit('page-size-change', $event)" @size-change="onPageSizeChange"
@current-change="$emit('current-page-change', $event)" @current-change="onCurrentPageChange"
/> />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { ref } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getCardLayoutListApi } from '@/api/factoryOrderNew'
import type { PaginationData } from '@/types/api'
import usePageList from '@/utils/hooks/usePageList'
interface CardItem { interface CardItem {
id: number | string id: number | string
...@@ -139,29 +142,38 @@ interface CardItem { ...@@ -139,29 +142,38 @@ interface CardItem {
} }
const props = defineProps<{ const props = defineProps<{
data: CardItem[] status: string
total: number queryPayload: Record<string, unknown>
currentPage: number initPageSize?: number
pageSize: number
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
'page-size-change': [size: number]
'current-page-change': [page: number]
'selection-change': [items: CardItem[]] 'selection-change': [items: CardItem[]]
}>() }>()
const selectedItems = ref<CardItem[]>([]) const {
loading,
const currentPageModel = computed({ currentPage,
get: () => props.currentPage, pageSize,
set: (val) => emit('current-page-change', val), total,
}) data: cardData,
const pageSizeModel = computed({ onCurrentPageChange,
get: () => props.pageSize, onPageSizeChange,
set: (val) => emit('page-size-change', val), 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) => const isSelected = (item: CardItem) =>
selectedItems.value.some((s) => s.id === item.id) selectedItems.value.some((s) => s.id === item.id)
...@@ -187,7 +199,7 @@ const clearSelection = () => { ...@@ -187,7 +199,7 @@ const clearSelection = () => {
const getSelectedIds = () => selectedItems.value.map((i) => i.id) const getSelectedIds = () => selectedItems.value.map((i) => i.id)
defineExpose({ clearSelection, getSelectedIds }) defineExpose({ clearSelection, getSelectedIds, refresh })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/order/factoryOrderNew/component/WaitingRestockTable.vue
...@@ -77,7 +77,6 @@ import { reactive } from 'vue' ...@@ -77,7 +77,6 @@ import { reactive } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew' import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew'
import type { RestockData } from '@/types/api/factoryOrderNew' import type { RestockData } from '@/types/api/factoryOrderNew'
import type { PaginationData } from '@/types/api'
import type { CustomColumn } from '@/types/table' import type { CustomColumn } from '@/types/table'
import TableView from '@/components/TableView.vue' import TableView from '@/components/TableView.vue'
import usePageList from '@/utils/hooks/usePageList' import usePageList from '@/utils/hooks/usePageList'
...@@ -99,18 +98,15 @@ const { ...@@ -99,18 +98,15 @@ const {
} = usePageList<RestockData>({ } = usePageList<RestockData>({
initPageSize: 50, initPageSize: 50,
query: async (current, size) => { query: async (current, size) => {
const res = await getRestockListApi({ const res = await getRestockListApi(
{
stockSku: filterForm.stockSku || undefined, stockSku: filterForm.stockSku || undefined,
styleNo: filterForm.styleNo || undefined, styleNo: filterForm.styleNo || undefined,
}) },
const records = res.data || []
const start = (current - 1) * size
return {
total: records.length,
size,
current, current,
records: records.slice(start, start + size), size,
} as PaginationData<RestockData> )
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