fix(WordTable): 修复添加单词时表单重置不完全的问题

在handleAdd方法中添加nextTick确保DOM更新后重置表单，同时完善resetForm方法清除验证状态

jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletWithdrawal/vue3/AppletWithdrawal.api.ts

@@ -1,64 +0,0 @@
-import {defHttp} from '/@/utils/http/axios';
-import { useMessage } from "/@/hooks/web/useMessage";
-
-const { createConfirm } = useMessage();
-
-enum Api {
-  list = '/appletWithdrawal/appletWithdrawal/list',
-  save='/appletWithdrawal/appletWithdrawal/add',
-  edit='/appletWithdrawal/appletWithdrawal/edit',
-  deleteOne = '/appletWithdrawal/appletWithdrawal/delete',
-  deleteBatch = '/appletWithdrawal/appletWithdrawal/deleteBatch',
-  importExcel = '/appletWithdrawal/appletWithdrawal/importExcel',
-  exportXls = '/appletWithdrawal/appletWithdrawal/exportXls',
-}
-/**
- * 导出api
- * @param params
- */
-export const getExportUrl = Api.exportXls;
-/**
- * 导入api
- */
-export const getImportUrl = Api.importExcel;
-/**
- * 列表接口
- * @param params
- */
-export const list = (params) =>
-  defHttp.get({url: Api.list, params});
-
-/**
- * 删除单个
- */
-export const deleteOne = (params,handleSuccess) => {
-  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
-    handleSuccess();
-  });
-}
-/**
- * 批量删除
- * @param params
- */
-export const batchDelete = (params, handleSuccess) => {
-  createConfirm({
-    iconType: 'warning',
-    title: '确认删除',
-    content: '是否删除选中数据',
-    okText: '确认',
-    cancelText: '取消',
-    onOk: () => {
-      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
-        handleSuccess();
-      });
-    }
-  });
-}
-/**
- * 保存或者更新
- * @param params
- */
-export const saveOrUpdate = (params, isUpdate) => {
-  let url = isUpdate ? Api.edit : Api.save;
-  return defHttp.post({url: url, params});
-}

jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletWithdrawal/vue3/AppletWithdrawal.data.ts

@@ -1,142 +0,0 @@
-import {BasicColumn} from '/@/components/Table';
-import {FormSchema} from '/@/components/Table';
-import { rules} from '/@/utils/helper/validator';
-import { render } from '/@/utils/common/renderUtils';
-import { getWeekMonthQuarterYear } from '/@/utils';
-//列表数据
-export const columns: BasicColumn[] = [
-   {
-    title: '用户id',
-    align:"center",
-    dataIndex: 'userId_dictText'
-   },
-   {
-    title: '申请人',
-    align:"center",
-    dataIndex: 'name'
-   },
-   {
-    title: '提现金额',
-    align:"center",
-    dataIndex: 'money'
-   },
-   {
-    title: '提现方式',
-    align:"center",
-    dataIndex: 'method_dictText'
-   },
-   {
-    title: '凭证上传',
-    align:"center",
-    dataIndex: 'upload',
-    customRender:({text}) => {
-       return  render.renderSwitch(text, [{text:'是',value:'Y'},{text:'否',value:'N'}])
-     },
-   },
-   {
-    title: '审核状态',
-    align:"center",
-    dataIndex: 'status_dictText'
-   },
-   {
-    title: '提现状态',
-    align:"center",
-    dataIndex: 'withdrawStatus_dictText'
-   },
-   {
-    title: '流水号',
-    align:"center",
-    dataIndex: 'waterId_dictText'
-   },
-];
-//查询数据
-export const searchFormSchema: FormSchema[] = [
-];
-//表单数据
-export const formSchema: FormSchema[] = [
-  {
-    label: '用户id',
-    field: 'userId',
-    component: 'JSearchSelect',
-    componentProps:{
-       dict:"applet_user,name,id"
-    },
-  },
-  {
-    label: '申请人',
-    field: 'name',
-    component: 'Input',
-  },
-  {
-    label: '提现金额',
-    field: 'money',
-    component: 'InputNumber',
-  },
-  {
-    label: '提现方式',
-    field: 'method',
-    component: 'JDictSelectTag',
-    componentProps:{
-        dictCode:"applett_translate_type"
-     },
-  },
-  {
-    label: '凭证上传',
-    field: 'upload',
-     component: 'JSwitch',
-     componentProps:{
-     },
-  },
-  {
-    label: '审核状态',
-    field: 'status',
-    component: 'JDictSelectTag',
-    componentProps:{
-        dictCode:"applett_money_type"
-     },
-  },
-  {
-    label: '提现状态',
-    field: 'withdrawStatus',
-    component: 'JDictSelectTag',
-    componentProps:{
-        dictCode:"applet_withdraw_type"
-     },
-  },
-  {
-    label: '流水号',
-    field: 'waterId',
-    component: 'JSearchSelect',
-    componentProps:{
-       dict:"applet_water,number,id"
-    },
-  },
-	// TODO 主键隐藏字段，目前写死为ID
-	{
-	  label: '',
-	  field: 'id',
-	  component: 'Input',
-	  show: false
-	},
-];
-
-// 高级查询数据
-export const superQuerySchema = {
-  userId: {title: '用户id',order: 0,view: 'sel_search', type: 'string',dictTable: "applet_user", dictCode: 'id', dictText: 'name',},
-  name: {title: '申请人',order: 1,view: 'text', type: 'string',},
-  money: {title: '提现金额',order: 2,view: 'number', type: 'number',},
-  method: {title: '提现方式',order: 3,view: 'list', type: 'string',dictCode: 'applett_translate_type',},
-  upload: {title: '凭证上传',order: 4,view: 'switch', type: 'string',},
-  status: {title: '审核状态',order: 5,view: 'list', type: 'string',dictCode: 'applett_money_type',},
-  withdrawStatus: {title: '提现状态',order: 6,view: 'list', type: 'string',dictCode: 'applet_withdraw_type',},
-  waterId: {title: '流水号',order: 7,view: 'sel_search', type: 'string',dictTable: "applet_water", dictCode: 'id', dictText: 'number',},
-};
-
-/**
-* 流程表单调用这个方法获取formSchema
-* @param param
-*/
-export function getBpmFormSchema(_formData): FormSchema[]{
-  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
-  return formSchema;
-}

jeecg-boot/jeecg-boot-module/jeecgboot-boot-applet/src/main/java/org/jeecg/modules/demo/appletWithdrawal/vue3/AppletWithdrawalList.vue

@@ -1,206 +0,0 @@
-<template>
-  <div>
-    <!--引用表格-->
-   <BasicTable @register="registerTable" :rowSelection="rowSelection">
-     <!--插槽:table标题-->
-      <template #tableTitle>
-          <a-button type="primary" v-auth="'appletWithdrawal:applet_withdrawal:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-          <a-button  type="primary" v-auth="'appletWithdrawal:applet_withdrawal:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-          <j-upload-button type="primary" v-auth="'appletWithdrawal:applet_withdrawal:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
-
-          <a-dropdown v-if="selectedRowKeys.length > 0">
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item key="1" @click="batchHandleDelete">
-                    <Icon icon="ant-design:delete-outlined"></Icon>
-                    删除
-                  </a-menu-item>
-                </a-menu>
-              </template>
-              <a-button v-auth="'appletWithdrawal:applet_withdrawal:deleteBatch'">批量操作
-                <Icon icon="mdi:chevron-down"></Icon>
-              </a-button>
-        </a-dropdown>
-        <!-- 高级查询 -->
-        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
-      </template>
-       <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
-      </template>
-      <!--字段回显插槽-->
-      <template v-slot:bodyCell="{ column, record, index, text }">
-      </template>
-    </BasicTable>
-    <!-- 表单区域 -->
-    <AppletWithdrawalModal @register="registerModal" @success="handleSuccess"></AppletWithdrawalModal>
-  </div>
-</template>
-
-<script lang="ts" name="appletWithdrawal-appletWithdrawal" setup>
-  import {ref, reactive, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import AppletWithdrawalModal from './components/AppletWithdrawalModal.vue'
-  import {columns, searchFormSchema, superQuerySchema} from './AppletWithdrawal.data';
-  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './AppletWithdrawal.api';
-  import { downloadFile } from '/@/utils/common/renderUtils';
-  import { useUserStore } from '/@/store/modules/user';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { getDateByPicker } from '/@/utils';
-  //日期个性化选择
-  const fieldPickers = reactive({
-  });
-  const queryParam = reactive<any>({});
-  const checkedKeys = ref<Array<string | number>>([]);
-  const userStore = useUserStore();
-  const { createMessage } = useMessage();
-  //注册model
-  const [registerModal, {openModal}] = useModal();
-  //注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-      tableProps:{
-           title: '提现',
-           api: list,
-           columns,
-           canResize:true,
-           formConfig: {
-              //labelWidth: 120,
-              schemas: searchFormSchema,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
-            },
-           actionColumn: {
-               width: 120,
-               fixed:'right'
-            },
-            beforeFetch: (params) => {
-              if (params && fieldPickers) {
-                for (let key in fieldPickers) {
-                  if (params[key]) {
-                    params[key] = getDateByPicker(params[key], fieldPickers[key]);
-                  }
-                }
-              }
-              return Object.assign(params, queryParam);
-            },
-      },
-       exportConfig: {
-            name:"提现",
-            url: getExportUrl,
-            params: queryParam,
-          },
-          importConfig: {
-            url: getImportUrl,
-            success: handleSuccess
-          },
-  })
-
-  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
-
-  // 高级查询配置
-  const superQueryConfig = reactive(superQuerySchema);
-
-  /**
-   * 高级查询事件
-   */
-  function handleSuperQuery(params) {
-    Object.keys(params).map((k) => {
-      queryParam[k] = params[k];
-    });
-    reload();
-  }
-   /**
-    * 新增事件
-    */
-  function handleAdd() {
-     openModal(true, {
-       isUpdate: false,
-       showFooter: true,
-     });
-  }
-   /**
-    * 编辑事件
-    */
-  function handleEdit(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: true,
-     });
-   }
-   /**
-    * 详情
-   */
-  function handleDetail(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: false,
-     });
-   }
-   /**
-    * 删除事件
-    */
-  async function handleDelete(record) {
-     await deleteOne({id: record.id}, handleSuccess);
-   }
-   /**
-    * 批量删除事件
-    */
-  async function batchHandleDelete() {
-     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
-   }
-   /**
-    * 成功回调
-    */
-  function handleSuccess() {
-      (selectedRowKeys.value = []) && reload();
-   }
-   /**
-      * 操作栏
-      */
-  function getTableAction(record){
-       return [
-         {
-           label: '编辑',
-           onClick: handleEdit.bind(null, record),
-           auth: 'appletWithdrawal:applet_withdrawal:edit'
-         }
-       ]
-   }
-     /**
-        * 下拉操作栏
-        */
-  function getDropDownAction(record){
-       return [
-         {
-           label: '详情',
-           onClick: handleDetail.bind(null, record),
-         }, {
-           label: '删除',
-           popConfirm: {
-             title: '是否确认删除',
-             confirm: handleDelete.bind(null, record),
-             placement: 'topLeft',
-           },
-           auth: 'appletWithdrawal:applet_withdrawal:delete'
-         }
-       ]
-   }
-
-
-
-
-</script>
-
-<style lang="less" scoped>
-  :deep(.ant-picker),:deep(.ant-input-number){
-    width: 100%;
-  }
-</style>

jeecgboot-vue3/src/views/applet/course-page/components/WordTable.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, watch } from 'vue'
+import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
 import { message } from 'ant-design-vue'
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { JImageUpload } from '/@/components/Form'
@@ -264,9 +264,12 @@ const handleTableChange = (pag: any) => {
 }
 
 // 添加单词
-const handleAdd = () => {
+const handleAdd = async () => {
   resetForm()
   modalVisible.value = true
+  // 等待DOM更新后再次重置表单，确保表单完全清空
+  await nextTick()
+  formRef.value?.resetFields()
 }
 
 // 编辑单词
@@ -340,6 +343,7 @@ const handleModalCancel = () => {
 
 // 重置表单
 const resetForm = () => {
+  // 重置表单数据
   Object.assign(formData, {
     id: undefined,
     word: '',
@@ -348,7 +352,11 @@ const resetForm = () => {
     soundmark: '',
     knowledge: '',
   })
-  formRef.value?.resetFields()
+  // 重置表单验证状态
+  if (formRef.value) {
+    formRef.value.resetFields()
+    formRef.value.clearValidate()
+  }
 }
 
 // 组件挂载时加载数据