优化

src/main/webapp/WEB-INF/manager/cms/category/form.ftl

@@ -208,6 +208,7 @@
                 var that = this;
                 ms.http.get(ms.manager+"/cms/category/list.do",{pageSize:9999}).then(function(res){
                     if(res.result){
+                        //res.data.rows.push({id:0,categoryId: null,categoryTitle:'顶级栏目管理'});
                         that.treeList = ms.util.treeData(res.data.rows,'id','categoryId','children');
                     }
                 }).catch(function(err){

src/main/webapp/WEB-INF/manager/cms/content/form.ftl

@@ -27,14 +27,9 @@
                                 </el-col>
                                 <el-col span="12">
             <el-form-item  label="所属栏目" prop="contentCategoryId">
-            <el-cascader v-model="form.contentCategoryId"
-                         :disabled="false"
-                         :clearable="true"
-                         placeholder="请选择所属栏目"
-                         :style="{width:'100%'}"
-                         :options="contentCategoryIdTreeDatas"
-                         :props="contentCategoryIdProps">
-            </el-cascader>
+                <tree-select :props="{value: 'id',label: 'categoryTitle',children: 'children'}"
+                             :options="contentCategoryIdOptions" :style="{width:'100%'}"
+                             v-model="form.contentCategoryId"></tree-select>
             </el-form-item>
                                 </el-col>
                         </el-row>
@@ -208,7 +203,7 @@
                     // 文章标题
                     contentTitle:'',
                     // 所属栏目
-                    contentCategoryId: [],
+                    contentCategoryId: '',
                     // 文章类型
                     contentType: [],
                     // 是否显示
@@ -241,16 +236,6 @@
         },
         watch:{
         },
-        computed:{
-                contentCategoryIdTreeDatas(){
-                    let cloneData = JSON.parse(JSON.stringify(this.contentCategoryIdOptions))    // 对源数据深度克隆
-                    return cloneData.filter(father=>{
-                        let branchArr = cloneData.filter(child=>father.categoryId == child.categoryCategoryId)    //返回每一项的子级数组
-                        branchArr.length>0 ? father.children = branchArr : ''   //如果存在子级，则给父级添加一个children属性，并赋值
-                        return father.categoryCategoryId==0;      //返回第一层
-                    });
-            },
-        },
         methods: {
             save() {
                 var that = this;
@@ -262,7 +247,6 @@
                     if (valid) {
                         that.saveDisabled = true;
                         var data = JSON.parse(JSON.stringify(that.form));
-                        data.contentCategoryId = data.contentCategoryId.join(',');
                         data.contentType = data.contentType.join(',');
                         data.contentImg = JSON.stringify(data.contentImg);
                         ms.http.post(url, data).then(function (data) {
@@ -272,7 +256,7 @@
                                     message: '保存成功',
                                     type: 'success'
                                 });
-                                location.href = ms.manager + "/cms/content/index.do";
+                                location.href = ms.manager + "/cms/content/main.do";
                             } else {
                                 that.$notify({
                                     title: '失败',
@@ -293,8 +277,9 @@
                 var that = this;
                 ms.http.get(ms.manager + "/cms/content/get.do", {"id":id}).then(function (res) {
                     if(res.result&&res.data){
-                    res.data.contentCategoryId = res.data.contentCategoryId.split(',');
-                    res.data.contentType = res.data.contentType.split(',');
+                        if(res.data.contentType){
+                            res.data.contentType = res.data.contentType.split(',');
+                        }
                     if(res.data.contentImg){
                         res.data.contentImg = JSON.parse(res.data.contentImg);
                         res.data.contentImg.forEach(function(value){
@@ -312,9 +297,11 @@
             //获取contentCategoryId数据源
             contentCategoryIdOptionsGet() {
                 var that = this;
-                ms.http.get(ms.manager+'/mdiy/dict/list.do', {}).then(function (data) {
-                    that.contentCategoryIdOptions = data.rows;
-                }).catch(function (err) {
+                ms.http.get(ms.manager+"/cms/category/list.do",{pageSize:9999}).then(function(res){
+                    if(res.result){
+                        that.contentCategoryIdOptions = ms.util.treeData(res.data.rows,'id','categoryId','children');
+                    }
+                }).catch(function(err){
                     console.log(err);
                 });
             },
@@ -363,4 +350,9 @@
             }
         }
     });
-</script>
+</script>
+<style>
+    .el-select{
+        width: 100%;
+    }
+</style>

src/main/webapp/WEB-INF/manager/cms/content/index.ftl

@@ -10,7 +10,9 @@
 <div id="index"  v-cloak>
 	<!--左侧-->
 	<el-container class="index-menu">
-		<div class="left-tree"></div>
+		<div class="left-tree">
+			<el-tree :indent="5" v-loading="loading" :expand-on-click-node="false" default-expand-all :empty-text="emptyText" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" style="padding: 10px;height: 100%;"></el-tree>
+		</div>
 		<iframe :src="action" class="ms-iframe-style">
 		</iframe>
 	</el-container>
@@ -22,11 +24,57 @@
 		el: "#index",
 		data: {
 			action:"", //跳转页面
+			defaultProps: {
+				children: 'children',
+				label: 'categoryTitle'
+			},
+			treeData:[],
+			loading:true,
+			emptyText:'',
 		},
 		methods:{
+			handleNodeClick: function(data){
+				this.$el.getElementsByTagName('iframe')[0].contentWindow.window.mainVue.form.contentCategoryId = data.id;
+				this.$el.getElementsByTagName('iframe')[0].contentWindow.window.mainVue.list();
+			},
+			treeList: function(){
+				var that = this;
+				this.loadState = false;
+				this.loading = true;
+				ms.http.get(ms.manager+"/cms/category/list.do").then(
+						function(res) {
+							if(that.loadState){
+								that.loading = false;
+							}else {
+								that.loadState = true
+							}
+							if (!res.result||res.data.total <= 0) {
+								that.emptyText = '暂无数据';
+								that.treeData = [];
+							} else {
+								that.emptyText = '';
+								that.treeData = ms.util.treeData(res.data.rows,'id','categoryId','children');
+								that.treeData = [{
+									id:0,
+									categoryTitle:'全部',
+									children: that.treeData,
+								}]
+							}
+						}).catch(function(err) {
+					console.log(err);
+				});
+				setTimeout(()=>{
+					if(that.loadState){
+						that.loading = false;
+					}else {
+						that.loadState = true
+					}
+				}, 500);
+			},
 		},
 		mounted(){
 			this.action = ms.manager +"/cms/content/main.do";
+			this.treeList();
 		}
 	})
 </script>

src/main/webapp/WEB-INF/manager/cms/content/main.ftl

@@ -46,9 +46,9 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="8" style="text-align: right;padding-right: 10px;">
-                        <el-button type="primary"size="mini" @click="$refs.search.open()"><i class="iconfont icon-shaixuan"></i>筛选</el-button>
                         <el-button type="primary" icon="el-icon-search" size="mini" @click="form.sqlWhere=null;currentPage=1;list()">查询</el-button>
                         <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
+                        <el-button type="primary"size="mini" @click="$refs.search.open()"><i class="iconfont icon-shaixuan"></i>筛选</el-button>
                     </el-col>
                 </el-row>
             </el-form>
@@ -60,17 +60,17 @@
                 {{emptyText}}
             </template>
             <el-table-column type="selection" width="40"></el-table-column>
-            <el-table-column label="所属栏目" align="left" prop="contentCategoryId" :formatter="contentCategoryIdFormat">
+            <el-table-column label="栏目名" align="left" prop="contentCategoryId" :formatter="contentCategoryIdFormat" width="100">
             </el-table-column>
             <el-table-column label="文章标题" align="left" prop="contentTitle">
             </el-table-column>
-            <el-table-column label="文章作者" align="left" prop="contentAuthor">
+            <el-table-column label="作者" align="left" prop="contentAuthor" width="100">
             </el-table-column>
-            <el-table-column label="自定义顺序" width="100" align="right" prop="contentSort">
+            <el-table-column label="排序" width="60" align="right" prop="contentSort">
             </el-table-column>
-            <el-table-column label="发布时间" width="180" align="center" prop="contentDatetime">
+            <el-table-column label="发布时间" align="center" prop="contentDatetime" width="120">
             </el-table-column>
-            <el-table-column label="操作" width="180" align="center">
+            <el-table-column label="操作" width="120" align="center">
                 <template slot-scope="scope">
                     <@shiro.hasPermission name="cms:content:update">
                         <el-link type="primary" :underline="false" @click="save(scope.row.id)">编辑</el-link>
@@ -137,6 +137,7 @@
                 contentTitle:null,
                 // 文章类型
                 contentType:null,
+                contentCategoryId:'',
             },
         },
         methods:{
@@ -280,9 +281,12 @@
             //获取contentCategoryId数据源
             contentCategoryIdOptionsGet() {
                 var that = this;
-                ms.http.get(ms.manager+'/mdiy/dict/list.do', {}).then(function (data) {
-                    that.contentCategoryIdOptions = data.rows;
-                }).catch(function (err) {
+                ms.http.get(ms.manager+"/cms/category/list.do",{pageSize:9999}).then(function(res){
+                    if(res.result){
+                        that.contentCategoryIdOptions = res.data.rows;
+                    }
+                    that.list();
+                }).catch(function(err){
                     console.log(err);
                 });
             },
@@ -299,12 +303,12 @@
         mounted(){
             this.contentCategoryIdOptionsGet();
             this.contentTypeOptionsGet();
+            this.form.contentCategoryId = ms.util.getParameter("categoryId")
             if(history.state){
                 this.form = history.state.form;
                 this.currentPage = history.state.page.pageNo;
                 this.pageSize = history.state.page.pageSize;
             }
-            this.list();
         },
     })
 </script>