2026-04-02 12:06:51 +08:00
|
|
|
|
<template>
|
2026-04-01 22:39:11 +08:00
|
|
|
|
<el-dialog
|
|
|
|
|
|
v-model="visible"
|
|
|
|
|
|
title="共享文件"
|
2026-04-02 15:02:54 +08:00
|
|
|
|
width="400px"
|
2026-04-01 22:39:11 +08:00
|
|
|
|
class="custom-dialog"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-form label-width="80px">
|
|
|
|
|
|
<el-form-item label="文件名">
|
|
|
|
|
|
<el-input :value="file?.name" disabled>
|
|
|
|
|
|
<template #prefix><el-icon><Document /></el-icon></template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="共享给">
|
|
|
|
|
|
<el-select v-model="selectedUsers" multiple placeholder="选择用户" style="width: 100%">
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="user in userList"
|
|
|
|
|
|
:key="user.id"
|
|
|
|
|
|
:label="user.nickname || user.username"
|
|
|
|
|
|
:value="user.id"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="权限">
|
|
|
|
|
|
<el-radio-group v-model="permission">
|
|
|
|
|
|
<el-radio value="view">仅查看</el-radio>
|
|
|
|
|
|
<el-radio value="edit">可编辑</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<el-button @click="visible = false">
|
|
|
|
|
|
<el-icon><Close /></el-icon>
|
|
|
|
|
|
<span style="margin-left: 4px">取消</span>
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="handleShare" :disabled="selectedUsers.length === 0">
|
|
|
|
|
|
<el-icon><Check /></el-icon>
|
|
|
|
|
|
<span style="margin-left: 4px">保存</span>
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, computed, watch } from 'vue'
|
|
|
|
|
|
import { Close, Check, Document } from '@element-plus/icons-vue'
|
|
|
|
|
|
import { getUsers } from '@/api/user'
|
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
modelValue: Boolean,
|
|
|
|
|
|
file: Object
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['update:modelValue', 'share'])
|
|
|
|
|
|
|
|
|
|
|
|
const visible = computed({
|
|
|
|
|
|
get: () => props.modelValue,
|
|
|
|
|
|
set: (v) => emit('update:modelValue', v)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const selectedUsers = ref([])
|
|
|
|
|
|
const permission = ref('view')
|
|
|
|
|
|
const userList = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const loadUsers = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await getUsers()
|
|
|
|
|
|
userList.value = res.data || []
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
ElMessage.error('获取用户列表失败')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
watch(visible, (v) => {
|
|
|
|
|
|
if (v) {
|
|
|
|
|
|
selectedUsers.value = []
|
|
|
|
|
|
permission.value = 'view'
|
|
|
|
|
|
loadUsers()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const handleShare = () => {
|
|
|
|
|
|
emit('share', {
|
|
|
|
|
|
users: selectedUsers.value,
|
|
|
|
|
|
permission: permission.value
|
|
|
|
|
|
})
|
|
|
|
|
|
visible.value = false
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
