project-manager/h5/src/views/admin/role/index.vue

<template>
    <Edit v-model="showCodesEditForm" :role="editRole"></Edit>
    <div>
        <el-card class="box-card" v-loading="wholeLoading" element-loading-text="Loading..." style="height: 600px">
            <template #header>
                <div class="card-header">
                    <span>权限管理</span>
                    <div>
                        <el-button type="default" @click="reflush()">刷新列表</el-button>
                        <el-button type="primary" @click="create()">新增角色</el-button>
                    </div>
                </div>
            </template>
            <el-auto-resizer>
                <template #default="{ height, width }">
                    <el-table-v2 :data="data" :columns="columns" :width="width" :height="600" fixed />
                </template>
            </el-auto-resizer>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="underlyingRoleManage">
import { ref, reactive, onMounted, h } from 'vue'
import { ElSwitch, ElTag, ElMessage, ElMessageBox, ElButton, TableV2FixedDir, roleTypes } from 'element-plus'
import type { Column, RowClassNameGetter } from 'element-plus'
import { throttle } from 'lodash'
import { init, update } from '/@/api/role'
import type { Role } from '/@/api/role'
import Edit from '/@/components/role/edit.vue'

/**
 * 表格数据
 */
const data = await init()
/**
 * 整个页面的loading
 */
const wholeLoading = ref(false)
/**
 * 编辑权限表单的显示控制
 */
const showCodesEditForm = ref(false)

const editRole = ref<Role>()

/**
 * 虚拟表格列信息
 */
const columns: Column<any>[] = [
    {
        key: 'name',
        title: '角色名',
        dataKey: 'name',
        width: 150,
    },
    {
        key: 'codes_cn',
        title: '权限值',
        dataKey: 'codes_cn',
        width: 400,
        cellRenderer: ({ cellData: codes_cn }) => h(
            'div',
            codes_cn?.map(cn => h(ElTag, { style: { 'margin-right': '5px' } }, cn))
        ),
    },
    {
        key: 'remark',
        title: '备注',
        dataKey: 'remark',
        width: 300,
    },
    {
        key: 'valid',
        title: '是否启用',
        dataKey: 'valid',
        width: 100,
        cellRenderer: ({ cellData: valid }) => h(
            ElTag,
            { effect: valid ? 'dark' : 'plain' }, valid ? '已启用' : '已禁用'
        ),
    },
    {
        key: 'op',
        title: '操作',
        width: 400,
        fixed: TableV2FixedDir.RIGHT,
        flexGrow: 1,
        cellRenderer: ({ rowData: row }) =>
            h('div', [
                // 启用禁用
                h(
                    ElButton,
                    {
                        type: row.valid ? 'danger' : 'success',
                        onClick: throttle(() => {
                            row.valid = !row.valid
                            update(row)
                        }),
                    },
                    row.valid ? '禁用' : '启用'
                ),
                // 打开权限表单
                h(
                    ElButton,
                    {
                        type: 'primary',
                        onClick: throttle(() => {
                            showCodesEditForm.value = true
                            console.log(showCodesEditForm)
                            editRole.value = row
                        }),
                    },
                    '权限'
                ),
            ]),
    },
]

/**
 * 创建
 */
const create = () => { }
/**
 * 刷新
 */
const reflush = () => { }
</script>

<style lang="scss" scoped>
.box-card {
    margin: 10px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
}
</style>