<template>
    <div>
        <el-card class="el-card">
            <el-form
                :inline="true"
                :model="queryParams"
                size="mini"
            >
                <el-form-item label="名称">
                    <el-input
                        v-model="queryParams.name"
                        size="mini"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                        v-model="queryParams.status"
                        placeholder="状态"
                    >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            icon="el-icon-refresh"
                            @click="onReset"
                        ></el-button>
                        <el-button type="primary" icon="search" @click="onSubmit"
                        >查询
                        </el-button>
                        <el-button @click.native.stop="insert">新增</el-button>
                    </el-button-group>
                </el-form-item>

            </el-form>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
            >
                <el-table-column label="序号" type="index"/>
                <el-table-column label="名称" prop="name"/>
                <el-table-column label="编码" prop="code"/>
                <el-table-column label="排序" prop="sort"/>
                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        <span>{{ getStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" fixed="right" >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.stop="showRoleMenu(scope.row.id)">授权</el-button>
                        <el-button type="text" size="small" @click.native.stop="update(scope.row.id)">修改</el-button>
                        <el-button type="text" size="small" @click.native.stop="deleteRow(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page="queryParams.page"
                :page-size="queryParams.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible">
            <el-form :model="dialog.detail" label-position="left" label-width="100px">
                <el-form-item label="编码" prop="code">
                    <el-input v-model="dialog.detail.code"/>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dialog.detail.name"/>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="dialog.detail.sort" controls-position="right"  :min="1"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="dialog.detail.status" label="0">启用</el-radio>
                    <el-radio v-model="dialog.detail.status" label="1">禁用</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="授权" :visible.sync = "roleMenuDialog.visible">
            <el-tree
                :data="roleMenuDialog.detail"
                show-checkbox
                ref="menu"
                node-key="id"
                empty-text="暂无数据"
                :default-checked-keys="roleMenuDialog.checkKeys"
                :props="roleMenuDialog.defaultProps"
            ></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleMenuDialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="saveRoleMenu">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {GetList, Insert, Update, Detail, Delete,GetRoleMenu,SaveRoleMenu} from "@/api/sys/sysRole";
export default {
    name: "sysRole",
    data(){
        return{
            loading: false,
            list: [],
            total: 0,
            statusOptions: [{value: "", label: "全部"},{value: "0", label: "启用"}, {value: "1", label: "禁用"}],
            queryParams: {
                page: 1,
                limit: 10,
                name: "",
                status:""
            },
            dialog: {
                visible: false,
                title: "新增",
                detail: {}
            },
            roleMenuDialog:{
                visible: false,
                detail:{},
                roleId:0,
                checkKeys:[],
                defaultProps: {
                    children: "children",
                    label: "name"
                },
            }
        }
    },
    created() {
        this.getList();
    },
    methods:{
        getList(){
            this.loading = true;
            GetList(this.queryParams).then(res=>{
                this.list = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        handleCurrentChange(val) {
            this.queryParams.page = val;
            this.getList();
        },
        getStatus(status) {
            return this.selectDictLabel(this.statusOptions, status);
        },
        onReset() {
            this.$router.push({
                path: "",
            });
            this.queryParams = {
                page: 1,
                limit: 10,
                name: "",
                status:""
            };
            this.getList();
        },
        onSubmit() {
            this.queryParams.page = 1;
            this.getList();
        },
        formRest() {
            this.dialog.detail = {
                id: 0,
                name: "",
                code: "",
                status: "0",
                sort:1,

            }
        },
        insert() {
            this.formRest();
            this.dialog.title = "新增";
            this.dialog.visible = true;
        },
        update(id) {
            this.formRest();
            this.dialog.title="修改";
            Detail(id).then(res=>{
                this.dialog.detail = res.data;
                this.dialog.visible = true;
            })
        },
        save() {
            let id = this.dialog.detail.id;
            if(id>0){
                Update(this.dialog.detail).then(res=>{
                    if(res.code == 20000){
                        this.$message.success("修改成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }

                })
            }else{
                Insert(this.dialog.detail).then(res => {
                    if(res.code == 20000){
                        this.$message.success("新增成功！");
                        this.dialog.visible = false;
                        this.getList();
                    }
                })
            }
        },
        deleteRow(id){
            let _this=this;
            this.$confirm("确定删除该行数据，删除后将不可恢复?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    Delete(id).then(result => {
                        if(result.code == 20000){
                            _this.$message.success("删除成功！");
                            _this.getList();
                        }
                    })

                })
                .catch(() => {
                    _this.$message({
                        type: 'error',
                        message:"发生错误！"
                    });
                });


        },
        showRoleMenu(roleId){
            this.roleMenuDialog.roleId = roleId;
            GetRoleMenu(roleId).then(result => {
                this.roleMenuDialog.detail = result.data.menuTrees;
                this.roleMenuDialog.checkKeys = result.data.roleMenuIds;
                this.roleMenuDialog.visible = true;
                //this.$refs.menu.setCheckedKeys(result.data.roleMenuIds);

            })
        },
        saveRoleMenu(){
            let param={roleId:this.roleMenuDialog.roleId,menuIds:this.getMenuAllCheckedKeys()};
            SaveRoleMenu(param).then(result => {
                if(result.code == 20000){
                    this.$message.success("修改成功！");
                    this.roleMenuDialog.visible = false;
                    this.getList();
                }
            })
        },
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
            // 半选中的菜单节点
            let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys;
        },
    }
}
</script>

<style scoped>

</style>
