<template> <div :key="'edieForm_' + $route.name" class="ns-view"> <ns-page-header class="ns-page-header" :sticky="sticky" :title="title"> <template #extra> <!-- todo 隐藏取消--> <a-button type="primary" @click="submit" :disabled="!nsFormElRef?.validateResult" >提交</a-button > <a-button style="margin-left: 10px" @click="navigateBack">返回</a-button> </template> </ns-page-header> <div class="ns-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 } from 'vue'; import { NsMessage } from '/nerv-lib/component/message'; import { useRoute } 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, getApi: PropTypes.string, title: PropTypes.string, }, setup(props, { attrs }) { const nsFormElRef = ref(); 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> :deep(.ns-page-header) { margin-bottom: 0 !important; } .ns-add-form { :deep(.ns-form) { padding: 32px 24px; // 第一个子表单Title距离顶部为0 &.ns-flex-form-vertical .ns-form-body:first-child .ns-form-item:first-child .ns-form-body .ns-child-form-title { padding-top: 0; } } } </style>