xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-19 08:53:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Chuck1sn
2025-05-14 10:16:48 +08:00
commit 3cd59337e7
220 changed files with 23768 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/Alert.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div id="globalAlert" :class="['flex space-x-2 items-center rounded-lg p-4 mb-4 text-sm fixed top-8 right-5 transition-all duration-200 ease-out z-50', alertStore.levelClassName, alertStore.alertStorage.isShow ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full']" role="alert">
<svg v-if="alertStore.alertStorage.level==='info'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<svg v-else-if="alertStore.alertStorage.level === 'warning'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
<svg v-if="alertStore.alertStorage.level === 'success'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<svg v-if="alertStore.alertStorage.level === 'error'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
<span class="font-medium">{{ alertStore.alertStorage.content }}</span>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "../composables/store/useAlertStore";
const alertStore = useAlertStore();
</script>

36
frontend/src/components/Breadcrumbs.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<nav class="flex mb-5" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
<li class="inline-flex items-center">
<RouterLink :to="{name: RouteName.USERVIEW}"
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">
<svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
</path>
</svg>
首页
</RouterLink>
</li>
<li v-for="name in names" :key="name">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-1 text-gray-400 hover:text-primary-600 md:ml-2 dark:text-gray-500 dark:hover:text-white">{{
name }}</span>
</div>
</li>
</ol>
</nav>
</template>
<script setup lang="ts">
import { RouteName } from "@/router/constants";
const { names } = defineProps<{
names: string[];
}>();
</script>

14
frontend/src/components/Dashboard.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import { RouterView } from "vue-router";
import Headbar from "./Headbar.vue";
import Sidebar from "./Sidebar.vue";
</script>
<template>
<Headbar></Headbar>
<Sidebar>
</Sidebar>
<article class="ml-64 mt-14">
<RouterView></RouterView>
</article>
</template>

113
frontend/src/components/DepartmentUpsertModal.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<!-- Main modal -->
<div id="user-upsert-modal" tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
部门管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">部门名称</label>
<input type="text" id="name" v-model="formData.name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required />
</div>
<div class="col-span-2">
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">上级部门</label>
<select id="category" v-model="formData.parentId"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option v-for="department in allDepartments" :key="department.id" :value="department.id"
:selected="department.id === formData.parentId">{{
department.name
}}</option>
</select>
</div>
</div>
<button type="submit" @click="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 self-start mt-5">
保存
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
import type { DepartmentUpsertModel } from "../types/department";
const alertStore = useAlertStore();
const { department, allDepartments, onSubmit } = defineProps<{
department?: components["schemas"]["Department"];
allDepartments: components["schemas"]["Department"][];
closeModal: () => void;
onSubmit: (department: DepartmentUpsertModel) => Promise<void>;
}>();
const formData = ref();
watch(
() => department,
(newDepartment) => {
formData.value = {
id: newDepartment?.id,
name: newDepartment?.name,
parentId: newDepartment?.parentId,
};
},
{ immediate: true },
);
const handleSubmit = async () => {
const schema = z.object({
id: z.number().optional(),
parentId: z.number().nullable().optional(),
name: z
.string({
message: "部门名称不能为空",
})
.min(2, "部门名称至少2个字符"),
});
try {
const validatedData = schema.parse(formData.value);
await onSubmit(validatedData);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
onMounted(() => {
initFlowbite();
});
</script>

135
frontend/src/components/Headbar.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start rtl:justify-end">
<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar"
type="button"
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<span class="sr-only">Open sidebar</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
</path>
</svg>
</button>
<a href="https://www.mjga.cc" target="_blank" class="flex ms-2 md:me-24">
<span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">知路后台管理</span>
</a>
</div>
<div class="flex items-center space-x-3">
<a href="https://github.com/ccmjga/mjga-scaffold" target="_blank"
class="flex items-center border rounded-sm border-gray-300">
<span class=" bg-gray-200 rounded-r-none border-r border-r-gray-300">
<svg class="me-0.5 inline pl-1.5 pb-1 w-6 h-6 text-gray-800 dark:text-white bg-gray-200 "
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="2"
d="M11.083 5.104c.35-.8 1.485-.8 1.834 0l1.752 4.022a1 1 0 0 0 .84.597l4.463.342c.9.069 1.255 1.2.556 1.771l-3.33 2.723a1 1 0 0 0-.337 1.016l1.03 4.119c.214.858-.71 1.552-1.474 1.106l-3.913-2.281a1 1 0 0 0-1.008 0L7.583 20.8c-.764.446-1.688-.248-1.474-1.106l1.03-4.119A1 1 0 0 0 6.8 14.56l-3.33-2.723c-.698-.571-.342-1.702.557-1.771l4.462-.342a1 1 0 0 0 .84-.597l1.753-4.022Z" />
</svg>
<span class="text-sm pl-0.5 pr-2 font-medium">Star</span>
</span>
<span class="text-sm py-0.5 px-2 font-medium">0.45k</span>
</a>
<span class="flex space-x-2">
<svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z">
</path>
</svg>
<svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
</path>
</svg>
</span>
<div class="flex items-center ms-3">
<div>
<button type="button" id="dropdown-button"
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
aria-expanded="false" data-dropdown-toggle="dropdown-user">
<span class="sr-only">Open user menu</span>
<img class="w-8 h-8 rounded-full" src="/public/trump.jpg" alt="user photo">
</button>
</div>
<div
class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm dark:bg-gray-700 dark:divide-gray-600"
id="dropdown-user">
<div class="px-4 py-3" role="none">
<p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
{{ user.username }}
</p>
</div>
<ul class="py-1" role="none">
<li>
<button @click="() => {
userDropDownMenu?.toggle()
router.push(RouteName.SETTINGS)
}"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem">Settings</button>
</li>
<li>
<button @click="() => {
userDropDownMenu?.toggle()
router.push(RouteName.USERVIEW)
}"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem">Dashboard</button>
</li>
<li>
<button @click="handleLogoutClick"
class="flex items-center space-x-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
role="menuitem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-log-out-icon w-4 h-4 lucide-log-out">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7" />
<line x1="21" x2="9" y1="12" y2="12" />
</svg><span>
Sign out
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
<script setup lang="ts">
import useUserStore from "@/composables/store/useUserStore";
import { Dropdown, initFlowbite, type DropdownInterface } from "flowbite";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import useUserAuth from "../composables/auth/useUserAuth";
import { RouteName, RoutePath } from "../router/constants";
const userDropDownMenu = ref<DropdownInterface>();
onMounted(() => {
initFlowbite();
const $dropdownUser = document.getElementById("dropdown-user");
const $dropdownButton = document.getElementById("dropdown-button");
userDropDownMenu.value = new Dropdown(
$dropdownUser,
$dropdownButton,
{},
{ id: "dropdownMenu", override: true },
);
});
const { user } = useUserStore();
const { signOut } = useUserAuth();
const router = useRouter();
const handleLogoutClick = () => {
signOut();
router.push(RoutePath.LOGIN);
};
</script>

103
frontend/src/components/PermissionUpsertModal.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<div :id tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
权限管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">权限名称</label>
<input type="text" name="权限名称" id="name" v-model="formData.name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
required="true">
</div>
<div class="col-span-2">
<label for="code" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">权限编码</label>
<input type="text" id="code" v-model="formData.code"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required />
</div>
</div>
<button type="submit" @click.prevent="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center self-start mt-5">
保存
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import type { PermissionUpsertModel } from "@/types/permission";
import { ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
const { permission, onSubmit, closeModal } = defineProps<{
id: string;
permission?: components["schemas"]["PermissionRespDto"];
closeModal: () => void;
onSubmit: (data: PermissionUpsertModel) => Promise<void>;
}>();
const alertStore = useAlertStore();
const formData = ref();
watch(
() => permission,
(newPermission) => {
formData.value = {
id: newPermission?.id,
name: newPermission?.name,
code: newPermission?.code,
};
},
{ immediate: true },
);
const handleSubmit = async () => {
const permissionSchema = z.object({
id: z.number().optional(),
name: z
.string({
message: "权限名称不能为空",
})
.min(2, "权限名称至少2个字符"),
code: z
.string({
message: "权限代码不能为空",
})
.min(2, "权限代码至少2个字符"),
});
try {
const validatedData = permissionSchema.parse(formData.value);
await onSubmit(validatedData);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
</script>

52
frontend/src/components/PopupModal.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div :id tabindex="-1"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<button type="button" @click="closeModal"
class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center flex flex-col items-center gap-y-3">
<svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
{{ title }}
</h3>
<span>
<button type="button" @click="onSubmit"
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
是
</button>
<button type="button" @click="closeModal"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">否</button>
</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { initFlowbite } from "flowbite";
import { onMounted } from "vue";
defineProps<{
title: string;
id: string;
closeModal: () => void;
onSubmit: (event: Event) => Promise<void>;
}>();
onMounted(() => {
initFlowbite();
});
</script>

102
frontend/src/components/PositionUpsertModal.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<!-- Main modal -->
<div :id tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
岗位管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">岗位名称</label>
<input type="text" id="name" v-model="formData.name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required />
</div>
</div>
<button type="submit" @click="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 self-start mt-5">
保存
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
import type { PositionUpsertModel } from "../types/position";
import { tr } from "@faker-js/faker";
const alertStore = useAlertStore();
const { id, position, onSubmit } = defineProps<{
id: string;
position?: components["schemas"]["Position"];
closeModal: () => void;
onSubmit: (position: PositionUpsertModel) => Promise<void>;
}>();
const formData = ref();
watch(
() => position,
(newPosition) => {
formData.value = {
id: newPosition?.id,
name: newPosition?.name,
};
},
{ immediate: true },
);
const handleSubmit = async () => {
const schema = z.object({
id: z.number().optional(),
name: z
.string({
message: "岗位名称不能为空",
})
.min(2, "岗位名称至少2个字符"),
});
try {
const validatedData = schema.parse(formData.value);
await onSubmit(validatedData);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
onMounted(() => {
initFlowbite();
});
</script>

107
frontend/src/components/RoleUpsertModal.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<div id="role-upsert-modal" tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
角色管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<div class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">角色名称</label>
<input type="text" name="角色名称" id="name" v-model="formData.name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
required="true">
</div>
<div class="col-span-2">
<label for="code" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">角色代码</label>
<input type="text" id="code" v-model="formData.code"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required />
</div>
</div>
<button type="submit" @click.prevent="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center self-start mt-5">
保存
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import type { RoleUpsertModel } from "@/types/role";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
const alertStore = useAlertStore();
const { role, onSubmit } = defineProps<{
role?: components["schemas"]["RoleDto"];
closeModal: () => void;
onSubmit: (data: RoleUpsertModel) => Promise<void>;
}>();
const formData = ref();
watch(
() => role,
(newRole) => {
formData.value = {
id: newRole?.id,
name: newRole?.name,
code: newRole?.code,
};
},
{ immediate: true },
);
const handleSubmit = async () => {
const roleSchema = z.object({
id: z.number().optional(),
name: z
.string({
message: "角色名称不能为空",
})
.min(2, "角色名称至少2个字符"),
code: z
.string({
message: "角色代码不能为空",
})
.min(2, "角色代码至少2个字符"),
});
try {
const validatedData = roleSchema.parse(formData.value);
await onSubmit(validatedData);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
onMounted(() => {
initFlowbite();
});
</script>

88
frontend/src/components/SchedulerUpdateModal.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div :id tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ '更新表达式' }}
</h3>
<button @click="closeModal" type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
</button>
</div>
<form @submit.prevent="handleSubmit" class="p-4 md:p-5">
<div class="grid gap-4 mb-4">
<div>
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Cron 表达式</label>
<input type="text" v-model="formData.cronExpression" name="name" id="name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
</div>
</div>
<button type="submit"
class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
提交
</button>
</form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import type { components } from "@/api/types/schema";
import { ref, watch } from "vue";
import { z } from "zod";
const { job, closeModal, onSubmit } = defineProps<{
id: string;
job?: components["schemas"]["JobTriggerDto"];
closeModal: () => void;
onSubmit: (cronExpression: string) => Promise<void>;
}>();
const alertStore = useAlertStore();
const formData = ref({});
watch(
() => job,
(newJob) => {
if (newJob) {
formData.value = {
cronExpression: newJob.cronExpression,
};
}
},
{ immediate: true },
);
const handleSubmit = async () => {
const jobSchema = z.object({
cronExpression: z
.string({
message: "表达式不可为空",
})
.min(5, "表达式的长度非法"),
});
try {
const validatedData = jobSchema.parse(formData.value);
await onSubmit(validatedData.cronExpression);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
</script>

147
frontend/src/components/Sidebar.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<aside id="logo-sidebar"
class="fixed top-0 left-0 z-30 w-64 min-h-screen overflow-y-auto pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
aria-label="Sidebar">
<div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
<ul class="space-y-2 font-medium">
<!-- <li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.OVERVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide shrink-0 text-gray-600 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white lucide-chart-pie-icon lucide-chart-pie">
<path
d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z" />
<path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
</svg>
<span>
总览
</span>
</RouterLink>
</li> -->
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.USERVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-users-icon lucide-users shrink-0 text-gray-700 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<span>
用户管理
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.ROLEVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-shield-user-icon lucide-shield-user shrink-0 text-gray-700 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
<path d="M6.376 18.91a6 6 0 0 1 11.249.003" />
<circle cx="12" cy="11" r="4" />
</svg>
<span>
角色管理
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.PERMISSIONVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-key-round-icon lucide-key-round shrink-0 text-gray-700 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
<path
d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
</svg>
<span>
权限管理
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.DEPARTMENTVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg class=" text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 15v3c0 .5523.44772 1 1 1h4v-4m-5 0v-4m0 4h5m-5-4V6c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v1.98935M3 11h5v4m9.4708 4.1718-.8696-1.4388-2.8164-.235-2.573-4.2573 1.4873-2.8362 1.4441 2.3893c.3865.6396 1.2183.8447 1.8579.4582.6396-.3866.8447-1.2184.4582-1.858l-1.444-2.38925h3.1353l2.6101 4.27715-1.0713 2.5847.8695 1.4388" />
</svg>
<span>
部门管理
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.POSITIONVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.6144 7.19994c.3479.48981.5999 1.15357.5999 1.80006 0 1.6569-1.3432 3-3 3-1.6569 0-3.00004-1.3431-3.00004-3 0-.67539.22319-1.29865.59983-1.80006M6.21426 6v4m0-4 6.00004-3 6 3-6 2-2.40021-.80006M6.21426 6l3.59983 1.19994M6.21426 19.8013v-2.1525c0-1.6825 1.27251-3.3075 2.95093-3.6488l3.04911 2.9345 3-2.9441c1.7026.3193 3 1.9596 3 3.6584v2.1525c0 .6312-.5373 1.1429-1.2 1.1429H7.41426c-.66274 0-1.2-.5117-1.2-1.1429Z" />
</svg>
<span>
岗位管理
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.SETTINGS}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-user-cog-icon lucide-user-cog shrink-0 text-gray-700 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white">
<circle cx="18" cy="15" r="3" />
<circle cx="9" cy="7" r="4" />
<path d="M10 15H6a4 4 0 0 0-4 4v2" />
<path d="m21.7 16.4-.9-.3" />
<path d="m15.2 13.9-.9-.3" />
<path d="m16.6 18.7.3-.9" />
<path d="m19.1 12.2.3-.9" />
<path d="m19.6 18.7-.4-1" />
<path d="m16.8 12.3-.4-1" />
<path d="m14.3 16.6 1-.4" />
<path d="m20.7 13.8 1-.4" />
</svg>
<span>
个人中心
</span>
</RouterLink>
</li>
<li>
<RouterLink :to="`${RoutePath.DASHBOARD}/${RoutePath.SCHEDULERVIEW}`"
class="flex items-center p-2 gap-x-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span>
定时任务
</span>
</RouterLink>
</li>
</ul>
</div>
</aside>
</template>
<script setup lang="ts">
import { RoutePath } from "@/router/constants";
import { initFlowbite } from "flowbite";
import { onMounted } from "vue";
import { RouterLink } from "vue-router";
onMounted(() => {
initFlowbite();
});
</script>

78
frontend/src/components/TablePagination.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4 px-5 pb-5"
aria-label="Table navigation">
<span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">
显示
<span class="font-semibold text-gray-900 dark:text-white">
{{ displayRange.start }}-{{ displayRange.end }}
</span>
共
<span class="font-semibold text-gray-900 dark:text-white">{{ total }}</span> 条
</span>
<ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
<li>
<a href="#" @click.prevent="handlePageChangeClick(currentPage - 1)" :class="[
'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
{ 'opacity-50 cursor-not-allowed': isFirstPage }
]">上一页</a>
</li>
<li v-for="page in pageNumbers" :key="page">
<button @click.prevent="handlePageChangeClick(page)" :class="[
'flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:text-white',
currentPage === page
? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white'
: 'text-gray-500 bg-white dark:text-gray-400'
]">{{ page }}</button>
</li>
<li>
<button @click.prevent="handlePageChangeClick(currentPage + 1)" :class="[
'flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
{ 'opacity-50 cursor-not-allowed': isLastPage }
]">下一页</button>
</li>
</ul>
</nav>
</template>
<script setup lang="ts">
import { usePagination } from "@/composables/page";
import { watch } from "vue";
const { pageChange, total } = defineProps<{
pageChange: (page: number, size: number) => Promise<void>;
total: number;
}>();
const {
currentPage,
pageNumbers,
pageSize,
displayRange,
isFirstPage,
isLastPage,
totalPages,
updatePaginationState,
} = usePagination();
const handlePageChangeClick = async (page: number) => {
if (page < 1 || page > totalPages.value) return;
await pageChange(page, pageSize.value);
updatePaginationState({
currentPage: page,
pageSize: pageSize.value,
total,
});
};
watch(
() => total,
() => {
updatePaginationState({
currentPage: currentPage.value,
pageSize: pageSize.value,
total,
});
},
);
</script>

150
frontend/src/components/UserUpsertModal.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<!-- Main modal -->
<div id="user-upsert-modal" tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 dark:bg-gray-900/80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
用户管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<form class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">用户名</label>
<input type="text" name="用户名" id="name" v-model="formData.username"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required="true">
</div>
<div class="col-span-2">
<label for="password"
class="block mb-2 text-sm font-medium autocompletetext-gray-900 dark:text-white">密码</label>
<input type="password" id="password" autocomplete="new-password" v-model="formData.password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="非必填" required />
</div>
<div class="col-span-2">
<label for="confirm_password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
<input type="password" id="confirm_password" autocomplete="new-password"
v-model="formData.confirmPassword"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required placeholder="非必填" />
</div>
<div class="col-span-2 sm:col-span-1">
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">状态</label>
<select id="category" v-model="formData.enable"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option :value=true>启用</option>
<option :value=false>禁用</option>
</select>
</div>
</div>
<button type="submit" @click.prevent="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 self-start mt-5">
保存
</button>
</form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import type { UserUpsertSubmitModel } from "@/types/user";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
const alertStore = useAlertStore();
const { user, onSubmit } = defineProps<{
user?: components["schemas"]["UserRolePermissionDto"];
closeModal: () => void;
onSubmit: (data: UserUpsertSubmitModel) => Promise<void>;
}>();
const formData = ref();
watch(
() => user,
(newUser) => {
formData.value = {
id: newUser?.id,
username: newUser?.username,
password: undefined,
enable: newUser?.enable,
confirmPassword: undefined,
};
},
{
immediate: true,
},
);
const handleSubmit = async () => {
const userSchema = z
.object({
id: z.number().optional(),
username: z
.string({
message: "用户名不能为空",
})
.min(4, "用户名至少4个字符"),
enable: z.boolean(),
password: z
.string({
message: "密码不能为空",
})
.min(5, "密码至少5个字符")
.optional(),
confirmPassword: z
.string({
message: "密码不能为空",
})
.min(5, "密码至少5个字符")
.optional(),
})
.refine(
(data) => {
if (!data.password) return true;
return data.password === data.confirmPassword;
},
{
message: "密码输入不一致。",
},
);
try {
const validatedData = userSchema.parse(formData.value);
await onSubmit(validatedData);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
onMounted(() => {
initFlowbite();
});
</script>