381 lines
9.3 KiB
Vue
381 lines
9.3 KiB
Vue
<template>
|
||
<div class="share-config-form">
|
||
<div class="share-config-content">
|
||
<div class="share-mode-cards" role="radiogroup" aria-label="共享设置">
|
||
<button
|
||
v-for="option in shareModeOptions"
|
||
:key="option.value"
|
||
type="button"
|
||
role="radio"
|
||
class="share-mode-card"
|
||
:class="{ active: config.is_shared === option.value }"
|
||
:aria-checked="config.is_shared === option.value"
|
||
:tabindex="config.is_shared === option.value ? 0 : -1"
|
||
@click="setShareMode(option.value)"
|
||
@keydown.enter.prevent="setShareMode(option.value)"
|
||
@keydown.space.prevent="setShareMode(option.value)"
|
||
>
|
||
<div class="card-icon-wrapper" aria-hidden="true">
|
||
<component :is="option.icon" class="card-icon" :size="20" />
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-title">{{ option.title }}</div>
|
||
<div class="card-description">{{ option.description }}</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div v-if="!config.is_shared" class="compact-dept-selection">
|
||
<div class="dept-selection-header">
|
||
<div class="dept-selection-label">可访问部门</div>
|
||
<div class="dept-selection-hint">请选择可访问该知识库的部门</div>
|
||
</div>
|
||
<a-select
|
||
v-model:value="config.accessible_department_ids"
|
||
mode="multiple"
|
||
placeholder="请选择部门"
|
||
size="small"
|
||
class="full-width dept-selection-input"
|
||
:options="departmentOptions"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, watch, onMounted } from 'vue'
|
||
import { Globe, Building2 } from 'lucide-vue-next'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { departmentApi } from '@/apis/department_api'
|
||
|
||
const userStore = useUserStore()
|
||
const departments = ref([])
|
||
|
||
const shareModeOptions = [
|
||
{
|
||
value: true,
|
||
title: '公开给团队',
|
||
description: '团队内所有成员都可以访问这个知识库',
|
||
icon: Globe
|
||
},
|
||
{
|
||
value: false,
|
||
title: '仅指定部门',
|
||
description: '只有选中的部门成员可以访问这个知识库',
|
||
icon: Building2
|
||
}
|
||
]
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({
|
||
is_shared: true,
|
||
accessible_department_ids: []
|
||
})
|
||
},
|
||
// 是否自动选中当前用户所在部门
|
||
autoSelectUserDept: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue'])
|
||
|
||
// 本地状态，直接从 props 初始化
|
||
const config = reactive({
|
||
is_shared: true,
|
||
accessible_department_ids: []
|
||
})
|
||
|
||
// 初始化 config
|
||
const initConfig = () => {
|
||
// 后端返回的是 accessible_departments，前端使用 accessible_department_ids
|
||
const sourceDepts =
|
||
props.modelValue.accessible_department_ids ?? props.modelValue.accessible_departments ?? []
|
||
config.is_shared = props.modelValue.is_shared ?? true
|
||
config.accessible_department_ids = sourceDepts.map((id) => Number(id))
|
||
console.log('[ShareConfigForm] initConfig:', JSON.stringify(config))
|
||
}
|
||
|
||
// 只在组件挂载时初始化一次
|
||
onMounted(() => {
|
||
initConfig()
|
||
})
|
||
|
||
// 监听本地 config 变化，同步到父组件
|
||
watch(
|
||
config,
|
||
(newVal) => {
|
||
console.log('[ShareConfigForm] config 变化，emit:', JSON.stringify(newVal))
|
||
emit('update:modelValue', {
|
||
is_shared: newVal.is_shared,
|
||
accessible_department_ids: newVal.accessible_department_ids
|
||
})
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
const setShareMode = (isShared) => {
|
||
if (config.is_shared === isShared) {
|
||
return
|
||
}
|
||
config.is_shared = isShared
|
||
}
|
||
|
||
// 监听共享模式变化
|
||
watch(
|
||
() => config.is_shared,
|
||
(newVal) => {
|
||
if (!newVal && props.autoSelectUserDept && config.accessible_department_ids.length === 0) {
|
||
// 切换到指定部门模式且未选中任何部门时，默认选中当前用户所在部门
|
||
tryAutoSelectUserDept()
|
||
}
|
||
}
|
||
)
|
||
|
||
// 尝试自动选中用户所在部门
|
||
const tryAutoSelectUserDept = () => {
|
||
const userDeptId = userStore.departmentId
|
||
if (userDeptId) {
|
||
const deptExists = departments.value.find((d) => d.id === userDeptId)
|
||
if (deptExists) {
|
||
// 确保存储为数字类型（a-select 返回的是字符串）
|
||
config.accessible_department_ids = [Number(userDeptId)]
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听用户部门变化（处理时序问题：departmentId 可能在组件 mounted 后才获取到）
|
||
watch(
|
||
() => userStore.departmentId,
|
||
(newDeptId) => {
|
||
if (
|
||
props.autoSelectUserDept &&
|
||
!config.is_shared &&
|
||
config.accessible_department_ids.length === 0 &&
|
||
newDeptId
|
||
) {
|
||
tryAutoSelectUserDept()
|
||
}
|
||
}
|
||
)
|
||
|
||
// 部门选项
|
||
const departmentOptions = computed(() =>
|
||
departments.value.map((dept) => ({
|
||
label: dept.name,
|
||
value: Number(dept.id)
|
||
}))
|
||
)
|
||
|
||
// 加载部门列表
|
||
const loadDepartments = async () => {
|
||
try {
|
||
const res = await departmentApi.getDepartments()
|
||
departments.value = res.departments || res || []
|
||
|
||
// 如果需要，自动选中用户所在部门
|
||
if (
|
||
props.autoSelectUserDept &&
|
||
!config.is_shared &&
|
||
config.accessible_department_ids.length === 0
|
||
) {
|
||
tryAutoSelectUserDept()
|
||
}
|
||
} catch (e) {
|
||
console.error('加载部门列表失败:', e)
|
||
departments.value = []
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadDepartments()
|
||
})
|
||
|
||
// 验证当前用户所在部门是否在可访问范围内
|
||
// 返回 { valid: boolean, message: string }
|
||
const validate = () => {
|
||
// 全员共享模式不需要验证
|
||
if (config.is_shared) {
|
||
return { valid: true, message: '' }
|
||
}
|
||
|
||
// 指定部门模式，需要验证当前用户所在部门是否在列表中
|
||
const userDeptId = userStore.departmentId
|
||
if (!userDeptId) {
|
||
return {
|
||
valid: false,
|
||
message: '您不属于任何部门，无法使用指定部门共享模式'
|
||
}
|
||
}
|
||
|
||
if (!config.accessible_department_ids.includes(userDeptId)) {
|
||
return {
|
||
valid: false,
|
||
message: '您所在的部门必须在可访问部门范围内'
|
||
}
|
||
}
|
||
|
||
return { valid: true, message: '' }
|
||
}
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
config,
|
||
validate
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.share-config-form {
|
||
.share-config-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
border-radius: 10px;
|
||
|
||
.share-mode-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 8px;
|
||
|
||
@media (max-width: 768px) {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.share-mode-card {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-height: 76px;
|
||
padding: 12px;
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 10px;
|
||
background: var(--gray-0);
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 0.2s ease,
|
||
background-color 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
|
||
&:hover,
|
||
&:focus-visible {
|
||
border-color: var(--main-color);
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px var(--main-20);
|
||
}
|
||
|
||
&.active {
|
||
border-color: var(--main-color);
|
||
background: var(--main-10);
|
||
box-shadow: 0 0 0 1px var(--main-20);
|
||
}
|
||
|
||
.card-icon-wrapper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
flex-shrink: 0;
|
||
border-radius: 10px;
|
||
background: var(--gray-50);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.card-icon {
|
||
color: var(--gray-500);
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.card-content {
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
flex: 1;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--gray-800);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
&.active .card-icon-wrapper {
|
||
background: var(--main-0);
|
||
}
|
||
|
||
&.active .card-icon {
|
||
color: var(--main-color);
|
||
}
|
||
|
||
.card-description {
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
color: var(--gray-600);
|
||
}
|
||
}
|
||
|
||
.dept-selection {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.compact-dept-selection {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--gray-150);
|
||
border-radius: 10px;
|
||
background: linear-gradient(180deg, var(--gray-0) 0%, var(--gray-50) 100%);
|
||
}
|
||
|
||
.dept-selection-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.dept-selection-label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--gray-800);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.dept-selection-hint {
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
.dept-selection-input {
|
||
:deep(.ant-select-selector) {
|
||
min-height: 36px;
|
||
padding: 3px 8px !important;
|
||
border-radius: 8px !important;
|
||
border-color: var(--gray-200) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
&:deep(.ant-select-focused .ant-select-selector),
|
||
&:deep(.ant-select-selector:hover) {
|
||
border-color: var(--main-color) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|