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.
102 lines
3.1 KiB
102 lines
3.1 KiB
7 months ago
|
<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>
|