push

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

@@ -0,0 +1,134 @@
+<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>