fix(管理端): 筛选展开收起按钮组改为流式跟排并统一日期控件宽度

This commit is contained in:
From-wh 2026-09-28 18:16:32 +08:00 committed by 吴昊天
parent 05fcb4af49
commit 5f0b9f2d78
2 changed files with 241 additions and 358 deletions

View File

@ -3,115 +3,81 @@
<el-card :bordered="false" shadow="never" :body-style="{ padding: 0 }">
<div class="padding-add">
<el-form ref="artFromRef" :model="artFrom" label-width="80px" label-position="right" inline @submit.prevent>
<div class="acea-row search-form">
<div class="search-form-box">
<el-form-item label="商品搜索:" label-for="store_name">
<el-input
clearable
placeholder="请输入商品名称/关键字/ID"
v-model="artFrom.store_name"
class="form_content_width"
/>
</el-form-item>
<el-form-item label="商品分类:" label-for="pid">
<el-cascader
v-model="artFrom.cate_id"
:options="treeSelect"
:props="{ multiple: false, emitPath: false, checkStrictly: true }"
clearable
class="form_content_width"
></el-cascader>
</el-form-item>
<template v-if="collapse">
<el-form-item label="商品规格:">
<el-select v-model="artFrom.spec_type" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="单规格" value="0" />
<el-option label="多规格" value="1" />
</el-select>
</el-form-item>
<el-form-item label="会员专属:">
<el-select v-model="artFrom.vip_product" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="不限制" value="0" />
<el-option label="仅会员可见可买" value="1" />
<el-option label="所有人可见仅会员可买" value="2" />
</el-select>
</el-form-item>
<el-form-item label="是否礼物:">
<el-select v-model="artFrom.is_gift" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="否" value="0" />
<el-option label="是" value="1" />
</el-select>
</el-form-item>
<el-form-item label="添加时间:">
<date-range-picker
class="form_range_content_width"
clearable
v-model="timeVal"
:editable="false"
@change="onchangeTime"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<el-form-item label="库存:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="artFrom.stock_s[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="artFrom.stock_s[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="价格:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="artFrom.price_s[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="artFrom.price_s[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="销量:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="artFrom.sales_s[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="artFrom.sales_s[1]"
class="form_range_content_width"
/>
</el-form-item>
</template>
</div>
<div class="search-form-sub">
<el-button type="primary" v-db-click @click="userSearchs">查询</el-button>
<el-button class="ResetSearch" v-db-click @click="reset">重置</el-button>
<a class="ivu-ml-8 font12 ml10" v-db-click @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
<template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
</a>
</div>
</div>
<el-form-item label="商品搜索:" label-for="store_name">
<el-input
clearable
placeholder="请输入商品名称/关键字/ID"
v-model="artFrom.store_name"
class="form_content_width"
/>
</el-form-item>
<el-form-item label="商品分类:" label-for="pid">
<el-cascader
v-model="artFrom.cate_id"
:options="treeSelect"
:props="{ multiple: false, emitPath: false, checkStrictly: true }"
clearable
class="form_content_width"
></el-cascader>
</el-form-item>
<template v-if="collapse">
<el-form-item label="商品规格:">
<el-select v-model="artFrom.spec_type" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="单规格" value="0" />
<el-option label="多规格" value="1" />
</el-select>
</el-form-item>
<el-form-item label="会员专属:">
<el-select v-model="artFrom.vip_product" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="不限制" value="0" />
<el-option label="仅会员可见可买" value="1" />
<el-option label="所有人可见仅会员可买" value="2" />
</el-select>
</el-form-item>
<el-form-item label="是否礼物:">
<el-select v-model="artFrom.is_gift" clearable placeholder="全部" class="form_content_width">
<el-option label="全部" value="" />
<el-option label="否" value="0" />
<el-option label="是" value="1" />
</el-select>
</el-form-item>
<el-form-item label="添加时间:">
<date-range-picker
width="250px"
clearable
v-model="timeVal"
:editable="false"
@change="onchangeTime"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<el-form-item label="库存:" label-for="store_name">
<el-input clearable placeholder="最小值" v-model="artFrom.stock_s[0]" class="form_range_content_width" />
~
<el-input clearable placeholder="最大值" v-model="artFrom.stock_s[1]" class="form_range_content_width" />
</el-form-item>
<el-form-item label="价格:" label-for="store_name">
<el-input clearable placeholder="最小值" v-model="artFrom.price_s[0]" class="form_range_content_width" />
~
<el-input clearable placeholder="最大值" v-model="artFrom.price_s[1]" class="form_range_content_width" />
</el-form-item>
<el-form-item label="销量:" label-for="store_name">
<el-input clearable placeholder="最小值" v-model="artFrom.sales_s[0]" class="form_range_content_width" />
~
<el-input clearable placeholder="最大值" v-model="artFrom.sales_s[1]" class="form_range_content_width" />
</el-form-item>
</template>
<el-form-item class="search-form-sub">
<el-button type="primary" v-db-click @click="userSearchs">查询</el-button>
<el-button class="ResetSearch" v-db-click @click="reset">重置</el-button>
<a class="ivu-ml-8 font12 ml10" v-db-click @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
<template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
</a>
</el-form-item>
</el-form>
</div>
</el-card>
@ -1033,19 +999,6 @@ onActivated(() => {
.label_width {
width: 400px;
}
.search-form {
display: flex;
justify-content: space-between;
.search-form-box {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.search-form-sub {
display: flex;
align-items: baseline;
}
}
.batch-box {
:deep(.ivu-modal-body) {
overflow: auto;

View File

@ -3,221 +3,167 @@
<el-card :bordered="false" shadow="never" :body-style="{ padding: 0 }">
<div class="padding-add">
<el-form :model="userFrom" label-width="80px" label-position="right" @submit.prevent inline>
<div class="acea-row search-form" v-if="!collapse">
<div>
<el-form-item label="用户搜索:" label-for="nickname">
<el-input v-model="userFrom.nickname" placeholder="请输入用户" clearable class="form_content_width">
<template #prepend
><el-select v-model="field_key" style="width: 100px">
<el-option value="all" label="全部"></el-option>
<el-option value="uid" label="UID"></el-option>
<el-option value="phone" label="手机号"></el-option>
<el-option value="nickname" label="用户昵称"></el-option> </el-select
></template>
</el-input>
</el-form-item>
<el-form-item label="用户等级:" label-for="level">
<el-select v-model="level" placeholder="请选择用户等级" clearable class="form_content_width">
<el-option value="all" label="全部">全部</el-option>
<el-option
:value="item.id"
v-for="(item, index) in levelList"
:key="index"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户分组:">
<el-select v-model="group_id" placeholder="请选择用户分组" clearable class="form_content_width">
<el-form-item label="用户搜索:" label-for="nickname">
<el-input v-model="userFrom.nickname" placeholder="请输入用户" clearable class="form_content_width">
<template #prepend
><el-select v-model="field_key" style="width: 100px">
<el-option value="all" label="全部"></el-option>
<el-option
:value="item.id"
v-for="(item, index) in groupList"
:key="index"
:label="item.group_name"
></el-option>
</el-select>
</el-form-item>
</div>
<el-form-item class="search-form-sub">
<el-button type="primary" v-db-click @click="userSearchs">查询</el-button>
<el-button class="ResetSearch" v-db-click @click="reset('userFrom')">重置</el-button>
<a class="ivu-ml-8 font12 ml10" v-db-click @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
<template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
</a>
<el-option value="uid" label="UID"></el-option>
<el-option value="phone" label="手机号"></el-option>
<el-option value="nickname" label="用户昵称"></el-option> </el-select
></template>
</el-input>
</el-form-item>
<el-form-item label="用户等级:" label-for="level">
<el-select v-model="level" placeholder="请选择用户等级" clearable class="form_content_width">
<el-option value="all" label="全部">全部</el-option>
<el-option
:value="item.id"
v-for="(item, index) in levelList"
:key="index"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户分组:">
<el-select v-model="group_id" placeholder="请选择用户分组" clearable class="form_content_width">
<el-option value="all" label="全部"></el-option>
<el-option
:value="item.id"
v-for="(item, index) in groupList"
:key="index"
:label="item.group_name"
></el-option>
</el-select>
</el-form-item>
<template v-if="collapse">
<el-form-item v-if="distributionEnabled" label="分销等级:">
<el-select v-model="agent_level" placeholder="请选择分销等级" clearable class="form_content_width">
<el-option value="all" label="全部"></el-option>
<el-option
:value="item.grade"
v-for="(item, index) in membershipList"
:key="index"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
</div>
<div v-if="collapse" class="acea-row search-form">
<div class="search-form-box">
<el-form-item label="用户搜索:" label-for="nickname">
<el-input v-model="userFrom.nickname" placeholder="请输入用户" clearable class="form_content_width">
<template #prepend
><el-select v-model="field_key" style="width: 100px">
<el-option value="all" label="全部"></el-option>
<el-option value="uid" label="UID"></el-option>
<el-option value="phone" label="手机号"></el-option>
<el-option value="nickname" label="用户昵称"></el-option> </el-select
></template>
</el-input>
</el-form-item>
<el-form-item label="用户等级:" label-for="level">
<el-select v-model="level" placeholder="请选择用户等级" clearable class="form_content_width">
<el-option value="all" label="全部">全部</el-option>
<el-option
:value="item.id"
v-for="(item, index) in levelList"
:key="index"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户分组:">
<el-select v-model="group_id" placeholder="请选择用户分组" clearable class="form_content_width">
<el-option value="all" label="全部"></el-option>
<el-option
:value="item.id"
v-for="(item, index) in groupList"
:key="index"
:label="item.group_name"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="distributionEnabled" label="分销等级:">
<el-select v-model="agent_level" placeholder="请选择分销等级" clearable class="form_content_width">
<el-option value="all" label="全部"></el-option>
<el-option
:value="item.grade"
v-for="(item, index) in membershipList"
:key="index"
:label="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户标签:" label-for="label_id">
<div class="labelInput acea-row row-between-wrapper" v-db-click @click="openSelectLabel">
<div style="width: 222px">
<div v-if="selectDataLabel.length">
<el-tag :closable="false" v-for="(item, index) in selectDataLabel" :key="index" class="mr10">{{
item.label_name
}}</el-tag>
</div>
<span class="span" v-else>选择用户关联标签</span>
<el-form-item label="用户标签:" label-for="label_id">
<div class="labelInput acea-row row-between-wrapper" v-db-click @click="openSelectLabel">
<div style="width: 222px">
<div v-if="selectDataLabel.length">
<el-tag :closable="false" v-for="(item, index) in selectDataLabel" :key="index" class="mr10">{{
item.label_name
}}</el-tag>
</div>
<div class="ivu-icon ivu-icon-ios-arrow-down"></div>
<span class="span" v-else>选择用户关联标签</span>
</div>
</el-form-item>
<el-form-item label="付费会员:" label-for="isMember">
<el-select v-model="userFrom.isMember" placeholder="请选择" clearable class="form_content_width">
<el-option value="" label="全部"></el-option>
<el-option value="1" label="是"></el-option>
<el-option value="0" label="否"></el-option>
</el-select>
</el-form-item>
<el-form-item label="储值余额:" label-for="balance">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.balance[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="userFrom.balance[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="积分剩余:" label-for="integral">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.integral[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="userFrom.integral[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="上次消费:" label-for="before_pay_time">
<date-range-picker
clearable
v-model="before_pay_time"
:editable="false"
@change="(e) => onchangeTime(e, 'before_pay_time')"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<el-form-item label="下单次数:" label-for="pay_count">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.pay_count_num[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="userFrom.pay_count_num[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="消费金额:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.pay_count_money[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="userFrom.pay_count_money[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="充值次数:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.recharge_count[0]"
class="form_range_content_width"
/>
~
<el-input
clearable
placeholder="最大值"
v-model="userFrom.recharge_count[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="访问情况:" label-for="user_time_type">
<el-select v-model="user_time_type" placeholder="请选择访问情况" clearable class="form_content_width">
<el-option value="" label="全部"></el-option>
<el-option value="visitno" label="时间段未访问"></el-option>
<el-option value="visit" label="时间段访问过"></el-option>
<el-option value="add_time" label="首次访问"></el-option>
</el-select>
</el-form-item>
<el-form-item label="访问时间:" label-for="user_time" v-if="user_time_type">
<date-range-picker
clearable
v-model="timeVal"
:editable="false"
@change="(e) => onchangeTime(e, 'user_time')"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<!-- <el-form-item label="地区:" label-for="country">
<div class="ivu-icon ivu-icon-ios-arrow-down"></div>
</div>
</el-form-item>
<el-form-item label="付费会员:" label-for="isMember">
<el-select v-model="userFrom.isMember" placeholder="请选择" clearable class="form_content_width">
<el-option value="" label="全部"></el-option>
<el-option value="1" label="是"></el-option>
<el-option value="0" label="否"></el-option>
</el-select>
</el-form-item>
<el-form-item label="储值余额:" label-for="balance">
<el-input clearable placeholder="最小值" v-model="userFrom.balance[0]" class="form_range_content_width" />
<span class="ml5 mr5">~</span>
<el-input clearable placeholder="最大值" v-model="userFrom.balance[1]" class="form_range_content_width" />
</el-form-item>
<el-form-item label="积分剩余:" label-for="integral">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.integral[0]"
class="form_range_content_width"
/>
<span class="ml5 mr5">~</span>
<el-input
clearable
placeholder="最大值"
v-model="userFrom.integral[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="上次消费:" label-for="before_pay_time">
<date-range-picker
clearable
width="250px"
v-model="before_pay_time"
:editable="false"
@change="(e) => onchangeTime(e, 'before_pay_time')"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<el-form-item label="下单次数:" label-for="pay_count">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.pay_count_num[0]"
class="form_range_content_width"
/>
<span class="ml5 mr5">~</span>
<el-input
clearable
placeholder="最大值"
v-model="userFrom.pay_count_num[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="消费金额:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.pay_count_money[0]"
class="form_range_content_width"
/>
<span class="ml5 mr5">~</span>
<el-input
clearable
placeholder="最大值"
v-model="userFrom.pay_count_money[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="充值次数:" label-for="store_name">
<el-input
clearable
placeholder="最小值"
v-model="userFrom.recharge_count[0]"
class="form_range_content_width"
/>
<span class="ml5 mr5">~</span>
<el-input
clearable
placeholder="最大值"
v-model="userFrom.recharge_count[1]"
class="form_range_content_width"
/>
</el-form-item>
<el-form-item label="访问情况:" label-for="user_time_type">
<el-select v-model="user_time_type" placeholder="请选择访问情况" clearable class="form_content_width">
<el-option value="" label="全部"></el-option>
<el-option value="visitno" label="时间段未访问"></el-option>
<el-option value="visit" label="时间段访问过"></el-option>
<el-option value="add_time" label="首次访问"></el-option>
</el-select>
</el-form-item>
<el-form-item label="访问时间:" label-for="user_time" v-if="user_time_type">
<date-range-picker
clearable
width="250px"
v-model="timeVal"
:editable="false"
@change="(e) => onchangeTime(e, 'user_time')"
format="YYYY/MM/DD"
value-format="YYYY/MM/DD"
></date-range-picker>
</el-form-item>
<!-- <el-form-item label="地区:" label-for="country">
<el-select
v-model="userFrom.country"
placeholder="请选择国家"
@ -239,17 +185,16 @@
style="width: 250px"
></el-cascader>
</el-form-item> -->
</div>
</template>
<el-form-item class="search-form-sub">
<el-button type="primary" label="default" v-db-click @click="userSearchs">查询</el-button>
<el-button class="ResetSearch" v-db-click @click="reset('userFrom')">重置</el-button>
<a class="ivu-ml-8 font12 ml10" v-db-click @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
<template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
</a>
</el-form-item>
</div>
<el-form-item class="search-form-sub">
<el-button type="primary" label="default" v-db-click @click="userSearchs">查询</el-button>
<el-button class="ResetSearch" v-db-click @click="reset('userFrom')">重置</el-button>
<a class="ivu-ml-8 font12 ml10" v-db-click @click="collapse = !collapse">
<template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
<template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
</a>
</el-form-item>
</el-form>
</div>
</el-card>
@ -1302,19 +1247,4 @@ img {
text-align: right;
background: var(--prev-bg-white);
}
.search-form {
display: flex;
justify-content: space-between;
.search-form-box {
display: flex;
flex-wrap: wrap;
flex: 1;
}
}
.search-form-sub {
display: flex;
}
</style>