增加悬浮窗页面功能

src/components/FastMenuConfig/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="container">
+    <div class="table-box">
+      <div class="row mb-sm">
+        <el-button type="primary" @click="showAdd = true">添加</el-button>
+      </div>
+      <el-table
+        :data="tableData.list"
+        v-loading="tableData.loading"
+        stripe
+        border
+        row-key="id"
+        :tree-props="{ children: 'children' }"
+        default-expand-all
+        style="width: 100%"
+      >
+        <el-table-column label="ID" prop="id"></el-table-column>
+        <el-table-column label="菜单名称" prop="isEnable">
+          <template #default="scope">
+            {{ returnMenuName(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="启用状态" prop="isEnable">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              :active-value="1"
+              :inactive-value="0"
+              @change="isEnableChange($event, scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序值" prop="sort"></el-table-column>
+        <el-table-column label="创建时间" prop="createTime"></el-table-column>
+        <el-table-column label="操作" width="250">
+          <template #default="scope">
+            <el-button link type="primary" @click="editMenu(scope.row)">编辑</el-button>
+            <el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
+              <template #reference>
+                <el-button type="danger" link>删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <dialogAdd
+      v-model="showAdd"
+      :parMenus="menus"
+      @success="Refresh()"
+      :item="nowEditMenu"
+    ></dialogAdd>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import MenuAPI from "@/api/account/menu";
+
+import quickApi from "@/api/account/quick";
+
+import dialogAdd from "./dialog-add.vue";
+
+const showAdd = ref(false);
+
+const nowEditMenu = ref({});
+function editMenu(item) {
+  nowEditMenu.value = item;
+  showAdd.value = true;
+}
+const tableData = reactive({
+  loading: false,
+  page: 1,
+  size: 10,
+  total: 0,
+  list: [],
+});
+
+function Refresh() {
+  getList();
+}
+function getList() {
+  tableData.loading = true;
+  quickApi
+    .getList({
+      page: tableData.page,
+      size: tableData.size,
+      isEdit: true,
+    })
+    .then((res) => {
+      tableData.list = res;
+      tableData.total = res.length;
+    })
+    .finally(() => {
+      tableData.loading = false;
+    });
+}
+
+const menus = ref([]);
+async function getMenus() {
+  const res = await MenuAPI.getRoutes();
+  menus.value = res;
+}
+const menusIdMap = computed(() => {
+  const map = getMenuMao();
+  return map;
+});
+function returnMenuName(item) {
+  const menu = menusIdMap.value.get(`${item.menuId}`);
+  return menu.title;
+}
+function getMenuMao() {
+  const map = new Map();
+  for (const menu of menus.value) {
+    map.set(menu.menuId, menu);
+    if (menu.children && menu.children.length > 0) {
+      for (const child of menu.children) {
+        map.set(child.menuId, child);
+      }
+    }
+  }
+  return map;
+}
+function isEnableChange(value, item) {
+  quickApi
+    .edit({
+      ...item,
+      status: value,
+    })
+    .then((res) => {
+      ElMessage({
+        message: "修改成功",
+        type: "success",
+      });
+      Refresh();
+    });
+}
+function deleteHandle(item) {
+  quickApi.delete([item.id]).then(() => {
+    Refresh();
+  });
+}
+onMounted(async () => {
+  await getMenus();
+  getList();
+});
+</script>
+<style lang="scss" scoped>
+.container {
+  padding: 14px;
+  width: 100%;
+  .table-box {
+    border-radius: 8px;
+    background-color: #fff;
+    padding: 14px;
+  }
+}
+</style>