xiangyuan-gov-app/src/pages/dig/forms/common.vue

<template>
  <CommonRoot>
    <LoadingPage v-if="loading" /> 
    <FlexCol :padding="30">
      <DynamicForm
        ref="formRef"
        :options="formDefine"
        :model="formModel"formModel
        :globalParams="querys"
      />
      <Height :height="20" />
      <Button type="primary" @click="submit">提交</Button>
    </FlexCol>
    <XBarSpace />
  </CommonRoot>
</template>

<script setup lang="ts">
import { nextTick, ref, type Ref } from 'vue';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { getVillageInfoForm } from './forms';
import { RequestApiError } from '@imengyu/imengyu-utils';
import VillageInfoApi, { CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import LoadingPage from '@/components/display/loading/LoadingPage.vue';
import Button from '@/components/basic/Button.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import Height from '@/components/layout/space/Height.vue';
import { backAndCallOnPageBack } from '@/components/utils/PageAction';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import { toast } from '@/components/utils/DialogAction';

const loading = ref(false);
const subTitle = ref('');

const formRef = ref<IDynamicFormRef>();
const formModel = ref(new CommonInfoModel()) as Ref<CommonInfoModel>;
const formDefine = ref<IDynamicFormOptions>({
  formItems: [],
  formAdditionaProps: {
    labelWidth: '220rpx',
    labelAlign: 'left',
    innerStyle: {
      borderRadius: '20rpx',
      overflow: 'hidden',
    },
  },
});

async function submit() {
  if (!formRef.value)
    return;
  try {
    await formRef.value.validate();
  } catch {
    toast('有必填项未填写，请检查');
    return;
  }
  try {
    loading.value = true;
    formModel.value.type = querys.value.subId;
    await VillageInfoApi.updateInfo(
      querys.value.subType,
      querys.value.villageId,
      querys.value.villageVolunteerId,
      formModel.value as CommonInfoModel,
    );
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}
function backPrev(needRefresh: boolean) {
  backAndCallOnPageBack('list', {
    needRefresh,
  });
}

const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
  subType: '',
  subId: 0,
  subTitle: '',
  id: 0,
}, async (querys) => {
  loading.value = true;
  if (querys.subTitle) {
    subTitle.value = querys.subTitle;
    uni.setNavigationBarTitle({  title: subTitle.value + '详情', })
  }
  if (!formRef.value)
    return;

  let formData = undefined;

  try {
    const [model, forms] = getVillageInfoForm(querys.subType, querys.subId);
    formModel.value = new model() as any;
    formDefine.value = {
      ...formDefine.value,
      ...forms(formRef as any)
    };
    if (querys.id >= 0)
      formData = await VillageInfoApi.getInfo(
        querys.subType, 
        querys.subId,
        querys.villageId, 
        querys.villageVolunteerId,
        querys.id,
        model,
      );
  } catch (e) {
    if (!(e instanceof RequestApiError && e.errorMessage.startsWith('请完成')))
      showError(e, undefined, () => backPrev(false));
  } finally {
    loading.value = false;
  }

  if (formData) {
    formModel.value = formData as any;
  }

  await nextTick();

  formRef.value.initDefaultValuesToModel();

  console.log(formModel.value);
  
});
</script>