merge wsw into master

feat: 个人中心

Created-by: yfzmpj
Commit-by: 汪少伟
Merged-by: yfzmpj
Description: feat: 个人中心

See merge request: hk_openRepo/OpenRepo_Portal!20
This commit is contained in:
yfzmpj
2025-03-18 15:34:29 +08:00
15 changed files with 1618 additions and 374 deletions

View File

@@ -0,0 +1,39 @@
<template>
<div class="version-info">
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
<d-tab id="gryj" title="个人预警通知列表"></d-tab>
<d-tab id="zzyj" title="组织预警通知列表"></d-tab>
</d-tabs>
<EarlyWarningPerson v-if="selectTab==='gryj'"/>
<EarlyWarningOrganization v-if="selectTab==='zzyj'"/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EarlyWarningPerson from './EarlyWarningPerson.vue';
import EarlyWarningOrganization from './EarlyWarningOrganization.vue';
const selectTab = ref('gryj');
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>
<style lang="scss">
.warning-modal {
width: auto;
.devui-modal__header {
font-size: 20px;
height: auto!important;
}
.devui-modal__body {
padding: 0;
}
}
</style>

View File

@@ -0,0 +1,106 @@
<template>
<div class="warning-detail-container">
<div class="warning-title">
<div>{{ warningData.title }}</div>
<div class="sub-title mt-3">
<span>重要性</span>
<d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
</div>
</div>
<div class="warning-text">
<div class="text-box mb-5">
<div>概要</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.summary }}</p>
</div>
<div class="text-box">
<div>修复方案</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.fixMethod }}</p>
</div>
</div>
<div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">可信开源代码库运营团队 {{ warningData.fromTime }}</div>
<div v-if="propsData.type === 'system'" class="warning-operation">
<d-button @click="confirm" variant="solid" class="mr-2">确定</d-button>
<d-button @click="$emit('close')">取消</d-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const emit = defineEmits(['close']);
const propsData = defineProps(['type', 'warningData']);
const warningData = ref({
title: '【漏洞排查预警】ApacheIgnite远程代码执行漏洞排查CVE-2024-52577)',
importance: '高',
summary: '近日安全中心发现Apache lgnite远程代码执行漏洞CVE-2024-52577。在 2.6.0<Apache Ignite< 2.17.0版本中由于lgnite未能正确实施类序列化过滤器攻击者能够利用恶意序列化对象绕过安全检查从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。',
fixMethod: '升级Apache Ignite至安全版本2.17.0',
fromTime: '2025-2-20'
});
// warningData.value = propsData.warningData;
const confirm = () => {
emit('close');
};
</script>
<style scoped lang="scss">
.warning-detail-container {
width: 600px;
.warning-title {
color: #000000;
font-family: HarmonyOS Sans SC;
font-weight: 600;
font-size: 20px;
line-height: 28px;
padding: 4px 20px 12px;
.sub-title {
>span {
margin-right: 12px;
color: #808080;
font-family: HarmonyOS Sans SC;
font-size: 12px;
}
}
}
.warning-text {
padding: 20px;
background: #F6F6F8;
.text-box {
div {
margin-bottom: 8px;
color: #252B3A;
font-family: HarmonyOS Sans SC;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
p {
color: #252B3A;
font-family: 苹方-;
font-size: 14px;
line-height: 24px;
}
}
}
.warning-from {
background: #F6F6F8;
color: #808080;
font-family: HarmonyOS Sans SC;
font-size: 14px;
text-align: center;
padding: 20px;
}
.warning-operation {
text-align: center;
padding: 20px;
}
}
</style>

View File

@@ -0,0 +1,61 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">组织预警通知列表</div>
<div class="mb-3">
<d-table class="jyh-table jyh-table-2" :header-bg="true" :data="licenseTableData">
<d-column field="code" header="时间"></d-column>
<d-column field="name" header="标题">
<template #default="scope">
<a @click="openWarningDetail(scope.row)">{{ scope.row.name }}</a>
</template>
</d-column>
<d-column field="detail" header="详情"></d-column>
<d-column field="owner" header="订阅人"></d-column>
<d-column field="level" header="级别">
<template #default="scope, text">
<d-status v-if="scope.row.level === 4" type="error">危险</d-status>
<d-status v-if="scope.row.level === 3" type="warning">严重</d-status>
<d-status v-if="scope.row.level === 2" class="yellow-status">一般</d-status>
<d-status v-if="scope.row.level === 1" type="running">提示</d-status>
</template>
</d-column>
<d-column field="status" header="状态">
<template #default="scope, text">
<d-tag v-if="scope.row.status === 1" type="danger" size="sm">未读</d-tag>
<d-tag v-if="scope.row.status === 2" type="success" size="sm">已读</d-tag>
</template>
</d-column>
</d-table>
</div>
</Card>
<d-modal class="warning-modal" v-model="warningModalVisable" title="主题:">
<EarlyWarningDetail @close="colseWarningDetail" :warningData="currentWarning" type="user"></EarlyWarningDetail>
</d-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
const licenseTableData = ref([
{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 4, status: 1 },
{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 3, status: 2 },
{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 2, status: 2 },
{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 1, status: 2 }
]);
const warningModalVisable = ref(false);
const currentWarning = ref();
const openWarningDetail = (row) => {
warningModalVisable.value = true;
currentWarning.value = row;
};
const colseWarningDetail = () => {
warningModalVisable.value = false;
};
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

View File

@@ -0,0 +1,60 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">个人预警通知列表</div>
<div class="mb-3">
<d-table class="jyh-table jyh-table-2" :header-bg="true" :data="licenseTableData">
<d-column field="code" header="时间"></d-column>
<d-column field="name" header="标题">
<template #default="scope">
<a @click="openWarningDetail(scope.row)">{{ scope.row.name }}</a>
</template>
</d-column>
<d-column field="detail" header="详情"></d-column>
<d-column field="level" header="级别">
<template #default="scope, text">
<d-status v-if="scope.row.level === 4" type="error">危险</d-status>
<d-status v-if="scope.row.level === 3" type="warning">严重</d-status>
<d-status v-if="scope.row.level === 2" class="yellow-status">一般</d-status>
<d-status v-if="scope.row.level === 1" type="running">提示</d-status>
</template>
</d-column>
<d-column field="status" header="状态">
<template #default="scope, text">
<d-tag v-if="scope.row.status === 1" type="danger" size="sm">未读</d-tag>
<d-tag v-if="scope.row.status === 2" type="success" size="sm">已读</d-tag>
</template>
</d-column>
</d-table>
</div>
</Card>
<d-modal class="warning-modal" v-model="warningModalVisable" title="主题:">
<EarlyWarningDetail @close="colseWarningDetail" :warningData="currentWarning" type="user"></EarlyWarningDetail>
</d-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
const licenseTableData = ref([
{ code: '05822156', name: 'MIT License', detail: 'integer', level: 4, status: 1 },
{ code: '05822156', name: 'MIT License', detail: 'integer', level: 3, status: 2 },
{ code: '05822156', name: 'MIT License', detail: 'integer', level: 2, status: 1 },
{ code: '05822156', name: 'MIT License', detail: 'integer', level: 1, status: 2 }
]);
const warningModalVisable = ref(false);
const currentWarning = ref();
const openWarningDetail = (row) => {
warningModalVisable.value = true;
currentWarning.value = row;
};
const colseWarningDetail = () => {
warningModalVisable.value = false;
};
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

View File

@@ -0,0 +1,74 @@
<template>
<div class="invitation-notice-container">
<Card simple class="jyh-card mt-3">
<div class="card-title">邀请通知列表</div>
<div class="mb-3">
<d-table
class="jyh-table jyh-table-2"
:header-bg="true"
:data="noticeTableData"
>
<d-column field="content" header="邀请内容"></d-column>
<d-column field="time" header="邀请时间" width="200"></d-column>
<d-column field="creator" header="邀请人" width="180"></d-column>
<d-column header="操作" width="150">
<template #default="scope">
<d-button
variant="text"
color="primary"
class="mr-2"
>
接收
</d-button>
<d-button
variant="text"
color="primary"
>
拒绝
</d-button>
</template>
</d-column>
</d-table>
<div class="invitation-pagination">
<d-pagination
style="display: inline-flex;"
:total="pager.total"
v-model:pageSize="pager.pageSize"
v-model:pageIndex="pager.pageIndex"
:can-view-total="true"
:can-change-page-size="true"
:can-jump-page="true"
:max-items="5"
/>
</div>
</div>
</Card>
</div>
</template>
<script setup lang="ts">
import { ref, shallowReactive } from 'vue';
const noticeTableData = ref([
{
content: '当您订阅的软件有漏洞预警通知时,将以应用号的方式通知。可在首页查看或取消订阅!',
time: '2025-03-15 17:29:30',
creator: '132456798',
}
]);
const pager = shallowReactive({
total: 1,
pageIndex: 1,
pageSize: 10,
pageSizeOptions: [10, 20, 30, 40, 50],
});
</script>
<style lang="scss" scoped>
.invitation-notice-container {
.invitation-pagination {
padding: 12px 0;
text-align: right;
}
}
</style>

View File

@@ -0,0 +1,42 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">组织订阅列表</div>
<div class="mb-3">
<d-table class="jyh-table jyh-table-2" :header-bg="true" :data="tableData">
<d-column field="code" header="订阅时间"></d-column>
<d-column field="name" header="软件/组件名称"></d-column>
<d-column field="detail" header="版本号"></d-column>
<d-column field="owner" header="订阅人"></d-column>
<d-column header="操作" width="100">
<template #default="scope">
<d-popover>
<d-button variant="text" color="primary"> 取消订阅 </d-button>
<template #content>
<div class="popover-content">
<p>确定取消{{ scope.row.name }}订阅吗</p>
<footer>
<d-button @click="hidden" size="sm">取消</d-button>
<d-button @click="hidden" size="sm" color="danger" variant="solid">确认</d-button>
</footer>
</div>
</template>
</d-popover>
</template>
</d-column>
</d-table>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin' }]);
const hidden = () => {
// 模拟body点击操作
document.querySelector('body')?.click();
};
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

View File

@@ -0,0 +1,41 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">个人订阅列表</div>
<div class="mb-3">
<d-table class="jyh-table jyh-table-2" :header-bg="true" :data="tableData">
<d-column field="code" header="订阅时间"></d-column>
<d-column field="name" header="软件/组件名称"></d-column>
<d-column field="detail" header="版本号"></d-column>
<d-column header="操作" width="100">
<template #default="scope">
<d-popover>
<d-button variant="text" color="primary"> 取消订阅 </d-button>
<template #content>
<div class="popover-content">
<p>确定取消{{ scope.row.name }}订阅吗</p>
<footer>
<d-button @click="hidden" size="sm">取消</d-button>
<d-button @click="hidden" size="sm" color="danger" variant="solid">确认</d-button>
</footer>
</div>
</template>
</d-popover>
</template>
</d-column>
</d-table>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer' }]);
const hidden = () => {
// 模拟body点击操作
document.querySelector('body')?.click();
};
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

View File

@@ -0,0 +1,21 @@
<template>
<div class="version-info">
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
<d-tab id="gryj" title="个人订阅列表"></d-tab>
<d-tab id="zzyj" title="组织订阅列表"></d-tab>
</d-tabs>
<OrgSubscription v-if="selectTab === 'zzyj'" />
<PersonageSubscription v-else />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import OrgSubscription from './OrgSubscription.vue';
import PersonageSubscription from './PersonageSubscription.vue';
const selectTab = ref('gryj');
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

View File

@@ -0,0 +1,466 @@
<template>
<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 :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"
/>
</d-form-item>
</d-form>
<div class="flex justify-center">
<d-button
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-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, 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: '', // 组织简介
});
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: boolean) => {
if (isValid) {
createOrganization();
}
});
}
async function createOrganization() {
const params = {
organizationName: createFormData.organizationName,
organizationProfile: createFormData.organizationProfile,
};
createOrganizationLoading.value = true;
try {
const res = await createOrganizationApi(params);
} catch (e) {
}
closeOrganizationModal();
// TODO 待接口定义好后删除下面调用逻辑
getOrganizationInfo();
createOrganizationLoading.value = false;
}
function openCreateOrganizationModal() {
createOrganizationModalCtrl.value = true;
}
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>

View File

@@ -0,0 +1,288 @@
<template>
<div class="version-detail">
<div class="version-header">
<d-breadcrumb class="secret-breadcrumb">
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
<!-- <gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">高级搜索</span></gc-breadcrumb-item>-->
<gc-breadcrumb-item><span class="cur-title">个人中心</span></gc-breadcrumb-item>
</d-breadcrumb>
<div class="version-detail-header">
<div class="header-top">
<GAvatar style="margin-right: 16px" :name="accountInfo.username" :src="accountInfo.avatar" name="Vue" :width="72" :height="72"></GAvatar>
<div class="pt-24">
<div class="header-title1">{{ accountInfo.username || '--' }}</div>
<div class="header-div">
<span class="span1">介绍包含项目管理代码托管CI/CD 和制品库等功能提供完整的研发流程建议的新的团队</span>
</div>
</div>
<!-- <div class="fr">-->
<!-- <d-button class="mr-2" variant="solid">订阅</d-button>-->
<!-- </div>-->
</div>
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-3" type="wrapped" v-model="selectTab">
<d-tab id="yjtzlb" title="预警通知列表"></d-tab>
<d-tab id="dylb" title="订阅列表"></d-tab>
<d-tab id="organizationManage" title="组织管理"></d-tab>
<d-tab id="invitation" title="邀请通知"></d-tab>
</d-tabs>
</div>
</div>
<div class="version-detail-content">
<early-warning v-if="selectTab==='yjtzlb'"/>
<subscribe-list v-if="selectTab==='dylb'"/>
<OrganizationManage v-if="selectTab === 'organizationManage'" />
<InvitationNoticeList v-if="selectTab === 'invitation'" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import EarlyWarning from './Detail/EarlyWarning.vue';
import SubscribeList from './Detail/SubscribeList.vue';
import OrganizationManage from './OrganizationManage/OrganizationManage.vue';
import InvitationNoticeList from './Detail/InvitationNoticeList.vue';
import { useAccount } from '@/utils/hooks/useAccount';
const { namespace } = getOrgInfo();
const avatarUrl = '/src/assets/imgs/avatar/male.png';
const selectTab = ref('yjtzlb');
const { accountInfo, RemoveInfo } = useAccount();
// 删除弹窗
const item = ref('');
const deleteModal = ref();
const deletevModels = ref(false);
const openDelete = (row: any) => {
item.value = row;
deleteModal.value.showFlag = true;
deletevModels.value = true;
};
const router = useRouter();
// 分页
const changeIndex = () => {
// getGroupClaListData();
};
const changeSize = () => {
pager.value.pageIndex = 1;
// getGroupClaListData();
};
const repoFun = (arr: any) => {
return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
};
// 编辑
const editRow = (row: any) => {
// 后续请换成params暂时params传参没传过去
router.push({
path: 'cla/edit/' + row.object_id,
query: { cla: row.cla, pageType: 'edit' }
});
};
// 确认删除
const confirmDelete = async (e: any) => {
// const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
// if (!res.error) {
// getGroupClaListData();
// }
};
// 去成员页
const goMember = (row: any) => {
// 后续请换成params暂时params传参没传过去,注意路由有个:claID
router.push({
path: 'cla/claId/member',
query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
});
};
const getGroupClaListData = async () => {
// const params = {
// group_id: namespace.value,
// page: pager.value.pageIndex,
// per_page: pager.value.pageSize
// };
// const res = await reqCatch(getGroupClaList, params);
// if (!res.error) {
// tableData.value = res?.data?.data?.content;
// pager.value.total = res.data.data.total;
// }
};
getGroupClaListData();
const setClaStatus = async (row: any) => {
// const params = {
// group_id: namespace.value,
// cla_id: row.object_id,
// status: row.status
// };
// const res = await reqCatch(setGroupClaStatus, params);
// if (!res.error) {
// Message.success('操作成功!');
// getGroupClaListData();
// }
};
const signCla = (row: any) => {
router.push('/cla/' + row.object_id);
};
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
.version-detail {
position: relative;
.secret-op {
position: absolute;
right: 0;
top: 0;
}
}
.error {
color: $devui-contrast;
}
:deep(.devui-table__row td) {
padding-top: 16px;
padding-bottom: 16px;
}
:deep(.devui-tag .devui-tag--default) {
background-color: #fff;
border-radius: 12px;
padding: 4px 8px;
font-size: 12px;
line-height: 16px;
margin-right: 8px;
border: 1px solid #e3e3ee;
}
.one-line {
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.title {
font-size: 14px;
font-weight: 400;
color: #9a9b9c;
line-height: 20px;
}
.cur-title {
font-size: 14px;
font-weight: 500;
color: #2d2d2e;
line-height: 20px;
}
.search-form {
position: relative;
padding: 12px 20px 12px 0;
border-radius: 8px 0px 8px 8px;
background: #f2f5fc;
.output-btn {
position: absolute;
right: 28px;
bottom: 4px;
color: #191919;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.secret-breadcrumb {
padding: 7px 20px 12px;
background: transparent;
}
.version-header {
background: url('/src/assets/imgs/jyh/grzxBg.png') no-repeat center center; // 使用 url() 包裹路径
background-size: cover; // 确保背景图片覆盖整个区域
width: 100%;
height: 170px;
}
.version-detail-header {
position: relative;
padding: 0 16%;
width: 100%;
//box-shadow: inset 0px -1px 0px 0px #EEF0F5;
.header-top {
display: flex;
width: 100%;
}
.header-title1 {
color: #191919;
font-family: HarmonyOS Sans;
font-weight: bold;
font-size: 18px;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
margin-bottom: 4px;
}
.header-div {
display: flex;
height: 20px;
margin-bottom: 12px;
.span1 {
color: #808080;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 12px;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
.span2 {
color: #191919;
font-family: HarmonyOS Sans;
font-weight: regular;
font-size: 12px;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
::v-deep .devui-tag {
.devui-tag--md {
color: #f6933b;
font-family: HarmonyOS Sans SC;
font-weight: regular;
font-size: 12px;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
height: 20px;
}
}
}
.jyh-tabs-3 {
padding-top: 8px;
}
}
.version-detail-content {
padding: 0 16%;
width: 100%;
margin-top: 12px;
}
</style>

View File

@@ -3,19 +3,32 @@
<div class="warning-title"> <div class="warning-title">
<div>{{ warningData.title }}</div> <div>{{ warningData.title }}</div>
<div class="sub-title mt-3"> <div class="sub-title mt-3">
<span>重要性</span> <div>
<d-tag type="danger" size="sm">{{warningData.importance}}</d-tag> <span>重要性</span>
<d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
</div>
<div>
<d-button v-show="mode === 'readonly'" class="edit-btn" icon="icon-edit" variant="text" title="编辑" @click="handleModeChange"/>
<d-button v-show="mode === 'editonly'" class="edit-btn" @click="handleModeChange">预览</d-button>
</div>
</div> </div>
</div> </div>
<div class="warning-text"> <div class="warning-text">
<div class="text-box mb-5"> <!-- <div class="text-box mb-5">
<div>概要</div> <div>概要</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.summary }}</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.summary }}</p>
<d-textarea v-model="warningData.summary" id="textArea" autosize></d-textarea>
</div> </div>
<div class="text-box"> <div class="text-box">
<div>修复方案</div> <div>修复方案</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.fixMethod }}</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.fixMethod }}</p>
</div> <d-textarea v-model="warningData.fixMethod" id="textArea2"></d-textarea>
</div> -->
<d-editor-md
v-model="warningData.text"
:mode="mode"
:toolbar-config="toolbarConfig"
></d-editor-md>
</div> </div>
<div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">可信开源代码库运营团队 {{ warningData.fromTime }}</div> <div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">可信开源代码库运营团队 {{ warningData.fromTime }}</div>
<div v-if="propsData.type === 'system'" class="warning-operation"> <div v-if="propsData.type === 'system'" class="warning-operation">
@@ -35,12 +48,29 @@ const warningData = ref({
importance: '高', importance: '高',
summary: '近日安全中心发现Apache lgnite远程代码执行漏洞CVE-2024-52577。在 2.6.0<Apache Ignite< 2.17.0版本中由于lgnite未能正确实施类序列化过滤器攻击者能够利用恶意序列化对象绕过安全检查从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。', summary: '近日安全中心发现Apache lgnite远程代码执行漏洞CVE-2024-52577。在 2.6.0<Apache Ignite< 2.17.0版本中由于lgnite未能正确实施类序列化过滤器攻击者能够利用恶意序列化对象绕过安全检查从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。',
fixMethod: '升级Apache Ignite至安全版本2.17.0', fixMethod: '升级Apache Ignite至安全版本2.17.0',
fromTime: '2025-2-20' fromTime: '2025-2-20',
text: `## 一、概要
近日安全中心发现Apache lgnite远程代码执行漏洞CVE-2024-52577。在 2.6.0<Apache Ignite< 2.17.0版本中由于lgnite未能正确实施类序列化过滤器攻击者能够利用恶意序列化对象绕过安全检查从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。
## 二、修复方案
升级Apache Ignite至安全版本2.17.0`
}); });
const toolbarConfig = [
['undo', 'redo'],
['h1', 'h2', 'bold', 'italic', 'strike', 'underline', 'color', 'font'],
['ul', 'ol', 'checklist', 'code', 'link', 'image', 'table'],
];
const mode = ref('readonly');
// warningData.value = propsData.warningData; // warningData.value = propsData.warningData;
const confirm = () => { const confirm = () => {
emit('close'); emit('close');
}; };
const handleModeChange = () => {
if (mode.value === 'editonly') {
mode.value = 'readonly';
} else {
mode.value = 'editonly';
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -56,7 +86,9 @@ const confirm = () => {
padding: 4px 20px 12px; padding: 4px 20px 12px;
.sub-title { .sub-title {
>span { display: flex;
justify-content: space-between;
>div:first-of-type>span {
margin-right: 12px; margin-right: 12px;
color: #808080; color: #808080;
font-family: HarmonyOS Sans SC; font-family: HarmonyOS Sans SC;
@@ -68,6 +100,22 @@ const confirm = () => {
.warning-text { .warning-text {
padding: 20px; padding: 20px;
background: #F6F6F8; background: #F6F6F8;
color: initial;
::v-deep .dp-md-view {
h2 {
font-size: 1.5em;
font-weight: bold;
}
p {
color: #252B3A;
font-family: 苹方-;
font-size: 14px;
line-height: 24px;
font-weight: 400;
}
}
.text-box { .text-box {
@@ -80,11 +128,12 @@ const confirm = () => {
line-height: 24px; line-height: 24px;
} }
p { ::v-deep .devui-textarea {
color: #252B3A; color: #252B3A;
font-family: 苹方-; font-family: 苹方-;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 400;
} }
} }
} }

View File

@@ -0,0 +1,39 @@
<template>
<div class="version-info">
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
<d-tab id="personalBasic" title="基本信息"></d-tab>
<d-tab id="organizationManage" title="组织管理"></d-tab>
<d-tab id="invitation" title="邀请通知"></d-tab>
</d-tabs>
<PersonalBasic v-if="selectTab === 'personalBasic'" />
<OrganizationManage v-if="selectTab === 'organizationManage'" />
<InvitationNoticeList v-if="selectTab === 'invitation'" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PersonalBasic from '../PersonalBasic.vue';
import OrganizationManage from '../OrganizationManage/OrganizationManage.vue';
import InvitationNoticeList from '../Detail/InvitationNoticeList.vue';
const selectTab = ref('personalBasic');
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>
<style lang="scss">
.warning-modal {
width: auto;
.devui-modal__header {
font-size: 20px;
height: auto !important;
}
.devui-modal__body {
padding: 0;
}
}
</style>

View File

@@ -1,244 +1,153 @@
<template> <template>
<div> <div class="mt-3">
<div v-if="hasOrganization"> <div v-if="hasOrganization">
<d-card class="mb-[16px] bg-white" shadow="never"> <d-card class="mb-[16px] bg-white" shadow="never">
<div class="text-[14px] w-full flex items-center justify-between"> <div class="text-[14px] w-full flex items-center justify-between">
<div class="font-bold mb-[16px]">基础信息</div> <div class="font-bold mb-[16px]">基础信息</div>
<div> <div>
<d-icon <d-icon v-if="!isEdit" class="font-normal" name="edit" operable @click="editIconClick">
v-if="!isEdit" <template #suffix>
class="font-normal" <span>编辑</span>
name="edit" </template>
operable </d-icon>
@click="editIconClick" </div>
>
<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>
<d-form ref="baseInfoFormRef" :data="createFormData" message-type="none">
<div v-else> <d-form-item field="organizationName" label="组织名称">
<NoData :small="false"> <d-input v-if="isEdit" v-model="createFormData.organizationName" />
<div class="font-bold mb-[20px]">很抱歉当前无任何组织赶快去</div> <div v-else>{{ organizationInfo.organizationName }}</div>
<d-button </d-form-item>
size="lg" <d-form-item field="organizationProfile" label="组织简介">
variant="solid" <d-textarea v-if="isEdit" v-model="createFormData.organizationProfile" show-count maxlength="200" />
@click="openCreateOrganizationModal" <div v-else>{{ organizationInfo.organizationProfile }}</div>
>新建组织</d-button> </d-form-item>
</NoData> </d-form>
<div v-if="isEdit">
<d-button variant="solid" class="mr-[8px]" @click="editOrganizationConfirm">完成</d-button>
<d-button @click="editOrganizationCancel">取消</d-button>
</div> </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>
<d-modal <div v-else>
v-model="createOrganizationModalCtrl" <NoData :small="false">
title="新建组织" <div class="font-bold mb-[20px]">很抱歉当前无任何组织赶快去</div>
class="w-[600px]" <d-button size="lg" variant="solid" @click="openCreateOrganizationModal">新建组织</d-button>
> </NoData>
<d-form </div>
ref="createFormRef" </div>
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"
/>
</d-form-item>
</d-form>
<div class="flex justify-center"> <d-modal v-model="createOrganizationModalCtrl" title="新建组织" class="w-[600px]">
<d-button <d-form ref="createFormRef" layout="vertical" :data="createFormData" message-type="none">
variant="solid" <d-form-item field="organizationName" label="组织名称" required>
class="mr-[8px]" <d-input v-model="createFormData.organizationName" />
@click="confirmCreateOrganizationBtnClick" </d-form-item>
>确定</d-button> <d-form-item field="organizationProfile" label="组织简介" required>
<d-button @click="closeOrganizationModal">取消</d-button> <d-textarea v-model="createFormData.organizationProfile" show-count maxlength="200" />
</div> </d-form-item>
</d-modal> </d-form>
<d-modal <div class="flex justify-center">
v-model="inviteMemberModalCtrl" <d-button variant="solid" class="mr-[8px]" @click="confirmCreateOrganizationBtnClick">确定</d-button>
title="邀请成员" <d-button @click="closeOrganizationModal">取消</d-button>
class="w-[600px]" </div>
> </d-modal>
<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-modal v-model="inviteMemberModalCtrl" title="邀请成员" class="w-[600px]">
<d-button <d-form ref="inviteMemberFormRef" layout="vertical" :data="inviteMemberFormData" message-type="none">
variant="solid" <d-form-item field="userName" label="成员" required>
class="mr-[8px]" <d-input v-model="inviteMemberFormData.userName" placeholder="请输入" />
@click="inviteMemberConfirmBtnClick" </d-form-item>
>确定</d-button> <d-form-item field="role" label="角色" required>
<d-button @click="closeInviteMemberModal">取消</d-button> <d-select v-model="inviteMemberFormData.role">
</div> <d-option v-for="item of inviteMemberSelectOptions" :key="item.value" :value="item.value" :name="item.name" />
</d-modal> </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 <d-modal v-model="deleteMemberModalCtrl" title="删除成员" class="w-[600px]">
v-model="deleteMemberModalCtrl" <div>即将删除成员{{ deleteRow.userName }}请确认是否继续</div>
title="删除成员" <div class="flex justify-center">
class="w-[600px]" <d-button variant="solid" class="mr-[8px]" @click="deleteMember">确定</d-button>
> <d-button @click="closeDeleteMemberModal">取消</d-button>
<div> </div>
即将删除成员{{ deleteRow.userName }}请确认是否继续 </d-modal>
</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> </template>
<script setup lang="ts"> <script setup lang="ts">
import {reactive, ref, shallowRef} from "vue"; import { reactive, ref, shallowRef } from 'vue';
import NoData from "@/components/NoData/NoData.vue"; import NoData from '@/components/NoData/NoData.vue';
import { import {
createOrganizationApi, deleteOrganizationMemberApi, createOrganizationApi,
getOrganizationInfoApi, getOrganizationMemberListApi, inviteOrganizationMemberApi, deleteOrganizationMemberApi,
getOrganizationInfoApi,
getOrganizationMemberListApi,
inviteOrganizationMemberApi,
updateOrganizationInfoApi updateOrganizationInfoApi
} from "@/api/organizationManage/organizationManageApi"; } from '@/api/organizationManage/organizationManageApi';
import { import {
type OrganizationInfoType, type OrganizationInfoType,
type OrganizationMemberItemType, type OrganizationMemberItemType
} from "@/api/organizationManage/organizationManageType"; } from '@/api/organizationManage/organizationManageType';
import table from "@/components/AIRepair/Table.vue"; import table from '@/components/AIRepair/Table.vue';
const searchOrganizationLoading = ref(false); const searchOrganizationLoading = ref(false);
const hasOrganization = ref(false); const hasOrganization = ref(false);
const organizationInfo = shallowRef<OrganizationInfoType>({ const organizationInfo = shallowRef<OrganizationInfoType>({
organizationName: '', organizationName: '',
organizationProfile: '', organizationProfile: ''
}); });
const createOrganizationModalCtrl = ref(false); const createOrganizationModalCtrl = ref(false);
const createFormData = reactive({ const createFormData = reactive({
organizationName: '', organizationName: '',
organizationProfile: '', // 组织简介 organizationProfile: '' // 组织简介
}); });
const createFormRef = ref(); const createFormRef = ref();
const createOrganizationLoading = ref(false); const createOrganizationLoading = ref(false);
@@ -250,9 +159,9 @@ const memberListSearchLoading = ref(false);
const memberListSearchParam = ref(''); const memberListSearchParam = ref('');
const memberTableData = shallowRef<OrganizationMemberItemType[]>([]); const memberTableData = shallowRef<OrganizationMemberItemType[]>([]);
const pager = reactive({ const pager = reactive({
pageSize: 10, pageSize: 10,
pageIndex: 1, pageIndex: 1,
total: 0, total: 0
}); });
const deleteRow = shallowRef<OrganizationMemberItemType>(null); const deleteRow = shallowRef<OrganizationMemberItemType>(null);
@@ -263,199 +172,193 @@ const inviteMemberFormRef = ref();
const inviteMemberModalCtrl = ref(false); const inviteMemberModalCtrl = ref(false);
const inviteMemberLoading = ref(false); const inviteMemberLoading = ref(false);
const inviteMemberFormData = reactive({ const inviteMemberFormData = reactive({
userName: '', userName: '',
role: '', role: ''
}); });
const inviteMemberSelectOptions = [ const inviteMemberSelectOptions = [
{ name: '创建者', value: 'creator' }, { name: '创建者', value: 'creator' },
{ name: '成员', value: 'member' }, { name: '成员', value: 'member' }
]; ];
const memberRoleMap = { const memberRoleMap = {
creator: '创建者', creator: '创建者',
member: '成员', member: '成员'
}; };
const mockTableData = [ const mockTableData = [
{ userName: '张三', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '1' }, { 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: '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: '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: '4' },
{ userName: '秦七', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '5' }, { userName: '秦七', role: 'member', email: '111@gmail.com', joinDate: '2090-02-30', id: '5' }
]; ];
// -------------------- 获取组织信息 -------------------- // -------------------- 获取组织信息 --------------------
async function getOrganizationInfo() { async function getOrganizationInfo() {
const params = { const params = {
organizationName: createFormData.organizationName, organizationName: createFormData.organizationName,
organizationProfile: createFormData.organizationProfile, organizationProfile: createFormData.organizationProfile
}; };
searchOrganizationLoading.value = true; searchOrganizationLoading.value = true;
try { try {
const res = await getOrganizationInfoApi(params); const res = await getOrganizationInfoApi(params);
} catch (e) { } catch (e) {}
searchOrganizationLoading.value = false;
} getMemberList();
searchOrganizationLoading.value = false; // TODO 待接口定义好后删除下面两行固定赋值语句
getMemberList(); hasOrganization.value = true;
// TODO 待接口定义好后删除下面两行固定赋值语句 organizationInfo.value = {
hasOrganization.value = true; organizationName: createFormData.organizationName,
organizationInfo.value = { organizationName: createFormData.organizationName, organizationProfile: createFormData.organizationProfile }; organizationProfile: createFormData.organizationProfile
};
} }
// -------------------- 获取成员信息 -------------------- // -------------------- 获取成员信息 --------------------
async function getOrganizationMember(organizationId: string) { async function getOrganizationMember(organizationId: string) {
const params = {}; const params = {};
} }
// -------------------- 创建组织 -------------------- // -------------------- 创建组织 --------------------
function confirmCreateOrganizationBtnClick() { function confirmCreateOrganizationBtnClick() {
createFormRef.value.validate((isValid: boolean) => { createFormRef.value.validate((isValid: boolean) => {
if (isValid) { if (isValid) {
createOrganization(); createOrganization();
} }
}); });
} }
async function createOrganization() { async function createOrganization() {
const params = { const params = {
organizationName: createFormData.organizationName, organizationName: createFormData.organizationName,
organizationProfile: createFormData.organizationProfile, organizationProfile: createFormData.organizationProfile
}; };
createOrganizationLoading.value = true; createOrganizationLoading.value = true;
try { try {
const res = await createOrganizationApi(params); const res = await createOrganizationApi(params);
} catch (e) { } catch (e) {}
closeOrganizationModal();
} // TODO 待接口定义好后删除下面调用逻辑
closeOrganizationModal(); getOrganizationInfo();
// TODO 待接口定义好后删除下面调用逻辑 createOrganizationLoading.value = false;
getOrganizationInfo();
createOrganizationLoading.value = false;
} }
function openCreateOrganizationModal() { function openCreateOrganizationModal() {
createOrganizationModalCtrl.value = true; createOrganizationModalCtrl.value = true;
} }
function closeOrganizationModal() { function closeOrganizationModal() {
createOrganizationModalCtrl.value = false; createOrganizationModalCtrl.value = false;
} }
// -------------------- 编辑组织信息 -------------------- // -------------------- 编辑组织信息 --------------------
function editIconClick() { function editIconClick() {
isEdit.value = true; isEdit.value = true;
} }
async function editOrganizationConfirm() { async function editOrganizationConfirm() {
editLoading.value = true; editLoading.value = true;
const params = { const params = {
organizationName: createFormData.organizationName, organizationName: createFormData.organizationName,
organizationProfile: createFormData.organizationProfile, organizationProfile: createFormData.organizationProfile
}; };
try { try {
const res = await updateOrganizationInfoApi(params); const res = await updateOrganizationInfoApi(params);
} catch (e) { } catch (e) {}
editLoading.value = false;
} isEdit.value = false;
editLoading.value = false; // TODO 待接口定义好后删除下面两行固定赋值语句
isEdit.value = false; hasOrganization.value = true;
// TODO 待接口定义好后删除下面两行固定赋值语句 organizationInfo.value = {
hasOrganization.value = true; organizationName: createFormData.organizationName,
organizationInfo.value = { organizationName: createFormData.organizationName, organizationProfile: createFormData.organizationProfile }; organizationProfile: createFormData.organizationProfile
};
} }
function editOrganizationCancel() { function editOrganizationCancel() {
isEdit.value = false; isEdit.value = false;
createFormData.organizationName = organizationInfo.value.organizationName; createFormData.organizationName = organizationInfo.value.organizationName;
createFormData.organizationProfile = organizationInfo.value.organizationProfile; createFormData.organizationProfile = organizationInfo.value.organizationProfile;
} }
// -------------------- 邀请、查询成员 -------------------- // -------------------- 邀请、查询成员 --------------------
async function getMemberList() { async function getMemberList() {
const params = { const params = {
organizationName: createFormData.organizationName, organizationName: createFormData.organizationName,
pageIndex: pager.pageIndex, pageIndex: pager.pageIndex,
pageSize: pager.pageSize, pageSize: pager.pageSize,
searchParam: memberListSearchParam.value, searchParam: memberListSearchParam.value
}; };
memberListSearchLoading.value = true; memberListSearchLoading.value = true;
try { try {
const res = await getOrganizationMemberListApi(params); const res = await getOrganizationMemberListApi(params);
} catch (e) { } catch (e) {}
memberTableData.value = mockTableData;
} pager.total = 6;
memberTableData.value = mockTableData; memberListSearchLoading.value = false;
pager.total = 6;
memberListSearchLoading.value = false;
} }
function openInviteMemberModal() { function openInviteMemberModal() {
inviteMemberModalCtrl.value = true; inviteMemberModalCtrl.value = true;
} }
function openDeleteModal(row: any) { function openDeleteModal(row: any) {
deleteRow.value = row; deleteRow.value = row;
deleteMemberModalCtrl.value = true; deleteMemberModalCtrl.value = true;
} }
function inviteMemberConfirmBtnClick() { function inviteMemberConfirmBtnClick() {
inviteMemberFormRef.value.validate((isValid: boolean) => { inviteMemberFormRef.value.validate((isValid: boolean) => {
if (isValid) { if (isValid) {
console.log('aaaaaaaa') console.log('aaaaaaaa');
inviteMember(); inviteMember();
} }
}); });
} }
async function inviteMember() { async function inviteMember() {
const params = { const params = {
userName: inviteMemberFormData.userName, userName: inviteMemberFormData.userName,
role: inviteMemberFormData.role, role: inviteMemberFormData.role
}; };
inviteMemberLoading.value = true; inviteMemberLoading.value = true;
try { try {
const res = await inviteOrganizationMemberApi(params); const res = await inviteOrganizationMemberApi(params);
} catch (e) { } catch (e) {}
inviteMemberLoading.value = false;
} closeInviteMemberModal();
inviteMemberLoading.value = false; // TODO 待接口定义好后删除下面调用逻辑
closeInviteMemberModal(); mockTableData.unshift({
// TODO 待接口定义好后删除下面调用逻辑 userName: inviteMemberFormData.userName,
mockTableData.unshift({ role: inviteMemberFormData.role,
userName: inviteMemberFormData.userName, joinDate: new Date().toDateString(),
role: inviteMemberFormData.role, id: String(pager.total++),
joinDate: new Date().toDateString(), email: `${inviteMemberFormData.userName}@gmail.com`
id: String(pager.total++), });
email: `${inviteMemberFormData.userName}@gmail.com`, memberTableData.value = [...mockTableData];
});
memberTableData.value = [...mockTableData];
} }
function closeInviteMemberModal() { function closeInviteMemberModal() {
inviteMemberModalCtrl.value = false; inviteMemberModalCtrl.value = false;
} }
async function deleteMember() { async function deleteMember() {
const params = { const params = {
id: deleteRow.value.id, id: deleteRow.value.id
}; };
deleteMemberLoading.value = true; deleteMemberLoading.value = true;
try { try {
const res = await deleteOrganizationMemberApi(params); const res = await deleteOrganizationMemberApi(params);
} catch (e) { } catch (e) {}
deleteMemberLoading.value = false;
} closeDeleteMemberModal();
deleteMemberLoading.value = false; // TODO 待接口定义好后删除下面调用逻辑
closeDeleteMemberModal(); const index = mockTableData.findIndex((item) => item.id === deleteRow.value.id);
// TODO 待接口定义好后删除下面调用逻辑 mockTableData.splice(index, 1);
const index = mockTableData.findIndex(item => item.id === deleteRow.value.id); memberTableData.value = [...mockTableData];
mockTableData.splice(index, 1); pager.total--;
memberTableData.value = [...mockTableData];
pager.total--;
} }
function closeDeleteMemberModal() { function closeDeleteMemberModal() {
deleteMemberModalCtrl.value = false; deleteMemberModalCtrl.value = false;
} }
</script> </script>

View File

@@ -0,0 +1,58 @@
<template>
<div class="mt-3">
<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-form layout="vertical" class="ml-3 mr-3" :data="forms">
<d-row :gutter="16">
<d-col span="8">
<d-form-item field="name" label="名称" required>
<d-input v-model="forms.name" />
</d-form-item>
</d-col>
<d-col span="8">
<d-form-item field="email" label="邮件" required>
<d-input v-model="forms.email" />
</d-form-item>
</d-col>
<d-col span="8">
<d-form-item field="phone" label="电话" required>
<d-input v-model="forms.phone" />
</d-form-item>
</d-col>
</d-row>
</d-form>
</d-card>
<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-form layout="vertical">
<d-form-item field="radio" label="是否开启邮件通知">
<d-radio-group direction="row" v-model="radio">
<d-radio value="0">开启</d-radio>
<d-radio value="1">关闭</d-radio>
</d-radio-group>
</d-form-item>
</d-form>
</d-card>
<div class="flex">
<d-button variant="solid" class="mr-[8px]">提交</d-button>
<d-button color="secondary" class="mr-[8px]">保存草稿</d-button>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
const radio = ref('1');
const forms = reactive({
name: '',
email: '',
phone: ''
});
</script>
<style scoped lang="scss"></style>

View File

@@ -3,35 +3,35 @@
<div class="version-header"> <div class="version-header">
<d-breadcrumb class="secret-breadcrumb"> <d-breadcrumb class="secret-breadcrumb">
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item> <gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
<!-- <gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">高级搜索</span></gc-breadcrumb-item>--> <!-- <gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">高级搜索</span></gc-breadcrumb-item>-->
<gc-breadcrumb-item><span class="cur-title">个人中心</span></gc-breadcrumb-item> <gc-breadcrumb-item><span class="cur-title">个人中心</span></gc-breadcrumb-item>
</d-breadcrumb> </d-breadcrumb>
<div class="version-detail-header"> <div class="version-detail-header">
<div class="header-top"> <div class="header-top">
<GAvatar style="margin-right: 16px" :name="accountInfo.username" :src="accountInfo.avatar" name="Vue" :width="72" :height="72"></GAvatar> <GAvatar style="margin-right: 16px" :src="avatarUrl" name="Vue" :width="72" :height="72"></GAvatar>
<div class="pt-24"> <div class="pt-24">
<div class="header-title1">{{ accountInfo.username || '--' }}</div> <div class="header-title1">UserName</div>
<div class="header-div"> <div class="header-div">
<span class="span1">介绍包含项目管理代码托管CI/CD 和制品库等功能提供完整的研发流程建议的新的团队</span> <span class="span1"
>介绍包含项目管理代码托管CI/CD 和制品库等功能提供完整的研发流程建议的新的团队</span
>
</div> </div>
</div> </div>
<!-- <div class="fr">--> <!-- <div class="fr">-->
<!-- <d-button class="mr-2" variant="solid">订阅</d-button>--> <!-- <d-button class="mr-2" variant="solid">订阅</d-button>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-3" type="wrapped" v-model="selectTab"> <d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-3" type="wrapped" v-model="selectTab">
<d-tab id="yjtzlb" title="预警通知列表"></d-tab> <d-tab id="yjtzlb" title="预警通知列表"></d-tab>
<d-tab id="dylb" title="订阅列表"></d-tab> <d-tab id="dylb" title="订阅列表"></d-tab>
<d-tab id="organizationManage" title="组织管理"></d-tab> <d-tab id="personalSettings" title="个人设置"></d-tab>
<d-tab id="invitation" title="邀请通知"></d-tab>
</d-tabs> </d-tabs>
</div> </div>
</div> </div>
<div class="version-detail-content"> <div class="version-detail-content">
<early-warning v-if="selectTab==='yjtzlb'"/> <early-warning v-if="selectTab === 'yjtzlb'" />
<subscribe-list v-if="selectTab==='dylb'"/> <subscribe-list v-if="selectTab === 'dylb'" />
<OrganizationManage v-if="selectTab === 'organizationManage'" /> <personal-settings v-if="selectTab === 'personalSettings'" />
<InvitationNoticeList v-if="selectTab === 'invitation'" />
</div> </div>
</div> </div>
</template> </template>
@@ -42,15 +42,12 @@ import { useRouter, useRoute } from 'vue-router';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo'; import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import EarlyWarning from './Detail/EarlyWarning.vue'; import EarlyWarning from './Detail/EarlyWarning.vue';
import SubscribeList from './Detail/SubscribeList.vue'; import SubscribeList from './Detail/SubscribeList.vue';
import OrganizationManage from './OrganizationManage/OrganizationManage.vue'; import PersonalSettings from './Detail/PersonalSettings.vue';
import InvitationNoticeList from './Detail/InvitationNoticeList.vue';
import { useAccount } from '@/utils/hooks/useAccount';
const { namespace } = getOrgInfo(); const { namespace } = getOrgInfo();
const avatarUrl = '/src/assets/imgs/avatar/male.png'; const avatarUrl = '/src/assets/imgs/avatar/male.png';
const selectTab = ref('yjtzlb'); const selectTab = ref('yjtzlb');
const { accountInfo, RemoveInfo } = useAccount();
// 删除弹窗 // 删除弹窗
const item = ref(''); const item = ref('');