Skip to content

F
factory_front
Commit 42894f5e by qinjianhui
Options

fix: 样式修改

parent ef957654
Showing with 105 additions and 134 deletions
components.d.ts
...@@ -21,7 +21,6 @@ declare module 'vue' { ...@@ -21,7 +21,6 @@ declare module 'vue' {
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
...@@ -33,7 +32,6 @@ declare module 'vue' { ...@@ -33,7 +32,6 @@ declare module 'vue' {
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
......
src/components/CommonCard.vue
...@@ -76,36 +76,40 @@ import type { TypesettingListData } from '../types/api/typesetting' ...@@ -76,36 +76,40 @@ import type { TypesettingListData } from '../types/api/typesetting'
// 定义通用字段接口，用于处理动态属性 // 定义通用字段接口，用于处理动态属性
interface CommonFields { interface CommonFields {
[key: string]: unknown; [key: string]: unknown
variantImage?: string; variantImage?: string
mainImage?: string; mainImage?: string
sku?: string; sku?: string
productName?: string; productName?: string
} }
// 定义图片列表项接口 // 定义图片列表项接口
interface ImageListItem { interface ImageListItem {
[key: string]: unknown; [key: string]: unknown
imagePath?: string; imagePath?: string
} }
// 创建一个工具类型，用于使用字符串索引访问对象属性 // 创建一个工具类型，用于使用字符串索引访问对象属性
type IndexableObject = Record<string, unknown>; type IndexableObject = Record<string, unknown>
// 扩展现有类型以确保它们有通用字段 // 扩展现有类型以确保它们有通用字段
type CardItem = PodProductList | CardOrderData | TypesettingListData | CommonFields; type CardItem =
| PodProductList
| CardOrderData
| TypesettingListData
| CommonFields
// 定义 props 类型 // 定义 props 类型
interface Props { interface Props {
cardItem: CardItem; cardItem: CardItem
active?: boolean; active?: boolean
showSelectIcon?: boolean; showSelectIcon?: boolean
showSku?: boolean; showSku?: boolean
showProductInfo?: boolean; showProductInfo?: boolean
showImageList?: boolean; showImageList?: boolean
imageField?: string; imageField?: string
imageListField?: string; imageListField?: string
imagePathField?: string; imagePathField?: string
} }
// 定义默认值 // 定义默认值
...@@ -122,45 +126,45 @@ const props = withDefaults(defineProps<Props>(), { ...@@ -122,45 +126,45 @@ const props = withDefaults(defineProps<Props>(), {
// 获取主图片源 // 获取主图片源
const mainImageSrc = computed<string>(() => { const mainImageSrc = computed<string>(() => {
const item = props.cardItem as IndexableObject; const item = props.cardItem as IndexableObject
// 使用索引访问避免联合类型的属性访问问题 // 使用索引访问避免联合类型的属性访问问题
if ( if (
props.imageField === 'variantImage' && props.imageField === 'variantImage' &&
typeof item[props.imageField] === 'string' typeof item[props.imageField] === 'string'
) { ) {
return item[props.imageField] as string; return item[props.imageField] as string
} }
if ( if (
props.imageField === 'mainImage' && props.imageField === 'mainImage' &&
typeof item[props.imageField] === 'string' typeof item[props.imageField] === 'string'
) { ) {
return item[props.imageField] as string; return item[props.imageField] as string
} }
// 默认返回空字符串 // 默认返回空字符串
return ''; return ''
}) })
// 获取图片列表 // 获取图片列表
const imageList = computed<ImageListItem[]>(() => { const imageList = computed<ImageListItem[]>(() => {
const item = props.cardItem as IndexableObject; const item = props.cardItem as IndexableObject
const list = item[props.imageListField]; const list = item[props.imageListField]
return Array.isArray(list) ? list as ImageListItem[] : []; return Array.isArray(list) ? (list as ImageListItem[]) : []
}) })
// 判断是否有图片列表 // 判断是否有图片列表
const hasImageList = computed<boolean>(() => { const hasImageList = computed<boolean>(() => {
return imageList.value.length > 0; return imageList.value.length > 0
}) })
// 获取图片列表项的图片路径 // 获取图片列表项的图片路径
function getItemImagePath(item: IndexableObject): string { function getItemImagePath(item: IndexableObject): string {
return (item[props.imagePathField] as string) || ''; return (item[props.imagePathField] as string) || ''
} }
const copy = (text: string) => { const copy = (text: string) => {
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text)
ElMessage.success('复制成功'); ElMessage.success('复制成功')
} }
</script> </script>
...@@ -174,11 +178,16 @@ const copy = (text: string) => { ...@@ -174,11 +178,16 @@ const copy = (text: string) => {
.commodity-card-image { .commodity-card-image {
position: relative; position: relative;
border: 1px solid #eee;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.img_top_left { .img_top_left {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
display: flex;
align-items: center;
gap: 4px;
} }
.img_top_right { .img_top_right {
......
src/views/order/podUs/index.vue
...@@ -1588,8 +1588,8 @@ ...@@ -1588,8 +1588,8 @@
</el-tooltip> </el-tooltip>
</template> </template>
<template <template
#top_right
v-if="['ZPZY', 'CXZY', 'THZY'].includes(cardItem.craftCode as string)" v-if="['ZPZY', 'CXZY', 'THZY'].includes(cardItem.craftCode as string)"
#top_right
> >
<img <img
:src="`/images/pic/${cardItem.craftCode}.png`" :src="`/images/pic/${cardItem.craftCode}.png`"
...@@ -1609,25 +1609,9 @@ ...@@ -1609,25 +1609,9 @@
> >
{{ cardItem?.factorySubOrderNumber }} {{ cardItem?.factorySubOrderNumber }}
</span> </span>
<el-icon
class="icon"
style="margin-left: 3px"
size="14"
@click="copy(cardItem?.factorySubOrderNumber || '')"
>
<DocumentCopy />
</el-icon>
</template> </template>
<template #operations> <template #operations>
<div
style="position: absolute; top: -35px; right: 2px"
v-if="cardItem.platform"
>
<img
:src="`/images/icon/${getPlatformImg(cardItem.platform)}`"
style="height: 30px"
/>
</div>
<div <div
v-if="cardItem?.customizedQuantity" v-if="cardItem?.customizedQuantity"
class="customizedQuantity" class="customizedQuantity"
...@@ -1669,6 +1653,15 @@ ...@@ -1669,6 +1653,15 @@
/> />
</div> </div>
</div> </div>
<div
v-if="cardItem.platform"
>
<img
:src="`/images/icon/${getPlatformImg(cardItem.platform)}`"
style="height: 30px"
/>
</div>
</div> </div>
</template> </template>
<template #info> <template #info>
...@@ -1702,20 +1695,15 @@ ...@@ -1702,20 +1695,15 @@
}} }}
</span> </span>
</div> </div>
<div class="grid-item"> <div
class="grid-item"
@click="copy(cardItem?.variantSku || '')"
>
<div <div
:title="`variant SKU: ${cardItem?.variantSku || ''}`" :title="`variant SKU: ${cardItem?.variantSku || ''}`"
class="grid-item-value" class="grid-item-value"
> >
<div class="orderNumber">{{ cardItem?.variantSku }}</div> <div class="orderNumber">{{ cardItem?.variantSku }}</div>
<el-icon
class="icon"
style="margin-left: 3px"
size="14"
@click="copy(cardItem?.variantSku || '')"
>
<DocumentCopy />
</el-icon>
</div> </div>
</div> </div>
<div v-if="status !== 'TO_BE_ARRANGE'" class="grid-item"> <div v-if="status !== 'TO_BE_ARRANGE'" class="grid-item">
...@@ -1724,12 +1712,19 @@ ...@@ -1724,12 +1712,19 @@
{{ cardItem?.replenishmentNum || 0 }} {{ cardItem?.replenishmentNum || 0 }}
</span> </span>
</div> </div>
<div
<!-- <div class="grid-item"> class="grid-item"
<span title="Variant SKU" class="grid-item-value"> @click="copy(cardItem?.thirdSkuCode || '')"
{{ cardItem?.variantSku }} >
</span> <div
</div> --> :title="`库存SKU:${cardItem?.thirdSkuCode || ''}`"
class="grid-item-value"
>
<div class="orderNumber">
{{ cardItem?.thirdSkuCode }}
</div>
</div>
</div>
<div <div
class="grid-item" class="grid-item"
:title="`工艺:${cardItem?.craftName || ''}`" :title="`工艺:${cardItem?.craftName || ''}`"
...@@ -1739,23 +1734,15 @@ ...@@ -1739,23 +1734,15 @@
{{ cardItem?.craftName }} {{ cardItem?.craftName }}
</span> </span>
</div> </div>
<div class="grid-item"> <div
<div class="grid-item"
:title="`库存SKU:${cardItem?.thirdSkuCode || ''}`" :title="`店铺单号:${cardItem?.shopNumber || ''}`"
class="grid-item-value" @click="copy(cardItem?.shopNumber || '')"
> >
<div class="grid-item-value">
<div class="orderNumber"> <div class="orderNumber">
{{ cardItem?.thirdSkuCode }} {{ cardItem?.shopNumber }}
</div> </div>
<el-icon
class="icon"
style="margin-left: 3px"
size="14"
@click="copy(cardItem?.thirdSkuCode || '')"
>
<DocumentCopy />
</el-icon>
</div> </div>
</div> </div>
<div class="grid-item"> <div class="grid-item">
...@@ -1767,6 +1754,17 @@ ...@@ -1767,6 +1754,17 @@
{{ cardItem?.supplierProductNo }} {{ cardItem?.supplierProductNo }}
</span> </span>
</div> </div>
<div
class="grid-item"
@click="copy(cardItem?.factoryOrderNumber || '')"
>
<div
:title="`订单号:${cardItem?.factoryOrderNumber}`"
class="grid-item-value orderNumber"
>
{{ cardItem?.factoryOrderNumber }}
</div>
</div>
<div class="grid-item"> <div class="grid-item">
<span class="grid-item-label">货号：</span> <span class="grid-item-label">货号：</span>
<span <span
...@@ -1777,24 +1775,7 @@ ...@@ -1777,24 +1775,7 @@
</span> </span>
</div> </div>
<div
class="grid-item"
:title="`店铺单号:${cardItem?.shopNumber || ''}`"
>
<div class="grid-item-value">
<div class="orderNumber">
{{ cardItem?.shopNumber }}
</div>
<el-icon
class="icon"
style="margin-left: 3px; flex-shrink: 0"
size="14"
@click="copy(cardItem?.shopNumber || '')"
>
<DocumentCopy />
</el-icon>
</div>
</div>
<!-- <div class="grid-item" title="订单号"> <!-- <div class="grid-item" title="订单号">
<span <span
class="grid-item-value" class="grid-item-value"
...@@ -1804,42 +1785,18 @@ ...@@ -1804,42 +1785,18 @@
</span> </span>
</div> --> </div> -->
<div class="grid-item">
<div
:title="`订单号:${cardItem?.factoryOrderNumber}`"
class="grid-item-value orderNumber"
>
{{ cardItem?.factoryOrderNumber }}
<el-icon
class="icon"
style="margin-left: 3px"
size="14"
@click.stop="
copy(String(cardItem?.factoryOrderNumber || ''))
"
>
<DocumentCopy />
</el-icon>
</div>
</div>
<div <div
v-if="cardItem.batchArrangeNumber" v-if="cardItem.batchArrangeNumber"
class="grid-item" class="grid-item"
:title="`批次号:${cardItem?.batchArrangeNumber || ''}`" :title="`批次号:${cardItem?.batchArrangeNumber || ''}`"
@click="copy(cardItem?.batchArrangeNumber || '')"
> >
<div class="grid-item-value"> <div class="grid-item-value">
<div class="orderNumber"> <div class="orderNumber">
{{ cardItem?.batchArrangeNumber }} {{ cardItem?.batchArrangeNumber }}
</div> </div>
</div> </div>
<el-icon
class="icon"
style="margin-left: 3px"
size="14"
@click="copy(cardItem?.batchArrangeNumber || '')"
>
<DocumentCopy />
</el-icon>
</div> </div>
<div v-if="cardItem.isReplenishment" class="grid-item"> <div v-if="cardItem.isReplenishment" class="grid-item">
<el-tag size="small" type="danger" effect="dark" <el-tag size="small" type="danger" effect="dark"
...@@ -2403,6 +2360,7 @@ import { ...@@ -2403,6 +2360,7 @@ import {
LogisticsFormData, LogisticsFormData,
CraftListData, CraftListData,
ExportParams, ExportParams,
InterceptStateGroupData,
} from '@/types/api/podUsOrder' } from '@/types/api/podUsOrder'
import usePageList from '@/utils/hooks/usePageList' import usePageList from '@/utils/hooks/usePageList'
import { useValue } from '@/utils/hooks/useValue' import { useValue } from '@/utils/hooks/useValue'
...@@ -3032,19 +2990,18 @@ const loadTabData = async () => { ...@@ -3032,19 +2990,18 @@ const loadTabData = async () => {
) )
// 发货拦截数量 // 发货拦截数量
const shipmentCount = (statusRes.data as any)?.shipment const shipmentCount = (statusRes.data as InterceptStateGroupData)?.shipment
? Object.values((statusRes.data as any).shipment).reduce( ? Object.values(
(sum: number, value: any) => sum + (Number(value) || 0), (statusRes.data as InterceptStateGroupData).shipment,
0, ).reduce((sum: number, value: unknown) => sum + (Number(value) || 0), 0)
)
: 0 : 0
// 生产拦截数量 // 生产拦截数量
const productionCount = (statusRes.data as any)?.production const productionCount = (statusRes.data as InterceptStateGroupData)
? Object.values((statusRes.data as any).production).reduce( ?.production
(sum: number, value: any) => sum + (Number(value) || 0), ? Object.values(
0, (statusRes.data as InterceptStateGroupData).production,
) ).reduce((sum: number, value: unknown) => sum + (Number(value) || 0), 0)
: 0 : 0
tabsNav.value.splice(completeIndex + 1, 0, { tabsNav.value.splice(completeIndex + 1, 0, {
...@@ -5186,6 +5143,8 @@ useRouter().beforeEach((to, from, next) => { ...@@ -5186,6 +5143,8 @@ useRouter().beforeEach((to, from, next) => {
.images-position { .images-position {
display: flex; display: flex;
gap: 5px; gap: 5px;
flex: 1;
overflow-y: auto;
.item-image { .item-image {
cursor: pointer; cursor: pointer;
...@@ -5393,4 +5352,9 @@ useRouter().beforeEach((to, from, next) => { ...@@ -5393,4 +5352,9 @@ useRouter().beforeEach((to, from, next) => {
.el-timeline-item__timestamp.is-top { .el-timeline-item__timestamp.is-top {
color: #409eff; color: #409eff;
} }
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
</style> </style>
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