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="titleBg">
<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-select
class="selectNav"
@ -21,18 +21,24 @@
/>
</el-select>
</el-form-item>
</el-form>
</h2>
</div>
<!-- 音乐管理表格数据 -->
<div class="musicManagement" v-show="musicShow">
<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="ipAddress" label="IP地址" 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="note" 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="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
<el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
<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="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="operate" label="操作" height="25" align="center">
<template slot-scope="scope">
@ -51,6 +57,13 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 编辑音乐管理对话框 -->
@ -111,7 +124,7 @@
<script>
import User from "@/layout/components/User";
import flexible from "@/layout/flexible.js";
import { listDevice } from "@/api/Device";
export default {
components: {
User
@ -119,35 +132,7 @@ export default {
data() {
return {
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: "王小二"
}
],
musicManagementList: [],
musicManageArr: [
{
value: 1,
@ -169,15 +154,27 @@ export default {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 7,
musicManage: undefined
}
pageSize: 6,
},
// 总条数
total: 0,
};
},
created() {},
created() {
this.getList();
},
methods: {
//查询音乐管理列表数据
getList() {
this.loading = true;
listDevice(this.queryParams).then(result => {
this. musicManagementList= result.rows;
this.total = result.total;
this.loading = false;
});
},
// 下拉菜单页面切换
pageShow(e) {
console.log(e, 8888888888888);
@ -219,9 +216,26 @@ export default {
};
</script>
<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 {
margin: 0.125rem 0 0.125rem;
border: 1px solid rgba(25, 186, 139, 0.17);
}
::v-deep .el-input {
margin-left: 6px !important;
@ -248,17 +262,11 @@ export default {
text-align: center !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 input::-webkit-input-placeholder {
::v-deep .el-form1 input::-webkit-input-placeholder {
color: white !important ;
}
::v-deep .el-input1::-webkit-input-placeholder {
color: gray !important ;
}
::v-deep .el-dialog {
background: #111658 !important;
border:1px solid gray;

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

@ -1,49 +1,98 @@
<template>
<div class="userBox">
<el-form
:inline="true"
:model="queryParams"
ref="queryForm"
class="demo-form-inline"
label-width="68px"
>
<el-form-item label prop="roleType">
<el-select
class="input2"
v-model="queryParams.roleType"
placeholder="角色类型"
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="dict in roleTypeArr"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form>
<el-form :inline="true" :model="queryParams" ref="queryForm" class="el-form2">
<el-form-item label="角色" prop="roleType">
<el-select
class="input2"
v-model="queryParams.roleType"
placeholder="角色类型"
clearable
size="middle"
style="width: 200px"
>
<el-option
class="option1"
v-for="dict in roleTypeArr"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</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>
<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>
</template>
<style scoped>
.roleListBox{
margin-top: 20px;
}
.addButton {
display: block;
margin-top: -10px;
margin-left: 0px;
}
.searchButton {
margin-top: 5px;
margin-left: 20px;
}
.userBox {
width: 100%;
height: 100%;
}
::v-deep .el-input__inner {
background: #111658 !important;
::v-deep .el-form2 input::-webkit-input-placeholder {
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;
color: white !important;
text-align: center !important;
letter-spacing: 4px !important;
text-align: left !important;
letter-spacing: 2px !important;
}
::v-deep .el-input--small {
font-size:14px !important;
color: white !important;
::v-deep .el-input--middle {
font-size: 14px !important;
color: gray !important;
}
</style>
<script>
@ -52,23 +101,56 @@ export default {
data() {
return {
//查询参数
queryParams:{
roleType:null,
queryParams: {
roleType: null,
roleName: null
},
roleTypeArr:[
{
roleList: [
{
roleName: "admin",
roleType: "管理员",
roleStatus: "正常",
createBy: "2020.22.22"
},
{
roleName: "小张",
roleType: "操作员",
roleStatus: "正常",
createBy: "2020.22.22"
},
{
roleName: "小王",
roleType: "操作员",
roleStatus: "正常",
createBy: "2020.22.22"
},
],
roleTypeArr: [
{
value: 1,
label: "管理员"
},
{
value: 2,
label: "操作员"
},
]
}
]
};
},
methods: {}
methods: {
//修改操作
revise() {},
//停用状态操作
stopStatus() {},
//重置密码操作
revisePassword() {},
//查询操作
handleQuery() {},
//重置操作
resetQuery() {},
//新增操作
editRole() {}
}
};
</script>

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

@ -322,8 +322,9 @@ header h1 {
.el-select-dropdown__item.selected {
color: white;
}
.el-form-item--medium .el-form-item__content {
line-height: 0.6rem ;
.el-form1 .el-form-item--medium .el-form-item__content {
line-height: 60px ;
margin-bottom: 10px;
}
.el-select-dropdown {
background: #37339d;
@ -331,11 +332,27 @@ header h1 {
color: white;
}
.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 {
border-bottom-color: #37339d;
left: 1.6rem !important;
border-bottom-color:transparent;
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 {
@ -346,4 +363,28 @@ header h1 {
.popper__arrow::after {
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>

Write Preview
Loading…
Cancel
Save