出完完成精品典藏模块功能

new_backstage/src/components/editcomponent/editcon.vue

@@ -30,6 +30,7 @@
 
 <script>
 export default {
+  name:'Footer',
   props:['form','rule',"type",'justshow','status'],
   data(){
     return {

new_backstage/src/configue/api.js

@@ -288,4 +288,20 @@ export const addTabList = (data) => {
     url: 'cms/goodsModule/save',
     data
   })
+}
+
+//根据id获取信息自定义模块的详情
+export const getTabInfoById = (id) => {
+  return axios({
+    method: 'get',
+    url: `cms/goodsModule/detail/${id}`,
+  })
+}
+
+//根据id获删除自定义模块
+export const getTabDelById = (id) => {
+  return axios({
+    method: 'get',
+    url: `cms/goodsModule/remove/${id}`,
+  })
 }

new_backstage/src/pages/content/collection/componets/leftTab.vue

@@ -1,22 +1,47 @@
 <template>
   <div class="con-left">
-      <!-- @select="handleSelect($event)" -->
+    <!-- @select="handleSelect($event)" -->
     <el-menu
       :default-active="`${type}`"
       class="el-menu-vertical-demo"
+      @mouseleave.native="ind = null"
     >
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-menu"></i>
-          <span slot="title">{{title}}</span>
+          <span slot="title">{{ title }}</span>
         </template>
         <el-menu-item
-          v-for="(item, i) in menu"
-          :key="i"
+          :title="item.name"
+          v-for="item in menu"
+          :key="item.createTime"
           :index="item.id.toString()"
           @click="handleSelect(item)"
-          >{{ item.name }}</el-menu-item
+          @mouseenter.native="ind = item.id"
         >
+          {{ item.name }}
+        </el-menu-item>
+        <!-- 鼠标移入的操作 -->
+        <template v-for="(item, i) in menu">
+          <div
+            class="hover"
+            :key="item.id"
+            :style="{ top: i * 50 + 'px' }"
+            v-show="item.id === ind"
+          >
+            <i
+              class="el-icon-edit"
+              title="编辑"
+              @click="$emit('editTab', item.id)"
+            ></i>
+            <i
+              v-if="item.id!==1&&item.id!==2&&item.id!==3"
+              class="el-icon-close"
+              title="删除"
+              @click="$emit('deltTab', item.id)"
+            ></i>
+          </div>
+        </template>
       </el-submenu>
     </el-menu>
     <!-- <div class="sousuo" @click="isCollapse = !isCollapse">
@@ -26,21 +51,26 @@
 </template>
 
 <script>
-
 export default {
-  name:'con-left',
-  props:['menu','title','default'],
+  name: "con-left",
+  props: ["menu", "title", "default"],
   data() {
     return {
-      type: this.default
+      // type: this.default,
+      ind: null,
     };
   },
-  methods:{
-    handleSelect(data){
+  methods: {
+    handleSelect(data) {
       // console.log(998,data);
-      this.$emit('select',data)
+      this.$emit("select", data);
+    },
+  },
+    computed: {
+      type () {
+        return this.default
+      }
     }
-  }
 };
 </script>
 
@@ -55,10 +85,34 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     right: -30px;
+  }
+  .hover {
     cursor: pointer;
+    width: 52px;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    position: absolute;
+    height: 50px;
+    top: 0;
+    right: 0;
+    & > i {
+      margin-right: 2px;
+      &:hover {
+        color: #b63c25;
+      }
+    }
+  }
+  /deep/.el-menu-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 .el-menu-vertical-demo:not(.el-menu--collapse) {
+  height: 600px;
+  overflow-y: auto;
+  overflow-x: hidden;
   width: 200px;
   min-height: 400px;
 }

new_backstage/src/pages/content/collection/data.js

@@ -18,6 +18,16 @@ let raw = {
       prop: "visit",
       label: "阅读量",
     },
+
+    {
+      prop: "countLike",
+      label: "点赞",
+    },
+    {
+      prop: "countVote",
+      label: "投票",
+    },
+
     {
       prop: "userName",
       label: "提交人",
@@ -56,6 +66,16 @@ let raw = {
       prop: "visit",
       label: "阅读量",
     },
+
+    {
+      prop: "countLike",
+      label: "点赞",
+    },
+    {
+      prop: "countVote",
+      label: "投票",
+    },
+
     {
       prop: "userName",
       label: "提交人",
@@ -94,6 +114,16 @@ let raw = {
       prop: "visit",
       label: "阅读量",
     },
+
+    {
+      prop: "countLike",
+      label: "点赞",
+    },
+    {
+      prop: "countVote",
+      label: "投票",
+    },
+
     {
       prop: "userName",
       label: "提交人",
@@ -151,7 +181,7 @@ let menu = [
 //  }
 //  myFn()
 
- 
+
 
 let formKey = {
   model: {

new_backstage/src/pages/content/collection/edit.vue

@@ -86,6 +86,11 @@ export default {
           type: this.type,
           ...this.form,
         };
+        //精品典藏增加的参数
+        let temp = localStorage.getItem('XJ_goodsModuleId')
+        if(temp) params.goodsModuleId=Number(temp)
+        else params.goodsModuleId=1
+        
         save(this.val, params, () => {
           if (submit) {
             cb&&cb()

new_backstage/src/pages/content/collection/index.vue

@@ -10,7 +10,7 @@
     <div class="tablecon flexcon">
       <!-- 新增tab栏的按钮 -->
       <div class="addTab">
-        <el-button type="primary" style="width: 100%" @click="addTab"
+        <el-button type="primary" style="width: 100%" @click="isShow = true"
           >新增模块</el-button
         >
       </div>
@@ -24,6 +24,8 @@
       /> -->
 
       <LeftTab
+        @editTab="editTab"
+        @deltTab="deltTab"
         @select="handleMenu"
         :menu="menu"
         :default="goodsModuleId"
@@ -95,8 +97,13 @@
       @close="showApplyDetail = false"
       :tableData="alDetail"
     ></vdialog>
+
     <!-- 点击新增模块出现的弹窗 -->
-    <el-dialog title="新增模块" :visible="isShow" @close="addTabX">
+    <el-dialog
+      :title="ruleForm.id ? '编辑模块' : '新增模块'"
+      :visible="isShow"
+      @close="addTabX"
+    >
       <el-form
         :model="ruleForm"
         ref="ruleForm"
@@ -111,9 +118,24 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="展示类型：">
-          <el-radio v-model="ruleForm.type" label="model">模型</el-radio>
-          <el-radio v-model="ruleForm.type" label="img">图片</el-radio>
-          <el-radio v-model="ruleForm.type" label="video">视频</el-radio>
+          <el-radio
+            v-model="ruleForm.type"
+            label="model"
+            :disabled="!!ruleForm.id"
+            >模型</el-radio
+          >
+          <el-radio
+            v-model="ruleForm.type"
+            label="img"
+            :disabled="!!ruleForm.id"
+            >图片</el-radio
+          >
+          <el-radio
+            v-model="ruleForm.type"
+            label="video"
+            :disabled="!!ruleForm.id"
+            >视频</el-radio
+          >
         </el-form-item>
         <el-form-item label="投票功能：">
           <el-switch
@@ -154,7 +176,12 @@ import { raw, menuStr } from "./data";
 import { getList } from "@/configue/api";
 
 import { mapGetters } from "vuex";
-import { addTabList, getTabList } from "../../../configue/api";
+import {
+  addTabList,
+  getTabDelById,
+  getTabInfoById,
+  getTabList,
+} from "../../../configue/api";
 // 导入后面自己写的tab栏组件
 import LeftTab from "./componets/leftTab.vue";
 export default {
@@ -179,6 +206,7 @@ export default {
       },
       goodsModuleId: 1,
       // 点击新增模块
+      isShowId: null,
       isShow: false,
       ruleForm: {
         isLike: 0, //点赞功能，0：关， 1：开
@@ -191,10 +219,36 @@ export default {
   },
 
   methods: {
-    //------------------点击新增模块
-    addTab() {
-      this.isShow = true;
+    async editTab(id) {
+      this.isShowId = id;
+      // console.log('点击了编辑',id);
+      let res = await getTabInfoById(id);
+      if (res.code === 0) {
+        this.ruleForm = res.data;
+        this.isShow = true;
+      } else return this.$message.warning(res.msg);
+      // 根据id获取信息
     },
+    deltTab(id) {
+      this.$confirm(
+        "确定删除吗? 当前模块下如果存在数据，也会一并删除.",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(async () => {
+        let res = await getTabDelById(id);
+        if (res.code === 0) {
+          this.$message.success("删除成功!");
+          this.$router.push("/collection/model");
+          this.goodsModuleId = 1;
+          this.getTabList();
+        } else return this.$message.warning(res.msg);
+      });
+    },
+    //------------------点击新增模块
     //投票数量只能输入正整数
     changeInput() {
       let pattern = /^[1-9][0-9]*$/; //正整数的正则表达式
@@ -214,6 +268,8 @@ export default {
         if (res.code === 0) {
           this.getTabList();
           this.isShow = false;
+          this.addTabX();
+          this.$message.success("操作成功");
         } else this.$message.warning(res.msg);
       }
     },
@@ -233,7 +289,7 @@ export default {
     },
     handleMenu(data) {
       // 把索引存起来
-      localStorage.setItem('XJ_goodsModuleId',data.id)
+      localStorage.setItem("XJ_goodsModuleId", data.id);
       this.goodsModuleId = data.id;
       this.$router.push({
         params: { ...this.$route.params, type: data.type, id: data.id },
@@ -255,6 +311,10 @@ export default {
         },
         (data) => {
           this.list = data.data;
+          this.list.list.forEach((v) => {
+            if (!v.countLike) v.countLike = 0;
+            if (!v.countVote) v.countVote = 0;
+          });
         }
       );
     },
@@ -279,7 +339,6 @@ export default {
   watch: {
     goodsModuleId: {
       deep: true,
-      immediate: true,
       handler: function () {
         this.getAuth(this.activeMenu, menuStr[this.subMenu]);
         this.getList();
@@ -298,10 +357,10 @@ export default {
   },
   created() {
     // 调用获取tab列表方法
+    let myId = localStorage.getItem("XJ_goodsModuleId");
+    if (myId) this.goodsModuleId = Number(myId);
+    else this.goodsModuleId = 1;
     this.getTabList();
-    let myId = localStorage.getItem('XJ_goodsModuleId')
-    if(myId) this.goodsModuleId=Number(myId)
-    else this.goodsModuleId=1
   },
 };
 </script>

new_backstage/src/pages/layout/aside.vue

@@ -7,7 +7,7 @@
           <i class="iconfont" :class="item.icon"></i>{{ item.name }}
         </div>
         <div
-          @click="goto(sub)"
+          @click="goto(sub,idx)"
           v-for="(sub, idx) in item.routes"
           :key="idx"
           :class="{ activeFont: activeIdx === sub.key }"
@@ -30,6 +30,7 @@ export default {
       main,
       menu: [],
       tmpRoute: [],
+      myInd:null
     };
   },
   computed: {
@@ -61,6 +62,11 @@ export default {
   },
   methods: {
     goto(item) {
+      if(item.key===this.activeIdx) return
+      //当前页面不在精品典藏，进入精品典藏的时候把本地存储id变成1
+      if (item.id === 200 && this.$route.path !== "/collection/model") {
+        localStorage.setItem("XJ_goodsModuleId", 1);
+      }
       let path = {
         path: `/${item.key}${
           item.param ? `/${item.param.map((tt) => tt.default).join("/")}` : ""