136 lines
2.9 KiB
Vue
136 lines
2.9 KiB
Vue
<template>
|
||
<a-modal
|
||
:open="visible"
|
||
title="选择素材分组"
|
||
:width="400"
|
||
:footer="null"
|
||
centered
|
||
@update:open="$emit('update:visible', $event)"
|
||
>
|
||
<div class="group-select-content">
|
||
<p class="group-select-hint">请选择用于填充的素材分组：</p>
|
||
<div class="group-select-list">
|
||
<div
|
||
v-for="group in groupList"
|
||
:key="group.id"
|
||
class="group-select-item"
|
||
:class="{ 'group-select-item--active': tempSelectedId === group.id }"
|
||
@click="tempSelectedId = group.id"
|
||
>
|
||
<FolderOutlined class="group-icon" />
|
||
<span class="group-name">{{ group.name }}</span>
|
||
<CheckOutlined v-if="tempSelectedId === group.id" class="group-check" />
|
||
</div>
|
||
</div>
|
||
<div class="group-select-footer">
|
||
<a-button @click="$emit('update:visible', false)">取消</a-button>
|
||
<a-button
|
||
type="primary"
|
||
:disabled="!tempSelectedId"
|
||
@click="handleConfirm"
|
||
>
|
||
确认填充
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { FolderOutlined, CheckOutlined } from '@ant-design/icons-vue'
|
||
|
||
const props = defineProps({
|
||
visible: { type: Boolean, default: false },
|
||
groupList: { type: Array, default: () => [] },
|
||
defaultGroupId: { type: [Number, String], default: null }
|
||
})
|
||
|
||
const emit = defineEmits(['update:visible', 'confirm'])
|
||
|
||
const tempSelectedId = ref(null)
|
||
|
||
watch(() => props.visible, (visible) => {
|
||
if (visible) {
|
||
tempSelectedId.value = props.defaultGroupId || (props.groupList[0]?.id ?? null)
|
||
}
|
||
})
|
||
|
||
const handleConfirm = () => {
|
||
if (!tempSelectedId.value) return
|
||
emit('confirm', tempSelectedId.value)
|
||
emit('update:visible', false)
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.group-select-content {
|
||
.group-select-hint {
|
||
margin: 0 0 16px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.group-select-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.group-select-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 14px;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
border-color: #1890ff;
|
||
background: #f0f7ff;
|
||
}
|
||
|
||
&--active {
|
||
border-color: #1890ff;
|
||
background: #e6f7ff;
|
||
|
||
.group-icon {
|
||
color: #1890ff;
|
||
}
|
||
|
||
.group-name {
|
||
color: #1890ff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.group-icon {
|
||
font-size: 18px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.group-name {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.group-check {
|
||
font-size: 14px;
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
|
||
.group-select-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
</style>
|