单页内容因为富文本编辑器与弹框组件冲突。新建添加、修改单页内容的页面

src/api/tabbar.js

@@ -74,3 +74,11 @@ export const delFooterContent = (data) => {
         data
     })
 }
+// 获取某个底部导航内容
+export const getOneFooterContent = (data) => {
+    return request({
+        url: '/footer/getOneFooterContent',
+        method: 'post',
+        data
+    })
+}

src/router/index.js

@@ -894,6 +894,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/creatTabbarDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/creatTabbarDetail.vue'),
+        meta: {
+          title: '添加单页详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/store/modules/tabbar.js

@@ -0,0 +1,86 @@
+import {getTemplateClass,addFooterContent,getFooterContent,upFooterContent,getOneFooterContent,delFooterContent,
+} from '@/api/tabbar'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.底部导航栏 start ------------------------------------->
+  //1.1 添加底部导航栏
+  getTemplateClass({commit},data) {
+    return new Promise((resolve, reject) => {
+      getTemplateClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  
+  //1.底部导航栏 end ------------------------------------->
+  //2.底部导航列表 start ------------------------------------->
+  //2.1 添加底部导航内容
+  addFooterContent({commit},data) {
+    return new Promise((resolve, reject) => {
+      addFooterContent(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.2 搜索并获取底部导航内容
+  getFooterContent({commit},data) {
+    return new Promise((resolve, reject) => {
+      getFooterContent(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.3 修改底部导航内容
+  upFooterContent({commit},data) {
+    return new Promise((resolve, reject) => {
+      upFooterContent(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.4 删除底部导航内容
+  delFooterContent({commit},data) {
+    return new Promise((resolve, reject) => {
+      delFooterContent(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 2.5 获取某个底部导航内容
+  getOneFooterContent({commit},data) {
+    return new Promise((resolve, reject) => {
+      getOneFooterContent(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //2.底部导航列表 end ------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/views/tabbar/creatTabbarDetail.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+            <div>  
+              <el-form-item label="列表标题：" prop="listTitle" class="custom-align-right" v-if="this.type==1">
+                <el-input v-model="form.listTitle" autocomplete="off" placeholder="请输入列表标题"></el-input>
+              </el-form-item>
+              <el-form-item label="内容标题：" prop="contentTitle" class="custom-align-right">
+                <el-input v-model="form.contentTitle" autocomplete="off" placeholder="请输入内容标题"></el-input>
+              </el-form-item>
+              <el-form-item label="内容标题：" prop="content" class="custom-align-right">
+                <myEditor ref="myEditor" v-model="form.content"></myEditor>
+              </el-form-item>
+            <div>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">修改</el-button>
+      <el-button type="primary" @click="addToServe" v-else>添加</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+
+export default {
+  components: {
+    tableTitle,
+    myEditor
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value == '') {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule, value, callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+    return {
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus:false,//是否为编辑状态
+      tableDivTitle:"添加单页内容",
+      fcat_id:"",//单页导航id
+      type:"",//单页内容分类
+      //提交表单
+      form: {
+        listTitle:"",//列表标题
+        contentTitle:"",//内容标题
+        content:"",//内容
+      },
+      //1.2 表单验证规则
+      formRules: {
+        listTitle:[{required:true,trigger:'blur',validator:validateEmpty}],
+        contentTitle:[{required:true,trigger:'blur',validator:validateEmpty}],
+        content:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //1.3富文本编辑器配置
+      
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        // console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe(){
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let data = {
+            fcat_id:this.fcat_id,
+            type:this.type,
+            list_title:this.form.listTitle,
+            con_title:this.form.contentTitle,
+            content:this.form.content,
+          }
+          this.$store.dispatch('tabbar/addFooterContent',data).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加单页内容！'
+            });
+            this.cleatForm();
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm(){
+      // this.form.type = "";
+      // this.form.fcat_id = "";
+      this.form.listTitle = "";
+      this.form.content = "";
+      this.form.contentTitle = "";
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    
+    returnPage(){
+    // if(this.editStatus==true){
+    //   this.fcat_id = this.$route.query.fcat_id;
+    // }
+    this.$router.push({
+        path: '/TabbarDetail',
+        query: {
+          id: this.fcat_id,
+          type:this.type,
+       }
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id + ""
+      };
+      this.$store.dispatch('tabbar/getOneFooterContent', data).then(res => {
+        this.form.listTitle = res.data.list_title;
+        this.form.contentTitle = res.data.con_title;
+        this.fcat_id = res.data.fcat_id;
+        //回显编辑器内容
+        this.$nextTick(() => {
+          this.form.content = res.data.content;
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      });
+    },
+    //1.3提交修改
+    editToServe(){
+      //添加要修改的id
+      this.form.id = this.editId + "";
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+        let data = {
+          id:this.$route.query.id,
+          list_title:this.form.listTitle,
+          con_title:this.form.contentTitle,
+          content:this.form.content,
+          type:this.type,
+        }
+        
+          this.$store.dispatch('tabbar/upFooterContent',data).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功修改单页内容！'
+            });
+            this.cleatForm();
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    
+    //富文本编辑器 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //1.判断是新建还是回显
+    if(this.$route.query.dialogName!=undefined && this.$route.query.dialogName=="编辑"){
+      this.fcat_id = this.$route.query.fcat_id;
+      this.type = this.$route.query.tabbarType;
+      this.editStatus = true;
+      console.log("编辑内容！")
+      this.getMainData();
+    }else{
+      this.type = this.$route.query.tabbarType;
+      this.fcat_id = this.$route.query.fcat_id;
+      this.editStatus = false;
+      console.log("添加内容！")
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+ 
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/tabbar/tabbarDetail.vue

@@ -27,7 +27,7 @@
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addWebsite">添加详情</button>
+            <button class="btn" @click="goCreate()">添加详情</button>
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%">
@@ -74,7 +74,7 @@
         <!--表格内容 end------------------------------------------------------------>
 
         <!-- 弹出框 编辑 start----------------------------------------------------------->
-        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+        <!--el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
@@ -92,13 +92,13 @@
                             resize="none">
                         </el-input>
                     </el-form-item-->
-                </div>
+                <!--/div>
                 <div class="dialogBtn">
                     <el-button type="info" @click="cancelForm">取消</el-button>
                     <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                 </div>
             </el-form>
-        </el-dialog>
+        </el-dialog-->
         <!-- 弹出框 编辑 end----------------------------------------------------------->
     </div>
 </template>
@@ -128,7 +128,7 @@ export default {
         return {
             tableDivTitle: "单页详情",  //列表标题
             dialogTableVisible: false,  //编辑弹框
-            dialogName: '编辑', //编辑弹窗名称
+            // dialogName: '编辑', //编辑弹窗名称
 
             tableData: [],//表格数据
             tabbarId: '',//底部导航传递的id
@@ -169,7 +169,7 @@ export default {
                 page: this.page,
                 pageSize: this.pageSize
             }).then(data => {
-                console.log(data);
+                // console.log(data);
                 this.tableData = data.data.rows
                 this.total = data.data.count
             })
@@ -177,19 +177,19 @@ export default {
 
         //1.2 删除内容
         deleteRow(id) {
-            console.log(id);
+            // console.log(id);
             let data = new FormData()
             data.append('id', id)
             this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
             }).then(() => {
-                console.log("当前删除：" + id)
+                // console.log("当前删除：" + id)
 
                 delFooterContent({
                     id: id
                 }).then(data => {
-                    console.log(data);
+                    // console.log(data);
                     if (data.code = 200) {
                         this.$message({
                             message: '删除成功',
@@ -232,7 +232,7 @@ export default {
                 list_title:this.listTitle,
                 con_title:this.contentTitle,
             }).then(data => {
-                console.log(data);
+                // console.log(data);
                 this.tableData = data.data.rows
                 this.total = data.data.count
             })
@@ -245,42 +245,73 @@ export default {
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
-        //1.7 编辑
-        goEdit(id, val) {
-            // console.log(id);
-            this.dialogName = '编辑'
-            this.activeid = id
-            this.dialogTableVisible = true
-            console.log(id, val);
-
-            //数据回显
-            this.ruleForm.listTitle = val.list_title //列表标题
-            this.ruleForm.contentTitle = val.con_title //内容标题
-            this.$nextTick(() => {
-                this.ruleForm.contentDetail = val.content //内容详情
-            });
+        // //1.7 编辑
+        // goEdit(id, val) {
+        //     // console.log(id);
+        //     this.dialogName = '编辑'
+        //     this.activeid = id
+        //     this.dialogTableVisible = true
+        //     console.log(id, val);
+
+        //     //数据回显
+        //     this.ruleForm.listTitle = val.list_title //列表标题
+        //     this.ruleForm.contentTitle = val.con_title //内容标题
+        //     this.$nextTick(() => {
+        //         this.ruleForm.contentDetail = val.content //内容详情
+        //     });
+            
+        // },
+
+        // //1.8 添加
+        // addWebsite() {
+        //     this.dialogTableVisible = true
+        //     this.dialogName = "添加"
+
+        //     //添加时清空回显回来的数据
+        //     this.ruleForm.contentTitle = '' //内容标题
+        //     this.ruleForm.contentDetail = '' //内容详情
+        // },
+        // 1.7 添加
+        goCreate() {
+            if(this.tabbarType==0 && this.total==1){
+                this.$message({
+                    message: '该底部导航下已有详情页，不可添加详情页！',
+                    type: 'error'
+                })
+            }else{
+                let data = {
+                    tabbarType: this.tabbarType,
+                    dialogName: '添加', //添加
+                    'fcat_id': this.tabbarId, //底部导航传递的id
+                  }
+                  this.$router.push({
+                    path: '/creatTabbarDetail',
+                    query: data
+                  });
+            }
             
         },
-
-        //1.8 添加
-        addWebsite() {
-            this.dialogTableVisible = true
-            this.dialogName = "添加"
-
-            //添加时清空回显回来的数据
-            this.ruleForm.contentTitle = '' //内容标题
-            this.ruleForm.contentDetail = '' //内容详情
+        // 1.8 编辑
+        goEdit(id, val) {
+            let data = {
+                id: id, //内容id
+                tabbarType: this.tabbarType,
+                dialogName: '编辑', //编辑
+              }
+              this.$router.push({
+                path: '/creatTabbarDetail',
+                query: data
+              });
         },
-
         // 弹出层相关方法
         // 1.9 提交表单
         submitForm(formName) {
             // 判断用户是否输入数据
             this.$refs[formName].validate((valid) => {
                 if (valid) {
-                    console.log('submit!');
+                    // console.log('submit!');
                 } else {
-                    console.log('error submit!!');
+                    // console.log('error submit!!');
                     return false;
                 }
             });
@@ -292,7 +323,7 @@ export default {
                         con_title: this.ruleForm.contentTitle,
                         content: this.ruleForm.contentDetail,
                     }).then(data => {
-                        console.log(data);
+                        // console.log(data);
                         if (data.code == 200) {
                             this.$message({
                                 message: '添加成功',
@@ -315,7 +346,7 @@ export default {
                         con_title: this.ruleForm.contentTitle,
                         content: this.ruleForm.contentDetail,
                     }).then(data => {
-                        console.log(data);
+                        // console.log(data);
                         if (data.code == 200) {
                             this.$message({
                                 message: '添加成功',
@@ -340,7 +371,7 @@ export default {
                         con_title: this.ruleForm.contentTitle,
                         content: this.ruleForm.contentDetail,
                     }).then(data => {
-                        console.log(data);
+                        // console.log(data);
                         if (data.code == 200) {
                             this.$message({
                                 message: '修改成功!',
@@ -363,7 +394,7 @@ export default {
                         con_title: this.ruleForm.contentTitle,
                         content: this.ruleForm.contentDetail,
                     }).then(data => {
-                        console.log(data);
+                        // console.log(data);
                         if (data.code == 200) {
                             this.$message({
                                 message: '修改成功!',