new-zx-front-admin/src/views/mall/product/spu/index.vue

<!-- 商品中心 - 商品列表  -->

<template>
	<!-- 列表 -->
	<ContentWrap style="" class="container">
		<div class="search">
			<!-- 	左侧的 -->
			<el-tabs v-model="queryParams.tabType" @tab-click="handleTabClick" class="parent-tabs" v-if="!mobile ">
				<el-tab-pane v-for="item in tabsData" :key="item.type" :label="item.name + '(' + item.count + ')'"
					:name="item.type" />
			</el-tabs>
			<div style="text-align: right;" class="search-input">
				<el-input v-model="queryParams.name" placeholder="搜索商品名称" @keyup.enter="handleQuery" class="!w-240px">
					<template #suffix>
						<el-icon class="el-input__icon" @click="handleQuery" style="cursor: pointer;">
							<Search />
						</el-icon>
					</template>

					<template #append>
						<el-button :icon="Operation" @click="showSearchMore" />
					</template>
				</el-input>

				<el-button v-hasPermi="['product:spu:create']" @click="openForm('create', '', 0)" class="ml-5px" v-if="!mobile && !isDetail && !merchantId">
					<Icon class="mr-5px " icon="ep:plus" />
					新增
				</el-button>
			</div>
		</div>
		<div class="searchMore" v-show="searchMoreShow">
			<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
				<el-form-item label="商品分类" prop="categoryId">
					<el-cascader v-model="queryParams.categoryId" :options="categoryList" :props="defaultProps" clearable
						filterable placeholder="请选择商品分类" />
				</el-form-item>
				<el-form-item label="商品状态" prop="">
					<el-select v-model="queryParams.tabType" placeholder="全部">
						<el-option v-for="dict in tabsData" :key="dict.type" :label="dict.name" :value="dict.type" />
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间" prop="createTime">
					<el-date-picker style="margin-right: unset;width:auto !important" v-model="queryParams.createTime"
						:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" end-placeholder="结束日期"
						start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" />
				</el-form-item>
				<el-row>
					<el-col>
						<el-form-item>
							<el-button @click="hideSearchMore">
								收起
							</el-button>
							<el-button @click="resetQuery">
								重置
							</el-button>
							<el-button @click="handleQuery" plain type="primary">
								<Icon class="mr-5px" icon="ep:search" />
								搜索
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>


		<el-row>
			<el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="7" :sm="24" :xs="24"
				@mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
				<el-card @click="openDetail('view', o, ProductSpuStatusEnum.RECYCLE.status, queryParams.tabType)">
					<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
						<p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
							:title="o.name">{{ o.name }}
						</p>
						<div @click.stop="openForm('update', o, ProductSpuStatusEnum.RECYCLE.status, queryParams.tabType)"
							v-show="o.showSetting && !mobile && !merchantId" class="setting">
							<el-icon size="20" color="rgb(220 223 231)">
								<Setting />
							</el-icon>
						</div>
					</div>
					<div style="display:flex;align-items: center;">
						<div
							style="width: 178px;height: 100px;margin-right:10px;border:1px solid rgb(220 223 231);border-radius: 5px;display: flex;align-items: center;justify-content: center;overflow: hidden;">
							<img :src="o.picUrl" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" />
						</div>

						<div style='line-height: 25px;'>
							<p>¥{{ fenToYuan(o.price) }}</p>
							<p>销量:{{ o.salesCount }}</p>
							<p>库存:{{ o.stock }}</p>
							<p>状态:{{ o.status == 1 ? "上架" : "下架" }}</p>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<div v-if="list.length == 0">
			<p style="text-align: center;margin-top: 100px;">暂无商品</p>
		</div>


		<!-- 分页 -->
		<Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
			@pagination="getList" />
		<!-- 表单弹窗：添加/修改 -->
		<SpuIndex ref="formRef" @success="getList" />
	</ContentWrap>
</template>

<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { Setting, Search, Operation } from '@element-plus/icons-vue'
import { createImageViewer } from '@/components/ImageViewer'
import { dateFormatter } from '@/utils/formatTime'
import { defaultProps, handleTree, treeToString } from '@/utils/tree'
import { ProductSpuStatusEnum } from '@/utils/constants'
import { fenToYuan } from '@/utils'
import download from '@/utils/download'
import * as ProductSpuApi from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
import SpuIndex from "./form/index.vue"
// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
// 从商户选项卡中传过来的id 如果有的话即证明是从商户中传过来的
const props = defineProps({
	merchantId: {
		type: Number,
		default: 0
	},
	isDetail:{
		type: Boolean,
		default: false
	}
});

defineOptions({ name: 'ProductSpu' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转

const loading = ref(false) // 列表的加载中
const exportLoading = ref(false) // 导出的加载中
const total = ref(0) // 列表的总页数
const list = ref<ProductSpuApi.Spu[]>([]) // 列表的数据
// tabs 数据
const tabsData = ref([
	{
		name: '全部',
		type: '',
		count: 0
	},
	{
		name: '出售中',
		type: 0,
		count: 0
	},
	{
		name: '仓库中',
		type: 1,
		count: 0
	},
	{
		name: '已售罄',
		type: 2,
		count: 0
	},
	{
		name: '警戒库存',
		type: 3,
		count: 0
	},
	{
		name: '回收站',
		type: 4,
		count: 0
	}
])

const queryParams = ref({
	pageNo: 1,
	pageSize: 10,
	tabType: '',
	name: '',
	categoryId: undefined,
	createTime: undefined
}) // 查询参数
const queryFormRef = ref() // 搜索的表单Ref
const searchMoreShow = ref(false)
// 鼠标移入显示变动图标
function handleMouseOver(index) {
	list.value[index].showSetting = true;
}
// 鼠标移出不显示图标
function handleMouseOut(index) {
	list.value[index].showSetting = false;
}

// 打开更多搜索条件
const showSearchMore = () => {
	searchMoreShow.value = !searchMoreShow.value
}
const hideSearchMore = () => {
	searchMoreShow.value = false
}

/** 查询列表 */
const getList = async () => {
	loading.value = true
	if (props.merchantId) {
		queryParams.value.merchantId = props.merchantId
	}
	try {
		const data = await ProductSpuApi.getSpuPage(queryParams.value)
		data.list.forEach(obj => {
			obj.showSetting = false;
		});

		list.value = data.list
		// console.log(list.value)
		total.value = data.total

	} finally {
		loading.value = false
		searchMoreShow.value = false
		getTabsCount()

	}
}

/** 切换 Tab */
const handleTabClick = (tab: TabsPaneContext) => {
	queryParams.value.tabType = tab.paneName
	getList()
}

/** 获得每个 Tab 的数量 */
const getTabsCount = async () => {
	const res = await ProductSpuApi.getTabsCount()
	tabsData.value[0].count = 0
	for (let objName in res) {
		if (objName <= 1 || objName === '4') {
			tabsData.value[0].count += res[objName]
		}
		tabsData.value[Number(objName) + 1].count = res[objName]
	}
}

/** 添加到仓库 / 回收站的状态 */
const handleStatus02Change = async (row: any, newStatus: number) => {
	try {
		// 二次确认
		const text = newStatus === ProductSpuStatusEnum.RECYCLE.status ? '加入到回收站' : '恢复到仓库'
		await message.confirm(`确认要"${row.name}"${text}吗？`)
		// 发起修改
		await ProductSpuApi.updateStatus({ id: row.id, status: newStatus })
		message.success(text + '成功')
		// 刷新 tabs 数据
		await getTabsCount()
		// 刷新列表
		await getList()
	} catch { }
}

/** 更新上架/下架状态 */
const handleStatusChange = async (row: any) => {
	try {
		// 二次确认
		const text = row.status ? '上架' : '下架'
		await message.confirm(`确认要${text}"${row.name}"吗？`)
		// 发起修改
		await ProductSpuApi.updateStatus({ id: row.id, status: row.status })
		message.success(text + '成功')
		// 刷新 tabs 数据
		await getTabsCount()
		// 刷新列表
		await getList()
	} catch {
		// 异常时，需要重置回之前的值
		row.status =
			row.status === ProductSpuStatusEnum.DISABLE.status
				? ProductSpuStatusEnum.ENABLE.status
				: ProductSpuStatusEnum.DISABLE.status
	}
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
	try {
		// 删除的二次确认
		await message.delConfirm()
		// 发起删除
		await ProductSpuApi.deleteSpu(id)
		message.success(t('common.delSuccess'))
		// 刷新tabs数据
		await getTabsCount()
		// 刷新列表
		await getList()
	} catch { }
}

/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
	createImageViewer({
		urlList: [imgUrl]
	})
}

/** 搜索按钮操作 */
const handleQuery = () => {
	getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
	queryParams.value.categoryId = undefined
	queryParams.value.createTime = undefined
	queryParams.value.name = ""
	queryParams.value.tabType = ''
	handleQuery()
}

const formRef = ref()
/** 新增或修改 */
const openForm = (type: string, row: any, newStatus: number, tabType: number) => {
	formRef.value.open(type, row, newStatus, tabType)
}
/** 查看商品详情 */
const openDetail = (type: string, row: any, newStatus: number) => {
	const id = row.id
	if (mobile.value) {
		push({ name: 'ProductSpuMobileDetail', params: { id } })
	} else {
		formRef.value.open(type, row, newStatus)
	}
}

/** 导出按钮操作 */
const handleExport = async () => {
	try {
		// 导出的二次确认
		await message.exportConfirm()
		// 发起导出
		exportLoading.value = true
		const data = await ProductSpuApi.exportSpu(queryParams)
		download.excel(data, '商品列表.xls')
	} catch {
	} finally {
		exportLoading.value = false
	}
}

/** 获取分类的节点的完整结构 */
const categoryList = ref() // 分类树
const formatCategoryName = (categoryId: number) => {
	return treeToString(categoryList.value, categoryId)
}

/** 激活时 */
onActivated(() => {
	getList()
})

/** 初始化 **/
onMounted(async () => {
	await getTabsCount()
	await getList()
	// 获得分类树
	const data = await ProductCategoryApi.getCategoryList({})
	categoryList.value = handleTree(data, 'id', 'parentId')
})
</script>

<style src="@/styles/SearchIndex.css"  lang="scss" scoped></style>