qimall/addons/Store/client/views/goods/component/com-package-attr.php

<template id="com-package-attr">
    <div class="package-attr-card" v-if="show">
        <!-- 切换显示 -->
        <div>
            <span class="package-show pointer" @click="toggleShowPackage">更多规格设置</span>
        </div>
        <!-- 套餐规格展示 -->
        <template v-if="packageShow">
            <!-- 标题 -->
            <div class="package-attr-desc">
                <span class="package-attr-desc-title">规格显示</span>
                <span class="package-attr-desc-notice">（用于前端套餐详情展示）</span>
            </div>
            <el-table :data="list" border stripe style="width: 100%">
                <el-table-column 
                    v-for="item in tab" 
                >
                    <template slot="header">
                        <span>{{ item.title }}</span>
                    </template>
                    <template slot-scope="scope">
                        <!-- 显示内容 -->
                        <template v-if="item.name == 'package_title'">
                            {{ scope.row[item.name] }}
                        </template>
                        <!-- 显示操作 -->
                        <template v-else-if="item.name == 'operation'">
                            <!-- 循环操作按钮 -->
                            <template
                                v-for="(p_name, index) in scope.row.package_detail"
                            >
                                <div class="item-i">
                                    <!-- 添加 -->
                                    <i 
                                        class="el-icon-circle-plus pointer" 
                                        v-if="addShow(index, scope.row.package_detail)"
                                        @click.stop="addProject(scope.row.package_detail)"
                                    ></i>
                                    <!-- 删除 -->
                                    <i 
                                        class="el-icon-error pointer"
                                        v-if="delShow(scope.row.package_detail)"
                                        @click.stop="delProject(scope.row.package_detail, index)"
                                    ></i>
                                </div>
                            </template>
                        </template>
                        <!-- 规格包含子项 -->
                        <template v-else-if="item.name == 'project_name'">
                            <!-- 循环input -->
                            <template
                                v-for="(p_name, index) in scope.row.package_detail"
                            >
                                <el-input
                                    class="item-input"
                                    v-model="scope.row.package_detail[index].project_name"
                                >
                                </el-input>
                            </template>
                        </template>
                        <!-- 子项价格 -->
                        <template v-else-if="item.name == 'project_price'">
                            <!-- 循环input -->
                            <template
                                v-for="(p_price, index) in scope.row.package_detail"
                            >
                                <el-input
                                    class="item-input"
                                    v-model="scope.row.package_detail[index].project_price"
                                >
                                </el-input>
                            </template>
                        </template>
                        <!-- 显示input -->
                        <template v-else>
                            <el-input class="item-input" v-model="scope.row[item.name]">
                            </el-input>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
    Vue.component('com-package-attr', {
        template: '#com-package-attr',
        props: {
            // 规格
            attr: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            show: {
                type: Boolean,
                default: () => {
                    return true
                },
            },
            // 默认数据
            packageData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        watch: {
            'attr': {
                handler (newVal, oldVal) {
                    this.list = newVal.map((item) => {
                        // 规格名
                        let attr_name   = item.attr_list[0].attr_name
                        let old         = this.list.find((i) => {
                            return i.package_title === attr_name
                        })
                        
                        if (old != undefined) return old
                        
                        let package_detail = JSON.parse(JSON.stringify(this.package_detail))
                        return {
                            package_title: attr_name,
                            package_name: '',
                            package_detail: [
                                package_detail
                            ]
                        }
                    })
                },
                deep: true,
                immediate: true,
            },
        },
        created() {
            this.list = this.packageData
        },
        data() {
            return {
                packageShow: false,
                tab: [
                    {
                        name: 'package_title',
                        title: '规格', 
                    },
                    {
                        name: 'package_name',
                        title: '规格名称', 
                    },
                    {
                        name: 'project_name',
                        title: '规格包含子项',
                    },
                    {
                        name: 'project_price',
                        title: '子项价格',
                    },
                    {
                        name: 'operation',
                        title: '',
                    }
                ],
                package_detail: {
                    project_name: '', 
                    project_price: 0, 
                },
                list: [],
                // 示例数据
                /* list: [
                    {
                        package_title: '套餐一',
                        package_name: '超级和牛套餐',
                        package_detail: [
                            {
                                project_name: '牛肉1', 
                                project_price: 100, 
                            },
                            {
                                project_name: '牛肉2', 
                                project_price: 200, 
                            },
                        ]
                    },
                    {
                        package_title: '套餐二',
                        package_name: '超级和牛套餐',
                        package_detail: [
                            {
                                project_name: '牛肉1', 
                                project_price: 100, 
                            },
                        ]
                    },
                ], */
            };
        },
        methods: {
            toggleShowPackage () {
                this.packageShow = !this.packageShow
            },
            addShow (index, detail) {
                return detail.length - 1 == index
            },
            delShow (detail) {
                return detail.length > 1
            },
            addProject (detail) {
                let package_detail = JSON.parse(JSON.stringify(this.package_detail))
                detail.push(package_detail)
            },
            delProject (detail, del_index) {
                detail.splice(del_index, 1)
            },
        }
    })
</script>

<style>
    .package-attr-desc-title {
        font-weight: bold;
        margin-left: 10px;
    }

    .package-attr-desc-notice {
        color: #bbbbbb;
    }

    .package-attr-desc {
        border: 1px solid #EBEEF5;
        line-height: 40px;
    }
    
    .package-show {
        color: #4aa4ea;
        line-height: 40px;
    }

    .pointer {
        cursor: pointer;
        user-select:none
    }

    .item-i {
        line-height: 28px;
    }

    .item-input + .item-input, .item-i + .item-i {
        margin-top: 5px;
    }
</style>