CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
Leo
2026-01-06 01:38:33 +08:00
parent 70ce063aba
commit 7871acf214
5 changed files with 667 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/views/system/orderrows/index.vue
View File

@@ -2,36 +2,52 @@
<div class="app-container">
<!-- 顶部搜索区域 -->
<div class="search-section">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="京粉账号" prop="unionId">
<el-select v-model="queryParams.unionId" placeholder="请选择京粉账号" clearable style="width: 240px">
<el-option
v-for="admin in adminList"
:key="admin.value || admin.id"
:label="admin.label || (admin.name + ' (' + admin.wxid + ')')"
:value="admin.value || admin.id"
/>
</el-select>
</el-form-item>
<el-form-item label="订单号" prop="orderId">
<el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="商品名称" prop="skuName">
<el-input v-model="queryParams.skuName" placeholder="请输入商品名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="订单状态" prop="statusGroup">
<el-select v-model="queryParams.statusGroup" placeholder="订单状态" clearable style="width: 240px">
<el-option v-for="status in mergedStatusList" :key="status.value" :label="status.label" :value="status.value" />
</el-select>
</el-form-item>
<el-form-item label="订单时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</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="unionId">
<el-select v-model="queryParams.unionId" placeholder="请选择京粉账号" clearable style="width: 240px">
<el-option
v-for="admin in adminList"
:key="admin.value || admin.id"
:label="admin.label || (admin.name + ' (' + admin.wxid + ')')"
:value="admin.value || admin.id"
/>
</el-select>
</el-form-item>
<el-form-item label="订单号" prop="orderId">
<el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="商品名称" prop="skuName">
<el-input v-model="queryParams.skuName" placeholder="请输入商品名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="订单状态" prop="statusGroup">
<el-select v-model="queryParams.statusGroup" placeholder="订单状态" clearable style="width: 240px">
<el-option v-for="status in mergedStatusList" :key="status.value" :label="status.label" :value="status.value" />
</el-select>
</el-form-item>
<el-form-item label="订单时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</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-card class="statistics-card" shadow="hover" v-if="orderrowsList.length > 0">
@@ -100,7 +116,16 @@
</div>
</el-card>
<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" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:orderrows:add']">新增</el-button>
</el-col>
@@ -295,9 +320,16 @@
<script>
import { listOrderrows, getOrderrows, delOrderrows, addOrderrows, updateOrderrows, getValidCodeSelectData, getOrderStatistics } from "@/api/system/orderrows";
import { getAdminSelectData } from "@/api/system/superadmin";
import { mapGetters } from 'vuex'
import MobileSearchForm from '@/components/MobileSearchForm'
import MobileButtonGroup from '@/components/MobileButtonGroup'
export default {
name: "Orderrows",
components: {
MobileSearchForm,
MobileButtonGroup
},
data() {
return {
// 遮罩层
@@ -354,6 +386,26 @@ export default {
}
};
},
computed: {
...mapGetters(['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: 'export', label: '导出', type: 'warning', icon: 'el-icon-download', handler: () => this.handleExport(), disabled: false }
]
}
},
created() {
this.getList();
this.getAdminList();
@@ -1105,4 +1157,31 @@ export default {
border-radius: 4px;
padding: 10px 0;
}
/* 操作按钮区域 */
.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>