商品列表新ui界面

src/components/page/third/goods/StoreGoodsList1.vue

@@ -0,0 +1,1524 @@
+<template>
+    <div class="page-wrap">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <i class="el-icon-eleme"></i>商品列表               
+            </el-breadcrumb>
+        </div>
+        <div class="background">
+            <div class="leftbox">
+                <ul class="storelist">
+                    <li v-for="(item,index) in goodsTypeList" :class="item.selected ? 'selected' : ''"@click="debouncedClickType(item)" @mouseenter="showIcon(item,index)"@mouseleave="hideIcon(item,index)">
+                        <span class="store_name">{{item.goodsTypeName}}
+                            <span class="goods-count">{{item.goodsCounts || 0}}</span>
+                            <span class="" v-if="item.newFlag">上新</span>
+                        </span>
+                        <i class="el-icon-top" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,1)"></i>
+                        <i class="el-icon-edit" v-show="item.showIcon" @click="updateType(item)"></i>
+                        <i class="el-icon-delete" v-show="item.showIcon" @click="deleteType(item)"></i>
+                        <i class="el-icon-upload2" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,2)"></i>
+                    </li>
+                </ul>
+                <ul>
+                    <li class="mr-t-10" style="display: flex;">
+                        <div class="newkind" style="width: 70px;color: #666" @click="addType">新建分类</div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="topbox">
+                <el-col :span="20" :xs="24">
+                    <el-row :gutter="10" v-show="!isSort">
+                        <el-col :span="1.5">
+                            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGoods"
+                            >新增</el-button
+                            >
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button plain icon="el-icon-edit" size="mini" :disabled="!allGoodsList.length > 0" @click="sortGoods"
+                            >排序管理</el-button
+                            >
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="10" v-show="isSort">
+                        <el-col :span="1.5">
+                            <el-button plain icon="el-icon-plus" size="mini" @click="closeSortGoods"
+                            >取消排序</el-button
+                            >
+                        </el-col>
+                        <el-col :span="1.5">
+                            <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="debouncedUpdateSort"
+                            >保存排序</el-button
+                            >
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </div>
+
+            <div class="rightbox">
+                <div style="flex: 1; overflow-y: auto; min-height: 0;">
+                <el-table
+                    v-if="!isSort"
+                    ref="multipleTable"
+                    :data="goodsList"
+                    tooltip-effect="dark"
+                    :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
+                    style="width: 100%; margin-top: 10px"
+                    @cell-mouse-enter="mouseEnter"
+                    @cell-mouse-leave="mouseLeave"
+
+                >
+                    <el-table-column label="商品" width="500">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <div class="left-nav">
+                                    <el-popover
+                                        placement="right-start"
+                                        width="200"
+                                        height="200"
+                                        trigger="hover">
+                                        <div slot="reference">
+                                            <div class="goods-img text-align">
+                                                <div class="search-icon">
+                                                    <span class="el-icon-zoom-in" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></span>
+                                                    <span class="goods-status">{{scope.row.status === 1 || (showGoodsIcon && rowId === scope.row.__ob__.dep.id) ? '' : '已下架'}}</span>
+                                                </div>
+                                                <span v-if="scope.row.status !== 1">
+                                                    <div class="transparent-layer block-model el-popover__reference"></div>
+                                                </span>
+                                                <span v-if="scope.row.status === 1">
+                                                    <div class="transparent-layer el-popover__reference" tabindex="0"></div>
+                                                </span>
+                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
+                                            </div>
+                                        </div>
+                                        <div class="popover-modal">
+                                            <img :src="scope.row.pictureUrl" alt class="width-150">
+                                            <div>
+                                                <div class="text-align width-150 mr-t-10">
+                                                    <el-upload
+                                                        class="upload-demo"
+                                                        :action="updatePicUrl"
+                                                        :file-list="fileList"
+                                                        :limit="1"
+                                                        :multiple="false"
+                                                        list-type="picture"
+                                                        :before-upload="beforeUpload"
+                                                        :on-success="successUpload"
+                                                        :data="uploadData">
+                                                        <el-button size="small" type="primary" @click="changePic(scope.row.goodsId)">更换</el-button>
+                                                    </el-upload>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </el-popover>
+                                    <div>
+                                        <div>
+                                            {{scope.row.goodsName}}
+                                            <span class="has-new-g" v-if="scope.row.newGoodsFlg === 1">新品</span>
+                                            <el-popover
+                                                placement="left"
+                                                width="300"
+                                                trigger="click"
+                                                ref="updateNameRef"
+                                                @show="showName(scope.row)"
+                                                @hide="hideName(scope.row)"
+                                                :append-to-body="false">
+                                                <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+                                                <div class="popover-modal">
+                                                    <p>修改商品名称</p>
+                                                    <br>
+                                                    <el-input placeholder="请输入内容" v-model="scope.row.goodsName"></el-input>
+                                                    <div class="comfirm">
+                                                        <el-button round @click="canceUpdateName(scope.row)">取消</el-button>
+                                                        <el-button type="primary" round @click="debouncedUpdateGoodsName(scope.row.goodsId,scope.row.goodsName)">保存</el-button>
+                                                    </div>
+                                                </div>
+                                            </el-popover>
+                                        </div>
+                                        <div>
+                                            <span>月售{{scope.row.salesCount}}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="价格" width="120">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <span class="pd-r-10" v-if="scope.row.skuList.length === 1">￥{{ scope.row.skuList[0].costPrice || 0
+                                    }}</span>
+                                <span class="pd-r-10" v-if="scope.row.skuList.length > 1">￥{{ scope.row.skuList[0].costPrice }}起</span>
+                                <el-popover
+                                    placement="left"
+                                    width="300"
+                                    :key="`price-${scope.row.goodsId}`"
+                                    trigger="click"
+                                    @hide="hidePrice()"
+                                    :append-to-body="false">
+                                    <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+                                    <form class="popover-modal">
+                                        <p>修改价格</p>
+                                        <input type="text" name="shop_id" style="display: none">
+                                        <div class="mutiple-specifications">
+                                            <div v-for="(item,index) in scope.row.skuList">
+                                                <span>{{item.modelName}}</span>
+                                                <el-input placeholder="请输入价格" v-model="item.costPrice">
+                                                    <template slot="append">元</template>
+                                                </el-input>
+                                            </div>
+                                            <div class="comfirm">
+                                                <el-button round @click="canceUpdatePrice">取消</el-button>
+                                                <el-button type="primary" round @click="debouncedUpdateGoodsPrice(scope.row.goodsId,scope.row.skuList)">保存</el-button>
+                                            </div>
+                                        </div>
+                                    </form>
+                                </el-popover>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="库存" min-width="170px" align="center">
+                        <template slot-scope="scope">
+                            <div class="cell" v-if="scope.row.skuList.length === 1">
+                                <div class="stock-list" >
+                                    <span style="width: 70px;">{{scope.row.skuList[0].inventory}}</span>
+                                    <el-popover
+                                        placement="left"
+                                        :key="`count-${scope.row.goodsId}`"
+                                        width="400"
+                                        trigger="click"
+                                        @hide="hidePrice()"
+                                        :append-to-body="false"
+                                        style="margin-left: 5px">
+                                        <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
+
+                                        <div class="popover-modal">
+                                            <p style="text-align: center">修改库存</p>
+                                            <div>
+                                                <div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
+                                                    <span class="item-name">{{item.modelName}}</span>
+                                                    <div class="list-item">
+                                                        <el-input v-model="item.inventory" style="width: 140px"></el-input>
+                                                    </div>
+                                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="resetedOne(item)">沽清</el-link>
+                                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="addOne(item)">置满</el-link>
+                                                </div>
+                                            </div>
+                                            <div class="comfirm">
+                                                <el-button round @click="canceUpdateCount">取消</el-button>
+                                                <el-button type="primary" round @click="debouncedUpdateGoodsInventory(scope.row.skuList)">保存</el-button>
+                                            </div>
+                                        </div>
+                                    </el-popover>
+                                </div>
+                                <span>
+                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="debouncedResetAll(scope.row.skuList)">沽清</el-link>
+                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="debouncedAddAll(scope.row.skuList)">置满</el-link>
+                                </span>
+
+                            </div>
+                            <div class="cell" v-if="scope.row.skuList.length > 1">
+                                <div class="stock-list" >
+                                    <span style="width: 70px;">多库存</span>
+                                    <el-popover
+                                        width="400"
+                                        trigger="click"
+                                        placement="left"
+                                        @hide="hidePrice()"
+                                        :key="`moreCount-${scope.row.goodsId}`"
+                                        :append-to-body="false"
+                                        style="margin-left: 5px">
+                                        <el-link :underline="false" slot="reference" style="font-size: 12px">库存管理</el-link>
+                                        <div class="popover-modal">
+                                            <p style="text-align: center">修改库存</p>
+                                            <div>
+                                                <div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
+                                                    <span class="item-name">{{item.modelName}}</span>
+                                                    <div class="list-item">
+                                                        <el-input v-model="item.inventory" style="width: 140px"></el-input>
+                                                    </div>
+                                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="resetedOne(item)">沽清</el-link>
+                                                    <el-link :underline="false" style="width: 40px;font-size: 12px" @click="addOne(item)">置满</el-link>
+                                                </div>
+                                            </div>
+                                            <div class="comfirm">
+                                                <el-button round @click="canceUpdateCount">取消</el-button>
+                                                <el-button type="primary" round @click="debouncedUpdateGoodsInventory(scope.row.skuList)">保存</el-button>
+                                            </div>
+                                        </div>
+                                    </el-popover>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <div>
+                                    <el-link :underline="false" v-if="scope.row.newGoodsFlg === 0" style="width: 60px;font-size: 12px;padding-right: 10px" @click="debouncedSetNewGoods(scope.row)">设置新品</el-link>
+                                    <el-link :underline="false" v-if="scope.row.newGoodsFlg === 1" style="width: 60px;font-size: 12px;padding-right: 10px" @click="debouncedSetNewGoods(scope.row)">取消新品</el-link>
+                                    <el-link :underline="false" style="width: 40px;font-size: 12px;padding-right: 10px" @click="updateGoods(scope.row)">编辑</el-link>
+                                    <el-link :underline="false" v-if="scope.row.status === 0" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedUpdateStatus(scope.row.status,scope.row.goodsId)">上架</el-link>
+                                    <el-link :underline="false" v-if="scope.row.status === 1" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedUpdateStatus(scope.row.status,scope.row.goodsId)">下架</el-link>
+                                    <el-link :underline="false" v-if="scope.row.status === 0" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedDeleteGoods(scope.row.goodsId)">删除</el-link>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-table
+                    v-if="isSort"
+                    ref="DragTable"
+                    class="t1"
+                    :data="sortGoodsList"
+                    row-key="goodsId"
+                    tooltip-effect="dark"
+                    >
+                    <el-table-column label="商品" width="500">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <div class="left-nav">
+                                    <el-popover
+                                        placement="right-start"
+                                        width="200"
+                                        height="200"
+                                        trigger="hover">
+                                        <div slot="reference">
+                                            <div class="goods-img text-align">
+                                                <div class="search-icon">
+                                                    <span class="el-icon-zoom-in" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></span>
+                                                    <span class="goods-status">{{scope.row.status === 1 || (showGoodsIcon && rowId === scope.row.__ob__.dep.id) ? '' : '已下架'}}</span>
+                                                </div>
+                                                <span v-if="scope.row.status !== 1">
+                                                    <div class="transparent-layer block-model el-popover__reference"></div>
+                                                </span>
+                                                <span v-if="scope.row.status === 1">
+                                                    <div class="transparent-layer el-popover__reference" tabindex="0"></div>
+                                                </span>
+                                                <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
+                                            </div>
+                                        </div>
+                                        <div class="popover-modal">
+                                            <img :src="scope.row.pictureUrl" alt class="width-150">
+                                        </div>
+                                    </el-popover>
+                                    <div>
+                                        <div>
+                                            {{scope.row.goodsName}}
+                                        </div>
+                                        <div>
+                                            <span>月售</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="价格" width="120">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <span class="pd-r-10" v-if="scope.row.skuList.length === 1">￥{{ scope.row.skuList[0].costPrice || 0
+                                    }}</span>
+                                <span class="pd-r-10" v-if="scope.row.skuList.length > 1">￥{{ scope.row.skuList[0].costPrice}}起</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="库存" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <div class="cell" v-if="scope.row.skuList.length === 1">
+                                <div class="stock-list" >
+                                    <span>{{scope.row.skuList[0].inventory}}</span>
+                                </div>
+                            </div>
+                            <div class="cell" v-if="scope.row.skuList.length > 1">
+                                <div class="stock-list" >
+                                    <span style="width: 70px;">多库存</span>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <div class="cell">
+                                <div>
+                                    <el-link :underline="false" style="width: 60px;font-size: 12px;padding-right: 10px" @click="btnUp(scope.$index)">置顶</el-link>
+                                    <span class="pd-r-10" style="color: rgb(192, 196, 204);">拖动可排序</span>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                </div>
+                <div v-if="!isSort" style="flex-shrink: 0; display: flex; justify-content: flex-end; padding-top: 10px;">
+                    <el-pagination
+                        background
+                        @size-change="handleSizeChange"
+                        @current-change="handlePageChange"
+                        :current-page="pageNum"
+                        :page-sizes="[4, 10, 20, 50]"
+                        :page-size="pageSize"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </div>
+            </div>
+        </div>
+        <el-dialog :title="editTypeTitle" :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :visible.sync="typeDialogVisible" :before-close="closeDia" width="600px">
+            <div class="container" >
+                <div class="form-box">
+                    <el-form ref="form" :model="editTypeForm" label-width="100px" style="width: 500px">
+                        <el-form-item label="分类名称">
+                            <el-input v-model="editTypeForm.goodsTypeName"></el-input>
+                        </el-form-item>
+                        <br>
+                        <div style="color:red;font-size:12px;width:600px">注：为避免显示不美观，分类名称不能超过14个字符。推荐4个字符。新建的分类排在最上面。</div>
+                        <br>
+                        <el-form-item label="类型" required>
+                            <el-select v-model="editTypeForm.type" placeholder="请选择">
+                                <el-option
+                                    v-for="item in typeList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="debouncedSubmit">保存</el-button>
+                            <el-button @click="closeDia">关闭</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </el-dialog>
+
+        <el-dialog :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :title="editTitle" :visible.sync="dialogVisible" :before-close="closeDialog">
+            <div class="form-box">
+                <el-form ref="form" :model="goodsInfo" label-width="120px" style="width: 100%">
+                    <el-form-item label="基本信息" style="text-align:left">
+                        <el-form-item label="商品名称" :required="true" style="text-align:left">
+                            <el-input v-model="goodsInfo.goodsName" style="width:360px" clearable></el-input>
+                        </el-form-item>
+                        <el-form-item label="商品图片">
+                            <div style="display: flex;align-items: center;">
+                                <div class="add" v-if="isShow">
+                                    <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
+                                           ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;">
+                                </div>
+                                <div style="position: relative;" v-if="!isShow" class="add1">
+                                    <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
+                                           ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;position: absolute;top: 0;left: 0;z-index: 99;">
+                                    <img v-if="!goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" src alt />
+                                    <img v-if="goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" :src="goodsInfo.pictureUrl" alt/>
+                                </div>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="商品分类" :required="true" style="text-align:left">
+                            <el-select v-model="goodsInfo.goodsTypeId" filterable placeholder="请选择商品分类" style="width: 178px">
+                                <el-option
+                                    v-for="item in storeGoodsTypeList"
+                                    :key="item.goodsTypeId"
+                                    :label="item.goodsTypeName"
+                                    :value="item.goodsTypeId">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="商品描述" style="text-align:left">
+                            <el-input type="textarea" autosize v-model="goodsInfo.rmk" placeholder="请输入内容"></el-input>
+                        </el-form-item>
+                        <el-form-item label="用户每单最低购买数量" :required="true" style="text-align:left">
+                            <el-input autosize v-model="goodsInfo.miniNum" placeholder="请输入内容" style="margin-top: 15px"></el-input>
+                        </el-form-item>
+                        <div style="color: red; font-size: 12px; padding-left: 120px; padding-top: 5px;">
+                            如：设为"2"，用户下单会最少买两份此商品。
+                        </div>
+                    </el-form-item>
+
+                    <el-divider></el-divider>
+                    <el-form-item label="商品规格" style="text-align:left">
+                        <el-form-item :required="true" style="text-align:left">
+                            <div>为您的商品添加不同的规格，如：大杯、小杯等</div>
+                            <div class="goods-sku" v-for="(item,index) in modelBeanList" :key="item.id">
+                                <div style="display: flex; align-items: center; width: 720px; flex-wrap: wrap;">
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            规格名
+                                        </div>
+                                        <div class="el-input" style="width: 100px;">
+                                            <el-input placeholder="规格名" v-model="item.modelName">
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            价格
+                                        </div>
+                                        <div class="el-input" style="width: 150px;">
+                                            <el-input v-model="item.costPrice">
+                                                <template slot="append">元</template>
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            餐盒费
+                                        </div>
+                                        <div class="el-input" style="width: 150px;">
+                                            <el-input v-model="item.packingFee">
+                                                <template slot="append">元</template>
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            库存
+                                        </div>
+                                        <div class="el-input" style="width: 100px;">
+                                            <el-input  v-model="item.inventory"></el-input>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hover" style="margin-top: 10px;">
+                                <el-link :underline="false" style="font-size: 14px" @click="addModel">
+                                    <span class="el-icon-circle-plus-outline"></span>
+                                    <span>添加规格, 最多8个, 保存之后不可删除</span>
+                                </el-link>
+                            </div>
+                        </el-form-item>
+                    </el-form-item>
+                    <el-divider></el-divider>
+                    <el-form-item label="商品属性" style="text-align:left">
+                        <el-form-item :required="true" style="text-align:left">
+                            <div>为您的商品添加不同的属性，如：辣度,甜度等(多个属性用逗号隔开)</div>
+                            <div class="goods-sku" v-for="(item,index) in propertyBeanList" :key="item.id">
+                                <div style="display: flex; align-items: center; width: 720px; flex-wrap: wrap;">
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            属性名称
+                                        </div>
+                                        <div class="el-input" style="width: 100px;">
+                                            <el-input placeholder="如：辣度" v-model="item.propertyName">
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div class="mr-r-20">
+                                        <div>
+                                            <span class="require-icon"></span>
+                                            属性细分(至少填写两个)
+                                        </div>
+                                        <div class="el-input" style="width: 400px;">
+                                            <el-input v-model="item.propertyList">
+                                            </el-input>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <br>
+                                        <div class="hover">
+                                            <el-link :underline="false" style="font-size: 14px" @click="deleteProperty(item)">
+                                                <span class="el-icon-remove-outline"></span>
+                                                <span>移除</span>
+                                            </el-link>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hover" style="margin-top: 10px;">
+                                <el-link :underline="false" style="font-size: 14px" @click="addProperty">
+                                    <span class="el-icon-circle-plus-outline"></span>
+                                    <span>添加属性, 最多5个</span>
+                                </el-link>
+                            </div>
+                        </el-form-item>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button type="primary" @click="debouncedSave">保存</el-button>
+                        <el-button @click="closeDialog">关闭</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import moneyConverter from "../../../common/tool";
+import Sortable from 'sortablejs'
+const querystring = require("querystring");
+
+// 防抖工具函数
+function debounce(fn, delay = 300) {
+    let timer = null;
+    return function (...args) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn.apply(this, args);
+        }, delay);
+    };
+}
+
+export default {
+    name: "ConsulManager",
+
+    data() {
+        return {
+            url: '/thirdStoreGoodsManage/getStoreGoodsTypeList',
+            getTypeUrl: '/thirdStoreGoodsManage/getTypeList',
+            goodsUrl: '/thirdStoreGoodsManage/getStoreGoodsListForThird',
+            updatePicUrl: '/thirdStoreGoodsManage/updateGoodsPicForThird',
+            updateNameUrl: '/thirdStoreGoodsManage/updateGoodsNameForThird',
+            updatePriceUrl: '/thirdStoreGoodsManage/updateGoodsPriceForThird',
+            updateInventoryUrl: '/thirdStoreGoodsManage/updateGoodsInventoryForThird',
+            updateGoodsUrl: '/thirdStoreGoodsManage/update',
+            changeStatusUrl: '/thirdStoreGoodsManage/changeStatus',
+            setNewFlagUrl: '/thirdStoreGoodsManage/setNewFlag',
+            updateSortUrl: '/thirdStoreGoodsManage/updateSort',
+            updateTypeUrl: '/thirdStoreGoodsManage/updateType',
+            deleteTypeUrl: '/thirdStoreGoodsManage/deleteType',
+            checkSpecialUrl: '/thirdStoreGoodsManage/checkSpecial',
+            changeOrderKeyUrl: '/thirdStoreGoodsManage/changeOrderKey',
+            deleteUrl: '/thirdStoreGoodsManage/deleteGoods',
+            goodsTypeList: [],
+            storeGoodsTypeList: [],
+            typeList: [{
+                value: 0,
+                label: '普通分类'
+            }, {
+                value: 1,
+                label: '必点分类(每个菜单最多只能设置一个)'
+            }],
+            goodsList: [],
+            allGoodsList: [],
+            store: {},
+            editTypeForm: {
+                goodsTypeName: '',
+                goodsTypeId: '',
+                type: 0
+            },
+            editTypeTitle: '',
+            typeDialogVisible: false,
+            uploadData: {},
+            goodsId: '',
+            rowId: '',
+            showGoodsIcon: false,
+            fileList: [],
+            goodsName: '',
+            goodsTypeId: '',
+            skuList: [],
+            editTitle: '',
+            dialogVisible: false,
+            goodsInfo: {
+                goodsId: '',
+                pictureUrl: '',
+                goodsName: '',
+                miniNum: 1,
+                utils: '份',
+                goodsTypeId: '',
+                goodsTypeName: '',
+                rmk: '',
+                modelBeanList: [],
+                propertyBeanList: [],
+            },
+            isShow: true,
+            modelBeanList: [{
+                id: 1,
+                modelId: '',
+                modelName: '',
+                packingFee: '',
+                salePrice: '',
+                costPrice: '',
+                inventory: ''
+            }],
+            propertyBeanList: [],
+            isSpecial: false,
+            isSort: false,
+            sortGoodsList: [],
+            stepsIds: [],
+            isMobile: false,
+            pageNum: 1,
+            pageSize: 4,
+            total: 0,
+        };
+    },
+    created () {
+        if (this.$isMobile()){
+            // 移动端
+            this.isMobile = true
+        } else {
+            // PC端
+            this.isMobile = false
+        }
+        let areaId = localStorage.getItem("areaId");
+
+        if (areaId) {
+            this.updatePicUrl = "/a" + areaId + this.updatePicUrl
+        }
+        this.store = JSON.parse(localStorage.getItem("storeInfo"));
+        this.getDataList()
+
+        // 防抖处理：避免快速重复点击导致的重复请求
+        this.debouncedClickType = debounce(this.clickType, 300)
+        this.debouncedUpdateStatus = debounce(this.updateStatus, 500)
+        this.debouncedDeleteGoods = debounce(this.deleteGoods, 500)
+        this.debouncedSetNewGoods = debounce(this.setNewGoods, 500)
+        this.debouncedChangOrderKey = debounce(this.changOrderKey, 300)
+        this.debouncedResetAll = debounce(this.resetAll, 500)
+        this.debouncedAddAll = debounce(this.addAll, 500)
+        this.debouncedSubmit = debounce(this.submit, 800)
+        this.debouncedUpdateSort = debounce(this.updateSort, 800)
+        this.debouncedUpdateGoodsName = debounce(this.updateGoodsName, 500)
+        this.debouncedUpdateGoodsPrice = debounce(this.updateGoodsPrice, 500)
+        this.debouncedUpdateGoodsInventory = debounce(this.updateGoodsInventory, 500)
+        this.debouncedSave = debounce(this.save, 800)
+    },
+    methods: {
+        //行拖拽,排序方法
+        //表格拖动排序
+        dragSort() {
+            const el = this.$refs.DragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+            this.sortable = Sortable.create(el, {
+                ghostClass: 'sortable-ghost',
+                setData: function (dataTransfer) {
+                    dataTransfer.setData('Text', '')
+                },
+                onEnd: e => {
+                    const targetRow = this.sortGoodsList.splice(e.oldIndex, 1)[0];
+                    this.sortGoodsList.splice(e.newIndex, 0, targetRow);
+                    this.rebuildStepsIds();
+                }
+            })
+        },
+        rebuildStepsIds() {
+            this.stepsIds = this.sortGoodsList.map(x => x.goodsId);
+        },
+        btnUp(index) {
+            let item = this.sortGoodsList[index]
+            this.sortGoodsList.splice(index,1)
+            this.sortGoodsList.unshift(item)
+            this.rebuildStepsIds();
+        },
+        updateSort() {
+            if (!this.stepsIds || this.stepsIds.length === 0) {
+                this.$message.error("排序商品不能为空");
+                return;
+            }
+this.$axios.post(this.updateSortUrl,querystring.stringify({
+                storeId: this.store.storeId,
+                stepsIds: JSON.parse(JSON.stringify(this.stepsIds))
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    this.closeSortGoods()
+                    this.getGoodsList();
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch(error => {
+            });
+        },
+
+        sortGoods() {
+            this.isSort = true
+            this.sortGoodsList = JSON.parse(JSON.stringify(this.allGoodsList))
+            this.rebuildStepsIds();
+            this.$nextTick(() =>{
+                this.dragSort()
+            })
+        },
+        closeSortGoods() {
+            if (this.sortable) {
+                this.sortable.destroy();
+                this.sortable = null;
+            }
+                this.isSort = false;
+            this.sortGoodsList = []
+        },
+        addGoods() {
+            this.editTitle = '新增商品'
+            this.dialogVisible = true;
+            this.getGoodsTypeList()
+        },
+        updateGoods(row) {
+            this.goodsInfo = JSON.parse(JSON.stringify(row))
+            if(row.pictureUrl != null && row.pictureUrl !== '' &&  row.pictureUrl !== 'null'){
+                this.isShow = false;
+            }
+            this.modelBeanList = JSON.parse(JSON.stringify(row.skuList))
+            this.propertyBeanList = row.params || []
+            this.editTitle = '编辑商品'
+            this.dialogVisible = true;
+            this.check(row.goodsId);
+            this.getGoodsTypeList()
+        },
+        getGoodsTypeList() {
+this.$axios.post(this.getTypeUrl,querystring.stringify({
+                storeId: this.store.storeId
+            })).then(res => {
+                this.storeGoodsTypeList = res.data.list;
+            }).catch(error => {
+            });
+        },
+        getDataList() {
+this.$axios.post(this.url,querystring.stringify({
+                storeId: this.store.storeId
+            })).then(res => {
+                this.goodsTypeList = res.data.list;
+                this.goodsTypeList.forEach((item,index) => {
+                    if (item.goodsTypeId !== this.goodsTypeId){
+                        item.selected = false
+                    }
+                    item.showIcon = false
+                    item.id = index + 1
+                })
+            }).catch(error => {
+            });
+        },
+        getGoodsList() {
+            if (this.goodsTypeId === '' || this.goodsTypeId === null || this.goodsTypeId === undefined){
+                return
+            }
+this.$axios.post(this.goodsUrl,querystring.stringify({
+                storeId: this.store.storeId,
+                goodsTypeId: this.goodsTypeId
+            })).then(res => {
+                this.allGoodsList = (res.data.list || []).map(item => {
+                    item.showIcon = false;
+                    item.skuList.forEach(i => {
+                        i.costPrice = this.moneyConverter(i.costPrice);
+                        i.packingFee = this.moneyConverter(i.packingFee);
+                    });
+                    return item;
+                });
+                this.total = this.allGoodsList.length;
+                this.updatePageData();
+            }).catch(error => {
+            });
+        },
+        updatePageData() {
+            // 当前页无数据且非第一页时自动回退一页
+            if (this.pageNum > 1 && this.allGoodsList.length <= (this.pageNum - 1) * this.pageSize) {
+                this.pageNum--;
+            }
+            const start = (this.pageNum - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            this.goodsList = this.allGoodsList.slice(start, end);
+        },
+        handlePageChange(page) {
+            this.pageNum = page;
+            this.updatePageData();
+        },
+        handleSizeChange(size) {
+            this.pageSize = size;
+            this.pageNum = 1;
+            this.updatePageData();
+        },
+        updateGoodsName(id,name) {
+            if (name == null || name === '') {
+                this.$message.error("商品名称不能为空");
+                return;
+            } else if (name.length > 30) {
+                this.$message.error("商品名称不能超过30个字符");
+                return;
+            }
+this.$axios.post(this.updateNameUrl, querystring.stringify({
+                goodsId: id,
+                goodsName: name
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    document.body.click();
+                    this.updateNameVisible = false;
+                    this.getGoodsList();
+                } else {
+                    document.body.click();
+                    this.updateNameVisible = false;
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        updateGoodsPrice(id,list) {
+this.$axios.post(this.updatePriceUrl, querystring.stringify({
+                goodsId: id,
+                modelBeanListJson: JSON.stringify(list),
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    document.body.click();
+                    this.getGoodsList();
+                } else {
+                    document.body.click();
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        updateGoodsInventory(list) {
+this.$axios.post(this.updateInventoryUrl, querystring.stringify({
+                modelBeanListJson: JSON.stringify(list),
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    this.getGoodsList();
+                    document.body.click();
+                } else {
+                    document.body.click();
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        updateStatus (status,goodsId) {
+            if (status === 0){
+                status = 1;
+            } else {
+                status = 0
+            }
+this.$axios.post(this.changeStatusUrl, querystring.stringify({
+                storeId: this.store.storeId,
+                goodsId: goodsId,
+                status: status
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    this.getGoodsList();
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        deleteGoods(goodsId) {
+            this.$axios.post(this.deleteUrl, querystring.stringify({
+                goodsId: goodsId
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("删除成功！");
+                    this.getGoodsList();
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        check(goodsId) {
+this.$axios.post(this.checkSpecialUrl, querystring.stringify({
+                storeId: this.store.storeId,
+                goodsId: goodsId
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.isSpecial = res.data.obj
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        },
+        showName (row) {
+            this.goodsName = JSON.parse(JSON.stringify(row.goodsName))
+        },
+        hideName (row) {
+            row.goodsName = this.goodsName
+            this.goodsName = ''
+        },
+        hidePrice (row) {
+            this.getGoodsList()
+        },
+        canceUpdateName(row) {
+            row.goodsName = this.goodsName
+            document.body.click()
+        },
+        canceUpdatePrice() {
+            this.skuList = []
+            this.updatePriceVisible = false
+            this.getGoodsList()
+            document.body.click()
+        },
+        canceUpdateCount() {
+            this.skuList = []
+            document.body.click()
+        },
+        //鼠标移入单元格事件
+        mouseEnter(row) {
+            this.showGoodsIcon = true;
+            this.rowId = row.__ob__.dep.id; //赋值行id，便于页面判断
+        },
+        //鼠标移出单元格事件
+        mouseLeave(row) {
+            this.showGoodsIcon = false;
+            this.rowId = '';
+        },
+
+        // 文件上传 - 上传前
+        beforeUpload(file, fileList) {
+            this.uploadData = { goodsId: this.goodsId }; //上传携带的参数名
+
+            let promise = new Promise((resolve) => {
+                this.$nextTick(function () {
+                    resolve(true);
+                });
+            });
+            return promise;
+        },
+        successUpload () {
+            this.fileList = []
+            this.getGoodsList()
+        },
+        changOrderKey (id,type) {
+            if (this.isSort){
+                this.$message.info('请先保存/取消排序');
+                return;
+            }
+this.$axios.post(this.changeOrderKeyUrl,querystring.stringify({
+                type: type,
+                id: id,
+                storeId: this.store.storeId
+            })).then(res => {
+                this.goodsList = []
+                this.getDataList();
+            }).catch(error => {
+            });
+        },
+        updateType(item) {
+            if (this.isSort){
+                this.$message.info('请先保存/取消排序');
+                return;
+            }
+            this.typeDialogVisible = true
+            this.editTypeForm.goodsTypeId = item.goodsTypeId
+            this.editTypeForm.goodsTypeName = item.goodsTypeName
+            this.editTypeForm.type = item.type
+        },
+        deleteType(item) {
+            if (this.isSort){
+                this.$message.info('请先保存/取消排序');
+                return;
+            }
+            this.$confirm('确定要删除该商品分类吗？', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$axios.post(this.deleteTypeUrl, querystring.stringify({
+                    goodsTypeId: item.goodsTypeId,
+                    storeId: this.store.storeId
+                })).then(res => {
+                    if (res.data.rtnBean.rtnCode === 0) {
+                        this.$message.success(res.data.rtnBean.rtnMsg);
+                        this.getDataList();
+                    } else {
+                        this.$message.error(res.data.rtnBean.rtnMsg);
+                    }
+                }).catch((error) => {
+                    this.$message.error('删除失败了！')
+                })
+            }).catch(() => {
+                this.$message.info('已取消删除');
+            });
+        },
+        addType() {
+            if (this.isSort){
+                this.$message.info('请先保存/取消排序');
+                return;
+            }
+            this.editTypeForm = {
+                goodsTypeName: '',
+                goodsTypeId: '',
+                type: 0
+            }
+            this.typeDialogVisible = true
+        },
+        initData () {
+            this.getTypeList();
+        },
+        getTypeList() {
+this.$axios.post(this.url,querystring.stringify({
+                storeId: this.store.storeId
+            })).then(res => {
+                this.goodsTypeList = res.data.list;
+                this.goodsTypeList.forEach((item,index) => {
+                    item.selected = item.goodsTypeId === this.goodsTypeId;
+                    item.showIcon = false
+                    item.id = index + 1
+                })
+
+                this.pageNum = 1
+                this.getGoodsList()
+            }).catch(error => {
+            });
+        },
+        clickType(item) {
+            if (this.isSort){
+                return;
+            }
+            this.updateNameVisible = false
+            this.goodsTypeList.forEach(item => {
+                item.selected = false
+            })
+            item.selected = true
+            this.goodsTypeId = item.goodsTypeId
+            this.pageNum = 1
+            this.getGoodsList()
+        },
+        showIcon(item,index) {
+            this.$set(this.goodsTypeList,index,{...item,showIcon:true})
+        },
+        hideIcon(item,index) {
+            this.$set(this.goodsTypeList,index,{...item,showIcon:false})
+        },
+        closeDia(){
+            this.typeDialogVisible = false;
+            this.editTypeForm = {
+                goodsTypeName: '',
+                goodsTypeId: '',
+                type: 0
+            }
+        },
+        submit() {
+
+            if (this.editTypeForm.goodsTypeName === null || this.editTypeForm.goodsTypeName === undefined || this.editTypeForm.goodsTypeName === "") {
+                this.$message.error("请输入分类名称");
+                return;
+            }
+            if (this.editTypeForm.goodsTypeName.length > 14){
+                this.$message.error("分类名称不能超过14个字符");
+                return;
+            }
+            if (this.editTypeForm.type === '' || this.editTypeForm.type === null){
+                this.$message.error("请选择分类类型");
+                return;
+            }
+
+this.$axios.post(this.updateTypeUrl,querystring.stringify({
+                storeId: this.store.storeId,
+                goodsTypeName: this.editTypeForm.goodsTypeName,
+                goodsTypeId: this.editTypeForm.goodsTypeId,
+                type: this.editTypeForm.type
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.$message.success("更新成功！");
+                    this.initForm()
+                    this.getDataList();
+                    this.typeDialogVisible = false
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch(error => {
+            });
+
+        },
+        changePic(id) {
+            this.goodsId = id
+        },
+        resetAll(list) {
+            this.skuList = list
+            this.skuList.forEach(item => {
+                item.inventory = 0
+            })
+            this.updateGoodsInventory(this.skuList)
+        },
+        addAll(list) {
+            this.skuList = list
+            this.skuList.forEach(item => {
+                item.inventory = 9999
+            })
+            this.updateGoodsInventory(this.skuList)
+        },
+        resetedOne(item) {
+            item.inventory = 0;
+        },
+        addOne(item) {
+            item.inventory = 9999;
+        },
+        closeDialog(){
+            if(this.upath !== '' && this.upath != null){
+                if(this.$refs.new_image !== '' && this.$refs.new_image != null){
+                    this.$refs.new_image.value = '';
+                    this.upath = '';
+                }
+            }
+            this.initForm();
+            this.dialogVisible = false;
+            this.isShow = true;
+            this.isSpecial = false
+        },
+        initForm() {
+            this.goodsInfo = {
+                goodsId: '',
+                pictureUrl: '',
+                goodsName: '',
+                miniNum: 1,
+                utils: '份',
+                goodsTypeId: '',
+                goodsTypeName: '',
+                rmk: '',
+                modelBeanList: [],
+                propertyBeanList: [],
+            }
+            this.editTypeForm = {
+                goodsTypeName: '',
+                goodsTypeId: '',
+                type: 0
+            }
+            this.modelBeanList = [{
+                id: 1,
+                modelId: '',
+                modelName: '',
+                packingFee: '',
+                salePrice: '',
+                costPrice: '',
+                inventory: ''
+            }]
+            this.propertyBeanList = []
+            this.isShow = true
+
+        },
+        addImage(e){
+            const file = e.target.files[0];
+            if (!file.type.includes("image/png") && !file.type.includes("image/jpg") && !file.type.includes("image/jpeg")) {
+                this.$message.error("图片格式错误");
+                this.upath = "";
+                return;
+            }
+            const isLt2M = file.size < 204800;
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 200KB,请调整清晰度之后再试');
+                return;
+            }
+            this.isShow = false;
+            this.upath = file;
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = function(e) {
+                document.getElementById("img").src = reader.result;
+            }
+        },
+
+        addModel() {
+            if (this.isSpecial) {
+                this.$message.error("该商品已参加特价菜活动,只有一个规格");
+                return false;
+            }
+            if (this.modelBeanList.length ===8){
+                this.$message.error("商品规格最多添加8个");
+                return false;
+            }
+            let model = {
+                id: this.modelBeanList.length + 1,
+                modelId: '',
+                modelName: '',
+                packingFee: '',
+                salePrice: '',
+                costPrice: '',
+                inventory: ''
+            }
+            this.modelBeanList.push(model)
+        },
+
+        addProperty() {
+            if ( this.propertyBeanList && this.propertyBeanList.length === 5) {
+                this.$message.error("商品属性最多有5个");
+                return false
+            }
+            let model = {
+                id: this.propertyBeanList.length + 1,
+                propertyId: '',
+                propertyName: '',
+                propertyList: '',
+                goodsId: ''
+            }
+            this.propertyBeanList.push(model)
+        },
+
+        deleteProperty(item) {
+            let index = this.propertyBeanList.indexOf(item)
+            if (index !== -1) {
+                this.propertyBeanList.splice(index, 1)
+            }
+        },
+        save(){
+            this.goodsInfo.modelBeanList = this.modelBeanList;
+            this.goodsInfo.propertyBeanList= this.propertyBeanList;
+            if ((this.goodsInfo.pictureUrl === null || this.goodsInfo.pictureUrl === undefined || this.goodsInfo.pictureUrl === '') &&
+                (this.upath === null || this.upath === undefined || this.upath === '')) {
+                this.$message.error("请上传商品图片");
+                return;
+            } else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName === '') {
+                this.$message.error("请输入商品名称");
+                return;
+            } else if (this.goodsInfo.goodsName.length > 30) {
+                this.$message.error("商品名称不能超过30个字符");
+                return;
+            } else if (this.goodsInfo.goodsTypeId == null || this.goodsInfo.goodsTypeId === '') {
+                this.$message.error("请选择商品分类");
+                return;
+            }else if (this.isSpecial && (this.goodsInfo.goodsTypeId !== null || this.goodsInfo.goodsTypeId !== '')
+                && this.goodsTypeList.filter((item) =>{return item.goodsTypeId === this.goodsInfo.goodsTypeId})[0].type === 1) {
+                    this.$message.error("特价菜不能修改为必选商品");
+                    return;
+            } else if (this.modelBeanList.length === 0 || this.modelBeanList === '') {
+                this.$message.error("请添加商品规格");
+                return;
+            } else {
+                let that = this
+                let aoo = true
+                if(that.propertyBeanList != null && that.propertyBeanList.length > 0) {
+                    let num = false
+                    if (that.propertyBeanList.length > 0 || that.propertyBeanList[0].propertyName || that.propertyBeanList[0].propertyList) {
+                        num = true
+                    }
+                    for (let i = 0; i < that.propertyBeanList.length; i++) {
+                        if (num){
+                            if (that.propertyBeanList[i].propertyName == null || that.propertyBeanList[i].propertyName === '') {
+                                this.$message.error("请输入属性名称");
+                                aoo = false;
+                                return;
+                            } else if (that.propertyBeanList[i].propertyList == null || that.propertyBeanList[i].propertyList === '') {
+                                this.$message.error("请输入属性描述");
+                                aoo = false;
+                                return;
+                            } else if (that.propertyBeanList[i].propertyList.indexOf(',') === -1 && that.propertyBeanList[i].propertyList.indexOf('，') === -1) {
+                                this.$message.error("属性描述必须大于等于两个");
+                                aoo = false;
+                                return;
+                            }
+
+                            if(that.propertyBeanList[i].propertyList != null && that.propertyBeanList[i].propertyList !== ''){
+                                that.propertyBeanList[i].propertyList = that.propertyBeanList[i].propertyList.replace(/，/g, ',')
+                            }
+                        }
+                    }
+                }
+                let boo = true;
+                let regPrice = (/^[0-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/);
+                if (that.modelBeanList.length > 0) {
+                    for (let i = 0; i < that.modelBeanList.length; i++) {
+                        if (that.modelBeanList[i].modelName == null || that.modelBeanList[i].modelName === '') {
+                            this.$message.error("请输入规格名称");
+                            boo = false;
+                            return;
+                        } else if (that.modelBeanList[i].costPrice === null || that.modelBeanList[i].costPrice === '') {
+                            this.$message.error("请输入价格");
+                            boo = false;
+                            return;
+                        } else if (!regPrice.test(that.modelBeanList[i].costPrice)) {
+                            this.$message.error("价格只能是整数或小数点后两位");
+                            boo = false;
+                            return;
+                        } else if (that.modelBeanList[i].packingFee === null || that.modelBeanList[i].packingFee ===
+                            undefined || that.modelBeanList[i].packingFee === '') {
+                            this.$message.error("请输入餐盒费");
+                            boo = false;
+                            return;
+                        } else if (that.modelBeanList[i].inventory === null || that.modelBeanList[i].inventory === '') {
+                            this.$message.error("请输入库存");
+                            boo = false;
+                            return;
+                        } else if (that.modelBeanList[i].inventory > Number(9999)) {
+                            this.$message.error("库存不能超过最大库存数");
+                            boo = false;
+                            return;
+                        } else if (that.isSpecial && Number(that.modelBeanList[i].costPrice * 100) < Number(that.modelBeanList[i].salePrice)) {
+                            this.$message.error("商品价格不能小于售价");
+                            boo = false;
+                            return;
+                        }
+                    }
+                }
+                if (aoo && boo) {
+
+                        var formdata = new FormData();
+                    formdata.append("file", that.upath);
+                    formdata.append("goodsId", that.goodsInfo.goodsId || '');
+                    formdata.append("storeId", that.store.storeId || '');
+                    formdata.append("goodsName", that.goodsInfo.goodsName || '');
+                    formdata.append("miniNum", that.goodsInfo.miniNum || '');
+                    formdata.append("utils", that.goodsInfo.utils || '份');
+                    formdata.append("goodsTypeId", that.goodsInfo.goodsTypeId || '');
+                    formdata.append("rmk", that.goodsInfo.rmk || '');
+                    formdata.append("modelBeanListJson", JSON.stringify(that.goodsInfo.modelBeanList) || '');
+                    formdata.append("propertyBeanListJson", JSON.stringify(that.goodsInfo.propertyBeanList) || '');
+
+                    if (that.goodsInfo.pictureUrl != null && that.goodsInfo.pictureUrl !== '' ){
+                        formdata.append("pictureUrl", that.goodsInfo.pictureUrl);
+                    }
+
+                    let config = { headers: { "Content-Type": "multipart/form-data" } };
+                    that.$axios.post(that.updateGoodsUrl, formdata, config).then(res => {
+                        if (res.data.rtnBean.rtnCode === 0) {
+                            this.initForm()
+                            this.initData();
+                            that.dialogVisible = false;
+                            that.$message.success("保存成功");
+                        } else {
+                            that.$message.error(res.data.rtnBean.rtnMsg);
+                        }
+                    }).catch((error) => {
+                        that.$message.error('更新失败')
+                    })
+
+                }
+            }
+        },
+        setNewGoods (goods) {
+            let dayCount = 7
+            if (goods.newGoodsFlg !== undefined && goods.newGoodsFlg === 1){
+                dayCount = ''
+            }
+this.$axios.post(this.setNewFlagUrl, querystring.stringify({
+                storeId: this.store.storeId,
+                goodsId: goods.goodsId,
+                dayCount: dayCount
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode === 0) {
+                    this.getDataList()
+                    this.getGoodsList()
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error("数据处理异常，请与管理员联系！");
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+.page-wrap{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.background{
+    background:#dfdede;
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    grid-template-rows: auto 1fr;
+    border-radius: 10px;
+    gap: 10px;
+    padding: 10px;
+    flex: 1;
+    min-height: 0;
+}
+.crumbs{
+    color: #666;
+    flex-shrink: 0;
+}
+.leftbox{
+    background: white;
+    grid-column: 1;
+    grid-row: 1 / 3;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    overflow-y: auto;
+    padding-top: 10px;
+    padding-left: 10px;
+}
+.rightbox{
+    background: white;
+    grid-column: 2;
+    grid-row: 2;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0 16px 16px;
+}
+.topbox{
+    background: white;
+    grid-column: 2;
+    grid-row: 1;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    overflow-y: auto;
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+}
+.newkind{
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: auto; 
+    padding: 0 16px; 
+    height: 28px;
+    background-color: transparent; 
+    border: 1px dashed #b9d8f9; 
+    border-radius: 4px;
+    color: #1989fa;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.storelist li{
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    padding-right: 8px;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+.storelist li:hover{
+    background-color: #f0f7ff;
+    border-left: 3px solid #409EFF;
+}
+.storelist li:active{
+    background-color: #d9eafb;
+}
+.storelist li span{
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.storelist li i{
+    margin-left: 6px;
+    margin-right: 4px;
+    color: #409EFF;
+    font-size: 14px;
+    cursor: pointer;
+}
+.store_name {
+    padding-left: 5px;
+    margin-bottom: 10px;
+    font-size: 15px;
+    line-height: 2;
+    letter-spacing: 1px;
+    color: #2c3e50;
+    font-weight: 700;
+}
+.goods-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 3px;
+    border-radius: 8px;
+    background: #409EFF;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 1;
+}
+</style>

src/router/index.js

@@ -595,7 +595,7 @@ export default new Router({
                 path: "/third/storeGoodsList",
                 component: resolve =>
                   require([
-                    "@/components/page/third/goods/StoreGoodsList.vue"
+                    "@/components/page/third/goods/StoreGoodsList1.vue"
                   ], resolve),
                 meta: { title: "商品列表" }
               },