shuhi-ui/src/views/salesOps/booklist/components/booklist-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 #status="{ model }">
            <el-switch v-model="model.status" active-value="online" inactive-value="offline" />
        </template>

        <template #banner="{ model }">
            <div class="flex flex-col">
                <image-upload v-model="model.banner" :limit="1" :fileSize="2" fileType="jpg" />
                <span class="text-gray-400 text-xs mt-1">选择背景图</span>
            </div>
        </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/booklist/add',
    update: '/salesOps/booklist/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: '书单banner',
        prop: 'banner',
        type: 'banner',
        slot: 'banner',
        required: true,
    },
    {
        label: '书单描述',
        prop: 'description',
        type: 'textarea',
        required: true,
        props: { placeholder: '请输入书单描述' }
    },
]);

const handleOpen = (data) => {
    title.value = data && data.id ? '编辑书单' : '添加书单';
    selectedGoods.value = data && data.relatedGoods ? data.relatedGoods : [];
    modalRef.value.handleOpen(data);
};

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

const openGoodsDialog = (model) => {
    currentFormModel.value = model;
    if (!model.relatedItems) {
        model.relatedItems = [];
    }
    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>