refactor: 重命名CSS类名以提高代码一致性

将`.vxe-filter-group`重命名为`.vxe-form-filter`,以统一表单过滤组件的类名,提升代码的可读性和维护性。同时更新相关Vue组件中的类名引用,确保功能一致。
This commit is contained in:
user 2025-03-29 07:56:34 +08:00
parent 8bdaba8509
commit ef984b75b4
3 changed files with 20 additions and 20 deletions

View File

@ -24,10 +24,10 @@
</vxe-toolbar>
<!-- 过滤表单 -->
<vxe-form v-show="showFilter" custom-layout class="vxe-filter-group" :data="filterParams" title-align="left" title-width="90">
<vxe-form v-show="showFilter" custom-layout class="vxe-form-filter" :data="filterParams" title-align="left" title-width="90">
<vxe-form-item field="number" :title="$t('jewpmsApp.dict.number')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.number.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select
v-model="data.number.value"
@ -43,7 +43,7 @@
</vxe-form-item>
<vxe-form-item field="name" :title="$t('jewpmsApp.dict.name')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.name.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-input v-model="data.name.value" @input="handleInput" clearable></vxe-input>
</div>
@ -51,7 +51,7 @@
</vxe-form-item>
<vxe-form-item field="property" :title="$t('jewpmsApp.dict.property')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select
v-model="data.property.op"
class="vxe-filter-operator"
@ -64,7 +64,7 @@
</vxe-form-item>
<vxe-form-item field="status" :title="$t('jewpmsApp.dict.status')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.status.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable>
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>

View File

@ -27,10 +27,10 @@
</template>
</vxe-toolbar>
<!-- 过滤表单 -->
<vxe-form v-show="showFilter" custom-layout class="vxe-filter-group" :data="filterParams" title-align="left" title-width="90">
<vxe-form v-show="showFilter" custom-layout class="vxe-form-filter" :data="filterParams" title-align="left" title-width="90">
<vxe-form-item field="number" :title="$t('jewpmsApp.stock.number')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.number.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-input v-model="data.number.value" @input="handleInput" clearable></vxe-input>
</div>
@ -38,7 +38,7 @@
</vxe-form-item>
<vxe-form-item field="name" :title="$t('jewpmsApp.stock.name')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.name.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-input v-model="data.name.value" @input="handleInput" clearable></vxe-input>
</div>
@ -46,7 +46,7 @@
</vxe-form-item>
<vxe-form-item field="property" :title="$t('jewpmsApp.stock.property')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select
v-model="data.property.op"
class="vxe-filter-operator"
@ -59,7 +59,7 @@
</vxe-form-item>
<vxe-form-item field="status" :title="$t('jewpmsApp.stock.status')" :item-render="{}">
<template #default="{ data }">
<div class="vxe-form-filter">
<div class="vxe-filter-group">
<vxe-select v-model="data.status.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable>
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>

View File

@ -51,16 +51,16 @@
.vxe-form-group .vxe-input,
.vxe-form-group .vxe-select,
.vxe-form-group .vxe-textarea,
.vxe-filter-group .vxe-input,
.vxe-filter-group .vxe-select,
.vxe-filter-group .vxe-textarea {
.vxe-form-filter .vxe-input,
.vxe-form-filter .vxe-select,
.vxe-form-filter .vxe-textarea {
width: 100%;
}
.vxe-form-group .vxe-form--item-title,
.vxe-form-group .vxe-form--item-content,
.vxe-filter-group .vxe-form--item-title,
.vxe-filter-group .vxe-form--item-content {
.vxe-form-filter .vxe-form--item-title,
.vxe-form-filter .vxe-form--item-content {
min-height: 0rem !important;
}
@ -82,28 +82,28 @@
}
}
.vxe-filter-group .vxe-form-filter {
.vxe-form-filter .vxe-filter-group {
flex: 1;
display: flex;
gap: 5px;
}
.vxe-filter-group .vxe-filter-operator {
.vxe-form-filter .vxe-filter-operator {
max-width: 80px;
}
.vxe-filter-group .vxe-form--item {
.vxe-form-filter .vxe-form--item {
flex: 1 1 calc(33.33% - 10px); /* 计算宽度,确保三列 */
}
@media (max-width: 900px) {
.vxe-filter-group .vxe-form--item {
.vxe-form-filter .vxe-form--item {
flex: 1 1 calc(50% - 10px);
}
}
@media (max-width: 650px) {
.vxe-filter-group .vxe-form--item {
.vxe-form-filter .vxe-form--item {
flex: 1 1 100%;
}
}