refactor: 重命名CSS类名以提高代码一致性
将`.vxe-filter-group`重命名为`.vxe-form-filter`,以统一表单过滤组件的类名,提升代码的可读性和维护性。同时更新相关Vue组件中的类名引用,确保功能一致。
This commit is contained in:
parent
8bdaba8509
commit
ef984b75b4
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user