183 lines
3.9 KiB
Vue
183 lines
3.9 KiB
Vue
<template>
|
||
<BreadPage>
|
||
<UserTable />
|
||
<PasswordModal></PasswordModal>
|
||
</BreadPage>
|
||
</template>
|
||
|
||
<script setup lang="tsx">
|
||
import { api } from '@/api';
|
||
import { useFormModal, useTable } from 'arconify';
|
||
|
||
defineOptions({ name: 'SystemDepartmentPage' });
|
||
|
||
const PasswordModal = useFormModal({
|
||
trigger: false,
|
||
modalProps: {
|
||
title: '重置密码',
|
||
width: 432,
|
||
},
|
||
model: {
|
||
id: undefined,
|
||
nickname: undefined,
|
||
},
|
||
items: [
|
||
{
|
||
field: 'password',
|
||
label: '新密码',
|
||
setter: 'input',
|
||
},
|
||
],
|
||
submit: model => api.user.setUser(model.id, model as any),
|
||
});
|
||
|
||
const usernameRender = ({ record }) => (
|
||
<div class="flex items-center gap-4 w-full overflow-hidden">
|
||
<a-avatar size={32} class="!bg-brand-500">
|
||
{record.avatar?.startsWith('/') ? <img src={record.avatar} alt="" /> : record.nickname?.[0]}
|
||
</a-avatar>
|
||
<div class="w-full flex-1 overflow-hidden">
|
||
<div>
|
||
<span class="cursor-pointer hover:text-brand-500">{record.nickname}</span>
|
||
<span class="text-gray-400 text-xs truncate ml-2">@{record.username}</span>
|
||
</div>
|
||
<div class="w-full text-gray-400 space-x-4 text-xs">
|
||
<span>
|
||
<i class="icon-park-outline-mail mr-1 align-[-4px]"></i>
|
||
contact@juetan.cn
|
||
</span>
|
||
<span>
|
||
<i class="icon-park-outline-phone-telephone mr-1"></i>
|
||
1591234568
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const UserTable = useTable({
|
||
columns: [
|
||
{
|
||
title: '用户昵称',
|
||
dataIndex: 'username',
|
||
render: usernameRender,
|
||
},
|
||
{
|
||
title: '操作',
|
||
type: 'button',
|
||
width: 200,
|
||
align: 'right',
|
||
buttons: [
|
||
{
|
||
text: '重置密码',
|
||
onClick: ({ record }) => open(record),
|
||
},
|
||
{
|
||
type: 'modify',
|
||
text: '修改',
|
||
},
|
||
{
|
||
type: 'delete',
|
||
text: '删除',
|
||
onClick: async ({ record }) => {
|
||
return api.user.delUser(record.id, { toast: true });
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
data: async model => {
|
||
const res = await api.user.getUsers(model);
|
||
const { data, total } = res.data as any;
|
||
return { data, total };
|
||
},
|
||
search: [
|
||
{
|
||
field: 'nickname',
|
||
label: '用户昵称',
|
||
setter: 'search',
|
||
},
|
||
],
|
||
create: {
|
||
modalProps: {
|
||
title: '新建用户',
|
||
width: 820,
|
||
},
|
||
formProps: {
|
||
class: '!grid grid-cols-2 gap-x-6',
|
||
},
|
||
items: [
|
||
{
|
||
field: 'avatar',
|
||
label: '用户头像',
|
||
setter: 'input',
|
||
setterProps: {
|
||
class: 'col-span-2',
|
||
},
|
||
},
|
||
{
|
||
field: 'username',
|
||
label: '登录账号',
|
||
setter: 'input',
|
||
required: true,
|
||
placeholder: '英文字母+数组组成，5~10位',
|
||
},
|
||
// {
|
||
// field: 'password',
|
||
// label: '登陆密码',
|
||
// setter: 'input',
|
||
// placeholder: '包含大小写，长度6 ~ 12位',
|
||
// },
|
||
{
|
||
field: 'nickname',
|
||
label: '用户昵称',
|
||
setter: 'input',
|
||
},
|
||
{
|
||
field: 'roleIds',
|
||
label: '关联角色',
|
||
setter: 'select',
|
||
options: () => api.role.getRoles() as any,
|
||
setterProps: {
|
||
multiple: true,
|
||
},
|
||
},
|
||
{
|
||
field: 'description',
|
||
label: '个人描述',
|
||
setter: 'textarea',
|
||
itemProps: {
|
||
class: 'col-span-2',
|
||
},
|
||
setterProps: {
|
||
class: 'h-[96px]',
|
||
},
|
||
},
|
||
],
|
||
submit: model => {
|
||
return api.user.addUser(model as any);
|
||
},
|
||
},
|
||
modify: {
|
||
extend: true,
|
||
|
||
submit: model => {
|
||
return api.user.setUser(model.id, model as any);
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style scoped></style>
|
||
|
||
<route lang="json">
|
||
{
|
||
"meta": {
|
||
"name": "SystemDepartmentPage",
|
||
"sort": 10301,
|
||
"title": "部门管理",
|
||
"icon": "icon-park-outline-group"
|
||
}
|
||
}
|
||
</route>
|