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>
|