platformFront/src/components/RuleManager/RuleApply.vue

<template>
    <div>
        <crumbs title="规则应用维护">
            <el-form :inline="true">
                <el-form-item>
                    <el-button size="mini" :type="reloadFlag?'danger':'info'"  @click="addToCache" style="margin:0 10px">加载</el-button>
                </el-form-item>
                <el-form-item label="规则id：">
                    <el-input size="mini" v-model="filter.ruleId" placeholder="请输入规则id" clearable></el-input>
                </el-form-item>
                <!--<el-form-item label="规则类型：">
                    <el-select v-model="filter.typeId"
                               placeholder="请选择"
                               :disabled="true"
                               size="small">
                        <el-option
                                v-for="item in ruleTypeList"
                                :key="String(item.key)"
                                :label="item.name"
                                :value="String(item.key)">
                        </el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="规则信息：">
                    <el-input size="mini" v-model="filter.remind" placeholder="请输入规则信息" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="filterDatas">确认</el-button>
                    <el-button size="mini" type="warning" @click="addRuleApply">添加规则应用</el-button>
                </el-form-item>
            </el-form>
        </crumbs>
        <div class="contents">
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <el-table-column
                        :resizable = "false"
                        prop="gmtModified"
                        label="修改时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="ruleId"
                        label="规则ID">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="typeIdName"
                        label="规则类型">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="remind"
                        label="规则信息">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="operate"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button  @click="modifyRuleApply(scope.row)" type="text" size="small">修改</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button @click="showDelDialog(scope.row.id)" class="delete" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="currentPage"
                           @current-change="currentChange"
                           background
                           :page-size="pageSize"
                           :page-sizes="pageSizeArr"
                           @size-change="handleSizeChange"
                           :layout="pageLayout"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import api from '@api/rulesManage.js';
    import config from '@api/config.js';
    import utils from '@api/utils.js';

    export default {
        name: 'RulesApply',
        data: function() {
            return {
                list: [],
                reloadFlag:true,
                ruleTypeList: [],
                searched:false,
                filter: {
                    ruleId:'',//规则ID
                    remind:'',      //规则信息
                    typeId:'2'
                },
                currentPage: 1,
                pageSize: config.pageSize,
                pageSizeArr:config.pageSizeArr,
                pageLayout:config.pageLayout,
                total: 0,
            }
        },
        created() {
            this.getTypesList();
        },
        watch:{
            'filter':{
                handler:function(){
                    this.searched = false;
                },
                deep:true
            }
        },
        beforeRouteEnter(to, from, next){
            next(vm => {
                //const pm = to.param;
                Object.assign(vm,to.params);
                vm.inCurrentPage=to.params.currentPage;
            })
        },
        methods: {
            addToCache(){
                if(this.reloadFlag){
                    this.reloadFlag = false;
                    api.reloadLib().then((res)=>{
                        if (res.data.code == 0) {
                            this.reloadFlag = true;
                        }
                    })
                }
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.currentPage = utils.getCurrentPage(this.currentPage, this.total, this.pageSize);
                this.getDataList();
            },
            getTypesList() {
                let typeList = JSON.parse(localStorage.getItem("knowledgeEnumsData"));
                if(!typeList) {
                    api.getTypesList().then((res) => {
                        if (res.data.code === '0') {
                            const data = res.data.data;
                            localStorage.setItem('knowledgeEnumsData', JSON.stringify(data));
                            this.ruleTypeList = res.data.data.ruleAppTypeEnum;
                        }
                    })
                }else{
                    let typeList = JSON.parse(localStorage.getItem("knowledgeEnumsData"));
                    this.ruleTypeList = typeList.ruleAppTypeEnum;
                }
                this.getDataList();
            },
            getDataList(isTurnPage) {
                const param = this.getFilterItems(isTurnPage);
                this.searched = true;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                api.getRulesApplyList(param).then((res) => {
                    loading.close()
                    const list = [...res.data.data.records];
                    this.list = list;
                    this.total = res.data.data.total;
                    if(this.inCurrentPage!==undefined){
                        this.currentPage=this.inCurrentPage;
                        this.inCurrentPage = undefined;
                    }
                })
            },
            filterDatas() {
                this.currentPage = 1;
                this.getDataList();
            },
            addRuleApply() {
                const pam = this.searched?{currentPage:this.currentPage,
                    pageSize:this.pageSize,
                    filter:this.filter}:{currentPage:this.currentPage,
                    pageSize:this.pageSize};
                this.$router.push({name:'AddRuleApply',
                    params:pam})
            },
            modifyRuleApply(row) {
                api.ruleApplyDetail({id:row.id}).then((res)=>{
                    const {code,data,msg} = res.data;
                    if(code=='0'){
                        const item = Object.assign({},row,data);
                        const pam = this.searched?{currentPage:this.currentPage,
                            pageSize:this.pageSize,
                            filter:this.filter}:{currentPage:this.currentPage,
                            pageSize:this.pageSize};
                        this.$router.push({name:'AddRuleApply',params:Object.assign(pam,{isEdit:true,data:item})});
                    }else{
                        this.$message({
                            message: msg,
                            type: 'warning'
                        });
                    }
                });
            },
            currentChange(next) {
                this.currentPage = next;
                this.getDataList(true);
            },
            clearFilter(){
                this.filter = {
                    ruleId:'',//规则ID
                    remind:'',
                    typeId:'2'
                }
            },
            getFilterItems(isTurnPage) {
                //翻页时筛选条件没点确定则清空
                if(isTurnPage&&!this.searched){
                    this.clearFilter();
                };
                const param = {
                    remind:this.filter.remind,
                    ruleId:this.filter.ruleId,
                    typeId:this.filter.typeId,
                    current: this.inCurrentPage||this.currentPage,
                    size: this.pageSize,
                };
                return param;
            },
            indexMethod(index) {
                return ((this.currentPage - 1) * this.pageSize) + index + 1;
            },
            warning(msg,type){
                this.$message({
                    showClose: true,
                    message:msg,
                    type:type||'warning'
                })
            },
            showConfirmDialog(msg,resolve){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    resolve();
                }).catch(() => {});
            },
            showDelDialog(id){
                const param = {
                    "id": id
                };
                this.showConfirmDialog('是否删除该规则应用？',()=>{
                    api.deleteRuleApply(param).then((res)=>{
                        if(res.data.code=='0'){
                            if(!this.searched){
                                //未点确认时清空搜索条件
                                this.clearFilter();
                            }
                            if(this.list.length==1){
                                //当前在最后一页且只有一条数据时，删除后跳到前一页
                                this.currentPage = this.currentPage===1?1:this.currentPage-1;
                            }
                            this.getDataList();
                            this.warning(res.data.msg || '操作成功','success');
                        }else{
                            this.warning(res.data.msg);
                        }
                    }).catch((error)=>{
                        this.warning(error);
                    })
                });
            }
        }
    }
</script>


<style lang="less">
    @import "../../less/admin.less";
    .delete{
        color: red
    }
    .delete:hover {
        color: red;
    }
    .el-select .el-input .el-icon-arrow-up{
        display: inline-block!important;
    }
    .el-select .el-input .el-icon-circle-close{
        float:left;
    }
    .container.simpleQ-crumb{
        height:90px!important;
    }
    .simpleQ-crumb .contents{
        max-width: 870px;
        text-align: right;
    }
    .contents.simpleQ-contents{
        padding-top:120px;
    }
    .simpleQ-crumb .el-form--inline .el-form-item{
        margin-bottom: 0;
    }
</style>