vue-vben-admin/src/components/ProcessDesigner/package/penal/auth/index.vue

<template>
    <div class="auth-config">
        <a-tabs v-model:activeKey="authType" type="card" size="small">
            <a-tab-pane key="1" tab="所有成员">
                <a-alert message="权限说明" description="所有人员指不限制流程模版的发起人员，表示每个人都能发起该流程模版。" type="info" show-icon />
            </a-tab-pane>
            <a-tab-pane key="2" tab="指定成员">
                <a-space>
                    <a-radio-group>
                        <a-radio-button value="1" @click="handlePostClick">岗位</a-radio-button>
                        <a-radio-button value="2" @click="handleRoleClick">角色</a-radio-button>
                        <a-radio-button value="3" @click="handleAccountClick">用户</a-radio-button>
                    </a-radio-group>
                    <a-button danger :size="size">清空</a-button>
                </a-space>
                <a-table size="small" :columns="columns" :data-source="dataSource" bordered :pagination="false">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="['name'].includes(column.dataIndex)">
                            <div>
                                {{ text }}
                            </div>
                        </template>
                        <template v-else-if="[ 'type'].includes(column.dataIndex)">
                            <div>
                                {{ typeFormat(text) }}
                            </div>
                        </template>
                        <template v-else-if="column.dataIndex === 'operation'">
                            <a-popconfirm v-if="dataSource.length" title="确定要删除吗？"
                                @confirm="onDelete(record.name)">
                                <delete-outlined two-tone-color='#eb2f96' />
                            </a-popconfirm>
                        </template>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
        <a-modal width="60%" v-model:open="data.postOpen" title="添加岗位" @ok="postHandleOk">
            <SelectPos ref="posRef"></SelectPos>
        </a-modal>
        <a-modal width="60%" v-model:open="data.roleOpen" title="添加角色" @ok="roleHandleOk">
            <SelectRole ref="roleRef"></SelectRole>
        </a-modal>
        <a-modal width="60%" v-model:open="data.accountOpen" title="添加角色" @ok="accountHandleOk">
            <SelectAccount ref="accountRef"></SelectAccount>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted, nextTick, unref } from 'vue';
    let authType = ref("1")
    import { cloneDeep } from 'lodash-es';
    import type { UnwrapRef } from 'vue';
    import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
    import SelectPos from '@/components/SelectPos/index.vue';
    import SelectRole from '@/components/SelectRole/index.vue';
    import SelectAccount from '@/components/SelectAccount/index.vue';
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '类型',
            dataIndex: 'type',
        },
        {
            title: '操作',
            dataIndex: 'operation',
        },

    ];
    let dataSource = ref([])
    const data = reactive({
        postOpen: false,
        roleOpen: false,
        accountOpen: false,
    })
    function typeFormat(type) {
        type=type.toString()
        switch (type) {
            case '1':
                return '岗位'
            case '2':
                return '角色'
            case '3':
                return '用户'
            case '4':
                return '上下级'
            case '5':
                return '节点'
            case '6':
                return '表字段'
        }
    }
    function addTableData(selectData) {
        let addData = selectData.filter(t => dataSource.value.findIndex(t2 => t2.id == t.id) == -1);
        dataSource.value = dataSource.value.concat(addData);
    }
    // 岗位
    const posRef = ref < any > ()

    function handlePostClick() {
        data.postOpen = true;
    }
    function postHandleOk() {
        let selectData = posRef.value.getRow().map(t => {
            return { type: '1', id: t.id, name: t.name }
        });
        addTableData(selectData);
        data.postOpen = false;
    }
    // 角色
    const roleRef = ref < any > ()

    function handleRoleClick() {
        data.roleOpen = true;
    }
    function roleHandleOk() {
        let selectData = roleRef.value.getRow().map(t => { return { type: '2', id: t.id, name: t.name, condition: '' } });
        addTableData(selectData);
        data.roleOpen = false;
    }
    // 用户
    const accountRef = ref < any > ()

    function handleAccountClick() {
        data.accountOpen = true;
    }
    function accountHandleOk() {
        let selectData = accountRef.value.getRow().map(t => { return { type: '3', id: t.id, name: t.name } });
        addTableData(selectData);
        data.accountOpen = false;
    }
    function onDelete(key) {
            dataSource.value = dataSource.value.filter(item => item.name !== key);
    }
    function setForm(data) {
        console.log(data)
        authType.value = data.authType.toString()
        dataSource.value = data.authData
    }
    function getForm() {
        return {
            authType: authType.value,
            authData: dataSource.value
        }
    }
    defineExpose({
        getForm,
        setForm
    })

</script>
<style lang="less" scoped>
    .site-space-compact-wrapper {
        width: 100%;

        .ant-select {
            width: 100%;
        }
    }

    ::v-deep .ant-tabs {
        padding: 0 !important;
    }

    ::v-deep .ant-table-content {
        margin-top: 10px;
    }
</style>