xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 树loading样式调整

Browse Source
This commit is contained in:
xuziqiang
2024-07-01 15:03:45 +08:00
parent ef782e90b6
commit 7eb8ba79f8
3 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
lib/component/tree/tree-api.vue
View File

@@ -1,25 +1,26 @@
<template> <template>
<a-spin :spinning="treeState.loading">
<div class="ns-tree-form"> <div class="ns-tree-form">
<div v-if="header" class="ns-tree-title"> <div v-show="header" class="ns-tree-title">
<ns-icon :name="header.icon" size="14" /> <ns-icon :name="header.icon" size="14" />
<span>{{ header.title }}</span> <span>{{ header.title }}</span>
</div> </div>
<div v-if="!formConfig?.schema"> <div v-show="!formConfig?.schema">
<ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" /> <ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
</div> </div>
</div> </div>
<div> <a-spin :spinning="treeState.loading">
<div style="min-height: 300px">
<ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys"> <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
<template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index"> <template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
<slot :name="item" v-bind="data || {}"></slot> <slot :name="item" v-bind="data || {}"></slot>
</template> </template>
</ns-tree> </ns-tree>
<!-- <a-empty v-if="!treeData?.length" /> -->
</div> </div>
</a-spin> </a-spin>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, reactive, ref, unref, useAttrs } from 'vue'; import { computed, nextTick, reactive, ref, unref, useAttrs } from 'vue';
import { TreeDataItem } from 'ant-design-vue/es/tree/Tree'; import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
import { useApi } from '/nerv-lib/use/use-api'; import { useApi } from '/nerv-lib/use/use-api';
import { AxiosRequestConfig } from 'axios'; import { AxiosRequestConfig } from 'axios';
@@ -27,14 +28,13 @@
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { debounce } from 'lodash-es'; import { debounce } from 'lodash-es';
import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props'; import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props';
const formElRef = ref();
defineOptions({ defineOptions({
name: 'NsTreeApi', name: 'NsTreeApi',
}); });
const formElRef = ref();
const props = defineProps(treeProps); const props = defineProps(treeProps);
console.log(props);
const treeData = ref<TreeDataItem[]>([]); const treeData = ref<TreeDataItem[]>([]);
const selectedKeys = ref(props.selectedKeys || []); const selectedKeys = ref(props.selectedKeys || []);
const { httpRequest } = useApi(); const { httpRequest } = useApi();
@@ -82,7 +82,6 @@
}) })
.then((res) => { .then((res) => {
treeData.value = transform(get(res, resultField)); treeData.value = transform(get(res, resultField));
console.log(treeData.value, 'treeData.value');
}) })
.finally(() => { .finally(() => {
setLoading(false); setLoading(false);
@@ -123,6 +122,7 @@
} }
& ~ div { & ~ div {
padding: 0 @gap !important; padding: 0 @gap !important;
width: 100%;
} }
} }
</style> </style>

2
lib/saas/view/system/layout/breadcrumb.vue
View File

@@ -87,7 +87,7 @@
width: 100%; width: 100%;
padding: 0 @ns-gap; padding: 0 @ns-gap;
min-height: @ns-nav-shutters-height; min-height: @ns-nav-shutters-height;
background: #ffffff; background: @white;
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;

4
lib/saas/view/system/layout/tags.vue
View File

@@ -299,7 +299,7 @@
// padding: 0 12px; // padding: 0 12px;
min-height: @ns-nav-shutters-height; min-height: @ns-nav-shutters-height;
height: @ns-nav-shutters-height; height: @ns-nav-shutters-height;
background: #ffffff; background: @white;
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;
@@ -312,7 +312,7 @@
// padding: 0 12px; // padding: 0 12px;
min-height: @ns-nav-shutters-height; min-height: @ns-nav-shutters-height;
height: @ns-nav-shutters-height; height: @ns-nav-shutters-height;
background: #ffffff; background: @white;
display: flex; display: flex;
align-items: center; align-items: center;
position: fixed; position: fixed;