增加悬浮窗页面功能

src/components/FastMenuConfig/dialog-add.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '添加'" width="400px" v-model="visible" @closed="resetForm">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
+      <el-form-item label="菜单" prop="menuId">
+        <el-tree-select
+          :check-strictly="true"
+          v-model="form.menuId"
+          :data="menus"
+          :render-after-expand="false"
+          style="width: 240px"
+        ></el-tree-select>
+      </el-form-item>
+
+      <el-form-item label="排序值">
+        <el-input-number v-model="form.sort" :step="1" step-strictly />
+      </el-form-item>
+      <el-form-item label="启用状态">
+        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog_footer">
+        <div class="btn">
+          <el-button size="large" style="width: 100%" @click="visible = false">取 消</el-button>
+        </div>
+        <div class="btn">
+          <el-button
+            size="large"
+            type="primary"
+            :loading="loading"
+            style="width: 100%"
+            @click="submitHandle"
+          >
+            确 定
+          </el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { filterNumberInput } from "@/utils";
+import { roleTemplateAdd } from "@/api/account/roleTemplate";
+import MenuAPI from "@/api/account/menu";
+import quickApi from "@/api/account/quick";
+
+const props = defineProps({
+  isGetMenu: {
+    type: Boolean,
+    required: false,
+  },
+  parMenus: {
+    type: Array,
+    required: false,
+  },
+  item: {
+    type: Object,
+    required: false,
+  },
+});
+watch(
+  () => props.item,
+  (newval) => {
+    if (newval) {
+      form.value = newval;
+    }
+  },
+  { deep: true }
+);
+const menus = ref([]);
+onMounted(async () => {
+  if (!props.isGetMenu) {
+    return;
+  }
+  const res = await MenuAPI.getRoutes();
+  console.log("getRoutes", res);
+  menus.value = returnMenu(res);
+  console.log(menus.value);
+});
+
+watch(
+  () => props.parMenus.length,
+  (newval) => {
+    menus.value = returnMenu(props.parMenus);
+  }
+);
+
+function returnMenu(arr) {
+  let result = [];
+  for (let menu of arr) {
+    menu.label = menu.title;
+    menu.value = menu.menuId;
+    result.push({
+      ...menu,
+      label: menu.title,
+      value: menu.menuId,
+      children: menu.children ? returnMenu(menu.children) : [],
+    });
+  }
+  return result;
+}
+
+const visible = defineModel({
+  type: Boolean,
+  required: false,
+});
+const formRef = ref(null);
+const loading = ref(false);
+const form = ref({
+  menuId: "",
+  sort: 0,
+  url: "",
+  status: 1,
+});
+const rules = ref({
+  menuId: [
+    {
+      required: true,
+      message: "请选择菜单",
+      triiger: "blur",
+    },
+  ],
+});
+
+function resetForm() {
+  form.value = {
+    menuId: "",
+    sort: 0,
+    url: "",
+    status: 1,
+  };
+  formRef.value.resetFields();
+}
+
+// 提交
+const emits = defineEmits(["success"]);
+function submitHandle() {
+  formRef.value.validate(async (vaild) => {
+    try {
+      if (vaild) {
+        loading.value = true;
+        if (form.value.sort === "") {
+          form.value.sort = 0;
+        }
+        await quickApi.add(form.value);
+
+        ElNotification({
+          title: "注意",
+          message: "添加成功",
+          type: "success",
+        });
+
+        emits("success");
+
+        visible.value = false;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.dialog_footer {
+  display: flex;
+  gap: 14px;
+
+  .btn {
+    flex: 1;
+  }
+}
+</style>