|
|
|
|
@ -1,31 +1,40 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
|
<el-form |
|
|
|
|
ref="queryFormRef" |
|
|
|
|
:inline="true" |
|
|
|
|
:model="queryParams" |
|
|
|
|
class="-mb-15px" |
|
|
|
|
label-width="68px" |
|
|
|
|
> |
|
|
|
|
<!-- TODO @puhui999：品牌应该是数据下拉哈 --> |
|
|
|
|
<el-form-item label="品牌名称" prop="productBrandName"> |
|
|
|
|
<el-form inline :model="queryParams" class="-mb-15px" label-width="0"> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-input |
|
|
|
|
v-model="queryParams.productBrandName" |
|
|
|
|
class="!w-240px" |
|
|
|
|
v-model="queryParams.productName" |
|
|
|
|
class="!w-200px" |
|
|
|
|
clearable |
|
|
|
|
placeholder="请输入品牌名称" |
|
|
|
|
placeholder="请输入产品名称" |
|
|
|
|
@keyup.enter="handleQuery" |
|
|
|
|
/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="创建时间" prop="createTime"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="queryParams.createTime" |
|
|
|
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
|
|
|
|
class="!w-240px" |
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
type="daterange" |
|
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-select |
|
|
|
|
v-model="queryParams.productBrand" |
|
|
|
|
placeholder="请选择品牌" |
|
|
|
|
clearable |
|
|
|
|
filterable |
|
|
|
|
@change="handleQuery" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in opts.brand" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-cascader |
|
|
|
|
:options="opts.productCategory" |
|
|
|
|
v-model="queryParams.productCategory" |
|
|
|
|
placeholder="请选择分类" |
|
|
|
|
clearable |
|
|
|
|
filterable |
|
|
|
|
show-all-levels |
|
|
|
|
@change="handleQuery" |
|
|
|
|
/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
@ -36,36 +45,34 @@ |
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
|
|
<!-- 列表 --> |
|
|
|
|
<el-table v-loading="loading" class="mt-20px" :data="list" border> |
|
|
|
|
<el-table v-loading="loading" class="mt-20px" :data="tableList" border> |
|
|
|
|
<el-table-column type="expand" width="30"> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<div class="pl-100px pr-100px"> |
|
|
|
|
<el-table :data="scope.row.specsList"> |
|
|
|
|
<el-table-column label="规格名称" prop="" /> |
|
|
|
|
<el-table-column label="颜色" prop="color" /> |
|
|
|
|
<el-table :data="row.productSpecList"> |
|
|
|
|
<el-table-column label="规格名称" prop="specsName" /> |
|
|
|
|
<el-table-column label="售价" prop="price" /> |
|
|
|
|
<el-table-column label="成本价" prop="" /> |
|
|
|
|
<el-table-column label="简介" prop="intro" /> |
|
|
|
|
</el-table> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column key="id" label="产品编码" prop="id" /> |
|
|
|
|
<el-table-column show-overflow-tooltip label="产品名称" min-width="200" prop="name" /> |
|
|
|
|
<el-table-column label="分类" min-width="90" prop="salesCount" /> |
|
|
|
|
<el-table-column label="品牌" min-width="90" prop="stock" /> |
|
|
|
|
<el-table-column key="productId" label="产品编码" prop="productId" /> |
|
|
|
|
<el-table-column show-overflow-tooltip label="产品名称" min-width="200" prop="productName" /> |
|
|
|
|
<el-table-column label="分类" min-width="90" prop="productCategoryName" /> |
|
|
|
|
<el-table-column label="品牌" min-width="90" prop="productBrandName" /> |
|
|
|
|
<el-table-column label="商品图" min-width="80"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<el-image :src="row.picUrl" @click="imagePreview(row.picUrl)" class="w-30px h-30px" /> |
|
|
|
|
<el-image :src="row.mainImage" @click="imagePreview(row.mainImage)" class="w-30px h-30px" /> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="简介" min-width="70" prop="sort" /> |
|
|
|
|
<el-table-column label="简介" min-width="70" prop="productIntro" /> |
|
|
|
|
<el-table-column :formatter="dateFormatter" label="创建时间" prop="createTime" width="180" /> |
|
|
|
|
<el-table-column fixed="right" label="操作" min-width="80"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<!-- TODO @puhui999：【详情】，可以后面点做哈 --> |
|
|
|
|
<el-button link type="primary" @click="openForm(row.id)"> 修改 </el-button> |
|
|
|
|
<el-button link type="danger" @click="handleDelete(row.id)"> 删除 </el-button> |
|
|
|
|
<!-- TODO：【详情】，可以后面点做哈 --> |
|
|
|
|
<el-button link type="primary" @click="openForm(row.productId)"> 修改 </el-button> |
|
|
|
|
<el-button link type="danger" @click="handleDelete(row.productId)"> 删除 </el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
@ -81,58 +88,51 @@ |
|
|
|
|
<script setup name="Product"> |
|
|
|
|
import { dateFormatter } from '@/utils/formatTime' |
|
|
|
|
import { createImageViewer } from '@/components/ImageViewer' |
|
|
|
|
import * as ProductApi from '@/api/mall/product' |
|
|
|
|
|
|
|
|
|
const { currentRoute, push } = useRouter() |
|
|
|
|
const message = useMessage() // 消息弹窗 |
|
|
|
|
const { t } = useI18n() // 国际化 |
|
|
|
|
|
|
|
|
|
const queryParams = ref({ |
|
|
|
|
productName: undefined, |
|
|
|
|
productBrand: undefined, |
|
|
|
|
productCategory: undefined, |
|
|
|
|
pageNo: 1, |
|
|
|
|
pageSize: 10 |
|
|
|
|
}) // 查询参数 |
|
|
|
|
|
|
|
|
|
const opts = ref({ |
|
|
|
|
brand: [], |
|
|
|
|
productCategory: [] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const loading = ref(false) // 列表的加载中 |
|
|
|
|
const total = ref(0) // 列表的总页数 |
|
|
|
|
const list = ref([]) // 列表的数据 |
|
|
|
|
const tableList = ref([]) // 列表的数据 |
|
|
|
|
|
|
|
|
|
/** 删除按钮操作 */ |
|
|
|
|
function handleDelete() { |
|
|
|
|
console.log('123') |
|
|
|
|
// try { |
|
|
|
|
// // 删除的二次确认 |
|
|
|
|
// await message.delConfirm() |
|
|
|
|
// // 发起删除 |
|
|
|
|
// // await ProductSpuApi.deleteSpu(id) |
|
|
|
|
// message.success(t('common.delSuccess')) |
|
|
|
|
// // 刷新列表 |
|
|
|
|
// await getList() |
|
|
|
|
// } catch { } |
|
|
|
|
async function handleDelete(id) { |
|
|
|
|
try { |
|
|
|
|
// 删除的二次确认 |
|
|
|
|
await message.delConfirm() |
|
|
|
|
// 发起删除 |
|
|
|
|
await ProductApi.deleteProduct(id) |
|
|
|
|
message.success(t('common.delSuccess')) |
|
|
|
|
// 刷新列表 |
|
|
|
|
await getList() |
|
|
|
|
} catch {} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getList() { |
|
|
|
|
list.value = [ |
|
|
|
|
{ |
|
|
|
|
id: '1234', |
|
|
|
|
name: '爱玩熊攀岩墙', |
|
|
|
|
specsList: [ |
|
|
|
|
{ |
|
|
|
|
color: '黑色', |
|
|
|
|
price: 1234 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
color: '灰色', |
|
|
|
|
price: 4231 |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: '12345', |
|
|
|
|
name: '熊攀尼攀岩墙', |
|
|
|
|
specsList: [ |
|
|
|
|
{ |
|
|
|
|
color: '黑色', |
|
|
|
|
price: 12345 |
|
|
|
|
async function getList() { |
|
|
|
|
loading.value = true |
|
|
|
|
try { |
|
|
|
|
const data = await ProductApi.getProductPage(queryParams.value) |
|
|
|
|
tableList.value = data.list |
|
|
|
|
total.value = data.total |
|
|
|
|
} finally { |
|
|
|
|
loading.value = false |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
/** 商品图预览 */ |
|
|
|
|
function imagePreview(imgUrl) { |
|
|
|
|
@ -143,19 +143,26 @@ function imagePreview(imgUrl) { |
|
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */ |
|
|
|
|
function handleQuery() { |
|
|
|
|
queryParams.value.pageNo = 1 |
|
|
|
|
getList() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** 重置按钮操作 */ |
|
|
|
|
function resetQuery() { |
|
|
|
|
queryFormRef.value.resetFields() |
|
|
|
|
queryParams.value = { |
|
|
|
|
productName: undefined, |
|
|
|
|
productBrand: undefined, |
|
|
|
|
productCategory: undefined, |
|
|
|
|
pageNo: 1, |
|
|
|
|
pageSize: 10 |
|
|
|
|
} |
|
|
|
|
handleQuery() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 新增或修改 |
|
|
|
|
* |
|
|
|
|
* @param id 商品 SPU 编号 |
|
|
|
|
* @param id 商品 编号 |
|
|
|
|
*/ |
|
|
|
|
function openForm(id) { |
|
|
|
|
// 修改 |
|
|
|
|
|
qsh
6 months ago