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-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="{}"> <vxe-form-item field="number" :title="$t('jewpmsApp.dict.number')" :item-render="{}">
<template #default="{ data }"> <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.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select <vxe-select
v-model="data.number.value" v-model="data.number.value"
@ -43,7 +43,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="name" :title="$t('jewpmsApp.dict.name')" :item-render="{}"> <vxe-form-item field="name" :title="$t('jewpmsApp.dict.name')" :item-render="{}">
<template #default="{ data }"> <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-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> <vxe-input v-model="data.name.value" @input="handleInput" clearable></vxe-input>
</div> </div>
@ -51,7 +51,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="property" :title="$t('jewpmsApp.dict.property')" :item-render="{}"> <vxe-form-item field="property" :title="$t('jewpmsApp.dict.property')" :item-render="{}">
<template #default="{ data }"> <template #default="{ data }">
<div class="vxe-form-filter"> <div class="vxe-filter-group">
<vxe-select <vxe-select
v-model="data.property.op" v-model="data.property.op"
class="vxe-filter-operator" class="vxe-filter-operator"
@ -64,7 +64,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="status" :title="$t('jewpmsApp.dict.status')" :item-render="{}"> <vxe-form-item field="status" :title="$t('jewpmsApp.dict.status')" :item-render="{}">
<template #default="{ data }"> <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.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable> <vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable>
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option> <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>

View File

@ -27,10 +27,10 @@
</template> </template>
</vxe-toolbar> </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="{}"> <vxe-form-item field="number" :title="$t('jewpmsApp.stock.number')" :item-render="{}">
<template #default="{ data }"> <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.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-input v-model="data.number.value" @input="handleInput" clearable></vxe-input> <vxe-input v-model="data.number.value" @input="handleInput" clearable></vxe-input>
</div> </div>
@ -38,7 +38,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="name" :title="$t('jewpmsApp.stock.name')" :item-render="{}"> <vxe-form-item field="name" :title="$t('jewpmsApp.stock.name')" :item-render="{}">
<template #default="{ data }"> <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-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> <vxe-input v-model="data.name.value" @input="handleInput" clearable></vxe-input>
</div> </div>
@ -46,7 +46,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="property" :title="$t('jewpmsApp.stock.property')" :item-render="{}"> <vxe-form-item field="property" :title="$t('jewpmsApp.stock.property')" :item-render="{}">
<template #default="{ data }"> <template #default="{ data }">
<div class="vxe-form-filter"> <div class="vxe-filter-group">
<vxe-select <vxe-select
v-model="data.property.op" v-model="data.property.op"
class="vxe-filter-operator" class="vxe-filter-operator"
@ -59,7 +59,7 @@
</vxe-form-item> </vxe-form-item>
<vxe-form-item field="status" :title="$t('jewpmsApp.stock.status')" :item-render="{}"> <vxe-form-item field="status" :title="$t('jewpmsApp.stock.status')" :item-render="{}">
<template #default="{ data }"> <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.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
<vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable> <vxe-select v-model="data.status.value" @change="handleChange" :immediate="false" clearable>
<vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option> <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-input,
.vxe-form-group .vxe-select, .vxe-form-group .vxe-select,
.vxe-form-group .vxe-textarea, .vxe-form-group .vxe-textarea,
.vxe-filter-group .vxe-input, .vxe-form-filter .vxe-input,
.vxe-filter-group .vxe-select, .vxe-form-filter .vxe-select,
.vxe-filter-group .vxe-textarea { .vxe-form-filter .vxe-textarea {
width: 100%; width: 100%;
} }
.vxe-form-group .vxe-form--item-title, .vxe-form-group .vxe-form--item-title,
.vxe-form-group .vxe-form--item-content, .vxe-form-group .vxe-form--item-content,
.vxe-filter-group .vxe-form--item-title, .vxe-form-filter .vxe-form--item-title,
.vxe-filter-group .vxe-form--item-content { .vxe-form-filter .vxe-form--item-content {
min-height: 0rem !important; min-height: 0rem !important;
} }
@ -82,28 +82,28 @@
} }
} }
.vxe-filter-group .vxe-form-filter { .vxe-form-filter .vxe-filter-group {
flex: 1; flex: 1;
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
.vxe-filter-group .vxe-filter-operator { .vxe-form-filter .vxe-filter-operator {
max-width: 80px; max-width: 80px;
} }
.vxe-filter-group .vxe-form--item { .vxe-form-filter .vxe-form--item {
flex: 1 1 calc(33.33% - 10px); /* 计算宽度,确保三列 */ flex: 1 1 calc(33.33% - 10px); /* 计算宽度,确保三列 */
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.vxe-filter-group .vxe-form--item { .vxe-form-filter .vxe-form--item {
flex: 1 1 calc(50% - 10px); flex: 1 1 calc(50% - 10px);
} }
} }
@media (max-width: 650px) { @media (max-width: 650px) {
.vxe-filter-group .vxe-form--item { .vxe-form-filter .vxe-form--item {
flex: 1 1 100%; flex: 1 1 100%;
} }
} }