src/main/resources/templates/system/dictionary.html

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">数据字典管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#">集控中心</a>
          <a><cite>数据字典管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div id="dictionary">
            <el-form :inline="true" ref="dictionary" :model="dictionary" data-parsley-validate class="form-horizontal form-label-left">
                <div class="col-md-3" >
                    <div class="form-group">
                        <label class="control-label col-md-5 col-sm-12 col-xs-12" style="font-size: 14px;">字典类型:</label>
                        <div class="col-md-7 col-sm-12 col-xs-12">
                            <el-select style="width:193px"
                                       v-model="dicttype" placeholder="请选择"
                            > <el-option v-for="item in tlist"
                                         :key="item.value" :label="item.label" :value="item.value">
                            </el-option> </el-select>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label col-md-5 col-sm-12 col-xs-12"
                               style="font-size: 14px;">字典名称:</span>
                        </label>
                        <div class="col-md-7 col-sm-12 col-xs-12">
                            <el-input v-model="dictcaption" id="dictcaption"></el-input>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <button type="button" class="btn btn-info" @click="query" id="qrybtn">查 询</button>
                        <button class="btn btn-primary" type="button" @click="addDict">添加</button>
                    </div>
                </div>
            </el-form>

            <template>
                <el-table
                        ref="singleTable"
                        :data="tableData"
                        highlight-current-row
                        @current-change="currRowChange"
                        stripe
                        border
                >
                    <el-table-column
                            prop="id.dicttype"
                            label="字典编号"
                            width="160"
                            v-show="false">
                    </el-table-column>
                    <el-table-column
                            prop="id.dicttypename"
                            label="字典类型名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="id.dictval"
                            label="字典值"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="id.dictcaption"
                            label="字典名称">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="150">
                        <template scope="scope">
                            <button type="button"
                                    class="btn btn-info btn-xs"
                                    title="编辑" @click="editDict(scope.row.id.dicttype,scope.row.id.dicttypename,scope.row.id.dictval,scope.row.id.dictcaption)">编辑</button>
                            <button type="button"
                                    class="btn btn-primary btn-xs"
                                    title="添加" @click="additionalDict(scope.row.id.dicttype,scope.row.id.dicttypename)">添加</button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="clearfix"></div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="currPageChange"
                        :current-page="currPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="prev, pager, next,sizes, jumper,total"
                        :total="totSize">
                </el-pagination>
            </template>

            <el-dialog :title="opertitle" :visible.sync="dialogFormVisible" size="tiny">
                <el-form ref="dict" :model="dict" :rules="rules" label-width="120px">
                    <el-form-item label="字典编号:" prop="dicttype">
                        <el-col :span="22">
                            <el-input v-model="dict.dicttype" id="dicttype"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="字典类型名称:">
                        <el-col :span="22">
                            <el-input v-model="dict.dicttypename" id="dicttypename"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="字典值:" prop="dictval">
                        <el-col :span="22">
                            <el-input v-model="dict.dictval"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="字典名称:" prop="dictcaption">
                        <el-col :span="22">
                            <el-input v-model="dict.dictcaption"></el-input>
                        </el-col>
                    </el-form-item>


                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resetForm() ">取 消</el-button>
                    <el-button type="primary" @click="saveDict(dict)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    var vue = new Vue({
        el: '#dictionary',
        data:{
            tableData: [],
            currPage: 1,
            pageSize:10,
            totSize:0,
            currentRow: null,
            dicttype:'all',
            tlist:[],
            oriengal:[],
            ulist:[],
            dictcaption:'',
            dialogFormVisible: false,
            opertitle:'',
            dict:{
                dicttype:'',
                dicttypename:'',
                dictcaption:'',
                dictval:'',
            },

            rules: {
                dictval: [
                    { required: true, message: '字典值不能为空', trigger: 'blur' },
                ],
                dicttype:[
                    { required: true, message: '字典编号不能为空', trigger: 'blur' },
                ]
            },

        },
        methods: {
            handleSizeChange:function(val) {
                this.pageSize=val;
                commonQuery(this,this.dicttype,this.dictcaption,this.currPage,val);
            },
            currPageChange:function(val) {
                this.currPage=val;
                commonQuery(this,this.dicttype,this.dictcaption,this.currPage,this.pageSize);
            },
            currRowChange:function(val) {
                this.currentRow = val;
            },
            query:function () {
                this.pagesize=10;
                this.currPage=1;
                commonQuery(this,this.dicttype,this.dictcaption,this.currPage,this.pageSize);
            },
            addDict:function () {
                disableSwitch(0);
                this.dialogFormVisible = true;
                this.opertitle="添加字典 ";
            },
            resetForm:function() {
                ResetForm(this);
                this.dialogFormVisible = false
                this.dialogFormVisible2 = false
            },

            saveDict:function (dict) {
                if(this.opertitle=='字典修改'){
                    updateData(dict,this.oriengal);
                }else if(this.opertitle=='添加字典 '){
                    saveData(dict);
                }else{
                    saveAdditionalData(dict);
                }
            },

            additionalDict:function(id,name){
                disableSwitch(1);
                this.dict.dicttype=id;
                this.dict.dicttypename=name;
                this.opertitle="添加字典";
                this.dialogFormVisible = true;

            },
            editDict:function (id,name,val,caption) {
                disableSwitch(1);
                this.dict.dictval=val;
                this.dict.dictcaption=caption;
                this.dict.dicttype=id;
                this.dict.dicttypename=name;
                this.oriengal=[id,val];
                this.dialogFormVisible = true;
                this.opertitle="字典修改"
            },
            gettype:function(type){
                var ulist=this.ulist;
                for(var i=0;i<ulist.length;i++){
                    if(type==ulist[i].value){
                        this.dict.dicttypename=ulist[i].label;
                    }
                }
            }
        },
        created:function(){
            var _self=this;
            $.ajax({
                type:"get",
                dataType:"json",
                url:"[[@{/system/getDictionary}]]",
                success:function(ret){
                    _self.totSize=ret.pageResult.totalCount;
                    _self.tableData=ret.pageResult.list;
                }
            })
            fillSelect(_self);
        }
    })

    function commonQuery(_self,dicttype,dictcaption,pageno,pagesize) {
        $.ajax({
            type:"get",
            dataType:"json",
            url:encodeURI("[[@{/system/getDictionary?dicttype=}]]"
                +dicttype+"&dictcaption="+dictcaption
                +"&pageNo="+pageno+"&pageSize="+pagesize),
            success:function(ret){
                _self.totSize=ret.pageResult.totalCount;
                _self.tableData=ret.pageResult.list;
            }
        })
    }

    function saveData(dict) {
        var tlist=vue.tlist;


        $.ajax({
            type: "get",
            dataType: "json",
            url: encodeURI("[[@{/system/saveDictionary?dicttype=}]]"+dict.dicttype
                +"&dicttypename="+dict.dicttypename+"&dictval="+dict.dictval+"&dictcaption="+dict.dictcaption),

            success: function (data) {
                if(data.errStr == undefined){
                    layer.msg('用户认证已过期，请重新登录', {icon: 2,time:1000});
                    window.location="login";
                    return ;
                };
                if (data.errStr != "") {
                    layer.msg(data.errStr, {icon: 2,time:1000});
                } else {
                    layer.msg('保存成功!', {icon: 1,time:1000});
                    refreshThisTable();
                    vue.dialogFormVisible = false
                }
            }
        });
    }
    function updateData(dict,oriengal) {
        $.ajax({
            type: "get",
            dataType: "json",
            url: encodeURI("[[@{/system/updateDictionary?dicttype=}]]"+dict.dicttype
                +"&dicttypename="+dict.dicttypename+"&dictval="+dict.dictval+"&dictcaption="+dict.dictcaption
                +"&oriengaltype="+oriengal[0]+"&oriengalval="+oriengal[1]),

            success: function (data) {
                if(data.errStr == undefined){
                    layer.msg('用户认证已过期，请重新登录', {icon: 2,time:1000});
                    window.location="login";
                    return ;
                };
                if (data.errStr != "") {
                    layer.msg(data.errStr, {icon: 2,time:1000});
                } else {
                    layer.msg('修改成功!', {icon: 1,time:1000});
                    refreshThisTable();
                    vue.dialogFormVisible = false
                }
            }
        });
    }

    function saveAdditionalData(dict){
        $.ajax({
            type: "get",
            dataType: "json",
            url: encodeURI("[[@{/system/saveDictionary?dicttype=}]]"+dict.dicttype
                +"&dicttypename="+dict.dicttypename+"&dictval="+dict.dictval+"&dictcaption="+dict.dictcaption),

            success: function (data) {
                if(data.errStr == undefined){
                    layer.msg('用户认证已过期，请重新登录', {icon: 2,time:1000});
                    window.location="login";
                    return ;
                };
                if (data.errStr != "") {
                    layer.msg(data.errStr, {icon: 2,time:1000});
                } else {
                    layer.msg('添加成功!', {icon: 1,time:1000});
                    refreshThisTable();
                    vue.dialogFormVisible = false
                }
            }
        });
    }
    function ResetForm(_self){
        _self.$refs.dict.resetFields();
        _self.dict.dicttypename='';
        _self.dict.dicttype='';
        _self.dict.dictval='';
        _self.dict.dictcaption=caption='';
    }
    function refreshThisTable(){
        $("#qrybtn").click();
        ResetForm(vue);
        fillSelect(vue);
    };

    function fillSelect(_self){
        $.ajax({
            type : "get",
            dataType : "json",
            url : encodeURI("[[@{/system/getDictionaryType}]]"),
            success : function(ret) {
                var tlist = [];
                var ulist=[];
                var allDictId = ret.DictId;
                if (allDictId != null) {
                    tlist.push({
                        value : "all",
                        label : "全部",
                        "selected" : true
                    })
                }
                for (var i = 0; i < allDictId.length; i++) {
                    tlist.push({
                        value : allDictId[i].dicttype,
                        label : allDictId[i].dicttypename
                    });
                    ulist.push({
                        value : allDictId[i].dicttype,
                        label : allDictId[i].dicttypename
                    });
                }
                _self.tlist = tlist;
                _self.ulist = ulist;
            }
        })
    }
    function disableSwitch(n){
        if(n==1){
            $.ajax({
                success:function(ret){
                    $('#dicttype').children()[0].setAttribute("disabled", "disabled");
                    $('#dicttypename').children()[0].setAttribute("disabled", "disabled");
                }
            })
        }else{
            $.ajax({
                success:function(ret){
                    $('#dicttype').children()[0].removeAttribute("disabled");
                    $('#dicttypename').children()[0].removeAttribute("disabled");
                }
            })
        }
    }

</script>