You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

134 lines
3.6 KiB

<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>