WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user、role页面模型

Browse Source
This commit is contained in:
GUjiYN 2024-01-28 19:40:36 +08:00
parent e067ca3c76
commit d0867daa58
4 changed files with 609 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
package-lock.json generated
View File

@ -12,6 +12,7 @@
"ant-design-vue": "^4.1.1",
"axios": "^1.6.7",
"vue": "^3.3.11",
"vue-request": "^2.0.4",
"vue-router": "^4.2.5"
},
"devDependencies": {
@ -1774,6 +1775,51 @@
}
}
},
"node_modules/vue-request": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/vue-request/-/vue-request-2.0.4.tgz",
"integrity": "sha512-+Tu5rDy6ItF9UdD21Mmbjiq5Pq6NZSN9juH72hNQTMn1whHh4KZPTKWVLK2YS4nzbuEnPs+82G91AA2Fgd93mg==",
"dependencies": {
"vue-demi": "latest"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-request/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-router": {
"version": "4.2.5",
"resolved": "https://mirrors.cloud.tencent.com/npm/vue-router/-/vue-router-4.2.5.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"ant-design-vue": "^4.1.1",
"axios": "^1.6.7",
"vue": "^3.3.11",
"vue-request": "^2.0.4",
"vue-router": "^4.2.5"
},
"devDependencies": {

310
src/Manager/components/Role.vue
View File

@ -1,3 +1,307 @@
<template>
角色管理
</template>
<template xmlns="">
<div class="main">
<div class="header">
<div class="input">
<a-input class="first-input" v-model:value="value1" addonBefore="角色名称" placeholder="请输入角色名称" />
<a-select
placeholder="请选择状态"
ref="select"
style="width: 120px"
@focus="focus"
>
<a-select-option value="启用">启用</a-select-option>
<a-select-option value="禁用">禁用</a-select-option>
</a-select>
</div>
<div class="edit">
<a-button class="query-button"><SearchOutlined />查询</a-button>
<a-button class="add-button" @click="showModal1"><PlusOutlined />新增角色</a-button>
</div>
</div>
<!--新增、删除角色对话框-->
<a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
<p>新增</p>
</a-modal>
<a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
<p>删除</p>
</a-modal>
<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 === 'role_name'">
<a>
{{ record.role_name }}
</a>
</template>
<template v-else-if="column.key === 'role_state'">
<span>
<a-tag
v-for="tag in record.role_state"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'role_action'">
<span style="margin-left: 10px">
<a-button class="button2" type="text" @click="showModal1" size="small"><EditOutlined />修改</a-button>
<a-button class="button1" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>
</span>
</template>
</template>
</a-table>
</div>
</div>
</template>
<script setup>
import {createVNode, ref, computed} from 'vue';
import {SearchOutlined, PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, EditOutlined} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import { usePagination } from 'vue-request';
import axios from 'axios';
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);
const showModal1 = () => {
open1.value = true;
};
const handleOk = e => {
console.log(e);
open1.value = false;
};
const open2 = ref(false);
const showModal2 = () => {
open2.value = true;
};
const hideModal = () => {
open2.value = false;
};
const showDeleteConfirm = () => {
console.log("delete Dialog")
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: '确认删除这条数据吗',
okText: '确认',
cancelText: '取消',
});
};
const columns = [
{
title: '角色名称',
dataIndex: 'role_name',
key: 'role_name',
},
{
title: '排序',
dataIndex: 'role_id',
key: 'role_id',
},
{
title: '角色状态',
dataIndex: 'role_state',
key: 'role_state',
},
{
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
},
{
title: '更新时间',
key: 'update_time',
dataIndex: 'update_time'
},
{
title: '操作',
key: 'role_action',
dataIndex: 'role_action'
},
];
const data = [
{
key: '1',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '2',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '3',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '4',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '5',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '6',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '7',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
{
key: '8',
role_name: 'John Brown',
role_id: 32,
role_state: ['启用'],
create_time:'1.28',
update_time:'1.28',
},
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.role_name === 'Disabled User',
// Column configuration not to be checked
role_name: record.role_name,
}),
};
const queryData = params => {
return axios.get('https://randomuser.me/api?noinfo', {
params,
});
};
const {
data: dataSource,
run,
loading,
current,
pageSize,
} = usePagination(queryData, {
formatResult: res => res.data.results,
pagination: {
currentKey: 'page',
pageSizeKey: 'results',
},
});
const pagination = computed(() => ({
total: 200,
current: current.value,
pageSize: pageSize.value,
}));
const handleTableChange = (pag, filters, sorter) => {
run({
results: pag.pageSize,
page: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
</script>
<style scoped>
.main {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.header {
display: flex;
}
.input {
width: 20vw;
margin-top: 2vh;
margin-bottom: 1vh;
display: flex;
flex-direction: row;
}
.first-input {
margin-right: 1vw;
margin-left: 1vw;
}
.edit {
margin-top: 2vh;
width: 20vw;
display: flex;
}
.query-button {
background-color: dodgerblue;
color:white;
margin-left: 4vw;
margin-right: 1vw;
}
.add-button {
background-color: limegreen;
color: white;
}
.table {
width: 100%;
height: auto;
margin-top: 2vh;
}
.button1 {
color: dodgerblue;
}
.button2 {
color:dodgerblue;
}
</style>

344
src/Manager/components/User.vue
View File

@ -1,121 +1,280 @@
<template xmlns="">
<div class="main">
<div class="input">
<a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
<a-input v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
</div>
<div class="edit">
<a-button class="query-button"><SearchOutlined />查询</a-button>
<a-button class="add-button"><PlusOutlined />新增用户</a-button>
<a-button class="delete-button"><DeleteOutlined />删除用户</a-button>
<div class="header">
<div class="input">
<a-input class="first-input" v-model:value="value1" addonBefore="关键字" placeholder="请输入用户账号或姓名" />
<a-input class="second-input" v-model:value="value2" addonBefore="手机号码" placeholder="请输入手机号码"/>
<a-select
placeholder="请选择状态"
ref="select"
style="width: 120px"
@focus="focus"
>
<a-select-option value="启用">启用</a-select-option>
<a-select-option value="禁用">禁用</a-select-option>
</a-select>
</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>
</div>
</div>
<!--新增、删除用户对话框-->
<a-modal v-model:open="open1" title="新增用户" @ok="handleOk" ok-text="确认" cancel-text="取消">
<p>新增</p>
</a-modal>
<a-modal v-model:open="open2" title="删除用户" @ok="hideModal" ok-text="确认" cancel-text="取消">
<p>删除</p>
</a-modal>
<div class="table">
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />
<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>
</template>
</a-table>
</div>
</div>
</template>
<script setup>
import { watch, ref,computed,unref } from 'vue';
import { Table } from 'ant-design-vue';
import { SearchOutlined,PlusOutlined,DeleteOutlined} from '@ant-design/icons-vue';
import {createVNode, ref, computed} from 'vue';
import {
SearchOutlined,
PlusOutlined,
DeleteOutlined,
ExclamationCircleOutlined,
EditOutlined
} from '@ant-design/icons-vue';
import {Modal} from "ant-design-vue";
import { usePagination } from 'vue-request';
import axios from 'axios';
const value1 = ref('');
const value2 = ref('');
const open1 = ref(false);
watch(value1, () => {
console.log(value1.value);
});
watch(value2, () => {
console.log(value2.value);
});
const showModal1 = () => {
open1.value = true;
};
const handleOk = e => {
console.log(e);
open1.value = false;
};
const open2 = ref(false);
const showModal2 = () => {
open2.value = true;
};
const hideModal = () => {
open2.value = false;
};
const showDeleteConfirm = () => {
console.log("delete Dialog")
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: '确认删除这条数据吗',
okText: '确认',
cancelText: '取消',
});
};
const columns = [
{
title: '序号',
dataIndex: 'id',
key: 'id',
},
{
title: '账号昵称',
title: '账户昵称',
dataIndex: 'name',
key: 'name',
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
{
title: '电话',
key: 'tel',
dataIndex: 'tel',
},
{
title: '更新时间',
dataIndex: 'updatetime',
title: '用户状态',
dataIndex: 'user_state',
key: 'user_state',
},
{
title: '用户状态',
dataIndex: 'state',
title: '更新时间',
key: 'updatetime',
dataIndex: 'updatetime'
},
{
title: '操作',
dataIndex: 'operation',
key: 'action',
},
];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const selectedRowKeys = ref([]); // Check here to configure the default column
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 onSelectChange = changableRowKeys => {
console.log('selectedRowKeys changed: ', changableRowKeys);
selectedRowKeys.value = changableRowKeys;
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User',
// Column configuration not to be checked
name: record.name,
}),
};
const rowSelection = computed(() => {
return {
selectedRowKeys: unref(selectedRowKeys),
onChange: onSelectChange,
hideDefaultSelections: true,
selections: [
Table.SELECTION_ALL,
Table.SELECTION_INVERT,
Table.SELECTION_NONE,
{
key: 'odd',
text: 'Select Odd Row',
onSelect: changableRowKeys => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
if (index % 2 !== 0) {
return false;
}
return true;
});
selectedRowKeys.value = newSelectedRowKeys;
},
},
{
key: 'even',
text: 'Select Even Row',
onSelect: changableRowKeys => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((_key, index) => {
if (index % 2 !== 0) {
return true;
}
return false;
});
selectedRowKeys.value = newSelectedRowKeys;
},
},
],
};
const queryData = params => {
return axios.get('https://randomuser.me/api?noinfo', {
params,
});
};
const {
data: dataSource,
run,
loading,
current,
pageSize,
} = usePagination(queryData, {
formatResult: res => res.data.results,
pagination: {
currentKey: 'page',
pageSizeKey: 'results',
},
});
const pagination = computed(() => ({
total: 200,
current: current.value,
pageSize: pageSize.value,
}));
const handleTableChange = (pag, filters, sorter) => {
run({
results: pag.pageSize,
page: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
</script>
@ -127,47 +286,54 @@ const rowSelection = computed(() => {
height: auto;
}
.header {
display: flex;
}
.input {
width: 30vw;
margin-top: 20px;
margin-bottom: 10px;
width: 35vw;
margin-top: 2vh;
margin-bottom: 1vh;
display: flex;
flex-direction: row;
}
.first-input {
margin-right: 60px;
margin-left: 20px;
margin-right: 1vw;
margin-left: 1vw;
}
.second-input {
margin-right: 1vw;
}
.edit {
margin-top: 2vh;
width: 20vw;
display: grid;
grid-template-columns: repeat(3, auto); /* 将容器分为三列，每个按钮占一列 */
column-gap: 20px;
display: flex;
}
.query-button {
background-color: dodgerblue;
color:white;
margin-left: 20px;
margin-left: 4vw;
margin-right: 1vw;
}
.add-button {
background-color: limegreen;
color: white;
margin-left: 20px;
}
.delete-button {
background-color: #CD5C5C;
color: white;
margin-left: 20px;
margin-left: 1vw;
}
.table {
width: 100%; /* 设置表格宽度为100% */
height: 400px; /* 设置表格高度为400px */
width: 100%;
height: auto;
margin-top: 2vh;
}
</style>