98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<a-modal
|
|
v-model:open="modalVisible"
|
|
title="批量分组"
|
|
centered
|
|
@ok="handleConfirm"
|
|
@cancel="handleCancel"
|
|
>
|
|
<a-form layout="vertical">
|
|
<a-form-item label="选择分组" required>
|
|
<a-select
|
|
v-model:value="selectedGroupId"
|
|
placeholder="请选择要添加到的分组"
|
|
style="width: 100%"
|
|
>
|
|
<a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
|
|
{{ group.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
|
|
<p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
|
|
{{ groupingInfo }}
|
|
</p>
|
|
</div>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue'
|
|
import { message } from 'ant-design-vue'
|
|
|
|
const props = defineProps({
|
|
open: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
groupList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 可选的信息，组件会显示但不会强依赖
|
|
fileName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fileCount: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:open', 'confirm', 'cancel'])
|
|
|
|
// 数据
|
|
const selectedGroupId = ref(null)
|
|
const modalVisible = ref(false)
|
|
|
|
// 计算分组提示信息
|
|
const groupingInfo = computed(() => {
|
|
if (props.fileName) {
|
|
return `将为文件 "${props.fileName}" 添加到选中的分组中`
|
|
}
|
|
if (props.fileCount > 0) {
|
|
return `将为 ${props.fileCount} 个文件添加到选中的分组中`
|
|
}
|
|
return '将为选中文件添加到选中的分组中'
|
|
})
|
|
|
|
// 监听 open 变化
|
|
watch(() => props.open, (newVal) => {
|
|
modalVisible.value = newVal
|
|
if (!newVal) {
|
|
selectedGroupId.value = null
|
|
}
|
|
})
|
|
|
|
// 处理确认
|
|
const handleConfirm = () => {
|
|
if (!selectedGroupId.value) {
|
|
message.warning('请选择分组')
|
|
return
|
|
}
|
|
|
|
emit('confirm', selectedGroupId.value)
|
|
handleCancel()
|
|
}
|
|
|
|
// 处理取消
|
|
const handleCancel = () => {
|
|
modalVisible.value = false
|
|
selectedGroupId.value = null
|
|
emit('update:open', false)
|
|
emit('cancel')
|
|
}
|
|
</script>
|