Gong-Ying-Lian-API/app/admin/view/goods/import_list/specs.html

<template>
    <el-card shadow="never" style="min-height: 450px; max-height: 450px; overflow: auto;">
        <el-tabs tab-position="left" style="height: 100%; overflow: auto;" 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-table :data="tableData" style="width: 100%" border :ref="'multipleTable_' + tabValue" stripe
                highlight-current-row @select="handleSelectionChange" @select-all="handleAllSelect"
                @current-change="handleCurrentChange" :row-class-name="tableRowClassName">
                <el-table-column type="index" width="55">
                </el-table-column>
                <el-table-column prop="name" label="规格" align="center">
                </el-table-column>
            </el-table>
        </el-tabs>
    </el-card>
    <div style="width: 100%;display: flex; align-items: center; justify-content: center; position: fixed; bottom: 6px;">
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="cancelDialog">取消</el-button>
    </div>
</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: Yunqi.data.packingList,//品种
            // tabValue: Object.entries(Yunqi.data.typeList).map(([value, label]) => ({ label, value }))[0].value, //选中的品种 获取到品种数据后要给他默认赋值第一个
            tabValue: Yunqi.data.tabValue,

            chooseSpec: [], // 当前分类选中的规格  
            allData: {},
            type: 0, // 1编辑 0新增,
            shop_allData: [],
            spec_id: Yunqi.data.spec_id
        },
        methods: {
            tableRowClassName({ row, rowIndex }) {
                // 根据行数据中的selected_d字段判断是否高亮
                if (row.spec_id_selected) {
                    return 'current-row';
                }
                return '';
            },
            onSubmit() {
                if (this.allData == "") return;
                const loading = ElementPlus.ElLoading.service({
                    lock: true,
                    text: '请等待...',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                
                let arr = Object.values(this.allData).flat(Infinity)
                Yunqi.ajax.post('goods/import_list/specs', { ids: Yunqi.data.row.id, all_data: arr }, false, false, true).then(res => {
                    // console.log(res)
                    if (res.code == 200) {
                        this.$message.success(__('设置成功'));
                        //倒计时刷新窗口
                        setTimeout(() => {
                            Yunqi.api.closelayer(Yunqi.app.window.id, true);
                            loading.close()
                        }, 1000);

                    } else {
                        Yunqi.alert(__('请选择规格'), __('温馨提示'), { type: 'error' });
                        loading.close()
                    }
                });
            },

            handleAllSelect(e) {
                this.allData[this.tabValue] = e || []

            },
            handleCurrentChange(e) {
                this.tableData = this.tableData.map((item) => {
                    if(e.id==item.id){
                        item.spec_id_selected=true
                    }else{
                        item.spec_id_selected=false
                    }
                    return item;

                })
                this.allData[this.tabValue] = e || []
            },
            handleSelectionChange(e) {
                
            },
            handleClick(data, row) {
                
                


                // 品种切换事件 可以在这里请求规格接口
                this.tabValue = data.props.name
                this.tabName = data.props.label
                this.tableData = [];
                this.getSpecData()
            },
            cancelDialog: function () {
                Yunqi.api.closelayer(Yunqi.app.window.id, true);
            },
            getSpecData() {

                //获取规格 ；
                Yunqi.ajax.get('shop/customer_spec/get_box', { type_id: this.tabValue }, false, false, true).then(res => {
                    //编辑数据
                    if (res.length > 0) {
                        for (var key in Object(res)) {
                            let index = this.tableData.findIndex(item => item.id == res[key]['id']);
                            const isExist = this.shop_allData.includes(res[key]['id'])
                            let spec_id = this.spec_id == res[key]['id'] ? true : false;

                            if (index != -1) {
                                this.tableData.splice(index, 1)
                            } else {
                                let item = {
                                    id: res[key]['id'],
                                    name: res[key]['title'],
                                    type_id: this.tabValue,
                                    selected_d: isExist,
                                    spec_id_selected: spec_id
                                }
                                this.tableData.push(item);

                            }

                        }

                    }
                });
            }

        },

        onLoad: function (query) {
            let rows = Yunqi.data.rows;
            if (rows) {
                const grouped = JSON.parse(rows).reduce((acc, item) => {
                    const key = item.type_id;
                    if (!acc[key]) {
                        acc[key] = [];
                    }

                    acc[key].push(item);
                    return acc;
                }, {});
                this.shop_allData = JSON.parse(JSON.stringify(grouped))
                let arr = Object.values(this.shop_allData).flat(Infinity)
                let acc = [];
                for (var key in Object(arr)) {
                    acc[key] = Number(arr[key]['value']);
                }
                this.shop_allData = acc;
            }
            //     this.tableData = [];
            //你只需要保存规格是吧， 是你末尾加了个row
            this.getSpecData()
        },
    }
</script>
<style>

</style>