WxxyDeveloper/JSL_OrganizeInternalOAWeb_Archive
9
0
Fork 0
mirror of https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git synced 2025-06-08 03:33:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

管理界面完善2

Browse Source
This commit is contained in:
妖姐 2024-01-16 23:58:13 +08:00
parent 8e162b97a6
commit 3974dd052b
5 changed files with 265 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/manager/Data/UserManage.vue
View File

@ -1,3 +1,147 @@
<template>
this usermanage
</template>
<div style="width: 85vw;height:90vh;position: relative">
<div style="padding:20px 10px;">
<Space>
<span>用户id:</span>
<Input v-model="value" placeholder="id" clearable style="width: 200px" />
<span>用户名称：</span>
<Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
<Button type="primary" shape="circle" icon="ios-search">查询</Button>
<Button type="primary" ghost>新增</Button>
</Space>
</div>
<div style="width: 85vw; height: 78vh">
<Table border ref="selection" :columns="columns" :data="data" style="height: 75vh">
<template #name="{ row }">
<strong>{{ row.name }}</strong>
</template>
<template #action="{ row, index }">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
<Button type="error" size="small" @click="remove(index)">删除</Button>
</template>
</Table>
<div style="height: 7vh ;text-align: left;padding-top: 10px">
<Page :total="40" size="small" show-elevator show-sizer />
</div>
</div>
</div>
</template>
<script>
import { Page, Space } from "view-ui-plus";
export default {
components: { Page, Space },
data() {
return {
value: "", // 添加一个属性来绑定输入框的值
columns: [
{
type: "selection",
width: 60,
align: "center"
},
{
title: "姓名",
key: "name"
},
{
title: "年龄",
key: "age"
},
{
title: "地址",
key: "address"
},
{
title: "操作",
slot: "action",
width: 150,
align: "center"
}
],
data: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03"
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01"
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
}, {
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
}
]
};
},
methods: {
handleSelectAll(status) {
this.$refs.selection.selectAll(status);
},
show(index) {
this.$Modal.info({
title: "编辑用户信息",
content: `姓名：<input value="${this.data[index].name}"><br>年龄：<input value="${this.data[index].age}"><br>住址：<input value="${this.data[index].address}">`
});
},
remove(index) {
this.data.splice(index, 1);
}
}
};
</script>

15
src/manager/LeftBar.vue
View File

@ -10,12 +10,25 @@
</style>
<template>
<div class="layout" style="height: 90vh">
<div class="layout" style="height: 92vh">
<Layout>
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<!-- <Submenu name="0">-->
<!-- <template #title>-->
<!-- <Icon type="ios-cog"></Icon>-->
<!-- <span>首页</span>-->
<!-- </template>-->
<!--&lt;!&ndash; <div style="display: flex;flex-direction: row">&ndash;&gt;-->
<!--&lt;!&ndash; <Icon type="ios-cog"></Icon>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </Submenu>-->
<MenuItem name="0-1" @click="navigateTo('')" style="left: 50px">首页</MenuItem>
<Submenu name="1">
<template #title>
<Icon type="ios-cog"></Icon>

160
src/manager/header.vue
View File

@ -1,71 +1,105 @@
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 100px;
height: 30px;
background: #515A6E;
border-radius: 3px;
float: left;
position: relative;
/*top: 10px;*/
left: 100px;
margin: 0 auto;
/*text-align: center;*/
color:white;
}
.layout-nav{
width: 420px;
margin: 0 20px 0 auto;
}
/*.ivu-menu ivu-menu-light ivu-menu-horizontal{*/
/* width: 200px;*/
/*}*/
</style>
<template>
<div class="layout">
<Layout>
<Header>
<!-- <div style="color:white;margin:auto"> 用户管理中心</div>-->
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo">管理中心界面</div>
<div class="top-nav" style="height: 8vh;">
<div class="logo">
<span style="color:white">Logo</span>
</div>
<div style="color: #f5f7f9;font-size: 30px;position: relative;left:40%">内部系统管理界面</div>
<div class="user-profile" style="left: -100px;">
<div class="layout-nav" theme="dark">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
</MenuItem>
</div>
</Menu>
</Header>
</Layout>
<div style="color: #f5f7f9">
<img class="userimg" alt="" src="../assets/images/img1.jpg">
</div>
<span class="username">{{ username }}</span>
<Dropdown trigger="click" style="margin-left: 20px">
<a href="javascript:void(0)">
<Icon type="md-exit" class="iconexit" style="color: #f5f7f9;font-size: 20px"></Icon>
</a>
<template #list class="exit">
<DropdownMenu>
<DropdownItem @click="navigateTo('../components/login')">退出</DropdownItem>
</DropdownMenu>
</template>
</Dropdown>
</div>
</div>
</template>
<script>
import {Icon, Layout, MenuItem} from "view-ui-plus";
import { Dropdown, DropdownItem, DropdownMenu, Icon, Image } from "view-ui-plus";
export default {
components: {Layout, Icon, MenuItem}
}
components: { Icon, DropdownItem, DropdownMenu, Dropdown, Image },
data() {
return {
username: "John Doe",
avatarUrl: "path_to_avatar",
dropdownVisible: false
};
},
methods: {
goToHomePage() {
// 处理回到首页的逻辑
},
handleDropdownVisibleChange(visible) {
this.dropdownVisible = visible;
},
logout() {
// 处理退出登录的逻辑
},
navigateTo(path) {
this.$router.push(path);
}
}
};
</script>
<style scoped>
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #515A6E;
padding: 0 20px;
position: relative;
}
.logo {
font-size: 24px;
position: absolute;
left: 100px;
}
.user-profile {
position: relative;
display: flex;
flex-direction: row;
text-align: center;
}
.username {
margin-left: 10px;
color: white;
display: flex;
align-items: center; /* 垂直居中对齐 */
padding-right: 10px;
}
.userimg {
width: 50px;
height: 50px;
border-radius: 50%;
}
.exit {
position: relative;
top: 20px;
left:50px;
}
.iconexit {
position: relative;
top: 15px;
left: -20px;
}
</style>

1
src/manager/manager.vue
View File

@ -2,6 +2,7 @@
<div style="display: flex; flex-direction: column">
<MyHeader/>
<!-- <router-view></router-view>-->
<Main></Main>
</div>

9
src/router/index.js
View File

@ -71,9 +71,14 @@ const router = createRouter({
}, {
path:'/manager/NewsInformationManagement',
component:()=>import('../manager/Data/NewsInformationManagement.vue')
},
]
}
]},
{
path:'/components/login',
component:()=>import('../components/login.vue')
}
]
})