up

houtai/src/apis/tab3.js

@@ -1,9 +1,42 @@
 import axios from '../utils/request'
 // 获取列表
-export const studentList = (data) => {
+export const newsList = (data) => {
   return axios({
     method: 'post',
     url: '/cms/news/list',
     data
   })
 }
+// 删除
+export const newsRemove = (id) => {
+  return axios({
+    url: `/cms/news/remove/${id}`
+  })
+}
+// 是否显示
+export const newsDisplay = (id, display) => {
+  return axios({
+    url: `/cms/news/display/${id}/${display}`
+  })
+}
+// 排序
+export const newsSort = (id, sort) => {
+  return axios({
+    url: `/cms/news/sort/${id}/${sort}`
+  })
+}
+
+// 新增、编辑
+export const newsSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/news/save',
+    data
+  })
+}
+// 通过id获取详情
+export const newsDetail = (id) => {
+  return axios({
+    url: `/cms/news/detail/${id}`
+  })
+}

houtai/src/router/index.js

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

houtai/src/views/login.vue

@@ -58,7 +58,7 @@ export default {
       if (res.code === 0) {
         localStorage.setItem('CQLJXU_token', res.data.token)
         localStorage.setItem('CQLJXU_userName', res.data.user.userName)
-        this.$router.push('/layout/tab1')
+        this.$router.push('/layout/tab4')
         this.$message.success('登录成功')
       } else this.$message.warning(res.msg)
     }

houtai/src/views/tab1/index.vue

@@ -103,7 +103,10 @@
             </el-table-column>
             <el-table-column prop="visit" label="阅读" width="100">
             </el-table-column>
-            <el-table-column prop="creatorName" label="发布人">
+            <el-table-column label="发布人">
+              <template>
+                <span>超级管理员</span>
+              </template>
             </el-table-column>
             <el-table-column prop="createTime" label="发布时间" width="200">
             </el-table-column>
@@ -180,9 +183,9 @@
       </div>
       <div class="row">
         <span>展示类型：</span>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="model">实物模型</el-radio>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="img">专题图库</el-radio>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="video">视频档案</el-radio>
+        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="model">模型</el-radio>
+        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="img">图片</el-radio>
+        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="video">视频</el-radio>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="btnX">取 消</el-button>

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>
@@ -59,7 +59,7 @@
           >
             <div v-if="ruleForm.thumb" class="imgdiv">
               <img
-                style="max-width: 200px; max-height: 200px;display: block;"
+                style="max-width: 200px; max-height: 200px; display: block"
                 :src="baseURL + ruleForm.thumb"
               />
               <i
@@ -107,9 +107,7 @@
           </div>
           <div class="el-upload__tip" v-else>
             <p class="upHint">格式要求：</p>
-            <p class="upHint">
-              1、仅支持mp4视频格式文件。
-            </p>
+            <p class="upHint">1、仅支持mp4视频格式文件。</p>
             <p class="upHint">2、最大支持2G的视频文件。</p>
           </div>
         </el-form-item>
@@ -152,9 +150,15 @@ export default {
   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.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, type: this.conLeftId }
       const res = await goodsSave(obj)
       if (res.code === 0) {
@@ -314,11 +318,19 @@ export default {
     }
     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;
+      }
     }
     .biaoshi1::before {
       left: -120px;
@@ -352,7 +364,7 @@ export default {
     .imgdiv {
       max-width: 200px;
       max-height: 200px;
-      &>img{
+      & > img {
         border: 5px solid #ccc;
       }
     }

houtai/src/views/tab1/tab1Add2.vue

@@ -285,11 +285,19 @@ export default {
     }
     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;
+      }
     }
     .biaoshi1::before {
       left: -63px;

houtai/src/views/tab2/index.vue

@@ -74,8 +74,13 @@
               />
             </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="visit" label="阅读" width="100">
+          </el-table-column>
+          <el-table-column label="发布人">
+            <template>
+              <span>超级管理员</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
           <el-table-column prop="address" label="排序" width="80">

houtai/src/views/tab2/tab2Add.vue

@@ -299,7 +299,6 @@ export default {
     if (this.$route.query.id) {
       const res = await leaderDetail(Number(this.$route.query.id))
       this.ruleForm = res.data
-      console.log(998, res)
       // 富文本回显
       this.editor.txt.html(res.data.description)
       // 日期回显

houtai/src/views/tab3/index.vue

@@ -26,7 +26,7 @@
             @click="cutLeft(item.id,item.type)"
           >
             <span :title="item.name">{{ item.name }}</span>
-            <div class="inco" v-if="item.id !== 1 && item.id !== 2 && item.id !== 3">
+            <div class="inco" v-if="item.id !== 4 && item.id !== 5">
               <i
                 @click="moduleEdit(item.id)"
                 title="编辑"
@@ -91,19 +91,17 @@
                 <span class="table_name" :title="row.name">{{ row.name }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="封面图片" width="120">
+            <el-table-column label="内容简介" width="250">
               <template #default="{ row }">
-                <img
-                  class="table_img"
-                  :src="baseURL + row.thumb"
-                  alt=""
-                  :onerror="defaultImg"
-                />
+                <span class="table_name" :title="row.description">{{ row.description }}</span>
               </template>
             </el-table-column>
             <el-table-column prop="visit" label="阅读" width="100">
             </el-table-column>
-            <el-table-column prop="creatorName" label="发布人">
+            <el-table-column label="发布人">
+              <template>
+                <span>超级管理员</span>
+              </template>
             </el-table-column>
             <el-table-column prop="createTime" label="发布时间" width="200">
             </el-table-column>
@@ -180,9 +178,8 @@
       </div>
       <div class="row">
         <span>展示类型：</span>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="model">实物模型</el-radio>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="img">专题图库</el-radio>
-        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="video">视频档案</el-radio>
+        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="share">链接</el-radio>
+        <el-radio :disabled='!!dialogData.id' v-model="dialogData.type" label="info">图文</el-radio>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="btnX">取 消</el-button>
@@ -195,15 +192,12 @@
 <script>
 import axios from '@/utils/request'
 import {
-  goodsList,
-  goodsRemove,
-  goodsDisplay,
-  goodsSort,
   moduleList,
   moduleSave,
   moduleRemove,
   moduleDetail
 } from '@/apis/tab1'
+import { newsList, newsRemove, newsDisplay, newsSort } from '@/apis/tab3'
 export default {
   name: 'tab3',
   components: {},
@@ -214,16 +208,15 @@ export default {
       dialogData: {
         module: 'news',
         name: '',
-        type: 'model'
+        type: 'share'
       },
       // 关于新增模块的数据↑
       baseURL: '',
       total: 0,
       time: '',
       conLeftArr: [
-        { id: 1, name: '...' },
-        { id: 2, name: '...' },
-        { id: 3, name: '...' }
+        { id: 4, name: '...' },
+        { id: 5, name: '...' }
       ],
       formData: {
         startTime: '',
@@ -232,10 +225,10 @@ export default {
         pageSize: 10,
         searchKey: '',
         sortType: 0,
-        moduleId: 1
+        moduleId: 4
       },
       // 当前选中的模块类型
-      activeType: 'model',
+      activeType: 'share',
       tableData: []
     }
   },
@@ -264,7 +257,7 @@ export default {
           const res = await moduleRemove(id)
           if (res.code === 0) {
             this.$message.success('删除成功')
-            const res2 = await moduleList('goods')
+            const res2 = await moduleList('news')
             this.conLeftArr = res2.data
           } else this.$message.warning(res.msg)
         })
@@ -275,9 +268,9 @@ export default {
     btnX () {
       this.dialogShow = false
       this.dialogData = {
-        module: 'goods',
+        module: 'news',
         name: '',
-        type: 'model'
+        type: 'share'
       }
     },
     async btnOk () {
@@ -288,7 +281,7 @@ export default {
       if (res.code === 0) {
         this.$message.success('操作成功')
         this.btnX()
-        const res2 = await moduleList('goods')
+        const res2 = await moduleList('news')
         this.conLeftArr = res2.data
       } else this.$message.warning(res.msg)
     },
@@ -300,42 +293,42 @@ export default {
       this.time = ''
       this.formData.pageNum = 1
       this.formData.startTime = this.formData.endTime = ''
-      this.goodsList(this.formData)
+      this.newsList(this.formData)
     },
     // 点击查询
     searchBtn () {
       this.formData.pageNum = 1
-      this.goodsList(this.formData)
+      this.newsList(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))
+      const res = await newsSort(id, Number(val))
       if (res.code === 0) {
         this.$message.success('操作成功')
-        this.goodsList(this.formData)
+        this.newsList(this.formData)
       } else this.$message.warning(res.msg)
     },
     // 点击开关
     async changeSwit (val, id) {
-      const res = await goodsDisplay(id, val)
+      const res = await newsDisplay(id, val)
       if (res.code === 0) {
         this.$message.success('操作成功')
-        this.goodsList(this.formData)
+        this.newsList(this.formData)
       } else this.$message.warning(res.msg)
     },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
       this.formData.pageNum = val
-      this.goodsList(this.formData)
+      this.newsList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
       this.formData.pageNum = 1
       this.formData.pageSize = val
-      this.goodsList(this.formData)
+      this.newsList(this.formData)
     },
     // 点击删除
     delGoods (id) {
@@ -345,10 +338,10 @@ export default {
         type: 'warning'
       })
         .then(async () => {
-          const res = await goodsRemove(id)
+          const res = await newsRemove(id)
           if (res.code === 0) {
             this.$message.success('删除成功')
-            this.goodsList(this.formData)
+            this.newsList(this.formData)
           } else this.$message.warning(res.msg)
         })
         .catch(() => {
@@ -358,14 +351,14 @@ export default {
     // 点击查看
     lookGood (id) {
       this.$router.push({
-        path: '/layout/tab1Look',
+        path: '/layout/tab3Look',
         query: { Sid: id, id: this.formData.moduleId }
       })
     },
     // 点击编辑文物
     editGood (id) {
-      let temp = '/layout/tab1Add'
-      if (this.activeType === 'img') temp = '/layout/tab1Add2'
+      let temp = '/layout/tab3Add'
+      if (this.activeType === 'info') temp = '/layout/tab3Add2'
       this.$router.push({
         path: temp,
         query: { Sid: id, id: this.formData.moduleId }
@@ -373,8 +366,8 @@ export default {
     },
     // 点击新增文物
     addGood () {
-      let temp = '/layout/tab1Add'
-      if (this.activeType === 'img') temp = '/layout/tab1Add2'
+      let temp = '/layout/tab3Add'
+      if (this.activeType === 'info') temp = '/layout/tab3Add2'
       this.$router.push({
         path: temp,
         query: { id: this.formData.moduleId, k: this.activeType }
@@ -384,7 +377,7 @@ export default {
     cutLeft (id, type) {
       if (id === this.formData.moduleId) return
       this.formData.moduleId = id
-      this.goodsList(this.formData)
+      this.newsList(this.formData)
       // 把当前选中的模块类型保存
       this.activeType = type
     },
@@ -422,8 +415,8 @@ export default {
       return i
     },
     // 封装获取列表的函数
-    async goodsList (data) {
-      const res = await goodsList(data)
+    async newsList (data) {
+      const res = await newsList(data)
       this.total = res.data.total
       this.tableData = res.data.records
       // console.log(998, res)
@@ -432,7 +425,7 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   async created () {
     // 获取模块列表
-    const res = await moduleList('goods')
+    const res = await moduleList('news')
     this.conLeftArr = res.data
 
     // 获取服务器前缀地址
@@ -446,7 +439,7 @@ export default {
         if (v.id === temp) this.activeType = v.type
       })
     }
-    this.goodsList(this.formData)
+    this.newsList(this.formData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/views/tab3/tab3Add.vue

@@ -0,0 +1,187 @@
+<!--  -->
+<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="类型：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-radio v-model="conLeftId" label="share" disabled
+            >知识共享</el-radio
+          >
+          <el-radio v-model="conLeftId" label="info" disabled
+            >知识阅览</el-radio
+          >
+        </el-form-item>
+        <el-form-item label="标题：" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            maxlength="25"
+            show-word-limit
+            style="width: 800px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="内容简介：" prop="description">
+          <el-input
+            v-model="ruleForm.description"
+            maxlength="50"
+            show-word-limit
+            style="width: 800px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="链接：" prop="shareUrl">
+          <el-input
+            v-model="ruleForm.shareUrl"
+            maxlength="499"
+            style="width: 800px"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary" @click="saveGood">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { newsSave, newsDetail } from '@/apis/tab3'
+export default {
+  name: 'tab3Add',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      conLeftId: '',
+      ruleForm: {
+        moduleId: '', // 模块id
+        name: '', // 标题
+        type: 'share', // 类型
+        display: 0,
+        description: '',
+        shareUrl: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        description: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        shareUrl: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击保存
+    async saveGood () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await newsSave(this.ruleForm)
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          this.$router.push({
+            path: '/layout/tab3',
+            query: { k: this.ruleForm.moduleId }
+          })
+        } else this.$message.warning(res.msg)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push({
+            path: '/layout/tab3',
+            query: { k: this.ruleForm.moduleId }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    // 拿到路由跳转传过来的数据
+    this.conLeftId = this.$route.query.k
+    // 获取模块id
+    this.ruleForm.moduleId = Number(this.$route.query.id)
+    // 如果是编辑
+    let id = this.$route.query.Sid
+    if (id) {
+      id = Number(id)
+      const res = await newsDetail(id)
+      this.conLeftId = res.data.type
+      this.ruleForm = res.data
+    }
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab3Add {
+  height: 100%;
+  .conten {
+    overflow-y: auto;
+    position: relative;
+    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;
+      }
+    }
+    .biaoshi1::before {
+      left: -63px;
+      top: -12px;
+    }
+  }
+  .con_btn {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 15px;
+  }
+}
+</style>

houtai/src/views/tab3/tab3Add2.vue

@@ -0,0 +1,301 @@
+<!--  -->
+<template>
+  <div class="tab3Add2">
+    <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="类型：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-radio v-model="conLeftId" label="share" disabled
+            >知识共享</el-radio
+          >
+          <el-radio v-model="conLeftId" label="info" disabled
+            >知识阅览</el-radio
+          >
+        </el-form-item>
+        <el-form-item label="标题：" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            maxlength="25"
+            show-word-limit
+            style="width: 800px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="内容简介：" prop="description">
+          <el-input
+            v-model="ruleForm.description"
+            maxlength="50"
+            show-word-limit
+            style="width: 800px"
+          ></el-input>
+        </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/news/upload/img`"
+          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="saveGood">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/request'
+import { newsSave, newsDetail } from '@/apis/tab3'
+import E from 'wangeditor'
+export default {
+  name: 'tab3Add2',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      conLeftId: '',
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+
+      ruleForm: {
+        moduleId: '', // 模块id
+        name: '', // 标题
+        type: 'info', // 类型
+        display: 0,
+        description: '',
+        content: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        description: [{ 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.filePath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      )
+    },
+    // 点击保存
+    async saveGood () {
+      if (this.editor.txt.html() === '') {
+        return this.$message.warning('领导简介不能为空')
+      }
+
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await newsSave({ ...this.ruleForm, content: this.editor.txt.html() })
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          this.$router.push({
+            path: '/layout/tab3',
+            query: { k: this.ruleForm.moduleId }
+          })
+        } else this.$message.warning(res.msg)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push({
+            path: '/layout/tab3',
+            query: { k: this.ruleForm.moduleId }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 拿到路由跳转传过来的数据
+    this.conLeftId = this.$route.query.k
+    // 获取模块id
+    this.ruleForm.moduleId = Number(this.$route.query.id)
+  },
+  // 生命周期 - 挂载完成（可以访问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()
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
+
+    // 如果是编辑
+    let id = this.$route.query.Sid
+    if (id) {
+      id = Number(id)
+      const res = await newsDetail(id)
+      this.conLeftId = res.data.type
+      this.ruleForm = res.data
+      // 富文本回显
+      this.editor.txt.html(res.data.content)
+    }
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab3Add2 {
+  height: 100%;
+  .conten {
+    overflow-y: auto;
+    position: relative;
+    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: -63px;
+      top: -12px;
+    }
+  }
+      #div1 {
+      width: 85%;
+      margin: 0 auto;
+    }
+
+  .con_btn {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 15px;
+  }
+}
+</style>

houtai/src/views/tab3/tab3Look.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="tab3Look">
+    <div class="insideTop">
+      教育基地 > 查看
+      <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>
+      <div class="row">
+        <div>标题：</div>
+        <span>{{myObj.name}}</span>
+      </div>
+      <div class="row">
+        <div>类型：</div>
+        <span>{{myObj.type==='info'?'知识阅览':'知识共享'}}</span>
+      </div>
+      <div class="row">
+        <div>内容简介：</div>
+        <span>{{myObj.description}}</span>
+      </div>
+      <div class="row" v-if="!myObj.content">
+        <div>衔接：</div>
+        <a :href="myObj.shareUrl" target='_blank'>{{myObj.shareUrl}}</a>
+      </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" v-if="myObj.content">信息正文</div>
+      <div id="div1" v-html="myObj.content"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { newsDetail } from '@/apis/tab3'
+export default {
+  name: 'tab3Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      myObj: {}
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击返回
+    goBack () {
+      this.$router.push({
+        path: '/layout/tab3',
+        query: { k: this.$route.query.id }
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.Sid) {
+      const res = await newsDetail(Number(this.$route.query.Sid))
+      this.myObj = res.data
+    }
+  },
+  // 生命周期 - 挂载完成（可以访问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;
+      }
+      a{
+        display: block;
+        max-width: 800px;
+      }
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>