修复管理页错误

src/pages/dig/admin/volunteer.vue

@@ -4,14 +4,8 @@
     <FlexCol :padding="30">
       <DynamicForm
         ref="formRef"
-        :formDefine="formDefine"
-        :formProps="({
-          labelWidth: '160rpx',
-          labelAlign: 'right',
-          innerStyle: {
-            radius: '10rpx',
-          },
-        })"
+        :model="formModel"
+        :options="formDefine"
         :formGlobalParams="querys"
       />
       <Height :height="20" />
@@ -21,11 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
 import { useAliOssUploadCo } from '@/common/components/upload/AliOssUploadCo';
 import { showError } from '@/common/composeabe/ErrorDisplay';
-import { alert } from '@/components/dialog/CommonRoot';
+import { alert, toast } from '@/components/dialog/CommonRoot';
 import { backAndCallOnPageBack } from '@/components/utils/PageAction';
 import { RequestApiError } from '@imengyu/imengyu-utils';
 import DynamicForm from '@/components/dynamic/DynamicForm.vue';
@@ -43,15 +37,17 @@ import type { FieldProps } from '@/components/form/Field.vue';
 import type { PickerIdFieldProps } from '@/components/dynamic/wrappers/PickerIdField';
 import type { RadioValueProps } from '@/components/dynamic/wrappers/RadioValue';
 import type { CheckBoxListProps } from '@/components/dynamic/wrappers/CheckBoxList.vue';
+import type { FormProps } from '@/components/form/Form.vue';
 
 const loading = ref(false);
 
 const formRef = ref<IDynamicFormRef>();
+const formModel = ref<VolunteerInfo>();
 const formDefine : IDynamicFormOptions = {
-  items: [
+  formItems: [
     { 
       label: '用户名', name: 'username', type: 'text',
-      params: { 
+      additionalProps: { 
         placeholder: '请输入用户名',
         disabled: { callback: () => !isNew.value },
       },
@@ -61,7 +57,7 @@ const formDefine : IDynamicFormOptions = {
       label: '密码',
       name: 'password',
       type: 'text',
-      params: { 
+      additionalProps: { 
         placeholder: '请输入密码',
         type: 'password',
       } as FieldProps,
@@ -71,7 +67,7 @@ const formDefine : IDynamicFormOptions = {
       label: '确认密码',
       name: 'passwordRepeat',
       type: 'text',
-      params: { 
+      additionalProps: { 
         placeholder: '请再输入一次密码',
         type: 'password',
       } as FieldProps,
@@ -79,7 +75,7 @@ const formDefine : IDynamicFormOptions = {
         { required: true, message: '请再输入一次密码' },
         {
           async validator(rule, value) {
-            if (value !== formRef.value?.getFormData().password)
+            if (value != formRef.value?.getValueByPath('password'))
               throw '两次输入密码不一致，请检查';
           },
         }
@@ -87,17 +83,17 @@ const formDefine : IDynamicFormOptions = {
     },
     {
       label: '真实名称', name: 'name', type: 'text',
-      params: { placeholder: '请输入真实名称' },
+      additionalProps: { placeholder: '请输入真实名称' },
       rules: [{ required: true, message: '请输入真实名称' }],
     },
     {
       label: '手机号', name: 'mobile', type: 'text',
-      params: { placeholder: '请输入手机号' },
+      additionalProps: { placeholder: '请输入手机号' },
       rules: [{ required: true, message: '请输入手机号' }],
     },
     { 
       label: '区域', name: 'regionId', type: 'select-id',
-      params: {
+      additionalProps: {
         placeholder: '请选择区域',
         disabled: { callback: () => !isNew.value },
         loadData: async () => (await CommonContent.getCategoryList(1)).map(p => ({ text: p.title, value: p.id, raw: p }))
@@ -106,7 +102,7 @@ const formDefine : IDynamicFormOptions = {
     },
     { 
       label: '所属村庄', name: 'villageId', type: 'select-id',
-      params: {
+      additionalProps: {
         placeholder: '请选择所属村庄',
         disabled: { callback: () => !isNew.value },
         loadData: async () => (await VillageApi.getClaimedVallageList()).map(p => ({ text: p.title, value: p.id, raw: p })),
@@ -115,7 +111,7 @@ const formDefine : IDynamicFormOptions = {
     },
     {
       label: '性别', name: 'sex', type: 'radio-value',
-      params: {
+      additionalProps: {
         options: [
           { text: '男', value: 1 },
           { text: '女', value: 2 }
@@ -124,18 +120,18 @@ const formDefine : IDynamicFormOptions = {
     },
     { 
       label: '头像', name: 'image', type: 'uploader',
-      params: {
+      additionalProps: {
         single: true,
         maxFileSize: 1024 * 1024 * 10,
         upload: useAliOssUploadCo('xiangyuan/volunteer/images')
       } as UploaderFieldProps,
     },
-    { label: '地址', name: 'address', type: 'text', params: { placeholder: '请输入地址' } },
+    { label: '地址', name: 'address', type: 'text', additionalProps: { placeholder: '请输入地址' } },
     { 
       label: '介绍', 
       name: 'intro', 
       type: 'textarea', 
-      params: { 
+      additionalProps: { 
         placeholder: '请输入介绍',
         showWordLimit: true,
         maxLength: 200,
@@ -143,7 +139,7 @@ const formDefine : IDynamicFormOptions = {
     },
     { 
       label: '采集版块', name: 'collectModule', type: 'check-box-list', 
-      params: { 
+      additionalProps: { 
         placeholder: '请选择采集版块',
         vertical: true,
         multiple: true,
@@ -157,22 +153,32 @@ const formDefine : IDynamicFormOptions = {
           ,
       } as CheckBoxListProps,
     },
-    { label: '村落认领说明', name: 'claimReason', type: 'text', params: { placeholder: '请输入村落认领说明' } },
+    { label: '村落认领说明', name: 'claimReason', type: 'text', additionalProps: { placeholder: '请输入村落认领说明' } },
   ],
+  formAdditionaProps: {
+    labelWidth: '160rpx',
+    labelAlign: 'right',
+    innerStyle: {
+      radius: '10rpx',
+    },
+  } as Omit<FormProps, 'model'>,
 }
 
 async function submit() {
   if (!formRef.value)
     return;
   try {
-    const data = await formRef.value.submitForm<VolunteerInfo>();
-    if (!data)
-      return;
+    await formRef.value.validate();
+  } catch (e) {
+    toast({ content: '有必填项未填写，请检查' });
+    return;
+  }
+  try {
     loading.value = true;
     if (querys.value.id >= 0) {
-      await VillageApi.updateVolunteer(data);
+      await VillageApi.updateVolunteer(formModel.value!);
     } else {
-      await VillageApi.addVolunteer(data);
+      await VillageApi.addVolunteer(formModel.value!);
     };
     alert({
       title: '操作成功',
@@ -207,7 +213,7 @@ const { querys } = useLoadQuerys({
   let formData = undefined;
 
   try {
-    formRef.value.initFormData(() => new VolunteerInfo());
+    formModel.value = new VolunteerInfo();
     if (querys.id >= 0)
       formData = await VillageApi.getVolunteerInfoById(querys.id);
   } catch (e) {
@@ -218,8 +224,12 @@ const { querys } = useLoadQuerys({
   }
 
   if (formData) {
-    formRef.value.loadFormData(formData);
+    formModel.value = formData;
   }
+   
+  await nextTick();
+
+  formRef.value.initDefaultValuesToModel();
 });
 const isNew = computed(() => querys.value.id < 0);