You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.1 KiB
120 lines
3.1 KiB
<template>
|
|
<BasicModal
|
|
v-bind="$attrs"
|
|
@register="registerModal"
|
|
:loading="loading"
|
|
:showOkBtn="!loading"
|
|
:showCancelBtn="!loading"
|
|
:title="L('OrganizationUnit:SelectUsers')"
|
|
:width="800"
|
|
@visible-change="handleVisibleChange"
|
|
@ok="handleSubmit"
|
|
>
|
|
<BasicTable ref="tableRef" @register="registerTable">
|
|
<template #toolbar>
|
|
<InputSearch :placeholder="L('Search')" v-model:value="filter" @search="handleSearch" />
|
|
</template>
|
|
</BasicTable>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, unref } from 'vue';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import { useLocalization } from '/@/hooks/abp/useLocalization';
|
|
import { Input } from 'ant-design-vue';
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
import { BasicTable, BasicColumn, useTable, TableActionType } from '/@/components/Table';
|
|
import { formatPagedRequest } from '/@/utils/http/abp/helper';
|
|
import { addMembers, getUnaddedMemberList } from '/@/api/identity/organization-units';
|
|
|
|
const InputSearch = Input.Search;
|
|
|
|
const emits = defineEmits(['change', 'register']);
|
|
const props = defineProps({
|
|
ouId: { type: String },
|
|
});
|
|
|
|
const { createMessage } = useMessage();
|
|
const { L } = useLocalization('AbpIdentity');
|
|
const loading = ref(false);
|
|
const filter = ref('');
|
|
const tableRef = ref<Nullable<TableActionType>>(null);
|
|
const [registerModal, { closeModal }] = useModalInner();
|
|
const dataColumns: BasicColumn[] = [
|
|
{
|
|
title: 'id',
|
|
dataIndex: 'id',
|
|
width: 1,
|
|
ifShow: false,
|
|
},
|
|
{
|
|
title: L('DisplayName:UserName'),
|
|
dataIndex: 'userName',
|
|
align: 'left',
|
|
width: 280,
|
|
sorter: true,
|
|
},
|
|
{
|
|
title: L('EmailAddress'),
|
|
dataIndex: 'email',
|
|
align: 'left',
|
|
width: 'auto',
|
|
sorter: true,
|
|
},
|
|
];
|
|
const requestApi = computed(() => {
|
|
return (request) => {
|
|
request.id = unref(props).ouId;
|
|
request.filter = unref(filter);
|
|
formatPagedRequest(request);
|
|
};
|
|
});
|
|
const [registerTable] = useTable({
|
|
rowKey: 'id',
|
|
columns: dataColumns,
|
|
api: getUnaddedMemberList,
|
|
beforeFetch: requestApi,
|
|
pagination: true,
|
|
striped: false,
|
|
useSearchForm: false,
|
|
showTableSetting: false,
|
|
bordered: true,
|
|
showIndexColumn: false,
|
|
canResize: false,
|
|
immediate: true,
|
|
rowSelection: { type: 'checkbox' },
|
|
});
|
|
|
|
function handleSearch() {
|
|
const tableEl = unref(tableRef);
|
|
tableEl?.reload();
|
|
tableEl?.clearSelectedRowKeys();
|
|
}
|
|
|
|
function handleVisibleChange(visible) {
|
|
if (visible) {
|
|
handleSearch();
|
|
}
|
|
}
|
|
|
|
function handleSubmit() {
|
|
const tableEl = unref(tableRef);
|
|
const selectRows = tableEl?.getSelectRows();
|
|
if (selectRows) {
|
|
loading.value = true;
|
|
addMembers(
|
|
props.ouId!,
|
|
selectRows.map((x) => x.id),
|
|
)
|
|
.then(() => {
|
|
createMessage.success(L('Successful'));
|
|
emits('change');
|
|
closeModal();
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|