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

<template>
  <CommonRoot>
    <LoadingPage v-if="loading" /> 
    <FlexCol :padding="30">
      <DynamicForm
        ref="formRef"
        :formDefine="formDefine"
        :formProps="({
          labelWidth: '200rpx',
          labelAlign: 'left',
          innerStyle: {
            borderRadius: '20rpx',
            overflow: 'hidden',
          },
        })"
        :formGlobalParams="querys"
      />
      <Height :height="20" />
      <Button type="primary" @click="submit">提交</Button>
    </FlexCol>
    <XBarSpace />
  </CommonRoot>
</template>

<script setup lang="ts">
import { 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 { FormDefine, FormExport } 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';

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

const formRef = ref<FormExport>();
const formDefine = ref<FormDefine>();

async function submit() {
  if (!formRef.value)
    return;
  try {
    const data = await formRef.value.submitForm<CommonInfoModel>();
    if (!data)
      return;
    loading.value = true;
    data.type = querys.value.subId;
    await VillageInfoApi.updateInfo(
      querys.value.subType,
      querys.value.villageId,
      querys.value.villageVolunteerId,
      data,
    );
  } 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);
    formRef.value.initFormData(() => new model());
    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) {
    formRef.value.loadFormData(formData);
  }
});
</script>