refactor(Stock组件): 优化表单控件及输入处理逻辑

- 将表单控件从bootstrap-vue迁移至vxe-table组件，提升一致性
- 使用debounce优化输入处理，减少频繁请求
- 更新CSS样式以适配新的表单控件布局

src/main/webapp/app/entities/stock/stock.component.ts

@@ -5,9 +5,9 @@ import { useAlertService } from '@/shared/alert/alert.service';
 import buildPaginationQuery from '@/shared/sort/sorts';
 import axios from 'axios';
 import type { VxeToolbarInstance, VxeTableInstance, VxePagerEvents } from 'vxe-table';
+import { debounce } from 'lodash-es';
 
 export default defineComponent({
-  compatConfig: { MODE: 3 },
   name: 'Stock',
   setup() {
     const { t: $t } = useI18n();
@@ -40,14 +40,14 @@ export default defineComponent({
     });
 
     const operatorSelect = [
-      { value: '=', text: $t('entity.operator.equal') },
-      { value: '>', text: $t('entity.operator.greaterThan') },
-      { value: '<', text: $t('entity.operator.lessThan') },
-      { value: '>=', text: $t('entity.operator.greaterOrEqual') },
-      { value: '<=', text: $t('entity.operator.lessOrEqual') },
-      { value: '!=', text: $t('entity.operator.notEqual') },
-      { value: 'like', text: $t('entity.operator.like') },
-      { value: 'not like', text: $t('entity.operator.notLike') },
+      { value: '=', text: $t('entity.operator.equal'), label: $t('entity.operator.equal') },
+      { value: '>', text: $t('entity.operator.greaterThan'), label: $t('entity.operator.greaterThan') },
+      { value: '<', text: $t('entity.operator.lessThan'), label: $t('entity.operator.lessThan') },
+      { value: '>=', text: $t('entity.operator.greaterOrEqual'), label: $t('entity.operator.greaterOrEqual') },
+      { value: '<=', text: $t('entity.operator.lessOrEqual'), label: $t('entity.operator.lessOrEqual') },
+      { value: '!=', text: $t('entity.operator.notEqual'), label: $t('entity.operator.notEqual') },
+      { value: 'like', text: $t('entity.operator.like'), label: $t('entity.operator.like') },
+      { value: 'not like', text: $t('entity.operator.notLike'), label: $t('entity.operator.notLike') },
     ];
 
     const columns = [
@@ -111,13 +111,17 @@ export default defineComponent({
     const handlePrint = () => {
       if (tableRef.value) tableRef.value.print();
     };
-    // 处理输入框变化
-    const handleInputChange = () => {
+
+    const handleChange = (vale: any) => {
       if (showFilter.value) {
         queryMethod();
       }
     };
 
+    const handleInput = debounce(event => {
+      handleChange(event);
+    }, 1000);
+
     const sort = () => {
       const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
       if (propOrder.value !== 'id') {
@@ -230,7 +234,8 @@ export default defineComponent({
       pageChange,
       clearInput,
       queryMethod,
-      handleInputChange,
+      handleInput,
+      handleChange,
     };
   },
 });

src/main/webapp/app/entities/stock/stock.vue

@@ -30,30 +30,30 @@
     <div class="form-container" v-show="showFilter">
       <div class="form-section">
         <div class="form-group">
-          <label class="form-control-label" for="filter-number">{{ $t('jewpmsApp.stock.number') }}</label>
-          <b-input-group class="form-control-group">
-            <b-form-select id="filter-number-op" v-model="filterParams.number.op" :options="operatorSelect"></b-form-select>
-            <b-form-input id="filter-number-name" v-model="filterParams.number.value" @change="handleInputChange"></b-form-input>
-            <div v-if="filterParams.number.value" class="clear-icon" @click="clearInput('number')">
-              <font-awesome-icon icon="times" />
-            </div>
-          </b-input-group>
+          <vxe-text class="form-control-label" for="filter-number">{{ $t('jewpmsApp.stock.number') }}</vxe-text>
+          <div class="form-control-group">
+            <vxe-select id="filter-number-op" v-model="filterParams.number.op" class="vxe-operator" :options="operatorSelect"></vxe-select>
+            <vxe-input id="filter-number-name" v-model="filterParams.number.value" @input="handleInput" clearable></vxe-input>
+          </div>
         </div>
         <div class="form-group">
-          <label class="form-control-label" for="filter-name">{{ $t('jewpmsApp.stock.name') }}</label>
-          <b-input-group class="form-control-group">
-            <b-form-select id="filter-name-op" v-model="filterParams.name.op" :options="operatorSelect"></b-form-select>
-            <b-form-input id="filter-name-name" v-model="filterParams.name.value" @change="handleInputChange"></b-form-input>
-            <div v-if="filterParams.name.value" class="clear-icon" @click="clearInput('name')">
-              <font-awesome-icon icon="times" />
-            </div>
-          </b-input-group>
+          <vxe-text class="form-control-label" for="filter-name">{{ $t('jewpmsApp.stock.name') }}</vxe-text>
+          <div class="form-control-group">
+            <vxe-select id="filter-name-op" v-model="filterParams.name.op" class="vxe-operator" :options="operatorSelect"></vxe-select>
+            <vxe-input
+              id="filter-name-name"
+              v-model="filterParams.name.value"
+              @change="handleChange"
+              :immediate="false"
+              clearable
+            ></vxe-input>
+          </div>
         </div>
         <div class="form-group">
           <label class="form-control-label" for="filter-property">{{ $t('jewpmsApp.stock.property') }}</label>
           <b-input-group class="form-control-group">
             <b-form-select id="filter-op" v-model="filterParams.property.op" :options="operatorSelect"></b-form-select>
-            <b-form-input id="filter-number" v-model="filterParams.property.value" @change="handleInputChange"></b-form-input>
+            <b-form-input id="filter-number" v-model="filterParams.property.value" @change="handleChange"></b-form-input>
             <div v-if="filterParams.property.value" class="clear-icon" @click="clearInput('property')">
               <font-awesome-icon icon="times" />
             </div>
@@ -63,7 +63,7 @@
           <label class="form-control-label">{{ $t('jewpmsApp.stock.status') }}</label>
           <b-input-group class="form-control-group">
             <b-form-select id="filter-op" v-model="filterParams.status.op" :options="operatorSelect"></b-form-select>
-            <b-form-select id="filter-status" v-model="filterParams.status.value" @change="handleInputChange">
+            <b-form-select id="filter-status" v-model="filterParams.status.value" @change="handleChange">
               <option :value="null">{{ $t('entity.action.select') }}</option>
               <option v-for="dict in statusDicts" :key="dict.number" :value="dict.number">{{ dict.name }}</option>
             </b-form-select>

src/main/webapp/content/css/edit-form.css

@@ -79,6 +79,14 @@
   flex: 1 1 auto;
 }
 
+.form-control-group .vxe-operator {
+  width: 80px;
+}
+
+.form-control-group .vxe-input {
+  flex: 1 1 auto;
+}
+
 .clear-icon {
   position: absolute;
   right: 5px;