📖 MALL:优化商品列表的样式

This commit is contained in:
YunaiV 2024-01-10 13:51:00 +08:00
parent ab64a1d1df
commit a5d6d18b6a
2 changed files with 74 additions and 68 deletions

View File

@ -194,10 +194,10 @@ export const copyValueToTarget = (target, source) => {
*
* @param num
*/
export const formatToFraction = (num: number | string | undefined): number => {
if (typeof num === 'undefined') return 0
export const formatToFraction = (num: number | string | undefined): string => {
if (typeof num === 'undefined') return '0.00'
const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
return parseFloat((parsedNumber / 100).toFixed(2))
return (parsedNumber / 100.0).toFixed(2)
}
/**
@ -249,7 +249,7 @@ export const yuanToFen = (amount: string | number): number => {
/**
*
*/
export const fenToYuan = (price: string | number): number => {
export const fenToYuan = (price: string | number): string => {
return formatToFraction(price)
}

View File

@ -1,3 +1,4 @@
<!-- 商品中心 - 商品列表 -->
<template>
<!-- 搜索工作栏 -->
<ContentWrap>
@ -125,27 +126,33 @@
</el-form>
</template>
</el-table-column>
<el-table-column align="center" label="商品编号" min-width="60" prop="id" />
<el-table-column label="商品图" min-width="80">
<el-table-column label="商品编号" min-width="140" prop="id" />
<el-table-column label="商品信息" min-width="300">
<template #default="{ row }">
<el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
<div class="flex">
<el-image
fit="cover"
:src="row.picUrl"
class="flex-none w-50px h-50px"
@click="imagePreview(row.picUrl)"
/>
<div class="ml-4 overflow-hidden">
<el-tooltip effect="dark" :content="row.name" placement="top">
<div>
{{ row.name }}
</div>
</el-tooltip>
</div>
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
<template #default="{ row }"> {{ fenToYuan(row.price) }}</template>
<el-table-column align="center" label="价格" min-width="160" prop="price">
<template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
</el-table-column>
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
<el-table-column align="center" label="排序" min-width="70" prop="sort" />
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180"
/>
<el-table-column align="center" label="状态" min-width="80">
<el-table-column align="center" label="销售状态" min-width="80">
<template #default="{ row }">
<template v-if="row.status >= 0">
<el-switch
@ -163,16 +170,16 @@
</template>
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180"
/>
<el-table-column align="center" fixed="right" label="操作" min-width="200">
<template #default="{ row }">
<el-button
v-hasPermi="['product:spu:update']"
link
type="primary"
@click="openDetail(row.id)"
>
详情
</el-button>
<el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button>
<el-button
v-hasPermi="['product:spu:update']"
link
@ -196,17 +203,17 @@
type="primary"
@click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)"
>
恢复到仓库
恢复
</el-button>
</template>
<template v-else>
<el-button
v-hasPermi="['product:spu:update']"
link
type="primary"
type="danger"
@click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)"
>
加入回收
回收
</el-button>
</template>
</template>
@ -236,48 +243,41 @@ defineOptions({ name: 'ProductSpu' })
const message = useMessage() //
const { t } = useI18n() //
const { currentRoute, push } = useRouter() //
const { push } = useRouter() //
const loading = ref(false) //
const exportLoading = ref(false) //
const total = ref(0) //
const list = ref<any[]>([]) //
const list = ref<ProductSpuApi.Spu[]>([]) //
// tabs
const tabsData = ref([
{
count: 0,
name: '出售中商品',
type: 0
name: '出售中',
type: 0,
count: 0
},
{
count: 0,
name: '仓库中商品',
type: 1
name: '仓库中',
type: 1,
count: 0
},
{
count: 0,
name: '已售罄商品',
type: 2
name: '已售罄',
type: 2,
count: 0
},
{
count: 0,
name: '警戒库存',
type: 3
type: 3,
count: 0
},
{
count: 0,
name: '商品回收站',
type: 4
name: '回收站',
type: 4,
count: 0
}
])
/** 获得每个 Tab 的数量 */
const getTabsCount = async () => {
const res = await ProductSpuApi.getTabsCount()
for (let objName in res) {
tabsData.value[Number(objName)].count = res[objName]
}
}
const queryParams = ref({
pageNo: 1,
pageSize: 10,
@ -288,11 +288,6 @@ const queryParams = ref({
}) //
const queryFormRef = ref() // Ref
const handleTabClick = (tab: TabsPaneContext) => {
queryParams.value.tabType = tab.paneName as number
getList()
}
/** 查询列表 */
const getList = async () => {
loading.value = true
@ -305,8 +300,22 @@ const getList = async () => {
}
}
/** 切换 Tab */
const handleTabClick = (tab: TabsPaneContext) => {
queryParams.value.tabType = tab.paneName as number
getList()
}
/** 获得每个 Tab 的数量 */
const getTabsCount = async () => {
const res = await ProductSpuApi.getTabsCount()
for (let objName in res) {
tabsData.value[Number(objName)].count = res[objName]
}
}
/** 添加到仓库 / 回收站的状态 */
const handleStatus02Change = async (row, newStatus: number) => {
const handleStatus02Change = async (row: any, newStatus: number) => {
try {
//
const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库'
@ -322,7 +331,7 @@ const handleStatus02Change = async (row, newStatus: number) => {
}
/** 更新上架/下架状态 */
const handleStatusChange = async (row) => {
const handleStatusChange = async (row: any) => {
try {
//
const text = row.status ? '上架' : '下架'
@ -407,19 +416,16 @@ const handleExport = async () => {
}
}
const categoryList = ref() //
/** 获取分类的节点的完整结构 */
const formatCategoryName = (categoryId) => {
const categoryList = ref() //
const formatCategoryName = (categoryId: number) => {
return treeToString(categoryList.value, categoryId)
}
//
watch(
() => currentRoute.value,
() => {
getList()
}
)
/** 激活时 */
onActivated(() => {
getList()
})
/** 初始化 **/
onMounted(async () => {