137 lines
4.3 KiB
Vue
137 lines
4.3 KiB
Vue
<!--
|
|
* @Author: 刘妍
|
|
* @Date: 2024-03-05 17:09:44
|
|
* @LastEditors: Do not edit
|
|
* @LastEditTime: 2024-03-07 15:37:16
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="auth-config">
|
|
<a-tabs v-model:activeKey="f_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', 'type'].includes(column.dataIndex)">
|
|
<div>
|
|
{{ text }}
|
|
</div>
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'operation'">
|
|
<a-popconfirm v-if="dataSource.length" title="Sure to delete?"
|
|
@confirm="onDelete(record.key)">
|
|
<a>Delete</a>
|
|
</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';
|
|
const f_AuthType = ref("1")
|
|
import { cloneDeep } from 'lodash-es';
|
|
import type { UnwrapRef } from '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',
|
|
},
|
|
|
|
];
|
|
const dataSource = [
|
|
{
|
|
id: 0,
|
|
name: "王五",
|
|
type: "管理员",
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "王五",
|
|
type: "管理员",
|
|
},
|
|
]
|
|
const data = reactive({
|
|
postOpen: false,
|
|
roleOpen: false,
|
|
accountOpen: false,
|
|
})
|
|
// 岗位
|
|
const posRef = ref < any > ()
|
|
|
|
function handlePostClick() {
|
|
data.postOpen = true;
|
|
}
|
|
function postHandleOk() {
|
|
console.log(roleRef.value.getRow())
|
|
}
|
|
// 角色
|
|
const roleRef = ref < any > ()
|
|
|
|
function handleRoleClick() {
|
|
data.roleOpen = true;
|
|
}
|
|
function roleHandleOk() {
|
|
console.log(roleRef.value.getRow())
|
|
}
|
|
// 用户
|
|
const accountRef = ref < any > ()
|
|
|
|
function handleAccountClick() {
|
|
data.accountOpen = true;
|
|
}
|
|
function accountHandleOk() {
|
|
console.log(accountRef.value.getRow())
|
|
}
|
|
|
|
</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> |