shuhi-ui/src/views/salesOps/topics/components/topics-edit.vue

<template>
    <simple-form-modal ref="modalRef" :items="formItems" :baseUrl="baseUrl" @success="handleSuccess" :title="title"
        width="600px" labelWidth="100px">

        <template #relatedItems="{ model }">
            <div class="flex items-center space-x-4">
                <el-checkbox v-model="isSpecified" label="指定商品" />
                <div v-if="isSpecified" class="flex items-center text-gray-600">
                    <span>已选择 <span class="text-red-500 font-bold">{{ (model.relatedItems || []).length }}</span> 款商品，</span>
                    <el-button link type="primary" @click="openGoodsDialog(model)">选择商品 ></el-button>
                </div>
            </div>
        </template>

        <template #style="{ model }">
            <div class="flex flex-col">
                <image-upload v-model="model.style" :limit="1" :fileSize="2" fileType="jpg" />
                <span class="text-gray-400 text-xs mt-1">只支持.jpg 格式</span>
            </div>
        </template>

        <template #status="{ model }">
            <el-switch v-model="model.status" active-value="online" inactive-value="offline" />
        </template>

    </simple-form-modal>

    <goods-select-dialog v-model="goodsDialogVisible" :default-selected="selectedGoods" @confirm="handleGoodsConfirm" />
</template>

<script setup>
import { ref, computed } from 'vue';
import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
import GoodsSelectDialog from '../../components/GoodsSelectDialog.vue';
import ImageUpload from '@/components/ImageUpload/index.vue';

const emit = defineEmits(['success']);
const modalRef = ref(null);
const title = ref('添加专题');
const goodsDialogVisible = ref(false);
const selectedGoods = ref([]);
const isSpecified = ref(true); // Default checked as per image
const currentFormModel = ref(null);

const baseUrl = {
    add: '/salesOps/topics/add',
    update: '/salesOps/topics/update'
};

const formItems = computed(() => [
    {
        label: '专题名称',
        prop: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入专题名称' }
    },
    {
        label: '关联商品',
        prop: 'relatedItems',
        type: 'relatedItems',
        slot: 'relatedItems',
        required: true,
    },
    {
        label: '是否上线',
        prop: 'status',
        type: 'status',
        slot: 'status',
        required: true,
    },
    {
        label: '专题样式',
        prop: 'style',
        type: 'style',
        slot: 'style',
        required: true,
    }
]);

const handleOpen = (data) => {
    title.value = data && data.id ? '编辑专题' : '添加专题';
    // Initialize selected goods from data if available
    selectedGoods.value = data && data.relatedGoods ? data.relatedGoods : [];
    // Mocking 10 selected items if it's a new or existing one for demo
    if (selectedGoods.value.length === 0 && data) {
        // selectedGoods.value = ...
    }
    modalRef.value.handleOpen(data);
};

const handleSuccess = (data) => {
    emit('success', data);
};

const openGoodsDialog = (model) => {
    currentFormModel.value = model;
    // ensure relatedItems is initialized
    if (!model.relatedItems) {
        model.relatedItems = [];
    }
    // Use the model's data for the dialog
    selectedGoods.value = model.relatedItems;
    goodsDialogVisible.value = true;
};

const handleGoodsConfirm = (rows) => {
    selectedGoods.value = rows;
    if (currentFormModel.value) {
        currentFormModel.value.relatedItems = rows;
    }
    goodsDialogVisible.value = false;
};

defineExpose({
    handleOpen
});
</script>