refactor(dict): 使用vxe-form重构表单组件以提升代码可维护性

重构了dict-edit和dict组件中的表单部分，使用vxe-form组件替代原有的自定义表单布局，简化了代码结构并提高了可维护性。同时，更新了表单验证逻辑，确保必填字段的校验更加统一和规范。

src/main/webapp/app/entities/dict/dict-edit.component.ts

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useAlertService } from '@/shared/alert/alert.service';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import type { VxeFormInstance } from 'vxe-table';
 
 export default defineComponent({
   name: 'DictUpdate',
@@ -29,9 +30,11 @@ export default defineComponent({
       sortNo: 0,
       version: 0,
     });
-    const rules = {
-      number: [{ required: true, message: $t('validation.required') }],
-      name: [{ required: true, message: $t('validation.required') }],
+    const dictForm = ref<VxeFormInstance>();
+    const formRules = {
+      number: [{ required: true, message: $t('entity.validation.required') }],
+      name: [{ required: true, message: $t('entity.validation.required') }],
+      status: [{ required: true, message: $t('entity.validation.required') }],
     };
 
     const loadData = async () => {
@@ -118,6 +121,12 @@ export default defineComponent({
     };
 
     const save = async () => {
+      const valid = await dictForm.value?.validate();
+      if (valid) {
+        alertService.showError($t('entity.validation.failed'));
+        return;
+      }
+
       isSaving.value = true;
       try {
         if (dictValues.value.length > 0) {
@@ -127,12 +136,6 @@ export default defineComponent({
           }
         }
 
-        // 验证必填字段
-        if (!dict.value.number || !dict.value.name) {
-          alertService.showError($t('validation.required'));
-          return;
-        }
-
         if (dict.value.id) {
           await axios.put(`api/dicts/${dict.value.id}`, dict.value);
           alertService.showInfo($t('jewpmsApp.dict.updated', { param: dict.value.name }));
@@ -164,7 +167,8 @@ export default defineComponent({
       save,
       addNewValue,
       removeValue,
-      rules,
+      dictForm,
+      formRules,
     };
   },
 });

src/main/webapp/app/entities/dict/dict-edit.vue

@@ -20,92 +20,49 @@
     </div>
 
     <div v-else class="form-container">
-      <div class="form-section">
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-number">{{ $t('jewpmsApp.dict.number') }}</vxe-text>
-          <vxe-input
-            type="text"
-            id="dict-number"
-            class="form-edit-input"
-            data-cy="number"
-            name="number"
-            v-model="dict.number"
-            :readonly="!!dict.id"
-            :rules="rules.number"
-          />
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-name">{{ $t('jewpmsApp.dict.name') }}</vxe-text>
-          <vxe-input
-            type="text"
-            id="dict-name"
-            class="form-edit-input"
-            data-cy="name"
-            name="name"
-            v-model="dict.name"
-            clearable
-            :rules="rules.name"
-          />
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-parent-number">{{ $t('jewpmsApp.dict.parentNumber') }}</vxe-text>
-          <vxe-select
-            id="dict-parent-number"
-            class="form-edit-input"
-            data-cy="parentNumber"
-            name="parentNumber"
-            v-model="dict.parentNumber"
-            :placeholder="$t('entity.action.select')"
-            clearable
-          >
-            <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
-            <vxe-option v-for="dict in parentDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
-          </vxe-select>
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-property">{{ $t('jewpmsApp.dict.property') }}</vxe-text>
-          <vxe-input
-            type="text"
-            id="dict-property"
-            class="form-edit-input"
-            data-cy="property"
-            name="property"
-            v-model="dict.property"
-            clearable
-          />
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-remark">{{ $t('jewpmsApp.dict.remark') }}</vxe-text>
-          <textarea id="dict-remark" class="form-edit-value" data-cy="remark" name="remark" v-model="dict.remark"></textarea>
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-status">{{ $t('jewpmsApp.dict.status') }}</vxe-text>
-          <vxe-select id="dict-status" class="form-edit-input" data-cy="status" name="status" v-model="dict.status" clearable>
-            <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
-            <vxe-option v-for="dict in statusDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
-          </vxe-select>
-        </div>
-
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="dict-sort-no">{{ $t('jewpmsApp.dict.sortNo') }}</vxe-text>
-          <vxe-input
-            type="number"
-            id="dict-sort-no"
-            class="form-edit-input"
-            data-cy="sortNo"
-            name="sortNo"
-            v-model="dict.sortNo"
-            min="0"
-            exponential
-            clearable
-          />
-        </div>
-      </div>
+      <vxe-form :data="dict" custom-layout class="vxe-form-group" title-align="left" title-width="90" :rules="formRules" ref="dictForm">
+        <vxe-form-item field="number" :title="$t('jewpmsApp.dict.number')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-input v-model="data.number" type="text" :readonly="!!dict.id" data-cy="number" clearable />
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="name" :title="$t('jewpmsApp.dict.name')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-input v-model="data.name" type="text" clearable data-cy="name" />
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="parentNumber" :title="$t('jewpmsApp.dict.parentNumber')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-select v-model="data.parentNumber" clearable data-cy="parentNumber">
+              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
+              <vxe-option v-for="dict in parentDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="property" :title="$t('jewpmsApp.dict.property')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-input v-model="data.property" type="text" clearable data-cy="property" />
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="status" :title="$t('jewpmsApp.dict.status')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-select v-model="data.status" clearable data-cy="status">
+              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
+              <vxe-option v-for="dict in statusDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
+            </vxe-select>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="sortNo" :title="$t('jewpmsApp.dict.sortNo')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-input v-model="data.sortNo" type="number" min="0" exponential clearable data-cy="sortNo" />
+          </template>
+        </vxe-form-item>
+        <vxe-form-item field="remark" :title="$t('jewpmsApp.dict.remark')" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-textarea v-model="data.remark" data-cy="remark" />
+          </template>
+        </vxe-form-item>
+      </vxe-form>
     </div>
   </div>
 </template>

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

@@ -24,21 +24,13 @@
     </vxe-toolbar>
 
     <!-- 过滤表单 -->
-    <div class="form-container" v-show="showFilter">
-      <div class="form-section">
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="filter-number">{{ $t('jewpmsApp.dict.number') }}</vxe-text>
-          <div class="form-control-group">
+    <vxe-form v-show="showFilter" custom-layout class="vxe-form-group" :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">
+            <vxe-select v-model="data.number.op" class="vxe-filter-operator" :options="operatorSelect" @change="handleChange"></vxe-select>
             <vxe-select
-              id="filter-number-op"
-              v-model="filterParams.number.op"
-              class="form-operator"
-              :options="operatorSelect"
-              @change="handleChange"
-            ></vxe-select>
-            <vxe-select
-              id="filter-number-name"
-              v-model="filterParams.number.value"
+              v-model="data.number.value"
               :options="numberOptions"
               :loading="isLoading"
               :placeholder="$t('entity.action.select')"
@@ -46,51 +38,41 @@
               clearable
             ></vxe-select>
           </div>
-        </div>
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="filter-name">{{ $t('jewpmsApp.dict.name') }}</vxe-text>
-          <div class="form-control-group">
-            <vxe-select
-              id="filter-name-op"
-              v-model="filterParams.name.op"
-              class="form-operator"
-              :options="operatorSelect"
-              @change="handleChange"
-            ></vxe-select>
-            <vxe-input id="filter-name-name" v-model="filterParams.name.value" @input="handleInput" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item field="name" :title="$t('jewpmsApp.dict.name')" :item-render="{}">
+        <template #default="{ data }">
+          <div class="vxe-form-filter">
+            <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>
-        </div>
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label" for="filter-property">{{ $t('jewpmsApp.dict.property') }}</vxe-text>
-          <div class="form-control-group">
+        </template>
+      </vxe-form-item>
+      <vxe-form-item field="property" :title="$t('jewpmsApp.dict.property')" :item-render="{}">
+        <template #default="{ data }">
+          <div class="vxe-form-filter">
             <vxe-select
-              id="filter-property-op"
-              v-model="filterParams.property.op"
-              class="form-operator"
+              v-model="data.property.op"
+              class="vxe-filter-operator"
               :options="operatorSelect"
               @change="handleChange"
             ></vxe-select>
-            <vxe-input id="filter-property-name" v-model="filterParams.property.value" @input="handleInput" clearable></vxe-input>
+            <vxe-input v-model="data.property.value" @input="handleInput" clearable></vxe-input>
           </div>
-        </div>
-        <div class="form-edit-group">
-          <vxe-text class="form-edit-label">{{ $t('jewpmsApp.dict.status') }}</vxe-text>
-          <div class="form-control-group">
-            <vxe-select
-              id="filter-status-op"
-              v-model="filterParams.status.op"
-              class="form-operator"
-              :options="operatorSelect"
-              @change="handleChange"
-            ></vxe-select>
-            <vxe-select id="filter-status-name" v-model="filterParams.status.value" @change="handleChange" :immediate="false" clearable>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item field="status" :title="$t('jewpmsApp.dict.status')" :item-render="{}">
+        <template #default="{ data }">
+          <div class="vxe-form-filter">
+            <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>
               <vxe-option v-for="dict in statusDicts" :key="dict.number" :value="dict.number" :label="dict.name"></vxe-option>
             </vxe-select>
           </div>
-        </div>
-      </div>
-    </div>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
 
     <div class="alert alert-warning" v-if="!isFetching && dicts && dicts.length === 0">
       <span v-text="$t('jewpmsApp.dict.home.notFound')"></span>