初步完成内容管理

houtai/src/apis/tab4.js

@@ -1,45 +1,41 @@
 import axios from '../utils/request'
-// 获取鹏城云脑-物联网设备
-export const securityList = (data) => {
+// 获取列表
+export const videoList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/lot/list',
+    url: '/cms/video/list',
     data
   })
 }
-// 修改
-export const lotSave = (data) => {
+// 排序
+export const videoSort = (id, sort) => {
   return axios({
-    method: 'post',
-    url: '/cms/lot/save',
-    data
+    url: `/cms/video/sort/${id}/${sort}`
   })
 }
-// 今日报警-列表
-export const securityVideoList = (data) => {
+// 是否显示
+export const videoDisplay = (id, display) => {
   return axios({
-    method: 'post',
-    url: '/cms/lot/alarm/list',
-    data
+    url: `/cms/video/display/${id}/${display}`
   })
 }
-// 今日报警-编辑-新增
-export const alarmSave = (data) => {
+// 点击删除
+export const videoRemove = (id) => {
   return axios({
-    method: 'post',
-    url: '/cms/lot/alarm/save',
-    data
+    url: `/cms/video/remove/${id}`
   })
 }
-// 今日报警-详情通过id
-export const videoDetailById = (id) => {
+// 新增、编辑
+export const videoSave = (data) => {
   return axios({
-    url: `/cms/lot/alarm/detail/${id}`
+    method: 'post',
+    url: '/cms/video/save',
+    data
   })
 }
-// 删除
-export const alarmRemove = (id) => {
+// 通过id获取详情
+export const videoDetail = (id) => {
   return axios({
-    url: `/cms/lot/alarm/remove/${id}`
+    url: `/cms/video/detail/${id}`
   })
 }

houtai/src/apis/tab5.js

@@ -1,73 +1,41 @@
 import axios from '../utils/request'
-// 获取工地监控
-export const siteList = (data) => {
+// 获取列表
+export const imgList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/site/list',
+    url: '/cms/img/list',
     data
   })
 }
-// 修改工地监控
-export const siteSave = (data) => {
+// 排序
+export const imgSort = (id, sort) => {
   return axios({
-    method: 'post',
-    url: '/cms/site/save',
-    data
-  })
-}
-// 获取监控画面列表
-export const siteVideoList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/site/video/list',
-    data
-  })
-}
-// 新增-修改监控画面列表
-export const siteVideoSave = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/site/video/save',
-    data
+    url: `/cms/img/sort/${id}/${sort}`
   })
 }
-// 监控画面列表-通过id获取详情
-export const videoDetailById = (id) => {
+// 是否显示
+export const imgDisplay = (id, display) => {
   return axios({
-    url: `/cms/site/video/detail/${id}`
+    url: `/cms/img/display/${id}/${display}`
   })
 }
-// 获取进度管理列表
-export const siteImgList = (data) => {
+// 点击删除
+export const imgRemove = (id) => {
   return axios({
-    method: 'post',
-    url: '/cms/site/img/list',
-    data
+    url: `/cms/img/remove/${id}`
   })
 }
-// 新增-修改监控画面列表
-export const siteImgSave = (data) => {
+// 新增、编辑
+export const imgSave = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/site/img/save',
+    url: '/cms/img/save',
     data
   })
 }
-// 监控画面列表-通过id获取详情
-export const videoDetailById3 = (id) => {
-  return axios({
-    url: `/cms/site/img/detail/${id}`
-  })
-}
-// 监控画面-删除
-export const videoRemove = (id) => {
-  return axios({
-    url: `/cms/site/video/remove/${id}`
-  })
-}
-// 进度管理-删除
-export const imgRemove = (id) => {
+// 通过id获取详情
+export const imgDetail = (id) => {
   return axios({
-    url: `/cms/site/img/remove/${id}`
+    url: `/cms/img/detail/${id}`
   })
 }

houtai/src/apis/tab6.js

@@ -1,46 +1,41 @@
 import axios from '../utils/request'
-// 获取无人机监控
-export const aerialList = (data) => {
+// 获取列表
+export const musicList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/aerial/list',
+    url: '/cms/music/list',
     data
   })
 }
-// 修改无人机监控
-export const aerialSave = (data) => {
+// 排序
+export const musicSort = (id, sort) => {
   return axios({
-    method: 'post',
-    url: '/cms/aerial/save',
-    data
+    url: `/cms/music/sort/${id}/${sort}`
   })
 }
-// 获取无人机监控图-列表
-export const imgList = (data) => {
+// 是否显示
+export const musicDisplay = (id, display) => {
   return axios({
-    method: 'post',
-    url: '/cms/aerial/img/list',
-    data
+    url: `/cms/music/display/${id}/${display}`
   })
 }
-// 新增-修改无人机监控图
-export const aerialImgSave = (data) => {
+// 点击删除
+export const musicRemove = (id) => {
   return axios({
-    method: 'post',
-    url: '/cms/aerial/img/save',
-    data
+    url: `/cms/music/remove/${id}`
   })
 }
-// 无人机监控图-通过id获取详情
-export const imgDetailById = (id) => {
+// 新增、编辑
+export const musicSave = (data) => {
   return axios({
-    url: `/cms/aerial/img/detail/${id}`
+    method: 'post',
+    url: '/cms/music/save',
+    data
   })
 }
-
-// 无人机监控图-删除
-export const imgRemove = (id) => {
+// 通过id获取详情
+export const musicDetail = (id) => {
   return axios({
-    url: `/cms/aerial/img/remove/${id}`
+    url: `/cms/music/detail/${id}`
   })
 }

houtai/src/views/tab1/index.vue

@@ -170,6 +170,7 @@ export default {
       this.formData.sortType = 0
       this.time = ''
       this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
       this.goodsList(this.formData)
     },
     // 点击查询

houtai/src/views/tab2/index.vue

@@ -208,6 +208,7 @@ export default {
       this.formData.sortType = 0
       this.time = ''
       this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
       this.leaderList(this.formData)
     },
     // 点击查询

houtai/src/views/tab2/模板.vue

@@ -1,227 +0,0 @@
-<template>
-  <div class="tab2">
-    <div class="insideTop">
-      学院领导管理
-      <div class="add">
-        <el-button type="primary" @click="addGood">新增学院领导</el-button>
-      </div>
-    </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="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="姓名" width="200">
-            <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 label="封面图片" width="100">
-            <template #default>
-              <img class="table_img" src="../../assets/img/demo.png" alt="" />
-            </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="发布时间" width="200">
-          </el-table-column>
-          <el-table-column prop="address" label="排序" width="80">
-            <template #default="{ row }">
-              <el-input type="text" v-model="row.name1"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
-            <template #default="{ row }">
-              <el-switch v-model="row.name3" active-color="#b9412e">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template #default="{ row }">
-              <el-button type="text" v-if="row.name3" @click="lookGood(row.id)"
-                >查看</el-button
-              >
-              <el-button type="text" v-if="!row.name3">编辑</el-button>
-              <el-button type="text" v-if="!row.name3">删除</el-button>
-            </template>
-          </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: 'tab2',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-      total: 100,
-      time: '',
-      formData: {
-        startTime: '',
-        endTime: '',
-        pageNum: 1,
-        pageSize: 9999,
-        searchKey: '',
-        type: 'time'
-      },
-      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: {
-    time (val) {
-      this.handleSelect(val)
-    }
-  },
-  // 方法集合
-  methods: {
-    // 分页器方法
-    currentChange (val) {
-      // console.log('当前页改变了', val)
-    },
-    sizeChange (val) {
-      // console.log('条数改变了', val)
-    }, // 点击查看
-    lookGood (id) {
-      // this.$router.push({
-      //   path: '/layout/tab1Look',
-      //   query: { conLeftId: this.conLeft }
-      // })
-    },
-    // 点击新增
-    addGood () {}
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab2 {
-  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 {
-      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;
-    }
-  }
-  .paging {
-    position: absolute;
-    bottom: 15px;
-    right: 50px;
-  }
-}
-</style>

houtai/src/views/tab3/index.vue

@@ -219,6 +219,7 @@ export default {
       this.formData.sortType = 0
       this.time = ''
       this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
       this.studentList(this.formData)
     },
     // 点击查询
@@ -281,7 +282,7 @@ export default {
     // 封装获取列表函数
     async studentList (data) {
       const res = await studentList(data)
-      console.log(998, res)
+      // console.log(998, res)
       this.total = res.data.total
       this.tableData = res.data.records
     }

houtai/src/views/tab4/index.vue

@@ -3,7 +3,9 @@
     <div class="insideTop">
       学院宣传片管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab4Add')">新增宣传片</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab4Add')"
+          >新增宣传片</el-button
+        >
       </div>
     </div>
     <div class="obstruct"></div>
@@ -21,7 +23,7 @@
           end-placeholder="结束时间"
         >
         </el-date-picker>
-        <span class="search_k">标题关键字：</span>
+        <span class="search_k">姓名关键字：</span>
         <el-input
           v-model="formData.searchKey"
           placeholder="请输入"
@@ -29,17 +31,17 @@
         ></el-input>
         <span class="search_k">排序：</span>
         <el-select
-          v-model="formData.type"
+          v-model="formData.sortType"
           placeholder="请选择"
           style="width: 240px"
         >
-          <el-option label="发布时间" value="time"></el-option>
-          <el-option label="排序编号" value="number"></el-option>
+          <el-option label="发布时间" :value="0"></el-option>
+          <el-option label="排序编号" :value="1"></el-option>
         </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
-          <el-button type="primary">查 询</el-button>
-          <el-button>重 置</el-button>
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+          <el-button @click="resetBtn">重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -52,38 +54,61 @@
               }}
             </template>
           </el-table-column>
-          <el-table-column label="标题" width="200">
+          <el-table-column label="标题" width="300">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.name">{{ row.name }}</span>
             </template>
           </el-table-column>
           <el-table-column label="封面图片" width="120">
-            <template #default>
-              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            <template #default="{ row }">
+              <img
+                class="table_img"
+                :src="baseURL + row.thumb"
+                alt=""
+                :onerror="defaultImg"
+              />
             </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="发布时间" width="200">
+          <el-table-column prop="visit" label="阅读"> </el-table-column>
+          <el-table-column prop="creatorName" label="发布人"> </el-table-column>
+          <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">
             <template #default="{ row }">
-              <el-input type="text" v-model="row.name1"></el-input>
+              <el-input
+                type="text"
+                v-model="row.sort"
+                @blur="changeSort(row.sort, row.id)"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
+          <el-table-column label="是否显示">
             <template #default="{ row }">
-              <el-switch v-model="row.name3" active-color="#b9412e">
+              <el-switch
+                v-model="row.display"
+                active-color="#b9412e"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeSwit($event, row.id)"
+              >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="lookGood(row.id)"
-                >查看</el-button
+              <el-button type="text" @click="lookGood(row.id)">查看</el-button>
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="editLeader(row.id)"
+                >编辑</el-button
+              >
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="delLeader(row.id)"
+                >删除</el-button
               >
-              <el-button type="text" v-if="!row.name3">编辑</el-button>
-              <el-button type="text" v-if="!row.name3">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -104,36 +129,30 @@
 </template>
 
 <script>
+import {
+  videoList,
+  videoSort,
+  videoDisplay,
+  videoRemove
+} from '@/apis/tab4'
+import axios from '@/utils/request'
 export default {
   name: 'tab4',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        sortType: 0
       },
-      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 }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -146,17 +165,80 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击编辑
+    editLeader (id) {
+      this.$router.push({
+        path: '/layout/tab4Add',
+        query: { id }
+      })
+    },
+    // 点击删除
+    delLeader (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await videoRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.videoList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }, // 点击开关
+    async changeSwit (val, id) {
+      const res = await videoDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.videoList(this.formData)
+      } else this.$message.warning(res.msg)
+      // console.log(998, val, id)
+    },
+    // 排序
+    async changeSort (val, id) {
+      // console.log(998, val, id)
+      if (Number(val) < 1) return this.$message.warning('不能小于1')
+      const res = await videoSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.videoList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+      this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
+      this.videoList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.videoList(this.formData)
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.videoList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.videoList(this.formData)
+    },
+    // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab4Look'
-        // query: { conLeftId: this.conLeft }
+        path: '/layout/tab4Look',
+        query: { id }
       })
     },
     // 时间处理----------------
@@ -191,10 +273,21 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表函数
+    async videoList (data) {
+      const res = await videoList(data)
+      // console.log(998, res)
+      this.total = res.data.total
+      this.tableData = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.videoList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -209,7 +302,7 @@ export default {
 <style lang='less' scoped>
 .tab4 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab4/tab4Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab4Add">
     <div class="insideTop">
-      学院宣传片管理 > 新增宣传片
+      学院宣传片管理 > {{ruleForm.id?'编辑':'新增'}}宣传片
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -31,11 +31,11 @@
           <i class="biaoshi"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/video/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
@@ -51,7 +51,9 @@
             </div>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <p class="upHint">格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。</p>
+          <p class="upHint">
+            格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。
+          </p>
         </el-form-item>
         <!-- 上传附件 -->
         <el-form-item label="视频文件：">
@@ -60,7 +62,7 @@
             multiple
             class="upload-demo"
             :file-list="fileList"
-            :action="baseURL + '/cms/security/video/upload/video'"
+            :action="baseURL + '/cms/video/video/upload'"
             :headers="{ token }"
             :before-upload="beforeFujian"
             :on-success="successFujian"
@@ -73,7 +75,9 @@
             <el-button size="small" type="primary">点击上传</el-button>
             <div class="el-upload__tip" slot="tip">
               <p class="upHint">格式要求：</p>
-              <p class="upHint">1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。</p>
+              <p class="upHint">
+                1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。
+              </p>
               <p class="upHint">2、最大支持2G的视频文件。</p>
             </div>
           </el-upload>
@@ -81,13 +85,15 @@
       </el-form>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary" @click="saveGood">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { videoSave, videoDetail } from '@/apis/tab4'
+import axios from '@/utils/request'
 export default {
   name: 'tab4Add',
   components: {},
@@ -98,10 +104,9 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
-        id: '',
         name: '',
         thumb: '',
-        video: '',
+        filePath: '',
         fileName: ''
       },
       rules: {
@@ -111,6 +116,18 @@ export default {
   },
   computed: {},
   methods: {
+    // 点击保存
+    async saveGood () {
+      if (this.ruleForm.name.trim() === '') { return this.$message.warning('标题不能为空') }
+      if (this.ruleForm.thumb === '') { return this.$message.warning('图片不能为空') }
+      if (this.ruleForm.filePath === '') { return this.$message.warning('文件不能为空') }
+      const obj = { ...this.ruleForm }
+      const res = await videoSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.$router.push('/layout/tab4')
+      } else this.$message.warning(res.msg)
+    },
     // 点击返回
     goBack () {
       this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
@@ -129,7 +146,7 @@ export default {
     beforethumbUpload (file) {
       // console.log(998, file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
+      const sizeOk = file.size / 1024 / 1024 < 20
       const typeOk =
         file.type === 'image/png' ||
         file.type === 'image/jpeg' ||
@@ -140,7 +157,7 @@ export default {
           this.$message.error('照片格式有误！')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过5M！')
+          this.$message.error('照片大小超过20M！')
           reject(file)
         } else if (file.name.length > 32) {
           this.$message.error('照片名字不能超过32个字！')
@@ -158,7 +175,7 @@ export default {
     // 上传附件
     beforeFujian (file) {
       console.log('附件上传前', file)
-      const sizeOk = file.size / 1024 / 1024 < 1024
+      const sizeOk = file.size / 1024 / 1024 < 2048
       const typeOk =
         file.type === 'video/mp4' ||
         file.type === 'video/avi' ||
@@ -172,7 +189,7 @@ export default {
           this.$message.error('视频名字不能超过32个字')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('视频大小超过1GB！')
+          this.$message.error('视频大小超过2GB！')
           reject(file)
         } else if (!typeOk) {
           this.$message.error('视频格式有误！')
@@ -185,7 +202,7 @@ export default {
     successFujian (file) {
       console.log('上传附件成功', file)
       if (file.code === 0) {
-        this.ruleForm.video = file.data.urlPath
+        this.ruleForm.filePath = file.data.urlPath
         this.ruleForm.fileName = file.data.fileName
         this.$message.success('上传成功')
       } else if (file.code === -1) {
@@ -198,7 +215,7 @@ export default {
       }
     },
     handleRemove (file, fileList) {
-      this.ruleForm.video = ''
+      this.ruleForm.filePath = ''
       this.ruleForm.fileName = ''
     },
     handleExceed (files, fileList) {
@@ -206,7 +223,19 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await videoDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data
+      // 附件回显
+      this.fileList = [{ name: res.data.fileName }]
+      // console.log(998, res)
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
@@ -264,6 +293,16 @@ export default {
       transform: translateX(-50%);
       bottom: 15px;
     }
+    .imgdiv {
+      max-width: 200px;
+      max-height: 200px;
+      & > img {
+        border: 10px solid #ccc;
+      }
+    }
+    .el-icon-circle-close {
+      font-size: 24px;
+    }
   }
 }
 </style>

houtai/src/views/tab4/tab4Look.vue

@@ -15,11 +15,12 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>某某学院视频</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>封面图片：</div>
         <el-image
+          v-if="srcList.length!==0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
@@ -28,34 +29,28 @@
       </div>
       <div class="row">
         <div>视频文件：</div>
-        <a href="">视频文件.mp4</a>
+        <a :href="baseURL+myObj.filePath" download>{{myObj.fileName}}</a>
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { videoDetail } from '@/apis/tab4'
+import axios from '@/utils/request'
 export default {
   name: 'tab4Look',
   components: {},
   data () {
     // 这里存放数据
     return {
-      value: true,
-      srcList: [
-        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68'
-      ],
-      srcList2: [
-        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
-      ]
+      baseURL: '',
+      myObj: {},
+      srcList: []
     }
   },
   // 监听属性 类似于data概念
@@ -67,7 +62,15 @@ export default {
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await videoDetail(Number(this.$route.query.id))
+      this.myObj = res.data
+      this.srcList = [this.baseURL + res.data.thumb]
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/views/tab5/index.vue

@@ -3,7 +3,9 @@
     <div class="insideTop">
       校园图片管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab5Add')">新增校园图片</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab5Add')"
+          >新增校园图片</el-button
+        >
       </div>
     </div>
     <div class="obstruct"></div>
@@ -21,7 +23,7 @@
           end-placeholder="结束时间"
         >
         </el-date-picker>
-        <span class="search_k">标题关键字：</span>
+        <span class="search_k">姓名关键字：</span>
         <el-input
           v-model="formData.searchKey"
           placeholder="请输入"
@@ -29,17 +31,17 @@
         ></el-input>
         <span class="search_k">排序：</span>
         <el-select
-          v-model="formData.type"
+          v-model="formData.sortType"
           placeholder="请选择"
           style="width: 240px"
         >
-          <el-option label="发布时间" value="time"></el-option>
-          <el-option label="排序编号" value="number"></el-option>
+          <el-option label="发布时间" :value="0"></el-option>
+          <el-option label="排序编号" :value="1"></el-option>
         </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
-          <el-button type="primary">查 询</el-button>
-          <el-button>重 置</el-button>
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+          <el-button @click="resetBtn">重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -52,38 +54,61 @@
               }}
             </template>
           </el-table-column>
-          <el-table-column label="标题" width="200">
+          <el-table-column label="标题" width="300">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.name">{{ row.name }}</span>
             </template>
           </el-table-column>
           <el-table-column label="封面图片" width="120">
-            <template #default>
-              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            <template #default="{ row }">
+              <img
+                class="table_img"
+                :src="baseURL + row.thumb"
+                alt=""
+                :onerror="defaultImg"
+              />
             </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="发布时间" width="200">
+          <el-table-column prop="visit" label="阅读"> </el-table-column>
+          <el-table-column prop="creatorName" label="发布人"> </el-table-column>
+          <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">
             <template #default="{ row }">
-              <el-input type="text" v-model="row.name1"></el-input>
+              <el-input
+                type="text"
+                v-model="row.sort"
+                @blur="changeSort(row.sort, row.id)"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
+          <el-table-column label="是否显示">
             <template #default="{ row }">
-              <el-switch v-model="row.name3" active-color="#b9412e">
+              <el-switch
+                v-model="row.display"
+                active-color="#b9412e"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeSwit($event, row.id)"
+              >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="lookGood(row.id)"
-                >查看</el-button
+              <el-button type="text" @click="lookGood(row.id)">查看</el-button>
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="editLeader(row.id)"
+                >编辑</el-button
+              >
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="delLeader(row.id)"
+                >删除</el-button
               >
-              <el-button type="text" v-if="!row.name3">编辑</el-button>
-              <el-button type="text" v-if="!row.name3">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -104,36 +129,30 @@
 </template>
 
 <script>
+import {
+  imgList,
+  imgSort,
+  imgDisplay,
+  imgRemove
+} from '@/apis/tab5'
+import axios from '@/utils/request'
 export default {
   name: 'tab5',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        sortType: 0
       },
-      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 }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -146,17 +165,80 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击编辑
+    editLeader (id) {
+      this.$router.push({
+        path: '/layout/tab5Add',
+        query: { id }
+      })
+    },
+    // 点击删除
+    delLeader (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await imgRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.imgList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }, // 点击开关
+    async changeSwit (val, id) {
+      const res = await imgDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.imgList(this.formData)
+      } else this.$message.warning(res.msg)
+      // console.log(998, val, id)
+    },
+    // 排序
+    async changeSort (val, id) {
+      // console.log(998, val, id)
+      if (Number(val) < 1) return this.$message.warning('不能小于1')
+      const res = await imgSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.imgList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+      this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
+      this.imgList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.imgList(this.formData)
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.imgList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.imgList(this.formData)
+    },
+    // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab5Look'
-        // query: { conLeftId: this.conLeft }
+        path: '/layout/tab5Look',
+        query: { id }
       })
     },
     // 时间处理----------------
@@ -191,10 +273,21 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表函数
+    async imgList (data) {
+      const res = await imgList(data)
+      // console.log(998, res)
+      this.total = res.data.total
+      this.tableData = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.imgList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -209,7 +302,7 @@ export default {
 <style lang='less' scoped>
 .tab5 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab5/tab5Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab5Add">
     <div class="insideTop">
-      校园图片管理 > 新增图片
+      校园图片管理 > {{ruleForm.id?'编辑':'新增'}}图片
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -31,11 +31,11 @@
           <i class="biaoshi biaoshi1"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/img/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
@@ -56,13 +56,15 @@
       </el-form>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary" @click="saveGood">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { imgSave, imgDetail } from '@/apis/tab5'
+import axios from '@/utils/request'
 export default {
   name: 'tab5Add',
   components: {},
@@ -72,10 +74,8 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
-        id: '',
         name: '',
-        thumb: '',
-        fileName: ''
+        thumb: ''
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }]
@@ -84,6 +84,18 @@ export default {
   },
   computed: {},
   methods: {
+    // 点击保存
+    async saveGood () {
+      if (this.ruleForm.name.trim() === '') { return this.$message.warning('标题不能为空') }
+      if (this.ruleForm.thumb === '') { return this.$message.warning('图片不能为空') }
+      const obj = { ...this.ruleForm }
+      // console.log(998, obj)
+      const res = await imgSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.$router.push('/layout/tab5')
+      } else this.$message.warning(res.msg)
+    },
     // 点击返回
     goBack () {
       this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
@@ -102,7 +114,7 @@ export default {
     beforethumbUpload (file) {
       // console.log(998, file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
+      const sizeOk = file.size / 1024 / 1024 < 20
       const typeOk =
         file.type === 'image/png' ||
         file.type === 'image/jpeg' ||
@@ -113,7 +125,7 @@ export default {
           this.$message.error('照片格式有误！')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过5M！')
+          this.$message.error('照片大小超过20M！')
           reject(file)
         } else if (file.name.length > 32) {
           this.$message.error('照片名字不能超过32个字！')
@@ -130,7 +142,17 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await imgDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data
+      // console.log(998, res)
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
@@ -185,6 +207,16 @@ export default {
       transform: translateX(-50%);
       bottom: 15px;
     }
+    .imgdiv {
+      max-width: 200px;
+      max-height: 200px;
+      & > img {
+        border: 10px solid #ccc;
+      }
+    }
+    .el-icon-circle-close {
+      font-size: 24px;
+    }
   }
 }
 </style>

houtai/src/views/tab5/tab5Look.vue

@@ -15,11 +15,12 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>某某学院视频</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>图片：</div>
         <el-image
+          v-if="srcList.length!==0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
@@ -28,15 +29,15 @@
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
+import { imgDetail } from '@/apis/tab5'
+import axios from '@/utils/request'
 
 export default {
   name: 'tab5Look',
@@ -44,14 +45,9 @@ export default {
   data () {
     // 这里存放数据
     return {
-      value: true,
-      srcList: [
-        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68'
-      ],
-      srcList2: [
-        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
-      ]
+      baseURL: '',
+      myObj: {},
+      srcList: []
     }
   },
   // 监听属性 类似于data概念
@@ -63,7 +59,15 @@ export default {
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await imgDetail(Number(this.$route.query.id))
+      this.myObj = res.data
+      this.srcList = [this.baseURL + res.data.thumb]
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/views/tab6/index.vue

@@ -3,7 +3,9 @@
     <div class="insideTop">
       校歌管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab6Add')">新增音频</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab6Add')"
+          >新增音频</el-button
+        >
       </div>
     </div>
     <div class="obstruct"></div>
@@ -21,7 +23,7 @@
           end-placeholder="结束时间"
         >
         </el-date-picker>
-        <span class="search_k">标题关键字：</span>
+        <span class="search_k">姓名关键字：</span>
         <el-input
           v-model="formData.searchKey"
           placeholder="请输入"
@@ -29,17 +31,17 @@
         ></el-input>
         <span class="search_k">排序：</span>
         <el-select
-          v-model="formData.type"
+          v-model="formData.sortType"
           placeholder="请选择"
           style="width: 240px"
         >
-          <el-option label="发布时间" value="time"></el-option>
-          <el-option label="排序编号" value="number"></el-option>
+          <el-option label="发布时间" :value="0"></el-option>
+          <el-option label="排序编号" :value="1"></el-option>
         </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
-          <el-button type="primary">查 询</el-button>
-          <el-button>重 置</el-button>
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+          <el-button @click="resetBtn">重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -52,33 +54,61 @@
               }}
             </template>
           </el-table-column>
-          <el-table-column label="标题">
+          <el-table-column label="标题" width="300">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.name">{{ row.name }}</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 label="封面图片" width="120">
+            <template #default="{ row }">
+              <img
+                class="table_img"
+                :src="baseURL + row.thumb"
+                alt=""
+                :onerror="defaultImg"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="visit" label="阅读"> </el-table-column>
+          <el-table-column prop="creatorName" label="发布人"> </el-table-column>
+          <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">
             <template #default="{ row }">
-              <el-input type="text" v-model="row.name1"></el-input>
+              <el-input
+                type="text"
+                v-model="row.sort"
+                @blur="changeSort(row.sort, row.id)"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="name3" label="是否显示">
+          <el-table-column label="是否显示">
             <template #default="{ row }">
-              <el-switch v-model="row.name3" active-color="#b9412e">
+              <el-switch
+                v-model="row.display"
+                active-color="#b9412e"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeSwit($event, row.id)"
+              >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="lookGood(row.id)"
-                >查看</el-button
+              <el-button type="text" @click="lookGood(row.id)">查看</el-button>
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="editLeader(row.id)"
+                >编辑</el-button
+              >
+              <el-button
+                type="text"
+                v-if="!row.display"
+                @click="delLeader(row.id)"
+                >删除</el-button
               >
-              <el-button type="text" v-if="!row.name3">编辑</el-button>
-              <el-button type="text" v-if="!row.name3">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -99,36 +129,30 @@
 </template>
 
 <script>
+import {
+  musicList,
+  musicSort,
+  musicDisplay,
+  musicRemove
+} from '@/apis/tab6'
+import axios from '@/utils/request'
 export default {
   name: 'tab6',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        sortType: 0
       },
-      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 }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -141,17 +165,80 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击编辑
+    editLeader (id) {
+      this.$router.push({
+        path: '/layout/tab6Add',
+        query: { id }
+      })
+    },
+    // 点击删除
+    delLeader (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await musicRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.musicList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }, // 点击开关
+    async changeSwit (val, id) {
+      const res = await musicDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.musicList(this.formData)
+      } else this.$message.warning(res.msg)
+      // console.log(998, val, id)
+    },
+    // 排序
+    async changeSort (val, id) {
+      // console.log(998, val, id)
+      if (Number(val) < 1) return this.$message.warning('不能小于1')
+      const res = await musicSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.musicList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+      this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
+      this.musicList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.musicList(this.formData)
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.musicList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.musicList(this.formData)
+    },
+    // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab6Look'
-        // query: { conLeftId: this.conLeft }
+        path: '/layout/tab6Look',
+        query: { id }
       })
     },
     // 时间处理----------------
@@ -186,10 +273,21 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表函数
+    async musicList (data) {
+      const res = await musicList(data)
+      // console.log(998, res)
+      this.total = res.data.total
+      this.tableData = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.musicList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -204,7 +302,7 @@ export default {
 <style lang='less' scoped>
 .tab6 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab6/tab6Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab6Add">
     <div class="insideTop">
-      校歌管理 > 新增音频
+      校歌管理 > {{ruleForm.id?'编辑':'新增'}}音频
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -31,11 +31,11 @@
           <i class="biaoshi biaoshi1"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/music/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
@@ -59,7 +59,7 @@
             multiple
             class="upload-demo"
             :file-list="fileList"
-            :action="baseURL + '/cms/security/video/upload/video'"
+            :action="baseURL + '/cms/music/video/upload'"
             :headers="{ token }"
             :before-upload="beforeFujian"
             :on-success="successFujian"
@@ -84,13 +84,15 @@
       </el-form>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary" @click="saveGood">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { musicSave, musicDetail } from '@/apis/tab6'
+import axios from '@/utils/request'
 import E from 'wangeditor'
 export default {
   name: 'tab6Add',
@@ -102,10 +104,10 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
-        id: '',
         name: '',
-        video: '',
-        fileName: ''
+        filePath: '',
+        fileName: '',
+        thumb: ''
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }]
@@ -114,6 +116,19 @@ export default {
   },
   computed: {},
   methods: {
+    // 点击保存
+    async saveGood () {
+      if (this.ruleForm.name.trim() === '') { return this.$message.warning('标题不能为空') }
+      if (this.ruleForm.thumb === '') { return this.$message.warning('图片不能为空') }
+      if (this.ruleForm.filePath === '') { return this.$message.warning('音频不能为空') }
+      if (this.editor.txt.html() === '') { return this.$message.warning('歌词不能为空') }
+      const obj = { ...this.ruleForm, description: this.editor.txt.html() }
+      const res = await musicSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.$router.push('/layout/tab6')
+      } else this.$message.warning(res.msg)
+    },
     // 点击返回
     goBack () {
       this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
@@ -132,7 +147,7 @@ export default {
     beforethumbUpload (file) {
       // console.log(998, file)
       // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
+      const sizeOk = file.size / 1024 / 1024 < 20
       const typeOk =
         file.type === 'image/png' ||
         file.type === 'image/jpeg' ||
@@ -143,7 +158,7 @@ export default {
           this.$message.error('照片格式有误！')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('照片大小超过5M！')
+          this.$message.error('照片大小超过20M！')
           reject(file)
         } else if (file.name.length > 32) {
           this.$message.error('照片名字不能超过32个字！')
@@ -161,21 +176,16 @@ export default {
     // 上传附件
     beforeFujian (file) {
       console.log('附件上传前', file)
-      const sizeOk = file.size / 1024 / 1024 < 1024
+      const sizeOk = file.size / 1024 / 1024 < 10
       const typeOk =
-        file.type === 'video/mp4' ||
-        file.type === 'video/avi' ||
-        file.type === 'video/quicktime' ||
-        file.type === 'video/rm' ||
-        (file.type === '' &&
-          (file.name.includes('.flv') || file.name.includes('.rmvb'))) ||
-        file.type === 'video/3gpp'
+        file.type === 'audio/mpeg' ||
+        file.type === 'audio/wav'
       return new Promise((resolve, reject) => {
         if (file.name.length > 32) {
           this.$message.error('音频名字不能超过32个字')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('音频大小超过1GB！')
+          this.$message.error('音频大小超过10M！')
           reject(file)
         } else if (!typeOk) {
           this.$message.error('音频格式有误！')
@@ -188,7 +198,7 @@ export default {
     successFujian (file) {
       console.log('上传附件成功', file)
       if (file.code === 0) {
-        this.ruleForm.video = file.data.urlPath
+        this.ruleForm.filePath = file.data.urlPath
         this.ruleForm.fileName = file.data.fileName
         this.$message.success('上传成功')
       } else if (file.code === -1) {
@@ -201,7 +211,7 @@ export default {
       }
     },
     handleRemove (file, fileList) {
-      this.ruleForm.video = ''
+      this.ruleForm.filePath = ''
       this.ruleForm.fileName = ''
     },
     handleExceed (files, fileList) {
@@ -210,9 +220,13 @@ export default {
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
     // 初始化富文本
     // 富文本
     this.editor = new E('#div1')
@@ -234,7 +248,16 @@ export default {
     this.editor.config.uploadImgShowBase64 = true // 图片地址
     this.editor.config.showLinkVideo = false
     this.editor.create()
-    this.editor.txt.html('66666666666666666')
+    // 如果是编辑
+    if (this.$route.query.id) {
+      const res = await musicDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data
+      console.log(998, res)
+      // 富文本回显
+      this.editor.txt.html(res.data.description)
+      // 附件回显
+      this.fileList = [{ name: res.data.fileName }]
+    }
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -283,14 +306,23 @@ export default {
       text-align: center;
     }
     .con_btn {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 15px;
+      width: 80px;
+      margin: 0 auto;
+      margin-bottom: 20px;
     }
     #div1{
       width: 1200px;
     }
+    .imgdiv {
+      max-width: 200px;
+      max-height: 200px;
+      & > img {
+        border: 10px solid #ccc;
+      }
+    }
+    .el-icon-circle-close {
+      font-size: 24px;
+    }
   }
 }
 </style>

houtai/src/views/tab6/tab6Look.vue

@@ -15,37 +15,47 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>某某学院视频</span>
+        <span>{{myObj.name}}</span>
+      </div>
+      <div class="row">
+        <div>封面：</div>
+        <el-image
+          v-if="srcList.length!==0"
+          style="width: 200px; height: 200px"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+        >
+        </el-image>
       </div>
       <div class="row">
         <div>音频文件：</div>
-        <a href="">音频文件.mp3</a>
+        <a :href="baseURL+myObj.filePath" download>{{myObj.fileName}}</a>
       </div>
       <div class="row">
         <div>歌词：</div>
-        <div class="lyric">
-          <p v-for="i in 20" :key="i">我们是一支不可战胜的力量。</p>
+        <div class="lyric" v-html="myObj.description">
         </div>
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import axios from '@/utils/request'
+import { musicDetail } from '@/apis/tab6'
 export default {
   name: 'tab6Look',
   components: {},
   data () {
     // 这里存放数据
     return {
-      value: true
+      baseURL: '',
+      myObj: {},
+      srcList: []
     }
   },
   // 监听属性 类似于data概念
@@ -57,7 +67,15 @@ export default {
 
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await musicDetail(Number(this.$route.query.id))
+      this.myObj = res.data
+      this.srcList = [this.baseURL + res.data.thumb]
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},