From d025a13da1742b2a3877a52bfd09ced4dfd4c9ad Mon Sep 17 00:00:00 2001
From: zhaowei <1755871297@qq.com>
Date: Thu, 14 Apr 2022 18:02:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/MusicManage/index.vue | 112 +++++++------
 src/layout/components/User/index.vue        | 166 +++++++++++++++-----
 src/layout/index.vue                        |  51 +++++-
 3 files changed, 230 insertions(+), 99 deletions(-)

diff --git a/src/layout/components/MusicManage/index.vue b/src/layout/components/MusicManage/index.vue
index 2cdd0b7..fa06b8d 100644
--- a/src/layout/components/MusicManage/index.vue
+++ b/src/layout/components/MusicManage/index.vue
@@ -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);
@@ -217,11 +214,28 @@ export default {
     }
   }
 };
-</script>
+</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;
diff --git a/src/layout/components/User/index.vue b/src/layout/components/User/index.vue
index b3fb3d7..d7f6f79 100644
--- a/src/layout/components/User/index.vue
+++ b/src/layout/components/User/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0a75962..7a3df65 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -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>