<#include "/incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<@header></@header>

<link rel="stylesheet" href="/adminlte/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <@top></@top>
    <@left></@left>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                角色管理
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content container-fluid" id="app">
            <div class="box-body">
                <!--查询区域-->
                <div class="query">
                    <el-form :inline="true" :model="con" class="demo-form-inline">
                        <el-form-item label="名称" :label-width="queryLabelWidth">
                            <el-input v-model="con.name" placeholder="名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadTable1()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--功能按钮区-->
                <div class="buttonDiv">
                    <el-button
                            size="mini" type="primary" class="pagination-but"
                            @click="table1Add">新增
                    </el-button>
                </div>
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column min-width="150px"
                                     label="名称"
                                     prop="name">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="code"
                                     prop="code">
                    </el-table-column>
                    <el-table-column label="操作" min-width="300px">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="table1Edit(scope.$index, scope.row)">修改
                            </el-button>
                            <el-button
                                    size="mini" type="danger"
                                    @click="table1Del(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="con.currentPage"
                            :page-sizes="[1,10, 50, 200, 500]"
                            :page-size="con.pageSize"
                            layout="total, sizes, prev, pager, next, jumper, slot"
                            :total="con.total">
                    </el-pagination>
                </div>
                <!--对话框1 新增-->
                <el-dialog title="新增" :visible.sync="dialog1Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="addData" status-icon :rules="rules" ref="dialog1">
                        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="addData.name" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="code" :label-width="formLabelWidth" prop="code">
                            <el-input v-model="addData.code" placeholder="请输入code"></el-input>
                        </el-form-item>
                        <el-form-item label=" " :label-width="formLabelWidth" style="max-height:200px;">
                            <!--树-->
                            <ul id="addTree" class="ztree"></ul>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog1Sub('dialog1')">提 交</el-button>
                        <el-button @click="dialog1Visible = false">取 消</el-button>
                    </div>
                </el-dialog>
                <!--对话框2 编辑-->
                <el-dialog title="编辑" :visible.sync="dialog2Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="editData" status-icon :rules="rules" ref="dialog2">
                        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="editData.name" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="code" :label-width="formLabelWidth" prop="code">
                            <el-input v-model="editData.code" placeholder="请输入code"></el-input>
                        </el-form-item>
                        <el-form-item label=" " :label-width="formLabelWidth" style="max-height:200px;">
                            <!--树-->
                            <ul id="editTree" class="ztree"></ul>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog2Sub('dialog2')">提 交</el-button>
                        <el-button @click="dialog2Visible = false">取 消</el-button>
                    </div>
                </el-dialog>


            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script type="text/javascript" src="/adminlte/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/adminlte/plugins/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    con: {currentPage: 1, pageSize: 10  , total: 0},//查询条件
                    tableData: [],//表1数据
                    dialog1Visible: false,//对话框隐藏
                    addData: {
                        name: '',
                        code: '',
                    },//新增数据模板
                    editData: {},//编辑数据
                    dialog2Visible: false,//编辑弹框隐藏
                    rules: {
                        name: [
                            {required: true, message: '请输入名称', trigger: 'change'}
                        ],
                        code: [
                            {required: true, message: '请输入code', trigger: 'change'}
                        ],
                    },//对话框1/2验证规则
                    baseUrl: '/role',//获取表1单个数据url
                }
            },
            mounted: function () {
                this.loadTable1();
            },
            methods: {
                ztreeInit(el,callback) {
                    let _this = this;
                    //初始化配置json
                    var setting = {
                        //异步加载ztree
                        async: {
                            enable: true,
                            url: "/permission/getAll",
                            dataFilter: filter
                        },
                        //开启复选框
                        check: {
                            enable: true,
                            chkStyle: "checkbox",
                            chkboxType: { "Y": "ps", "N": "ps" }
                        },
                        //
                        view: {
                            dblClickExpand: false,
                            showLine: true,
                            selectedMulti: false
                        },
                        //数据绑定配置
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "id",
                                pIdKey: "pid",
                                rootPId: "0"
                            }
                        },
                        //事件
                        callback: {
                            //用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
                            beforeClick: function (treeId, treeNode) {
                                console.log(1)
                                var zTree = $.fn.zTree.getZTreeObj(el);
                                if (treeNode.isParent) {
                                    zTree.expandNode(treeNode);//展开 / 折叠 指定的节点
                                    return true;
                                } else {
                                    return true;
                                }
                            }
                        }
                    };
                    //用于对 Ajax 返回数据进行预处理的函数
                    function filter(treeId, parentNode, childNodes) {
                        childNodes = childNodes.data;
                        $.each(childNodes, function (index, val) {
                            val.icon = undefined;
                            val.url = undefined;
                            val.open = val.pid === 0 ? true : false;
                        })
                        if (!childNodes) return null;
                        setTimeout(function () {
                            callback&&callback();
                        },0);
                        return childNodes;
                    }

                    var code;

                    //初始化
                    $.fn.zTree.init($("#" + el), setting);
                },
                //表1新增
                table1Add() {
                    let _this = this;
                    _this.dialog1Visible = true;
                    setTimeout(function () {
                        _this.ztreeInit('addTree');
                    }, 0);
                },
                //编辑
                table1Edit(index, row) {
                    let _this = this;
                    $.dyAjax(_this.baseUrl + '/get/' + row.id, {}, function (data) {
                        _this.editData = data;
                        _this.dialog2Visible = true;
                        console.log(data);
                        setTimeout(function () {
                            _this.ztreeInit('editTree',function () {
                                $.dyAjax(_this.baseUrl + '/selectByRoleId/' + row.id, {}, function (data) {
                                    console.log(data);
                                    $.each(data,function (index,val) {
                                        var treeObj = $.fn.zTree.getZTreeObj("editTree");
                                        var node = treeObj.getNodeByParam("id", val.permissionId, null);
                                        treeObj.checkNode(node, true, false);
                                    });
                                }, 'get');
                            });
                        }, 0);
                    }, 'get');

                },
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //对话框1提交事件
                dialog1Sub: function (formName) {
                    var _this = this;
                    console.log(this.addData);
                    let zTree = $.fn.zTree.getZTreeObj('addTree');
                    let nodes = zTree.getCheckedNodes(true);
                    console.log(nodes);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            _this.addData.pids = _this.getValueArrayByKey(nodes, 'id').join(',');
                            $.dyAjax(_this.baseUrl + '/addRole', _this.addData, function (data) {
                                console.log(data);
                                _this.loadTable1(function () {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog1Visible = false;
                                    _this.jsonClear(_this.addData);
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    $.dyAjax(_this.baseUrl + '/page', this.con, function (data) {
                        callback && callback(data);
                        console.log(data)
                        _this.tableData = data.list;
                        _this.con.total = data.total;
                        _this.con.currentPage = data.pageNum;
                        _this.con.pageSize = data.pageSize;
                    });
                },
                //删除
                table1Del: function (index, row) {
                    let _this = this;
                    console.log(row);
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax(_this.baseUrl + '/dels', {id: row.id}, function (data) {
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            });
                        });
                    }).catch(() => {
                    });
                },
                //对话框2 编辑提交事件
                dialog2Sub: function (formName) {
                    var _this = this;
                    console.log(this.editData);
                    let zTree = $.fn.zTree.getZTreeObj('editTree');
                    let nodes = zTree.getCheckedNodes(true);
                    console.log(nodes);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            _this.editData.pids = _this.getValueArrayByKey(nodes, 'id').join(',');
                            console.log(_this.editData);
                            $.dyAjax(_this.baseUrl + '/updateRole', _this.editData, function (data) {
                                _this.loadTable1(function () {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog2Visible = false;
                                    _this.jsonClear(_this.editData);
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>