11
This commit is contained in:
Leo
@@ -1,43 +1,68 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input
|
||||
v-model="queryParams.productName"
|
||||
placeholder="请输入商品名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称" prop="shopName">
|
||||
<el-input
|
||||
v-model="queryParams.shopName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SKUID" prop="skuid">
|
||||
<el-input
|
||||
v-model="queryParams.skuid"
|
||||
placeholder="请输入SKUID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否置顶" prop="isTop">
|
||||
<el-select v-model="queryParams.isTop" placeholder="请选择" clearable>
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<mobile-search-form
|
||||
:model="queryParams"
|
||||
@search="handleQuery"
|
||||
@reset="resetQuery"
|
||||
>
|
||||
<template #form="{ expanded }">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="商品名称" prop="productName">
|
||||
<el-input
|
||||
v-model="queryParams.productName"
|
||||
placeholder="请输入商品名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称" prop="shopName">
|
||||
<el-input
|
||||
v-model="queryParams.shopName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SKUID" prop="skuid">
|
||||
<el-input
|
||||
v-model="queryParams.skuid"
|
||||
placeholder="请输入SKUID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否置顶" prop="isTop">
|
||||
<el-select v-model="queryParams.isTop" placeholder="请选择" clearable>
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 桌面端搜索按钮 -->
|
||||
<el-form-item v-if="!expanded">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</mobile-search-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- 操作按钮区域（移动端单独显示） -->
|
||||
<div class="action-buttons-section mobile-only">
|
||||
<mobile-button-group
|
||||
:buttons="actionButtons"
|
||||
:primary-count="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端按钮组 -->
|
||||
<el-row :gutter="10" class="mb8 desktop-only">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
@@ -347,14 +372,38 @@
|
||||
import { listFavoriteProduct, getFavoriteProduct, delFavoriteProduct, addFavoriteProduct, updateFavoriteProduct, updateTopStatus } from "@/api/system/favoriteProduct";
|
||||
import { generatePromotionContent } from "@/api/system/jdorder";
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import MobileSearchForm from '@/components/MobileSearchForm'
|
||||
import MobileButtonGroup from '@/components/MobileButtonGroup'
|
||||
import PublishDialog from '@/components/PublishDialog.vue'
|
||||
// 自动加入常用逻辑由 PublishDialog 内部触发（线报、转链页面），本页主要用于打开发品弹窗
|
||||
|
||||
export default {
|
||||
name: "FavoriteProduct",
|
||||
components: { PublishDialog },
|
||||
components: {
|
||||
PublishDialog,
|
||||
MobileSearchForm,
|
||||
MobileButtonGroup
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['favoriteProductRefreshKey'])
|
||||
...mapGetters(['favoriteProductRefreshKey', 'device']),
|
||||
isMobile() {
|
||||
if (this.device === 'mobile') {
|
||||
return true
|
||||
}
|
||||
if (typeof window !== 'undefined' && window.innerWidth < 768) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
actionButtons() {
|
||||
return [
|
||||
{ key: 'add', label: '新增', type: 'primary', icon: 'el-icon-plus', handler: () => this.handleAdd(), disabled: false },
|
||||
{ key: 'update', label: '修改', type: 'success', icon: 'el-icon-edit', handler: () => this.handleUpdate(), disabled: this.single },
|
||||
{ key: 'delete', label: '删除', type: 'danger', icon: 'el-icon-delete', handler: () => this.handleDelete(), disabled: this.multiple },
|
||||
{ key: 'top', label: '批量置顶', type: 'warning', icon: 'el-icon-top', handler: () => this.handleBatchTop(), disabled: this.multiple },
|
||||
{ key: 'export', label: '导出', type: 'info', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -628,4 +677,31 @@ export default {
|
||||
.el-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* 操作按钮区域 */
|
||||
.action-buttons-section {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 移动端和桌面端按钮组显示控制 */
|
||||
@media (max-width: 768px) {
|
||||
.desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.action-buttons-section.mobile-only {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user