xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-04-03 10:56:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix bind view

Browse Source
This commit is contained in:
Chuck1sn
2025-06-11 10:06:36 +08:00
parent f65349f246
commit a30d63ebdd
5 changed files with 110 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/Breadcrumbs.vue
View File

@@ -12,14 +12,17 @@
首页 首页
</RouterLink> </RouterLink>
</li> </li>
<li v-for="(name, index) in names" :key="index"> <li v-for="(item, index) in breadcrumbs" :key="index">
<div class="flex items-center"> <div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 mx-1.5 sm:mx-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" <svg class="w-3 h-3 text-gray-400 mx-1.5 sm:mx-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10"> fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" /> d="m1 9 4-4-4-4" />
</svg> </svg>
<span class="font-medium text-gray-500 truncate">{{ name }}</span> <RouterLink v-if="item.route" :to="item.route" class="font-medium text-gray-500 hover:text-blue-600 truncate">
{{ item.name }}
</RouterLink>
<span v-else class="font-medium text-gray-500 truncate">{{ item.name }}</span>
</div> </div>
</li> </li>
</ol> </ol>
@@ -28,8 +31,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouteName } from "@/router/constants"; import { RouteName } from "@/router/constants";
import { computed } from "vue";
import type { RouteLocationRaw } from "vue-router";
const { names } = defineProps<{ interface BreadcrumbItem {
names: string[]; name: string;
route?: RouteLocationRaw;
}
const props = defineProps<{
names: string[];
routes?: RouteLocationRaw[];
}>(); }>();
const breadcrumbs = computed<BreadcrumbItem[]>(() => {
return props.names.map((name, index) => {
return {
name,
route: props.routes?.[index]
};
});
});
</script> </script>

49
frontend/src/views/BindDepartmentView.vue
View File

@@ -1,29 +1,37 @@
<template> <template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg"> <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 col-span-full"> <div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['用户管理', '绑定部门']" /> <Breadcrumbs :names="['用户管理', '绑定部门']" :routes="[{ name: RouteName.USERVIEW }]" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">绑定部门</h1> <h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">绑定部门</h1>
</div> </div>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
<form class="w-full sm:max-w-xs"> <form class="w-full sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label> <div class="flex-grow">
<div class="relative"> <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div class="relative">
<svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
viewBox="0 0 20 20"> <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20">
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" /> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</svg> d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="departmentName"
class="block w-full p-2.5 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="部门名" required />
</div> </div>
<input type="search" id="default-search" v-model="departmentName"
class="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="部门名" required />
<button type="submit"
class="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 sm:px-4 sm:py-2"
@click.prevent="handleSearch">搜索</button>
</div> </div>
<select id="bind-state" v-model="bindState"
class="w-full xs:w-auto bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5"
@click.prevent="handleSearch">搜索</button>
</form> </form>
<div class="flex items-center justify-end gap-2"> <div class="flex gap-x-2">
<TableButton variant="primary" @click="() => { <TableButton variant="primary" @click="() => {
if (checkedDepartmentIds.length === 0) { if (checkedDepartmentIds.length === 0) {
alertStore.showAlert({ alertStore.showAlert({
@@ -51,7 +59,7 @@
</div> </div>
</div> </div>
<!-- 移动端卡片布局 --> <!-- 移动端卡片布局 -->
<div class="md:hidden"> <div class="md:hidden space-y-4">
<MobileCardListWithCheckbox :items="departments || []" v-model="checkedDepartmentIds"> <MobileCardListWithCheckbox :items="departments || []" v-model="checkedDepartmentIds">
<template #title="{ item }"> <template #title="{ item }">
{{ item.name }} {{ item.name }}
@@ -109,6 +117,7 @@ import TableButton from "@/components/TableButton.vue";
import TableFormLayout from "@/components/TableFormLayout.vue"; import TableFormLayout from "@/components/TableFormLayout.vue";
import TablePagination from "@/components/TablePagination.vue"; import TablePagination from "@/components/TablePagination.vue";
import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery"; import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery";
import { RouteName } from "@/router/constants";
import { Modal, type ModalInterface, initFlowbite } from "flowbite"; import { Modal, type ModalInterface, initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";

49
frontend/src/views/BindPermissionView.vue
View File

@@ -1,29 +1,37 @@
<template> <template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg"> <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 col-span-full"> <div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['角色管理', '绑定权限']" /> <Breadcrumbs :names="['角色管理', '绑定权限']" :routes="[{ name: RouteName.ROLEVIEW }]" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">绑定权限</h1> <h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">绑定权限</h1>
</div> </div>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
<form class="w-full sm:max-w-xs"> <form class="w-full sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label> <div class="flex-grow">
<div class="relative"> <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div class="relative">
<svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
viewBox="0 0 20 20"> <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20">
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" /> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</svg> d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="permissionName"
class="block w-full p-2.5 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="权限名" required />
</div> </div>
<input type="search" id="default-search" v-model="permissionName"
class="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="权限名" required />
<button type="submit"
class="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 sm:px-4 sm:py-2"
@click.prevent="handleSearch">搜索</button>
</div> </div>
<select id="bind-state" v-model="bindState"
class="w-full xs:w-auto bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5"
@click.prevent="handleSearch">搜索</button>
</form> </form>
<div class="flex items-center justify-end gap-2"> <div class="flex gap-x-2">
<TableButton variant="primary" @click="() => { <TableButton variant="primary" @click="() => {
if (checkedPermissionIds.length === 0) { if (checkedPermissionIds.length === 0) {
alertStore.showAlert({ alertStore.showAlert({
@@ -52,7 +60,7 @@
</div> </div>
<!-- 移动端卡片布局 --> <!-- 移动端卡片布局 -->
<div class="md:hidden"> <div class="md:hidden space-y-4">
<MobileCardListWithCheckbox :items="permissions || []" v-model="checkedPermissionIds"> <MobileCardListWithCheckbox :items="permissions || []" v-model="checkedPermissionIds">
<template #title="{ item }"> <template #title="{ item }">
{{ item.name }} {{ item.name }}
@@ -110,7 +118,6 @@ import UnModal from "@/components/PopupModal.vue";
import TableButton from "@/components/TableButton.vue"; import TableButton from "@/components/TableButton.vue";
import TableFormLayout from "@/components/TableFormLayout.vue"; import TableFormLayout from "@/components/TableFormLayout.vue";
import TablePagination from "@/components/TablePagination.vue"; import TablePagination from "@/components/TablePagination.vue";
import { useMobileStyles } from "@/composables/useMobileStyles";
import { RouteName } from "@/router/constants"; import { RouteName } from "@/router/constants";
import { Modal, type ModalInterface, initFlowbite } from "flowbite"; import { Modal, type ModalInterface, initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from "vue";

48
frontend/src/views/BindPositionView.vue
View File

@@ -1,29 +1,37 @@
<template> <template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg"> <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 col-span-full"> <div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['用户管理', '绑定岗位']" /> <Breadcrumbs :names="['用户管理', '绑定岗位']" :routes="[{ name: RouteName.USERVIEW }]" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">绑定岗位</h1> <h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">绑定岗位</h1>
</div> </div>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
<form class="w-full sm:max-w-xs"> <form class="w-full sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label> <div class="flex-grow">
<div class="relative"> <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div class="relative">
<svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
viewBox="0 0 20 20"> <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20">
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" /> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
</svg> d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" v-model="positionName"
class="block w-full p-2.5 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="岗位名" required />
</div> </div>
<input type="search" id="default-search" v-model="positionName"
class="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
placeholder="岗位名" required />
<button type="submit"
class="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 sm:px-4 sm:py-2"
@click.prevent="handleSearch">搜索</button>
</div> </div>
<select id="bind-state" v-model="bindState"
class="w-full xs:w-auto bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5">
<option value="BIND">已绑定</option>
<option value="UNBIND">未绑定</option>
<option value="ALL">全部</option>
</select>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5"
@click.prevent="handleSearch">搜索</button>
</form> </form>
<div class="flex items-center justify-end gap-2"> <div class="flex gap-x-2">
<TableButton variant="primary" @click="() => { <TableButton variant="primary" @click="() => {
if (checkedPositionIds.length === 0) { if (checkedPositionIds.length === 0) {
alertStore.showAlert({ alertStore.showAlert({
@@ -52,7 +60,7 @@
</div> </div>
<!-- 移动端卡片布局 --> <!-- 移动端卡片布局 -->
<div class="md:hidden"> <div class="md:hidden space-y-4">
<MobileCardListWithCheckbox :items="positions || []" v-model="checkedPositionIds"> <MobileCardListWithCheckbox :items="positions || []" v-model="checkedPositionIds">
<template #title="{ item }"> <template #title="{ item }">
{{ item.name }} {{ item.name }}

4
frontend/src/views/BindRoleView.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg"> <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 sm:mb-6 col-span-full"> <div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['角色分配']" /> <Breadcrumbs :names="['用户管理', '角色分配']" :routes="[{ name: RouteName.USERVIEW }]" />
<h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1> <h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1>
</div> </div>
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
@@ -120,9 +120,7 @@ import TableButton from "@/components/TableButton.vue";
import TableFormLayout from "@/components/TableFormLayout.vue"; import TableFormLayout from "@/components/TableFormLayout.vue";
import TablePagination from "@/components/TablePagination.vue"; import TablePagination from "@/components/TablePagination.vue";
import { useRolesQuery } from "@/composables/role/useRolesQuery"; import { useRolesQuery } from "@/composables/role/useRolesQuery";
import { useMobileStyles } from "@/composables/useMobileStyles";
import { RouteName } from "@/router/constants"; import { RouteName } from "@/router/constants";
import { tr } from "@faker-js/faker";
import { Modal, type ModalInterface, initFlowbite } from "flowbite"; import { Modal, type ModalInterface, initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";