platformFront/src/components/RuleManager/RulesManager.vue

<template>
    <div>
        <crumbs title="规则维护">
            <el-form :inline="true">
                <el-form-item label="id：">
                    <el-input size="mini" v-model="filter.id" placeholder="请输入id" clearable></el-input>
                </el-form-item>
                <el-form-item label="规则名：">
                    <el-input size="mini" v-model="filter.pubName" 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="addRule">添加规则</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="id"
                        label="id">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="pubName"
                        label="规则名">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="minOperator"
                        label="最小值操作符"
                        width="180">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="minValue"
                        label="最小值">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="minUnit"
                        label="最小值单位">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="maxOperator"
                        label="最大值操作符"
                        width="80">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="maxValue"
                        label="最大值">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="maxUnit"
                        label="最大值单位">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="eqOperator"
                        label="等于操作符">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="eqValue"
                        label="等于值">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="eqUnit"
                        label="等于值单位">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="remind"
                        label="备注">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="suffixInfo"
                        label="文本后缀">
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="operate"
                        label="操作"
                        width="140">
                    <template slot-scope="scope">
                        <el-button  @click="modifyRule(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: 'RulesManager',
        data: function() {
            return {
                list: [],
                searched:false,
                filter: {
                    pubName:'',      //规则名
                    id:''
                },
                currentPage: 1,
                pageSize: config.pageSize,
                pageSizeArr:config.pageSizeArr,
                pageLayout:config.pageLayout,
                total: 0,
            }
        },
        created() {
           this.getDataList();
        },
        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: {
            handleSizeChange(val){
                this.pageSize = val;
                this.currentPage = utils.getCurrentPage(this.currentPage, this.total, this.pageSize);
                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.getRulesList(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();
            },
            addRule() {
                const pam = this.searched?{currentPage:this.currentPage,
                    pageSize:this.pageSize,
                    filter:this.filter}:{currentPage:this.currentPage,
                    pageSize:this.pageSize};
                this.$router.push({name:'AddRule',
                    params:pam})
            },
            modifyRule(row) {
                api.ruleDetail({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:'AddRule',params:Object.assign(pam,{isEdit:true,data:item})});
                    }else{
                        this.$message({
                            message: msg,
                            type: 'warning'
                        });
                    }
                });
                //this.$router.push({name:'AddIndeptLabel',params:{isEdit:true,data:row}});
            },
            currentChange(next) {
                this.currentPage = next;
                this.getDataList(true);
                // if (this.cacheData[next]) {       //如果已请求过该页数据，则使用缓存不重复请求
                //     this.list = this.cacheData[next];
                // } else {
                //     this.getDataList();
                // }
            },
            clearFilter(){
                this.filter = {
                    pubName:'',      //规则名
                    id:''
                }
            },
            getFilterItems(isTurnPage) {
                //翻页时筛选条件没点确定则清空
                if(isTurnPage&&!this.searched){
                    this.clearFilter();
                };
                const param = {
                    current: this.inCurrentPage||this.currentPage,
                    size: this.pageSize,
                    pubName:this.filter.pubName.trim(),
                    id:this.filter.id.trim(),
                };
                return param;
            },
            indexMethod(index) {
                return ((this.currentPage - 1) * this.pageSize) + index + 1;
            },
            getTagType(val) {
                return val
            },
            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.deleteRule(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;
    }
</style>