user、role页面模型

This commit is contained in:
GUjiYN 2024-01-28 23:32:15 +08:00
parent d0867daa58
commit 0b21c7e2df

View File

@ -16,8 +16,8 @@
</div>
<div class="edit">
<a-button class="query-button"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showModal1"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showModal2"><DeleteOutlined />删除用户</a-button>
<a-button class="add-button" @click="showAddDialog"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showDelectDialog"><DeleteOutlined />删除用户</a-button>
</div>
</div>
@ -32,57 +32,47 @@
<div class="table">
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination"
:loading="loading"
@change="handleTableChange">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'user_state'">
<span>
<a-tag
v-for="tag in record.user_state"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span style="margin-left: 10px">
<a-button style="color: dodgerblue" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
<a-button style="color: dodgerblue" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
</span>
</template>
<div>
<a-table
:columns="columns"
:data-source="data"
:loading="loading"
:pagination="pagination"
:row-key="record => record.login.uuid"
@change="handleTableChange"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
</template>
</a-table>
</div>
</div>
</div>
</template>
<script setup>
import {createVNode, ref, computed} from 'vue';
import {
SearchOutlined,
PlusOutlined,
DeleteOutlined,
ExclamationCircleOutlined,
EditOutlined
} from '@ant-design/icons-vue';
import {computed, createVNode, ref} from 'vue';
import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import { usePagination } from 'vue-request';
import {usePagination} from 'vue-request';
import axios from 'axios';
import request from '@/public/request.js'
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);
const open2 = ref(false);
let data = null
const token = window.localStorage.getItem('token')
const requestBody = {
"page": null,
"limit": null,
"search": null,
"role": null
}
const showModal1 = () => {
const showAddDialog = () => {
open1.value = true;
};
const handleOk = e => {
@ -90,8 +80,7 @@ const handleOk = e => {
open1.value = false;
};
const open2 = ref(false);
const showModal2 = () => {
const showDelectDialog = () => {
open2.value = true;
};
const hideModal = () => {
@ -107,7 +96,6 @@ const showDeleteConfirm = () => {
okText: '确认',
cancelText: '取消',
});
};
const columns = [
@ -116,121 +104,36 @@ const columns = [
dataIndex: 'id',
key: 'id',
},
{
title: '账户昵称',
dataIndex: 'name',
key: 'name',
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
{
title: '账户昵称',
dataIndex: 'nickname',
key: 'nickname',
},
{
title: '电话',
key: 'tel',
dataIndex: 'tel',
key: 'phone',
dataIndex: 'phone',
},
{
title: '用户状态',
dataIndex: 'user_state',
key: 'user_state',
dataIndex: 'enabled',
key: 'enabled',
},
{
title: '更新时间',
key: 'updatetime',
dataIndex: 'updatetime'
key: 'updatedAt',
dataIndex: 'updatedAt'
},
{
title: '操作',
key: 'action',
},
];
const data = [
{
key: '1',
id:'1',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '2',
id:'2',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '3',
id:'3',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '4',
id:'4',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '5',
id:'5',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '6',
id:'6',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '7',
id:'7',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '8',
id:'8',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
{
key: '9',
id:'9',
name: 'John Brown',
username: 32,
tel: '123456789',
user_state:['启用'],
updatetime:'1.28',
},
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
@ -238,7 +141,6 @@ const rowSelection = {
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User',
// Column configuration not to be checked
name: record.name,
}),
};
@ -248,8 +150,10 @@ const queryData = params => {
params,
});
};
request.userAllCurrent(requestBody, token).then((res) => {
data = res.data.data.users
})
const {
data: dataSource,
run,
loading,
current,