SaaS-lib/lib/saas/view/service/view-form.vue

<template>
  <div class="ns-view">
    <a-spin :spinning="isLoading">
      <a-page-header class="ns-page-header" :title="title">
        <template #extra>
          <!--      todo 隐藏取消-->
          <ns-button @click="navigateBack">返 回</ns-button>
          <ns-button
            style="margin-left: 10px"
            type="primary"
            @click="submit"
            :disabled="!nsFormElRef?.validateResult"
            >保 存</ns-button
          >
        </template>
      </a-page-header>
      <div class="ns-add-form">
        <ns-form ref="nsFormElRef" v-bind="getBindValue" :model="formModel">
          <template #[item]="data" v-for="item in Object.keys($slots)">
            <slot :name="item" v-bind="data || {}"></slot>
          </template>
        </ns-form>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, watch } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { NsMessage } from '/nerv-lib/component/message';
  import { formProps } from '/nerv-lib/component/form/form/props';
  import { PropTypes } from '/nerv-lib/util/type';
  import { useNavigate } from '/nerv-lib/use/use-navigate';
  import { HttpRequestConfig, useApi } from '/nerv-lib/use/use-api';
  import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'NsViewForm',
    props: {
      ...formProps,
      api: PropTypes.string,
      editApi: PropTypes.string,
      title: PropTypes.string,
      isEdit: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, { attrs }) {
      const nsFormElRef = ref();
      const { httpRequest } = useApi();
      const isLoading = ref(false);
      const { navigateBack } = useNavigate();
      const route = useRoute();
      const formModel = ref<Recordable>(props.model || {});

      const request = () => {
        const { api, editApi } = props;
        const { params, query } = route;
        const requestConfig: HttpRequestConfig = { method: 'get' };
        httpRequest({
          api: editApi ? editApi : api,
          params: query,
          pathParams: params,
          requestConfig,
        }).then((res: Recordable) => {
          formModel.value = res.data;
        });
      };

      watch(
        [() => props.api, () => props.editApi],
        () => {
          console.log('editApi', props.editApi);
          request();
        },
        {
          immediate: true,
        },
      );

      const getBindValue = computed(() => ({
        ...attrs,
        ...props,
      }));
      function submit() {
        nsFormElRef.value
          .triggerSubmit()
          .then((data: any) => {
            isLoading.value = true;
            http
              .post(props.api, data)
              .then(() => {
                isLoading.value = false;
                NsMessage.success('操作成功', 1, () => {
                  navigateBack();
                });
              })
              .catch(() => {
                isLoading.value = false;
              });
          })
          .catch(() => {});
      }

      return { nsFormElRef, submit, getBindValue, isLoading, navigateBack, formModel };
    },
  });
</script>
<style lang="less" scoped>
  //.ns-page-header {
  //  margin: 0px 16px 20px 0;
  //  border-bottom: 1px solid #f0f2f5;
  //}
  .ns-add-form .ns-vertical-form {
    max-width: 600px;
    margin: 24px auto;
  }
  :deep(.ant-spin-nested-loading) {
    height: 100%;
  }
  .ant-spin-nested-loading {
    height: 100%;
  }
  :deep(.ant-spin-container) {
    height: 100%;
    overflow: hidden;
  }
  :deep(.ns-add-form) {
    height: calc(100% - 83px) !important;
    overflow: auto;
  }
</style>