<!--
|
* @Description: 用户到用户组/角色到用户组 穿棱框
|
* @Author: Ben Li
|
* @version:
|
* @Date: 2024-03-24 11:16:48
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-06-18 10:52:48
|
-->
|
<template>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="700px" @ok="handleSubmit">
|
<div class="transfer-wrapper">
|
<Transfer ref="transferRef" :data-source="dataSource" :target-keys="targetKeys" :left-columns="leftColumns"
|
:right-columns="rightColumns" :titles="titles" @change-keys="onChange" />
|
</div>
|
</BasicDrawer>
|
</template>
|
<script lang="ts">
|
import { defineComponent, ref, computed, unref, toRefs, toRef } from 'vue';
|
// import { BasicForm, useForm } from '/@/components/Form/index';
|
// import { formSchema } from './usergroup.data';
|
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { Transfer } from '/@/components/Transfer/index';
|
import { TransferData } from '/@/components/Transfer/src/types/transfer';
|
import { useTransfer } from '/@/components/Transfer/src/hooks/useTransfer';
|
import { getUser, getTargetUser, SetSysUserToGroup } from '/@/api/tigerapi/usergroup';
|
import { SpecificEntity, UserGPParams } from '/@/api/tigerapi/model/systemModel';
|
import { useUserStore } from '/@/store/modules/user';
|
import { notification } from 'ant-design-vue';
|
import { getRoles, getTargetRole, SetRoleToGroup } from '/@/api/tigerapi/system';
|
|
export default defineComponent({
|
name: 'UserGPDrawer',
|
components: { BasicDrawer, Transfer },
|
emits: ['success', 'register'],
|
setup(_, { emit }) {
|
const isUpdate = ref(true);
|
const isRole = ref(true);
|
// const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
// labelWidth: 100,
|
// schemas: formSchema,
|
// showActionButtonGroup: false,
|
// baseColProps: { lg: 12, md: 24 },
|
// });
|
|
const transferData = ref<TransferData[]>([]);
|
const originTargetKeys = ref<string[]>([]);
|
const leftTableColumns = ref([
|
{
|
dataIndex: 'title',
|
title: '用户代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '用户名',
|
},
|
]);
|
const rightTableColumns = ref([
|
{
|
dataIndex: 'title',
|
title: '用户代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '用户名',
|
},
|
]);
|
const titles = ['（用户）', '（用户组）'];
|
const userStore = useUserStore();
|
//穿梭框props加载，初始化
|
const { state, onChange, seDatas } = useTransfer({
|
transferRef: undefined,
|
dataSource: [],
|
editKey: [],
|
leftColumns: [],
|
rightColumns: [],
|
titles: titles,
|
});
|
const _gpTid = ref('');
|
const getTitle = ref('添加用户到用户组');
|
|
/**
|
* @description: 侧边弹出框初始化方法
|
* @return {*}
|
*/
|
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
setDrawerProps({ confirmLoading: false });
|
|
transferData.value = [];
|
var _v: UserGPParams = {
|
USERGROUP_CODE: data.record.USERGROUP_CODE,
|
USERGROUP_DESC: data.record.USERGROUP_DESC,
|
};
|
_gpTid.value = data.record.ID;
|
isRole.value = !!data?.isRole;
|
getTitle.value = unref(isRole) ? '添加角色到用户组' : '添加用户到用户组';
|
var _title = ['（用户）', `（用户组:[${data.record.USERGROUP_CODE}]关联的用户）`];
|
if (unref(isRole)) {
|
///添加角色功能
|
_title = ['（角色）', `（用户组:[${data.record.USERGROUP_CODE}]关联的角色）`];
|
leftTableColumns.value = [
|
{
|
dataIndex: 'title',
|
title: '角色代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '角色名',
|
},
|
];
|
rightTableColumns.value = [
|
{
|
dataIndex: 'title',
|
title: '角色代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '角色名',
|
},
|
];
|
/* 多异步方法组合调用 */
|
Promise.all([getRoles(), getTargetRole(_v)]).then(res => {
|
let action = res[0];
|
let tAction = res[1];
|
for (let i = 0; i < action.length; i++) {
|
transferData.value.push({
|
key: action[i].ROLE_CODE,
|
title: `${action[i].ROLE_CODE}`,
|
description: `${action[i].ROLE_DESC}`,
|
disabled: false,
|
});
|
}
|
originTargetKeys.value = [];
|
for (let i = 0; i < tAction.length; i++) {
|
originTargetKeys.value.push(tAction[i].ROLE_CODE);
|
}
|
//Transfer组件，标题及数据源设置
|
seDatas(
|
_title,
|
unref(transferData),
|
unref(originTargetKeys),
|
unref(rightTableColumns),
|
unref(leftTableColumns),
|
);
|
}).catch(err => {
|
console.log(err)
|
});
|
} else {
|
///添加用户功能
|
rightTableColumns.value = [
|
{
|
dataIndex: 'title',
|
title: '用户代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '用户名',
|
},
|
];
|
leftTableColumns.value = [
|
{
|
dataIndex: 'title',
|
title: '用户代码',
|
},
|
{
|
dataIndex: 'description',
|
title: '用户名',
|
},
|
];
|
Promise.all([getUser(), getTargetUser(_v)]).then(res => {
|
let action = res[0];
|
let tAction = res[1];
|
for (let i = 0; i < action.length; i++) {
|
transferData.value.push({
|
key: action[i].USER_ID,
|
title: `${action[i].USER_ID}`,
|
description: `${action[i].USER_NAME}`,
|
disabled: false, //i % 4 === 0,
|
});
|
}
|
originTargetKeys.value = [];
|
for (let i = 0; i < tAction.length; i++) {
|
originTargetKeys.value.push(tAction[i].USER_ID);
|
}
|
//Transfer组件，标题及数据源设置
|
seDatas(
|
_title,
|
unref(transferData),
|
unref(originTargetKeys),
|
unref(rightTableColumns),
|
unref(leftTableColumns),
|
);
|
console.log(res)
|
}).catch(err => {
|
console.log(err)
|
});
|
}
|
});
|
|
function handleCreate() {
|
console.log('list', 11);
|
}
|
|
// const getTitle = computed(() => '添加用户到用户组');
|
|
/**
|
* @description: 提交方法
|
* @return {*}
|
*/
|
async function handleSubmit() {
|
try {
|
//const values = await validate();
|
setDrawerProps({ confirmLoading: true });
|
// TODO custom api
|
const _targetKeys = toRef(state, 'targetKeys');
|
var _v: SpecificEntity = {
|
ID: '',
|
EntityStr: '',
|
UserId: userStore.getUserInfo.userId,
|
Extend1: _targetKeys.value.join(','),
|
Extend2: _gpTid.value,
|
Extend3: '',
|
};
|
if (unref(isRole)) {
|
SetRoleToGroup(_v).then((action) => {
|
if (action.IsSuccessed) {
|
notification['success']({
|
message: '操作成功',
|
description: `向用户组添加角色：${_v.Extend1} 成功，${userStore.getUserInfo.userId}`,
|
});
|
emit('success');
|
}
|
});
|
} else {
|
_v.Extend2 = _targetKeys.value.join(',');
|
_v.Extend3 = _gpTid.value;
|
SetSysUserToGroup(_v).then((action) => {
|
if (action.IsSuccessed) {
|
notification['success']({
|
message: '操作成功',
|
description: `向用户组添加用户：${_v.Extend2} 成功，${userStore.getUserInfo.userId}`,
|
});
|
emit('success');
|
}
|
});
|
}
|
|
closeDrawer();
|
} finally {
|
setDrawerProps({ confirmLoading: false });
|
}
|
}
|
|
return {
|
seDatas,
|
...toRefs(state),
|
registerDrawer,
|
// registerForm,
|
getTitle,
|
handleSubmit,
|
handleCreate,
|
onChange,
|
};
|
},
|
});
|
</script>
|
