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