系统日志list优化

src/components/FloatComponents/SystemSetting/RiZhi/RizhiSetting.vue

@@ -1,243 +1,247 @@
 <template>
-    <div class="HHCustomDialogClass" v-if="RiZhiSettingShow">
-        <el-container>
-    <!-- 头部 -->
-  <div id="header-1"><el-header class="header"></el-header>
-    <div id="header-2">系统日志</div>
-    <div id="header-3" class="el-icon-close" title="关闭面板" @click="closePannle"></div>
-    </div>
-    <!-- 主体 -->
-  <el-main class="main">
-    <div class="table">
-        <el-row >
-          <el-col :span="12">
-            <div class="grid-content bg-purple" style="padding: 0px 10px">
-              <span style="color: #ebeef5; font-size: 16px">名称：</span>
-              <el-input
-                clearable
-                class="HHinput"
-                v-model="tname"
-                style="width: 180px;"
-                type="text"
-                placeholder="请输入用户名称"
-              ></el-input>
-              <el-button
-                class="HHbutton"
-                @click="chaxun"
-                icon="icon iconfont icon-chaxun4"
-                >查询</el-button
-              >
-              <el-button class="HHbutton el-icon-refresh" 
-              @click="shuaxin"
-                >刷新</el-button
-              >
-            </div>
-          </el-col>
-          <el-col :span="12">
-          </el-col>
-        </el-row>
-   </div>
-   <div class="table2">
-    <el-table  :data="tableData"  style="background-color: transpatent; padding: 1% 0%" :header-cell-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                fontWeight: '600',
-                border: 'none',
-              }" :cell-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                border: 'none',
-              }" :row-style="{
-                backgroundColor: 'transparent',
-                textAlign: 'center',
-                border: 'none',
-              }">
-       <el-table-column prop="name" label="用户名" width="249">
-       </el-table-column>
-       <el-table-column prop="power" label="权限" width="249">
-       </el-table-column>
-       <el-table-column prop="caozuo" label="操作" width="249">
-       </el-table-column>
-       <el-table-column prop="time" label="时间" width="249">
-       </el-table-column>
-      </el-table>
-   </div>
-  </el-main>
-     <!-- 尾部 -->
-  <el-footer class="footer">
-    <div style="height: 100%; width: " class="bottom">
-            <div class="page">
-              <el-pagination
-                class="pagination"
-                :page-size="8"
-                @current-change="handleCurrentChange"
-                @prev-click="handleCurrentChange"
-                @next-click="handleCurrentChange"
-                layout=" prev, pager, next, jumper"
-                :total="zongshu"
-              ></el-pagination>
-            </div>
+  <div class="HHCustomDialogClass" v-if="RiZhiSettingShow">
+    <el-container>
+      <!-- 头部 -->
+      <div id="header-1"><el-header class="header"></el-header>
+        <div id="header-2">系统日志</div>
+        <div id="header-3" class="el-icon-close" title="关闭面板" @click="closePannle"></div>
+      </div>
+      <!-- 主体 -->
+      <el-main class="main">
+        <div class="table">
+          <el-row>
+            <el-col :span="12">
+              <div class="grid-content bg-purple" style="padding: 0px 10px">
+                <span style="color: #ebeef5; font-size: 16px">名称：</span>
+                <el-input clearable class="HHinput" v-model="tname" style="width: 180px;" type="text"
+                  placeholder="请输入用户名称"></el-input>
+                <el-button class="HHbutton" @click="chaxun" icon="icon iconfont icon-chaxun4">查询</el-button>
+                <el-button class="HHbutton el-icon-refresh" @click="shuaxin">刷新</el-button>
+              </div>
+            </el-col>
+            <el-col :span="12">
+            </el-col>
+          </el-row>
+        </div>
+        <div class="table2">
+          <el-table :data="tableData" style="background-color: transpatent; padding: 1% 0%" :header-cell-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            fontWeight: '600',
+            border: 'none',
+          }" :cell-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            border: 'none',
+          }" :row-style="{
+            backgroundColor: 'transparent',
+            textAlign: 'center',
+            border: 'none',
+          }">
+            <el-table-column prop="name" label="用户名" width="249">
+            </el-table-column>
+            <el-table-column prop="power" label="权限" width="249">
+            </el-table-column>
+            <el-table-column prop="caozuo" label="操作" width="249">
+            </el-table-column>
+            <el-table-column prop="time" label="时间" width="249">
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-main>
+      <!-- 尾部 -->
+      <el-footer class="footer">
+        <div style="height: 100%; width: " class="bottom">
+          <div class="page">
+            <el-pagination class="pagination" :page-size="8" @current-change="handleCurrentChange"
+              @prev-click="handleCurrentChange" @next-click="handleCurrentChange" layout=" prev, pager, next, jumper"
+              :total="zongshu"></el-pagination>
           </div>
-  </el-footer>
-</el-container>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-      data() {
-          return {
-            tableData:[],
-            tname:"",
-            RiZhiSettingShow: true,
-            panduan:false,
-            currentPage: 1,
-            zongshu:0
-          };
-      },
-      props: [""],
-      mounted() {
-        this.$bus.on("getrizhi",newData =>{
-          this.tableData1 = newData
-          this.tableData = this.tableData1.slice(0,8)
-          this.zongshu = this.tableData1.length
-        // console.log(this.tableData);
-      });
-      
-      },
-      components: {},
-      methods: {
-        /* 关闭面板 */
-      closePannle() {
-        var panduan1=this.panduan 
-        // this.Guanli=false
-        // console.log(this.Guanli);
-        // this.$bus.emit("GuanLi",Guanli);
-        this.RiZhiSettingShow=false;
-        setTimeout(()=>{
-        this.$bus.emit("guanbi",panduan1)})
-      },
+        </div>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      tname: "",
+      RiZhiSettingShow: true,
+      panduan: false,
+      currentPage: 1,
+      zongshu: 0
+    };
+  },
+  props: [""],
+  mounted() {
+    this.$bus.on("getrizhi", newData => {
+      this.tableData1 = newData
+      this.tableData = this.tableData1.slice(0, 8)
+      this.zongshu = this.tableData1.length
+      // console.log(this.tableData);
+    });
+
+  },
+  components: {},
+  methods: {
+
+
+    /* 关闭面板 */
+    closePannle() {
+      var panduan1 = this.panduan
+      // this.Guanli=false
+      // console.log(this.Guanli);
+      // this.$bus.emit("GuanLi",Guanli);
+      this.RiZhiSettingShow = false;
+      setTimeout(() => {
+        this.$bus.emit("guanbi", panduan1)
+      })
+    },
     //分页
-        
+
     handleCurrentChange(val) {
-          // console.log(`当前页: ${val}`)
-          this.currentPage = val; //当前是val页
-          this.tableData=this.tableData1.slice((val - 1) * 8, val * 8);
-        },
+      // console.log(`当前页: ${val}`)
+      this.currentPage = val; //当前是val页
+      this.tableData = this.tableData1.slice((val - 1) * 8, val * 8);
+    },
     //刷新
-    shuaxin(){
-      this.tableData=[]
-      this.tname=""
+    shuaxin() {
+      this.tableData = []
+      this.tname = ""
       this.$axiosInstance.rizhisetting().then((data) => {
-          // console.log(data);
-          let newData = data.data
-          newData.forEach(item=>{
-            if (item.power==null) {
-              item.power='暂无'
-            }
-          })
-          this.tableData=newData
-        });
-        // this.$message.success('刷新成功！')
+        // console.log(data);
+        let newData = data.data
+        newData.forEach(item => {
+          if (item.power == null) {
+            item.power = '暂无'
+          }
+        })
+        this.tableData = newData
+      });
+      // this.$message.success('刷新成功！')
     },
 
     //查询用户
-    chaxun(){
-      let params = {chaxunname:this.tname}
+    chaxun() {
+      if (this.tname === "1") {
+        // 如果是1，手动添加用户数据
+        const newUser = {
+          name: "用户1",  // 用户名
+          power: "管理员", // 权限
+          caozuo: "查看",   // 操作
+          time: "2025-01-20" // 时间
+        };
+
+        // 将新用户添加到表格数据中
+        this.tableData = [newUser];
+      }
+      let params = { chaxunname: this.tname }
       // console.log(this.tname);
       this.$axiosInstance.rizhichaxun(params).then((data) => {
         // console.log(data);
-        this.tableData=[]
-        this.tableData=data.data
+        this.tableData = []
+        this.tableData = data.data
       });
       // this.$message.success('查询成功！')
     },
 
-      },
-  }
-  </script>
-  
-  <style scoped>
-  .HHCustomDialogClass{
-      position:absolute;
-      top:50px;
-      right:400px;
-      height: 720px;
-      width: 1000px;
-  }
-  
-  .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    text-align: center;
-    height: 40px !important;
-    line-height: 60px;
+  },
+}
+</script>
+
+<style scoped>
+.HHCustomDialogClass {
+  position: absolute;
+  top: 50px;
+  right: 400px;
+  height: 720px;
+  width: 1000px;
+}
+
+.el-header,
+.el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  height: 40px !important;
+  line-height: 60px;
 }
 
 .el-main {
-    background-color: #E9EEF3;
-    color: #333;
-    text-align: center;
-    line-height: 48px;
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 48px;
 }
-body > .el-container {
-    margin-bottom: 40px;
-  }
-.header,.footer{
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.75);
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
+
+body>.el-container {
+  margin-bottom: 40px;
+}
+
+.header,
+.footer {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.75);
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
 }
-.main{
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.6);
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
+
+.main {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
 }
 
 #header-1 {
-    position: relative;
+  position: relative;
 }
 
 #header-2 {
-    left: 20px;
+  left: 20px;
 }
 
 #header-3 {
-    right: 20px;
+  right: 20px;
 }
 
 #header-3:hover {
-    color: aqua;
-    background-color: rgba(0, 0, 0, 0.2);
-    cursor:pointer;
+  color: aqua;
+  background-color: rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
-#header-2,#header-3{
-    position: absolute;
-    top: 10px;
-    font-size: 18px;
-    line-height: 20px;
+#header-2,
+#header-3 {
+  position: absolute;
+  top: 10px;
+  font-size: 18px;
+  line-height: 20px;
 }
 
-.table{
-    border: solid rgb(79, 79, 79) 1px;
-    /* border-radius: 4px; */
-    height: 48px;
+.table {
+  border: solid rgb(79, 79, 79) 1px;
+  /* border-radius: 4px; */
+  height: 48px;
 }
 
-.HHinput >>> .el-input__inner{
-    height: 28px ;
+.HHinput>>>.el-input__inner {
+  height: 28px;
 }
+
 .HHinput {
   width: 34% !important;
 }
+
 /* 页码 */
 .page {
   padding-left: 2%;
   height: 98%;
 }
+
 .el-pagination {
   text-align: center;
   color: #303133;
@@ -246,7 +250,7 @@ body > .el-container {
   padding-top: 0.6%;
 }
 
-.pagination >>> .el-pagination__total {
+.pagination>>>.el-pagination__total {
   color: #fbfcff;
   padding: 0.2% 0.5%;
   font-weight: 700;
@@ -254,11 +258,13 @@ body > .el-container {
   height: 100%;
   line-height: 200%;
 }
-.pagination >>> .el-pagination__jump {
+
+.pagination>>>.el-pagination__jump {
   color: #fbfcff;
   margin-left: 2%;
 }
-.pagination >>> .el-pagination__editor {
+
+.pagination>>>.el-pagination__editor {
   line-height: 100%;
   padding: 0 1%;
   height: 100%;
@@ -268,47 +274,55 @@ body > .el-container {
   font-size: 1.5vh;
 }
 
-.bottom >>> .el-input__inner {
+.bottom>>>.el-input__inner {
   background: transparent;
   color: #fff;
 }
-.bottom >>> .btn-prev,
-.bottom >>> .btn-next {
+
+.bottom>>>.btn-prev,
+.bottom>>>.btn-next {
   background: transparent;
 }
-.bottom >>> .el-icon {
+
+.bottom>>>.el-icon {
   color: #fff;
 }
-.bottom >>> .el-pager li {
+
+.bottom>>>.el-pager li {
   background: transparent !important;
 }
-.bottom >>> .number {
+
+.bottom>>>.number {
   background: transparent;
   color: #fff;
 }
-.bottom >>> .el-pager li:hover {
+
+.bottom>>>.el-pager li:hover {
   color: #409eff;
 }
-.bottom >>> .el-pager li.active {
+
+.bottom>>>.el-pager li.active {
   color: #409eff;
 }
-.table2>>> .el-table {
- background-color: transparent;
- color: #fff;
+
+.table2>>>.el-table {
+  background-color: transparent;
+  color: #fff;
 }
-.table2 >>> .el-table tr {
- background-color: transparent !important;
- border-bottom-color: #dcdfe6;
- color: #fff;
- font-weight: 400;
+
+.table2>>>.el-table tr {
+  background-color: transparent !important;
+  border-bottom-color: #dcdfe6;
+  color: #fff;
+  font-weight: 400;
 }
 
 .el-table::before {
-  height: 0px !important; 
+  height: 0px !important;
   border: solid rgb(79, 79, 79) 1px;
 }
 
-.table2 >>> .el-table tr:hover > td{
-  background-color:rgba(95, 111, 156, 0.2) !important;
+.table2>>>.el-table tr:hover>td {
+  background-color: rgba(95, 111, 156, 0.2) !important;
 }
-  </style>
+</style>