11
This commit is contained in:
Leo
@@ -5,46 +5,74 @@
|
||||
<el-tab-pane label="京东评论" name="jd">
|
||||
<div class="comment-container">
|
||||
<!-- 搜索区域 -->
|
||||
<el-form :inline="true" :model="jdQueryParams" class="demo-form-inline" size="small">
|
||||
<el-form-item label="商品ID">
|
||||
<el-input v-model="jdQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleJdQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型">
|
||||
<el-select v-model="jdQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
|
||||
<el-option
|
||||
v-for="(value, key) in jdProductTypeMap"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="jdQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleJdQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态">
|
||||
<el-select v-model="jdQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
|
||||
<el-option label="未使用" :value="0" />
|
||||
<el-option label="已使用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="jdDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleJdDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleJdQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetJdQuery">重置</el-button>
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<mobile-search-form
|
||||
:model="jdQueryParams"
|
||||
@search="handleJdQuery"
|
||||
@reset="resetJdQuery"
|
||||
>
|
||||
<template #form="{ expanded }">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="jdQueryParams"
|
||||
class="demo-form-inline"
|
||||
size="small"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="商品ID">
|
||||
<el-input v-model="jdQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleJdQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型">
|
||||
<el-select v-model="jdQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
|
||||
<el-option
|
||||
v-for="(value, key) in jdProductTypeMap"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="jdQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleJdQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态">
|
||||
<el-select v-model="jdQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
|
||||
<el-option label="未使用" :value="0" />
|
||||
<el-option label="已使用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="jdDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleJdDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 桌面端搜索按钮 -->
|
||||
<el-form-item v-if="!expanded">
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleJdQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetJdQuery">重置</el-button>
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</mobile-search-form>
|
||||
|
||||
<!-- 操作按钮区域（移动端单独显示） -->
|
||||
<div class="action-buttons-section mobile-only">
|
||||
<mobile-button-group
|
||||
:buttons="jdActionButtons"
|
||||
:primary-count="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端按钮组 -->
|
||||
<div class="desktop-action-buttons desktop-only">
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleJdExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table v-loading="jdLoading" :data="jdList" border>
|
||||
@@ -106,46 +134,74 @@
|
||||
<el-tab-pane label="淘宝评论" name="tb">
|
||||
<div class="comment-container">
|
||||
<!-- 搜索区域 -->
|
||||
<el-form :inline="true" :model="tbQueryParams" class="demo-form-inline" size="small">
|
||||
<el-form-item label="商品ID">
|
||||
<el-input v-model="tbQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleTbQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型">
|
||||
<el-select v-model="tbQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
|
||||
<el-option
|
||||
v-for="(value, key) in tbProductTypeMap"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="tbQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleTbQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态">
|
||||
<el-select v-model="tbQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
|
||||
<el-option label="未使用" :value="0" />
|
||||
<el-option label="已使用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="tbDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleTbDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleTbQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetTbQuery">重置</el-button>
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<mobile-search-form
|
||||
:model="tbQueryParams"
|
||||
@search="handleTbQuery"
|
||||
@reset="resetTbQuery"
|
||||
>
|
||||
<template #form="{ expanded }">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="tbQueryParams"
|
||||
class="demo-form-inline"
|
||||
size="small"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="商品ID">
|
||||
<el-input v-model="tbQueryParams.productId" placeholder="商品ID" clearable @keyup.enter.native="handleTbQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型">
|
||||
<el-select v-model="tbQueryParams.productType" placeholder="请选择" clearable filterable style="width: 200px;">
|
||||
<el-option
|
||||
v-for="(value, key) in tbProductTypeMap"
|
||||
:key="key"
|
||||
:label="key"
|
||||
:value="key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="tbQueryParams.userName" placeholder="用户名" clearable @keyup.enter.native="handleTbQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态">
|
||||
<el-select v-model="tbQueryParams.isUse" placeholder="全部" clearable style="width: 120px;">
|
||||
<el-option label="未使用" :value="0" />
|
||||
<el-option label="已使用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="tbDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="handleTbDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 桌面端搜索按钮 -->
|
||||
<el-form-item v-if="!expanded">
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleTbQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="small" @click="resetTbQuery">重置</el-button>
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</mobile-search-form>
|
||||
|
||||
<!-- 操作按钮区域（移动端单独显示） -->
|
||||
<div class="action-buttons-section mobile-only">
|
||||
<mobile-button-group
|
||||
:buttons="tbActionButtons"
|
||||
:primary-count="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端按钮组 -->
|
||||
<div class="desktop-action-buttons desktop-only">
|
||||
<el-button type="success" icon="el-icon-download" size="small" @click="handleTbExport">导出</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table v-loading="tbLoading" :data="tbList" border>
|
||||
@@ -281,9 +337,16 @@ import {
|
||||
listTbComment, getTbComment, updateTbComment, delTbComment, resetTbCommentByProductId,
|
||||
getCommentStatistics, getJdProductTypeMap, getTbProductTypeMap
|
||||
} from '@/api/jarvis/comment'
|
||||
import { mapGetters } from 'vuex'
|
||||
import MobileSearchForm from '@/components/MobileSearchForm'
|
||||
import MobileButtonGroup from '@/components/MobileButtonGroup'
|
||||
|
||||
export default {
|
||||
name: 'CommentManagement',
|
||||
components: {
|
||||
MobileSearchForm,
|
||||
MobileButtonGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'jd',
|
||||
@@ -326,6 +389,28 @@ export default {
|
||||
imageList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['device']),
|
||||
isMobile() {
|
||||
if (this.device === 'mobile') {
|
||||
return true
|
||||
}
|
||||
if (typeof window !== 'undefined' && window.innerWidth < 768) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
jdActionButtons() {
|
||||
return [
|
||||
{ key: 'export', label: '导出', type: 'success', icon: 'el-icon-download', handler: () => this.handleJdExport(), disabled: false }
|
||||
]
|
||||
},
|
||||
tbActionButtons() {
|
||||
return [
|
||||
{ key: 'export', label: '导出', type: 'success', icon: 'el-icon-download', handler: () => this.handleTbExport(), disabled: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getJdList()
|
||||
this.getJdProductTypeMap()
|
||||
@@ -488,5 +573,42 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 操作按钮区域 */
|
||||
.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-action-buttons.desktop-only {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-action-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user