shuhi-ui/src/views/salesOps/decoration/components/DiamondEdit.vue

<template>
    <el-dialog v-model="visible" title="金刚区编辑" width="600px" :close-on-click-modal="false">
        <div class="diamond-edit">
            <div v-for="(item, index) in items" :key="index"
                class="flex items-center gap-4 mb-4 p-3 border rounded bg-gray-50 relative group">
                <ImageUpload v-model="item.image" :limit="1" :isShowTip="false" />

                <div class="flex-1">
                    <el-input v-model="item.title" placeholder="请输入标题 (不超过5个字)" maxlength="5" show-word-limit
                        class="mb-2" />
                    <el-input v-model="item.link" placeholder="请输入跳转链接" size="small">
                        <template #prepend>链接</template>
                    </el-input>
                </div>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import ImageUpload from '@/components/ImageUpload/index.vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:modelValue']);

const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});

const items = ref([
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' },
    { title: '', image: '', link: '' }
]);

const handleConfirm = () => {
    // Save logic here
    visible.value = false;
};
</script>

<style scoped>
.diamond-edit {
    max-height: 60vh;
    overflow-y: auto;
}
</style>