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>
<div class="edit"> <div class="edit">
<a-button class="query-button"><SearchOutlined />查询</a-button> <a-button class="query-button"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showModal1"><PlusOutlined />新增用户</a-button> <a-button class="add-button" @click="showAddDialog"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button" @click="showModal2"><DeleteOutlined />删除用户</a-button> <a-button class="delete-button" @click="showDelectDialog"><DeleteOutlined />删除用户</a-button>
</div> </div>
</div> </div>
@ -32,32 +32,17 @@
<div class="table"> <div class="table">
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="pagination" <div>
<a-table
:columns="columns"
:data-source="data"
:loading="loading" :loading="loading"
@change="handleTableChange"> :pagination="pagination"
<template #bodyCell="{ column, record }"> :row-key="record => record.login.uuid"
<template v-if="column.key === 'name'"> @change="handleTableChange"
<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() }} <template #bodyCell="{ column, text }">
</a-tag> <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
</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>
</template> </template>
</a-table> </a-table>
</div> </div>
@ -65,24 +50,29 @@
</template> </template>
<script setup> <script setup>
import {createVNode, ref, computed} from 'vue'; import {computed, createVNode, ref} from 'vue';
import { import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
SearchOutlined,
PlusOutlined,
DeleteOutlined,
ExclamationCircleOutlined,
EditOutlined
} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue"; import {Modal} from "ant-design-vue";
import {usePagination} from 'vue-request'; import {usePagination} from 'vue-request';
import axios from 'axios'; import axios from 'axios';
import request from '@/public/request.js'
const value1 = ref(''); const value1 = ref('');
const value2 = ref(''); const value2 = ref('');
const open1 = ref(false); 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 showAddDialog = () => {
const showModal1 = () => {
open1.value = true; open1.value = true;
}; };
const handleOk = e => { const handleOk = e => {
@ -90,8 +80,7 @@ const handleOk = e => {
open1.value = false; open1.value = false;
}; };
const open2 = ref(false); const showDelectDialog = () => {
const showModal2 = () => {
open2.value = true; open2.value = true;
}; };
const hideModal = () => { const hideModal = () => {
@ -107,7 +96,6 @@ const showDeleteConfirm = () => {
okText: '确认', okText: '确认',
cancelText: '取消', cancelText: '取消',
}); });
}; };
const columns = [ const columns = [
@ -116,121 +104,36 @@ const columns = [
dataIndex: 'id', dataIndex: 'id',
key: 'id', key: 'id',
}, },
{
title: '账户昵称',
dataIndex: 'name',
key: 'name',
},
{ {
title: '用户名', title: '用户名',
dataIndex: 'username', dataIndex: 'username',
key: 'username', key: 'username',
}, },
{
title: '账户昵称',
dataIndex: 'nickname',
key: 'nickname',
},
{ {
title: '电话', title: '电话',
key: 'tel', key: 'phone',
dataIndex: 'tel', dataIndex: 'phone',
}, },
{ {
title: '用户状态', title: '用户状态',
dataIndex: 'user_state', dataIndex: 'enabled',
key: 'user_state', key: 'enabled',
}, },
{ {
title: '更新时间', title: '更新时间',
key: 'updatetime', key: 'updatedAt',
dataIndex: 'updatetime' dataIndex: 'updatedAt'
}, },
{ {
title: '操作', title: '操作',
key: 'action', 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 = { const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
@ -238,7 +141,6 @@ const rowSelection = {
}, },
getCheckboxProps: record => ({ getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', disabled: record.name === 'Disabled User',
// Column configuration not to be checked
name: record.name, name: record.name,
}), }),
}; };
@ -248,8 +150,10 @@ const queryData = params => {
params, params,
}); });
}; };
request.userAllCurrent(requestBody, token).then((res) => {
data = res.data.data.users
})
const { const {
data: dataSource,
run, run,
loading, loading,
current, current,