126 lines
4.0 KiB
Vue
126 lines
4.0 KiB
Vue
<!-- eslint-disable vue/no-v-model-argument -->
|
||
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
title="设置分享人员"
|
||
width="620px"
|
||
class="doclib-dialog dialog-form-layout"
|
||
align-center
|
||
destroy-on-close
|
||
:close-on-click-modal="!saving"
|
||
:close-on-press-escape="!saving"
|
||
:show-close="!saving"
|
||
>
|
||
<p class="doclib-summary">{{ document?.name }}</p>
|
||
<el-form label-position="top">
|
||
<el-form-item>
|
||
<template #label
|
||
>分享给<span class="form-label-tip">可多选，取消选择即收回访问权限</span></template
|
||
>
|
||
<el-select
|
||
v-model="userIds"
|
||
multiple
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
:remote-method="searchUsers"
|
||
:loading="loading"
|
||
:disabled="saving"
|
||
placeholder="搜索同租户人员姓名或账号"
|
||
class="doclib-full-width"
|
||
>
|
||
<el-option
|
||
v-for="person in options"
|
||
:key="person.id"
|
||
:value="person.id"
|
||
:label="person.name"
|
||
>
|
||
<span>{{ person.name }}</span
|
||
><span class="doclib-person-dept">{{ person.deptName || '未分配部门' }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<p class="doclib-muted">分享人员可以查看和下载文档，不能删除或修改分享设置。</p>
|
||
<template #footer>
|
||
<el-button :disabled="saving" @click="visible = false"
|
||
><el-icon><Close /></el-icon>取消</el-button
|
||
>
|
||
<el-button type="primary" :loading="saving" @click="save"
|
||
><el-icon><Check /></el-icon>保存分享</el-button
|
||
>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { Close, Check } from '@element-plus/icons-vue'
|
||
import {
|
||
fetchDoclibUsers,
|
||
saveDoclibShares,
|
||
type DoclibDocument,
|
||
type DoclibPerson
|
||
} from '@/api/doclib'
|
||
import { createLatestRequest } from './model'
|
||
const props = defineProps<{ modelValue: boolean; document: DoclibDocument | null }>()
|
||
const emit = defineEmits<{
|
||
'update:modelValue': [value: boolean]
|
||
saved: [document: DoclibDocument]
|
||
}>()
|
||
const visible = computed({
|
||
get: () => props.modelValue,
|
||
set: (value) => {
|
||
if (!saving.value) emit('update:modelValue', value)
|
||
}
|
||
})
|
||
const saving = ref(false)
|
||
const loading = ref(false)
|
||
const userIds = ref<string[]>([])
|
||
const people = ref<DoclibPerson[]>([])
|
||
const requests = createLatestRequest()
|
||
const options = computed(() => {
|
||
const candidates = new Map((props.document?.shares || []).map((person) => [person.id, person]))
|
||
people.value.forEach((person) => candidates.set(person.id, person))
|
||
return [...candidates.values()].filter((person) => person.id !== props.document?.ownerId)
|
||
})
|
||
watch(
|
||
() => props.modelValue,
|
||
(value) => {
|
||
requests.invalidate()
|
||
if (!value) return
|
||
userIds.value = (props.document?.shares || []).map((person) => person.id)
|
||
people.value = []
|
||
void searchUsers('')
|
||
}
|
||
)
|
||
onBeforeUnmount(() => requests.invalidate())
|
||
async function searchUsers(keyword: string) {
|
||
const token = requests.start()
|
||
loading.value = true
|
||
try {
|
||
const result = await fetchDoclibUsers(keyword.trim())
|
||
if (requests.isCurrent(token)) {
|
||
const retained = people.value.filter((person) => userIds.value.includes(person.id))
|
||
people.value = [...retained, ...result]
|
||
}
|
||
} catch {
|
||
/* 请求层统一展示错误 */
|
||
} finally {
|
||
if (requests.isCurrent(token)) loading.value = false
|
||
}
|
||
}
|
||
async function save() {
|
||
if (!props.document?.canManage || saving.value) return
|
||
saving.value = true
|
||
try {
|
||
const updated = await saveDoclibShares(props.document.id, userIds.value)
|
||
ElMessage.success('分享设置已保存')
|
||
emit('saved', updated)
|
||
emit('update:modelValue', false)
|
||
} catch {
|
||
/* 请求层统一展示错误 */
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
</script>
|