push

lib/paas/view/service/edit-form.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :key="'edieForm_' + $route.name">
+    <page-title :title="title" />
+    <a-page-header>
+      <template #extra>
+        <!--      todo 隐藏取消-->
+        <a-button @click="navigateBack">返回</a-button>
+        <a-button type="primary" @click="submit" :disabled="!nsFormElRef?.validateResult"
+          >保存</a-button
+        >
+      </template>
+    </a-page-header>
+    <div class="add-form">
+      <ns-form ref="nsFormElRef" v-bind="getBindValue" :model="data">
+        <template #[item]="data" v-for="item in Object.keys($slots)">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </ns-form>
+    </div>
+  </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 { useRoute, useRouter } from 'vue-router';
+  import { formProps } from '/nerv-lib/component/form/form/props';
+  import { PropTypes } from '/nerv-lib/util/type';
+  import { useApi, HttpRequestConfig } from '/nerv-lib/use/use-api';
+  import { useNavigate } from '/nerv-lib/use/use-navigate';
+
+  export default defineComponent({
+    name: 'NsViewEditForm',
+    props: {
+      ...formProps,
+      api: PropTypes.string | PropTypes.object,
+      getApi: PropTypes.string,
+      title: PropTypes.string,
+    },
+    setup(props, { attrs }) {
+      const nsFormElRef = ref();
+      const router = useRouter();
+      const { httpRequest } = useApi();
+      const route = useRoute();
+      const { navigateBack } = useNavigate();
+
+      const data = ref<Recordable>({});
+
+      const request = () => {
+        const { api, getApi } = props;
+        const { params, query } = route;
+        const requestConfig: HttpRequestConfig = { method: 'get' };
+        httpRequest({
+          api: getApi ? getApi : api,
+          params: query,
+          pathParams: params,
+          requestConfig,
+        }).then((res: Recordable) => {
+          data.value = res;
+        });
+      };
+
+      request();
+      function submit() {
+        nsFormElRef.value
+          .triggerSubmit()
+          .then((data: Recordable) => {
+            const { api } = props;
+            const { params } = route;
+            const requestConfig: HttpRequestConfig = { method: 'PUT' };
+            httpRequest({ api, params: data, pathParams: params, requestConfig }).then(() => {
+              NsMessage.success('操作成功', 1, () => {
+                navigateBack();
+              });
+            });
+          })
+          .catch(() => ({}));
+      }
+      const getBindValue = computed(() => ({
+        ...attrs,
+        ...props,
+      }));
+      return { nsFormElRef, submit, data, getBindValue, navigateBack };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .ant-page-header {
+    padding: 0 24px;
+    margin-bottom: 15px;
+  }
+
+  :deep(.ant-page-header-heading-extra) {
+    margin-right: auto !important;
+    margin-left: 0;
+  }
+
+  .add-form {
+    padding: 0 24px;
+  }
+</style>