wms-elevue/src/views/system/menu/index.vue

<template>
  <div class="menu-index">
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <el-button  type="primary" @click="handleAdd()" v-perm="['sys:menu:add']">
          <template #icon>
            <el-icon>
              <plus />
            </el-icon>
          </template>
          新增
        </el-button>
        <el-button @click="handleExpand"> 展开/折叠</el-button>
      </div>
      </el-card>
      <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <el-table border v-loading="loading" ref="tableRef" :data="lists" row-key="id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="菜单名称" prop="name" min-width="150" show-overflow-tooltip/>
        <el-table-column align="center" label="类型" prop="type" min-width="80">
          <template #default="{ row }">
            <el-tag v-if="row.type ==0">菜单</el-tag>
            <el-tag v-else-if="row.type == 1" type="warning">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否显示" prop="type" min-width="80">
          <template #default="{ row }">
            <span v-if="row.hide ==0">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图标" prop="icon" min-width="80">
          <template #default="{ row }">
            <icon :name="row.icon" :size="20" v-if="row.icon"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="权限标识" prop="permission" min-width="150" show-overflow-tooltip/>
        <el-table-column align="center" label="状态" prop="status" min-width="100">
          <template #default="{ row }">
            <el-tag v-if="row.status == 0">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序" prop="sort" min-width="100"/>
        <el-table-column align="center" label="更新时间" prop="updateTime" min-width="180"></el-table-column>
        <el-table-column align="center" label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.type !== 1"  type="primary" icon="Plus"
                       @click="handleAdd(row.id)" v-perm="['sys:menu:addz']">
              新增
            </el-button>
            <el-button type="warning" @click="handleEdit(row)" icon="Edit" v-perm="['sys:menu:update']">
              编辑
            </el-button>
            <el-button  type="danger" @click="handleDelete(row.id)" icon="Delete" v-perm="['sys:menu:delete']">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <editDialog
        ref="editRef"
        v-if="editVisible"
        :menuId="menuId"
        :pid="pid"
        v-model:visible="editVisible"
        @success="getLists"
    >
    </editDialog>
  </div>
</template>

<script lang="ts" setup name="menu">
import {defineAsyncComponent, nextTick, onMounted, readonly, ref, shallowRef,onActivated} from "vue";
import {getMenuList,menuDelete} from "@/api/system/menu";
import type {ElTable} from "element-plus";
const tableRef = shallowRef<InstanceType<typeof ElTable>>();
import {confirm, message,buildTree} from "@/utils/auth";

const editDialog = defineAsyncComponent(() =>
    import('./edit.vue')
)

const isExpand = ref(false);
const loading = ref(false);
const editVisible=ref(false);
const menuId=ref(0);
const pid=ref(0)
const lists = ref([]);

const getLists = async () => {
  loading.value = true;
  try {
    const data = await getMenuList();
    lists.value = buildTree(data);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

const handleAdd = async (parentId:any) => {
  menuId.value=0
  pid.value=parentId?parentId:0
  await nextTick();
  editVisible.value=true
};

const handleEdit = async (data: any) => {
  menuId.value=data.id
  await nextTick();
  editVisible.value=true
};

const handleDelete = async (menuId: number) => {
  await confirm("确定要删除？");
  try {
    loading.value = true;
    await menuDelete(menuId);
    message("删除成功");
    getLists();
  } catch (e) {
    loading.value = false;
  }
};

const handleExpand = () => {
  isExpand.value = !isExpand.value;
  toggleExpand(lists.value, isExpand.value);
};

const toggleExpand = (children: any[], unfold = true) => {
  for (const key in children) {
    tableRef.value?.toggleRowExpansion(children[key], unfold);
    if (children[key].children) {
      toggleExpand(children[key].children!, unfold);
    }
  }
};

const getAll=()=>{
  getLists();
}


onMounted(() => {
  getAll()
});

// onActivated(() => {
//   getAll()
// });

</script>

<style scoped>

</style>