refactor(stock): 替换bootstrap组件为vxe-ui组件并优化删除对话框逻辑

将stock组件中的bootstrap表单组件替换为vxe-ui组件，以统一UI风格并提升用户体验。同时优化删除对话框的逻辑，简化状态管理，避免直接操作DOM元素。

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

@@ -5,6 +5,7 @@ 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 { VxeUI } from 'vxe-pc-ui';
 import { debounce } from 'lodash-es';
 
 export default defineComponent({
@@ -20,7 +21,7 @@ export default defineComponent({
     const stocks = ref([]);
     const statusDicts = ref([]);
     const removeRow = ref(null);
-    const deleteDialog = ref(null);
+    const deleteDialog = ref(false);
     const showFilter = ref(false);
     const propOrder = ref('id');
     const reverse = ref(false);
@@ -188,7 +189,8 @@ export default defineComponent({
 
     const prepareDelete = row => {
       removeRow.value = { ...row };
-      if (deleteDialog.value) deleteDialog.value.show();
+      deleteDialog.value = true;
+      //if (deleteDialog.value) deleteDialog.value.show();
     };
 
     const deleteStock = async () => {
@@ -197,7 +199,8 @@ export default defineComponent({
         alertService.showInfo($t('jewpmsApp.stock.deleted'));
         removeRow.value.id = null;
         queryMethod();
-        if (deleteDialog.value) deleteDialog.value.hide();
+        deleteDialog.value = false;
+        //if (deleteDialog.value) deleteDialog.value.hide();
       } catch (e) {
         alertService.showHttpError(e);
       }

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

@@ -50,24 +50,32 @@
           </div>
         </div>
         <div class="form-group">
-          <label class="form-control-label" for="filter-property">{{ $t('jewpmsApp.stock.property') }}</label>
+          <vxe-text class="form-control-label" for="filter-property">{{ $t('jewpmsApp.stock.property') }}</vxe-text>
-          <b-input-group class="form-control-group">
+          <div class="form-control-group">
-            <b-form-select id="filter-op" v-model="filterParams.property.op" :options="operatorSelect"></b-form-select>
+            <vxe-select
-            <b-form-input id="filter-number" v-model="filterParams.property.value" @change="handleChange"></b-form-input>
+              id="filter-property-op"
-            <div v-if="filterParams.property.value" class="clear-icon" @click="clearInput('property')">
+              v-model="filterParams.property.op"
-              <font-awesome-icon icon="times" />
+              class="vxe-operator"
+              :options="operatorSelect"
+            ></vxe-select>
+            <vxe-input
+              id="filter-property-name"
+              v-model="filterParams.property.value"
+              @change="handleChange"
+              :immediate="false"
+              clearable
+            ></vxe-input>
           </div>
-          </b-input-group>
         </div>
         <div class="form-group">
-          <label class="form-control-label">{{ $t('jewpmsApp.stock.status') }}</label>
+          <vxe-text class="form-control-label">{{ $t('jewpmsApp.stock.status') }}</vxe-text>
-          <b-input-group class="form-control-group">
+          <div class="form-control-group">
-            <b-form-select id="filter-op" v-model="filterParams.status.op" :options="operatorSelect"></b-form-select>
+            <vxe-select id="filter-status-op" v-model="filterParams.status.op" class="vxe-operator" :options="operatorSelect"></vxe-select>
-            <b-form-select id="filter-status" v-model="filterParams.status.value" @change="handleChange">
+            <vxe-select id="filter-status-name" v-model="filterParams.status.value" @change="handleChange" clearable>
-              <option :value="null">{{ $t('entity.action.select') }}</option>
+              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
-              <option v-for="dict in statusDicts" :key="dict.number" :value="dict.number">{{ dict.name }}</option>
+              <vxe-option v-for="dict in statusDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
-            </b-form-select>
+            </vxe-select>
-          </b-input-group>
+          </div>
         </div>
       </div>
     </div>
@@ -120,11 +128,16 @@
     >
     </vxe-pager>
     <!-- 删除确认对话框 -->
-    <b-modal ref="deleteDialog" id="deleteDialog" :title="$t('entity.delete.title')" @ok="deleteStock">
+    <vxe-modal
-      <div class="modal-body">
+      show-footer
-        <p id="jhi-delete-stock-heading" v-text="$t('jewpmsApp.stock.delete.question', { param: removeRow?.name || '' })"></p>
+      show-cancel-button
-      </div>
+      show-confirm-button
-    </b-modal>
+      v-model="deleteDialog"
+      :title="$t('entity.delete.title')"
+      @confirm="deleteStock"
+    >
+      <vxe-text status="warning" class="text-xl">{{ $t('jewpmsApp.stock.delete.question', { param: removeRow?.name || '' }) }}</vxe-text>
+    </vxe-modal>
   </div>
 </template>
 

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

@@ -83,10 +83,19 @@
   width: 80px;
 }
 
-.form-control-group .vxe-input {
+.form-control-group .vxe-input,
+.form-control-group .vxe-select {
   flex: 1 1 auto;
 }
 
+.vxe-modal--body .text-lg {
+  font-size: larger;
+}
+
+.vxe-modal--body .text-xl {
+  font-size: large;
+}
+
 .clear-icon {
   position: absolute;
   right: 5px;