在新页面编辑栏目详情

在新页面编辑栏目详情

src/router/index.js

@@ -204,6 +204,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/editNavigationMain',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/website/editNavigationMain'),
+        meta: {
+          title: '编辑栏目详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   {
     path: '/articleList',
     component: Layout,

src/views/news/officialNavReview.vue

@@ -64,7 +64,7 @@
                                     <div class="listEditBtn" @click="gotoEdit(scope.row.id)" v-if="scope.row.is_update == 1">
                                         <i class="el-icon-edit-outline"></i>编辑
                                     </div>
-                                    <div class="listMainBtn" @click="getDataMain(scope.row.id)" v-else>
+                                    <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-else>
                                         <i class="el-icon-view"></i>查看
                                     </div>
                                 </div>

src/views/news/topicReview.vue

@@ -74,7 +74,7 @@
                                     <div class="listEditBtn" @click="gotoEdit(scope.row.id)" v-if="scope.row.is_update == 1">
                                         <i class="el-icon-edit-outline"></i>编辑
                                     </div>
-                                    <div class="listMainBtn" @click="getDataMain(scope.row.id)" v-else>
+                                    <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-else>
                                         <i class="el-icon-view"></i>查看
                                     </div>
                                 </div>

src/views/website/categoryList.vue

@@ -128,14 +128,15 @@
                 </span>
               </template>
 
-              <el-radio-group v-model="form.type" size="small" :disabled="editId ? true : false">
+              <el-radio-group v-model="form.type" size="small" props="type" :disabled="editId ? true : false">
                 <el-radio-button label="1">资讯</el-radio-button>
-                <el-radio-button label="2">商品</el-radio-button>
+                <!-- <el-radio-button label="2">商品</el-radio-button>
                 <el-radio-button label="3">书刊音响</el-radio-button>
                 <el-radio-button label="4">招聘</el-radio-button>
                 <el-radio-button label="5">求职</el-radio-button>
                 <el-radio-button label="6">企业</el-radio-button>
-                <el-radio-button label="7">项目</el-radio-button>
+                <el-radio-button label="7">项目</el-radio-button> -->
+                <el-radio-button label="8">单页</el-radio-button>
               </el-radio-group>
               <!-- 选择类型提交后不可更改，请谨慎考虑后提交！ 提示词 -->
               <div style="color: brown;">
@@ -355,6 +356,7 @@ export default {
         seo_title: [{ required: true, trigger: 'blur', validator: validateEmpty }],//标题不能为空
         seo_keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],//关键词不能为空
         seo_description: [{ required: true, trigger: 'blur', validator: validateEmpty }],//描述不能为空
+        type: [{ required: true, trigger: 'change', validator: validateEmpty }],//栏目类型不能为空
       },
       //获取城市列表
       cascaderKey: 0,//弹窗用的key

src/views/website/editNavigation.vue

@@ -6,64 +6,10 @@
           <div class="searchBox">
             <div class="searchTitle">栏目名称：</div>
             <el-input v-model="search" placeholder="请输入栏目名称" :clearable="true" />
-            <!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
           </div>
         </el-col>
       </el-row>
     </div>
-    <div class="layerBoxNoBg">
-      <!-- <div>
-        <el-button type="primary" @click="addCategoryList">添加栏目名称</el-button>
-      </div> -->
-      <!-- <div>
-        <el-button @click="clearSearchList">重置</el-button>
-        <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
-      </div> -->
-    </div>
-    <!--搜索功能 start------------------------------------------------------------>
-    <!-- <div class="layerBox_search">
-      <div class="layerBoxLine">
-        <el-row>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">展示名称：</div>
-              <el-input placeholder="请输入展示名称" autocomplete="off" v-model="getApiData.alias"/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">栏目名称：</div>
-              <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name"/>
-            </div>
-          </el-col>
-           <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">行政职能部门：</div>
-              <el-cascader :key="searchDepartmentKey" v-model="getApiData.department_id" placeholder="请选择行政职能部门" :props="searchDepartmentData" filterable clearable></el-cascader>
-            </div>
-          </el-col> 
-        </el-row>
-      </div> 
-       <div class="layerBoxLineTwo">
-        <el-row>
-          <el-col :span="8">
-            <div class="searchBox">
-              <div class="searchTitle">行政区划：</div>
-              <el-cascader :key="searchCascaderKey" v-model="getApiData.city_id" placeholder="选择导航池所属行政区划" :props="searchCityData" filterable clearable></el-cascader>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div> -->
-    <!-- <div class="layerBoxNoBg">
-      <div></div>
-      <div>
-         <el-button @click="clearSearchList">重置</el-button>
-        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button> 
-      </div>
-    </div> -->
-    <!--搜索功能 end------------------------------------------------------------>
-
     <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
       <tableTitle :name="tableDivTitle" />
@@ -121,63 +67,7 @@
         </template>
       </el-row>
     </div>
-
-    <!--分页 start------------------------------------------------------------>
-    <!-- <div class="alignBox">
-      <el-row>
-        <el-col :span="24">
-          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
-        </el-col>
-      </el-row>
-    </div> -->
-    <!--分页 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
-
-    <!--弹出框start------------------------------------------------------------>
-    <el-dialog title="编辑栏目" :visible.sync="windowStatus">
-      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-        <div class="formDiv">
-          <el-form-item label="展示名称：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
-            <el-input v-model="form.alias" autocomplete="off"></el-input>
-            <input type="hidden" v-model="form.seo_title">
-          </el-form-item>
-
-          <el-form-item label="名称拼音：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input v-model="form.alias_pinyin" autocomplete="off" disabled></el-input>
-          </el-form-item>
-
-          <el-form-item label="展示标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input v-model="form.seo_title" autocomplete="off"></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="展示关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <inputTag :initialTags="tags" @tags-updated="updateTags" />
-              <!-- <inputTag  :initialTags="form.seo_keywords" @tags-updated="updateTags"/> -->
-              <!-- <el-input v-model="form.seo_keywords" autocomplete="off"></el-input> -->
-            </div>
-          </el-form-item>
-          <el-form-item label="展示描述：" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
-            <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"></el-input>
-          </el-form-item>
-          <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
-            <div class="formLabelFloatBox">
-              <el-input v-model="form.sort" autocomplete="off"></el-input>
-            </div>
-          </el-form-item>
-        </div>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <div>
-          <el-button @click="closeWindow">取 消</el-button>
-          <el-button type="primary" @click="addToServe">提交</el-button>
-        </div>
-      </div>
-    </el-dialog>
-    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
-
-
   </div>
 </template>
 
@@ -186,12 +76,15 @@
 import '@/styles/global.less';
 //表格标题
 import tableTitle from './components/tableTitle';
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
 
 import InputTag from '@/components/InputTag'
 export default {
   components: {
     tableTitle,//表格标题
-    InputTag
+    InputTag,
+    myEditor
   },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -305,7 +198,7 @@ export default {
         seo_title: "",//导航seo名称
         seo_keywords: "",//导航关键词
         seo_description: "",//导航描述
-        sort: 0//排序
+        sort: 0,//排序
       },
       //3.2表单验证规则
       formRules: {
@@ -452,28 +345,39 @@ export default {
     //4.编辑导航 start ------------------------------------------------------------>
     //回显数据
     editRow(id) {
-      this.openWindow();
-      let data = {
-        website_id: this.$route.query.website_id,
-        category_id: id
-      }
-      this.$store.dispatch('pool/getWebsiteCategoryOnes', data).then(res => {
-        // console.log(res.data)
-        this.form.website_id = this.$route.query.website_id;
-        this.form.category_id = id;
-        this.form.alias_pinyin = res.data.aLIas_pinyin;
-        this.form.alias = res.data.alias;
-        this.form.seo_title = res.data.seo_title;
-        this.form.seo_keywords = res.data.seo_keywords;
-        this.tags = res.data.seo_keywords ? res.data.seo_keywords.split(',') : [];
-        this.form.seo_description = res.data.seo_description;
-        this.form.sort = res.data.sort;
-      })
+        let data = {
+            id:id,//编辑的栏目id
+            website_id: this.$route.query.website_id,//网站id
+            page: this.$route.query.page,// 页码
+            pageSize: this.$route.query.pageSize//每页条数
+        };
+        // 如果 website_column_arr_id 是数组，则为每个 id 都生成一个参数
+        let website_column_arr_id = this.$route.query.website_column_arr_id;
+        // 兼容参数被单个值/字符串的情况
+        let query = { ...data };
+        if (Array.isArray(website_column_arr_id)) {
+            // 多个同名参数
+            website_column_arr_id.forEach((id, idx) => {
+                // vue-router 会自动处理为多个参数
+                // 所以直接在query里添加同名数组即可
+                if (!query.website_column_arr_id) {
+                    query.website_column_arr_id = [];
+                }
+                query.website_column_arr_id.push(id);
+            });
+        } else if (website_column_arr_id !== undefined) {
+            // 单个参数
+            query.website_column_arr_id = website_column_arr_id;
+        }
+        this.$router.push({
+            path: '/editNavigationMain',
+            query: query
+        });
     },
     //提交编辑的数据
     addToServe() {
       //把标题的值给与seo_title
-      // this.form.seo_title = this.form.alias;
+      //this.form.seo_title = this.form.alias;
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('pool/upWebsiteCategoryones', this.form).then(res => {
@@ -590,4 +494,4 @@ export default {
   text-align: right;
   /* 设置标签文字右对齐 */
 }
-</style>
+</style>

src/views/website/editNavigationMain.vue

@@ -0,0 +1,222 @@
+<template>
+    <div class="mainBox">
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+                    <div class="formDiv">
+                        <el-form-item label="展示名称：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
+                            <el-input v-model="form.alias" autocomplete="off"></el-input>
+                            <input type="hidden" v-model="form.seo_title">
+                        </el-form-item>
+                        <el-form-item label="名称拼音：" :label-width="formLabelWidth" class="custom-align-right">
+                            <el-input v-model="form.alias_pinyin" autocomplete="off" disabled></el-input>
+                        </el-form-item>
+                        <el-form-item label="展示标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
+                            <div class="formLabelFloatBox">
+                            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="展示关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
+                            <div class="formLabelFloatBox">
+                            <inputTag :initialTags="tags" @tags-updated="updateTags" />
+                            <!-- <inputTag  :initialTags="form.seo_keywords" @tags-updated="updateTags"/> -->
+                            <!-- <el-input v-model="form.seo_keywords" autocomplete="off"></el-input> -->
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="展示描述：" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
+                            <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"></el-input>
+                        </el-form-item>
+                        <el-form-item label="栏目介绍：" :label-width="formLabelWidth" class="custom-align-right">
+                            <div class="formLabelFloatBox">
+                            <myEditor ref="myEditor" v-model="form.introduce"></myEditor>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="副标题：" :label-width="formLabelWidth" class="custom-align-right">
+                            <div class="formLabelFloatBox">
+                            <el-input v-model="form.subtitle" autocomplete="off"></el-input>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
+                            <div class="formLabelFloatBox">
+                            <el-input v-model="form.sort" autocomplete="off"></el-input>
+                            </div>
+                        </el-form-item>
+                        </div>
+                    </el-form>
+                    <div class="editNavigatioBottom">
+                        <el-button @click="goBack">取 消</el-button>
+                        <el-button type="primary" @click="addToServe">提交</el-button>
+                    </div>
+                </template>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+//引入公用样式
+import '@/styles/global.less';
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+import InputTag from '@/components/InputTag'
+
+export default {
+    components: {
+        tableTitle,//表格标题
+        InputTag,
+        myEditor
+    },
+    data() {
+        //0.全局操作 start ------------------------------------------------------------>
+        //表单验证
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        let self = this;
+        //0.全局操作 end ------------------------------------------------------------>
+        return {
+            tags: [],
+            //1.列表和分页相关 start ------------------------------------------------------------>
+            tableDivTitle: "编辑栏目详情",
+            //2.弹出框设置 start ------------------------------------------------------------>
+            windowStatus: false,
+            formLabelWidth: '120px',
+            //弹出框设置 end ------------------------------------------------------------>
+            //3.弹出框中的表单设置 start ------------------------------------------------------------>
+            //3.1 表单收集的数据
+            form: {
+                website_id: 0,//网站id
+                category_id: 0,//导航id
+                alias: "",//导航名称
+                alias_pinyin: "",//导航名称拼音
+                seo_title: "",//导航seo名称
+                seo_keywords: "",//导航关键词
+                seo_description: "",//导航描述
+                sort: 0,//排序
+                introduce: "",//栏目介绍
+                subtitle: ""//副标题
+            },
+            //3.2表单验证规则
+            formRules: {
+                //网站名称不能为空
+                alias: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sort: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                //网站标题，关键词，描述不能为空
+                seo_title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                seo_keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                seo_description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
+            //弹出框中的表单设置 end ------------------------------------------------------------>
+        }
+    },
+    methods: {
+        //1.通过路由参数回显数据
+        editRow() {
+            let data = {
+                website_id: this.$route.query.website_id,
+                category_id: this.$route.query.id
+            }
+            this.$store.dispatch('pool/getWebsiteCategoryOnes', data).then(res => {
+                // console.log(res.data)
+                this.form.website_id = this.$route.query.website_id;
+                this.form.category_id = this.$route.query.id;
+                this.form.alias_pinyin = res.data.aLIas_pinyin;
+                this.form.alias = res.data.alias;
+                this.form.seo_title = res.data.seo_title;
+                this.form.seo_keywords = res.data.seo_keywords;
+                this.tags = res.data.seo_keywords ? res.data.seo_keywords.split(',') : [];
+                this.form.seo_description = res.data.seo_description;
+                this.form.sort = res.data.sort;
+                this.form.subtitle = res.data.subtitle;
+                setTimeout(() => {
+                    this.form.introduce = res.data.introduce;
+                }, 100);
+            })
+        },
+        //2.提交编辑的数据
+        addToServe() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$store.dispatch('pool/upWebsiteCategoryones', this.form).then(res => {
+                        if(res.code==200){
+                            //汇报结果
+                            this.$message({
+                                type: 'success',
+                                message: '已成功修改栏目详情信息！'
+                            });
+                            this.goBack();
+                        }else{
+                            this.$message.error(res.msg);
+                        }
+                    })
+                }
+            })
+        },
+        updateTags(newTags) {
+            this.tags = newTags;
+            this.form.seo_keywords = newTags.join(',');
+        },
+        //返回栏目列表
+        goBack(){
+            let data = {
+                website_id: this.$route.query.website_id,//网站id
+                page: this.$route.query.page,// 页码
+                pageSize: this.$route.query.pageSize//每页条数
+            };
+            // 如果 website_column_arr_id 是数组，则为每个 id 都生成一个参数
+            let website_column_arr_id = this.$route.query.website_column_arr_id;
+            // 兼容参数被单个值/字符串的情况
+            let query = { ...data };
+            if (Array.isArray(website_column_arr_id)) {
+                // 多个同名参数
+                website_column_arr_id.forEach((id, idx) => {
+                    // vue-router 会自动处理为多个参数
+                    // 所以直接在query里添加同名数组即可
+                    if (!query.website_column_arr_id) {
+                        query.website_column_arr_id = [];
+                    }
+                    query.website_column_arr_id.push(id);
+                });
+            } else if (website_column_arr_id !== undefined) {
+                // 单个参数
+                query.website_column_arr_id = website_column_arr_id;
+            }
+            this.$router.push({
+                path: '/editNavigation',
+                query: query
+            });
+        }
+    },
+    mounted() {
+        this.editRow();
+    },
+}
+</script>
+
+<style scoped lang="less">
+.editNavigatioBottom {
+    width: 100%;
+    text-align: center;
+    padding: 10px 0 20px 0;
+}
+//表单微调 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;
+    /* 设置标签文字右对齐 */
+}
+</style>