<!-- 角色 列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <h4 class="c-title">角色列表</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="6.5em" @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="角色名称：" v-model="state.p.name"></in-input>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add()">添加</el-button>
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="角色id" prop="id" width="100px"></td-info>
                <td-info name="角色名称" prop="name"></td-info>
                <td-info name="责任描述" prop="info"></td-info>
                <td-info name="是否锁定">
                    <template #default="s">
                        <b v-if="s.row.isLock === 1" style="color: green;">已锁定</b>
                        <span v-else style="color: #777;">未锁定</span>
                    </template>
                </td-info>
                <td-info name="创建时间" prop="createTime" type="datetime"></td-info>
                <el-table-column label="操作" width="220px">
                    <template #default="s">
                        <el-link type="primary" @click="update(s.row)">修改</el-link> &nbsp;
                        <el-link type="primary" @click="del(s.row)">删除</el-link> &nbsp;
                        <el-link type="primary" @click="menuSetup(s.row)">分配权限</el-link>
                    </template>
                </el-table-column>

            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="role-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();


// ------------------ 查询条件 ------------------
const state = reactive({
    p: {
        name: '',   // 角色名称 
        pageNo: 1,  // 当前页
        pageSize: 100,   // 页大小 
    },
    dataCount: ref(0), // 数据总数 
    dataList: ref([]), // 数据表格 
})

// 组件加载时执行函数
onMounted(function () {
    f5();
})

// ------------------ 查找数据 ------------------
const f5 = function() {
    sa.ajax('/role/getList', state.p, function (res) {
        state.dataList = res.data;
        state.dataCount = res.data.length;
    })
};

// 增加 
const add = function () {
    sa.showModel('添加一个角色', import('./role-add.vue'));
}
// 修改
const update = function (data) {
    sa.showModel('修改角色信息', import('./role-add.vue'), { id: data.id });
};
// 删除
const del = function (data) {
    if (data.isLock === 1) {
        return sa.alertWarn('此角色是维持系统正常运行的重要角色，已被锁定，不可删除');
    }
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax('/role/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 检查选中的是否包含已经锁定的
    for (const item of selection) {
        if(item.isLock === 1) {
            return sa.msg('选择的数据中不能包含已锁定数据，请重新选择');
        }
    }
    // 提交删除
    sa.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/role/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 设置权限  
const menuSetup = function (data) {
    const title = '为 [ ' + data.name + ' ] 分配可访问的菜单、权限';
    sa.showModel(title, import('./menu-setup'), { btn: false, roleId: data.id });
}

defineExpose({f5})

</script>

<style scoped lang="scss">
.el-tag{border-radius: 0px;}
</style>
