hx
/
expo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							<!DOCTYPE html>
<html>
<head>
    <title>文章主体</title>
    <#include "../../include/head-file.ftl">
    <#include "../../include/increase-search.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 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="60" prop="id"></el-table-column>
            <el-table-column label="栏目名" align="left" prop="contentCategoryId" :formatter="contentCategoryIdFormat" width="100">
            </el-table-column>
            <el-table-column label="文章标题" align="left" prop="contentTitle" show-overflow-tooltip>
            </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="55" align="right" prop="contentHit">
                <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:{
            conditionList:[
                {action:'and', field: 'content_title', el: 'eq', model: 'contentTitle', name: '文章标题', type: 'input'},
                {action:'and', field: 'content_category_id', el: 'eq', model: 'contentCategoryId', name: '所属栏目', type: 'cascader', multiple: false},
                {action:'and', field: 'content_type', el: 'eq', model: 'contentType', name: '文章类型', type: 'checkbox', label: false, multiple: true},
                {action:'and', field: 'content_display', el: 'eq', model: 'contentDisplay', name: '是否显示', 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: '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: 'appid', el: 'eq', model: 'appid', name: '文章管理的应用id', type: 'number'},
                {action:'and', field: 'create_date', el: 'eq', model: 'createDate', name: '创建时间', type: 'date'},
                {action:'and', field: '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,
                contentCategoryId:'',
            },
        },
        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.length > 0){
                    form.contentType = form.contentType.join(',');
                }
                for (key in form){
                    if(!form[key]){
                        delete  form[key]
                    }
                }
                history.replaceState({form:form,page:page},"");
                ms.http.post(ms.manager+"/cms/content/list.do",form.sqlWhere?{
                    sqlWhere:form.sqlWhere,
                    ...page
                }:{...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;
                        }
                    }).catch(function(err) {
                    that.loading = false;
                    console.log(err);
                });
                setTimeout(()=>{
                    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(() => {
                    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({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //删除成功，刷新列表
                                that.list();
                            }
                        });
                }).catch(() => {
                    that.$notify({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            save:function(id){
                if(id){
                    location.href=this.manager+"/cms/content/form.do?id="+id;
                }else {
                    location.href=this.manager+"/cms/content/form.do?categoryId="+this.form.contentCategoryId;
                }
            },
            //表格数据转换
            contentCategoryIdFormat(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;
            },
            dateFormat: function(row, column, cellValue, index){
                if(cellValue){
                    return ms.util.date.fmt(cellValue,'yyyy-MM-dd');
                } else {
                    return ''
                }
            },
            contentDisplayFormat(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(data){
                this.form.sqlWhere = JSON.stringify(data);
                this.list();
            },
            //重置表单
            rest(){
                this.form.sqlWhere = null;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            //获取contentCategoryId数据源
            contentCategoryIdOptionsGet() {
                var that = this;
                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);
                });
            },
            //获取contentType数据源
            contentTypeOptionsGet() {
                var that = this;
                ms.http.get(ms.base+'/mdiy/dict/list.do', {dictType:'文章属性',pageSize:99999}).then(function (data) {
                    that.contentTypeOptions = data.rows;
                }).catch(function (err) {
                    console.log(err);
                });
            },
        },
        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;
            }
        },
    })
</script>
<style>
    #main .ms-search {
        padding: 20px 0 0;
    }
    #main .ms-container {
        height: calc(100vh - 141px);
    }
    body{
        overflow: hidden;
    }
</style>