📖 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 * @param num
*/ */
export const formatToFraction = (num: number | string | undefined): number => { export const formatToFraction = (num: number | string | undefined): string => {
if (typeof num === 'undefined') return 0 if (typeof num === 'undefined') return '0.00'
const parsedNumber = typeof num === 'string' ? parseFloat(num) : num 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) return formatToFraction(price)
} }

View File

@ -1,3 +1,4 @@
<!-- 商品中心 - 商品列表 -->
<template> <template>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<ContentWrap> <ContentWrap>
@ -125,27 +126,33 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="商品编号" min-width="60" prop="id" /> <el-table-column label="商品编号" min-width="140" prop="id" />
<el-table-column label="商品图" min-width="80"> <el-table-column label="商品信息" min-width="300">
<template #default="{ row }"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" /> <el-table-column align="center" label="价格" min-width="160" prop="price">
<el-table-column align="center" label="商品售价" min-width="90" prop="price"> <template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
<template #default="{ row }"> {{ fenToYuan(row.price) }}</template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" /> <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="90" prop="stock" />
<el-table-column align="center" label="排序" min-width="70" prop="sort" /> <el-table-column align="center" label="排序" min-width="70" prop="sort" />
<el-table-column <el-table-column align="center" label="销售状态" min-width="80">
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180"
/>
<el-table-column align="center" label="状态" min-width="80">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="row.status >= 0"> <template v-if="row.status >= 0">
<el-switch <el-switch
@ -163,16 +170,16 @@
</template> </template>
</template> </template>
</el-table-column> </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"> <el-table-column align="center" fixed="right" label="操作" min-width="200">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button>
v-hasPermi="['product:spu:update']"
link
type="primary"
@click="openDetail(row.id)"
>
详情
</el-button>
<el-button <el-button
v-hasPermi="['product:spu:update']" v-hasPermi="['product:spu:update']"
link link
@ -196,17 +203,17 @@
type="primary" type="primary"
@click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)" @click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)"
> >
恢复到仓库 恢复
</el-button> </el-button>
</template> </template>
<template v-else> <template v-else>
<el-button <el-button
v-hasPermi="['product:spu:update']" v-hasPermi="['product:spu:update']"
link link
type="primary" type="danger"
@click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)" @click="handleStatus02Change(row, ProductSpuStatusEnum.RECYCLE.status)"
> >
加入回收 回收
</el-button> </el-button>
</template> </template>
</template> </template>
@ -236,48 +243,41 @@ defineOptions({ name: 'ProductSpu' })
const message = useMessage() // const message = useMessage() //
const { t } = useI18n() // const { t } = useI18n() //
const { currentRoute, push } = useRouter() // const { push } = useRouter() //
const loading = ref(false) // const loading = ref(false) //
const exportLoading = ref(false) // const exportLoading = ref(false) //
const total = ref(0) // const total = ref(0) //
const list = ref<any[]>([]) // const list = ref<ProductSpuApi.Spu[]>([]) //
// tabs // tabs
const tabsData = ref([ const tabsData = ref([
{ {
count: 0, name: '出售中',
name: '出售中商品', type: 0,
type: 0 count: 0
}, },
{ {
count: 0, name: '仓库中',
name: '仓库中商品', type: 1,
type: 1 count: 0
}, },
{ {
count: 0, name: '已售罄',
name: '已售罄商品', type: 2,
type: 2 count: 0
}, },
{ {
count: 0,
name: '警戒库存', name: '警戒库存',
type: 3 type: 3,
count: 0
}, },
{ {
count: 0, name: '回收站',
name: '商品回收站', type: 4,
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({ const queryParams = ref({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
@ -288,11 +288,6 @@ const queryParams = ref({
}) // }) //
const queryFormRef = ref() // Ref const queryFormRef = ref() // Ref
const handleTabClick = (tab: TabsPaneContext) => {
queryParams.value.tabType = tab.paneName as number
getList()
}
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true 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 { try {
// //
const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库' 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 { try {
// //
const text = row.status ? '上架' : '下架' 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) return treeToString(categoryList.value, categoryId)
} }
// /** 激活时 */
watch( onActivated(() => {
() => currentRoute.value, getList()
() => { })
getList()
}
)
/** 初始化 **/ /** 初始化 **/
onMounted(async () => { onMounted(async () => {