Gong-Ying-Lian-API/app/admin/view/shop/customer_spec/add.html

<template>


    <el-card shadow="never" style="min-height: 500px;">

        <el-tabs tab-position="left" style="height: 400px;" v-model="tabValue" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in tabData" :label="item.label" :name="item.value">
            </el-tab-pane>
            <el-form ref="form" :model="form" label-width="0" stripe>
                <el-form-item>

                    <el-table :data="tableData" style="width: 100%" border :ref="'multipleTable_' + tabValue" stripe
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="name" label="规格" align="center">
                        </el-table-column>
                        <el-table-column prop="packet" label="包装箱" align="center">
                            <template #default="{row}">
                                <el-select v-model="row.packet" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="发货价" align="center">
                            <template #default="{row}">
                                <el-input v-model="row.price"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-form-item>
                <el-form-item style="padding-top: 20px;">
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-tabs>
    </el-card>
</template>
<script>
    import table from "@components/Table.js";

    export default {
        components: { 'YunTable': table },
        data: {
            extend: {
                index_url: 'general/category/index',
            },
            row: Yunqi.data.row,
            tabData: Object.entries(Yunqi.data.typeList).map(([value, label]) => ({ label, value })),
            tableData: [],
            value: "",
            form: {
                nameValue: null,
            },
            options: Object.entries(Yunqi.data.packingList).map(([value, label]) => ({ label, value: value.toString() })),//品种
            tabValue: Object.entries(Yunqi.data.typeList).map(([value, label]) => ({ label, value }))[0].value, //选中的品种 获取到品种数据后要给他默认赋值第一个

            chooseSpec: [], // 当前分类选中的规格  

            allData: {},
            type: 1, // 1编辑 0新增
        },
        methods: {
            onSubmit() {
                if (this.allData == "") return;
                let arr = Object.values(this.allData).flat(Infinity)
                console.log(JSON.stringify(arr), "所有数据")
                //
                Yunqi.ajax.post('shop/customer_spec/add', { ids: Yunqi.data.ids, all_data: arr }, false, false, true).then(res => {
                    if (res.code == 200) {
                        this.$message.success(__('设置成功'));
                        Yunqi.api.closelayer(Yunqi.app.window.id, true);
                    } else {
                        Yunqi.alert(__('请填写发货价格'), __('温馨提示'), { type: 'error' });
                    }
                });

            },
            handleSelectionChange(e) {
                if (e.length > 0) {
                    this.allData[this.tabValue] = e || []
                }
            },
            handleClick(data, row) {
                // 品种切换事件 可以在这里请求规格接口

                this.tabValue = data.props.name
                // this.chooseSpec = this.allData[this.tabValue]
                console.log(this.allData[this.tabValue], "this.allData[this.tabValue]")
                this.tabName = data.props.label
                this.tableData = [];
                this.getSpecData()
            },
            getSpecData() {

                //获取规格
                Yunqi.ajax.get('shop/customer_spec/get_box', { type_id: this.tabValue }, false, false, true).then(res => {
                    //编辑数据
                    if (res.length > 0) {
                        console.log("res", res)
                        for (var key in Object(res)) {
                            let index = this.tableData.findIndex(item => item.value == res[key]['id']);
                            if (index != -1) {
                                this.tableData.splice(index, 1)
                            } else {
                                this.tableData.push({ name: res[key]['title'], value: res[key]['id'], price: res[key]['price'], type_id: this.tabValue });
                            }
                        }
                        this.$nextTick(() => {
                            const tableRef = this.$refs['multipleTable_' + this.tabValue];
                            if (this.type == 0 && this.allData[this.tabValue]?.length > 0 && tableRef) {
                                this.tableData.forEach((item, index) => {
                                    const matched = this.allData[this.tabValue].find(row => {
                                        return row.value == item.value
                                    });

                                    if (matched) {
                                        this.tableData[index] = matched
                                    }
                                })
                                this.allData[this.tabValue].forEach(selected => {
                                    const matched = this.tableData.find(row => row.value === selected.value);
                                    if (matched) {
                                        this.$refs['multipleTable_' + this.tabValue].toggleRowSelection(matched, true); // 勾选
                                    }
                                });
                            }
                            else if (this.type == 1 && this.allData[Number(this.tabValue)]) {
                                this.tableData.forEach((item, index) => {
                                    const matched = this.allData[Number(this.tabValue)].find(row => {
                                        if (row.product_id) {
                                            return row.product_id == item.value
                                        } else {
                                            return row.value == item.value
                                        }

                                    });
                                    console.log(matched, "type2matched");
                                    if (matched) {
                                        // this.tableData[index] = { name: 'kam', value: 3, price: '111', type_id: '4', packet: '3' }
                                        if (matched.product_id) {
                                            this.tableData[index].price = matched.price
                                            this.tableData[index].packet = matched.box_id != 0 ? matched?.box_id.toString() : ""
                                        } else {
                                            this.tableData[index] = matched
                                        }
                                    }
                                })
                                this.allData[Number(this.tabValue)].forEach(selected => {
                                    const matched = this.tableData.find(row => {
                                        if (selected.product_id) {
                                            return selected.product_id == row.value
                                        } else {
                                            return row.value === selected.value
                                        }
                                    });
                                    if (matched) {
                                        this.$refs['multipleTable_' + this.tabValue].toggleRowSelection(matched, true); // 勾选
                                    }
                                });
                                // this.type = 0
                            }
                        });
                    }
                });
            }

        },
        onLoad: function (query) {
            let row = Yunqi.data.row;
            if (row.length > 0) {
                this.type = 1
            } else {
                this.type = 0
            }
            console.log(this.type)
            const grouped = row.reduce((acc, item) => {
                const key = item.type_id;
                if (!acc[key]) {
                    acc[key] = [];
                }
                console.log(item)
                item.value = item.product_id
                item.packet = item.box_id
                acc[key].push(item);
                return acc;
            }, {});
            this.allData = JSON.parse(JSON.stringify(grouped))
            this.getSpecData()
        },
    }
</script>
<style>
</style>