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

fix table button

Browse Source
This commit is contained in:
Chuck1sn
2025-06-15 17:10:16 +08:00
parent f011086fcf
commit fe3ebdf931
3 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/TableFilterForm.vue
View File

@@ -1,6 +1,7 @@
<template>
<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 min-w-[200px] sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
<form
class="grid grid-cols-2 sm:grid-cols-1 w-full min-w-[200px] sm:w-auto gap-2 xs:gap-3 items-stretch xs:items-center">
<template v-for="(filter, index) in filters" :key="index">
<!-- 输入框类型 -->
<div v-if="filter.type === 'input'" class="flex-grow">
@@ -32,7 +33,6 @@
</select>
</div>
</template>
<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-3 py-2 min-w-[70px] flex items-center justify-center"
@click.prevent="handleSearch">
@@ -45,7 +45,7 @@
</form>
<!-- 额外操作按钮插槽 -->
<div class="w-full sm:w-auto">
<div class="flex justify-end">
<slot name="actions"></slot>
</div>
</div>

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

@@ -1,15 +1,15 @@
<template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['用户管理', '角色分配']" :routes="[{ name: RouteName.USERVIEW }]" />
<h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1>
</div>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<div class="mb-4 sm:mb-6 col-span-full">
<Breadcrumbs :names="['用户管理', '角色分配']" :routes="[{ name: RouteName.USERVIEW }]" />
<h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1>
</div>
<TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
@update:values="updateFilterValues">
<template #actions>
<div class="flex gap-x-2">
<TableButton variant="primary" @click="() => {
<TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
@update:values="updateFilterValues">
<template #actions>
<div class="flex gap-x-2">
<TableButton variant="primary" @click="() => {
if (checkedRoleIds.length === 0) {
alertStore.showAlert({
content: '没有选择角色',
@@ -19,9 +19,9 @@
roleBindModal?.show();
}
}">
绑定
</TableButton>
<TableButton variant="danger" @click="() => {
绑定
</TableButton>
<TableButton variant="danger" @click="() => {
if (checkedRoleIds.length === 0) {
alertStore.showAlert({
content: '没有选择角色',
@@ -31,60 +31,60 @@
roleUnbindModal?.show();
}
}">
解绑
</TableButton>
</div>
</template>
</TableFilterForm>
解绑
</TableButton>
</div>
</template>
</TableFilterForm>
<!-- 移动端卡片布局 -->
<div class="md:hidden space-y-4">
<MobileCardListWithCheckbox :items="roles" v-model="checkedRoleIds">
<template #title="{ item }">
{{ item.name }}
</template>
<template #status="{ item }">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
<span class="text-sm">{{ item.isBound === true ? "已绑定" : "未绑定" }}</span>
</div>
</template>
<template #content="{ item }">
<div>
<p class="text-xs font-medium text-gray-600">角色编码</p>
<p class="text-sm text-gray-900 mt-0.5">{{ item.code }}</p>
</div>
</template>
</MobileCardListWithCheckbox>
</div>
<!-- 移动端卡片布局 -->
<div class="md:hidden space-y-4">
<MobileCardListWithCheckbox :items="roles" v-model="checkedRoleIds">
<template #title="{ item }">
{{ item.name }}
</template>
<template #status="{ item }">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
<span class="text-sm">{{ item.isBound === true ? "已绑定" : "未绑定" }}</span>
</div>
</template>
<template #content="{ item }">
<div>
<p class="text-xs font-medium text-gray-600">角色编码</p>
<p class="text-sm text-gray-900 mt-0.5">{{ item.code }}</p>
</div>
</template>
</MobileCardListWithCheckbox>
</div>
<!-- PC端表格布局 -->
<div class="hidden md:block">
<TableFormLayout :items="roles || []" :columns="columns" :hasCheckbox="true" v-model="checkedRoleIds"
@all-checked-change="allChecked = $event">
<template #code="{ item }">
{{ item.code }}
</template>
<template #name="{ item }">
{{ item.name }}
</template>
<template #bindState="{ item }">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'">
</div>
{{ item.isBound === true ? "已绑定" : "未绑定" }}
</div>
</template>
</TableFormLayout>
</div>
<!-- PC端表格布局 -->
<div class="hidden md:block">
<TableFormLayout :items="roles || []" :columns="columns" :hasCheckbox="true" v-model="checkedRoleIds"
@all-checked-change="allChecked = $event">
<template #code="{ item }">
{{ item.code }}
</template>
<template #name="{ item }">
{{ item.name }}
</template>
<template #bindState="{ item }">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'">
</div>
{{ item.isBound === true ? "已绑定" : "未绑定" }}
</div>
</template>
</TableFormLayout>
</div>
<TablePagination :pageChange="handlePageChange" :total="total" />
</div>
<TablePagination :pageChange="handlePageChange" :total="total" />
</div>
<BindModal :id="'role-bind-modal'" :closeModal="() => {
<BindModal :id="'role-bind-modal'" :closeModal="() => {
roleBindModal!.hide();
}" :onSubmit="handleBindRoleSubmit" title="确定绑定选中的角色吗"></BindModal>
<UnModal :id="'role-unbind-modal'" :closeModal="() => {
<UnModal :id="'role-unbind-modal'" :closeModal="() => {
roleUnbindModal!.hide();
}" :onSubmit="handleUnbindRoleSubmit" title="确定解绑选中的角色吗"></UnModal>
</template>

7
frontend/src/views/UserView.vue
View File

@@ -8,12 +8,12 @@
<TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
@update:values="updateFilterValues">
<template #actions>
<Button :handleClick="() => handleUpsertUserClick(undefined)" :isLoading="false" :abortable="false"
submitContent="新增用户" class="w-full sm:w-auto">
<TableButton variant="primary" @click="() => handleUpsertUserClick(undefined)">
<template #icon>
<PlusIcon class="w-4 h-4 me-2" />
</template>
</Button>
新增用户
</TableButton>
</template>
</TableFilterForm>
@@ -185,6 +185,7 @@ import { useRouter } from "vue-router";
import type { components } from "../api/types/schema";
import useAlertStore from "../composables/store/useAlertStore";
import { useUserUpsert } from "../composables/user/useUserUpsert";
import TableButton from "@/components/TableButton.vue";
const filterConfig: FilterItem[] = [
{