文件内容 index.html 91 KB 89371 字符
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" />

    <link rel="stylesheet" href="./index.css" />
    <!-- <script src="/manage/lib/vue/vue.js"></script> -->
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../lib/vue/element-ui.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../../lib/vue/element_index.js"></script>
    <!-- <script src="/manage/lib/vue/element_index.js"></script> -->
    <!-- <script src="/manage/lib/vue/index.min.js"></script> -->
    <script type="text/javascript" src="../../lib/vue/index.min.js"></script>
    <!-- <script src="/manage/lib/vue/Sortable.min.js"></script> -->
    <script type="text/javascript" src="../../lib/vue/Sortable.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script> -->
    <script type="text/javascript" src="../../lib/vue/umd.min.js"></script>
    <title>sku</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .el-tabs__item {
            font-size: 16px !important;
        }
        .el-table .cell {
            padding-left: 3px !important;
            padding-right: 3px !important;
        }
        .el-input__inner {
            padding: 0 5px;
        }
        .sku_tab{
            width:100%;
            background-color: #f2f2f2;
            border-collapse: separate;
            border-spacing: 1px;
        }
        .sku_tab thead td{
            text-align: center;
            font-weight: bold;
        }
        .sku_tab td{
            background-color: #fff;
            padding-left:8px;
            box-sizing: border-box;
        }
        .sku_tab img{
            width:80px;
            cursor: pointer;
            border-radius: 4px;
        }

        

        .sku_tab input[type=text],.sku_tab [type=number]{
            outline: none;
            border:1px solid #999;
            border-radius: 4px;
            padding:4px;
            min-width: 80px;
            text-align: center;
        }
        .sku_tab [type=number]{
                line-height: 1.6;
                width:80px;
        }
        .sku_tab input[type=file]{
            display:none;
        }
        .image-preview{
            position:relative;
        }
        .delete-btn{
            position: absolute;
            top: 0;
            left: 0;
            border: none;
            background: transparent;
            cursor: pointer;
        }
        .delete-btn i:hover{
            color:crimson;
        }
        
    </style>
</head>

<body>

    <div id="app" v-cloak>


        <div class="addgoods scroll-content" :style="
        'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height
      ">

            <div class="item_box">
                <!-- <div class="addgoods_title scroll-item" >规格/货品设定</div> -->
                <el-form ref="formsku" :rules="rules">
                    <el-form-item label="" prop="privateSpecName">
                        <!-- <template #label>
                            商品规格:
                            <a class="atips" onclick="_TapInfoClick(this)" datacode="pro-sku" href="javascript:;">?</a>
                        </template> -->
                        <template v-if="privateGoodsItem.length > 0">
                            <div class="sku_bor_box">
                                <el-form label-width="80px" v-for="(item, index) in privateGoodsItem">
                                    <div class="label_tiile padd_5">
                                        <!-- <div class="item_flex" v-if="index == 0">
                                            <el-form-item label="规格名:">
                                                <el-select v-model="item.privateSpecName" clearable="true" placeholder="请选择" @change="chooseSpecName">
                                                    <el-option
                                                        v-for="item in skuOptionList"
                                                        :key="item.name"
                                                        :value="item.name">
                                                    </el-option>
                                                </el-select>    
                                            </el-form-item>
                                            <el-tooltip class="item" effect="dark" content="请选择规格名,如 颜色、尺码、型号、款式、口味等"
                                                placement="top">
                                                <i class="el-icon-question ques_icon"></i>
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="勾选后上传图片会对原有的图片进行覆盖" placement="top">
                                                <el-checkbox v-model="item.isAddSkuImg" @change="handleClickSkuImg($event, index)">添加图片</el-checkbox>
                                            </el-tooltip>
                                        </div> -->

                                        <div class="item_flex">
                                            <el-form-item label="规格名:">
                                                <div style="display: flex;">
                                                    <el-input v-model.trim="item.privateSpecName"
                                                        placeholder="请输入规格名"></el-input>

                                                    <el-select v-model="item.privateSpecName" clearable="true"
                                                        placeholder="请选择" @change="chooseSpecName">
                                                        <el-option v-for="item in skuOptionList" :key="item.name"
                                                            :value="item.name">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </el-form-item>
                                            <el-tooltip class="item" effect="dark" content="请输入规格名,如 颜色、尺码、型号、款式、口味等"
                                                placement="top">
                                                <i class="el-icon-question ques_icon"></i>
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="勾选后上传图片会对原有的图片进行覆盖"
                                                placement="top">
                                                <el-checkbox v-model="item.isAddSkuImg"
                                                    @change="handleClickSkuImg($event, index)">添加图片</el-checkbox>
                                            </el-tooltip>
                                        </div>
                                        <i class="el-icon-delete-solid ques_icon" v-if="index != 0"
                                            @click="delsku(index)"></i>
                                    </div>
                                    <el-form-item label="规格值:" class="padd_5">
                                        <div class="label_input">
                                            <draggable handle=".canDrag" class="image_flex" v-model="item.desc"
                                                group="people" @start="drag=true" @end="drag=false"
                                                @update="updateList">
                                                <div class="del_box" v-for="(list, lists) in item.desc">
                                                    <el-input class="unDrag" v-model.trim="list.value"
                                                        placeholder="请输入规格值"></el-input>
                                                    <i class="el-icon-error error_del" v-if="lists != 0"
                                                        @click="delskuitem(index, lists)"></i>
                                                    <i class="el-icon-rank canDrag"></i>
                                                    <div class="skuimg_box" v-if="list.skuimgurl">
                                                        <el-image style="width: 80px; height: 80px"
                                                            :src="list.skuimgurl" fit="fill"></el-image>
                                                        <i class="el-icon-error error_del"
                                                            @click="delskuHeadImg(index, lists)"></i>
                                                    </div>
                                                    <el-upload v-if="item.isAddSkuImg && !list.skuimgurl" action="#"
                                                        multiple="true" list-type="picture-card"
                                                        :on-change="(file, fileList) => {handleChangeSku(file, fileList, index, lists)}"
                                                        :auto-upload="false">
                                                        <i slot="default" class="el-icon-plus"></i>
                                                    </el-upload>
                                                </div>
                                            </draggable>
                                            <el-button type="text" size="small"
                                                @click="addSkuItem(index)">+添加规格值</el-button>
                                        </div>
                                    </el-form-item>
                                </el-form>
                                <div>
                                    <el-button plain size="small" @click="addSku">添加规格</el-button>
                                    (注意:添加或者修改规格信息会变更下方的SKU信息和对应的优惠券配置,请谨慎操作!商品图片支持拖拽复制,规格值支持输入框右下角点击拖拽移动位置)
                                </div>
                            </div>
                        </template>
                        <span class="sku_tips">最多添加 5 个规格名,商品图片支持拖拽复制,规格值支持输入框右下角点击拖拽移动位置(填入规格名前请先上传商品首图
                            version:2025.03.28)规格图片</span>

                        <div class="stock_set" style="display: flex;justify-content: flex-start;">
                            <el-input type="number" v-model.trim="stockNumSet" placeholder="批量库存"></el-input>
                            <el-button type="text" size="small" @click="setStock">批量设置库存</el-button>
                            <el-input type="number" v-model.trim="moneyNumSet" placeholder="批量价格"></el-input>
                            <el-button type="text" size="small" @click="setMoney">批量设置原价</el-button>
                        </div>

                        <div class="otable">
                            <table class="sku_tab">
                                <thead>
                                    <td>规格</td>
                                    <td>售价</td>
                                    <td>库存</td>
                                    <td>图片</td>
                                    <td>货号</td>
                                </thead>
                                <tbody>
                                    <tr class="item" v-for="(item,index) in sku_ui_list" :key="item">
                                        <td>{{item.desc}}</td>
                                        <td><input type="number" step="0.01" v-model="item.sellPriceYuan" />元</td>
                                        <td><input type="number" v-model="item.stock_num" /></td>
                                        <td>
                                            <image-upload 
                                            :initial-image="item.thumb_img"
                                            @image-change="handleImageChange(index, $event)"
                                        ></image-upload>
                                        </td>
                                        <td><input type="text" v-model="item.sku_code" placeholder="商品码" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </el-form-item>
                </el-form>

            </div>



        </div>
    </div>


    <!--_footer 作为公共模版分离出去-->
    <script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/3.1.1/layer.js"></script>
    <script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="../../lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
    <script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js"></script>
    <!--/_footer 作为公共模版分离出去-->
    <!--请在下方写此页面业务相关的脚本-->
    <!-- <script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js"></script> -->


    <script src="../../lib/api.js"></script>

    <script>
        var _isrunning = false;
        Vue.use(window['vue-cropper'].default)

        // 注册图片上传组件
        Vue.component('image-upload', {
            props: {
                // 初始图片URL
                initialImage: {
                    type: String,
                    default: null
                }
            },
            template: `
                <div class="image-upload-container">
                    <div class="image-preview" @click="handleImageClick">
                        <!-- 图片预览区域 -->
                        <img 
                            v-if="imageUrl" 
                            :src="imageUrl" 
                            alt="预览图" 
                            class="preview-img"
                        >
                        
                        <!-- 默认图标(无图片时显示) -->
                        <div v-else class="default-icon">
                            <i class="Hui-iconfont Hui-iconfont-add3"></i>
                            <!-- <span class="upload-text">点击上传</span> -->
                        </div>
                        
                        <!-- 删除按钮(有图片时显示) -->
                        <button 
                            v-if="imageUrl" 
                            class="delete-btn" 
                            @click.stop="handleDelete"
                        >
                            <i class="Hui-iconfont Hui-iconfont-close2"></i>
                        </button>
                        
                        <!-- 文件上传输入框(隐藏) -->
                        <input 
                            type="file" 
                            ref="fileInput" 
                            accept="image/*" 
                            @change="handleFileChange"
                            class="file-input"
                        >
                    </div>
                </div>
            `,
            data() {
                return {
                    imageUrl: this.initialImage // 存储图片的URL
                }
            },
            watch: {
                // 监听初始图片变化
                initialImage(newVal) {
                    this.imageUrl = newVal;
                }
            },
            methods: {
                // 点击图片区域触发文件选择
                handleImageClick() {
                    this.$refs.fileInput.click();
                },
                
                // 处理文件选择
                handleFileChange(e) {
                    const file = e.target.files[0];
                    if (file) {
                        this.previewImage(file);
                        // 清空输入框值,以便可以重复选择同一文件
                        e.target.value = '';
                    }
                },
                
                // 预览图片
                previewImage(file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        // this.imageUrl = e.target.result;
                        // 触发事件,通知父组件图片已更改
                        // this.$emit('image-change', this.imageUrl, file);
                        
                        // 这里可以添加上传到服务器的逻辑
                         this.uploadToServer(file);
                    };
                    reader.readAsDataURL(file);
                },
                
                // 删除图片
                handleDelete() {
                    this.imageUrl = null;
                    // 触发事件,通知父组件图片已删除
                    this.$emit('image-change', null);
                },
                
                // 上传到服务器的示例方法
                uploadToServer(file) {
                    // 实际项目中实现上传逻辑
                    const formData = new FormData();
                    formData.append('image', file);
                    
                    // 示例:使用fetch上传
                    /*
                    fetch('/api/upload', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('上传成功', data);
                        // 如果服务器返回了图片URL,可以更新imageUrl
                        // this.imageUrl = data.imageUrl;
                    })
                    .catch(error => {
                        console.error('上传失败', error);
                        // 上传失败时清除预览
                        this.imageUrl = this.initialImage;
                    });
                    */
                    $.ajax({
                        url: "/api/app/Upload/UpImage?type=sku&size=1500*0",
                        type: 'post',
                        contentType: false,
                        processData: false,
                        async: true,
                        data: formData,
                        headers: { "token": readToken() },
                        success: (obj) => {
                            this.imageUrl = obj.data[0].url;
                            this.$emit('image-change', this.imageUrl, file);
                        },
                        error: (res) => {
                            if (res.status == 413) {
                                layer.msg('图片超过限制')
                            }
                            if (res.status == 401) {
                                layer.msg('登录过期,请重新登录')
                            }
                            if (res.status == 403) {
                                layer.msg('您没有此操作权限')
                            }
                            if (loadid != 0) {
                                layer.close(loadid);
                            }
                        }
                    });
                    //图片上传
                }
            }
        });


        new Vue({
            el: '#app',
            data() {

                var skulist = (rule, value, callback) => {
                    for (const i of this.privateGoodsItem) {
                        if (!i.privateSpecName || i.dynamicTags.length == 0) {
                            return callback(new Error('请填入规格名并填入最少一个规格值'));
                        } else {
                            callback();
                        }
                    }
                    for (const i of this.sku_ui_list) {
                        if (i.sellPriceYuan == 0 || !i.sellPriceYuan) {
                            return callback(new Error('请填入价格'));
                        } else {
                            callback();
                        }
                    }
                };
                return {
                    id: 0,
                    isAddSkuImg: false, //添加sku图片

                    dialogImageUrl: '',
                    dialogVisible: false,
                    disabled: false,
                    list: [
                        { id: 0, name: '未选择,使用统一邮费' },
                    ],
                    myCroppa: {},
                    option: {
                        img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4',
                        size: 1,
                        full: false,
                        outputType: 'png',
                        canMove: true,
                        fixedBox: false,
                        original: false,
                        canMoveBox: true,
                        autoCrop: true,
                        // 只有自动截图开启 宽度高度才生效
                        autoCropWidth: 750,
                        autoCropHeight: 340,
                        centerBox: true,
                        high: true,
                        max: 99999
                    },
                    fixed: true,
                    fixedNumber: [1, 1], //[4, 3]
                    imgObj: {
                        width: 500,
                        height: 500
                    },
                    filename: '',
                    fileList: [],
                    examList: [],
                    bannerList: [],
                    headList: [],
                    showImageList: [],
                    showVideoList: [],
                    limitMin: 0,
                    limitTotal: 0,
                    limitTimeMax: 0,
                    drag: false,
                    preview: {},
                    tableColumnList: {
                        tableHeaderList: [],
                        tableBodyList: []
                        // inventory: ''
                    },
                    sku_ui_list:[],
                    privateGoodsItem: [
                        {
                            privateSpecName: '', //规格名
                            dynamicTags: [], //规格值数组
                            desc: [{
                                value: '',
                                vcode: this.getRandom(),
                                skuimgurl: '',
                            }],
                            inputVisible: false,
                            inputValue: '',
                            vcode: this.getRandom(),
                            isAddSkuImg: false
                        }
                    ],
                    presaleform: {
                        stock_type: 0,
                        full_payment_presale_delivery_type: null,
                        presale_begin_time: null,
                        presale_end_time: null,
                        presale_begin_time_show: null,
                        presale_end_time_show: null,
                        full_payment_presale_delivery_time: null,
                    },
                    starindex: 0, //复制图片起始位置
                    moveIndex: 0, //复制图片移动中位置
                    rules: {
                        privateSpecName: [{ required: true, validator: skulist, trigger: 'blur' }]
                    },
                    cateList: [],

                    compressFile: null,

                    lastfinal: [], //上一次的规格内容数组


                    skubody: [], //规格预览数组
                    skuShow: false, //规格数组显示
                    showView: true, //预览显示

                    openAppList: [],
                    stockNumSet: 10000,
                    moneyNumSet: null,
                    showForm: true, //表单弹出页还是长页



                    contentStyleObj: {
                        // height: '86vh',
                    },


                    repeatTag: '', //重复的sku规格值

                    skuOptionList: [],
                    cateid: 0,

                    pickerOptions: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    showPresale: false,
                    session_key: ''
                }
            },
            watch: {
                'option.img': {
                    handler: function (val) {
                        const that = this
                        const img = new Image()
                        img.src = val
                        img.onload = function () {
                            that.imgObj.width = this.width / 2
                            that.imgObj.height = this.height / 2
                        }
                    },
                    immediate: true
                },
                bannerList() {
                    var imagelist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
                    console.log(this.bannerList);
                    this.showImageList = this.bannerList.filter(function (image) {
                        // 使用some方法检查image是否包含imagelist中的某个后缀  
                        return imagelist.some(function (extension) {
                            // 使用endsWith方法检查image是否以某个后缀结尾  
                            return image.url.endsWith(extension);
                        });
                    });

                    // 使用filter方法筛选出不包含imagelist中后缀的字符串  
                    this.showVideoList = this.bannerList.filter(function (image) {
                        // 对匹配的取反即为不包含  
                        return !imagelist.some(function (extension) {
                            return image.url.endsWith(extension);
                        });
                    });
                },
                // 监听规格数据
                calculateAttribute(newArray) {
                    console.log(newArray, 'newval');
                    console.log(this.sku_ui_list, '596this.sku_ui_list');

                    // setTimeout(function(){

                    // },300);
                    var _findempty = false;
                    newArray.forEach(newar => {
                        if (newar.childer) {
                            for (var ione of newar.childer) {
                                if (ione.value.length == 0) {
                                    _findempty = true;
                                    break;
                                }
                            }
                        }
                    });
                    if (_findempty) {
                        console.log("规格值有空值,不再继续执行!");
                        return;
                    }

                    // if(_isrunning){
                    //     return;
                    // }
                    _isrunning = true;
                    // console.log('----------- begin check ------------');

                    let tableObj = {
                        tableBodyList: [],
                        tableHeaderList: []
                    }
                    // 表头
                    let skuTableArr = JSON.parse(JSON.stringify(newArray))
                    tableObj.tableHeaderList = skuTableArr.map((item) => {
                        return {
                            prop: item.name,
                            propName: item.name
                        }
                    })
                    // console.log(tableObj.tableHeaderList, 'tableObj.tableHeaderList');
                    this.tableColumnList.tableHeaderList = tableObj.tableHeaderList // 表头

                    let cloneNewVal = JSON.parse(JSON.stringify(newArray))
                    let attrName = [] //规格名数组
                    let attrValue = [] //规格值数组

                    let allvalarray = [];//所有的规格值的vcode的数组,综合在一起

                    for (let i of cloneNewVal) {
                        console.log(cloneNewVal, 'key');
                        attrName.push(i.name)
                        let attrArr = []
                        i.childer.forEach((vals) => {
                            attrArr.push(vals.vcode)
                            if (allvalarray.indexOf(vals.vcode) == -1) {
                                allvalarray.push(vals.vcode);
                            }
                        })
                        attrValue.push(attrArr)
                    }
                    console.log(attrValue, 'attrValue');
                    // console.log(this.privateGoodsItem.length, Object.keys(newVal).length);
                    // 表格内容数据(笛卡尔积算法)
                    let finalArr = this.cartesianProductOf(...attrValue)
                    console.log(finalArr, 'finalArr');
                    // vcode
                    //[
                    //{'1231234','123123'}
                    //]
                    var _vcode_map = new Map();// string:{name value vcode ncode}
                    newArray.forEach(newar => {
                        if (newar.childer) {
                            newar.childer.forEach(ione => {
                                _vcode_map.set(ione.vcode, { name: newar.name, value: ione.value, vcode: ione.vcode, ncode: newar.ncode, skuimgurl: ione.skuimgurl });
                            });
                        }
                    });
                    // console.log(_vcode_map);

                    //    var _obj = {
                    // skus:this.sku_ui_list
                    //    };
                    var oldvalcodes = [];//现有的skus中的所有的vcode的集合
                    if (this.sku_ui_list) {
                        this.sku_ui_list.forEach(sku => {
                            if (sku.skuArray && sku.skuArray.length > 0) {
                                sku.skuArray.forEach(isku => {
                                    if (oldvalcodes.indexOf(isku.vcode) == -1) {
                                        oldvalcodes.push(isku.vcode);

                                    }
                                    let getskuimgurl = _vcode_map.get(isku.vcode)
                                    if (getskuimgurl && getskuimgurl.skuimgurl) {
                                        if(!sku.thumb_img){
                                        sku.thumb_img = getskuimgurl.skuimgurl;
                                        //什么情况下不覆盖呢... .. .
                                        }
                                    }
                                })
                            }
                        });
                    }

                    var _del_array = this.matharrayadd(oldvalcodes, allvalarray);
                    if (_del_array && _del_array.length > 0) {
                        console.log('del sku values ', _del_array);
                    }

                    var _add_array = this.matharrayadd(allvalarray, oldvalcodes);
                    if (_add_array && _add_array.length > 0) {
                        console.log("new sku vcodes ", _add_array);
                    }
                    //执行补足 或者删除 
                    console.log(this.sku_ui_list, '710this.sku_ui_list');
                    console.log(this.privateGoodsItem, '710privateGoodsItem');
                    for (var iarr of finalArr) {
                        this.complatearray(_vcode_map, iarr, this.sku_ui_list, _del_array, _add_array);
                    }
                    let testlist = JSON.parse(JSON.stringify(this.sku_ui_list))
                    console.log(testlist, 'this.sku_ui_list');
                    //执行新增处理 如果sku中没有这个组合,则新增
                    finalArr.forEach(iarr => {
                        // console.log("准备检查是否存在,如果不存在则新增!",iarr);
                        this.complatetoadd(_vcode_map, iarr, this.sku_ui_list);
                    });

                    //重新生成sku.desc的文本内容
                    this.sku_ui_list.forEach(sku => {
                        // console.log("update desc text",sku);
                        if (sku.skuArray && sku.skuArray.length > 0) {
                            var _sku_name_array = [];
                            sku.skuArray.forEach((_sku) => {
                                _sku_name_array.push(_sku.value);
                            });
                            sku.desc = _sku_name_array.join(' ');
                        } else {
                            sku.desc = "";
                        }

                    });

                    window.tableColumnList = this.tableColumnList;
                    this.$forceUpdate();
                    _isrunning = false;
                    console.log('----------- end check ------------');
                    this.sku_ui_list =[...this.sku_ui_list];
                    return;
                }
            },
            computed: {
                // 计算规格
                calculateAttribute() {

                    // 初始化
                    let obj = []
                    for (const i of this.privateGoodsItem) {
                        i.dynamicTags = []
                        for (let j of i.desc) {
                            if (j.value) {
                                i.dynamicTags.push(this.handleReplaceStr(j.value))
                                j.value = this.handleReplaceStr(j.value)
                            }

                        }
                        if (!i.vcode) i.vcode = this.getRandom()

                    }
                    // ----------------------------------
                    this.privateGoodsItem.forEach((item) => {
                        // 判断有没有输入规格名
                        // 规格值括号[]转换
                        item.dynamicTags = this.handleReplaceStr(item.dynamicTags)
                        if (item.privateSpecName) {
                            //规格名:规格值     //'颜色':'尺寸'
                            item.privateSpecName = this.handleReplaceStr(item.privateSpecName)
                            let arr = {}
                            arr.name = item.privateSpecName
                            arr.childer = item.desc
                            arr.ncode = item.vcode
                            // obj[item.privateSpecName] = item.dynamicTags
                            // obj[item.privateSpecName] = item.desc
                            obj.push(arr)
                            arr = []
                        }
                        // console.log(item, 'item');
                    })
                    console.log(obj, this.privateGoodsItem, 'obj');
                    window.privateGoodsItem = this.privateGoodsItem;
                    return obj
                },
                bannerList() {
                    var imagelist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
                    this.showImageList = this.bannerList.filter(function (image) {
                        // 使用some方法检查image是否包含imagelist中的某个后缀  
                        return imagelist.some(function (extension) {
                            // 使用endsWith方法检查image是否以某个后缀结尾  
                            return image.endsWith(extension);
                        });
                    });

                    // 使用filter方法筛选出不包含imagelist中后缀的字符串  
                    this.showVideoList = this.bannerList.filter(function (image) {
                        // 对匹配的取反即为不包含  
                        return !imagelist.some(function (extension) {
                            return image.endsWith(extension);
                        });
                    });
                }
            },
            created() {
                document.ondragover = function (e) { e.preventDefault(); };
            },
            mounted() {
                var timer = setInterval(() => {
                    if ($(".computedspan")) {
                        $(".computedspan").remove();
                        clearInterval(timer)
                        // console.log(1232);
                    }

                }, 1000);
                this.id = _apigetquery("id");
                this.cateid = _apigetquery("cate_id");
                this.session_key = _apigetquery("session_key");
                if (this.id > 0) {
                    // this.getlist()
                }
                this.handleLocalData()
                // if(this.session_key) {
                //     let getdata = localStorage.getItem(this.session_key)
                //     if(getdata) {
                //         let jsondata = JSON.parse(getdata)
                //         this.privateGoodsItem = jsondata.skuFormatBody
                //         this.sku_ui_list = jsondata.skus
                //         console.log(this.sku_ui_list, jsondata);
                //     }

                // }
                // if(this.session_key) {
                //     if(getdata) {



                // console.log(JSON.parse(localStorage.getItem('skus')), localStorage.getItem('skus'));
                //     }

                // }
                // this.getselect()
                // window.aabbcc = "------------"
                // console.log('112233');
                window.funcSubmitForm = () => {
                    let goodsItem = JSON.parse(JSON.stringify(this.privateGoodsItem))
                    let tablelist = JSON.parse(JSON.stringify(this.sku_ui_list))
                    for (let i of goodsItem) {
                        delete i.vcode
                        delete i.ncode
                        for (let desc of i.desc) {
                            delete desc.vcode
                            if (desc.skuid) {
                                delete desc.skuid
                            }
                        }
                    }
                    for (const i of tablelist) {
                        i.sku_attrs = []
                        for (let j = 0; j < i.skuArray.length; j++) {
                            i.sku_attrs.push({
                                attr_key: i.skuArray[j].name,
                                attr_value: i.skuArray[j].value
                            })
                        }
                        console.log(i.thumb_img);
                        i.sale_price = parseInt(i.sellPriceYuan * 100)
                        i.stock_num = parseInt(i.stock_num)
                        // i.skuFormat = JSON.stringify(i.skuArray)
                        delete i.stock_type
                        delete i.full_payment_presale_delivery_type
                        delete i.presale_begin_time
                        delete i.presale_end_time
                        delete i.presale_begin_time_show
                        delete i.presale_end_time_show
                        delete i.full_payment_presale_delivery_time
                        delete i.skuArray
                    }

                    for (const i of tablelist) {
                        delete i.desc
                        delete i.skuFormat
                    }
                    let obj = {
                        skus: tablelist,
                        skuFormatBody: goodsItem
                    }
                    sessionStorage.setItem(this.session_key, JSON.stringify(tablelist))
                    // localStorage.setItem('skuFormatBody', JSON.stringify(goodsItem))
                    return obj
                }

            },
            methods: {
                getselect() {
                    if(this.cateid){
                        _apiget(`/api/app/categoryInfo/${this.cateid}/detail`, true, (code, obj) => {
                        if (code == 200) {
                            if (obj.attr?.sale_attr_list?.length > 0) {
                                let sku_sel_list = obj.attr.sale_attr_list
                                this.skuOptionList = obj.attr.sale_attr_list
                                for (const i in sku_sel_list) {
                                    if (!sku_sel_list.hasOwnProperty(i)) break
                                    // this.privateGoodsItem[i].privateSpecName = sku_sel_list[i].name
                                    // this.privateGoodsItem[i].dynamicTags = sku_sel_list[i].value.split(';')
                                }

                            }
                        }
                    });
                    }
                },
                handleImageChange(index, imageUrl) {
                    this.sku_ui_list[index].thumb_img = imageUrl;
                    console.log(`第${index+1}行图片已更新`,imageUrl);
                    // 这里可以添加保存到服务器的逻辑
                    console.log(this.sku_ui_list);//绑定UI的变了,数据没变???
                },
                handleLocalData() {
                    // console.log("line.797","handleLocalData");
                    if (this.session_key) {
                        let getdata = sessionStorage.getItem(this.session_key)
                        let jsondata = {}
                        try {
                            if (getdata) {
                                jsondata = JSON.parse(getdata)
                                // this.privateGoodsItem = jsondata.skuFormatBody
                                // this.sku_ui_list = jsondata.skus
                                // console.log(this.sku_ui_list, jsondata);
                                console.log(jsondata);
                            } else {
                                return
                            }
                        } catch (err) {

                        }
                        let skuFormatBody = []
                        // for (const i of getdata) {
                        //     skuFormatBody.forEach((item) => {
                        //         if(item.privateSpecName == i.) {

                        //         }
                        //     })
                        // }
                        //console.log(this.generateSkuitem(jsondata));
                        //jsondata = this.generateSkuitem(jsondata)
                        var _keymap = new Map();//用于当前显示名称 对应的key只在这个范围内一次性使用
                        if (jsondata.skuFormatBody) {
                            this.privateGoodsItem = jsondata.skuFormatBody
                            
                            this.privateGoodsItem.forEach((item, index) => {
                                if (!item.ncode) item.ncode = this.getRandom()
                                _keymap.set("n" + item.privateSpecName, item.ncode);
                                item.desc.forEach((list, j) => {
                                    list.vcode = this.getRandom()
                                    list.skuimgurl = list.skuimgurl || ''
                                    _keymap.set("v" + list.value, list.vcode);
                                })
                                item.isAddSkuImg = false
                            })
                        }
                        console.log(jsondata.skuFormatBody, _keymap, 'jsondata.skuFormatBody');
                        if (jsondata.skus) {

                            jsondata.skus.forEach(item=>{
                                item.sellPriceYuan = Number(item.sale_price / 100).toFixed(2);
                                item.skuArray = item.sku_attrs.map(attr => ({ // 处理多属性
                                    name: attr.attr_key,
                                    value: attr.attr_value,
                                }));
                            });

                            // setTimeout(() => {
                                // this.sku_ui_list = JSON.parse(localStorage.getItem('skus'))
                                if (jsondata.skus) {
                                    let arr = []
                                    for (let i of this.privateGoodsItem) {
                                        arr = [...arr, ...i.dynamicTags]
                                    }
                                    let skuarrs = []
                                    for (let i of jsondata.skus) {
                                        if (i.skuArray) {
                                            // i.skuArray = i.skuFormat;
                                            // i.skuFormat = i.skuFormat
                                            // i.head = {}
                                            // for (let j = 0; j < i.skuFormat.length; j++) {
                                            //     i.head[i.skuFormat[j].name] = i.skuFormat[j].value
                                            // }
                                            for (let sku of i.skuArray) {
                                                var _get = _keymap.get("n" + sku.name);
                                                if (_get) {
                                                    // console.log(_get, 'get');
                                                    sku.ncode = _get;
                                                }
                                                _get = _keymap.get("v" + sku.value);
                                                if (_get) {
                                                    // console.log(_get, 'vget');
                                                    sku.vcode = _get;
                                                }
                                            }
                                        }
                                        i.sellPrice = parseInt(i.sale_price)
                                        i.sellPriceYuan = Number(i.sale_price / 100).toFixed(2)
                                        skuarrs.push(i)
                                    }
                                    this.sku_ui_list = skuarrs
                                }
                        }
                    }
                },
                generateSkuitem(resdata) {
                    // 生成 skus 数组
                    const skus = resdata.map(item => {
                        const skuAttr = item.sku_attrs; // 假设每个sku只有一个属性
                        let skuFormatfor = []
                        let descarr = []
                        for (const i of skuAttr) {
                            skuFormatfor.push({
                                name: i.attr_key,
                                value: i.attr_value,
                            })
                            descarr.push(i.attr_value)
                        }
                        return {
                            sale_price: item.sale_price,
                            sellPriceYuan: (item.sale_price / 100).toString(), // 根据sale_price计算
                            stock_num: item.stock_num,
                            sort: 100, // 默认值
                            thumb_img: item.thumb_img,
                            skuArray: item.sku_attrs.map(attr => ({ // 处理多属性
                                name: attr.attr_key,
                                value: attr.attr_value,
                            })),
                            sku_attrs: item.sku_attrs,
                            sku_deliver_info: {
                                stock_type: item.sku_deliver_info.stock_type
                            },
                            sku_code: item.sku_code,
                            desc: item.sku_attrs.map(attr => attr.attr_value).join(" "), // 使用属性值作为描述
                            productId: null,
                            out_sku_id: 0,
                            id: item.sku_id
                        };
                    });

                    // 生成 skuFormatBody
                    // const attrValues = [...new Set(resdata.map(item => item.sku_attrs[0].attr_value))];
                    // const skuFormatBody = [{
                    //     privateSpecName: resdata[0]?.sku_attrs[0]?.attr_key || "尺码", // 假设所有属性key相同
                    //     dynamicTags: attrValues,
                    //     desc: attrValues.map(value => ({ value, skuimgurl: "" })),
                    //     inputVisible: false,
                    //     inputValue: "",
                    //     isAddSkuImg: false
                    // }];

                    // 生成 skuFormatBody(多规格处理)
                    const specMap = new Map();
                    
                    // 收集所有规格信息
                    resdata.forEach(item => {
                        item.sku_attrs.forEach(attr => {
                        if (!specMap.has(attr.attr_key)) {
                            specMap.set(attr.attr_key, new Set());
                        }
                        specMap.get(attr.attr_key).add(attr.attr_value);
                        });
                    });

                    // 转换为目标格式
                    const skuFormatBody = Array.from(specMap).map(([key, values]) => ({
                        privateSpecName: key,
                        dynamicTags: Array.from(values),
                        desc: Array.from(values).map(value => ({ 
                            value,
                            skuimgurl: "", 
                            vcode: this.getRandom()
                        })),
                        inputVisible: false,
                        inputValue: "",
                        isAddSkuImg: false
                    }));

                    return { skus, skuFormatBody };
                },
                getlist() {
                    _apiget("/api/app/productInfo/" + this.id + "/infoForUpdate", true, (code, obj) => {
                        if (code == 200) {
                            var _keymap = new Map();//用于当前显示名称 对应的key只在这个范围内一次性使用

                            if (obj.skuFormatBody) {
                                this.privateGoodsItem = JSON.parse(obj.skuFormatBody)
                                // console.log(this.privateGoodsItem);
                                // this.privateGoodsItem[0].dynamicTags = this.handleReplaceStr(this.privateGoodsItem[0].dynamicTags)
                                // for (let i of this.privateGoodsItem[0].desc) {
                                //     i.value = this.handleReplaceStr(i.value)
                                // }
                                this.privateGoodsItem.forEach((item, index) => {
                                    if (!item.ncode) item.ncode = this.getRandom()
                                    _keymap.set("n" + item.privateSpecName, item.ncode);
                                    item.desc.forEach((list, j) => {
                                        list.vcode = this.getRandom()
                                        list.skuimgurl = list.skuimgurl || ''
                                        _keymap.set("v" + list.value, list.vcode);
                                    })
                                    item.isAddSkuImg = false
                                })
                                window.privateGoodsItem = this.privateGoodsItem;
                            }
                            console.log(_keymap, '_keymap');
                            if (obj.skus) {
                                let arr = []
                                for (let i of this.privateGoodsItem) {
                                    arr = [...arr, ...i.dynamicTags]

                                }
                                let skuarrs = []
                                // console.log("11111111111111111111111");
                                for (let i of obj.skus) {
                                    if(i.skuFormat){
                                        i.skuArray = JSON.parse(i.skuFormat);
                                    }
                                    // if (i.skuFormat != null && i.skuFormat != '') {
                                        // if (i.skuFormat.indexOf('[') == -1) {
                                            // i.skuFormat = "[]";
                                        // }

                                        // i.skuFormat = JSON.parse(i.skuFormat)
                                        // i.skuvalueArr = [] //存储value数组
                                        // if(!i.skuFormat[0].name) {
                                        //     continue
                                        // }
                                        // i.head = {}
                                        // for (let j = 0; j < i.skuFormat.length; j++) {
                                        //     i.head[i.skuFormat[j].name] = i.skuFormat[j].value
                                        // }
                                        for (let sku of i.skuArray) {
                                            var _get = _keymap.get("n" + sku.name);
                                            if (_get) {
                                                // console.log(_get, 'get');
                                                sku.ncode = _get;
                                            }
                                            _get = _keymap.get("v" + sku.value);
                                            if (_get) {
                                                // console.log(_get, 'vget');
                                                sku.vcode = _get;
                                            }
                                            // console.log("current sku", sku);
                                            // i.skuvalueArr.push(sku.value)
                                            // sku.vcode="";//规格值代码,根据sku.value去获取
                                            // sku.ncode="";//规格名称代码 根据sku.name去获取
                                        }
                                    // }
                                    // if(i.sku_deliver_info){
                                    //     if (i.sku_deliver_info.stock_type == 1) {
                                    //         i.stock_type = i.sku_deliver_info.stock_type
                                    //         i.full_payment_presale_delivery_type = i.sku_deliver_info.full_payment_presale_delivery_type
                                    //         i.presale_begin_time = i.sku_deliver_info.presale_begin_time
                                    //         i.presale_end_time = i.sku_deliver_info.presale_end_time
                                    //         i.presale_begin_time_show = this.timestampToDateTime(i.sku_deliver_info.presale_begin_time)
                                    //         i.presale_end_time_show = this.timestampToDateTime(i.sku_deliver_info.presale_end_time)
                                    //         i.full_payment_presale_delivery_time = i.sku_deliver_info.full_payment_presale_delivery_time
                                    //     }
                                    // }
                                    i.sellPrice = Number(i.sellPrice)
                                    i.sellPriceYuan = Number(i.sellPrice / 100)
                                    skuarrs.push(i)
                                    // console.log("action sku value", i);
                                }
                                console.log(skuarrs, 'this.sku_ui_list');
                                this.sku_ui_list = skuarrs


                                setTimeout(() => {

                                    console.log(this.sku_ui_list, 'getlist');
                                }, 1000)

                            }
                            // this.getlogs()
                        }
                    })
                },
                //对比上面的规格和下面的sku中的规格,处理多出和减少的
                //执行 规格的新增 比如 12变123 执行删除 比如123 124包含3的删除
                complatearray(vcodemap, vcodes, skus, _del_array, _add_array) {
                    //vcodes 新的规格值的组合
                    //newallvodes 新的规格值的总和
                    //_del_array 多的vcode集合
                    // _add_array 新增的vcode集合
                    // var _handler = false;
                    // var _find = false;//是否有找到这个组合
                    // var _model = null;

                    // var _del_array=this.matharrayadd(oldallvodes,newallvodes);
                    // console.log('del sku values ',_del_array);

                    var _del_skuid_array = new Array();

                    var _del_index = -1;
                    //下方遍历所有的skus 看看是否新增 删除 还是修改
                    for (var i = 0; i < skus.length; i++) {
                        var sku = skus[i];
                        // if (i == 0) {
                        //     _model = Object.assign({}, sku);
                        // }
                        var skuarray = sku.skuArray;
                        //vcodemap: vcode => { name,value,ncode,vcode}
                        var _sku_vcode_array = new Array();
                        skuarray.forEach((_sku) => {
                            _sku_vcode_array.push(_sku.vcode);
                        });
                        // console.log("voces",vcodes," sku.skuarray.vcodes",_sku_vcode_array);
                        //如果命中,则修改规格名称 或者规格值
                        if (this.matharrayequal(vcodes, _sku_vcode_array)) {
                            skuarray.forEach(sku => {
                                var _get = vcodemap.get(sku.vcode);
                                if (_get) {
                                    sku.value = _get.value;
                                    sku.name = _get.name;
                                }
                            });
                            // _handler = true;
                            // _find = true;

                            // break;
                            if (_del_array == null || _del_array.length == 0) {
                                break;
                            }

                        }

                        //如果有新增的规格 且全包含 表示当前sku缺少至少一个属性
                        if (_add_array && _add_array.length > 0) {
                            if (this.matharrayallinclude(vcodes, _sku_vcode_array)) {
                                // console.log("vcodes ",vcodes," include",_sku_vcode_array);
                                var _adds = this.matharrayadd(vcodes, _sku_vcode_array);
                                if (_adds && _adds.length > 0) {
                                    console.log("需要向", skuarray, "写入", _adds.join('---'));
                                    _adds.forEach(ione => {
                                        // 后面改 sku中没有这个规格值,新增一个进来
                                        var _get = vcodemap.get(ione);
                                        if (_get) {
                                            skuarray.push({ name: _get.name, value: _get.value, vcode: ione });
                                        } else {
                                            console.log("没有获取到vcode:", ione, "的对象,表示这个规格代码代表的规格值和规格名称信息!");
                                        }
                                    });
                                }
                            }
                        }
                        //不相等,可能不是这个sku,要从全局判断
                        //判定 是新增 还是删除
                        if (_del_array && _del_array.length > 0) {
                            console.log('check include array to del ', _del_array, "from", _sku_vcode_array);
                            if (this.matharrayinclude(_del_array, _sku_vcode_array)) {
                                // 表示这个sku要被删除
                                // console.log("由于规格值多出当前sku将要被删除",sku);
                                _del_skuid_array.push(sku.out_sku_id);
                                console.log('hit include array to del ', _del_array, "from", _sku_vcode_array);
                            }
                        }


                    }

                    //删除需要删除的sku!!!
                    if (_del_skuid_array && _del_skuid_array.length > 0) {
                        for (var id of _del_skuid_array) {
                            var _hit = -1;
                            for (var k = 0; k < skus.length; k++) {
                                if (skus[k].out_sku_id == id) {
                                    _hit = k;
                                    console.log('将要删除 skuid', sku.out_sku_id,);
                                    break;
                                }
                            }
                            if (_hit > -1) {
                                skus.splice(_hit, 1);
                            }
                        }
                    }
                },
                complatetoadd(vcodemap, vcodes, skus) {
                    //vcodes 新的规格值的组合
                    var _find = false;//是否有找到这个组合
                    var _model = null;

                    // var _del_array=this.matharrayadd(oldallvodes,newallvodes);
                    // console.log('del sku values ',_del_array);

                    // var _del_skuid_array = new Array();

                    var _del_index = -1;
                    //下方遍历所有的skus 看看是否新增 删除 还是修改
                    for (var i = 0; i < skus.length; i++) {
                        var sku = skus[i];
                        if (i == 0) {
                            _model = Object.assign({}, sku);
                        }
                        var skuarray = sku.skuArray;
                        var _sku_vcode_array = new Array();
                        skuarray.forEach((_sku) => {
                            _sku_vcode_array.push(_sku.vcode);
                        });
                        // console.log(_sku_vcode_array, '_sku_vcode_array');
                        //如果命中,则修改规格名称 或者规格值
                        if (this.matharrayequal(vcodes, _sku_vcode_array)) {
                            _find = true;
                            break;
                        }
                    }

                    if (!_find) {
                        console.log("need add new sku", vcodes.join(" "));
                        //如果没有找到这个组合,则新增一个
                        var _tempskuarray = new Array();
                        vcodes.forEach(ione => {
                            //后面改 sku中没有这个规格值,新增一个进来
                            var _get = vcodemap.get(ione);
                            if (_get) {
                                _tempskuarray.push({ name: _get.name, value: _get.value, vcode: ione });
                            } else {
                                console.log("没有获取到vcode:", ione, "的对象,表示这个规格代码代表的规格值和规格名称信息!");
                            }
                        });
                        //基于vcodes 进行新增一个_sku_obj
                        if (_model != null) {
                            _model.id = 0;
                            _model.skuArray = new Array();
                        } else {
                            _model = {
                                sale_price: 0,
                                sellPriceYuan: 0,
                                stock_num: 10000,
                                sort: 100,
                                thumb_img: '',
                                skuFormat: '',
                                skuArray: [],
                                sku_attrs: [],
                                sku_deliver_info: {

                                },
                                stock_type: 0,
                                full_payment_presale_delivery_type: null,
                                presale_begin_time: null,
                                presale_begin_time_show: null,
                                presale_end_time: null,
                                presale_end_time_show: null,
                                full_payment_presale_delivery_time: null,
                                sku_code: '',
                                desc: '',
                                productId: this.id,
                                out_sku_id: 0,
                            }
                        }
                        _model.skuArray = _tempskuarray;
                        skus.push(_model);
                    }

                    //如何处理规格减少的情况???
                },
                //
                //
                matharrayadd(array1, array2) {
                    //输出array1 比array2多的数组集合
                    if (array2 && array2.length > 0) {
                        var _clone = Object.assign([], array1);
                        array2.forEach(ia => {
                            var _index = _clone.indexOf(ia);
                            if (_index >= 0) {
                                _clone.splice(_index, 1);
                            }
                        })
                        return _clone;
                    }
                    return array1;
                },
                matharrayallinclude(array1, array2) {
                    //array1是否全部包含array2 也就是array2中的每一项在array1中都有,且array1大于array2
                    if (array1.length > array2.length) {
                        var _clone = Object.assign([], array2);
                        array1.forEach(ia => {
                            var _index = _clone.indexOf(ia);
                            if (_index >= 0) {
                                _clone.splice(_index, 1);
                            }
                        })
                        return (_clone.length == 0);
                    }
                    return false;
                },
                matharrayequal(array1, array2) {
                    //对比2个数组是否相等 也可以使用排序后的字符串对比
                    if (array1.length == array2.length) {
                        // var _clone = Object.assign([], array1);
                        var _hitcount = 0;
                        array2.forEach(ia => {
                            var _index = array1.indexOf(ia);
                            if (_index >= 0) {
                                _hitcount++
                                // _clone.splice(_index, 1);
                            }
                        })
                        return array1.length == _hitcount;
                    }
                    return false;
                },
                matharrayinclude(array1, array2) {
                    //array1 是否有元素在array2中,有一个也算
                    if (array1.length > 0 && array2.length > 0) {
                        for (var ia of array2) {
                            var _index = array1.indexOf(ia);
                            if (_index >= 0) {
                                return true;
                            }
                        }
                    }
                    return false;
                },
                timestampToDateTime(timestamp) {
                    const date = new Date(timestamp);
                    const year = date.getFullYear();
                    const month = ("0" + (date.getMonth() + 1)).slice(-2);
                    const day = ("0" + date.getDate()).slice(-2);
                    const hours = ("0" + date.getHours()).slice(-2);
                    const minutes = ("0" + date.getMinutes()).slice(-2);
                    const seconds = ("0" + date.getSeconds()).slice(-2);
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
                handleCate(index) {
                    this.cateList[index].selected = !this.cateList[index].selected
                    this.$set(this.cateList, index, this.cateList[index])
                },
                chooseSpecName(e) {
                    console.log(e, 'chooseSpecName');
                    // if(!e) {

                    // }
                    let chooseobj = this.skuOptionList.find(item => item.name == e);
                    console.log(chooseobj);
                    this.privateGoodsItem[0].dynamicTags = chooseobj.value.split(';')
                    let itemdesc = this.privateGoodsItem[0].dynamicTags
                    this.privateGoodsItem[0].desc = []
                    for (const i of itemdesc) {
                        this.privateGoodsItem[0].desc.push({
                            value: i,
                            vcode: this.getRandom(),
                            skuimgurl: '',
                        })
                    }
                    this.$forceUpdate();
                    console.log(this.privateGoodsItem);
                },
                handleImageshow(arr) {
                    let imgarr = []
                    for (let i of arr) {
                        imgarr.push({
                            url: i
                        })
                        // console.log(imgarr);
                    }
                    return imgarr
                },
                handleImageDelUrl(arr) {
                    let imgarr = []
                    for (let i of arr) {
                        imgarr.push(i.url)
                    }
                    return imgarr.join(',')
                },
                ensureNoDuplicates(specs) {
                    // 创建一个集合来存储已经存在的值  
                    const existingValues = new Set();

                    // 遍历每条规格  
                    for (const spec of specs) {
                        // 创建一个新的数组来存储合法的dynamicTags  
                        const newDynamicTags = [];

                        // 遍历当前的dynamicTags  
                        for (const tag of spec.dynamicTags) {
                            // 如果该值不存在于existingValues集合中,则添加到新数组和集合中  
                            if (!existingValues.has(tag)) {
                                // newDynamicTags.push(tag);  
                                existingValues.add(tag);
                            } else {
                                this.repeatTag = tag
                                return false
                            }
                        }

                        // 更新当前的dynamicTags为新的不包含重复值的数组  
                        // spec.dynamicTags = newDynamicTags;  
                    }

                    // 返回处理后的specs数组  
                    return true;
                },
                realTime(data) {
                    console.log(data)
                    this.preview = data
                },
                handleClose() {
                    this.dialogVisible = false
                },
                // 返回规格值vcode
                handleSkuIndex(desc) {
                    // let arr = desc.split(' ')
                    let backarr = []
                    // console.log(this.privateGoodsItem, 'this.privateGoodsItem');
                    this.privateGoodsItem.forEach((item, index) => {
                        item.desc.forEach((list, j) => {
                            var result = this.handelChangeInclude(desc, list.value);
                            // console.log(desc,"==",list.value,"=>",result);
                            if (result) {
                                // console.log(arr[index], list.value, list.skuid,list, '-----------------');
                                backarr.push(list.vcode);
                                return
                            }
                        })
                    })
                    // console.log(backarr);
                    return backarr
                },
                handelChangeInclude(desc, tar) {

                    if (desc == tar) {
                        return true;
                    }

                    var _ntart = tar + " ";
                    if (desc.indexOf(_ntart) == 0) {
                        return true;
                    }
                    _ntart = " " + tar + " ";
                    if (desc.indexOf(_ntart) > 0) {
                        return true;
                    }
                    _ntart = " " + tar;
                    var _zindex = desc.lastIndexOf(_ntart);
                    // console.log(_zindex,"-"+desc+"-","="+_ntart+"=");
                    if (desc.lastIndexOf(_ntart) == (desc.length - _ntart.length)) {
                        return true;
                    }
                    // console.log("return false ",desc,"->",tar);
                    //var desc ="红 色 黄色 大红色"
                    //var _target="红 色";
                    // desc == _target
                    // desc.startwith(_target+" ");
                    // desc.endwidth(" "+_target);
                    // desc.contains(" "+_target+" ")
                    return false;
                },
                handleReplaceStr(str) {
                    // console.log("line 2218",typeof str,str);
                    if (typeof str == "string") {
                        str = str.replace('[', '【').replace(']', '】').replace('.', '')
                        return str
                    } else {
                        let strArr = []
                        for (let i of str) {
                            let arrkey = i.replace('[', '【').replace(']', '】').replace('.', '')
                            strArr.push(arrkey)
                            // console.log(arrkey, 'array');
                        }
                        // console.log(strArr, 'array');
                        return strArr
                    }

                },
                // 上传之前
                async beforeUpload(file) {
                    console.log(file, 123);
                },
                handleSuccess(response, file, fileList) {
                    console.log(response, file, fileList);
                },
                getRandom() {
                    var code = '';
                    for (var i = 0; i < 6; i++) {
                        code += parseInt(Math.random() * 10);
                    }
                    return code
                },
                // canvas生成的格式为base64,需要进行转化, base64->file
                dataURLtoFile(dataurl, fileName) {
                    let arr = dataurl.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],

                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    return new File([u8arr], fileName, { type: mime })
                },
                handleChangeTable(file, fileList, index) {
                    let formData = new FormData();
                    formData.append(file.name, file.raw)
                    this.uploadSku(formData, index, 'sku')
                    fileList.splice(fileList.length - 1, 1)
                },
                handleChangeSku(file, fileList, index, lists) {
                    let formData = new FormData();
                    formData.append(file.name, file.raw)
                    this.uploadSku(formData, index, 'tablehead', lists)
                    fileList.splice(fileList.length - 1, 1)
                },

                handleClickSkuImg(e, index) {
                    // for (const i of this.privateGoodsItem) {
                    //    if(i.isAddSkuImg) {
                    //         return this.$message({
                    //             message: '勾选多个添加图片会对原有的图片进行覆盖',
                    //             type: 'warning'
                    //         });
                    //    }
                    // }
                    console.log(e, index);
                    this.privateGoodsItem[index].isAddSkuImg = e
                    this.$set(this.privateGoodsItem, index, this.privateGoodsItem[index])
                },

                delskuHeadImg(index, lists) {
                    this.privateGoodsItem[index].desc[lists].skuimgurl = ''
                    this.$set(this.privateGoodsItem, index, this.privateGoodsItem[index])
                },

                blobToFile(theBlob, fileName, fileType) {
                    var file = new window.File([theBlob], fileName, { type: fileType })
                    return file;
                },
                uploadSku(formData, index, type, lists) {
                    $.ajax({
                        url: "/api/app/Upload/UpImage?type=sku&size=1500*0",
                        type: 'post',
                        contentType: false,
                        processData: false,
                        async: true,
                        data: formData,
                        headers: { "token": readToken() },
                        success: (obj) => {
                            if (type == 'sku') {
                                this.sku_ui_list[index].thumb_img = obj.data[0].url
                            } else {
                                this.privateGoodsItem[index].desc[lists].skuimgurl = obj.data[0].url
                                console.log(this.privateGoodsItem);
                                this.$set(this.privateGoodsItem, index, this.privateGoodsItem[index])
                            }
                        },
                        error: (res) => {
                            if (res.status == 413) {
                                layer.msg('图片超过限制')
                            }
                            if (res.status == 401) {
                                layer.msg('登录过期,请重新登录')
                            }
                            if (res.status == 403) {
                                layer.msg('您没有此操作权限')
                            }
                            if (loadid != 0) {
                                layer.close(loadid);
                            }
                        }
                    });
                },
                handleRemove(file, fileList) {

                },
                handleChangeCurrent(currentRow, oldCurrentRow) {
                    // console.log(currentRow, oldCurrentRow);
                },
                handleClickDelImg(index, type) {
                    if (type == 'file') {
                        this.fileList.splice(index, 1)
                    }
                    if (type == 'exam') {
                        this.examList.splice(index, 1)
                    }
                    if (type == 'banner') {
                        this.bannerList.splice(index, 1)
                    }
                    if (type == 'table') {
                        this.sku_ui_list[index].thumb_img = ''
                    }
                    this.$refs.ruleform.validate()
                },
                updateTable(e) {
                    const newIndex = e.newIndex// 新位置下标
                    const oldIndex = e.oldIndex// 原始位置下标
                    // 打印出新位置 位置从0开始算
                    // console.log(newIndex)
                    // console.log(oldIndex)
                },
                //拖拽开始
                dragstar(e, index) {
                    this.drag = true
                    this.starindex = index
                    // console.log(e, index);
                },
                dragenter(e, index) {
                    this.moveIndex = index
                },
                // 拖拽结束
                dragend(e, index) {
                    // console.log(e, index);
                    this.sku_ui_list[this.moveIndex].thumb_img = this.sku_ui_list[this.starindex].thumb_img
                    e.preventDefault();
                    e.stopPropagation();
                },
                _tapsetcoupon(id) {
                    // console.log('tap set coupon');
                    // console.log(elc);
                    if (id != 0) {
                        _showedit('规格优惠券', '../../../../coupon/bitch.html?skuid=' + id, '0', '90%', '80%')
                        // window.parent.creatIframe('coupon/bitch.html?skuid='+id + '&type=sku','规格优惠券['+id+']')
                        //设置tag this.sku_ui_list[index].image = obj.data[0].url
                        if (this.tableColumnList) {
                            if (this.sku_ui_list && this.sku_ui_list.length > 0) {
                                for (var a = 0; a < this.sku_ui_list.length; a++) {
                                    var ii = this.sku_ui_list[a];
                                    if (ii.id == id) {
                                        ii.tag = '已点击';
                                    }
                                }
                            }
                        }
                    } else {
                        layer.msg("编辑的时候才可以使用当前功能!");
                    }
                },
                updateList(e) {
                    const newIndex = e.newIndex// 新位置下标
                    const oldIndex = e.oldIndex// 原始位置下标
                    // 打印出新位置 位置从0开始算
                    // console.log(newIndex)
                    // console.log(oldIndex)
                    // 打印出来的为该位置的对象
                    // console.log(this.fileList)
                },
                addSku() {
                    if (this.privateGoodsItem.length == 5) return layer.msg('最多添加 5 个规格名')
                    var _randcode = this.getRandom();
                    this.privateGoodsItem.push({
                        privateSpecName: '',
                        dynamicTags: [],
                        desc: [{
                            value: '',
                            vcode: _randcode,
                            skuimgurl: ''
                        }],
                        inputVisible: false,
                        inputValue: '',
                        vcode: _randcode,
                        isAddSkuImg: false
                    })
                },
                // 笛卡尔积算法
                cartesianProductOf(...args) {
                    return args.reduce((total, current) => {
                        let ret = []
                        total.forEach((a) => {
                            current.forEach((b) => {
                                ret.push(a.concat([b]))
                            })
                        })
                        return ret
                    },
                        [[]]
                    )
                },
                addSkuItem(index) {
                    var _randcode = this.getRandom();
                    this.privateGoodsItem[index].desc.push({ value: '', skuid: _randcode, vcode: _randcode, skuimgurl: '' })
                    this.$set(this.privateGoodsItem, index, this.privateGoodsItem[index])
                },
                clogArr() {
                    const specParams = []
                    for (let spec = 0; spec < this.privateGoodsItem.length; spec++) {
                        specParams.push({
                            isCommon: false,
                            paramName: this.privateGoodsItem[spec].privateSpecName,  // 货品名
                            paramNameValues: this.privateGoodsItem[spec].dynamicTags,  // 商品对应规格名的规格值
                            price: this.privateGoodsItem[spec].price
                        })
                    }
                    // console.log(specParams, this.sku_ui_list);
                    // let arr = []
                    // let tablearr = []
                    // for (let i = 0; i < this.sku_ui_list.length; i++) {
                    //     tablearr.push(Object.assign(this.sku_ui_list[i],res.data.attrs[i]));  
                    // }

                },
                handleblur(e, index) {
                    console.log(this.sku_ui_list, index);
                    this.$set(this.sku_ui_list, index, this.sku_ui_list[index])
                    // this.$forceUpdate();
                },
                handleSelectChangesku(e, index, row) {
                    console.log(this.sku_ui_list, index, row);
                    this.$set(this.sku_ui_list, index, this.sku_ui_list[index])
                    // this.$forceUpdate();
                },
                handleChangeDate(e, index, arg) {
                    console.log(Math.floor(new Date(e).getTime() / 1000));
                    this.sku_ui_list[index][arg] = Math.floor(new Date(e).getTime() / 1000)
                    this.$set(this.sku_ui_list, index, this.sku_ui_list[index])
                    // this.$forceUpdate();
                },
                delsku(index) {
                    this.privateGoodsItem.splice(index, 1)
                },
                delskuitem(index, skuindex) {
                    this.privateGoodsItem[index].desc.splice(skuindex, 1)
                    this.$set(this.privateGoodsItem, index, this.privateGoodsItem[index])
                },
                handleBatchStockType() {
                    for (const i of this.sku_ui_list) {
                        i.stock_type = this.presaleform.stock_type
                    }
                    this.$forceUpdate()
                },
                handleBatchDeliveryType() {
                    for (const i of this.sku_ui_list) {
                        i.full_payment_presale_delivery_type = parseInt(this.presaleform.full_payment_presale_delivery_type)
                    }
                    this.$forceUpdate()
                },
                handleSelectChangeBatch(e) {
                    for (const i of this.sku_ui_list) {
                        i.full_payment_presale_delivery_time = this.presaleform.full_payment_presale_delivery_time
                    }
                    this.$forceUpdate()
                },
                handleChangeDateBatch(e, time_index) {

                    this.presaleform[time_index] = Math.floor(new Date(e).getTime() / 1000)

                    let nowtime = Math.floor(new Date().getTime() / 1000)
                    if (this.presaleform.presale_end_time) {
                        if (this.presaleform.presale_end_time - nowtime > 2592000) {
                            this.$alert('预售结束时间距离现在需<=30天', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    }
                    if (this.presaleform.presale_end_time && this.presaleform.presale_begin_time) {
                        if (this.presaleform.presale_end_time - this.presaleform.presale_begin_time > 1296000) {
                            this.$alert('预售时间区间需<=15天', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    }
                    console.log(e, this.presaleform);
                },
                handleBatchTime(e) {
                    for (const i of this.sku_ui_list) {
                        i[e] = this.presaleform[e]
                        i[e + '_show'] = this.presaleform[e + '_show']
                    }
                    this.$forceUpdate()
                    console.log(this.sku_ui_list);
                },
                isVideo(url) {
                    // 使用文件扩展名来判断是否为视频  
                    const ext = url.split('.').pop().toLowerCase();
                    const videoExts = ['mp4', 'webm', 'ogg', 'mov', 'avi', /* ... 其他视频扩展名 ... */];
                    return videoExts.includes(ext);
                },
                isImage(url) {
                    // 使用文件扩展名来判断是否为图片  
                    const ext = url.split('.').pop().toLowerCase();
                    const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp' /* ... 其他图片扩展名 ... */];
                    return imageExts.includes(ext);
                },
                handleClickSku() {

                },
                setStock() {
                    this.sku_ui_list.forEach((item) => {
                        item.stock_num = this.stockNumSet

                    })
                    console.log(this.sku_ui_list);
                },
                setMoney() {
                    if (this.moneyNumSet > 0 && this.moneyNumSet != null) {
                        this.sku_ui_list.forEach((item) => {
                            item.sellPriceYuan = this.moneyNumSet
                            item.sale_price = parseInt((this.moneyNumSet / 100).toFixed(2))
                        })
                    }

                }

            }
        })
    </script>
    <script>

        $(function () {

        })



    </script>
</body>

</html>
​ ​