njzscloud-dispose-web/src/pages/sys/menus/Menus.vue

<template>
  <Page>
    <ElForm v-show="showSearchForm" inline @submit.prevent="listAll">
      <ElFormItem label="菜单名称">
        <ElInput v-model="searchForm.title" placeholder="菜单名称"/>
      </ElFormItem>
      <ElFormItem label="路由名称">
        <ElInput v-model="searchForm.routeName" placeholder="路由名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>

    <div class="tool-bar">
      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
    </div>
    <!--
       lazy
      :load="treeLoad"
      -->
    <ElTable v-loading="searching"
      :data="tableData"
      lazy
      :load="treeLoad"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @expand-change="treeLoad"
      cell-class-name="table-cell"
      class="table-list"
      empty-text="暂无数据"
      header-row-class-name="table-header"
      ref="dataTable"
      row-key="id">
      <!-- <ElTableColumn type="expand" width="60"/> -->
      <ElTableColumn label="图标" prop="icon" width="100">
        <template #default="scope">
          <AIcon :name="scope.row.icon"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="类型" prop="menuCategoryTxt" width="140"/>
      <ElTableColumn label="菜单名称" prop="title"/>
      <ElTableColumn label="编码" prop="sn" width="180"/>
      <!-- <ElTableColumn label="路径" prop="breadcrumb"/> -->
      <ElTableColumn label="路由名称" prop="routeName">
        <template #default="scope">
          <span>
            {{ Strings.isBlank(scope.row.routeName) ? '-' : scope.row.routeName }}
          </span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="路由地址" prop="routePath">
        <template #default="scope">
          <span>
            {{ Strings.isBlank(scope.row.routePath) ? '-' : scope.row.routePath }}
          </span>
        </template>
      </ElTableColumn>
      <!-- <ElTableColumn label="排序" prop="sort" width="60"/> -->
      <ElTableColumn label="操作" width="180">
        <template #default="scope">
          <ElPopconfirm
            cancel-button-text="否"
            cancel-button-type="primary"
            confirm-button-text="是"
            confirm-button-type="danger"
            placement="top"
            title="是否删除当前数据?"
            width="180"
            @confirm="delHandler(scope)">
            <template #reference>
              <ElButton :loading="deling" text type="danger">删除</ElButton>
            </template>
          </ElPopconfirm>
          <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <MenuForm ref="menuForm" @editSucc="editSuccHandler"/>

  </Page>
</template>

<script lang="ts" setup>
import MenuApi from '@/pages/sys/menus/menu-api.ts'
import Page from '@/components/page/Page.vue'
import { onMounted } from 'vue'
import { elIcons } from '@/common/element/element.ts'
import MenuForm from '@/pages/sys/menus/MenuForm.vue'
import Strings from '@/common/utils/strings.ts'
import AIcon from '@/components/a-icon/AIcon.vue'
import type { TableInstance } from 'element-plus'

const tableData = ref<MenuTypes.SysMenu[]>([])
const searchForm = ref<MenuTypes.SearchForm>({})
const searching = ref(false)
const showSearchForm = ref(true)
const menuFormIns = useTemplateRef<InstanceType<typeof MenuForm>>('menuForm')
const dataTableIns = useTemplateRef<TableInstance>('dataTable')
const deling = ref(false)

function showDialog(data?: MenuTypes.MenuForm) {
  menuFormIns.value?.open(data)
}
function delHandler({row}: { row: MenuTypes.MenuForm, }) {
  deling.value = true

  MenuApi.del([ row.id! ])
    .then(() => {
      ElMessage.success('删除成功')
      listAll()
    })
    .finally(() => deling.value = false)
}

function modifyHandler({row}: { row: MenuTypes.MenuForm, }) {
  showDialog(row)
}

function addHandler() {
  showDialog()
}

function reset() {
  searchForm.value = {}
  listAll()
}

function editSuccHandler() {
  listAll()
}

function listAll() {
  searching.value = true
  MenuApi.listAll({...searchForm.value, pid: '0'})
    .then(res => {
      tableData.value = []
      tableData.value = res.data?.map(it => {
        it.hasChildren = true
        it.children = []
        return it
      }) ?? []
    })
    .finally(() => {
      searching.value = false
    })
}

function treeLoad(row: MenuTypes.SysMenu, expanded: any, resolve: (data: MenuTypes.SysMenu[]) => void) {
  if (resolve == null && !expanded) return
  searching.value = true
  MenuApi.listAll({...searchForm.value, pid: row.id})
   .then(res => {
     if (resolve!=null){
       resolve(res.data?.map(it => {
         it.hasChildren = true
         return it
       }) ?? [])
     } else {
       dataTableIns.value?.updateKeyChildren(row.id, res.data?.map(it => {
         it.hasChildren = true
         it.children = []
         return it
       }) ?? [])
     }
   })
   .finally(() => {
   searching.value = false
   })
}

onMounted(() => {
  listAll()
})

</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>