feat: 优化页面
parent
3fede86baa
commit
20a0aea7d8
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Link } from "@arco-design/web-vue";
|
||||
import { Button } from "@arco-design/web-vue";
|
||||
import { IconRefresh, IconSearch } from "@arco-design/web-vue/es/icon";
|
||||
|
||||
export const config = {
|
||||
|
|
@ -25,7 +25,7 @@ export const config = {
|
|||
{{ icon: () => <IconRefresh></IconRefresh>, default: () => "重置" }}
|
||||
</Button>
|
||||
)}
|
||||
<Button type="outline" loading={tableRef?.loading.value} onClick={() => tableRef?.loadData()}>
|
||||
<Button type="primary" loading={tableRef?.loading.value} onClick={() => tableRef?.loadData()}>
|
||||
{{ icon: () => <IconSearch></IconSearch>, default: () => "查询" }}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -166,9 +166,13 @@ export const Table = defineComponent({
|
|||
)}
|
||||
|
||||
<div class={`mb-3 flex justify-between ${!this.inlined && "mt-2"}`}>
|
||||
<div class="flex-1 flex gap-2">
|
||||
<div class={`${this.create || this.$slots.action ? null : '!hidden'} flex-1 flex gap-2 `}>
|
||||
{this.create && (
|
||||
<FormModal ref="createRef" onSubmited={this.reloadData} {...(this.create as any)}></FormModal>
|
||||
<FormModal
|
||||
{...(this.create as any)}
|
||||
ref="createRef"
|
||||
onSubmited={this.reloadData}
|
||||
></FormModal>
|
||||
)}
|
||||
{this.modify && (
|
||||
<FormModal
|
||||
|
|
@ -180,7 +184,9 @@ export const Table = defineComponent({
|
|||
)}
|
||||
{this.$slots.action?.()}
|
||||
</div>
|
||||
<div>{this.inlined && <Form ref="searchRef" {...this.search}></Form>}</div>
|
||||
<div>
|
||||
{this.inlined && <Form ref="searchRef" {...this.search}></Form>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseTable
|
||||
|
|
|
|||
|
|
@ -8,19 +8,37 @@
|
|||
<template #extra>
|
||||
<a-checkbox>全部选择</a-checkbox>
|
||||
</template>
|
||||
<a-tree :data="items" :block-node="true" :field-names="{ title: 'title' }" checkable :default-expand-all="true">
|
||||
</a-card>
|
||||
<a-modal :visible="true" :width="1280" :title="'选择素材'" title-align="start" :closable="false">
|
||||
<div class="w-full h-[600px] flex gap-4">
|
||||
<div class="w-64 p-2 pr-4 border">
|
||||
<a-input-search placeholder="请输入关键字"></a-input-search>
|
||||
<a-tree
|
||||
:data="items"
|
||||
:block-node="true"
|
||||
:field-names="{ title: 'title' }"
|
||||
:default-expand-all="true"
|
||||
class="mt-2"
|
||||
>
|
||||
<template #extra="nodeData">
|
||||
<div class="flex-1 flex justify-end px-1">
|
||||
<a-tag v-if="nodeData.children" color="orange">菜单</a-tag>
|
||||
<a-tag v-else color="green">页面</a-tag>
|
||||
<div class="text-slate-400 mr-2">
|
||||
10
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="flex-1 h-full">
|
||||
<Table v-bind="table"></Table>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</bread-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { api } from '@/api';
|
||||
import { Table, useTable } from '@/components';
|
||||
import { dayjs } from '@/libs/dayjs';
|
||||
import { menus } from "@/router";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
|
||||
|
|
@ -30,7 +48,6 @@ for (const item of items) {
|
|||
if (item.icon) {
|
||||
const icon = item.icon;
|
||||
item.icon = () => <i class={icon}></i>;
|
||||
|
||||
}
|
||||
item.switcherIcon = () => null;
|
||||
if (item.children) {
|
||||
|
|
@ -64,14 +81,125 @@ const onItemChange = (item: any, menu: any) => {
|
|||
menu.checked = true;
|
||||
}
|
||||
};
|
||||
|
||||
const table = useTable({
|
||||
data: async (model, paging) => {
|
||||
return api.role.getRoles();
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "角色名称",
|
||||
dataIndex: "username",
|
||||
width: 180,
|
||||
render({ record }) {
|
||||
return (
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span>{record.name}</span>
|
||||
<span class="text-gray-400 text-xs truncate">{record.slug}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "角色描述",
|
||||
dataIndex: "description",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "createdAt",
|
||||
width: 200,
|
||||
render: ({ record }) => dayjs(record.createdAt).format(),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
type: "button",
|
||||
width: 184,
|
||||
buttons: [
|
||||
{
|
||||
type: "modify",
|
||||
text: "修改",
|
||||
},
|
||||
{
|
||||
text: '分配权限',
|
||||
onClick: ({ record }) => {
|
||||
console.log(record);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "删除",
|
||||
type: "delete",
|
||||
onClick: ({ record }) => {
|
||||
return api.role.delRole(record.id);
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
search: {
|
||||
items: [
|
||||
{
|
||||
extend: "name",
|
||||
required: false,
|
||||
nodeProps: {
|
||||
placeholder: '请输入角色名称'
|
||||
},
|
||||
itemProps: {
|
||||
hideLabel: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
create: {
|
||||
title: "新建角色",
|
||||
modalProps: {
|
||||
width: 580,
|
||||
maskClosable: false,
|
||||
},
|
||||
formProps: {
|
||||
layout: "vertical",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
field: "name",
|
||||
label: "角色名称",
|
||||
type: "input",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: "slug",
|
||||
label: "角色标识",
|
||||
type: "input",
|
||||
},
|
||||
{
|
||||
field: "description",
|
||||
label: "个人描述",
|
||||
type: "textarea",
|
||||
},
|
||||
{
|
||||
field: "permissionIds",
|
||||
label: "关联权限",
|
||||
type: "select",
|
||||
options: () => api.permission.getPermissions(),
|
||||
nodeProps: {
|
||||
multiple: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
submit: ({ model }) => {
|
||||
return api.role.addRole(model);
|
||||
},
|
||||
},
|
||||
modify: {
|
||||
extend: true,
|
||||
title: "修改角色",
|
||||
submit: ({ model }) => {
|
||||
return api.role.updateRole(model.id, model);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.arco-tree-node {
|
||||
&:hover {
|
||||
background: rgb(var(--primary-1));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
|
|
|
|||
|
|
@ -69,13 +69,10 @@ const table = useTable({
|
|||
return api.post.getPosts({ ...model, ...paging });
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
type: "index",
|
||||
},
|
||||
{
|
||||
title: "文章名称",
|
||||
dataIndex: "title",
|
||||
width: 200,
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: "文章描述",
|
||||
|
|
@ -112,6 +109,9 @@ const table = useTable({
|
|||
},
|
||||
],
|
||||
search: {
|
||||
formProps: {
|
||||
layout: 'inline',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
extend: "title",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const table = useTable({
|
|||
{
|
||||
title: "登陆账号",
|
||||
dataIndex: "nickname",
|
||||
width: 200,
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: "操作描述",
|
||||
|
|
@ -37,20 +37,23 @@ const table = useTable({
|
|||
{
|
||||
title: "登陆地址",
|
||||
dataIndex: "ip",
|
||||
width: 200,
|
||||
render: ({ record }) => `${record.addr || "未知"}(${record.ip})`,
|
||||
},
|
||||
{
|
||||
title: "操作系统",
|
||||
dataIndex: "os",
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: "浏览器",
|
||||
dataIndex: "browser",
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: "登陆时间",
|
||||
dataIndex: "createdAt",
|
||||
width: 200,
|
||||
width: 120,
|
||||
render: ({ record }) => dayjs(record.createdAt).fromNow(),
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -60,6 +60,12 @@ const table = useTable({
|
|||
label: "权限名称",
|
||||
type: "input",
|
||||
required: false,
|
||||
nodeProps: {
|
||||
placeholder: '请输入名称关键字'
|
||||
},
|
||||
itemProps: {
|
||||
hideLabel: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -72,6 +78,14 @@ const table = useTable({
|
|||
type: "input",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'order',
|
||||
label: '排序',
|
||||
type: 'number',
|
||||
nodeProps: {
|
||||
min: 0,
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "slug",
|
||||
label: "角色标识",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const table = useTable({
|
|||
{
|
||||
title: "角色名称",
|
||||
dataIndex: "username",
|
||||
width: 200,
|
||||
width: 180,
|
||||
render({ record }) {
|
||||
return (
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
|
|
@ -67,6 +67,12 @@ const table = useTable({
|
|||
{
|
||||
extend: "name",
|
||||
required: false,
|
||||
nodeProps: {
|
||||
placeholder: '请输入角色名称'
|
||||
},
|
||||
itemProps: {
|
||||
hideLabel: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,15 @@
|
|||
<template #content>
|
||||
<a-tabs default-active-key="1" size="large" class="bg-white m-4">
|
||||
<a-tab-pane key="1" title="全部">
|
||||
<Table v-bind="table" class="px-4 pb-4"></Table>
|
||||
<Table v-bind="table" class="px-4 pb-4">
|
||||
<template #action>
|
||||
<a-button status="danger" type="outline" :disabled="true">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-delete"></i>
|
||||
</template>
|
||||
删除</a-button>
|
||||
</template>
|
||||
</Table>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="已通过(12)"></a-tab-pane>
|
||||
</a-tabs>
|
||||
|
|
@ -25,15 +33,19 @@ const table = useTable({
|
|||
{
|
||||
title: "用户昵称",
|
||||
dataIndex: "username",
|
||||
width: 200,
|
||||
width: 180,
|
||||
render: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<Avatar size={32}>
|
||||
<img src={record.avatar} alt="" />
|
||||
<img src={record.avatar || 'https://github.com/juetan.png'} alt="" />
|
||||
</Avatar>
|
||||
<span class="ml-2 flex-1 flex flex-col overflow-hidden">
|
||||
<span>{record.nickname}</span>
|
||||
<span class="text-gray-400 text-xs truncate">{record.username}</span>
|
||||
<span>
|
||||
{record.nickname}
|
||||
</span>
|
||||
<span class="text-gray-400 text-xs truncate">
|
||||
{record.username}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
|
|
@ -45,6 +57,7 @@ const table = useTable({
|
|||
{
|
||||
title: "用户邮箱",
|
||||
dataIndex: "email",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
|
|
@ -55,7 +68,7 @@ const table = useTable({
|
|||
{
|
||||
title: "操作",
|
||||
type: "button",
|
||||
width: 148,
|
||||
width: 110,
|
||||
buttons: [
|
||||
{
|
||||
type: "modify",
|
||||
|
|
|
|||
Loading…
Reference in New Issue