整理

houtai/src/apis/tab3.js

@@ -7,35 +7,3 @@ export const studentList = (data) => {
     data
   })
 }
-// 排序
-export const studentSort = (id, sort) => {
-  return axios({
-    url: `/cms/student/sort/${id}/${sort}`
-  })
-}
-// 是否显示
-export const studentDisplay = (id, display) => {
-  return axios({
-    url: `/cms/student/display/${id}/${display}`
-  })
-}
-// 点击删除
-export const studentRemove = (id) => {
-  return axios({
-    url: `/cms/student/remove/${id}`
-  })
-}
-// 新增、编辑
-export const studentSave = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/student/save',
-    data
-  })
-}
-// 通过id获取详情
-export const studentDetail = (id) => {
-  return axios({
-    url: `/cms/student/detail/${id}`
-  })
-}

houtai/src/apis/tab4.js

@@ -7,35 +7,3 @@ export const videoList = (data) => {
     data
   })
 }
-// 排序
-export const videoSort = (id, sort) => {
-  return axios({
-    url: `/cms/video/sort/${id}/${sort}`
-  })
-}
-// 是否显示
-export const videoDisplay = (id, display) => {
-  return axios({
-    url: `/cms/video/display/${id}/${display}`
-  })
-}
-// 点击删除
-export const videoRemove = (id) => {
-  return axios({
-    url: `/cms/video/remove/${id}`
-  })
-}
-// 新增、编辑
-export const videoSave = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/video/save',
-    data
-  })
-}
-// 通过id获取详情
-export const videoDetail = (id) => {
-  return axios({
-    url: `/cms/video/detail/${id}`
-  })
-}

houtai/src/apis/tab5.js

@@ -1,41 +0,0 @@
-import axios from '../utils/request'
-// 获取列表
-export const imgList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/img/list',
-    data
-  })
-}
-// 排序
-export const imgSort = (id, sort) => {
-  return axios({
-    url: `/cms/img/sort/${id}/${sort}`
-  })
-}
-// 是否显示
-export const imgDisplay = (id, display) => {
-  return axios({
-    url: `/cms/img/display/${id}/${display}`
-  })
-}
-// 点击删除
-export const imgRemove = (id) => {
-  return axios({
-    url: `/cms/img/remove/${id}`
-  })
-}
-// 新增、编辑
-export const imgSave = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/img/save',
-    data
-  })
-}
-// 通过id获取详情
-export const imgDetail = (id) => {
-  return axios({
-    url: `/cms/img/detail/${id}`
-  })
-}

houtai/src/apis/tab6.js

@@ -1,41 +0,0 @@
-import axios from '../utils/request'
-// 获取列表
-export const musicList = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/music/list',
-    data
-  })
-}
-// 排序
-export const musicSort = (id, sort) => {
-  return axios({
-    url: `/cms/music/sort/${id}/${sort}`
-  })
-}
-// 是否显示
-export const musicDisplay = (id, display) => {
-  return axios({
-    url: `/cms/music/display/${id}/${display}`
-  })
-}
-// 点击删除
-export const musicRemove = (id) => {
-  return axios({
-    url: `/cms/music/remove/${id}`
-  })
-}
-// 新增、编辑
-export const musicSave = (data) => {
-  return axios({
-    method: 'post',
-    url: '/cms/music/save',
-    data
-  })
-}
-// 通过id获取详情
-export const musicDetail = (id) => {
-  return axios({
-    url: `/cms/music/detail/${id}`
-  })
-}

houtai/src/router/index.js

@@ -63,18 +63,6 @@ const routes = [
         component: () => import('../views/tab3/index.vue')
       },
       {
-        path: 'tab3Add',
-        name: 'tab3Add',
-        meta: { myInd: 3 },
-        component: () => import('../views/tab3/tab3Add.vue')
-      },
-      {
-        path: 'tab3Look',
-        name: 'tab3Look',
-        meta: { myInd: 3 },
-        component: () => import('../views/tab3/tab3Look.vue')
-      },
-      {
         path: 'tab4',
         name: 'tab4',
         meta: { myInd: 4 },

houtai/src/views/layout/index.vue

@@ -2,7 +2,7 @@
   <div class="layout">
     <div class="top">
       <img src="@/assets/img/logo.png" alt="" />
-      <p>中国人民解放军陆军勤务学院</p>
+      <p>北京武警执勤第七支队</p>
       <div class="top_right">
         <div class="user" @click="cut = !cut">
           <img src="@/assets/img/user.jpg" alt="" />

houtai/src/views/tab1/index.vue

@@ -3,7 +3,7 @@
     <div class="insideTop">
       文物典藏管理
       <div class="add">
-        <el-button type="primary" @click="addGood">新增文物典藏</el-button>
+        <el-button type="primary" @click="addGood">新增</el-button>
       </div>
     </div>
     <div class="obstruct"></div>

houtai/src/views/tab1/tab1Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab1Add">
     <div class="insideTop">
-      文物典藏管理 > {{ruleForm.id?'编辑':'新增'}}文物典藏
+      文物典藏管理 > {{ruleForm.id?'编辑':'新增'}}
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>

houtai/src/views/tab1/tab1Add2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab1Add2">
     <div class="insideTop">
-      文物典藏管理 > 新增文物典藏
+      文物典藏管理 > 新增
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -33,7 +33,7 @@
           <el-radio v-model="conLeftId" label="video：视频" disabled>视频档案</el-radio>
         </el-form-item>
         <!-- 图片 -->
-        <el-form-item label="图片：" style="height:480px">
+        <el-form-item label="图片：" style="height:480px;overflow-y: auto;">
           <i class="biaoshi biaoshi1"></i>
           <div class="imgBox">
             <div
@@ -242,7 +242,7 @@ export default {
   .conten {
     /deep/.el-form-item{
       max-height: 480px;
-      overflow-y: auto;
+      // overflow-y: auto;
     }
     position: relative;
     /deep/.el-icon-plus {

houtai/src/views/tab1/tab1Look.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="tab1Look">
     <div class="insideTop">
-      文物典藏管理 > 查看文物典藏
+      文物典藏管理 > 查看
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>

houtai/src/views/tab2/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tab2">
     <div class="insideTop">
-      学院领导管理
+      荣誉榜管理
       <div class="add">
         <el-button type="primary" @click="$router.push('/layout/tab2Add')"
-          >新增领导信息</el-button
+          >新增</el-button
         >
       </div>
     </div>

houtai/src/views/tab2/tab2Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab2Add">
     <div class="insideTop">
-      学院领导管理 > {{ ruleForm.id ? "编辑" : "新增" }}领导信息
+      荣誉榜管理 > {{ ruleForm.id ? "编辑" : "新增" }}
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>

houtai/src/views/tab2/tab2Look.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab2Look">
     <div class="insideTop">
-      学院领导管理 > 查看领导信息
+      荣誉榜管理 > 查看
       <div class="add">
         <el-button type="primary" @click="$router.push('/layout/tab2')"
           >返 回</el-button

houtai/src/views/tab3/index.vue

@@ -3,120 +3,112 @@
     <div class="insideTop">
       教育基地管理
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab3Add')"
-          >新增学籍信息</el-button
-        >
+        <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.sortType"
-          placeholder="请选择"
-          style="width: 240px"
-        >
-          <el-option label="发布时间" :value="0"></el-option>
-          <el-option label="排序编号" :value="1"></el-option>
-        </el-select>
-        <!-- 右侧按钮 -->
-        <div class="search_btn">
-          <el-button type="primary" @click="searchBtn">查 询</el-button>
-          <el-button @click="resetBtn">重 置</el-button>
+      <div class="con_left">
+        <div class="cutJT">
+          <i class="el-icon-arrow-down"></i>
+          教育基地
         </div>
+        <ul>
+          <li
+            v-for="item in conLeftArr"
+            :key="item.id"
+            :class="{ active: formData.type === item.type }"
+            @click="cutLeft(item.type)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
       </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="250">
-            <template #default="{ row }">
-              <span class="table_name" :title="row.name">{{ row.name }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="学籍号" width="200">
-            <template #default="{ row }">
-              <span class="table_name" :title="row.num">{{ row.num }}</span>
-            </template>
-          </el-table-column>
-          <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="阅读" width="100"> </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.sort"
-                @blur="changeSort(row.sort, row.id)"
-              ></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="是否显示">
-            <template #default="{ row }">
-              <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"
-                v-if="!row.display"
-                @click="editLeader(row.id)"
-                >编辑</el-button
-              >
-              <el-button
-                type="text"
-                v-if="!row.display"
-                @click="delLeader(row.id)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
+      <!-- 右侧主要内容 -->
+      <div class="con_right">
+        <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.sortType"
+            placeholder="请选择"
+            style="width: 240px"
+          >
+            <el-option label="发布时间" :value="0"></el-option>
+            <el-option label="排序编号" :value="1"></el-option>
+          </el-select>
+          <!-- 右侧按钮 -->
+          <div class="search_btn">
+            <el-button type="primary" @click="searchBtn">查 询</el-button>
+            <el-button @click="resetBtn">重 置</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="250">
+              <template #default="{ row }">
+                <span class="table_name" :title="row.name">{{
+                  row.name
+                }}</span>
+              </template>
+            </el-table-column>
+            <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="阅读" width="100"> </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  label="排序" width="80">
+              <template #default="{ row }">
+                <el-input type="text" v-model="row.sort" @blur="changeSort(row.sort,row.id)"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否显示">
+              <template #default="{ row }">
+                <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" v-if="!row.display" @click="editGood(row.id)">编辑</el-button>
+                <el-button type="text" v-if="!row.display" @click="delGoods(row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </div>
     </div>
     <!-- 分页 -->
@@ -134,28 +126,29 @@
 </template>
 
 <script>
-import {
-  studentList,
-  studentSort,
-  studentDisplay,
-  studentRemove
-} from '@/apis/tab3'
 import axios from '@/utils/request'
+import { goodsList, goodsRemove, goodsDisplay, goodsSort } from '@/apis/tab1'
 export default {
   name: 'tab3',
   components: {},
   data () {
     // 这里存放数据
     return {
+      baseURL: '',
       total: 0,
       time: '',
+      conLeftArr: [
+        { name: '知识共享', type: 'model' },
+        { name: '知识阅览', type: 'img' }
+      ],
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
         pageSize: 10,
         searchKey: '',
-        sortType: 0
+        sortType: 0,
+        type: 'model'
       },
       tableData: []
     }
@@ -170,49 +163,6 @@ export default {
   },
   // 方法集合
   methods: {
-    // 点击编辑
-    editLeader (id) {
-      this.$router.push({
-        path: '/layout/tab3Add',
-        query: { id }
-      })
-    },
-    // 点击删除
-    delLeader (id) {
-      this.$confirm('删除后，信息无法恢复，是否继续？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          const res = await studentRemove(id)
-          if (res.code === 0) {
-            this.$message.success('删除成功')
-            this.studentList(this.formData)
-          } else this.$message.warning(res.msg)
-        })
-        .catch(() => {
-          this.$message.info('已取消')
-        })
-    }, // 点击开关
-    async changeSwit (val, id) {
-      const res = await studentDisplay(id, val)
-      if (res.code === 0) {
-        this.$message.success('操作成功')
-        this.studentList(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 studentSort(id, Number(val))
-      if (res.code === 0) {
-        this.$message.success('操作成功')
-        this.studentList(this.formData)
-      } else this.$message.warning(res.msg)
-    },
     // 点击重置
     resetBtn () {
       this.formData.searchKey = ''
@@ -220,32 +170,99 @@ export default {
       this.time = ''
       this.formData.pageNum = 1
       this.formData.startTime = this.formData.endTime = ''
-      this.studentList(this.formData)
+      this.goodsList(this.formData)
     },
     // 点击查询
     searchBtn () {
       this.formData.pageNum = 1
-      this.studentList(this.formData)
+      this.goodsList(this.formData)
+    },
+    // 排序
+    async changeSort (val, id) {
+      // console.log(998, val, id)
+      if (Number(val) < 1) return this.$message.warning('不能小于1')
+      const res = await goodsSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.goodsList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击开关
+    async changeSwit (val, id) {
+      const res = await goodsDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.goodsList(this.formData)
+      } else this.$message.warning(res.msg)
+      console.log(998, val, id)
     },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
       this.formData.pageNum = val
-      this.studentList(this.formData)
+      this.goodsList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
       this.formData.pageNum = 1
       this.formData.pageSize = val
-      this.studentList(this.formData)
+      this.goodsList(this.formData)
+    },
+    // 点击删除
+    delGoods (id) {
+      this.$confirm('删除后，信息无法恢复，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await goodsRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.goodsList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
     },
     // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab3Look',
-        query: { id }
+        path: '/layout/tab1Look',
+        query: { conLeftId: this.formData.type, id }
       })
     },
+    // 点击编辑文物
+    editGood (id) {
+      if (this.formData.type === 'img') {
+        this.$router.push({
+          path: '/layout/tab1Add2',
+          query: { id }
+        })
+      } else {
+        this.$router.push({
+          path: '/layout/tab1Add',
+          query: { conLeftId: this.formData.type, id }
+        })
+      }
+    },
+    // 点击新增文物
+    addGood () {
+      if (this.formData.type === 'img') this.$router.push('/layout/tab1Add2')
+      else {
+        this.$router.push({
+          path: '/layout/tab1Add',
+          query: { conLeftId: this.formData.type }
+        })
+      }
+    },
+    // 点击左侧的tab栏
+    cutLeft (type) {
+      if (type === this.formData.type) return
+      this.formData.type = type
+      this.goodsList(this.formData)
+    },
     // 时间处理----------------
     handleSelect (e) {
       const date = []
@@ -279,19 +296,24 @@ export default {
       }
       return i
     },
-    // 封装获取列表函数
-    async studentList (data) {
-      const res = await studentList(data)
-      // console.log(998, res)
+    // 封装获取列表的函数
+    async goodsList (data) {
+      const res = await goodsList(data)
       this.total = res.data.total
       this.tableData = res.data.records
+      // console.log(998, res)
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
-    this.studentList(this.formData)
+    // 判断是第一次进来还是修改或者新增或者查看后返回
+    // 拿到路由跳转传过来的数据
+    if (this.$route.query.conLeftId) {
+      this.formData.type = this.$route.query.conLeftId
+    }
+    this.goodsList(this.formData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
@@ -307,48 +329,77 @@ export default {
 <style lang='less' scoped>
 .tab3 {
   height: 100%;
-  .insideTop .add {
-    right: 55px;
-  }
   .conten {
-    padding: 15px 30px 0;
+    display: flex;
     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;
+    .con_left {
+      padding: 20px 0 0 15px;
+      width: 180px;
+      height: 100%;
+      border: 1px solid #ccc;
+      .cutJT {
+        margin-bottom: 10px;
       }
-      .search_btn {
-        display: flex;
-        justify-content: space-between;
-        width: 200px;
-        position: absolute;
-        right: 22px;
-        top: 0;
+      ul {
+        li {
+          cursor: pointer;
+          margin-left: 20px;
+          width: 100px;
+          text-align: center;
+          line-height: 30px;
+          height: 30px;
+          &:hover {
+            color: #b9412e;
+            background-color: #e6f7ff;
+          }
+        }
+        .active {
+          color: #b9412e;
+          background-color: #e6f7ff;
+        }
       }
     }
-    .table {
-      max-width: 1533px;
-    }
-    /deep/.el-table__body-wrapper {
-      max-height: 485px;
-      overflow-y: auto;
+    .con_right {
+      padding: 15px 30px 0;
+      flex: 1;
+      .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: 0px;
+          top: 0;
+        }
+      }
     }
   }
-  .paging {
-    position: absolute;
-    bottom: 15px;
-    right: 50px;
+  .table{
+    max-width: 1370px;
+  }
+  /deep/.el-table__body-wrapper{
+    max-height: 485px;
+    overflow-y: auto;
   }
+      .paging {
+      position: absolute;
+      bottom: 15px;
+      right: 50px;
+    }
+
 }
 </style>

houtai/src/views/tab3/tab3Add.vue

@@ -1,425 +0,0 @@
-<template>
-  <div class="tab3Add">
-    <div class="insideTop">
-      学籍管理 > {{ ruleForm.id ? "编辑" : "新增" }}学籍信息
-      <div class="add">
-        <el-button type="primary" @click="goBack">返 回</el-button>
-      </div>
-    </div>
-    <div class="obstruct"></div>
-    <!-- 主要内容 -->
-    <div class="conten">
-      <div class="con_top">基本信息</div>
-      <!-- 表单 -->
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="120px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="姓名：" prop="name">
-          <el-input
-            v-model="ruleForm.name"
-            maxlength="25"
-            show-word-limit
-            style="width: 500px"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="性别：" prop="sex">
-          <el-radio v-model="ruleForm.sex" label="M">男</el-radio>
-          <el-radio v-model="ruleForm.sex" label="F">女</el-radio>
-        </el-form-item>
-        <el-form-item label="政治面貌：" prop="politics">
-          <el-select
-            v-model="ruleForm.politics"
-            placeholder="请选择"
-            style="width: 500px"
-          >
-            <el-option label="中共党员" value="中共党员"></el-option>
-            <el-option label="中共预备党员" value="中共预备党员"></el-option>
-            <el-option label="共青团员" value="共青团员"></el-option>
-            <el-option label="民革党员" value="民革党员"></el-option>
-            <el-option label="民盟盟员" value="民盟盟员"></el-option>
-            <el-option label="民建会员" value="民建会员"></el-option>
-            <el-option label="民进会员" value="民进会员"></el-option>
-            <el-option label="农工党党员" value="农工党党员"></el-option>
-            <el-option label="致公党党员" value="致公党党员"></el-option>
-            <el-option label="九三学社社员" value="九三学社社员"></el-option>
-            <el-option label="台盟盟员" value="台盟盟员"></el-option>
-            <el-option label="无党派人士" value="无党派人士"></el-option>
-            <el-option label="群众" value="群众"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="学籍号：" prop="num">
-          <el-input
-            v-model="ruleForm.num"
-            maxlength="25"
-            show-word-limit
-            style="width: 500px"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="专业：" prop="job">
-          <el-input
-            v-model="ruleForm.job"
-            maxlength="25"
-            show-word-limit
-            style="width: 500px"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="学年：">
-          <i class="biaoshi biaoshi1"></i>
-          <el-date-picker
-            style="width: 500px"
-            v-model="time"
-            type="monthrange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <!-- 图片和附件 -->
-        <el-form-item label="学生照片">
-          <i class="biaoshi biaoshi2"></i>
-          <el-upload
-            class="avatar-uploader"
-            :action="baseURL + '/cms/student/upload'"
-            :headers="{
-              token,
-            }"
-            :show-file-list="true"
-            :before-upload="beforethumbUpload"
-            :on-success="upload_thumb_success"
-          >
-            <div v-if="ruleForm.thumb" class="imgdiv">
-              <img
-                style="max-width: 200px; max-height: 200px; display: block"
-                :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的图片格式；最大支持20MB。
-          </p>
-        </el-form-item>
-      </el-form>
-      <!-- 富文本 -->
-      <div class="con_top">
-        校园动态
-        <!-- 富文本上传图片 -->
-        <el-upload
-          :headers="{
-            token,
-          }"
-          accept=".png,.jpg,.jpeg,.gif"
-          title="上传图片"
-          class="upload-demo imgUplod"
-          :action="baseURL + '/cms/student/upload'"
-          multiple
-          :before-upload="beforethumbUploadImg"
-          :on-success="upload_thumb_successImg"
-        >
-          <i class="w-e-icon-image"></i>
-        </el-upload>
-      </div>
-      <div id="div1" style="z-index: 1"></div>
-      <!-- 底部按钮 -->
-      <div class="con_btn">
-        <el-button type="primary" @click="saveLeader">保 存</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { studentSave, studentDetail } from '@/apis/tab3'
-import axios from '@/utils/request'
-import E from 'wangeditor'
-export default {
-  name: 'tab3Add',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-      time: '',
-      // 服务器前缀地址
-      baseURL: '',
-      token: '',
-      ruleForm: {
-        name: '',
-        sex: 'M',
-        politics: '',
-        num: '',
-        job: '',
-        thumb: ''
-      },
-      rules: {
-        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        politics: [{ required: true, message: '不能为空', trigger: 'change' }],
-        num: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        job: [{ required: true, message: '不能为空', trigger: 'blur' }]
-      }
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    // 富文本上传图片
-    beforethumbUploadImg (file) {
-      // console.log(998, file)
-      // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 5
-      const typeOk =
-        file.type === 'image/png' ||
-        (file.type === 'image/jpeg' && !file.name.includes('.jfif')) ||
-        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 {
-          resolve(file)
-        }
-      })
-    },
-    upload_thumb_successImg (data) {
-      this.$message.success('上传成功')
-      this.editor.txt.append(
-        `<img src="${this.baseURL}${data.data.urlPath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
-      )
-    },
-    // 点击保存
-    async saveLeader () {
-      if (this.ruleForm.thumb === '') {
-        return this.$message.warning('图片不能为空')
-      }
-      if (!this.time) {
-        return this.$message.warning('学年不能为空')
-      }
-      if (this.editor.txt.html() === '') {
-        return this.$message.warning('校园动态不能为空')
-      }
-      try {
-        await this.$refs.ruleForm.validate()
-        const obj = {
-          ...this.ruleForm,
-          description: this.editor.txt.html(),
-          tenure: this.time[0] + ',' + this.time[1]
-        }
-        const res = await studentSave(obj)
-        if (res.code === 0) {
-          this.$message.success('操作成功')
-          this.$router.push('/layout/tab3')
-        } else this.$message.warning(res.msg)
-        // console.log(998, obj)
-      } catch (error) {
-        console.log(error)
-        this.$message.warning('有字段不符合要求')
-      }
-    },
-    // 上传图片
-    beforethumbUpload (file) {
-      // console.log(998, file)
-      // 限制图片大小和格式
-      const sizeOk = file.size / 1024 / 1024 < 20
-      const typeOk =
-        file.type === 'image/png' ||
-        (file.type === 'image/jpeg' && !file.name.includes('.jfif')) ||
-        file.type === 'image/gif'
-
-      return new Promise((resolve, reject) => {
-        if (!typeOk) {
-          this.$message.error('照片格式有误！')
-          reject(file)
-        } else if (!sizeOk) {
-          this.$message.error('照片大小超过20M！')
-          reject(file)
-        } else {
-          resolve(file)
-        }
-      })
-    },
-    upload_thumb_success (data) {
-      this.$message.success('上传成功')
-      // console.log('图片上传成功', data.data.urlPath)
-      this.ruleForm.thumb = data.data.urlPath
-    },
-    // 点击返回
-    goBack () {
-      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          this.$router.push('/layout/tab3')
-        })
-        .catch(() => {
-          this.$message.info('已取消')
-        })
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
-    // 获取用户token
-    this.token = localStorage.getItem('CQLJXU_token')
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  async mounted () {
-    // 初始化富文本
-    // 富文本
-    this.editor = new E('#div1')
-    // 配置字体
-    this.editor.config.fontNames = [
-      '黑体',
-      '仿宋',
-      '楷体',
-      '标楷体',
-      '华文仿宋',
-      '华文楷体',
-      '宋体',
-      '微软雅黑',
-      'Arial',
-      'Tahoma',
-      'Verdana',
-      'Times New Roman'
-    ]
-    this.editor.config.showLinkVideo = false
-    this.editor.create()
-    // 如果是编辑
-    if (this.$route.query.id) {
-      const res = await studentDetail(Number(this.$route.query.id))
-      this.ruleForm = res.data
-      console.log(998, res)
-      // 富文本回显
-      this.editor.txt.html(res.data.description)
-      // 日期回显
-      this.time = res.data.tenure.split(',')
-    }
-  },
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab3Add {
-  height: 100%;
-  .conten {
-    padding-bottom: 10px;
-    overflow-y: auto;
-    height: calc(100% - 32px);
-    .con_top {
-      position: relative;
-      margin-bottom: 12px;
-      height: 40px;
-      line-height: 40px;
-      padding-left: 20px;
-      background-color: #fbfbfb;
-      &::after {
-        content: "*";
-        position: absolute;
-        top: -1px;
-        left: 10px;
-        color: #f56c6c;
-      }
-      .imgUplod {
-        /deep/.w-e-icon-image {
-          color: #999;
-          display: inline-block;
-          width: 40px;
-          height: 40px;
-          line-height: 40px;
-        }
-        /deep/.el-upload-list {
-          display: none !important;
-        }
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        position: absolute;
-        z-index: 9999;
-        top: 53px;
-        right: 121px;
-        width: 40px;
-        height: 40px;
-        &:hover {
-          background-color: #f6f6f6;
-          /deep/.w-e-icon-image {
-            color: black;
-          }
-        }
-      }
-    }
-    .biaoshi1::before {
-      left: -64px;
-      top: -10px;
-    }
-    .biaoshi2::before {
-      left: -78px;
-    }
-    /deep/.el-icon-plus {
-      border: 1px dashed #ccc;
-    }
-    .avatar-uploader .el-upload {
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-uploader .el-upload:hover {
-      border-color: #3e5eb3;
-    }
-    .avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 178px;
-      height: 178px;
-      line-height: 178px;
-      text-align: center;
-    }
-    #div1 {
-      width: 85%;
-      margin: 0 auto;
-    }
-    .con_btn {
-      width: 80px;
-      margin: 15px auto 0;
-    }
-    .imgdiv {
-      max-width: 200px;
-      max-height: 200px;
-      & > img {
-        border: 5px solid #ccc;
-      }
-    }
-    .el-icon-circle-close {
-      font-size: 24px;
-    }
-  }
-}
-</style>

houtai/src/views/tab3/tab3Look.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="tab3Look">
-    <div class="insideTop">
-      学籍管理 > 查看学籍信息
-      <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab3')"
-          >返 回</el-button
-        >
-      </div>
-    </div>
-    <div class="obstruct"></div>
-    <!-- 主要内容 -->
-    <div class="conten">
-      <div class="con_top">基本信息</div>
-      <div class="row">
-        <div>姓名：</div>
-        <span>{{myObj.name}}</span>
-      </div>
-      <div class="row">
-        <div>性别：</div>
-        <span>{{myObj.sex==='M'?'男':'女'}}</span>
-      </div>
-      <div class="row">
-        <div>政治面貌：</div>
-        <span>{{myObj.politics}}</span>
-      </div>
-      <div class="row">
-        <div>学籍号：</div>
-        <span>{{myObj.num}}</span>
-      </div>
-      <div class="row">
-        <div>专业：</div>
-        <span>{{myObj.job}}</span>
-      </div>
-      <div class="row">
-        <div>学年：</div>
-        <span>{{time}}</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>
-        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
-      </div>
-      <div class="con_top">校园动态</div>
-      <div id="div1" v-html="myObj.description"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { studentDetail } from '@/apis/tab3'
-import axios from '@/utils/request'
-export default {
-  name: 'tab3Look',
-  components: {},
-  data () {
-    // 这里存放数据
-    return {
-      baseURL: '',
-      myObj: {},
-      time: '',
-      srcList: []
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  async created () {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
-    // 通过父亲传过来的id获取详情
-    if (this.$route.query.id) {
-      const res = await studentDetail(Number(this.$route.query.id))
-      this.myObj = res.data
-      this.srcList = [this.baseURL + res.data.thumb]
-      // 处理日期
-      this.time = moment((res.data.tenure.split(','))[0]).format('YYYY年MM月') + '-' + moment((res.data.tenure.split(','))[1]).format('YYYY年MM月')
-    }
-  }, // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab3Look {
-  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>