caojunting
/
MusicRoadUI
forked from software/MusicRoadUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

用户管理页

Browse Source
master
zhaowei 3 years ago
parent b7a38912de
commit d025a13da1
3 changed files with 230 additions and 99 deletions
Show Stats Download Patch File Download Diff File

108
src/layout/components/MusicManage/index.vue
Unescape Escape View File

@ -2,7 +2,7 @@
<div class="panel bar1"> <div class="panel bar1">
<div class="titleBg"> <div class="titleBg">
<h2> <h2>
<el-form :inline="true" :model="queryParams" ref="queryForm" label-width="1.7rem"> <el-form :inline="true" :model="queryParams" class="el-form1" ref="queryForm" label-width="1.7rem">
<el-form-item label prop="musicManage"> <el-form-item label prop="musicManage">
<el-select <el-select
class="selectNav" class="selectNav"
@ -21,18 +21,24 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
</h2> </h2>
</div> </div>
<!-- 音乐管理表格数据 --> <!-- 音乐管理表格数据 -->
<div class="musicManagement" v-show="musicShow"> <div class="musicManagement" v-show="musicShow">
<el-table :data="musicManagementList" style="width: 100%"> <el-table :data="musicManagementList" style="width: 100%">
<el-table-column prop="location" label="位置" width="50" height="25" align="center"></el-table-column> <el-table-column prop="location" label="位置" width="140" height="25" align="center"></el-table-column>
<el-table-column prop="ipAddress" label="IP地址" height="25" align="center"></el-table-column> <el-table-column prop="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
<el-table-column prop="deviceState" label="设备状态" height="25" width="80" align="center"></el-table-column> <el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
<el-table-column prop="note" label="音符" width="50" height="25" align="center"></el-table-column> <template slot-scope="scope">
<span v-if="scope.row.status == '0'">正常</span>
<span v-else-if="scope.row.status == '1'">异常</span>
</template>
</el-table-column>
<el-table-column prop="note" label="音符" width="70" height="25" align="center"></el-table-column>
<el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column> <el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" height="25" align="center"></el-table-column> <el-table-column prop="createTime" label="创建时间" width="160" height="25" align="center"></el-table-column>
<el-table-column prop="createBy" label="创建人" width="80" height="25" align="center"></el-table-column> <el-table-column prop="createBy" label="创建人" width="80" height="25" align="center"></el-table-column>
<el-table-column prop="operate" label="操作" height="25" align="center"> <el-table-column prop="operate" label="操作" height="25" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
@ -51,6 +57,13 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div> </div>
<!-- 编辑音乐管理对话框 --> <!-- 编辑音乐管理对话框 -->
@ -111,7 +124,7 @@
<script> <script>
import User from "@/layout/components/User"; import User from "@/layout/components/User";
import flexible from "@/layout/flexible.js"; import flexible from "@/layout/flexible.js";
import { listDevice } from "@/api/Device";
export default { export default {
components: { components: {
User User
@ -119,35 +132,7 @@ export default {
data() { data() {
return { return {
musicManagementList: [ musicManagementList: [],
{
location: "001",
ipAddress: "192.168.10.88",
deviceState: "正常",
note: "",
volume: "50%",
createTime: "2022-02-02",
createBy: "张大大"
},
{
location: "002",
ipAddress: "192.168.10.88",
deviceState: "正常",
note: "",
volume: "40%",
createTime: "2022-02-02",
createBy: "张小小"
},
{
location: "003",
ipAddress: "192.168.10.88",
deviceState: "正常",
note: "",
volume: "30%",
createTime: "2022-02-02",
createBy: "王小二"
}
],
musicManageArr: [ musicManageArr: [
{ {
value: 1, value: 1,
@ -169,15 +154,27 @@ export default {
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 7, pageSize: 6,
musicManage: undefined
} },
// 总条数
total: 0,
}; };
}, },
created() {}, created() {
this.getList();
},
methods: { methods: {
//查询音乐管理列表数据
getList() {
this.loading = true;
listDevice(this.queryParams).then(result => {
this. musicManagementList= result.rows;
this.total = result.total;
this.loading = false;
});
},
// 下拉菜单页面切换 // 下拉菜单页面切换
pageShow(e) { pageShow(e) {
console.log(e, 8888888888888); console.log(e, 8888888888888);
@ -219,9 +216,26 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
::v-deep .pagination-container .el-select .el-input .el-select__caret {
color:#618dfa!important;
}
::v-deep .pagination-container .el-input__suffix {
right: 5px !important;
}
::v-deep .pagination-container .el-input__inner {
background: transparent !important;
border: none !important;
color: #618dfa !important;
text-align: center !important;
}
.pagination-container[data-v-72233bcd]{
background:#111658;
}
.userManagement { .userManagement {
margin: 0.125rem 0 0.125rem; margin: 0.125rem 0 0.125rem;
border: 1px solid rgba(25, 186, 139, 0.17);
} }
::v-deep .el-input { ::v-deep .el-input {
margin-left: 6px !important; margin-left: 6px !important;
@ -248,17 +262,11 @@ export default {
text-align: center !important; text-align: center !important;
letter-spacing: 4px !important; letter-spacing: 4px !important;
} }
/* ::v-deep .el-input1 .el-input__inner {
border:1px solid rgba(25, 186, 139, 0.17) !important;
border-radius: 4px!important;
} */ ::v-deep .el-form1 input::-webkit-input-placeholder {
::v-deep input::-webkit-input-placeholder {
color: white !important ; color: white !important ;
} }
::v-deep .el-input1::-webkit-input-placeholder {
color: gray !important ;
}
::v-deep .el-dialog { ::v-deep .el-dialog {
background: #111658 !important; background: #111658 !important;
border:1px solid gray; border:1px solid gray;

132
src/layout/components/User/index.vue
Unescape Escape View File

@ -1,22 +1,17 @@
<template> <template>
<div class="userBox"> <div class="userBox">
<el-form <el-form :inline="true" :model="queryParams" ref="queryForm" class="el-form2">
:inline="true" <el-form-item label="角色" prop="roleType">
:model="queryParams"
ref="queryForm"
class="demo-form-inline"
label-width="68px"
>
<el-form-item label prop="roleType">
<el-select <el-select
class="input2" class="input2"
v-model="queryParams.roleType" v-model="queryParams.roleType"
placeholder="角色类型" placeholder="角色类型"
clearable clearable
size="small" size="middle"
style="width: 150px" style="width: 200px"
> >
<el-option <el-option
class="option1"
v-for="dict in roleTypeArr" v-for="dict in roleTypeArr"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
@ -24,26 +19,80 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="姓名" prop="roleName">
<el-input v-model="queryParams.roleName" placeholder class="input2"></el-input>
</el-form-item>
<el-button
icon="el-icon-search"
class="searchButton"
type="primary"
size="mini"
@click="handleQuery"
>查询</el-button>
<el-button icon="el-icon-refresh" type="primary" size="mini" @click="resetQuery">重置</el-button>
<el-button
class="addButton"
size="mini"
type="primary"
icon="el-icon-plus"
@click="editRole"
>新增</el-button>
</el-form> </el-form>
<div class="roleListBox">
<el-table :data="roleList" style="width: 100%">
<el-table-column prop="number" type="index" label="序号" align="center"></el-table-column>
<el-table-column prop="roleName" label="用户姓名" align="center"></el-table-column>
<el-table-column prop="roleType" label="角色" align="center"></el-table-column>
<el-table-column prop="roleStatus" type="用户状态" label="序号" align="center"></el-table-column>
<el-table-column prop="createBy" label="创建时间" align="center"></el-table-column>
<el-table-column prop="action" label="操作" width="250" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="revise(scope.row)">修改</el-button>
<el-button size="mini" type="primary" @click="stopStatus(scope.row)">停用</el-button>
<el-button size="mini" type="primary" @click="revisePassword(scope.row)">重置密码</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.roleListBox{
margin-top: 20px;
}
.addButton {
display: block;
margin-top: -10px;
margin-left: 0px;
}
.searchButton {
margin-top: 5px;
margin-left: 20px;
}
.userBox { .userBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
::v-deep .el-input__inner { ::v-deep .el-form2 input::-webkit-input-placeholder {
background: #111658 !important; color: gray !important ;
}
::v-deep .input2 .el-input__suffix {
right: 10px !important;
}
::v-deep .input2 .el-popper[x-placement^="bottom"] .popper__arrow {
left: 100px !important;
}
::v-deep .input2 .el-input__inner {
background: #1c257f !important;
border: 1px solid rgba(25, 186, 139, 0.17) !important; border: 1px solid rgba(25, 186, 139, 0.17) !important;
color: white !important; color: white !important;
text-align: center !important; text-align: left !important;
letter-spacing: 4px !important; letter-spacing: 2px !important;
} }
::v-deep .el-input--small { ::v-deep .el-input--middle {
font-size:14px !important; font-size: 14px !important;
color: white !important; color: gray !important;
} }
</style> </style>
<script> <script>
@ -52,11 +101,31 @@ export default {
data() { data() {
return { return {
//查询参数 //查询参数
queryParams:{ queryParams: {
roleType:null, roleType: null,
roleName: null
},
roleList: [
{
roleName: "admin",
roleType: "管理员",
roleStatus: "正常",
createBy: "2020.22.22"
}, },
roleTypeArr:[ {
roleName: "小张",
roleType: "操作员",
roleStatus: "正常",
createBy: "2020.22.22"
},
{
roleName: "小王",
roleType: "操作员",
roleStatus: "正常",
createBy: "2020.22.22"
},
],
roleTypeArr: [
{ {
value: 1, value: 1,
label: "管理员" label: "管理员"
@ -64,11 +133,24 @@ export default {
{ {
value: 2, value: 2,
label: "操作员" label: "操作员"
}, }
] ]
}; };
}, },
methods: {} methods: {
//修改操作
revise() {},
//停用状态操作
stopStatus() {},
//重置密码操作
revisePassword() {},
//查询操作
handleQuery() {},
//重置操作
resetQuery() {},
//新增操作
editRole() {}
}
}; };
</script> </script>

51
src/layout/index.vue
Unescape Escape View File

@ -322,8 +322,9 @@ header h1 {
.el-select-dropdown__item.selected { .el-select-dropdown__item.selected {
color: white; color: white;
} }
.el-form-item--medium .el-form-item__content { .el-form1 .el-form-item--medium .el-form-item__content {
line-height: 0.6rem ; line-height: 60px ;
margin-bottom: 10px;
} }
.el-select-dropdown { .el-select-dropdown {
background: #37339d; background: #37339d;
@ -331,11 +332,27 @@ header h1 {
color: white; color: white;
} }
.el-popper[x-placement^="bottom"] .popper__arrow::after { .el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: #37339d; /* border-bottom-color: #37339d; */
border-bottom-color:transparent;
left:-70px;
} }
.el-popper[x-placement^="bottom"] .popper__arrow { .el-popper[x-placement^="bottom"] .popper__arrow {
border-bottom-color: #37339d; border-bottom-color:transparent;
left: 1.6rem !important; left: 1.6rem ;
}
.el-popper[x-placement^=top] .popper__arrow{
border-top-color:transparent;
}
.el-popper[x-placement^=top] .popper__arrow::after{
border-top-color:transparent;
}
.el-popper[x-placement^=bottom]{
margin-top:10px;
}
/* 用户管理 */
.el-form2 .el-form-item__label{
color:gray !important;
padding:0px 0px 0px;
} }
/* 设备管理*/ /* 设备管理*/
.el-popover { .el-popover {
@ -346,4 +363,28 @@ header h1 {
.popper__arrow::after { .popper__arrow::after {
border-right-color: #111658 !important; border-right-color: #111658 !important;
} }
/* 分页样式 */
.el-pagination__total{
color:#618dfa ;
}
.el-pagination__jump{
color:#618dfa ;
}
.el-pagination.is-background .el-pager li{
color:#3f426f;
background-color: #111658;
border:1px solid #3f426f;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color:#262d75;
}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
background-color: #111658;
border:1px solid #3f426f;
}
.el-pagination.is-background .btn-prev:disabled{
color:#3f426f;
}
</style> </style>

Write Preview
Loading…
Cancel
Save