hx
/
expo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
							<!DOCTYPE html>
<html>
<head>
    <title>文章主体</title>
    <#include "../../include/head-file.ftl">

</head>
<body>
<div id="main" class="ms-index" v-cloak>
    <ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>
    <el-header class="ms-header" height="50px">
        <el-col :span=12>
            <@shiro.hasPermission name="cms:content:save">
                <el-button v-if="leaf==true" type="primary" icon="el-icon-plus" size="mini" @click="save()">新增</el-button>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="cms:content:del">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(selectionList)"  :disabled="!selectionList.length">删除</el-button>
            </@shiro.hasPermission>
        </el-col>
    </el-header>
    <div class="ms-search">
        <el-row>
            <el-form :model="form"  ref="searchForm"  label-width="120px" size="mini">
                <el-row>
                    <el-col :span=8>
                        <el-form-item  label="文章标题" prop="contentTitle">
                            <el-input v-model="form.contentTitle"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入文章标题">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=8>
                        <el-form-item  label="文章类型" prop="contentType">
                            <el-select v-model="form.contentType"
                                       :style="{width: '100%'}"
                                       :filterable="false"
                                       :disabled="false"
                                       :multiple="true" :clearable="true"
                                       placeholder="请选择文章类型">
                                <el-option v-for='item in contentTypeOptions' :key="item.dictValue" :value="item.dictValue"
                                           :label="item.dictLabel"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=8 style="text-align: right;padding-right: 10px;">
                        <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>
        </el-row>
    </div>
    <el-main class="ms-container">
        <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <template slot="empty">
                {{emptyText}}
            </template>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="编号" width="200" prop="id">
                <template slot='header'>编号
                    <el-popover placement="top-start" title="提示" trigger="hover" >
                        标签：<a href="http://doc.mingsoft.net/mcms/biao-qian/wen-zhang-lie-biao-ms-arclist.html#%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8-msarclist" target="_blank">${'$'}{field.id}</a>
                        <i class="el-icon-question" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="栏目名" align="left" prop="categoryId" :formatter="contentCategoryIdFormat" width="180">
            </el-table-column>
            <el-table-column label="文章标题" align="left" prop="contentTitle" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="文章副标题" align="left" prop="contentShortTitle" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="文章链接" align="left" prop="categoryId" :formatter="contentCategoryPathFormat" width="240">
            </el-table-column>
            <el-table-column label="作者" align="left" prop="contentAuthor" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="排序" width="55" align="right" prop="contentSort">
            </el-table-column>
            <el-table-column label="点击量" width="90" align="right" prop="contentHit">
                <template slot='header'>点击量
                    <el-popover placement="top-start" title="提示" trigger="hover" >
                        标签：<a href="http://doc.mingsoft.net/mcms/biao-qian/wen-zhang-lie-biao-ms-arclist.html#%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8-msarclist" target="_blank">${'$'}{field.hit}</a>
                        <i class="el-icon-question" slot="reference"></i>
                    </el-popover>
                </template>
                <template slot-scope="scope">
                    {{scope.row.contentHit?scope.row.contentHit:0}}
                </template>
            </el-table-column>
            <el-table-column label="发布时间" align="center" prop="contentDatetime" :formatter="dateFormat" width="120">
            </el-table-column>
            <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>
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="cms:content:del">
                        <el-link type="primary" :underline="false" @click="del([scope.row])">删除</el-link>
                    </@shiro.hasPermission>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[10,20,30,40,50,100]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'
                @size-change="sizeChange">
        </el-pagination>
    </el-main>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#main',
        data: function () {
            return {
                conditionList: [{
                    action: 'and',
                    field: 'content_title',
                    el: 'eq',
                    model: 'contentTitle',
                    name: '文章标题',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'content_short_title',
                    el: 'eq',
                    model: 'contentShortTitle',
                    name: '文章副标题',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'category_id',
                    el: 'eq',
                    model: 'categoryId',
                    name: '所属栏目',
                    key: 'id',
                    title: 'categoryTitle',
                    type: 'cascader',
                    multiple: false
                }, {
                    action: 'and',
                    field: 'content_type',
                    el: 'eq',
                    model: 'contentType',
                    name: '文章类型',
                    key: 'dictValue',
                    title: 'dictLabel',
                    type: 'checkbox',
                    label: false,
                    multiple: true
                }, {
                    action: 'and',
                    field: 'content_display',
                    el: 'eq',
                    model: 'contentDisplay',
                    name: '是否显示',
                    key: 'value',
                    title: 'label',
                    type: 'radio',
                    label: true,
                    multiple: false
                }, {
                    action: 'and',
                    field: 'content_author',
                    el: 'eq',
                    model: 'contentAuthor',
                    name: '文章作者',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'content_source',
                    el: 'eq',
                    model: 'contentSource',
                    name: '文章来源',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'ct.content_datetime',
                    model: 'contentDatetime',
                    el: 'gt',
                    name: '发布时间',
                    type: 'date'
                }, {
                    action: 'and',
                    field: 'content_sort',
                    el: 'eq',
                    model: 'contentSort',
                    name: '自定义顺序',
                    type: 'number'
                }, {
                    action: 'and',
                    field: 'content_description',
                    el: 'eq',
                    model: 'contentDescription',
                    name: '描述',
                    type: 'textarea'
                }, {
                    action: 'and',
                    field: 'content_keyword',
                    el: 'eq',
                    model: 'contentKeyword',
                    name: '关键字',
                    type: 'textarea'
                }, {
                    action: 'and',
                    field: 'content_details',
                    el: 'like',
                    model: 'contentDetails',
                    name: '文章内容',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'content_url',
                    el: 'eq',
                    model: 'contentUrl',
                    name: '文章跳转链接地址',
                    type: 'input'
                }, {
                    action: 'and',
                    field: 'ct.create_date',
                    el: 'eq',
                    model: 'createDate',
                    name: '创建时间',
                    type: 'date'
                }, {
                    action: 'and',
                    field: 'ct.update_date',
                    el: 'eq',
                    model: 'updateDate',
                    name: '修改时间',
                    type: 'date'
                }],
                conditions: [],
                contentCategoryIdOptions: [],
                dataList: [],
                //文章列表
                selectionList: [],
                //文章列表选中
                total: 0,
                //总记录数量
                pageSize: 10,
                //页面数量
                currentPage: 1,
                //初始页
                manager: ms.manager,
                loadState: false,
                loading: true,
                //加载状态
                emptyText: '',
                //提示文字
                contentTypeOptions: [],
                contentDisplayOptions: [{
                    "value": "0",
                    "label": "是"
                }, {
                    "value": "1",
                    "label": "否"
                }],
                //搜索表单
                form: {
                    sqlWhere: null,
                    // 文章标题
                    contentTitle: null,
                    // 文章类型
                    contentType: null,
                    categoryId: ''
                },
                leaf: true
            }
        },
        methods: {
            //查询列表
            list: function () {
                var that = this;
                that.loading = true;
                that.loadState = false;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));

                if (form.contentType!=null && form.contentType.length > 0) {
                    form.contentType = form.contentType.join(',');
                }

                for (var key in form) {
                    if (!form[key]) {
                        delete form[key];
                    }
                }

                history.replaceState({
                    form: form,
                    page: page
                }, "");
                //筛选栏目类型，1=列表
                that.form.categoryType = '1';
                ms.http.post(ms.manager + "/cms/content/list.do", form.sqlWhere ? Object.assign({}, {
                    categoryType: '1',
                    sqlWhere: form.sqlWhere
                }, page) : Object.assign({}, form, page)).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    if (!res.result || res.data.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        that.total = res.data.total;
                        that.dataList = res.data.rows;
                    }
                }).finally(function () {
                    that.loading = false;
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //文章列表选中
            handleSelectionChange: function (val) {
                this.selectionList = val;
            },
            //删除
            del: function (row) {
                var that = this;
                that.$confirm('此操作将永久删除所选内容, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    ms.http.post(ms.manager + "/cms/content/delete.do", row.length ? row : [row], {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title:'成功',
                                type: 'success',
                                message: '删除成功!'
                            }); //删除成功，刷新列表

                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                })
            },
            //新增
            save: function (id) {
                //id有值时编辑
                if (id) {
                    // location.href = this.manager + "/cms/content/form.do?id=" + id;
                    ms.util.openSystemUrl("/cms/content/form.do?id=" + id);
                }else {
                    //根据当前栏目新增时自动选中栏目
                    var categoryId = this.form.categoryId;
                    if (categoryId) {
                        // location.href = this.manager + "/cms/content/form.do?categoryId=" + this.form.categoryId;
                        ms.util.openSystemUrl("/cms/content/form.do?categoryId=" + this.form.categoryId);
                    }else {
                        //如果栏目id没有值就单纯的新增，不自动选定栏目
                        // location.href = this.manager + "/cms/content/form.do";
                        ms.util.openSystemUrl("/cms/content/form.do");
                    }
                }
            },
            // 表格数据转换 id->name
            contentCategoryIdFormat: function (row, column, cellValue, index) {
                var value = "";

                if (cellValue) {
                    var data = this.contentCategoryIdOptions.find(function (value) {
                        return value.id == cellValue;
                    });

                    if (data && data.categoryTitle) {
                        value = data.categoryTitle;
                    }
                }

                return value;
            },
            // 表格数据转换 id->path
            contentCategoryPathFormat: function (row, column, cellValue, index) {
                var path = "";
                if (cellValue) {
                    var data = this.contentCategoryIdOptions.find(function (value) {
                        return value.id == cellValue;
                    });
                    if (data && data.categoryPath) {
                        // row.url /html/web/categoryPath/文章id.html categoryPath做占位符
                        if (data.categoryType === "2"){
                            path = row.url.replace("categoryPath/"+row.id,data.categoryPinyin+"/index");
                        }else {
                            path = row.url.replace("categoryPath",data.categoryPath);
                        }
                    }else {
                        path = row.url;
                    }
                }
                return path;
            },
            dateFormat: function (row, column, cellValue, index) {
                if (cellValue) {
                    return ms.util.date.fmt(cellValue, 'yyyy-MM-dd');
                } else {
                    return '';
                }
            },
            contentDisplayFormat: function (row, column, cellValue, index) {
                var value = "";

                if (cellValue) {
                    var data = this.contentDisplayOptions.find(function (value) {
                        return value.value == cellValue;
                    });

                    if (data && data.label) {
                        value = data.label;
                    }
                }

                return value;
            },
            //pageSize改变时会触发
            sizeChange: function (pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function (currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            search: function (data) {
                this.form.sqlWhere = JSON.stringify(data);
                this.list();
            },
            //重置表单
            rest: function () {
                this.form.sqlWhere = null;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            //获取contentCategoryId数据源
            contentCategoryIdOptionsGet: function () {
                var that = this;
                ms.http.get(ms.manager + "/cms/category/list.do").then(function (res) {
                    if (res.result) {
                        that.contentCategoryIdOptions = res.data.rows;
                    }else {
                        that.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'warning'
                        });
                    }

                    that.list();
                });
            },
            //获取contentType数据源
            contentTypeOptionsGet: function () {
                var that = this;
                ms.http.get(ms.base + '/mdiy/dict/list.do', {
                    dictType: '文章属性',
                    pageSize: 99999
                }).then(function (data) {
                    if(data.result){
                        data = data.data;
                        that.contentTypeOptions = data.rows;
                    }
                });
            }
        },
        mounted: function () {
            this.contentCategoryIdOptionsGet();
            this.contentTypeOptionsGet();
            this.form.categoryId = ms.util.getParameter("categoryId");
            this.leaf = ms.util.getParameter("leaf")==null?true:JSON.parse(ms.util.getParameter("leaf"));
            if (history.hasOwnProperty("state")) {
                this.form = history.state.form;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }
        }
    });
</script>
<style>
    #main .ms-search {
        padding: 20px 0 0;
    }
    #main .ms-container {
        height: calc(100vh - 141px);
    }
    #main  {
        height:  100vh
    }
    body{
        overflow: hidden;
    }
</style>