786 lines
27 KiB
Vue
786 lines
27 KiB
Vue
<template>
|
|
<div v-loading="searchOrganizationLoading" class="mt-3">
|
|
<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 style="margin-right: 4px;color: rgb(245, 152, 51)" v-if="!userInfo.enterpriseId" class="font-normal" name="warning-o" operable>
|
|
<template #suffix>
|
|
<span>未认证</span>
|
|
</template>
|
|
</d-icon>
|
|
|
|
<div v-if="userInfo.enterpriseId&&enterpriseDetail?.auditStatus===1" style="display: inline-block">
|
|
<d-popover trigger="hover" :position="['bottom']">
|
|
<template #content>
|
|
<div>
|
|
<div>企业名称: {{enterpriseDetail?.enterpriseName || '--'}}</div>
|
|
<div>企业官网: {{enterpriseDetail?.website || '--'}}</div>
|
|
<div>营业执照: <img style="display: inline-block" width="80" v-if="enterpriseDetail?.businessLicenseUrl" :src="enterpriseDetail?.businessLicenseUrl"/></div>
|
|
</div>
|
|
</template>
|
|
<d-icon style="margin-right: 4px;color: rgb(61, 204, 166)" class="font-normal" name="right-o" operable>
|
|
<template #suffix>
|
|
<span>已认证</span>
|
|
</template>
|
|
</d-icon>
|
|
</d-popover>
|
|
</div>
|
|
|
|
<div v-if="userInfo.enterpriseId&&enterpriseDetail?.auditStatus===2" style="display: inline-block">
|
|
<d-popover trigger="hover" :position="['bottom']">
|
|
<template #content>
|
|
<div>
|
|
<div>企业名称: {{enterpriseDetail?.enterpriseName || '--'}}</div>
|
|
<div>企业官网: {{enterpriseDetail?.website || '--'}}</div>
|
|
<div>营业执照: <img style="display: inline-block" width="80" v-if="enterpriseDetail?.businessLicenseUrl" :src="enterpriseDetail?.businessLicenseUrl"/></div>
|
|
</div>
|
|
</template>
|
|
<d-icon style="margin-right: 4px;color: rgb(249, 95, 91)" class="font-normal" name="error-o" operable>
|
|
<template #suffix>
|
|
<span>驳回</span>
|
|
</template>
|
|
</d-icon>
|
|
</d-popover>
|
|
</div>
|
|
|
|
<div v-if="userInfo.enterpriseId&&enterpriseDetail?.auditStatus===0" style="display: inline-block">
|
|
<d-popover trigger="hover" :position="['bottom']">
|
|
<template #content>
|
|
<div>
|
|
<div>企业名称: {{enterpriseDetail?.enterpriseName || '--'}}</div>
|
|
<div>企业官网: {{enterpriseDetail?.website || '--'}}</div>
|
|
<div>营业执照: <img style="display: inline-block" width="80" v-if="enterpriseDetail?.businessLicenseUrl" :src="enterpriseDetail?.businessLicenseUrl"/></div>
|
|
</div>
|
|
</template>
|
|
<d-icon style="margin-right: 4px;color: rgb(254, 204, 85)" class="font-normal" name="warning-o" operable>
|
|
<template #suffix>
|
|
<span>审核中</span>
|
|
</template>
|
|
</d-icon>
|
|
</d-popover>
|
|
</div>
|
|
|
|
<d-icon v-if="!userInfo.enterpriseId" class="font-normal" style="margin-right: 4px" name="classroom-post-results-large" operable @click="showModal">
|
|
<template #suffix>
|
|
<span>申请企业认证</span>
|
|
</template>
|
|
</d-icon>
|
|
<d-icon v-if="userInfo.enterpriseId&&enterpriseDetail?.auditStatus===2" class="font-normal" style="margin-right: 4px" name="classroom-post-results-large" operable @click="showModal(enterpriseDetail)">
|
|
<template #suffix>
|
|
<span>编辑企业认证</span>
|
|
</template>
|
|
</d-icon>
|
|
<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" :rows="5" />
|
|
<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 v-model="memberListSearchParam" icon-position="left" class="w-[296px]" placeholder="请输入搜索内容" @search="handleSearch"
|
|
@keyup.enter="handleSearch"/>
|
|
</div>
|
|
<d-table
|
|
:data="memberTableData"
|
|
:show-loading="memberListSearchLoading"
|
|
class="w-full mb-[20px] organ-table"
|
|
:fix-header="memberTableData.length > 0"
|
|
header-bg
|
|
max-height="500px"
|
|
>
|
|
<d-column field="nickname" header="成员名" />
|
|
<d-column field="roleCode" header="角色">
|
|
<template #default="{ row }">
|
|
{{ memberRoleMap[row.roleCode] ?? '' }}
|
|
</template>
|
|
</d-column>
|
|
<d-column field="email" header="邮箱" >
|
|
<template #default="{ row }">
|
|
{{ normalizeEmailDomain(row.email) || '' }}
|
|
</template>
|
|
</d-column>
|
|
<d-column field="createTime" header="加入时间" />
|
|
<d-column header="操作">
|
|
<template #default="{ row }">
|
|
<d-button size="sm" variant="text" color="primary" class="p-0 justify-start" @click="openDeleteModal(row)">删除</d-button>
|
|
</template>
|
|
</d-column>
|
|
<template #empty>
|
|
<NoData />
|
|
</template>
|
|
</d-table>
|
|
<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"
|
|
@page-index-change="pagerIndexChange"
|
|
@page-size-change="pagerSizeChange"
|
|
/>
|
|
</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 v-model="memberListSearchParam" icon-position="left" class="w-[296px]" placeholder="请输入搜索内容" @search="handleSearch"-->
|
|
<!-- @keyup.enter="handleSearch"/>-->
|
|
<!-- </div>-->
|
|
<d-table
|
|
:data="orgTableData"
|
|
:show-loading="orgListSearchLoading"
|
|
class="w-full mb-[20px] organ-table"
|
|
:fix-header="orgTableData.length > 0"
|
|
header-bg
|
|
max-height="500px"
|
|
>
|
|
<d-column field="createUser" header="组织者" />
|
|
<d-column field="email" header="邮箱" >
|
|
<template #default="{ row }">
|
|
{{ normalizeEmailDomain(row.email) || '' }}
|
|
</template>
|
|
</d-column>
|
|
<d-column field="groupName" header="组织名称" />
|
|
<d-column field="groupDesc" header="组织简介" />
|
|
<d-column field="updateTime" header="加入时间" />
|
|
<!-- <d-column header="操作">-->
|
|
<!-- <template #default="{ row }">-->
|
|
<!-- <d-button size="sm" variant="text" color="primary" class="p-0 justify-start" @click="openDeleteModal(row)">删除</d-button>-->
|
|
<!-- </template>-->
|
|
<!-- </d-column>-->
|
|
<template #empty>
|
|
<NoData />
|
|
</template>
|
|
</d-table>
|
|
<d-pagination
|
|
class="flex justify-end"
|
|
:total="orgPager.total"
|
|
v-model:pageSize="orgPager.pageSize"
|
|
v-model:pageIndex="orgPager.pageIndex"
|
|
:can-view-total="true"
|
|
:can-change-page-size="true"
|
|
:max-items="5"
|
|
@page-index-change="orgPagerIndexChange"
|
|
@page-size-change="orgPagerSizeChange"
|
|
/>
|
|
</d-card>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<NoData :small="false">
|
|
<div class="font-bold mb-[20px]">很抱歉，当前无任何组织，赶快去</div>
|
|
<d-button size="lg" variant="solid" @click="openCreateOrganizationModal">新建组织</d-button>
|
|
</NoData>
|
|
</div>
|
|
</div>
|
|
|
|
<d-modal v-model="createOrganizationModalCtrl" title="新建组织" class="w-[600px]">
|
|
<d-form ref="createFormRef" layout="vertical" :data="createFormData" message-type="none">
|
|
<d-form-item field="organizationName" label="组织名称" required>
|
|
<d-input v-model="createFormData.organizationName" />
|
|
</d-form-item>
|
|
<d-form-item field="organizationProfile" label="组织简介" required>
|
|
<d-textarea v-model="createFormData.organizationProfile" show-count maxlength="200" :rows="6" />
|
|
</d-form-item>
|
|
</d-form>
|
|
|
|
<div class="flex justify-center">
|
|
<d-button :loading="createOrganizationLoading" variant="solid" class="mr-[8px]" @click="confirmCreateOrganizationBtnClick">确定</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-auto-complete
|
|
ref="autoCompleteRef"
|
|
style="width: 100%"
|
|
v-model="inviteMemberFormData.userName"
|
|
:source="searchResults"
|
|
:loading="searchLoading"
|
|
placeholder="请输入GitCode用户名"
|
|
@select="handleinviteSelect"
|
|
enable-lazy-load
|
|
>
|
|
<template #item="slotProps">
|
|
<div class="flex items-center p-1">
|
|
<img :src="avatarUrl" alt="头像" class="w-8 h-8 rounded-full mr-2">
|
|
<div>
|
|
<div class="font-medium">{{ slotProps.item.name || slotProps.item.login }}</div>
|
|
<div class="text-sm text-gray-500">
|
|
<a :src="slotProps.item.htmlUrl">{{ slotProps.item.htmlUrl }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #nothing>
|
|
<div class="p-2 text-center text-gray-500">
|
|
{{ errorMessage || '未找到匹配用户' }}
|
|
</div>
|
|
</template>
|
|
</d-auto-complete>
|
|
<!-- <d-input v-model="inviteMemberFormData.userName" placeholder="请输入GitCode用户名" @input="handleUserInput" />-->
|
|
<!-- <!– 用户信息展示 –>-->
|
|
<!-- <div v-if="inputUserInfo" class="mt-2 p-2 border rounded-md">-->
|
|
<!-- <div class="flex items-center">-->
|
|
<!-- <img :src="inputUserInfo.avatarUrl" alt="头像" class="w-8 h-8 rounded-full mr-2">-->
|
|
<!-- <div>-->
|
|
<!-- <div class="font-medium">{{ inputUserInfo.name || inputUserInfo.login }}</div>-->
|
|
<!-- <div class="text-sm text-gray-500">{{ inputUserInfo.login }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <!– 错误提示 –>-->
|
|
<!-- <div v-if="errorMessage" class="text-red-500 text-sm mt-1">-->
|
|
<!-- {{ errorMessage }}-->
|
|
<!-- </div>-->
|
|
</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 :disabled="errorMessage.length > 0" variant="solid" class="mr-[8px]" :loading="inviteMemberLoading" @click="inviteMemberConfirmBtnClick">确定</d-button>
|
|
<d-button @click="closeInviteMemberModal">取消</d-button>
|
|
</div>
|
|
</d-modal>
|
|
|
|
<d-modal v-model="deleteMemberModalCtrl" title="删除成员" class="w-[600px]">
|
|
<div class="mb-[20px]">即将删除成员‘{{ deleteRow.nickname }}’，请确认是否继续？</div>
|
|
<div class="flex justify-center">
|
|
<d-button variant="solid" class="mr-[8px]" :loading="deleteMemberLoading" @click="deleteMember">确定</d-button>
|
|
<d-button @click="closeDeleteMemberModal">取消</d-button>
|
|
</div>
|
|
</d-modal>
|
|
|
|
<QyrzModal @refresh="queryUserInfo" ref="qyrzRef"/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, shallowRef,watch } from 'vue';
|
|
import { Message } from 'vue-devui';
|
|
import NoData from '@/components/NoData/NoData.vue';
|
|
import QyrzModal from './QyrzModal.vue';
|
|
import {
|
|
createOrganizationApi,
|
|
deleteOrganizationMemberApi, getGroupjoinedListApi,
|
|
getOrganizationMemberListApi,
|
|
inviteOrganizationMemberApi,
|
|
updateOrganizationInfoApi,getGroupmemberinviteApi,fetchEnterpriseDetail
|
|
} from '@/api/organizationManage/organizationManageApi';
|
|
import {
|
|
type OrganizationInfoType,
|
|
type OrganizationMemberItemType,
|
|
OrganizationMemberRoleEnum,
|
|
type UserInfoType,
|
|
} from '@/api/organizationManage/organizationManageType';
|
|
import {getUserInfo} from "@/api/user";
|
|
import dayjs from "dayjs";
|
|
import debounce from 'lodash/debounce';
|
|
import { useAccount } from '@/utils/hooks/useAccount';
|
|
import avatarUrl from '@/assets/imgs/avatar/male.png';
|
|
const userInfo = shallowRef<UserInfoType>({
|
|
username: '',
|
|
mobile: null,
|
|
email: '',
|
|
avatar: '',
|
|
noticeUnreadNum: 0,
|
|
inviteNum: 0,
|
|
groupId: null,
|
|
groupName: null,
|
|
groupDesc: null,
|
|
});
|
|
const searchOrganizationLoading = ref(false);
|
|
const hasOrganization = ref(true);
|
|
const organizationInfo = shallowRef<OrganizationInfoType>({
|
|
groupId: 0,
|
|
organizationName: '',
|
|
organizationProfile: ''
|
|
});
|
|
|
|
const createOrganizationModalCtrl = ref(false);
|
|
const createFormData = reactive({
|
|
organizationName: '',
|
|
organizationProfile: '' // 组织简介
|
|
});
|
|
const createFormRef = ref();
|
|
const qyrzRef = ref();
|
|
const createOrganizationLoading = ref(false);
|
|
|
|
const isEdit = ref(false);
|
|
const editLoading = ref(false);
|
|
|
|
const memberListSearchLoading = ref(false);
|
|
const memberListSearchParam = ref('');
|
|
let originMemberList: OrganizationMemberItemType[] = [];
|
|
let filterMemberList: OrganizationMemberItemType[] = [];
|
|
const memberTableData = shallowRef<OrganizationMemberItemType[]>([]);
|
|
|
|
|
|
function showModal(row) {
|
|
if (qyrzRef.value) {
|
|
qyrzRef.value.open(row);
|
|
}
|
|
}
|
|
|
|
|
|
const pager = reactive({
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
total: 0
|
|
});
|
|
|
|
const orgListSearchLoading = ref(false);
|
|
const orgListSearchParam = ref('');
|
|
let originOrgList = [];
|
|
let filterOrgList = [];
|
|
const orgTableData = shallowRef([]);
|
|
const orgPager = 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: 'MEMBER'
|
|
});
|
|
const inviteMemberSelectOptions = [
|
|
// { name: '创建者', value: OrganizationMemberRoleEnum.OWNER },
|
|
{ name: '成员', value: OrganizationMemberRoleEnum.MEMBER }
|
|
];
|
|
const memberRoleMap = {
|
|
[OrganizationMemberRoleEnum.OWNER]: '创建者',
|
|
[OrganizationMemberRoleEnum.MEMBER]: '成员'
|
|
};
|
|
|
|
function normalizeEmailDomain(email) {
|
|
if (!email) return '';
|
|
const parts = email.split('@');
|
|
if (parts.length !== 2) return email; // 无效邮箱格式
|
|
return `${parts[0]}@${parts[1].toLowerCase()}`;
|
|
}
|
|
|
|
|
|
const { accountInfo, RemoveInfo } = useAccount();
|
|
|
|
init();
|
|
function init() {
|
|
queryUserInfo();
|
|
}
|
|
|
|
// -------------------- 获取组织信息 --------------------
|
|
async function queryUserInfo() {
|
|
searchOrganizationLoading.value = true;
|
|
try {
|
|
const res = await getUserInfo();
|
|
if (res.data?.data?.code === 200) {
|
|
userInfo.value = res.data?.data.data;
|
|
}
|
|
if (res.data?.data.data.groupId) {
|
|
organizationInfo.value = {
|
|
groupId: res.data?.data.data.groupId,
|
|
organizationName: res.data?.data.data.groupName as string,
|
|
organizationProfile: res.data?.data.data.groupDesc as string,
|
|
};
|
|
getMemberList();
|
|
getOrgList(res.data?.data.data.username);
|
|
} else {
|
|
hasOrganization.value = false;
|
|
}
|
|
if (res.data?.data.data.enterpriseId) {
|
|
getEnterpriseDetail(res.data?.data.data.enterpriseId);
|
|
}
|
|
} catch (e) {
|
|
// Message.error('查询用户信息失败');
|
|
}
|
|
searchOrganizationLoading.value = false;
|
|
}
|
|
|
|
// -------------------- 创建组织 --------------------
|
|
function confirmCreateOrganizationBtnClick() {
|
|
createFormRef.value.validate((isValid: boolean) => {
|
|
if (isValid) {
|
|
createOrganization();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function createOrganization() {
|
|
const params = {
|
|
groupName: createFormData.organizationName,
|
|
groupDesc: createFormData.organizationProfile
|
|
};
|
|
createOrganizationLoading.value = true;
|
|
try {
|
|
const res = await createOrganizationApi(params);
|
|
if (res.data?.code !== 200) {
|
|
if(res.data?.msg === '未登录') {
|
|
RemoveInfo()
|
|
}
|
|
// Message.error(res.data?.msg || '创建失败');
|
|
} else {
|
|
closeOrganizationModal();
|
|
// 确保完全重置表单
|
|
createFormData.organizationName = '';
|
|
createFormData.organizationProfile = '';
|
|
|
|
// 强制刷新组织信息
|
|
searchOrganizationLoading.value = true;
|
|
await queryUserInfo();
|
|
hasOrganization.value = true; // 确保显示组织信息
|
|
searchOrganizationLoading.value = false;
|
|
}
|
|
} catch (e) {
|
|
// Message.error('接口错误，创建失败');
|
|
}
|
|
createOrganizationLoading.value = false;
|
|
}
|
|
|
|
function openCreateOrganizationModal() {
|
|
createOrganizationModalCtrl.value = true;
|
|
}
|
|
|
|
function closeOrganizationModal() {
|
|
createFormData.organizationName = '';
|
|
createFormData.organizationProfile = '';
|
|
createOrganizationModalCtrl.value = false;
|
|
}
|
|
|
|
// -------------------- 编辑组织信息 --------------------
|
|
function editIconClick() {
|
|
createFormData.organizationName = organizationInfo.value.organizationName;
|
|
createFormData.organizationProfile = organizationInfo.value.organizationProfile;
|
|
isEdit.value = true;
|
|
}
|
|
|
|
async function editOrganizationConfirm() {
|
|
if (!createFormData.organizationName || !createFormData.organizationProfile) {
|
|
Message.warning('组织名称和组织简介不能为空');
|
|
return;
|
|
}
|
|
editLoading.value = true;
|
|
const params = {
|
|
id: organizationInfo.value.groupId,
|
|
name: createFormData.organizationName,
|
|
desc: createFormData.organizationProfile
|
|
};
|
|
try {
|
|
const res = await updateOrganizationInfoApi(params);
|
|
if (res.data?.code === 200) {
|
|
organizationInfo.value = {
|
|
groupId: organizationInfo.value.groupId,
|
|
...createFormData,
|
|
};
|
|
createFormData.organizationName = '';
|
|
createFormData.organizationProfile = '';
|
|
} else {
|
|
// Message.error(res.data?.msg || '更新失败');
|
|
}
|
|
} catch (e) {
|
|
// Message.error('接口错误，更新失败');
|
|
}
|
|
editLoading.value = false;
|
|
isEdit.value = false;
|
|
}
|
|
|
|
function editOrganizationCancel() {
|
|
isEdit.value = false;
|
|
createFormData.organizationName = organizationInfo.value.organizationName;
|
|
createFormData.organizationProfile = organizationInfo.value.organizationProfile;
|
|
}
|
|
|
|
// -------------------- 邀请、查询成员 --------------------
|
|
async function getMemberList() {
|
|
memberListSearchLoading.value = true;
|
|
originMemberList = [];
|
|
pager.total = 0;
|
|
try {
|
|
const res = await getOrganizationMemberListApi({ groupId: organizationInfo.value.groupId });
|
|
if (res.data?.code === 200) {
|
|
originMemberList = res.data?.data.map(item => {
|
|
return { ...item, createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') };
|
|
});
|
|
pager.total = originMemberList.length;
|
|
updateFilterTableList();
|
|
} else {
|
|
Message.warning(res.data?.msg || '查询失败');
|
|
}
|
|
} catch (e) {
|
|
// Message.error('接口错误，查询失败');
|
|
}
|
|
memberListSearchLoading.value = false;
|
|
}
|
|
|
|
async function getOrgList(username) {
|
|
orgListSearchLoading.value = true;
|
|
originMemberList = [];
|
|
pager.total = 0;
|
|
try {
|
|
const res = await getGroupjoinedListApi({ username });
|
|
if (res.data?.code === 200) {
|
|
originOrgList = res.data?.data.map(item => {
|
|
return { ...item, updateTime: dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss') };
|
|
});
|
|
orgPager.total = originOrgList.length;
|
|
updateFilterOrgTableList();
|
|
} else {
|
|
Message.warning(res.data?.msg || '查询失败');
|
|
}
|
|
} catch (e) {
|
|
// Message.error('接口错误，查询失败');
|
|
}
|
|
orgListSearchLoading.value = false;
|
|
}
|
|
|
|
const enterpriseDetail = ref({});
|
|
const getEnterpriseDetail = async (id) => {
|
|
try {
|
|
const response = await fetchEnterpriseDetail(id);
|
|
if (response.data.code === 200) {
|
|
enterpriseDetail.value = response.data.data;
|
|
} else {
|
|
// Message.error('数据获取失败');
|
|
}
|
|
} catch (error) {
|
|
// Message.error('网络请求失败');
|
|
}
|
|
};
|
|
|
|
|
|
// 搜索处理函数（带防抖）
|
|
const handleSearch = debounce(() => {
|
|
pager.pageIndex = 1; // 搜索时重置到第一页
|
|
updateFilterTableList();
|
|
}, 500);
|
|
|
|
// 修改 updateFilterTableList 函数
|
|
function updateFilterTableList() {
|
|
const queryStr = memberListSearchParam.value.trim().toLowerCase();
|
|
|
|
filterMemberList = queryStr
|
|
? originMemberList.filter(item =>
|
|
item.username.toLowerCase().includes(queryStr) ||
|
|
item.email.toLowerCase().includes(queryStr))
|
|
: [...originMemberList];
|
|
|
|
pager.total = filterMemberList.length;
|
|
updateCurrentPageTableList();
|
|
}
|
|
|
|
// 修改 updateFilterTableList 函数
|
|
function updateFilterOrgTableList() {
|
|
const queryStr = orgListSearchParam.value.trim().toLowerCase();
|
|
|
|
filterOrgList = queryStr
|
|
? originOrgList.filter(item =>
|
|
item.username.toLowerCase().includes(queryStr) ||
|
|
item.email.toLowerCase().includes(queryStr))
|
|
: [...originOrgList];
|
|
|
|
orgPager.total = filterOrgList.length;
|
|
updateCurrentPageOrgTableList();
|
|
}
|
|
|
|
function updateCurrentPageTableList() {
|
|
const endIndex = pager.pageIndex * pager.pageSize;
|
|
memberTableData.value = filterMemberList.slice(endIndex - pager.pageSize, endIndex);
|
|
}
|
|
function updateCurrentPageOrgTableList() {
|
|
const endIndex = orgPager.pageIndex * orgPager.pageSize;
|
|
orgTableData.value = filterOrgList.slice(endIndex - orgPager.pageSize, endIndex);
|
|
}
|
|
|
|
function pagerIndexChange() {
|
|
updateCurrentPageTableList();
|
|
}
|
|
|
|
function pagerSizeChange() {
|
|
pager.pageIndex = 1;
|
|
updateCurrentPageTableList();
|
|
}
|
|
function orgPagerIndexChange() {
|
|
updateCurrentPageOrgTableList();
|
|
}
|
|
|
|
function orgPagerSizeChange() {
|
|
orgPager.pageIndex = 1;
|
|
updateCurrentPageOrgTableList();
|
|
}
|
|
|
|
function openInviteMemberModal() {
|
|
inviteMemberModalCtrl.value = true;
|
|
}
|
|
|
|
function openDeleteModal(row: any) {
|
|
deleteRow.value = row;
|
|
deleteMemberModalCtrl.value = true;
|
|
}
|
|
|
|
function inviteMemberConfirmBtnClick() {
|
|
inviteMemberFormRef.value.validate((isValid: boolean) => {
|
|
if (isValid) {
|
|
inviteMember();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function inviteMember() {
|
|
const params = {
|
|
groupId: organizationInfo.value.groupId,
|
|
username: inviteMemberFormData.userName,
|
|
roleCode: inviteMemberFormData.role
|
|
};
|
|
inviteMemberLoading.value = true;
|
|
try {
|
|
const res = await inviteOrganizationMemberApi(params);
|
|
if (res.data?.data) {
|
|
Message.success('邀请成功');
|
|
getMemberList();
|
|
} else {
|
|
Message.warning(res.data?.msg || '邀请失败');
|
|
}
|
|
} catch (e) {
|
|
Message.warning('接口错误，邀请失败');
|
|
}
|
|
inviteMemberLoading.value = false;
|
|
closeInviteMemberModal();
|
|
}
|
|
|
|
function closeInviteMemberModal() {
|
|
inviteMemberModalCtrl.value = false;
|
|
}
|
|
|
|
async function deleteMember() {
|
|
const params = {
|
|
groupId: organizationInfo.value.groupId,
|
|
username: deleteRow.value.username
|
|
};
|
|
deleteMemberLoading.value = true;
|
|
try {
|
|
const res = await deleteOrganizationMemberApi(params);
|
|
if (res.data?.data) {
|
|
Message.success('删除成功');
|
|
getMemberList();
|
|
} else {
|
|
// Message.error(res.data?.msg || '删除失败');
|
|
}
|
|
} catch (e) {
|
|
Message.warning('接口错误，删除失败');
|
|
}
|
|
deleteMemberLoading.value = false;
|
|
closeDeleteMemberModal();
|
|
}
|
|
|
|
function closeDeleteMemberModal() {
|
|
deleteMemberModalCtrl.value = false;
|
|
}
|
|
|
|
// 输入的用户信息查询
|
|
// 新增用户信息状态
|
|
const searchResults = ref<any[]>([]);
|
|
const searchLoading = ref(false);
|
|
const errorMessage = ref<string>('');
|
|
const searchKey = ref(0);
|
|
const autoCompleteRef = ref(null);
|
|
// 搜索处理函数（带防抖）
|
|
const handleinviteSearch = async (keyword: string) => {
|
|
if (!keyword.trim()) {
|
|
searchResults.value = [];
|
|
errorMessage.value = '';
|
|
return;
|
|
}
|
|
|
|
searchLoading.value = true;
|
|
errorMessage.value = '';
|
|
|
|
try {
|
|
const res = await getGroupmemberinviteApi({ username: keyword.trim() });
|
|
console.log('用户搜索结果:', res);
|
|
|
|
if (res.data.code === 200) {
|
|
if (res.data.data.errorCode) {
|
|
// 用户不存在
|
|
searchResults.value = [];
|
|
errorMessage.value = res.data.data?.errorMessage || '';
|
|
} else {
|
|
// 用户存在，处理搜索结果
|
|
// 将单个用户对象包装成数组（如果接口返回单个对象）
|
|
const userData = Array.isArray(res.data.data) ? res.data.data : [res.data.data];
|
|
|
|
searchResults.value = userData.map(user => ({
|
|
...user,
|
|
label: user.name || user.login, // 显示的标签
|
|
value: user.login // 选中后填充的值
|
|
}));
|
|
autoCompleteRef.value?.loadFinish();
|
|
console.log('searchResults结果:', searchResults.value);
|
|
}
|
|
} else {
|
|
searchResults.value = [];
|
|
errorMessage.value = res.data.msg || '搜索失败';
|
|
}
|
|
} catch (e) {
|
|
console.error('搜索用户失败:', e);
|
|
searchResults.value = [];
|
|
errorMessage.value = '接口错误，请重试';
|
|
Message.warning('接口错误，搜索失败');
|
|
} finally {
|
|
searchLoading.value = false;
|
|
}
|
|
}; // 防抖时间500ms
|
|
|
|
// 选择用户处理函数
|
|
const handleinviteSelect = (item: any) => {
|
|
errorMessage.value = '';
|
|
console.log('选中用户:', inputUserInfo.value);
|
|
};
|
|
|
|
watch(
|
|
() => inviteMemberFormData.userName, // 监听目标字段
|
|
() => {handleinviteSearch(inviteMemberFormData.userName)}
|
|
)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.organ-table :deep(.devui-table__row td) {
|
|
padding: 10px 16px;
|
|
}
|
|
</style>
|