resource-admin/src/views/system-manage/param-settings/index.tsx

import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, h, onMounted, reactive} from 'vue'
import {useRoute} from 'vue-router'
import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
import {appKey} from "@/utils/constant";
import {sysApplicationPage} from "@views/menu-manage/api";
import ProjectSetting from "@views/system-manage/param-settings/component/project-setting";

export default defineComponent({
  name: 'param-settings',
  setup() {
    const state = reactive({
      tabName: 'KT' as 'KT' | 'GYT' | 'KLX' | 'GYM',
      appKeyList: [] as any,
      appNameList: [] as any,
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    onMounted(async () => {
      // 获取应用APP信息
      {
        const appKeys = Object.keys(appKey);
        const {data} = await sysApplicationPage({page: 1, rows: 99, parentId: 0})
        const tempList = data.rows || []
        tempList.forEach((next: any) => {
          if (appKeys.includes(next.appKey)) {
            state.appKeyList.push(next.appKey)
            state.appNameList.push(next.appName)
          }
        })
      }
    })

    return () => {
      return (
          <div class="system-menu-container">
            <h2>参数设置</h2>

            <div class={['section-container']} style="padding-top: 0">
              <NTabs
                  type="line"
                  size="large"
                  v-model:value={state.tabName}
                  onUpdate:value={(val: any) => setTabs(val)}
              >
                {state.appKeyList.map((app: any, index: number) => {
                  return h(
                      NTabPane,
                      {
                        name: app,
                        tab: state.appNameList[index]
                      },
                      {
                        default: () => {
                          return h(ProjectSetting, {'appKey': app})
                        }
                      }
                  )
                })}
              </NTabs>
            </div>
          </div>
      )
    }
  }
})