diantou/src_product/iam/audit/workbench/quicknav/iam-quick-nav.vue

<template>
  <div :class="$style.navWrap">
    <a-card :bordered="false">
      <a-icon slot="extra" type="setting" :class="$style.navsetting" @click="openNavConfig" />
      <template v-slot:title>
        <a-icon type="sd-appstore" :class="$style.theme" />
        快捷导航
      </template>
      <div :class="$style.quickNav">
        <iam-quick-link v-for="(link, index) in quicklinks" :key="index" v-bind="link">
        </iam-quick-link>
        <a-skeleton v-if="loading" :loading="loading" />
        <a-empty v-if="emptyloading" description="暂无快捷导航~"> </a-empty>
      </div>
    </a-card>

    <sd-quick-config
      v-if="visible"
      ref="quickmodal"
      :visible="visible"
      :is-sys="false"
      :form-id="formid"
      :quicklinks="quicklinks"
      @handleCancel="handleCancel"
      @navDataClick="saveNav"
    ></sd-quick-config>
  </div>
</template>

<script>
import navMenuService from '@/frame/nav-menu-service'
import sdQuickConfig from '@/workbench/sd-quick-config'
import components from './_import-components/iam-quick-nav-import'
export default {
  name: 'IamQuickNav',
  components: {
    ...components,
    sdQuickConfig,
  },
  data() {
    return {
      formid: 'oaPersonalQuickMenu',
      quicklinks: [],
      selectorData: [],
      visible: false,
      loading: true,
      emptyloading: false,
    }
  },
  created() {
    this.getQuicksList()
  },
  methods: {
    getQuicksList() {
      navMenuService.getQuickMenus().then((data) => {
        this.loading = false
        if (data === '' || data === [] || data.length === 0) {
          this.quicklinks = []
          this.emptyloading = true
        } else {
          this.quicklinks = data
          this.emptyloading = false
        }
      })
    },
    // 打开快捷导航配置
    openNavConfig() {
      this.visible = true
    },
    // 快捷导航数据处理
    saveNav(data) {
      this.getQuicksList()
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: 165px;
}
.nav-wrap {
  height: 100%;
  :global(.ant-card-head-title) {
    padding: 20px 0;
  }
}
</style>