up

houtai/src/apis/tab1.js

@@ -51,3 +51,34 @@ export const goodsimgRemove = (id) => {
     url: `/cms/goods/imgRemove/${id}`
   })
 }
+
+// 二级模块列表
+export const moduleList = (module) => {
+  return axios({
+    method: 'post',
+    url: `/cms/module/list/${module}`
+  })
+}
+
+// 二级模块新增和编辑
+export const moduleSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/module/save',
+    data
+  })
+}
+
+// 二级模块的删除
+export const moduleRemove = (id) => {
+  return axios({
+    url: `/cms/module/remove/${id}`
+  })
+}
+
+// 二级模块通过id获取详情
+export const moduleDetail = (id) => {
+  return axios({
+    url: `/cms/module/detail/${id}`
+  })
+}

houtai/src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 const service = axios.create({
-  baseURL: 'http://192.168.0.135:8003/', // 本地调试
+  baseURL: 'http://192.168.0.135:8003', // 本地调试
   // baseURL: 'http://192.168.0.245:8005/', // 线上调试
   // baseURL: '', // build
   timeout: 5000

houtai/src/views/tab1/index.vue

@@ -9,6 +9,11 @@
     <div class="obstruct"></div>
     <div class="conten">
       <div class="con_left">
+        <div class="moBtn">
+          <el-button type="primary" @click="dialogShow = true"
+            >新增模块</el-button
+          >
+        </div>
         <div class="cutJT">
           <i class="el-icon-arrow-down"></i>
           文物典藏
@@ -17,10 +22,22 @@
           <li
             v-for="item in conLeftArr"
             :key="item.id"
-            :class="{ active: formData.type === item.type }"
-            @click="cutLeft(item.type)"
+            :class="{ active: formData.moduleId === item.id }"
+            @click="cutLeft(item.id,item.type)"
           >
-            {{ item.name }}
+            <span :title="item.name">{{ item.name }}</span>
+            <div class="inco" v-if="item.id !== 1 && item.id !== 2 && item.id !== 3">
+              <i
+                @click="moduleEdit(item.id)"
+                title="编辑"
+                class="el-icon-edit"
+              ></i>
+              <i
+                title="删除"
+                class="el-icon-delete"
+                @click="moduleRemove(item.id)"
+              ></i>
+            </div>
           </li>
         </ul>
       </div>
@@ -71,40 +88,63 @@
             </el-table-column>
             <el-table-column label="标题" width="250">
               <template #default="{ row }">
-                <span class="table_name" :title="row.name">{{
-                  row.name
-                }}</span>
+                <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 #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="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">
+            <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>
+                <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
+                  v-model="row.display"
+                  active-color="#b9412e"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="changeSwit($event, row.id)"
+                >
                 </el-switch>
               </template>
             </el-table-column>
             <el-table-column label="操作">
               <template #default="{ row }">
+                <el-button type="text" @click="lookGood(row.id)"
+                  >查看</el-button
+                >
                 <el-button
                   type="text"
-                  @click="lookGood(row.id)"
-                  >查看</el-button
+                  v-if="!row.display"
+                  @click="editGood(row.id)"
+                  >编辑</el-button
+                >
+                <el-button
+                  type="text"
+                  v-if="!row.display"
+                  @click="delGoods(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>
@@ -122,25 +162,68 @@
       >
       </el-pagination>
     </div>
+    <!-- 点击新增模块出现的弹窗 -->
+    <el-dialog
+      :title="dialogData.id?'编辑模块':'新增模块'"
+      :visible="dialogShow"
+      class="myDialog"
+      @close="btnX"
+    >
+      <div class="row">
+        <span>模块名称：</span>
+        <el-input
+          style="width: 500px"
+          v-model="dialogData.name"
+          maxlength="10"
+          show-word-limit
+        ></el-input>
+      </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>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="btnX">取 消</el-button>
+        <el-button type="primary" @click="btnOk">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import axios from '@/utils/request'
-import { goodsList, goodsRemove, goodsDisplay, goodsSort } from '@/apis/tab1'
+import {
+  goodsList,
+  goodsRemove,
+  goodsDisplay,
+  goodsSort,
+  moduleList,
+  moduleSave,
+  moduleRemove,
+  moduleDetail
+} from '@/apis/tab1'
 export default {
   name: 'tab1',
   components: {},
   data () {
     // 这里存放数据
     return {
+      dialogShow: false,
+      dialogData: {
+        module: 'goods',
+        name: '',
+        type: 'model'
+      },
+      // 关于新增模块的数据↑
       baseURL: '',
       total: 0,
       time: '',
       conLeftArr: [
-        { name: '实物模型', type: 'model' },
-        { name: '专题图库', type: 'img' },
-        { name: '视频档案', type: 'video' }
+        { id: 1, name: '...' },
+        { id: 2, name: '...' },
+        { id: 3, name: '...' }
       ],
       formData: {
         startTime: '',
@@ -149,8 +232,10 @@ export default {
         pageSize: 10,
         searchKey: '',
         sortType: 0,
-        type: 'model'
+        moduleId: 1
       },
+      // 当前选中的模块类型
+      activeType: 'model',
       tableData: []
     }
   },
@@ -164,6 +249,50 @@ export default {
   },
   // 方法集合
   methods: {
+    async moduleEdit (id) {
+      const res = await moduleDetail(id)
+      this.dialogData = res.data
+      this.dialogShow = true
+    },
+    moduleRemove (id) {
+      this.$confirm('确定删除吗? 当前模块下如果存在数据，也会一并删除.', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await moduleRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            const res2 = await moduleList('goods')
+            this.conLeftArr = res2.data
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    btnX () {
+      this.dialogShow = false
+      this.dialogData = {
+        module: 'goods',
+        name: '',
+        type: 'model'
+      }
+    },
+    async btnOk () {
+      if (this.dialogData.name.trim() === '') {
+        return this.$message.warning('模块名称不能为空')
+      }
+      const res = await moduleSave(this.dialogData)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.btnX()
+        const res2 = await moduleList('goods')
+        this.conLeftArr = res2.data
+      } else this.$message.warning(res.msg)
+    },
+    // 关于新增模块的方法↑
     // 点击重置
     resetBtn () {
       this.formData.searchKey = ''
@@ -195,7 +324,6 @@ export default {
         this.$message.success('操作成功')
         this.goodsList(this.formData)
       } else this.$message.warning(res.msg)
-      console.log(998, val, id)
     },
     // 分页器方法
     currentChange (val) {
@@ -250,19 +378,20 @@ export default {
     },
     // 点击新增文物
     addGood () {
-      if (this.formData.type === 'img') this.$router.push('/layout/tab1Add2')
-      else {
-        this.$router.push({
-          path: '/layout/tab1Add',
-          query: { conLeftId: this.formData.type }
-        })
-      }
+      let temp = '/layout/tab1Add'
+      if (this.activeType === 'img') temp = '/layout/tab1Add2'
+      this.$router.push({
+        path: temp,
+        query: { id: this.formData.moduleId, k: this.activeType }
+      })
     },
     // 点击左侧的tab栏
-    cutLeft (type) {
-      if (type === this.formData.type) return
-      this.formData.type = type
+    cutLeft (id, type) {
+      if (id === this.formData.moduleId) return
+      this.formData.moduleId = id
       this.goodsList(this.formData)
+      // 把当前选中的模块类型保存
+      this.activeType = type
     },
     // 时间处理----------------
     handleSelect (e) {
@@ -317,7 +446,10 @@ export default {
     this.goodsList(this.formData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  async mounted () {
+    const res = await moduleList('goods')
+    this.conLeftArr = res.data
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -334,28 +466,87 @@ export default {
     display: flex;
     height: calc(100% - 32px);
     .con_left {
-      padding: 20px 0 0 15px;
+      position: relative;
+      padding: 50px 0 0 0;
       width: 180px;
       height: 100%;
       border: 1px solid #ccc;
+      border-top: none;
+      .moBtn {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        /deep/button {
+          width: 100%;
+        }
+      }
       .cutJT {
+        padding-left: 8px;
         margin-bottom: 10px;
       }
       ul {
+        height: 600px;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          /*滚动条整体样式*/
+          width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
+        }
+        &::-webkit-scrollbar-thumb {
+          /*滚动条里面小方块*/
+          border-radius: 10px;
+          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+          background: #b9412e;
+        }
         li {
+          position: relative;
+          padding-left: 30px;
           cursor: pointer;
-          margin-left: 20px;
-          width: 100px;
-          text-align: center;
-          line-height: 30px;
-          height: 30px;
+          width: 100%;
+          text-align: left;
+          line-height: 40px;
+          height: 40px;
+          & > span {
+            display: inline-block;
+            width: calc(100% - 50px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .inco {
+            display: none;
+            text-align: right;
+            padding: 0 2px;
+            font-size: 20px;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 50px;
+            height: 40px;
+            .el-icon-delete {
+              margin-left: 5px;
+            }
+            i {
+              &:hover {
+                color: #b9412e;
+              }
+            }
+          }
           &:hover {
-            color: #b9412e;
+            & > span {
+              color: #b9412e;
+            }
             background-color: #e6f7ff;
+            .inco {
+              display: block;
+            }
           }
         }
         .active {
-          color: #b9412e;
+          & > span {
+            color: #b9412e;
+          }
           background-color: #e6f7ff;
         }
       }
@@ -389,18 +580,26 @@ export default {
       }
     }
   }
-  .table{
+  .table {
     max-width: 1370px;
   }
-  /deep/.el-table__body-wrapper{
+  /deep/.el-table__body-wrapper {
     max-height: 485px;
     overflow-y: auto;
   }
-      .paging {
-      position: absolute;
-      bottom: 15px;
-      right: 50px;
+  .paging {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
+  .myDialog {
+    .row {
+      display: flex;
+      align-items: center;
+      &:nth-of-type(1) {
+        margin-bottom: 30px;
+      }
     }
-
+  }
 }
 </style>

houtai/src/views/tab1/tab1Add.vue

@@ -49,7 +49,7 @@
           <i class="biaoshi" :class="{ biaoshi1: conLeftId === 'model' }"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/goods/upload'"
+            :action="baseURL + '/cms/goods/uploadImg'"
             :headers="{
               token,
             }"
@@ -88,7 +88,7 @@
             multiple
             class="upload-demo"
             :file-list="fileList"
-            :action="baseURL + '/cms/goods/video/upload'"
+            :action="`${baseURL}/cms/goods/upload/${conLeftId}`"
             :headers="{ token }"
             :before-upload="beforeFujian"
             :on-success="successFujian"
@@ -277,9 +277,9 @@ export default {
     // 获取用户token
     this.token = localStorage.getItem('CQLJXU_token')
     // 拿到路由跳转传过来的数据
-    this.conLeftId = this.$route.query.conLeftId
+    this.conLeftId = this.$route.query.k
     // 通过父亲传过来的id获取详情
-    if (this.$route.query.id) {
+    if (!this.$route.query.k) {
       const res = await goodsDetail(Number(this.$route.query.id))
       this.ruleForm = res.data.entity
       // 附件回显