初步完成静态页面

houtai/src/router/index.js

@@ -135,16 +135,22 @@ const routes = [
         component: () => import('../views/tab7/index.vue')
       },
       {
-        path: 'tab7Edit',
-        name: 'tab7Edit',
-        meta: { myInd: 7 },
-        component: () => import('../views/tab7/edit.vue')
-      },
-      {
         path: 'tab8',
         name: 'tab8',
         meta: { myInd: 8 },
         component: () => import('../views/tab8/index.vue')
+      },
+      {
+        path: 'tab8Look',
+        name: 'tab8Look',
+        meta: { myInd: 8 },
+        component: () => import('../views/tab8/tab8Look.vue')
+      },
+      {
+        path: 'tab9',
+        name: 'tab9',
+        meta: { myInd: 9 },
+        component: () => import('../views/tab9/index.vue')
       }
     ]
   }

houtai/src/views/layout/index.vue

@@ -6,7 +6,7 @@
       <div class="top_right">
         <div class="user" @click="cut = !cut">
           <img src="@/assets/img/user.jpg" alt="" />
-          <span>{{userName}}</span>
+          <span>{{ userName }}</span>
           <!-- 下箭头 -->
           <div class="pull_down" v-if="cut"></div>
           <div class="pull_up" v-else></div>
@@ -31,8 +31,19 @@
             {{ item.name }}
           </li>
         </ul>
-        <div class="biaoji" v-if="userName==='admin'">系统管理</div>
-        <ul v-if="userName==='admin'">
+        <div class="biaoji">审核管理</div>
+        <ul>
+          <li
+            v-for="item in tab3"
+            :key="item.id"
+            :class="{ active: $route.meta.myInd === item.id }"
+            @click="push(item.url)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+        <div class="biaoji">系统管理</div>
+        <ul>
           <li
             v-for="item in tab2"
             :key="item.id"
@@ -44,12 +55,12 @@
         </ul>
       </div>
       <!-- 右侧内容 -->
-      <div class="right" @click="cut=false">
+      <div class="right" @click="cut = false">
         <Router-view />
       </div>
     </div>
     <!-- 点击修改密码出现弹窗 -->
-    <el-dialog title="修改密码" :visible.sync="isShow"  @close="btnX()">
+    <el-dialog title="修改密码" :visible.sync="isShow" @close="btnX()">
       <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
         <el-form-item label="旧密码：" prop="oldPassword">
           <el-input
@@ -77,7 +88,8 @@
         <el-button @click="btnX">取 消</el-button>
         <el-button type="primary" @click="btnOk">确 定</el-button>
       </div>
-    </el-dialog>  </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -104,14 +116,11 @@ export default {
         checkPass: ''
       },
       rules: {
-        checkPass: [
-          { validator: validatePass2, trigger: 'blur' }
-        ],
-        oldPassword: [
-          { required: true, message: '不能为空', trigger: 'blur' }
-        ],
+        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+        oldPassword: [{ required: true, message: '不能为空', trigger: 'blur' }],
         newPassword: [
-          { required: true, message: '不能为空', trigger: 'blur' }, { max: 15, message: '不能超过15个字', trigger: 'blur' }
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { max: 15, message: '不能超过15个字', trigger: 'blur' }
         ]
       },
       userName: '',
@@ -125,9 +134,10 @@ export default {
         { name: '校园图片管理', id: 5, url: '/layout/tab5' },
         { name: '校歌管理', id: 6, url: '/layout/tab6' }
       ],
-      tab2: [
-        { name: '用户管理', id: 7, url: '/layout/tab7' },
-        { name: '操作日志', id: 8, url: '/layout/tab8' }
+      tab2: [{ name: '操作日志', id: 9, url: '/layout/tab9' }],
+      tab3: [
+        { name: '留言审核', id: 7, url: '/layout/tab7' },
+        { name: '发帖审核', id: 8, url: '/layout/tab8' }
       ]
     }
   },
@@ -137,7 +147,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-  // 修改密码点击取消
+    // 修改密码点击取消
     btnX () {
       this.$refs.ruleForm.resetFields()
       this.cut = false
@@ -319,7 +329,7 @@ export default {
       li {
         cursor: pointer;
         padding-left: 50px;
-        margin: 40px 0;
+        margin: 30px 0;
         &:hover {
           color: #b9412e;
         }

houtai/src/views/tab6/tab6Add.vue

@@ -26,7 +26,33 @@
             style="width: 500px"
           ></el-input>
         </el-form-item>
-        <!-- 上传附件 -->
+        <!-- 图片和附件 -->
+        <el-form-item label="图片：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/security/video/upload/img'"
+            :headers="{
+              token,
+            }"
+            :show-file-list="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <div v-if="ruleForm.thumb" class="imgdiv">
+              <img
+                style="width: 100%; height: 100%"
+                :src="baseURL + ruleForm.thumb"
+              />
+              <i
+                class="el-icon-circle-close"
+                @click.stop="ruleForm.thumb = ''"
+              ></i>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <p class="upHint">格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。</p>
+        </el-form-item>        <!-- 上传附件 -->
         <el-form-item label="音频文件：">
           <i class="biaoshi"></i>
           <el-upload
@@ -102,6 +128,36 @@ export default {
           this.$message.info('已取消')
         })
     },
+    // 上传图片
+    beforethumbUpload (file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/gif'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过5M！')
+          reject(file)
+        } else if (file.name.length > 32) {
+          this.$message.error('照片名字不能超过32个字！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+    },
+    upload_thumb_success (data) {
+      // console.log('图片上传成功', data.data.urlPath)
+      this.ruleForm.thumb = data.data.urlPath
+    },
     // 上传附件
     beforeFujian (file) {
       console.log('附件上传前', file)
@@ -193,6 +249,7 @@ export default {
 .tab6Add {
   height: 100%;
   .conten {
+    overflow-y: auto;
     position: relative;
     /deep/.el-icon-plus {
       border: 1px dashed #ccc;

houtai/src/views/tab7/edit.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="tab7Edit">
-    <div class="top">{{ruleForm.id?'编辑用户':'新增用户'}}</div>
-    <div class="con">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="用户账号：" prop="userName">
-          <el-input
-            :disabled='!!ruleForm.id'
-            v-model="ruleForm.userName"
-            placeholder="仅能输入数字、字母"
-            maxlength="10"
-            show-word-limit
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="联系电话：" prop="phone">
-          <el-input
-            v-model="ruleForm.phone"
-            placeholder="请输入电话"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="性别：">
-          <el-radio v-model="ruleForm.sex" :label="0">男</el-radio>
-          <el-radio v-model="ruleForm.sex" :label="1">女</el-radio>
-        </el-form-item>
-        <el-form-item label="是否启用：">
-          <el-switch
-            v-model="ruleForm.isEnabled"
-            :active-value='1'
-            :inactive-value="0"
-          >
-          </el-switch>
-        </el-form-item>
-        <span class="tip">*默认密码123456</span>
-      </el-form>
-    </div>
-    <!-- 下面的按钮 -->
-    <div class="btn">
-      <el-button @click="$router.push('/layout/tab7')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { userSave } from '@/apis/tab7'
-export default {
-  // import引入的组件需要注入到对象中才能使用
-  name: 'tab7Edit',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-      ruleForm: {
-        userName: '',
-        phone: '',
-        sex: 0,
-        isEnabled: 1
-      },
-      rules: {
-        userName: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          {
-            pattern: /^[0-9a-zA-Z_]*$/,
-            message: '仅能输入数字、字母',
-            trigger: 'blur'
-          }
-        ],
-        phone: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          {
-            pattern: /^1[3-9]\d{9}$/,
-            message: '请输入合法手机号',
-            trigger: 'blur'
-          }
-        ]
-      }
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    async btnOk () {
-      try {
-        await this.$refs.ruleForm.validate()
-        const res = await userSave(this.ruleForm)
-        if (res.code === 0) {
-          this.$message.success('操作成功')
-          this.$router.push('/layout/tab7')
-        } else this.$message.warning(res.msg)
-      } catch (error) {
-        console.log(error)
-      }
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    // 编辑的情况下
-    if (this.$route.query.id) {
-      this.ruleForm = this.$route.query
-      this.ruleForm.sex = Number(this.ruleForm.sex)
-      this.ruleForm.isEnabled = Number(this.ruleForm.isEnabled)
-    }
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab7Edit {
-  height: 100%;
-  position: relative;
-  .top {
-    height: 40px;
-    line-height: 40px;
-    background-color: #fbfbfb;
-    padding-left: 20px;
-  }
-  .con {
-    margin-top: 40px;
-    width: 600px;
-    .tip{
-      color: #F56C6C;
-      font-size: 14px;
-      margin-left: 12px;
-    }
-  }
-    .btn {
-    display: flex;
-    justify-content: space-between;
-    width: 200px;
-    position: absolute;
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-  }
-}
-</style>

houtai/src/views/tab7/index.vue

@@ -1,98 +1,124 @@
-<!--  -->
 <template>
   <div class="tab7">
-    <div class="top">
-      <el-form
-        :model="ruleForm"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="注册时间：">
-          <el-date-picker
-            style="width: 300px"
-            v-model="time"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-          <span class="userName">用户账号：</span>
-          <el-input
-            placeholder="请输入"
-            v-model="ruleForm.searchKey"
-            style="width: 300px; margin-right: 50px"
-          ></el-input>
-          <el-button @click="inquire">查 询</el-button>
-          <el-button @click="reset">重 置</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="addUser">
-        <el-button type="primary" @click="$router.push('/layout/tab7Edit')"
-          >新 增</el-button
+    <div class="insideTop">
+      留言审核
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="classify">全部</div>
+      <div class="search">
+        <span>提交时间：</span>
+        <el-date-picker
+          style="width: 240px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
         >
+        </el-date-picker>
+        <span class="search_k">留言内容：</span>
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="关键字"
+          style="width: 240px"
+        ></el-input>
+        <span class="search_k">状态：</span>
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option label="全部" value=""></el-option>
+          <el-option label="待审核" value="1"></el-option>
+          <el-option label="审核通过" value="time"></el-option>
+          <el-option label="审核不通过" value="number"></el-option>
+        </el-select>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="留言内容">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name2" label="发布人" width="180"> </el-table-column>
+          <el-table-column prop="name2" label="发布时间" width="180">
+          </el-table-column>
+          <el-table-column prop="name2" label="审核状态" width="180">
+          </el-table-column>
+          <el-table-column label="操作" width="180">
+            <template #default>
+              <el-button type="text" style="color: #254e91;">通过</el-button>
+              <el-button type="text">不通过</el-button>
+              <el-button type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
-    </div>
-    <!-- 表格 -->
-    <div class="table">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column label="序号" width="80">
-          <template slot-scope="scope">
-            {{ scope.$index + (ruleForm.pageNum - 1) * ruleForm.pageSize + 1 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="userName" label="用户账号"> </el-table-column>
-        <el-table-column prop="phone" label="联系电话"> </el-table-column>
-        <el-table-column prop="sexTxt" label="性别"> </el-table-column>
-        <el-table-column prop="createTime" label="注册时间"> </el-table-column>
-        <el-table-column label="启用状态">
-          <template slot-scope="scope">
-            <el-switch :disabled='scope.row.id===1' @change='change($event,scope.row.id)' v-model="tableData[scope.$index].isEnabled" :active-value='1' :inactive-value="0"></el-switch>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="230">
-          <template #default="{ row }">
-            <el-button type="text" @click="edit(row)" v-if="row.id!==1">编 辑</el-button>
-            <el-button type="text" style="color: #b6242b" @click="delUser(row.id)"  v-if="row.id!==1">删 除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </div>
     <!-- 分页 -->
     <div class="paging">
-      <span class="zong">共 {{ total }} 条</span>
       <el-pagination
-        layout="sizes,prev,pager,next,jumper"
+        layout="sizes,prev, pager, next,jumper"
         :total="total"
-        :page-sizes="[15, 30, 45, 60]"
-        :current-page="ruleForm.pageNum"
+        :current-page="formData.pageNum"
         @current-change="currentChange"
         @size-change="sizeChange"
       >
       </el-pagination>
-    </div>  </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { userList, userEditStatus, userRemoves } from '@/apis/tab7'
 export default {
   name: 'tab7',
   components: {},
   data () {
+    // 这里存放数据
     return {
-      total: 0,
+      total: 100,
       time: '',
-      ruleForm: {
-        pageNum: 1,
-        pageSize: 15,
+      formData: {
         startTime: '',
         endTime: '',
-        searchKey: ''
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: 'time'
       },
-      tableData: []
+      tableData: [
+        { name1: '1231231231231231231123123123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
     }
   },
+  // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {
@@ -100,75 +126,20 @@ export default {
       this.handleSelect(val)
     }
   },
+  // 方法集合
   methods: {
-    // 点击编辑
-    edit (val) {
-      this.$router.push({
-        path: '/layout/tab7Edit',
-        query: val
-      })
-    },
-    // 点击删除
-    delUser (id) {
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          await userRemoves(id)
-          this.$message.success('删除成功!')
-          this.userList(this.ruleForm)
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
-    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
-      this.ruleForm.pageNum = val
-      this.userList(this.ruleForm)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-      this.ruleForm.pageNum = 1
-      this.ruleForm.pageSize = val
-      this.userList(this.ruleForm)
-    },
-    // 点击查询
-    inquire () {
-      this.ruleForm.pageNum = 1
-      this.userList(this.ruleForm)
-    },
-    // 点击重置
-    reset () {
-      this.ruleForm = {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
-      }
-      this.time = ''
-      this.userList(this.ruleForm)
-    },
-    // 点击启用-停用账户
-    async change (val, id) {
-      const res = await userEditStatus(id, val)
-      if (res.code === 0) {
-        this.$message.success('操作成功')
-        this.userList(this.ruleForm)
-      } else this.$message.warning(res.msg)
-    },
-    // 封装获取列表方法
-    async userList (data) {
-      const res = await userList(data)
-      this.tableData = res.data.records
-      this.total = res.data.total
-      this.tableData.forEach((v) => {
-        if (v.sex === 0) v.sexTxt = '男'
-        else if (v.sex === 1) v.sexTxt = '女'
+    }, // 点击查看
+    lookGood (id) {
+      this.$router.push({
+        path: '/layout/tab7Look'
+        // query: { conLeftId: this.conLeft }
       })
-      // console.log(998, res.data.records)
     },
     // 时间处理----------------
     handleSelect (e) {
@@ -176,11 +147,11 @@ export default {
       for (const i in e) {
         date.push(this.gettime(e[i]))
       }
-      this.ruleForm.startTime = date[0]
+      this.formData.startTime = date[0]
       if (date[1]) {
-        this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
+        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
       }
-      if (e === null) this.ruleForm.endTime = ''
+      if (e === null) this.formData.endTime = ''
     },
     gettime (data) {
       const value =
@@ -205,9 +176,7 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    this.userList(this.ruleForm)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -221,32 +190,49 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab7 {
-  .top {
-    position: relative;
-    border-bottom: 1px solid black;
-    margin-bottom: 20px;
-    .userName {
-      margin-left: 50px;
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
     }
-    .addUser {
-      position: absolute;
-      right: 20px;
-      top: 0;
+    .search {
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        display: flex;
+        justify-content: space-between;
+        width: 200px;
+        position: absolute;
+        right: 22px;
+        top: 0;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 485px;
+      overflow-y: auto;
     }
-  }
-  /deep/.el-table__body-wrapper{
-    max-height: 580px;
-    overflow-y: auto;
   }
   .paging {
-    width: auto;
-    display: flex;
     position: absolute;
-    bottom: 40px;
+    bottom: 15px;
     right: 50px;
-    .zong {
-      margin-right: 20px;
-      margin-top: 4px;
-    }
-  }}
+  }
+}
 </style>

houtai/src/views/tab8/index.vue

@@ -1,20 +1,44 @@
 <template>
-  <div class="tab6">
+  <div class="tab8">
     <div class="insideTop">
-      操作日志
+      发帖审核
     </div>
     <div class="obstruct"></div>
     <!-- 主要内容 -->
     <div class="conten">
+      <div class="classify">全部</div>
       <div class="search">
+        <span>提交时间：</span>
+        <el-date-picker
+          style="width: 240px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        >
+        </el-date-picker>
+        <span class="search_k">发帖内容：</span>
         <el-input
           v-model="formData.searchKey"
-          placeholder="请输入关键字"
+          placeholder="关键字"
           style="width: 240px"
         ></el-input>
+        <span class="search_k">状态：</span>
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option label="全部" value=""></el-option>
+          <el-option label="待审核" value="1"></el-option>
+          <el-option label="审核通过" value="time"></el-option>
+          <el-option label="审核不通过" value="number"></el-option>
+        </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
           <el-button type="primary">查 询</el-button>
+          <el-button>重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -32,10 +56,20 @@
               <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="name1" label="账号"> </el-table-column>
-          <el-table-column prop="name1" label="操作模块"> </el-table-column>
-          <el-table-column prop="name2" label="操作事件"></el-table-column>
-          <el-table-column prop="name2" label="操作时间"></el-table-column>
+          <el-table-column prop="name2" label="类型"> </el-table-column>
+          <el-table-column prop="name2" label="发布人"> </el-table-column>
+          <el-table-column prop="name2" label="发布时间">
+          </el-table-column>
+          <el-table-column prop="name2" label="审核状态">
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default='{row}'>
+              <el-button type="text" style="color: #254e91;" @click="lookGood(row.id)">查看</el-button>
+              <el-button type="text" style="color: #254e91;">通过</el-button>
+              <el-button type="text">不通过</el-button>
+              <el-button type="text">删除</el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -55,19 +89,23 @@
 
 <script>
 export default {
-  name: 'tab6',
+  name: 'tab8',
   components: {},
   data () {
     // 这里存放数据
     return {
       total: 100,
+      time: '',
       formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
-        searchKey: ''
+        searchKey: '',
+        type: 'time'
       },
       tableData: [
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '1231231231231231231123123123', name2: '2013-12-26  13:33:23', name3: true },
         { name1: '123', name2: '123', name3: false },
         { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
         { name1: '123', name2: '123', name3: false },
@@ -86,6 +124,9 @@ export default {
   computed: {},
   // 监控data中的数据变化
   watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
   },
   // 方法集合
   methods: {
@@ -95,6 +136,45 @@ export default {
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
+    }, // 点击查看
+    lookGood (id) {
+      this.$router.push({
+        path: '/layout/tab8Look'
+        // query: { conLeftId: this.conLeft }
+      })
+    },
+    // 时间处理----------------
+    handleSelect (e) {
+      const date = []
+      for (const i in e) {
+        date.push(this.gettime(e[i]))
+      }
+      this.formData.startTime = date[0]
+      if (date[1]) {
+        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
+      }
+      if (e === null) this.formData.endTime = ''
+    },
+    gettime (data) {
+      const value =
+        data.getFullYear() +
+        '-' +
+        this.checkTime(data.getMonth() + 1) +
+        '-' +
+        this.checkTime(data.getDate()) +
+        ' ' +
+        this.checkTime(data.getHours()) +
+        ':' +
+        this.checkTime(data.getMinutes()) +
+        ':' +
+        this.checkTime(data.getSeconds())
+      return value
+    },
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -111,7 +191,7 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.tab6 {
+.tab8 {
   height: 100%;
   .insideTop .add{
     right: 55px;
@@ -127,7 +207,6 @@ export default {
       border-bottom: 2px solid #b9412e;
     }
     .search {
-      display: flex;
       margin-bottom: 20px;
       position: relative;
       margin-top: 12px;
@@ -136,17 +215,19 @@ export default {
         margin-left: 30px;
       }
       .search_btn {
-        margin-left: 30px;
         display: flex;
         justify-content: space-between;
-        width: 100px;
+        width: 200px;
+        position: absolute;
+        right: 22px;
+        top: 0;
       }
     }
     .table {
       max-width: 1533px;
     }
     /deep/.el-table__body-wrapper {
-      max-height: 528px;
+      max-height: 485px;
       overflow-y: auto;
     }
   }

houtai/src/views/tab8/tab8Look.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="tab8Look">
+    <div class="insideTop">
+      发帖审核 > 查看发帖信息
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab2')"
+          >返 回</el-button
+        >
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <div class="row">
+        <div>板块：</div>
+        <span>某某某</span>
+      </div>
+      <div class="row">
+        <div>主题：</div>
+        <span>某某某</span>
+      </div>
+      <div class="row">
+        <div>发布人：</div>
+        <span>某某某</span>
+      </div>
+      <div class="row">
+        <div>发布时间：</div>
+        <span>2021-12-12 12:30</span>
+      </div>
+      <div class="con_top">发贴内容</div>
+      <div id="div1">领导简介</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab8Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab8Look {
+  height: 100%;
+  .conten {
+    padding-bottom: 20px;
+    overflow-y: auto;
+    position: relative;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .row {
+      display: flex;
+      margin: 25px 0;
+      & > div {
+        width: 120px;
+        text-align: right;
+      }
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

houtai/src/views/tab9/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="tab6">
+    <div class="insideTop">
+      操作日志
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="search">
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入关键字"
+          style="width: 240px"
+        ></el-input>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="标题">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name1" label="账号"> </el-table-column>
+          <el-table-column prop="name1" label="操作模块"> </el-table-column>
+          <el-table-column prop="name2" label="操作事件"></el-table-column>
+          <el-table-column prop="name2" label="操作时间"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="sizes,prev, pager, next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab6',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      total: 100,
+      formData: {
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: ''
+      },
+      tableData: [
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+  },
+  // 方法集合
+  methods: {
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab6 {
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
+    }
+    .search {
+      display: flex;
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        margin-left: 30px;
+        display: flex;
+        justify-content: space-between;
+        width: 100px;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 528px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
+}
+</style>