新增组织管理内容
This commit is contained in:
LovableCat
@@ -1,13 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="hasOrganization"></div>
|
||||
<div v-if="hasOrganization">
|
||||
<d-card class="mb-[16px] bg-white" shadow="never">
|
||||
<div class="text-[14px] w-full flex items-center justify-between">
|
||||
<div class="font-bold mb-[16px]">基础信息</div>
|
||||
<div>
|
||||
<d-icon
|
||||
v-if="!isEdit"
|
||||
class="font-normal"
|
||||
name="edit"
|
||||
operable
|
||||
@click="editIconClick"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>编辑</span>
|
||||
</template>
|
||||
</d-icon>
|
||||
</div>
|
||||
</div>
|
||||
<d-form
|
||||
ref="baseInfoFormRef"
|
||||
:data="createFormData"
|
||||
message-type="none"
|
||||
>
|
||||
<d-form-item
|
||||
field="organizationName"
|
||||
label="组织名称"
|
||||
>
|
||||
<d-input v-if="isEdit" v-model="createFormData.organizationName" />
|
||||
<div v-else>{{ organizationInfo.organizationName }}</div>
|
||||
</d-form-item>
|
||||
<d-form-item field="organizationProfile" label="组织简介">
|
||||
<d-textarea
|
||||
v-if="isEdit"
|
||||
v-model="createFormData.organizationProfile"
|
||||
show-count
|
||||
maxlength="200"
|
||||
/>
|
||||
<div v-else>{{ organizationInfo.organizationProfile }}</div>
|
||||
</d-form-item>
|
||||
</d-form>
|
||||
<div v-if="isEdit">
|
||||
<d-button
|
||||
variant="solid"
|
||||
class="mr-[8px]"
|
||||
@click="editOrganizationConfirm"
|
||||
>完成</d-button>
|
||||
<d-button @click="editOrganizationCancel">取消</d-button>
|
||||
</div>
|
||||
</d-card>
|
||||
|
||||
|
||||
<d-card class="mb-[16px] bg-white" shadow="never">
|
||||
<div class="font-bold text-[14px] mb-[12px]">成员管理</div>
|
||||
<div class="flex mb-[12px]">
|
||||
<d-button
|
||||
icon="add"
|
||||
variant="solid"
|
||||
class="mr-[8px]"
|
||||
@click="openInviteMemberModal"
|
||||
>邀请成员</d-button>
|
||||
<d-search
|
||||
icon-position="left"
|
||||
class="w-[296px]"
|
||||
placeholder="请输入搜索内容"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
v-if="memberTableData.length"
|
||||
:data="memberTableData"
|
||||
class="w-full mb-[20px]"
|
||||
fix-header
|
||||
header-bg
|
||||
max-height="500px"
|
||||
>
|
||||
<d-column field="userName" header="成员名" />
|
||||
<d-column field="role" header="角色">
|
||||
<template #default="{ row }">
|
||||
{{ memberRoleMap[row.role] ?? '' }}
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="email" header="邮箱" />
|
||||
<d-column field="joinDate" header="加入时间" />
|
||||
<d-column header="操作">
|
||||
<template #default="{row}">
|
||||
<d-button
|
||||
variant="text"
|
||||
color="primary"
|
||||
@click="openDeleteModal(row)"
|
||||
>删除</d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
<NoData v-else />
|
||||
<d-pagination
|
||||
class="flex justify-end"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:can-view-total="true"
|
||||
:can-change-page-size="true"
|
||||
:max-items="5"
|
||||
/>
|
||||
</d-card>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<NoData>
|
||||
<NoData :small="false">
|
||||
<div class="font-bold mb-[20px]">很抱歉，当前无任何组织，赶快去</div>
|
||||
<d-button
|
||||
size="lg"
|
||||
variant="solid"
|
||||
@click="createOrganizationBtnClick"
|
||||
@click="openCreateOrganizationModal"
|
||||
>新建组织</d-button>
|
||||
</NoData>
|
||||
</div>
|
||||
@@ -46,29 +150,168 @@
|
||||
class="mr-[8px]"
|
||||
@click="confirmCreateOrganizationBtnClick"
|
||||
>确定</d-button>
|
||||
<d-button @click="createOrganizationModalClose">取消</d-button>
|
||||
<d-button @click="closeOrganizationModal">取消</d-button>
|
||||
</div>
|
||||
</d-modal>
|
||||
|
||||
<d-modal
|
||||
v-model="inviteMemberModalCtrl"
|
||||
title="邀请成员"
|
||||
class="w-[600px]"
|
||||
>
|
||||
<d-form
|
||||
ref="inviteMemberFormRef"
|
||||
layout="vertical"
|
||||
:data="inviteMemberFormData"
|
||||
message-type="none"
|
||||
>
|
||||
<d-form-item
|
||||
field="userName"
|
||||
label="成员"
|
||||
required
|
||||
>
|
||||
<d-input v-model="inviteMemberFormData.userName" placeholder="请输入" />
|
||||
</d-form-item>
|
||||
<d-form-item field="role" label="角色" required>
|
||||
<d-select v-model="inviteMemberFormData.role">
|
||||
<d-option
|
||||
v-for="item of inviteMemberSelectOptions"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:name="item.name"
|
||||
/>
|
||||
</d-select>
|
||||
</d-form-item>
|
||||
</d-form>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<d-button
|
||||
variant="solid"
|
||||
class="mr-[8px]"
|
||||
@click="inviteMemberConfirmBtnClick"
|
||||
>确定</d-button>
|
||||
<d-button @click="closeInviteMemberModal">取消</d-button>
|
||||
</div>
|
||||
</d-modal>
|
||||
|
||||
|
||||
<d-modal
|
||||
v-model="deleteMemberModalCtrl"
|
||||
title="删除成员"
|
||||
class="w-[600px]"
|
||||
>
|
||||
<div>
|
||||
即将删除成员‘{{ deleteRow.userName }}’，请确认是否继续？
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<d-button
|
||||
variant="solid"
|
||||
class="mr-[8px]"
|
||||
@click="deleteMember"
|
||||
>确定</d-button>
|
||||
<d-button @click="closeDeleteMemberModal">取消</d-button>
|
||||
</div>
|
||||
</d-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {reactive, ref} from "vue";
|
||||
import {reactive, ref, shallowRef} from "vue";
|
||||
import NoData from "@/components/NoData/NoData.vue";
|
||||
import {
|
||||
createOrganizationApi, deleteOrganizationMemberApi,
|
||||
getOrganizationInfoApi, getOrganizationMemberListApi, inviteOrganizationMemberApi,
|
||||
updateOrganizationInfoApi
|
||||
} from "@/api/organizationManage/organizationManageApi";
|
||||
import {
|
||||
type OrganizationInfoType,
|
||||
type OrganizationMemberItemType,
|
||||
} from "@/api/organizationManage/organizationManageType";
|
||||
import table from "@/components/AIRepair/Table.vue";
|
||||
|
||||
const searchOrganizationLoading = ref(false);
|
||||
const hasOrganization = ref(false);
|
||||
const organizationInfo = shallowRef<OrganizationInfoType>({
|
||||
organizationName: '',
|
||||
organizationProfile: '',
|
||||
});
|
||||
|
||||
const createOrganizationModalCtrl = ref(false);
|
||||
const createFormData = reactive({
|
||||
organizationName: "",
|
||||
organizationProfile: "", // 组织简介
|
||||
organizationName: '',
|
||||
organizationProfile: '', // 组织简介
|
||||
});
|
||||
const createFormRef = ref();
|
||||
const createOrganizationLoading = ref(false);
|
||||
|
||||
const isEdit = ref(false);
|
||||
const editLoading = ref(false);
|
||||
|
||||
const memberListSearchLoading = ref(false);
|
||||
const memberListSearchParam = ref('');
|
||||
const memberTableData = shallowRef<OrganizationMemberItemType[]>([]);
|
||||
const pager = reactive({
|
||||
pageSize: 10,
|
||||
pageIndex: 1,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const deleteRow = shallowRef<OrganizationMemberItemType>(null);
|
||||
const deleteMemberModalCtrl = ref(false);
|
||||
const deleteMemberLoading = ref(false);
|
||||
|
||||
const inviteMemberFormRef = ref();
|
||||
const inviteMemberModalCtrl = ref(false);
|
||||
const inviteMemberLoading = ref(false);
|
||||
const inviteMemberFormData = reactive({
|
||||
userName: '',
|
||||
role: '',
|
||||
});
|
||||
const inviteMemberSelectOptions = [
|
||||
{ name: '创建者', value: 'creator' },
|
||||
{ name: '成员', value: 'member' },
|
||||
];
|
||||
const memberRoleMap = {
|
||||
creator: '创建者',
|
||||
member: '成员',
|
||||
};
|
||||
|
||||
const mockTableData = [
|
||||
{ userName: '张三', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '1' },
|
||||
{ userName: '李四', role: 'creator', email: '111@gmail.com', joinDate: '2090-02-30', id: '2' },
|
||||
{ userName: '王五', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '3' },
|
||||
{ userName: '赵六', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '4' },
|
||||
{ userName: '秦七', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '5' },
|
||||
];
|
||||
|
||||
// -------------------- 获取组织信息 --------------------
|
||||
async function getOrganizationInfo() {
|
||||
const params = {
|
||||
organizationName: createFormData.organizationName,
|
||||
organizationProfile: createFormData.organizationProfile,
|
||||
};
|
||||
searchOrganizationLoading.value = true;
|
||||
try {
|
||||
const res = await getOrganizationInfoApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
searchOrganizationLoading.value = false;
|
||||
getMemberList();
|
||||
// TODO 待接口定义好后删除下面两行固定赋值语句
|
||||
hasOrganization.value = true;
|
||||
organizationInfo.value = { organizationName: createFormData.organizationName, organizationProfile: createFormData.organizationProfile };
|
||||
}
|
||||
|
||||
// -------------------- 获取成员信息 --------------------
|
||||
async function getOrganizationMember(organizationId: string) {
|
||||
const params = {};
|
||||
}
|
||||
|
||||
// -------------------- 创建组织 --------------------
|
||||
function confirmCreateOrganizationBtnClick() {
|
||||
createFormRef.value.validate(isValid => {
|
||||
createFormRef.value.validate((isValid: boolean) => {
|
||||
if (isValid) {
|
||||
createOrganization();
|
||||
createOrganization();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -78,21 +321,146 @@ async function createOrganization() {
|
||||
organizationName: createFormData.organizationName,
|
||||
organizationProfile: createFormData.organizationProfile,
|
||||
};
|
||||
createOrganizationLoading.value = true;
|
||||
try {
|
||||
|
||||
const res = await createOrganizationApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
closeOrganizationModal();
|
||||
// TODO 待接口定义好后删除下面调用逻辑
|
||||
getOrganizationInfo();
|
||||
createOrganizationLoading.value = false;
|
||||
}
|
||||
|
||||
function createOrganizationBtnClick(): void {
|
||||
function openCreateOrganizationModal() {
|
||||
createOrganizationModalCtrl.value = true;
|
||||
}
|
||||
|
||||
function createOrganizationModalClose(): void {
|
||||
function closeOrganizationModal() {
|
||||
createOrganizationModalCtrl.value = false;
|
||||
}
|
||||
|
||||
// -------------------- 编辑组织信息 --------------------
|
||||
function editIconClick() {
|
||||
isEdit.value = true;
|
||||
}
|
||||
|
||||
async function editOrganizationConfirm() {
|
||||
editLoading.value = true;
|
||||
const params = {
|
||||
organizationName: createFormData.organizationName,
|
||||
organizationProfile: createFormData.organizationProfile,
|
||||
};
|
||||
try {
|
||||
const res = await updateOrganizationInfoApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
editLoading.value = false;
|
||||
isEdit.value = false;
|
||||
// TODO 待接口定义好后删除下面两行固定赋值语句
|
||||
hasOrganization.value = true;
|
||||
organizationInfo.value = { organizationName: createFormData.organizationName, organizationProfile: createFormData.organizationProfile };
|
||||
}
|
||||
|
||||
function editOrganizationCancel() {
|
||||
isEdit.value = false;
|
||||
createFormData.organizationName = organizationInfo.value.organizationName;
|
||||
createFormData.organizationProfile = organizationInfo.value.organizationProfile;
|
||||
}
|
||||
|
||||
// -------------------- 邀请、查询成员 --------------------
|
||||
async function getMemberList() {
|
||||
const params = {
|
||||
organizationName: createFormData.organizationName,
|
||||
pageIndex: pager.pageIndex,
|
||||
pageSize: pager.pageSize,
|
||||
searchParam: memberListSearchParam.value,
|
||||
};
|
||||
memberListSearchLoading.value = true;
|
||||
try {
|
||||
const res = await getOrganizationMemberListApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
memberTableData.value = mockTableData;
|
||||
pager.total = 6;
|
||||
memberListSearchLoading.value = false;
|
||||
}
|
||||
|
||||
function openInviteMemberModal() {
|
||||
inviteMemberModalCtrl.value = true;
|
||||
}
|
||||
|
||||
function openDeleteModal(row: any) {
|
||||
deleteRow.value = row;
|
||||
deleteMemberModalCtrl.value = true;
|
||||
}
|
||||
|
||||
function inviteMemberConfirmBtnClick() {
|
||||
inviteMemberFormRef.value.validate((isValid: boolean) => {
|
||||
if (isValid) {
|
||||
console.log('aaaaaaaa')
|
||||
inviteMember();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function inviteMember() {
|
||||
const params = {
|
||||
userName: inviteMemberFormData.userName,
|
||||
role: inviteMemberFormData.role,
|
||||
};
|
||||
inviteMemberLoading.value = true;
|
||||
try {
|
||||
const res = await inviteOrganizationMemberApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
inviteMemberLoading.value = false;
|
||||
closeInviteMemberModal();
|
||||
// TODO 待接口定义好后删除下面调用逻辑
|
||||
mockTableData.unshift({
|
||||
userName: inviteMemberFormData.userName,
|
||||
role: inviteMemberFormData.role,
|
||||
joinDate: new Date().toDateString(),
|
||||
id: String(pager.total++),
|
||||
email: `${inviteMemberFormData.userName}@gmail.com`,
|
||||
});
|
||||
memberTableData.value = [...mockTableData];
|
||||
}
|
||||
|
||||
function closeInviteMemberModal() {
|
||||
inviteMemberModalCtrl.value = false;
|
||||
}
|
||||
|
||||
async function deleteMember() {
|
||||
const params = {
|
||||
id: deleteRow.value.id,
|
||||
};
|
||||
deleteMemberLoading.value = true;
|
||||
try {
|
||||
const res = await deleteOrganizationMemberApi(params);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
deleteMemberLoading.value = false;
|
||||
closeDeleteMemberModal();
|
||||
// TODO 待接口定义好后删除下面调用逻辑
|
||||
const index = mockTableData.findIndex(item => item.id === deleteRow.value.id);
|
||||
mockTableData.splice(index, 1);
|
||||
memberTableData.value = [...mockTableData];
|
||||
pager.total--;
|
||||
}
|
||||
|
||||
function closeDeleteMemberModal() {
|
||||
deleteMemberModalCtrl.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.devui-table__row td) {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user