|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
|
|
|
|
+<template>
|
|
|
<div class="page-wrap">
|
|
<div class="page-wrap">
|
|
|
<div class="crumbs">
|
|
<div class="crumbs">
|
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb separator="/">
|
|
@@ -8,15 +8,15 @@
|
|
|
<div class="background">
|
|
<div class="background">
|
|
|
<div class="leftbox">
|
|
<div class="leftbox">
|
|
|
<ul class="storelist">
|
|
<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)">
|
|
|
|
|
|
|
+ <li v-for="(item,index) in goodsTypeList" :class="item.selected ? 'selected' : ''"@click="clickType(item)" @mouseenter="showIcon(item,index)"@mouseleave="hideIcon(item,index)">
|
|
|
<span class="store_name">{{item.goodsTypeName}}
|
|
<span class="store_name">{{item.goodsTypeName}}
|
|
|
<span class="goods-count">{{item.goodsCounts || 0}}</span>
|
|
<span class="goods-count">{{item.goodsCounts || 0}}</span>
|
|
|
<span class="new-flag" v-if="item.newFlag">上新</span>
|
|
<span class="new-flag" v-if="item.newFlag">上新</span>
|
|
|
</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>
|
|
|
|
|
|
|
+ <i class="el-icon-top" v-show="item.showIcon" @click.stop="debouncedChangOrderKey(item.goodsTypeId,1)"></i>
|
|
|
|
|
+ <i class="el-icon-edit" v-show="item.showIcon" @click.stop="updateType(item)"></i>
|
|
|
|
|
+ <i class="el-icon-delete" v-show="item.showIcon" @click.stop="deleteType(item)"></i>
|
|
|
|
|
+ <i class="el-icon-upload2" v-show="item.showIcon" @click.stop="debouncedChangOrderKey(item.goodsTypeId,2)"></i>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
<div class="leftbox-footer">
|
|
<div class="leftbox-footer">
|
|
@@ -25,32 +25,22 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="topbox">
|
|
<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 class="topbox-left">
|
|
|
|
|
+ <span class="current-category" v-if="currentCategoryName">
|
|
|
|
|
+ <i class="el-icon-s-fold"></i> {{ currentCategoryName }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span class="current-category" v-else style="color: #c0c4cc;">未选择分类</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="topbox-right">
|
|
|
|
|
+ <template v-if="!isSort">
|
|
|
|
|
+ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGoods">新增</el-button>
|
|
|
|
|
+ <el-button plain icon="el-icon-edit" size="mini" :disabled="!allGoodsList.length > 0" @click="sortGoods">排序管理</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="isSort">
|
|
|
|
|
+ <el-button plain icon="el-icon-plus" size="mini" @click="closeSortGoods">取消排序</el-button>
|
|
|
|
|
+ <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="debouncedUpdateSort">保存排序</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="rightbox">
|
|
<div class="rightbox">
|
|
@@ -61,6 +51,7 @@
|
|
|
:data="goodsList"
|
|
:data="goodsList"
|
|
|
tooltip-effect="dark"
|
|
tooltip-effect="dark"
|
|
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
style="width: 100%; margin-top: 10px"
|
|
style="width: 100%; margin-top: 10px"
|
|
|
@cell-mouse-enter="mouseEnter"
|
|
@cell-mouse-enter="mouseEnter"
|
|
|
@cell-mouse-leave="mouseLeave"
|
|
@cell-mouse-leave="mouseLeave"
|
|
@@ -87,7 +78,7 @@
|
|
|
<span v-if="scope.row.status === 1">
|
|
<span v-if="scope.row.status === 1">
|
|
|
<div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
<div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
|
</span>
|
|
</span>
|
|
|
- <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
|
|
|
|
|
|
|
+ <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 44px;height: 44px">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="popover-modal">
|
|
<div class="popover-modal">
|
|
@@ -122,7 +113,7 @@
|
|
|
@show="showName(scope.row)"
|
|
@show="showName(scope.row)"
|
|
|
@hide="hideName(scope.row)"
|
|
@hide="hideName(scope.row)"
|
|
|
:append-to-body="false">
|
|
: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>
|
|
|
|
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
<div class="popover-modal">
|
|
<div class="popover-modal">
|
|
|
<p>修改商品名称</p>
|
|
<p>修改商品名称</p>
|
|
|
<br>
|
|
<br>
|
|
@@ -155,7 +146,7 @@
|
|
|
trigger="click"
|
|
trigger="click"
|
|
|
@hide="hidePrice()"
|
|
@hide="hidePrice()"
|
|
|
:append-to-body="false">
|
|
: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>
|
|
|
|
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
<form class="popover-modal">
|
|
<form class="popover-modal">
|
|
|
<p>修改价格</p>
|
|
<p>修改价格</p>
|
|
|
<div class="mutiple-specifications">
|
|
<div class="mutiple-specifications">
|
|
@@ -188,7 +179,7 @@
|
|
|
@hide="hidePrice()"
|
|
@hide="hidePrice()"
|
|
|
:append-to-body="false"
|
|
:append-to-body="false"
|
|
|
style="margin-left: 5px">
|
|
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>
|
|
|
|
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 16px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
|
|
|
|
|
<div class="popover-modal">
|
|
<div class="popover-modal">
|
|
|
<p style="text-align: center">修改库存</p>
|
|
<p style="text-align: center">修改库存</p>
|
|
@@ -229,7 +220,7 @@
|
|
|
<el-link :underline="false" slot="reference" style="font-size: 12px">库存管理</el-link>
|
|
<el-link :underline="false" slot="reference" style="font-size: 12px">库存管理</el-link>
|
|
|
<div class="popover-modal">
|
|
<div class="popover-modal">
|
|
|
<p style="text-align: center">修改库存</p>
|
|
<p style="text-align: center">修改库存</p>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div style="max-height: 240px; overflow-y: auto;">
|
|
|
<div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
|
|
<div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
|
|
|
<span class="item-name">{{item.modelName}}</span>
|
|
<span class="item-name">{{item.modelName}}</span>
|
|
|
<div class="list-item">
|
|
<div class="list-item">
|
|
@@ -293,7 +284,7 @@
|
|
|
<span v-if="scope.row.status === 1">
|
|
<span v-if="scope.row.status === 1">
|
|
|
<div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
<div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
|
</span>
|
|
</span>
|
|
|
- <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
|
|
|
|
|
|
|
+ <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 44px;height: 44px">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="popover-modal">
|
|
<div class="popover-modal">
|
|
@@ -399,16 +390,25 @@
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="商品图片">
|
|
<el-form-item label="商品图片">
|
|
|
<div style="display: flex;align-items: center;">
|
|
<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>
|
|
|
|
|
|
|
+ <el-upload
|
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
|
+ :action="uploadGoodsPicUrl"
|
|
|
|
|
+ :file-list="goodsPicFileList"
|
|
|
|
|
+ :limit="1"
|
|
|
|
|
+ :multiple="false"
|
|
|
|
|
+ :show-file-list="false"
|
|
|
|
|
+ :disabled="goodsPicUploading"
|
|
|
|
|
+ accept="image/png,image/jpg,image/jpeg"
|
|
|
|
|
+ :before-upload="beforeGoodsPicUpload"
|
|
|
|
|
+ :on-progress="progressGoodsPicUpload"
|
|
|
|
|
+ :on-success="successGoodsPicUpload"
|
|
|
|
|
+ :on-error="errorGoodsPicUpload">
|
|
|
|
|
+ <div class="goods-upload-box" v-loading="goodsPicUploading">
|
|
|
|
|
+ <img v-if="goodsInfo.pictureUrl" :src="goodsInfo.pictureUrl" class="goods-upload-img" alt/>
|
|
|
|
|
+ <i v-else class="el-icon-plus goods-upload-icon"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-upload>
|
|
|
|
|
+ <div class="upload-tip">建议上传 jpg/png/jpeg 图片，大小不超过 200KB</div>
|
|
|
</div>
|
|
</div>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="商品分类" :required="true" style="text-align:left">
|
|
<el-form-item label="商品分类" :required="true" style="text-align:left">
|
|
@@ -436,50 +436,48 @@
|
|
|
<el-form-item label="商品规格" style="text-align:left">
|
|
<el-form-item label="商品规格" style="text-align:left">
|
|
|
<el-form-item :required="true" style="text-align:left">
|
|
<el-form-item :required="true" style="text-align:left">
|
|
|
<div>为您的商品添加不同的规格，如：大杯、小杯等</div>
|
|
<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>
|
|
|
|
|
|
|
+ <div class="goods-sku sku-row" v-for="(item,index) in modelBeanList" :key="item.id">
|
|
|
|
|
+ <div class="sku-field sku-field-name">
|
|
|
|
|
+ <div class="sku-label">
|
|
|
<span class="require-icon"></span>
|
|
<span class="require-icon"></span>
|
|
|
规格名
|
|
规格名
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="el-input" style="width: 100px;">
|
|
|
|
|
|
|
+ <div class="el-input">
|
|
|
<el-input placeholder="规格名" v-model="item.modelName">
|
|
<el-input placeholder="规格名" v-model="item.modelName">
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="mr-r-20">
|
|
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="sku-field sku-field-price">
|
|
|
|
|
+ <div class="sku-label">
|
|
|
<span class="require-icon"></span>
|
|
<span class="require-icon"></span>
|
|
|
价格
|
|
价格
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="el-input" style="width: 150px;">
|
|
|
|
|
|
|
+ <div class="el-input">
|
|
|
<el-input v-model="item.costPrice">
|
|
<el-input v-model="item.costPrice">
|
|
|
<template slot="append">元</template>
|
|
<template slot="append">元</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="mr-r-20">
|
|
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="sku-field sku-field-price">
|
|
|
|
|
+ <div class="sku-label">
|
|
|
<span class="require-icon"></span>
|
|
<span class="require-icon"></span>
|
|
|
餐盒费
|
|
餐盒费
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="el-input" style="width: 150px;">
|
|
|
|
|
|
|
+ <div class="el-input">
|
|
|
<el-input v-model="item.packingFee">
|
|
<el-input v-model="item.packingFee">
|
|
|
<template slot="append">元</template>
|
|
<template slot="append">元</template>
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="mr-r-20">
|
|
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="sku-field sku-field-stock">
|
|
|
|
|
+ <div class="sku-label">
|
|
|
<span class="require-icon"></span>
|
|
<span class="require-icon"></span>
|
|
|
库存
|
|
库存
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="el-input" style="width: 100px;">
|
|
|
|
|
|
|
+ <div class="el-input">
|
|
|
<el-input v-model="item.inventory"></el-input>
|
|
<el-input v-model="item.inventory"></el-input>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<div class="hover" style="margin-top: 10px;">
|
|
<div class="hover" style="margin-top: 10px;">
|
|
|
<el-link :underline="false" style="font-size: 14px" @click="addModel">
|
|
<el-link :underline="false" style="font-size: 14px" @click="addModel">
|
|
@@ -570,6 +568,7 @@ export default {
|
|
|
getTypeUrl: '/thirdStoreGoodsManage/getTypeList',
|
|
getTypeUrl: '/thirdStoreGoodsManage/getTypeList',
|
|
|
goodsUrl: '/thirdStoreGoodsManage/getStoreGoodsListForThird',
|
|
goodsUrl: '/thirdStoreGoodsManage/getStoreGoodsListForThird',
|
|
|
updatePicUrl: '/thirdStoreGoodsManage/updateGoodsPicForThird',
|
|
updatePicUrl: '/thirdStoreGoodsManage/updateGoodsPicForThird',
|
|
|
|
|
+ uploadGoodsPicUrl: '/thirdStoreGoodsManage/uploadGoodsPicForThird',
|
|
|
updateNameUrl: '/thirdStoreGoodsManage/updateGoodsNameForThird',
|
|
updateNameUrl: '/thirdStoreGoodsManage/updateGoodsNameForThird',
|
|
|
updatePriceUrl: '/thirdStoreGoodsManage/updateGoodsPriceForThird',
|
|
updatePriceUrl: '/thirdStoreGoodsManage/updateGoodsPriceForThird',
|
|
|
updateInventoryUrl: '/thirdStoreGoodsManage/updateGoodsInventoryForThird',
|
|
updateInventoryUrl: '/thirdStoreGoodsManage/updateGoodsInventoryForThird',
|
|
@@ -605,6 +604,8 @@ export default {
|
|
|
rowId: '',
|
|
rowId: '',
|
|
|
showGoodsIcon: false,
|
|
showGoodsIcon: false,
|
|
|
fileList: [],
|
|
fileList: [],
|
|
|
|
|
+ goodsPicFileList: [],
|
|
|
|
|
+ goodsPicUploading: false,
|
|
|
goodsName: '',
|
|
goodsName: '',
|
|
|
goodsTypeId: '',
|
|
goodsTypeId: '',
|
|
|
skuList: [],
|
|
skuList: [],
|
|
@@ -622,7 +623,6 @@ export default {
|
|
|
modelBeanList: [],
|
|
modelBeanList: [],
|
|
|
propertyBeanList: [],
|
|
propertyBeanList: [],
|
|
|
},
|
|
},
|
|
|
- isShow: true,
|
|
|
|
|
modelBeanList: [{
|
|
modelBeanList: [{
|
|
|
id: 1,
|
|
id: 1,
|
|
|
modelId: '',
|
|
modelId: '',
|
|
@@ -643,6 +643,12 @@ export default {
|
|
|
total: 0,
|
|
total: 0,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ currentCategoryName() {
|
|
|
|
|
+ const item = this.goodsTypeList.find(i => i.selected);
|
|
|
|
|
+ return item ? item.goodsTypeName : '';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
created () {
|
|
created () {
|
|
|
if (this.$isMobile()){
|
|
if (this.$isMobile()){
|
|
|
// 移动端
|
|
// 移动端
|
|
@@ -655,12 +661,13 @@ export default {
|
|
|
|
|
|
|
|
if (areaId) {
|
|
if (areaId) {
|
|
|
this.updatePicUrl = "/a" + areaId + this.updatePicUrl
|
|
this.updatePicUrl = "/a" + areaId + this.updatePicUrl
|
|
|
|
|
+ this.uploadGoodsPicUrl = "/a" + areaId + this.uploadGoodsPicUrl
|
|
|
}
|
|
}
|
|
|
this.store = JSON.parse(localStorage.getItem("storeInfo"));
|
|
this.store = JSON.parse(localStorage.getItem("storeInfo"));
|
|
|
this.getDataList()
|
|
this.getDataList()
|
|
|
|
|
|
|
|
// 防抖处理：避免快速重复点击导致的重复请求
|
|
// 防抖处理：避免快速重复点击导致的重复请求
|
|
|
- this.debouncedClickType = debounce(this.clickType, 300)
|
|
|
|
|
|
|
+ this.debouncedGetGoodsList = debounce(this.getGoodsList, 300)
|
|
|
this.debouncedUpdateStatus = debounce(this.updateStatus, 500)
|
|
this.debouncedUpdateStatus = debounce(this.updateStatus, 500)
|
|
|
this.debouncedDeleteGoods = debounce(this.deleteGoods, 500)
|
|
this.debouncedDeleteGoods = debounce(this.deleteGoods, 500)
|
|
|
this.debouncedSetNewGoods = debounce(this.setNewGoods, 500)
|
|
this.debouncedSetNewGoods = debounce(this.setNewGoods, 500)
|
|
@@ -739,14 +746,16 @@ this.$axios.post(this.updateSortUrl,querystring.stringify({
|
|
|
},
|
|
},
|
|
|
addGoods() {
|
|
addGoods() {
|
|
|
this.editTitle = '新增商品'
|
|
this.editTitle = '新增商品'
|
|
|
|
|
+ // 自动带入当前选中的分类
|
|
|
|
|
+ if (this.goodsTypeId) {
|
|
|
|
|
+ this.goodsInfo.goodsTypeId = this.goodsTypeId;
|
|
|
|
|
+ }
|
|
|
this.dialogVisible = true;
|
|
this.dialogVisible = true;
|
|
|
this.getGoodsTypeList()
|
|
this.getGoodsTypeList()
|
|
|
},
|
|
},
|
|
|
updateGoods(row) {
|
|
updateGoods(row) {
|
|
|
this.goodsInfo = JSON.parse(JSON.stringify(row))
|
|
this.goodsInfo = JSON.parse(JSON.stringify(row))
|
|
|
- if(row.pictureUrl != null && row.pictureUrl !== '' && row.pictureUrl !== 'null'){
|
|
|
|
|
- this.isShow = false;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.goodsPicFileList = row.pictureUrl ? [{ name: row.goodsName, url: row.pictureUrl }] : []
|
|
|
this.modelBeanList = JSON.parse(JSON.stringify(row.skuList))
|
|
this.modelBeanList = JSON.parse(JSON.stringify(row.skuList))
|
|
|
this.propertyBeanList = row.params || []
|
|
this.propertyBeanList = row.params || []
|
|
|
this.editTitle = '编辑商品'
|
|
this.editTitle = '编辑商品'
|
|
@@ -948,6 +957,9 @@ this.$axios.post(this.checkSpecialUrl, querystring.stringify({
|
|
|
this.skuList = []
|
|
this.skuList = []
|
|
|
document.body.click()
|
|
document.body.click()
|
|
|
},
|
|
},
|
|
|
|
|
+ tableRowClassName({row}) {
|
|
|
|
|
+ return row.status !== 1 ? 'row-offline' : '';
|
|
|
|
|
+ },
|
|
|
//鼠标移入单元格事件
|
|
//鼠标移入单元格事件
|
|
|
mouseEnter(row) {
|
|
mouseEnter(row) {
|
|
|
this.showGoodsIcon = true;
|
|
this.showGoodsIcon = true;
|
|
@@ -974,6 +986,38 @@ this.$axios.post(this.checkSpecialUrl, querystring.stringify({
|
|
|
this.fileList = []
|
|
this.fileList = []
|
|
|
this.getGoodsList()
|
|
this.getGoodsList()
|
|
|
},
|
|
},
|
|
|
|
|
+ beforeGoodsPicUpload(file) {
|
|
|
|
|
+ if (!file.type.includes("image/png") && !file.type.includes("image/jpg") && !file.type.includes("image/jpeg")) {
|
|
|
|
|
+ this.$message.error("鍥剧墖鏍煎紡閿欒");
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (file.size >= 204800) {
|
|
|
|
|
+ this.$message.error('涓婁紶鍥剧墖澶у皬涓嶈兘瓒呰繃 200KB,璇疯皟鏁存竻鏅板害涔嬪悗鍐嶈瘯');
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ return true;
|
|
|
|
|
+ },
|
|
|
|
|
+ progressGoodsPicUpload() {
|
|
|
|
|
+ this.goodsPicUploading = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ successGoodsPicUpload(res, file) {
|
|
|
|
|
+ this.goodsPicUploading = false;
|
|
|
|
|
+ if (res.rtnBean && res.rtnBean.rtnCode === 0) {
|
|
|
|
|
+ this.goodsInfo.pictureUrl = res.obj;
|
|
|
|
|
+ this.goodsPicFileList = [{
|
|
|
|
|
+ name: file.name,
|
|
|
|
|
+ url: res.obj
|
|
|
|
|
+ }];
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.goodsPicFileList = [];
|
|
|
|
|
+ this.$message.error(res.rtnBean ? res.rtnBean.rtnMsg : '涓婁紶澶辫触');
|
|
|
|
|
+ },
|
|
|
|
|
+ errorGoodsPicUpload() {
|
|
|
|
|
+ this.goodsPicUploading = false;
|
|
|
|
|
+ this.goodsPicFileList = [];
|
|
|
|
|
+ this.$message.error('涓婁紶澶辫触');
|
|
|
|
|
+ },
|
|
|
changOrderKey (id,type) {
|
|
changOrderKey (id,type) {
|
|
|
if (this.isSort){
|
|
if (this.isSort){
|
|
|
this.$message.info('请先保存/取消排序');
|
|
this.$message.info('请先保存/取消排序');
|
|
@@ -1063,13 +1107,15 @@ this.$axios.post(this.url,querystring.stringify({
|
|
|
if (this.isSort){
|
|
if (this.isSort){
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
+ // 立即更新选中样式，不受防抖影响
|
|
|
this.goodsTypeList.forEach(item => {
|
|
this.goodsTypeList.forEach(item => {
|
|
|
item.selected = false
|
|
item.selected = false
|
|
|
})
|
|
})
|
|
|
item.selected = true
|
|
item.selected = true
|
|
|
this.goodsTypeId = item.goodsTypeId
|
|
this.goodsTypeId = item.goodsTypeId
|
|
|
this.pageNum = 1
|
|
this.pageNum = 1
|
|
|
- this.getGoodsList()
|
|
|
|
|
|
|
+ // 仅数据请求走防抖
|
|
|
|
|
+ this.debouncedGetGoodsList();
|
|
|
},
|
|
},
|
|
|
showIcon(item,index) {
|
|
showIcon(item,index) {
|
|
|
this.$set(this.goodsTypeList,index,{...item,showIcon:true})
|
|
this.$set(this.goodsTypeList,index,{...item,showIcon:true})
|
|
@@ -1143,15 +1189,8 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
|
|
|
item.inventory = 9999;
|
|
item.inventory = 9999;
|
|
|
},
|
|
},
|
|
|
closeDialog(){
|
|
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.initForm();
|
|
|
this.dialogVisible = false;
|
|
this.dialogVisible = false;
|
|
|
- this.isShow = true;
|
|
|
|
|
this.isSpecial = false
|
|
this.isSpecial = false
|
|
|
},
|
|
},
|
|
|
initForm() {
|
|
initForm() {
|
|
@@ -1182,29 +1221,10 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
|
|
|
inventory: ''
|
|
inventory: ''
|
|
|
}]
|
|
}]
|
|
|
this.propertyBeanList = []
|
|
this.propertyBeanList = []
|
|
|
- this.isShow = true
|
|
|
|
|
|
|
+ this.goodsPicFileList = []
|
|
|
|
|
+ this.goodsPicUploading = false
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
- 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() {
|
|
addModel() {
|
|
|
if (this.isSpecial) {
|
|
if (this.isSpecial) {
|
|
@@ -1251,8 +1271,7 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
|
|
|
save(){
|
|
save(){
|
|
|
this.goodsInfo.modelBeanList = this.modelBeanList;
|
|
this.goodsInfo.modelBeanList = this.modelBeanList;
|
|
|
this.goodsInfo.propertyBeanList= this.propertyBeanList;
|
|
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 === '')) {
|
|
|
|
|
|
|
+ if (this.goodsInfo.pictureUrl === null || this.goodsInfo.pictureUrl === undefined || this.goodsInfo.pictureUrl === '') {
|
|
|
this.$message.error("请上传商品图片");
|
|
this.$message.error("请上传商品图片");
|
|
|
return;
|
|
return;
|
|
|
} else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName === '') {
|
|
} else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName === '') {
|
|
@@ -1337,7 +1356,6 @@ this.$axios.post(this.updateTypeUrl,querystring.stringify({
|
|
|
if (aoo && boo) {
|
|
if (aoo && boo) {
|
|
|
|
|
|
|
|
var formdata = new FormData();
|
|
var formdata = new FormData();
|
|
|
- formdata.append("file", that.upath);
|
|
|
|
|
formdata.append("goodsId", that.goodsInfo.goodsId || '');
|
|
formdata.append("goodsId", that.goodsInfo.goodsId || '');
|
|
|
formdata.append("storeId", that.store.storeId || '');
|
|
formdata.append("storeId", that.store.storeId || '');
|
|
|
formdata.append("goodsName", that.goodsInfo.goodsName || '');
|
|
formdata.append("goodsName", that.goodsInfo.goodsName || '');
|
|
@@ -1460,8 +1478,25 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
min-height: 52px;
|
|
min-height: 52px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
padding: 10px 16px;
|
|
padding: 10px 16px;
|
|
|
}
|
|
}
|
|
|
|
|
+.topbox-left{
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.current-category{
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #409EFF;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+}
|
|
|
|
|
+.current-category i{
|
|
|
|
|
+ margin-right: 4px;
|
|
|
|
|
+}
|
|
|
|
|
+.topbox-right{
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+}
|
|
|
.newkind{
|
|
.newkind{
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -1494,6 +1529,11 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
.storelist li:active{
|
|
.storelist li:active{
|
|
|
background-color: #d9eafb;
|
|
background-color: #d9eafb;
|
|
|
}
|
|
}
|
|
|
|
|
+.storelist li.selected{
|
|
|
|
|
+ background-color: #ecf5ff;
|
|
|
|
|
+ border-left: 3px solid #409EFF;
|
|
|
|
|
+ color: #409EFF;
|
|
|
|
|
+}
|
|
|
.storelist li span{
|
|
.storelist li span{
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
@@ -1507,6 +1547,10 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
+.comfirm{
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+}
|
|
|
.store_name {
|
|
.store_name {
|
|
|
padding-left: 5px;
|
|
padding-left: 5px;
|
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
@@ -1516,6 +1560,55 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
color: #2c3e50;
|
|
color: #2c3e50;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
|
|
|
+/* 商品名 */
|
|
|
|
|
+.goods-name {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+}
|
|
|
|
|
+/* 弹窗 */
|
|
|
|
|
+.popover-modal p {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+}
|
|
|
|
|
+.popover-modal .el-input {
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+.mutiple-specifications > div {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.mutiple-specifications > div > span {
|
|
|
|
|
+ min-width: 60px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+}
|
|
|
|
|
+.list-item {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-img {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-img img {
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+}
|
|
|
|
|
+.has-new-g {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ margin-left: 4px;
|
|
|
|
|
+ padding: 0 4px;
|
|
|
|
|
+ font-size: 10px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ background: #f56c6c;
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+}
|
|
|
.new-flag {
|
|
.new-flag {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
margin-left: 6px;
|
|
margin-left: 6px;
|
|
@@ -1527,6 +1620,40 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
line-height: 1.4;
|
|
line-height: 1.4;
|
|
|
}
|
|
}
|
|
|
|
|
+.sku-mutiple-input{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-mutiple-input .item-name{
|
|
|
|
|
+ min-width: 70px;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ width: 720px;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-field {
|
|
|
|
|
+ flex: 0 0 auto;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-field-name,
|
|
|
|
|
+.sku-field-stock {
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-field-price {
|
|
|
|
|
+ width: 150px;
|
|
|
|
|
+}
|
|
|
|
|
+.sku-label {
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+}
|
|
|
.goods-count {
|
|
.goods-count {
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -1542,4 +1669,49 @@ this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
line-height: 1;
|
|
line-height: 1;
|
|
|
}
|
|
}
|
|
|
|
|
+.avatar-uploader /deep/ .el-upload {
|
|
|
|
|
+ width: 178px;
|
|
|
|
|
+ height: 178px;
|
|
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.avatar-uploader /deep/ .el-upload:hover {
|
|
|
|
|
+ border-color: #409EFF;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-upload-icon {
|
|
|
|
|
+ width: 178px;
|
|
|
|
|
+ height: 178px;
|
|
|
|
|
+ line-height: 178px;
|
|
|
|
|
+ font-size: 28px;
|
|
|
|
|
+ color: #8c939d;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-upload-img {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ width: 178px;
|
|
|
|
|
+ height: 178px;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+}
|
|
|
|
|
+.goods-upload-box {
|
|
|
|
|
+ width: 178px;
|
|
|
|
|
+ height: 178px;
|
|
|
|
|
+}
|
|
|
|
|
+.upload-tip {
|
|
|
|
|
+ margin-left: 12px;
|
|
|
|
|
+ color: #909399;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
|
|
|
|
+<style>
|
|
|
|
|
+.row-offline { background-color: #f5f5f5 !important; }
|
|
|
|
|
+.row-offline .cell,
|
|
|
|
|
+.row-offline .cell span,
|
|
|
|
|
+.row-offline .cell .el-link { color: #c0c4cc !important; }
|
|
|
|
|
+.el-table th { font-weight: 600; font-size: 13px; }
|
|
|
|
|
+.el-table .cell { padding: 6px 8px; }
|
|
|
|
|
+.cell .pd-r-10 { font-weight: 600; color: #f56c6c; font-size: 14px; }
|
|
|
|
|
+.el-popover { border-radius: 8px; padding: 16px; }
|
|
|
</style>
|
|
</style>
|
