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

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

<template>
	<!-- 列表 -->
	<ContentWrap style="" class="container">
		<div class="search" v-if="!userId">

			<!-- 	左侧的 -->
			<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="店铺名称" v-if="!merchantId && !userId">
					<el-input v-model="shopName" class="!w-240px" clearable placeholder="请输入店铺名称"
						@input="shopNameQuery" />
				</el-form-item>
				<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 && !userId" 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 AfterSaleApi from '@/api/mall/trade/afterSale/index'

	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: undefined
		},
		userId: {
			type: Number,
			default: undefined
		},
		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 shopName = ref("")
	const queryParams = ref({
		pageNo: 1,
		pageSize: 10,
		tabType: '',
		name: '',
		categoryId: undefined,
		createTime: undefined,
		shopIds: []
	}) // 查询参数
	/** 查询根据店铺名模糊查询 */
	const getShopIds = async (shopName) => {
		loading.value = true
		const res = await AfterSaleApi.getShopIdsByName(shopName)
		queryParams.value.shopIds = res
		// console.log(res)
		// list.value = res.list
	}
	let timeout = null;
	const shopNameQuery = async (e) => {
		clearTimeout(timeout); // 清除之前的定时器
		timeout = setTimeout(() => {
			getShopIds(e); // 延迟执行查询操作
		}, 500);
	}
	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 {
			let data;
			if (props.userId) {
				console.log(props.userId)
				queryParams.value.userId = props.userId
				data = await ProductSpuApi.getFavoriteByUser(queryParams.value)
			} else {
				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 obj = ref({ ...queryParams.value })

		let res;
		if (props.merchantId) {
			obj.value.merId = props.merchantId
			res = await ProductSpuApi.getTabsCountByMer(obj.value)
		} else {
			res = await ProductSpuApi.getTabsCount(obj.value)
		}

		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 = "";
		queryParams.value.shopIds = [];
		shopName.value = "";
		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>