初步完成tab2接口对接

houtai/src/apis/tab1.js

@@ -1,24 +1,53 @@
 import axios from '../utils/request'
-// 获取整体概况
-export const parkList = (data) => {
+// 获取列表
+export const goodsList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/park/list',
+    url: '/cms/goods/list',
     data
   })
 }
-// // 获取整体概况
-// export const getDetailById = (id) => {
-//   return axios({
-//     method: 'post',
-//     url: `/cms/park/detail/${id}`
-//   })
-// }
-// 点击修改
-export const parkSave = (data) => {
+// 点击删除
+export const goodsRemove = (id) => {
+  return axios({
+    url: `/cms/goods/remove/${id}`
+  })
+}
+// 新增、编辑
+export const goodsSave = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/park/save',
+    url: '/cms/goods/save',
     data
   })
 }
+// 是否显示
+export const goodsDisplay = (id, display) => {
+  return axios({
+    url: `/cms/goods/display/${id}/${display}`
+  })
+}
+// 排序
+export const goodsSort = (id, sort) => {
+  return axios({
+    url: `/cms/goods/sort/${id}/${sort}`
+  })
+}
+// 设为封面
+export const goodsImgIndex = (id, fileId) => {
+  return axios({
+    url: `/cms/goods/imgIndex/${id}/${fileId}`
+  })
+}
+// 通过id获取详情
+export const goodsDetail = (id) => {
+  return axios({
+    url: `/cms/goods/detail/${id}`
+  })
+}
+// 删除图片
+export const goodsimgRemove = (id) => {
+  return axios({
+    url: `/cms/goods/imgRemove/${id}`
+  })
+}

houtai/src/apis/tab2.js

@@ -1,17 +1,41 @@
 import axios from '../utils/request'
-// 鹏城云脑-能耗管理
-export const energyList = (data) => {
+// 获取列表
+export const leaderList = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/energy/list',
+    url: '/cms/leader/list',
     data
   })
 }
-// 修改
-export const energySave = (data) => {
+// 新增、编辑
+export const leaderSave = (data) => {
   return axios({
     method: 'post',
-    url: '/cms/energy/save',
+    url: '/cms/leader/save',
     data
   })
 }
+// 排序
+export const leaderSort = (id, sort) => {
+  return axios({
+    url: `/cms/leader/sort/${id}/${sort}`
+  })
+}
+// 是否显示
+export const leaderDisplay = (id, display) => {
+  return axios({
+    url: `/cms/leader/display/${id}/${display}`
+  })
+}
+// 通过id获取详情
+export const leaderDetail = (id) => {
+  return axios({
+    url: `/cms/leader/detail/${id}`
+  })
+}
+// 点击删除
+export const leaderRemove = (id) => {
+  return axios({
+    url: `/cms/leader/remove/${id}`
+  })
+}

houtai/src/assets/css/base.css

@@ -59,6 +59,9 @@ a {
 .cell{
   text-align: center !important;
 }
+.table .el-input__inner{
+  text-align: center;
+}
 .el-input__inner{
   line-height: normal;
 }
@@ -186,3 +189,24 @@ input[type="number"] {
 .w-e-toolbar .w-e-menu:nth-of-type(21) {
 	display: none !important;
 }
+.avatar-uploader .el-upload-list__item-name{
+  display: none;
+}
+.avatar-uploader .el-upload-list__item.is-success .el-upload-list__item-status-label{
+  display: none;
+}
+.el-upload-list__item .el-progress{
+  width: 500px;
+  position: static;
+  margin-bottom: 15px;
+}
+.el-upload-list__item{
+  width: 500px;
+}
+.el-month-table td.end-date .cell, .el-month-table td.start-date .cell{
+  background-color: #b9412e;
+}
+
+.el-month-table td.today .cell{
+  color: #b9412e;
+}

houtai/src/components/Tab5DialogThree.vue

@@ -152,7 +152,7 @@ export default {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
     // 获取用户token
-    this.token = localStorage.getItem('SZSBL_token')
+    this.token = localStorage.getItem('CQLJXU_token')
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/components/tab3Dialog.vue

@@ -224,7 +224,7 @@ export default {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
     // 获取用户token
-    this.token = localStorage.getItem('SZSBL_token')
+    this.token = localStorage.getItem('CQLJXU_token')
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/components/tab5Dialog.vue

@@ -261,7 +261,7 @@ export default {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
     // 获取用户token
-    this.token = localStorage.getItem('SZSBL_token')
+    this.token = localStorage.getItem('CQLJXU_token')
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/components/tab6Dialog.vue

@@ -214,7 +214,7 @@ export default {
     // 获取服务器前缀地址
     this.baseURL = axios.defaults.baseURL
     // 获取用户token
-    this.token = localStorage.getItem('SZSBL_token')
+    this.token = localStorage.getItem('CQLJXU_token')
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/main.js

@@ -7,6 +7,14 @@ import './assets/css/base.css'
 import Moment from 'moment'
 Vue.prototype.moment = Moment
 Vue.config.productionTip = false
+const imgErr = {
+  data () {
+    return {
+      defaultImg: 'this.src="' + require('./assets/img/IMGerror.png') + '"'
+    }
+  }
+}
+Vue.mixin(imgErr)
 Vue.use(ElementUI)
 new Vue({
   router,

houtai/src/router/index.js

@@ -167,7 +167,7 @@ router.beforeEach((to, from, next) => {
   if (to.name === 'login') next()
   // 否则要有token值才能下一步，不然就返回登录页
   else {
-    const token = localStorage.getItem('SZSBL_token')
+    const token = localStorage.getItem('CQLJXU_token')
     if (token) next()
     else {
       Message.warning('登录失效，请重新登录')

houtai/src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8011/', // 本地调试
-  baseURL: 'http://8.135.106.227:8012/', // 线上调试
+  baseURL: 'http://192.168.0.135:8012/', // 本地调试
+  // baseURL: '', // 线上调试
   // baseURL: '', // build
   timeout: 5000
 })
@@ -9,7 +9,7 @@ const service = axios.create({
 service.interceptors.request.use(function (config) {
   // console.log('触发拦截器')
   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
-  const token = localStorage.getItem('SZSBL_token')
+  const token = localStorage.getItem('CQLJXU_token')
   if (token) { // 判断是否有token,有，则
     // config.headers['Authorization'] = token
     config.headers.token = token
@@ -27,7 +27,7 @@ service.interceptors.response.use(function (response) {
   // 对响应数据做点什么--response就是发送每个请求的返回值
   if (response.data.code === 5001 || response.data.code === 5002) {
     // Toast.fail('未登录，请先登录')
-    localStorage.removeItem('SZSBL_token')
+    localStorage.removeItem('CQLJXU_token')
   }
   return response.data
 }, function (error) {

houtai/src/views/layout/index.vue

@@ -187,8 +187,8 @@ export default {
         type: 'warning'
       })
         .then(() => {
-          localStorage.clear('SZSBL_token')
-          localStorage.clear('SZSBL_userName')
+          localStorage.clear('CQLJXU_token')
+          localStorage.clear('CQLJXU_userName')
           this.$router.push('/')
           this.$message.success('退出成功!')
         })
@@ -200,7 +200,7 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
     // 获取用户名
-    const res = localStorage.getItem('SZSBL_userName')
+    const res = localStorage.getItem('CQLJXU_userName')
     this.userName = res
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）

houtai/src/views/login.vue

@@ -49,8 +49,8 @@ export default {
       if (this.from.passWord.trim() === '') return this.$message.warning('密码不能为空!')
       const res = await userLogin(this.from)
       if (res.code === 0) {
-        localStorage.setItem('SZSBL_token', res.data.token)
-        localStorage.setItem('SZSBL_userName', res.data.user.userName)
+        localStorage.setItem('CQLJXU_token', res.data.token)
+        localStorage.setItem('CQLJXU_userName', res.data.user.userName)
         this.$router.push('/layout/tab1')
         this.$message.success('登录成功')
       } else this.$message.warning(res.msg)

houtai/src/views/tab1/index.vue

@@ -17,7 +17,7 @@
           <li
             v-for="item in conLeftArr"
             :key="item.id"
-            :class="{ active: conLeft === item.type }"
+            :class="{ active: formData.type === item.type }"
             @click="cutLeft(item.type)"
           >
             {{ item.name }}
@@ -46,17 +46,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>
         <!-- 表格 -->
@@ -71,28 +71,28 @@
             </el-table-column>
             <el-table-column label="标题" width="200">
               <template #default="{ row }">
-                <span class="table_name" :title="row.name1">{{
-                  row.name1
+                <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">
+            <el-table-column  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>
@@ -103,8 +103,8 @@
                   @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>
+                <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>
@@ -126,42 +126,32 @@
 </template>
 
 <script>
+import axios from '@/utils/request'
+import { goodsList, goodsRemove, goodsDisplay, goodsSort } from '@/apis/tab1'
 export default {
   name: 'tab1',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
-      conLeft: '1',
+      baseURL: '',
+      total: 0,
       time: '',
       conLeftArr: [
-        { name: '实物模型', type: '1' },
-        { name: '专题图库', type: '2' },
-        { name: '视频档案', type: '3' }
+        { name: '实物模型', type: 'model' },
+        { name: '专题图库', type: 'img' },
+        { name: '视频档案', type: 'video' }
       ],
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        sortType: 0,
+        type: 'model'
       },
-      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概念
@@ -174,32 +164,102 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      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.goodsList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      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/tab1Look',
-        query: { conLeftId: this.conLeft }
+        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.conLeft === '2') this.$router.push('/layout/tab1Add2')
+      if (this.formData.type === 'img') this.$router.push('/layout/tab1Add2')
       else {
         this.$router.push({
           path: '/layout/tab1Add',
-          query: { conLeftId: this.conLeft }
+          query: { conLeftId: this.formData.type }
         })
       }
     },
     // 点击左侧的tab栏
     cutLeft (type) {
-      this.conLeft = type
+      if (type === this.formData.type) return
+      this.formData.type = type
+      this.goodsList(this.formData)
     },
     // 时间处理----------------
     handleSelect (e) {
@@ -233,16 +293,25 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表的函数
+    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
     // 判断是第一次进来还是修改或者新增或者查看后返回
     // 拿到路由跳转传过来的数据
     if (this.$route.query.conLeftId) {
-      this.conLeft = this.$route.query.conLeftId
-    } else {
+      this.formData.type = this.$route.query.conLeftId
     }
+    this.goodsList(this.formData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/views/tab1/tab1Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab1Add">
     <div class="insideTop">
-      文物典藏管理 > 新增文物典藏
+      文物典藏管理 > {{ruleForm.id?'编辑':'新增'}}文物典藏
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -28,26 +28,38 @@
         </el-form-item>
         <el-form-item label="精品类型：">
           <i class="biaoshi biaoshi2"></i>
-          <el-radio v-model="conLeftId" label="1" :disabled='conLeftId!=="1"'>实物模型</el-radio>
-          <el-radio v-model="conLeftId" label="2" disabled>专题图库</el-radio>
-          <el-radio v-model="conLeftId" label="3" :disabled='conLeftId!=="3"'>视频档案</el-radio>
+          <el-radio
+            v-model="conLeftId"
+            label="model"
+            :disabled="conLeftId !== 'model'"
+            >实物模型</el-radio
+          >
+          <el-radio v-model="conLeftId" label="img" disabled>专题图库</el-radio>
+          <el-radio
+            v-model="conLeftId"
+            label="video"
+            :disabled="conLeftId !== 'video'"
+            >视频档案</el-radio
+          >
         </el-form-item>
         <!-- 图片和附件 -->
-        <el-form-item :label="conLeftId==='1'?'模型封面图片：':'封面图片：'">
-          <i class="biaoshi" :class="{biaoshi1:conLeftId==='1'}"></i>
+        <el-form-item
+          :label="conLeftId === 'model' ? '模型封面图片：' : '封面图片：'"
+        >
+          <i class="biaoshi" :class="{ biaoshi1: conLeftId === 'model' }"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/goods/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
             <div v-if="ruleForm.thumb" class="imgdiv">
               <img
-                style="width: 100%; height: 100%"
+                style="max-width: 200px; max-height: 200px;display: block;"
                 :src="baseURL + ruleForm.thumb"
               />
               <i
@@ -61,16 +73,22 @@
           <p class="upHint">
             1、支持png、jpg、gif和jpeg的图片格式；最大支持20M。
           </p>
-          <p class="upHint">2、用于{{conLeftId==='1'?'实物模型':'视频档案'}}列表中进行展示。</p>
+          <p class="upHint">
+            2、用于{{
+              conLeftId === "model" ? "实物模型" : "视频档案"
+            }}列表中进行展示。
+          </p>
         </el-form-item>
         <!-- 上传附件 -->
-        <el-form-item :label="conLeftId==='1'?'模型文件：':'视频文件：'">
+        <el-form-item
+          :label="conLeftId === 'model' ? '模型文件：' : '视频文件：'"
+        >
           <i class="biaoshi"></i>
           <el-upload
             multiple
             class="upload-demo"
             :file-list="fileList"
-            :action="baseURL + '/cms/security/video/upload/video'"
+            :action="baseURL + '/cms/goods/video/upload'"
             :headers="{ token }"
             :before-upload="beforeFujian"
             :on-success="successFujian"
@@ -81,28 +99,32 @@
             :show-file-list="true"
           >
             <el-button size="small" type="primary">点击上传</el-button>
-            <div class="el-upload__tip" slot="tip" v-if="conLeftId==='1'">
-              <p class="upHint">格式要求：</p>
-              <p class="upHint">1、仅支持.4dge格式的模型文件。</p>
-              <p class="upHint">2、最大支持500M。</p>
-            </div>
-            <div class="el-upload__tip" slot="tip" v-else>
-              <p class="upHint">格式要求：</p>
-              <p class="upHint">1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。</p>
-              <p class="upHint">2、最大支持2G的视频文件。</p>
-            </div>
           </el-upload>
+          <div class="el-upload__tip" v-if="conLeftId === 'model'">
+            <p class="upHint">格式要求：</p>
+            <p class="upHint">1、仅支持.4dge格式的模型文件。</p>
+            <p class="upHint">2、最大支持500M。</p>
+          </div>
+          <div class="el-upload__tip" v-else>
+            <p class="upHint">格式要求：</p>
+            <p class="upHint">
+              1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。
+            </p>
+            <p class="upHint">2、最大支持2G的视频文件。</p>
+          </div>
         </el-form-item>
       </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 { goodsSave, goodsDetail } from '@/apis/tab1'
+import axios from '@/utils/request'
 export default {
   name: 'tab1Add',
   components: {},
@@ -114,11 +136,11 @@ export default {
       baseURL: '',
       token: '',
       ruleForm: {
-        id: '',
-        name: '',
-        thumb: '',
-        video: '',
-        fileName: ''
+        name: '', // 标题
+        type: '', // 类型, model:模型， img:图片， video：视频
+        thumb: '', // 封面图
+        fileName: '', // 文件名称
+        filePath: '' // 文件地址
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }]
@@ -127,6 +149,21 @@ 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, type: this.conLeftId }
+      const res = await goodsSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.$router.push({
+          path: '/layout/tab1',
+          query: { conLeftId: this.conLeftId }
+        })
+      } else this.$message.warning(res.msg)
+    },
     // 点击返回
     goBack () {
       this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
@@ -148,7 +185,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' ||
@@ -159,52 +196,71 @@ 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个字！')
           reject(file)
         } else {
-          this.$message.success('上传成功')
           resolve(file)
         }
       })
     },
     upload_thumb_success (data) {
-      // console.log('图片上传成功', data.data.urlPath)
-      this.ruleForm.thumb = data.data.urlPath
+      this.$message.success('上传成功')
+      // console.log('图片上传成功', data.data.filePath)
+      this.ruleForm.thumb = data.data.filePath
     },
     // 上传附件
     beforeFujian (file) {
       console.log('附件上传前', file)
-      const sizeOk = file.size / 1024 / 1024 < 1024
-      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'
-      return new Promise((resolve, reject) => {
-        if (file.name.length > 32) {
-          this.$message.error('视频名字不能超过32个字')
-          reject(file)
-        } else if (!sizeOk) {
-          this.$message.error('视频大小超过1GB！')
-          reject(file)
-        } else if (!typeOk) {
-          this.$message.error('视频格式有误！')
-          reject(file)
-        } else {
-          resolve(file)
-        }
-      })
+      if (this.conLeftId === 'model') {
+        const sizeOk = file.size / 1024 / 1024 < 500
+        const typeOk = file.type === '' && file.name.includes('.4dage')
+        return new Promise((resolve, reject) => {
+          if (file.name.length > 32) {
+            this.$message.error('文件名字不能超过32个字')
+            reject(file)
+          } else if (!sizeOk) {
+            this.$message.error('模型大小超过500M！')
+            reject(file)
+          } else if (!typeOk) {
+            this.$message.error('模型格式有误！')
+            reject(file)
+          } else {
+            resolve(file)
+          }
+        })
+      } else if (this.conLeftId === 'video') {
+        const sizeOk = file.size / 1024 / 1024 < 2048
+        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'
+        return new Promise((resolve, reject) => {
+          if (file.name.length > 32) {
+            this.$message.error('视频名字不能超过32个字')
+            reject(file)
+          } else if (!sizeOk) {
+            this.$message.error('视频大小超过2GB！')
+            reject(file)
+          } else if (!typeOk) {
+            this.$message.error('视频格式有误！')
+            reject(file)
+          } else {
+            resolve(file)
+          }
+        })
+      }
     },
     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) {
@@ -217,17 +273,29 @@ export default {
       }
     },
     handleRemove (file, fileList) {
-      this.ruleForm.video = ''
+      this.ruleForm.filePath = ''
       this.ruleForm.fileName = ''
     },
     handleExceed (files, fileList) {
-      this.$message.warning('只能上传一个视频，请删除原视频后操作')
+      this.$message.warning('只能上传一个文件，请删除原文件后操作')
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
     // 拿到路由跳转传过来的数据
     this.conLeftId = this.$route.query.conLeftId
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await goodsDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data.entity
+      // 附件回显
+      this.fileList = [{ name: res.data.entity.fileName }]
+      // console.log(998, res)
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
@@ -244,6 +312,7 @@ export default {
 .tab1Add {
   height: 100%;
   .conten {
+    overflow-y: auto;
     position: relative;
     /deep/.el-icon-plus {
       border: 1px dashed #ccc;
@@ -285,6 +354,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/tab1/tab1Add2.vue

@@ -28,41 +28,40 @@
         </el-form-item>
         <el-form-item label="精品类型：">
           <i class="biaoshi biaoshi2"></i>
-          <el-radio v-model="conLeftId" label="1" disabled>实物模型</el-radio>
-          <el-radio v-model="conLeftId" label="2">专题图库</el-radio>
-          <el-radio v-model="conLeftId" label="3" disabled>视频档案</el-radio>
+          <el-radio v-model="conLeftId" label="model" disabled>实物模型</el-radio>
+          <el-radio v-model="conLeftId" label="img">专题图库</el-radio>
+          <el-radio v-model="conLeftId" label="video：视频" disabled>视频档案</el-radio>
         </el-form-item>
         <!-- 图片 -->
-        <el-form-item label="图片：">
+        <el-form-item label="图片：" style="height:480px">
           <i class="biaoshi biaoshi1"></i>
           <div class="imgBox">
             <div
               class="imgdiv"
               v-for="(item, index) in imgList"
-              :key="index"
+              :key="item.id"
             >
               <el-image
                 style="width: 200px; height: 200px"
-                :src="imgList[0]"
-                :preview-src-list="imgList"
+                :src="baseURL+item.filePath"
+                :preview-src-list="imgListLook"
               >
               </el-image>
               <!-- 封面显示 -->
               <div class="cover" v-if="imgActive === index">封面图片</div>
               <!-- 下面的按钮 -->
               <div class="handle">
-                <el-button size="mini" type="primary" round>设为封面</el-button>
-                <el-button size="mini" type="info" round @click="againUP(index)">重新上传</el-button>
+                <el-button size="mini" type="primary" round @click="goodsImgIndex(index)" v-if="imgActive !== index">设为封面</el-button>
               </div>
               <!-- 删除 -->
-              <div class="delImg el-icon-delete"></div>
+              <div class="delImg el-icon-delete" @click="delGoodsImg(index,item.id)" v-if="imgActive !== index"></div>
             </div>
             <el-upload
               ref="upload"
               class="avatar-uploader"
               :action="baseURL + '/cms/goods/upload'"
               :headers="{ token }"
-              :show-file-list="false"
+              :show-file-list="true"
               :before-upload="beforethumbUpload"
               :on-success="upload_thumb_success"
             >
@@ -80,38 +79,35 @@
       </el-form>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary" @click="goodsSave">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { goodsSave, goodsDetail, goodsimgRemove } from '@/apis/tab1'
+import axios from '@/utils/request'
 export default {
   name: 'tab1Add2',
   components: {},
   data () {
     return {
+      // 重新上传的数据
       imgActive: 0,
       // 上传成功后的图片数组
-      imgList: [
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto',
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
-      ],
-      conLeftId: '2',
+      imgList: [],
+      imgListLook: [],
+      conLeftId: 'img',
       fileList: [],
       // 服务器前缀地址
       baseURL: '',
       token: '',
       ruleForm: {
-        id: '',
+        code: new Date().valueOf(),
         name: '',
-        thumb: '',
-        video: '',
-        fileName: ''
+        type: 'img',
+        thumb: ''
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }]
@@ -120,9 +116,49 @@ export default {
   },
   computed: {},
   methods: {
-    // 点击重新上传
-    againUP (index) {
-      this.$refs.upload.$children[0].$refs.input.click()
+    // 点击保存
+    async goodsSave () {
+      if (this.ruleForm.name.trim() === '') { return this.$message.warning('标题不能为空') }
+      if (this.imgList.length === 0) { return this.$message.warning('图片不能为空') }
+      if (this.imgList.length > 18) { return this.$message.warning('图片不能超过18张') }
+      const temp = []
+      this.imgList.forEach(v => {
+        temp.push(v.id)
+      })
+      const obj = { ...this.ruleForm, fileIds: temp.join(','), thumb: this.imgList[this.imgActive].filePath, indexId: this.imgList[this.imgActive].id }
+      const res = await goodsSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.$router.push({
+          path: '/layout/tab1',
+          query: { conLeftId: 'img' }
+        })
+      } else this.$message.warning(res.msg)
+      // console.log(998, res)
+    },
+    // 点击删除
+    delGoodsImg (index, id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await goodsimgRemove(id)
+          this.imgList.splice(index, 1)
+          this.imgListLook.splice(index, 1)
+          if (index < this.imgActive) this.imgActive--
+          this.$message.success('删除成功')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 点击设为封面
+    async goodsImgIndex (index) {
+      this.imgActive = index
+      // this.ruleForm.thumb = this.imgList[index].filePath
+      this.$message.success('操作成功')
     },
     // 点击返回
     goBack () {
@@ -134,7 +170,7 @@ export default {
         .then(async () => {
           this.$router.push({
             path: '/layout/tab1',
-            query: { conLeftId: '2' }
+            query: { conLeftId: 'img' }
           })
         })
         .catch(() => {
@@ -145,7 +181,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' ||
@@ -156,24 +192,42 @@ 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个字！')
           reject(file)
         } else {
-          this.$message.success('上传成功')
           resolve(file)
         }
       })
     },
-    upload_thumb_success (data) {
-      // console.log('图片上传成功', data.data.urlPath)
-      this.ruleForm.thumb = data.data.urlPath
+    async upload_thumb_success (data) {
+      this.$message.success('上传成功')
+      // console.log('图片上传成功', data)
+      this.imgList.push({ name: data.data.name, id: data.data.id, filePath: data.data.filePath })
+      this.imgListLook.push(this.baseURL + data.data.filePath)
     }
   },
   // 生命周期 - 创建完成（可以访问当前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 goodsDetail(Number(this.$route.query.id))
+      this.ruleForm = res.data.entity
+      this.imgList = res.data.file
+      this.imgList.forEach((v, i) => {
+        this.imgListLook.push(this.baseURL + v.filePath)
+        // 修改封面显示
+        if (v.isIndex === 1) this.imgActive = i
+      })
+      // console.log(998, res)
+    }
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -189,9 +243,6 @@ export default {
 .tab1Add2 {
   height: 100%;
   .conten {
-    /deep/.el-form-item__content{
-      line-height: 0;
-    }
     /deep/.el-form-item{
       max-height: 480px;
       overflow-y: auto;

houtai/src/views/tab1/tab1Look.vue

@@ -11,28 +11,28 @@
     </div>
     <div class="obstruct"></div>
     <!-- 主要内容2 -->
-    <div class="conten" v-if="conLeftId === '2'">
+    <div class="conten" v-if="conLeftId === 'img'">
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>123</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>精品类型：</div>
-        <span>123</span>
+        <span>专题图库</span>
       </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 class="row">
         <div>图片：</div>
         <div class="imgList">
         <el-image
-          v-for="i in 15"
-          :key="i"
+          v-for="(item,index) in srcList2"
+          :key="index"
           style="width: 200px; height: 200px"
-          :src="srcList2[0]"
+          :src="item"
           :preview-src-list="srcList2"
         >
         </el-image>
@@ -44,14 +44,14 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>123</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>精品类型：</div>
-        <span>123</span>
+        <span>{{myObj.type==='model'?'实物模型':'视频档案'}}</span>
       </div>
       <div class="row">
-        <div>{{ conLeftId === "1" ? "实物图片" : "封面图片" }}：</div>
+        <div>{{ conLeftId === "model" ? "实物图片" : "封面图片" }}：</div>
         <el-image
           style="width: 200px; height: 200px"
           :src="srcList[0]"
@@ -60,36 +60,33 @@
         </el-image>
       </div>
       <div class="row">
-        <div>{{ conLeftId === "1" ? "模型文件" : "视频文件" }}：</div>
-        <a href="">视频文件.mp4</a>
+        <div>{{ conLeftId === "model" ? "模型文件" : "视频文件" }}：</div>
+        <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 axios from '@/utils/request'
+import { goodsDetail } from '@/apis/tab1'
 export default {
   name: 'tab1Look',
   components: {},
   data () {
     // 这里存放数据
     return {
+      myArr: [],
+      // 服务器前缀地址
+      baseURL: '',
+      myObj: {},
       conLeftId: '',
-      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'
-      ]
+      srcList: [],
+      srcList2: []
     }
   },
   // 监听属性 类似于data概念
@@ -107,9 +104,22 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
     // 拿到路由跳转传过来的数据
     this.conLeftId = this.$route.query.conLeftId
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await goodsDetail(Number(this.$route.query.id))
+      this.myObj = res.data.entity
+      this.srcList = [this.baseURL + this.myObj.thumb]
+      console.log(998, this.myObj)
+      this.myArr = res.data.file
+      this.myArr.forEach(v => {
+        this.srcList2.push(this.baseURL + v.filePath)
+      })
+    }
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},

houtai/src/views/tab2/index.vue

@@ -29,17 +29,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>
       <!-- 表格 -->
@@ -54,31 +54,31 @@
           </el-table-column>
           <el-table-column label="姓名" width="200">
             <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="200">
             <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+              <span class="table_name" :title="row.job">{{ row.job }}</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="是否显示">
             <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>
@@ -87,8 +87,8 @@
               <el-button type="text" @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>
+              <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>
@@ -109,36 +109,25 @@
 </template>
 
 <script>
+import axios from '@/utils/request'
+import { leaderList, leaderSort, leaderDisplay, leaderRemove } from '@/apis/tab2'
 export default {
   name: 'tab2',
   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概念
@@ -151,18 +140,79 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    lookGood (id) {
+      this.$router.push({
+        path: '/layout/tab2Look',
+        query: { id }
+      })
+    },
+    // 点击删除
+    delLeader (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await leaderRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.leaderList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 点击编辑
+    editLeader (id) {
+      this.$router.push({
+        path: '/layout/tab2Add',
+        query: { id }
+      })
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.sortType = 0
+      this.time = ''
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.leaderList(this.formData)
+    },
+    // 点击开关
+    async changeSwit (val, id) {
+      const res = await leaderDisplay(id, val)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.leaderList(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 leaderSort(id, Number(val))
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.leaderList(this.formData)
+      } else this.$message.warning(res.msg)
+    }, // 分页器方法
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.leaderList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
-    lookGood (id) {
-      this.$router.push({
-        path: '/layout/tab2Look'
-        // query: { conLeftId: this.conLeft }
-      })
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.leaderList(this.formData)
     },
     // 时间处理----------------
     handleSelect (e) {
@@ -196,10 +246,20 @@ export default {
         i = '0' + i
       }
       return i
+    },
+    // 封装获取列表函数
+    async leaderList (data) {
+      const res = await leaderList(data)
+      this.total = res.data.total
+      this.tableData = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.leaderList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前

houtai/src/views/tab2/tab2Add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab2Add">
     <div class="insideTop">
-      学院领导管理 > 新增领导信息
+      学院领导管理 > {{ruleForm.id?'编辑':'新增'}}领导信息
       <div class="add">
         <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
@@ -27,12 +27,12 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="性别：" prop="sex">
-          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
-          <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
+          <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="face">
+        <el-form-item label="政治面貌：" prop="politics">
           <el-select
-            v-model="ruleForm.face"
+            v-model="ruleForm.politics"
             placeholder="请选择"
             style="width: 500px"
           >
@@ -51,9 +51,9 @@
             <el-option label="群众" value="群众"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="任期职位：" prop="position">
+        <el-form-item label="任期职位：" prop="job">
           <el-input
-            v-model="ruleForm.position"
+            v-model="ruleForm.job"
             maxlength="50"
             show-word-limit
             style="width: 500px"
@@ -64,7 +64,7 @@
           <el-date-picker
             style="width: 500px"
             v-model="time"
-            type="daterange"
+            type="monthrange"
             range-separator="-"
             start-placeholder="开始时间"
             end-placeholder="结束时间"
@@ -76,17 +76,17 @@
           <i class="biaoshi biaoshi2"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/leader/upload'"
             :headers="{
               token,
             }"
-            :show-file-list="false"
+            :show-file-list="true"
             :before-upload="beforethumbUpload"
             :on-success="upload_thumb_success"
           >
             <div v-if="ruleForm.thumb" class="imgdiv">
               <img
-                style="width: 100%; height: 100%"
+                style="max-width: 200px; max-height: 200px;display: block;"
                 :src="baseURL + ruleForm.thumb"
               />
               <i
@@ -106,13 +106,15 @@
       <div id="div1" style="z-index: 1"></div>
       <!-- 底部按钮 -->
       <div class="con_btn">
-        <el-button type="primary">保 存</el-button>
+        <el-button type="primary" @click="saveLeader">保 存</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { leaderSave, leaderDetail } from '@/apis/tab2'
+import axios from '@/utils/request'
 import E from 'wangeditor'
 export default {
   name: 'tab2Add',
@@ -126,18 +128,16 @@ export default {
       token: '',
       ruleForm: {
         name: '',
-        sex: '1',
-        face: '',
-        position: '',
-        startTime: '',
-        endTime: '',
+        sex: 'M',
+        politics: '',
+        job: '',
         thumb: ''
       },
       rules: {
         name: [{ required: true, message: '不能为空', trigger: 'blur' }],
         sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        face: [{ required: true, message: '不能为空', trigger: 'change' }],
-        position: [{ required: true, message: '不能为空', trigger: 'change' }]
+        politics: [{ required: true, message: '不能为空', trigger: 'change' }],
+        job: [{ required: true, message: '不能为空', trigger: 'change' }]
       }
     }
   },
@@ -145,17 +145,34 @@ export default {
   computed: {},
   // 监控data中的数据变化
   watch: {
-    time (val) {
-      this.handleSelect(val)
-    }
   },
   // 方法集合
   methods: {
+    // 点击保存
+    async saveLeader () {
+      // console.log(998, this.startTime, this.endTime)
+      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 leaderSave(obj)
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          this.$router.push('/layout/tab2')
+        }
+        // console.log(998, obj)
+      } catch (error) {
+        console.log(error)
+        this.$message.warning('有字段不符合要求')
+      }
+    },
     // 上传图片
     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' ||
@@ -166,7 +183,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个字！')
@@ -194,45 +211,13 @@ export default {
         .catch(() => {
           this.$message.info('已取消')
         })
-    },
-    // 时间处理----------------
-    handleSelect (e) {
-      const date = []
-      for (const i in e) {
-        date.push(this.gettime(e[i]))
-      }
-      this.ruleForm.startTime = date[0]
-      if (date[1]) {
-        this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
-      }
-      if (e === null) this.ruleForm.endTime = ''
-    },
-    gettime (data) {
-      const value =
-        data.getFullYear() +
-        '-' +
-        this.checkTime(data.getMonth() + 1) +
-        '-' +
-        this.checkTime(data.getDate()) +
-        ' ' +
-        this.checkTime(data.getHours()) +
-        ':' +
-        this.checkTime(data.getMinutes()) +
-        ':' +
-        this.checkTime(data.getSeconds())
-      return value
-    },
-    checkTime (i) {
-      if (i < 10) {
-        i = '0' + i
-      }
-      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
     // 初始化富文本
     // 富文本
     this.editor = new E('#div1')
@@ -254,7 +239,22 @@ export default {
     this.editor.config.uploadImgShowBase64 = true // 图片地址
     this.editor.config.showLinkVideo = false
     this.editor.create()
-    this.editor.txt.html('66666666666666666')
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('CQLJXU_token')
+    // 如果是编辑
+    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)
+      // 日期回显
+      this.time = res.data.tenure.split(',')
+    }
+
+    // this.editor.txt.html('')
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -269,8 +269,8 @@ export default {
 .tab2Add {
   height: 100%;
   .conten {
-  padding-bottom: 10px;
-  overflow-y: auto;
+    padding-bottom: 10px;
+    overflow-y: auto;
     height: calc(100% - 32px);
     .con_top {
       margin-bottom: 12px;
@@ -306,7 +306,7 @@ export default {
       line-height: 178px;
       text-align: center;
     }
-    #div1{
+    #div1 {
       width: 85%;
       margin: 0 auto;
     }
@@ -314,6 +314,16 @@ export default {
       width: 80px;
       margin: 15px auto 0;
     }
+    .imgdiv {
+      max-width: 200px;
+      max-height: 200px;
+      &>img{
+        border: 10px solid #ccc;
+      }
+    }
+    .el-icon-circle-close {
+      font-size: 24px;
+    }
   }
 }
 </style>

houtai/src/views/tab2/tab2Look.vue

@@ -14,23 +14,23 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>姓名：</div>
-        <span>某某某</span>
+        <span>{{myObj.name}}</span>
       </div>
       <div class="row">
         <div>性别：</div>
-        <span>男</span>
+        <span>{{myObj.sex==='M'?'男':'女'}}</span>
       </div>
       <div class="row">
         <div>政治面貌：</div>
-        <span>中共党员</span>
+        <span>{{myObj.politics}}</span>
       </div>
       <div class="row">
         <div>任期职位：</div>
-        <span>政治部主任</span>
+        <span>{{myObj.job}}</span>
       </div>
       <div class="row">
         <div>任期：</div>
-        <span>2010年10月-2019年6月</span>
+        <span>{{time}}</span>
       </div>
       <div class="row">
         <div>领导照片：</div>
@@ -43,25 +43,27 @@
       </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 class="con_top">领导简介</div>
-      <div id="div1">领导简介</div>
+      <div id="div1" v-html="myObj.description"></div>
     </div>
   </div>
 </template>
 
 <script>
+import moment from 'moment'
+import { leaderDetail } from '@/apis/tab2'
+import axios from '@/utils/request'
 export default {
   name: 'tab2Look',
   components: {},
   data () {
     // 这里存放数据
     return {
-      value: true,
-      srcList: [
-        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
-      ]
+      myObj: {},
+      time: '',
+      srcList: []
     }
   },
   // 监听属性 类似于data概念
@@ -71,7 +73,18 @@ export default {
   // 方法集合
   methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 通过父亲传过来的id获取详情
+    if (this.$route.query.id) {
+      const res = await leaderDetail(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 () {}, // 生命周期 - 创建之前

index/src/views/tab1/index.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
 <div class='tab1'>
-  <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=1151" frameborder="0"></iframe>
+  <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=TEST" frameborder="0"></iframe>
 </div>
 </template>