webapp / GreenwayWeb

Commit 89bb9f2b58e667e7b1bc81a97a5c37f15bfe7980

Authored by wesley88
1 parent ffe3ff46

1

Inline Side-by-side
Showing 15 changed files with 4871 additions and 1989 deletions
admin-web-master/src/utils/request.js
  View file @89bb9f2
@@ -17,11 +17,11 @@ let baseURL = '' @@ -17,11 +17,11 @@ let baseURL = ''
17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) { 17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) {
18 18
19 // baseURL = 'https://jy.scjysm.asia:18086/cdwlMall/meserver/admin-server'; 19 // baseURL = 'https://jy.scjysm.asia:18086/cdwlMall/meserver/admin-server';
20 - // baseURL = 'https://zhgw-uat.028wlkj.com/cdwlMall/meserver/admin-server'; 20 + baseURL = 'https://zhgw-uat.028wlkj.com/cdwlMall/meserver/admin-server';
21 21
22 // baseURL = process.env.VUE_APP_DOMAIN_PREFIX_1; 22 // baseURL = process.env.VUE_APP_DOMAIN_PREFIX_1;
23 23
24 - baseURL = 'http://128.10.249.13:9003'; 24 + // baseURL = 'http://128.10.249.13:9003';
25 25
26 } else { 26 } else {
27 console.error('---------------------') 27 console.error('---------------------')
admin-web-master/src/views/shopRental/manage/index.vue
  View file @89bb9f2
@@ -170,9 +170,9 @@ @@ -170,9 +170,9 @@
170 170
171 </el-form> 171 </el-form>
172 <div style="display: flex; justify-content: flex-end; align-items: center;padding: 20px 50px;"> 172 <div style="display: flex; justify-content: flex-end; align-items: center;padding: 20px 50px;">
173 - <el-button @click="OA" style="background-color: #3F9B6A;color: #fff;">确定</el-button>  
174 <el-button @click="openoa =false" class="buttonHover" 173 <el-button @click="openoa =false" class="buttonHover"
175 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button> 174 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
  175 + <el-button @click="OA" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
176 </div> 176 </div>
177 </el-dialog> 177 </el-dialog>
178 </div> 178 </div>
merchant-web-master/src/utils/request.js
  View file @89bb9f2
@@ -19,8 +19,9 @@ let PREFIX; @@ -19,8 +19,9 @@ let PREFIX;
19 if( host == 'localhost:9528' || host == '8.130.38.56:8027' || host == 'localhost:9529'|| host == 'localhost:9530'){ 19 if( host == 'localhost:9528' || host == '8.130.38.56:8027' || host == 'localhost:9529'|| host == 'localhost:9530'){
20 // 其他情况的默认值 20 // 其他情况的默认值
21 // PREFIX = 'http://8.130.38.56:8027/business-server'; 21 // PREFIX = 'http://8.130.38.56:8027/business-server';
22 - PREFIX = 'https://jy.scjysm.asia:18086/cdwlMall/business-server';  
23 - // PREFIX = 'http://128.10.249.48:9004'; 22 + // PREFIX = 'https://jy.scjysm.asia:18086/cdwlMall/business-server';
  23 + // PREFIX = 'https://zhgw-uat.028wlkj.com/cdwlMall/business-server'
  24 + PREFIX = 'http://128.10.249.23:9004';
24 }else{ 25 }else{
25 // PREFIX = '/merchant-business'; 26 // PREFIX = '/merchant-business';
26 // PREFIX = 'http://8.130.38.56:9004'; 27 // PREFIX = 'http://8.130.38.56:9004';
merchant-web-master/src/views/commodity/commoditySystem/addCommodity copy.vue 0 → 100644
  View file @89bb9f2
  1 +<template>
  2 + <div>
  3 + <el-card class="box-card">
  4 + <div slot="header" style="display:flex;align-items: center; justify-content: space-between;">
  5 + <div>
  6 + <span v-if="!productId" class="addTitle">新增商品</span>
  7 + <span v-else class="addTitle">编辑商品</span>
  8 + </div>
  9 + <div>
  10 + <el-button v-if="active" class="buttonHover"
  11 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="back">取消</el-button>
  12 + <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>
  13 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>
  14 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>
  15 + </div>
  16 + </div>
  17 + <!-- 步骤条 -->
  18 + <div class="stepsColor common">
  19 + <div class="stepsOne common">
  20 + <div :class="active ? 'one_class common' : 't_class common'">1</div>
  21 + <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>
  22 + </div>
  23 + <div class="line" />
  24 + <div class="stepsTwo common">
  25 + <div :class="active ? 't_class common' : 'one_class common'">2</div>
  26 + <div :class="active ? 'w_class' : 'two_class' ">基本属性&商品描述</div>
  27 + </div>
  28 + </div>
  29 + </el-card>
  30 + <!-- 商品 -->
  31 + <div class="addCom common">
  32 + <div v-if="active">
  33 + <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px 20px;">
  34 + <div class="leftCom">
  35 + <el-form-item label="商品名称" prop="productName">
  36 + <el-input v-model="form.productName" maxlength="50" show-word-limit />
  37 + </el-form-item>
  38 + <el-form-item label="卖点简介">
  39 + <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
  40 + </el-form-item>
  41 + <el-form-item>
  42 + <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
  43 + </el-form-item>
  44 + </div>
  45 + <div class="rightCom">
  46 + <el-form-item label="官方分类" prop="classifyId">
  47 + <el-cascader
  48 + v-model="form.classifyId"
  49 + :options="classifyList"
  50 + clearable
  51 + :props="{
  52 + checkStrictly: false,
  53 + label:'categoryName',
  54 + value:'id',
  55 + children:'childs'
  56 + }"
  57 + @change="handleChangeCascader"
  58 + />
  59 + </el-form-item>
  60 +
  61 + <el-form-item label="商品分组" prop="shopGroupId">
  62 + <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable>
  63 + <el-option
  64 + v-for="(item,index) in groupList"
  65 + :key="index"
  66 + :label="item.groupName"
  67 + :value="item.shopGroupId"
  68 + />
  69 + </el-select>
  70 + </el-form-item>
  71 + <el-form-item label="品牌">
  72 + <el-select
  73 + v-model="form.brandId"
  74 + clearable
  75 + placeholder="请选择品牌"
  76 + >
  77 + <el-option
  78 + v-for="item in brandList"
  79 + :key="item.id"
  80 + :label="item.brandName"
  81 + :value="item.id"
  82 + />
  83 + </el-select>
  84 + </el-form-item>
  85 + <el-form-item class="form-item-long" label="供应商">
  86 + <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />
  87 + </el-form-item>
  88 + <el-form-item class="form-item-long" label="成本价(/元)" prop="cost">
  89 + <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />
  90 + </el-form-item>
  91 + <el-form-item label="需要物流" prop="ifLogistics">
  92 + <el-radio-group v-model="form.ifLogistics">
  93 + <el-radio :label="1">是</el-radio>
  94 + <el-radio :label="0">否</el-radio>
  95 + </el-radio-group>
  96 + </el-form-item>
  97 + <el-form-item label="上架状态" prop="shelveState">
  98 + <el-radio-group v-model="form.shelveState">
  99 + <el-radio :label="1">上架</el-radio>
  100 + <el-radio :label="0">下架</el-radio>
  101 + </el-radio-group>
  102 + </el-form-item>
  103 + <el-form-item label="允许超卖" prop="ifOversold">
  104 + <el-radio-group v-model="form.ifOversold">
  105 + <el-radio :label="1">允许</el-radio>
  106 + <el-radio :label="0">不允许</el-radio>
  107 + </el-radio-group>
  108 + </el-form-item>
  109 + <el-form-item label="积分兑换" prop="ifCredit">
  110 + <el-radio-group v-model="form.ifCredit">
  111 + <el-radio :label="1">允许</el-radio>
  112 + <el-radio :label="0">不允许</el-radio>
  113 + </el-radio-group>
  114 + <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
  115 + </el-form-item>
  116 + <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
  117 + <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->
  118 + <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />
  119 + <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
  120 + <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
  121 + </el-form-item>
  122 + <!-- <el-form-item label="花呗分期">-->
  123 + <!-- <el-radio-group v-model="form.ifHuabei">-->
  124 + <!-- <el-radio :label="1">支持</el-radio>-->
  125 + <!-- <el-radio :label="0">不支持</el-radio>-->
  126 + <!-- </el-radio-group>-->
  127 + <!-- </el-form-item>-->
  128 + </div>
  129 + </el-form>
  130 + </div>
  131 + <div v-if="!active" class="centerCom">
  132 + <el-form ref="form" :model="params" label-width="80px">
  133 + <StyleInformation :form="params" />
  134 + </el-form>
  135 + </div>
  136 + </div>
  137 +
  138 + <!-- 弹窗 -->
  139 + <el-dialog
  140 + :visible.sync="dialogVisible"
  141 + class="check-image-dialog"
  142 + title="查看图片"
  143 + center="center"
  144 + >
  145 + <img width="100%" :src="dialogImageUrl" alt>
  146 + </el-dialog>
  147 + </div>
  148 +</template>
  149 +
  150 +<script>
  151 +import Tinymce from '@/components/Tinymce'
  152 +import {
  153 + getGroupSelect,
  154 + getClassify,
  155 + getClassifyAdd,
  156 + getClassifyGetById,
  157 + getClassifyUpdate,
  158 + getBrandList
  159 +} from '@/api/commodity'
  160 +import {
  161 + getSelect
  162 +} from '@/api/account';
  163 +import { uploadUrl } from '@/utils/request'
  164 +import StyleInformation from './addComponent'
  165 +export default {
  166 + components: {
  167 + Tinymce,
  168 + StyleInformation
  169 + },
  170 + props: {
  171 + productId: {
  172 + type: Number,
  173 + default: 0
  174 + },
  175 + showTinymce: {
  176 + type: Boolean
  177 + }
  178 + },
  179 + watch: {
  180 +
  181 + },
  182 + data() {
  183 + // const checkCreditLimit = (rule, value, callback) => {
  184 + // console.log(this.form.ifCredit)
  185 + // if (this.form.ifCredit) {
  186 + // callback(new Error('当选择允许积分兑换时，必须填写该值'))
  187 + // }
  188 + // const reg = /^[1-9]\d*$/
  189 + // if (value === '' || value === undefined || value === null) {
  190 + // callback();
  191 + // } else {
  192 + // if ((!reg.test(value)) && value !== '') {
  193 + // callback(new Error('请输入正确的价格'));
  194 + // } else {
  195 + // callback();
  196 + // }
  197 + // }
  198 + // callback()
  199 + // }
  200 + return {
  201 + brandList: [],
  202 + active: 1,
  203 + action: uploadUrl,
  204 + form: {
  205 + brandId: null, // 品牌ID
  206 + productName: '', // 商品名称
  207 + productBrief: '', // 商品简介
  208 + shopGroupId: '', // 商品分组id
  209 + classifyId: '', // 分类id
  210 + supplierName: '', // 供应商名称
  211 + cost:null,//成本价
  212 + ifLogistics: '', // 是否需要物流 1-是 0-否
  213 + shelveState: '', // 是否上架 1-上架 0-不上架
  214 + ifOversold: '', // 是否允许超卖 1-是 0-否
  215 + ifCredit: '', // 是否支持积分兑换 1-是 0-否
  216 + creditLimit: '', // 单笔订单限制使用多少积分
  217 + ifHuabei: 1, // 是否支持花呗分期 1-是 0-否
  218 + productText: '', // 商品描述（富文本）
  219 + images: [], // "图片地址"
  220 + deletes: [], // 删除的规格id数组
  221 + names: [
  222 + {
  223 + code: '', // 级别
  224 + skuName: '', // 规格名
  225 + values: [
  226 + {
  227 + valueCode: '', // 级别
  228 + skuValue: '', // 规格值
  229 + image: '' // 图片
  230 + }
  231 + ]
  232 + }
  233 + ],
  234 + skus: [
  235 + {
  236 + skuName: '', // 规格名称
  237 + skuValue: '', // 规格值
  238 + price: '', // 售价
  239 + originalPrice: '', // 原价
  240 + stockNumber: '', // 库存数量
  241 + weight: '', // 重量
  242 + skuImage: '', // 配图地址
  243 + style: '' // 款式 1-单款式 2-多款式
  244 + }
  245 + ]
  246 + },
  247 + params: {
  248 + applyPrice: 0,
  249 + attrStyle: 0,
  250 + categoryId: '',
  251 + oversold: 1,
  252 + collects: 0,
  253 + groupId: '',
  254 + imgs: [],
  255 + deletes: [], // 删除规格数据
  256 + isDelete: 0,
  257 + limitCount: 0,
  258 + minusStock: '',
  259 + needLogistics: 1,
  260 + platform: '',
  261 + price: 0,
  262 + productCode: '',
  263 + productName: '',
  264 + sellCount: 0,
  265 + sellDesc: '',
  266 + sellType: '',
  267 + shortName: '',
  268 + skuAttrList: [
  269 + {
  270 + code: '',
  271 + skuName: '',
  272 + needImg: false,
  273 + values: [
  274 + {
  275 + skuValue: '',
  276 + valueCode: '',
  277 + image: ''
  278 + }
  279 + ]
  280 + }
  281 + ],
  282 + skuList: [
  283 + {
  284 + isDelete: '',
  285 + skuAttrCodeDTOList: [
  286 + {
  287 + code: '',
  288 + valueCode: ''
  289 + }
  290 + ],
  291 + skuAttrList: [],
  292 + sku: '',
  293 + skuImg: '',
  294 + price: 0,
  295 + originalPrice: 0,
  296 + stockNumber: 0,
  297 + weight: 0
  298 + }
  299 + ],
  300 + sortOrder: '',
  301 + status: '',
  302 + stock: '',
  303 + supplierName: '',
  304 + cost:null,
  305 + views: '',
  306 + weight: ''
  307 + },
  308 + imgList: [],
  309 + groupList: [],
  310 + classifyList: [],
  311 + dialogImageUrl: '',
  312 + dialogVisible: false,
  313 + rules: {
  314 + productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  315 + shopGroupId: [{ required: true, message: '请选择商品分组', trigger: 'change' }],
  316 + classifyId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
  317 + cost:[{ required: true, message: '请输入成本价', trigger: 'change' }],
  318 + ifLogistics: [{ required: true, message: '请选择是否需要物流', trigger: 'change' }],
  319 + shelveState: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
  320 + ifOversold: [{ required: true, message: '请选择是否允许超卖', trigger: 'change' }],
  321 + ifCredit: [{ required: true, message: '请选择是否支持积分兑换', trigger: 'change' }],
  322 + creditLimit: [{ required: true, message: '请输入单笔最大抵扣', trigger: 'blur' }]
  323 + },
  324 + integralList: [],
  325 + integralProportion: '' // 积分兑换金额比例
  326 + }
  327 + },
  328 + watch: {
  329 + productId: {
  330 + handler(nVal, oVal) {
  331 + if (nVal) {
  332 + // this.details()
  333 + }
  334 + }
  335 + },
  336 + },
  337 + mounted() {
  338 + this.groups()
  339 + this.selectList()
  340 + this.getBrandList()
  341 + // if (this.productId) {
  342 + // this.details()
  343 + // }
  344 + this.getCredit()
  345 + },
  346 + methods: {
  347 + handleChangeCascader() {
  348 + console.log(this.form.classifyId)
  349 + },
  350 + async getBrandList() {
  351 + const { data } = await getBrandList()
  352 + this.brandList = data
  353 + },
  354 + async getCredit() {
  355 + const res = await getSelect({ dictName: 'CREDIT_CONFIG' })
  356 + this.integralList = res.data
  357 + this.integralList.forEach((item) => {
  358 + if (item.dictName === 'credit_exchange_rate') {
  359 + this.integralProportion = item.dictDescribe
  360 + }
  361 + })
  362 + },
  363 + handleImageSuccess(response) {
  364 + const { url } = response.data
  365 + this.imgList.push(url)
  366 + },
  367 + handlePictureCardPreview(file) {
  368 + this.dialogImageUrl = file.imgPath
  369 + this.dialogVisible = true
  370 + },
  371 + // 移除图片
  372 + handleRemove(file) {
  373 + const { imgPath } = file
  374 + this.form.imgs = this.form.imgs.filter(item => {
  375 + return item.imgPath !== imgPath
  376 + })
  377 + },
  378 + // 下一步
  379 + next() {
  380 + this.$refs['form'].validate((valid) => {
  381 + console.log('val', valid)
  382 + if (valid) {
  383 + if (this.active === 1) {
  384 + this.active = 0
  385 + // console.log(this.form);
  386 + sessionStorage.setItem('form', JSON.stringify(this.form.skus))
  387 + }
  388 + } else {
  389 + this.$message({
  390 + message: '请填写正确的信息',
  391 + type: 'warning'
  392 + })
  393 + return false
  394 + }
  395 + })
  396 + },
  397 + // 点击新增商品时表单数据重置
  398 + reset() {
  399 + // this.form.productText = ''
  400 + this.form = {
  401 + productName: '',
  402 + productBrief: '',
  403 + shopGroupId: '',
  404 + classifyId: '',
  405 + supplierName: '',
  406 + ifLogistics: '',
  407 + shelveState: ' ',
  408 + ifOversold: '',
  409 + ifCredit: '',
  410 + creditLimit: '',
  411 + ifHuabei: 1,
  412 + cost:null,
  413 + productText: '',
  414 + images: [],
  415 + deletes: [],
  416 + names: [
  417 + {
  418 + code: '',
  419 + skuName: '',
  420 + values: [
  421 + {
  422 + valueCode: '',
  423 + skuValue: '',
  424 + image: ''
  425 + }
  426 + ]
  427 + }
  428 + ],
  429 + skus: [
  430 + {
  431 + skuName: '',
  432 + skuValue: '',
  433 + price: '',
  434 + originalPrice: '',
  435 + stockNumber: '',
  436 + weight: '',
  437 + skuImage: '',
  438 + style: ''
  439 + }
  440 + ]
  441 + }
  442 + this.params = {
  443 + applyPrice: 0,
  444 + attrStyle: 0,
  445 + categoryId: '',
  446 + oversold: 1,
  447 + collects: 0,
  448 + groupId: '',
  449 + imgs: [],
  450 + cost:null,
  451 + deletes: [],
  452 + isDelete: 0,
  453 + limitCount: 0,
  454 + minusStock: '',
  455 + needLogistics: 1,
  456 + platform: '',
  457 + price: 0,
  458 + productCode: '',
  459 + productName: '',
  460 + sellCount: 0,
  461 + sellDesc: '',
  462 + sellType: '',
  463 + shortName: '',
  464 + skuAttrList: [
  465 + {
  466 + code: '',
  467 + skuName: '',
  468 + needImg: false,
  469 + values: [
  470 + {
  471 + skuValue: '',
  472 + valueCode: '',
  473 + image: ''
  474 + }
  475 + ]
  476 + }
  477 + ],
  478 + skuList: [
  479 + {
  480 + isDelete: '',
  481 + skuAttrCodeDTOList: [
  482 + {
  483 + code: '',
  484 + valueCode: ''
  485 + }
  486 + ],
  487 + skuAttrList: [],
  488 + sku: '',
  489 + skuImg: '',
  490 + price: 0,
  491 + originalPrice: 0,
  492 + stockNumber: 0,
  493 + weight: 0
  494 + }
  495 + ],
  496 + sortOrder: '',
  497 + status: '',
  498 + stock: '',
  499 + supplierName: '',
  500 + views: '',
  501 + weight: ''
  502 + }
  503 + this.imgList = []
  504 + this.dialogImageUrl = ''
  505 + this.dialogVisible = false
  506 + this.active = 1
  507 + },
  508 + // 返回
  509 + back() {
  510 + this.active = 1
  511 + this.$emit('cancel')
  512 + },
  513 + // 上一步
  514 + last() {
  515 + if (this.active !== 1) {
  516 + this.active = 1
  517 + }
  518 + },
  519 + // 保存
  520 + async save() {
  521 + console.log(this.params.skuAttrList)
  522 + if (this.params.attrStyle === 1) {
  523 + for (let i = 0; i < this.params.skuAttrList.length; i++) {
  524 + if (this.params.skuAttrList[i].skuName === '') {
  525 + this.$message({
  526 + message: '规格名不能为空',
  527 + type: 'warning'
  528 + })
  529 + return false
  530 + }
  531 + }
  532 + }
  533 + this.form.names = this.params.skuAttrList
  534 + this.params.skuList.forEach(element => {
  535 + element.style = this.params.attrStyle
  536 + })
  537 + this.form.skus = this.params.skuList
  538 + this.form.images = this.params.imgs
  539 + this.form.deletes = this.params.deletes
  540 + this.form.classifyId = Array.isArray(this.form.classifyId) ? this.form.classifyId[this.form.classifyId.length - 1] : this.form.classifyId
  541 + if (this.productId) {
  542 + this.form.productId = this.productId
  543 + const sku = JSON.parse(sessionStorage.getItem('form'))
  544 + sku.forEach((element, i) => {
  545 + for (let index = 0; index < this.form.skus.length; index++) {
  546 + if (i === index) {
  547 + this.form.skus[index].skuId = element.skuId
  548 + }
  549 + }
  550 + })
  551 + console.log(this.form, 'this.form')
  552 +
  553 + const res = await getClassifyUpdate(this.form)
  554 + if (res.code === '') {
  555 + this.$message({
  556 + type: 'success',
  557 + message: '成功!'
  558 + })
  559 + this.back()
  560 + }
  561 + } else {
  562 +
  563 + const res = await getClassifyAdd(this.form)
  564 + if (res.code === '') {
  565 + this.$message({
  566 + type: 'success',
  567 + message: '成功!'
  568 + })
  569 + this.reset()
  570 + this.back()
  571 + }
  572 + }
  573 + },
  574 + // 获取商品分组
  575 + async groups() {
  576 + const res = await getGroupSelect({
  577 + })
  578 + this.groupList = res.data
  579 + },
  580 + // 获取详情
  581 + async details() {
  582 + const res = await getClassifyGetById({ productId: this.productId })
  583 + this.form = res.data
  584 + this.$set(this.form, 'productText', res.data.productText)
  585 + // this.form.productText = res.data.productText
  586 + // console.log(this.form.productText, 'productText')
  587 + if (res.data.names.length !== 0) {
  588 + this.params.skuAttrList = res.data.names
  589 + }
  590 + // this.params.skuAttrList.forEach((item) => {
  591 + // var data = {}
  592 + // var arr = Object.keys(res.data)
  593 + // if (arr.length === 0) {
  594 + // item.needImg = false
  595 + // }
  596 + // })
  597 + this.params.skuList = this.form.skus
  598 + this.params.attrStyle = res.data.skus[0].style
  599 + this.params.imgs = res.data.images
  600 + },
  601 + async selectList() {
  602 + const res = await getClassify()
  603 + this.classifyList = this.filterList(res.data)
  604 + },
  605 + filterList(data) {
  606 + data.forEach(i => {
  607 + if (i.childs.length) {
  608 + this.filterList(i.childs)
  609 + } else {
  610 + i.childs = null
  611 + }
  612 + })
  613 + return data
  614 + }
  615 + }
  616 +}
  617 +</script>
  618 +
  619 +<style scoped lang='scss'>
  620 +@import url("../../../styles/elDialog.scss");
  621 +.btnList {
  622 + float: right;
  623 + padding: 3px 0;
  624 + width: 100px;
  625 + height: 40px;
  626 + border-radius: 4px;
  627 + margin-right: 30px;
  628 +}
  629 +.addTitle {
  630 + font-size: 14px;
  631 + color: #333333;
  632 + line-height: 50px;
  633 +}
  634 +.stepsColor{
  635 + font-size: 20px;
  636 + line-height: 40px;
  637 + .one_class {
  638 + width: 40px;
  639 + background: #3F9B6A;
  640 + border-radius: 50%;
  641 + color: #ffffff;
  642 + margin: 0 10px;
  643 + }
  644 + .two_class {
  645 + color: #3F9B6A;
  646 + }
  647 + .line {
  648 + width: 230px;
  649 + height: 2px;
  650 + background: #e0e5eb;
  651 + margin: 0 20px;
  652 + }
  653 + .t_class {
  654 + width: 40px;
  655 + background: #dddddd;
  656 + border-radius: 50%;
  657 + color: #333333;
  658 + margin: 0 10px;
  659 + }
  660 + .w_class {
  661 + color: #666666;
  662 + }
  663 +}
  664 +.common {
  665 + display: flex;
  666 + justify-content: center;
  667 + align-items: center;
  668 +}
  669 +
  670 +.addCom {
  671 + margin: 10px 0;
  672 + justify-content: space-around;
  673 + align-items: unset;
  674 + width: 100%;
  675 + .el-form{
  676 + display: flex;
  677 + padding: 0px 10px 10px;
  678 + }
  679 + .leftCom {
  680 + width: 65%;
  681 + background: #ffffff;
  682 + }
  683 + .rightCom {
  684 + width: 35%;
  685 + background: #ffffff;
  686 + margin-left: 80px;
  687 + }
  688 +}
  689 +.centerCom {
  690 + width: 1660px;
  691 + background: #ffffff;
  692 + box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
  693 + border-radius: 4px;
  694 +}
  695 +</style>
  696 +<style scoped>
  697 +.form-item-long >>> .el-input {
  698 + width: 100%;
  699 +}
  700 +</style>
merchant-web-master/src/views/commodity/commoditySystem/addCommodity.vue
  View file @89bb9f2
1 <template> 1 <template>
2 <div> 2 <div>
3 - <el-card class="box-card">  
4 - <div slot="header" style="display:flex;align-items: center; justify-content: space-between;">  
5 - <div>  
6 - <span v-if="!productId" class="addTitle">新增商品</span>  
7 - <span v-else class="addTitle">编辑商品</span>  
8 - </div>  
9 - <div>  
10 - <el-button v-if="active" class="buttonHover"  
11 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="back">取消</el-button>  
12 - <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>  
13 - <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>  
14 - <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>  
15 - </div> 3 + <!-- 步骤条 -->
  4 + <div class="stepsColor common">
  5 + <div class="stepsOne common">
  6 + <div :class="active ? 'one_class common' : 't_class common'">1</div>
  7 + <div :class="active ? 'two_class' : 'w_class'">基本属性</div>
16 </div> 8 </div>
17 - <!-- 步骤条 -->  
18 - <div class="stepsColor common">  
19 - <div class="stepsOne common">  
20 - <div :class="active ? 'one_class common' : 't_class common'">1</div>  
21 - <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>  
22 - </div>  
23 - <div class="line" />  
24 - <div class="stepsTwo common">  
25 - <div :class="active ? 't_class common' : 'one_class common'">2</div>  
26 - <div :class="active ? 'w_class' : 'two_class' ">基本属性&商品描述</div>  
27 - </div> 9 + <div class="line" />
  10 + <div class="stepsTwo common">
  11 + <div :class="active ? 't_class common' : 'one_class common'">2</div>
  12 + <div :class="active ? 'w_class' : 'two_class' ">商品描述</div>
28 </div> 13 </div>
29 - </el-card> 14 + </div>
30 <!-- 商品 --> 15 <!-- 商品 -->
31 <div class="addCom common"> 16 <div class="addCom common">
32 <div v-if="active"> 17 <div v-if="active">
33 <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px 20px;"> 18 <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px 20px;">
34 - <div class="leftCom">  
35 - <el-form-item label="商品名称" prop="productName">  
36 - <el-input v-model="form.productName" maxlength="50" show-word-limit />  
37 - </el-form-item>  
38 - <el-form-item label="卖点简介">  
39 - <el-input v-model="form.productBrief" maxlength="50" show-word-limit />  
40 - </el-form-item>  
41 - <el-form-item>  
42 - <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />  
43 - </el-form-item>  
44 - </div>  
45 - <div class="rightCom">  
46 - <el-form-item label="官方分类" prop="classifyId">  
47 - <el-cascader  
48 - v-model="form.classifyId"  
49 - :options="classifyList"  
50 - clearable  
51 - :props="{  
52 - checkStrictly: false,  
53 - label:'categoryName',  
54 - value:'id',  
55 - children:'childs'  
56 - }"  
57 - @change="handleChangeCascader"  
58 - />  
59 - </el-form-item>  
60 -  
61 - <el-form-item label="商品分组" prop="shopGroupId">  
62 - <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable>  
63 - <el-option  
64 - v-for="(item,index) in groupList"  
65 - :key="index"  
66 - :label="item.groupName"  
67 - :value="item.shopGroupId"  
68 - />  
69 - </el-select>  
70 - </el-form-item>  
71 - <el-form-item label="品牌">  
72 - <el-select  
73 - v-model="form.brandId"  
74 - clearable  
75 - placeholder="请选择品牌"  
76 - >  
77 - <el-option  
78 - v-for="item in brandList"  
79 - :key="item.id"  
80 - :label="item.brandName"  
81 - :value="item.id" 19 + <el-form-item label="商品名称" prop="productName">
  20 + <el-input v-model="form.productName" maxlength="50" show-word-limit />
  21 + </el-form-item>
  22 + <el-row :gutter="20">
  23 + <el-col :span="12">
  24 + <el-form-item label="官方分类" prop="classifyId">
  25 + <el-cascader
  26 + v-model="form.classifyId"
  27 + :options="classifyList"
  28 + clearable
  29 + :props="{
  30 + checkStrictly: false,
  31 + label:'categoryName',
  32 + value:'id',
  33 + children:'childs'
  34 + }"
  35 + style="width: 100%"
  36 + @change="handleChangeCascader"
82 /> 37 />
83 - </el-select>  
84 - </el-form-item>  
85 - <el-form-item class="form-item-long" label="供应商">  
86 - <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />  
87 - </el-form-item>  
88 - <el-form-item class="form-item-long" label="成本价(/元)" prop="cost">  
89 - <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />  
90 - </el-form-item>  
91 - <el-form-item label="需要物流" prop="ifLogistics">  
92 - <el-radio-group v-model="form.ifLogistics">  
93 - <el-radio :label="1">是</el-radio>  
94 - <el-radio :label="0">否</el-radio>  
95 - </el-radio-group>  
96 - </el-form-item>  
97 - <el-form-item label="上架状态" prop="shelveState">  
98 - <el-radio-group v-model="form.shelveState">  
99 - <el-radio :label="1">上架</el-radio>  
100 - <el-radio :label="0">下架</el-radio>  
101 - </el-radio-group>  
102 - </el-form-item>  
103 - <el-form-item label="允许超卖" prop="ifOversold">  
104 - <el-radio-group v-model="form.ifOversold">  
105 - <el-radio :label="1">允许</el-radio>  
106 - <el-radio :label="0">不允许</el-radio>  
107 - </el-radio-group>  
108 - </el-form-item>  
109 - <el-form-item label="积分兑换" prop="ifCredit">  
110 - <el-radio-group v-model="form.ifCredit">  
111 - <el-radio :label="1">允许</el-radio>  
112 - <el-radio :label="0">不允许</el-radio>  
113 - </el-radio-group>  
114 - <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>  
115 - </el-form-item>  
116 - <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">  
117 - <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->  
118 - <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />  
119 - <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>  
120 - <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>  
121 - </el-form-item>  
122 - <!-- <el-form-item label="花呗分期">-->  
123 - <!-- <el-radio-group v-model="form.ifHuabei">-->  
124 - <!-- <el-radio :label="1">支持</el-radio>-->  
125 - <!-- <el-radio :label="0">不支持</el-radio>-->  
126 - <!-- </el-radio-group>-->  
127 - <!-- </el-form-item>-->  
128 - </div> 38 + </el-form-item>
  39 + </el-col>
  40 + <el-col :span="12">
  41 + <el-form-item label="商品分组" prop="shopGroupId">
  42 + <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable style="width: 100%">
  43 + <el-option
  44 + v-for="(item,index) in groupList"
  45 + :key="index"
  46 + :label="item.groupName"
  47 + :value="item.shopGroupId"
  48 + />
  49 + </el-select>
  50 + </el-form-item>
  51 + </el-col>
  52 + <el-col :span="12">
  53 + <el-form-item label="品牌">
  54 + <el-select
  55 + v-model="form.brandId"
  56 + clearable
  57 + placeholder="请选择品牌"
  58 + style="width: 100%"
  59 + >
  60 + <el-option
  61 + v-for="item in brandList"
  62 + :key="item.id"
  63 + :label="item.brandName"
  64 + :value="item.id"
  65 + />
  66 + </el-select>
  67 + </el-form-item>
  68 + </el-col>
  69 + <el-col :span="12">
  70 + <el-form-item class="form-item-long" label="供应商">
  71 + <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />
  72 + </el-form-item>
  73 + </el-col>
  74 + <el-col :span="12">
  75 + <el-form-item class="form-item-long" label="成本价(/元)" prop="cost">
  76 + <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />
  77 + </el-form-item>
  78 + </el-col>
  79 + <el-col :span="12">
  80 + <el-form-item label="需要物流" prop="ifLogistics">
  81 + <el-radio-group v-model="form.ifLogistics">
  82 + <el-radio :label="1">是</el-radio>
  83 + <el-radio :label="0">否</el-radio>
  84 + </el-radio-group>
  85 + </el-form-item>
  86 + </el-col>
  87 + <el-col :span="12">
  88 + <el-form-item label="上架状态" prop="shelveState">
  89 + <el-radio-group v-model="form.shelveState">
  90 + <el-radio :label="1">上架</el-radio>
  91 + <el-radio :label="0">下架</el-radio>
  92 + </el-radio-group>
  93 + </el-form-item>
  94 + </el-col>
  95 + <el-col :span="12">
  96 + <el-form-item label="允许超卖" prop="ifOversold">
  97 + <el-radio-group v-model="form.ifOversold">
  98 + <el-radio :label="1">允许</el-radio>
  99 + <el-radio :label="0">不允许</el-radio>
  100 + </el-radio-group>
  101 + </el-form-item>
  102 + </el-col>
  103 +
  104 + </el-row>
  105 + <el-form-item label="卖点简介">
  106 + <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
  107 + </el-form-item>
  108 + <el-form-item>
  109 + <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
  110 + </el-form-item>
  111 + <el-row :gutter="20">
  112 + <el-col :span="12">
  113 + <el-form-item label="积分兑换" prop="ifCredit">
  114 + <el-radio-group v-model="form.ifCredit">
  115 + <el-radio :label="1">允许</el-radio>
  116 + <el-radio :label="0">不允许</el-radio>
  117 + </el-radio-group>
  118 + <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
  119 + </el-form-item>
  120 + </el-col>
  121 + <el-col :span="12" v-if="form.ifCredit">
  122 + <el-form-item class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
  123 + <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />
  124 + <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
  125 + <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
  126 + </el-form-item>
  127 + </el-col>
  128 + </el-row>
  129 +
129 </el-form> 130 </el-form>
130 </div> 131 </div>
131 - <div v-if="!active" class="centerCom"> 132 + <div v-if="!active" style="width: 100%;">
132 <el-form ref="form" :model="params" label-width="80px"> 133 <el-form ref="form" :model="params" label-width="80px">
133 <StyleInformation :form="params" /> 134 <StyleInformation :form="params" />
134 </el-form> 135 </el-form>
@@ -144,6 +145,12 @@ @@ -144,6 +145,12 @@
144 > 145 >
145 <img width="100%" :src="dialogImageUrl" alt> 146 <img width="100%" :src="dialogImageUrl" alt>
146 </el-dialog> 147 </el-dialog>
  148 + <div style="padding: 20px;">
  149 + <el-button v-if="active" class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="back">取消</el-button>
  150 + <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>
  151 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>
  152 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>
  153 + </div>
147 </div> 154 </div>
148 </template> 155 </template>
149 156
@@ -161,7 +168,7 @@ import { @@ -161,7 +168,7 @@ import {
161 getSelect 168 getSelect
162 } from '@/api/account'; 169 } from '@/api/account';
163 import { uploadUrl } from '@/utils/request' 170 import { uploadUrl } from '@/utils/request'
164 -import StyleInformation from './addComponent' 171 +import StyleInformation from '@/views/commodity/commoditySystem/addComponent'
165 export default { 172 export default {
166 components: { 173 components: {
167 Tinymce, 174 Tinymce,
@@ -634,6 +641,9 @@ export default { @@ -634,6 +641,9 @@ export default {
634 .stepsColor{ 641 .stepsColor{
635 font-size: 20px; 642 font-size: 20px;
636 line-height: 40px; 643 line-height: 40px;
  644 + width: 50%;
  645 + margin: 0 auto;
  646 + padding: 15px 0;
637 .one_class { 647 .one_class {
638 width: 40px; 648 width: 40px;
639 background: #3F9B6A; 649 background: #3F9B6A;
@@ -671,9 +681,11 @@ export default { @@ -671,9 +681,11 @@ export default {
671 margin: 10px 0; 681 margin: 10px 0;
672 justify-content: space-around; 682 justify-content: space-around;
673 align-items: unset; 683 align-items: unset;
674 - width: 100%; 684 + // width: 100%;
  685 + padding:0 20px;
  686 +
675 .el-form{ 687 .el-form{
676 - display: flex; 688 + // display: flex;
677 padding: 0px 10px 10px; 689 padding: 0px 10px 10px;
678 } 690 }
679 .leftCom { 691 .leftCom {
merchant-web-master/src/views/commodity/commoditySystem/addComponent.vue
  View file @89bb9f2
1 <template> 1 <template>
2 <div class="style-information-component"> 2 <div class="style-information-component">
3 - <el-form-item label="商品图片" />  
4 - <div class="upload-wrap">  
5 - <upimg filePath="bueniss" :value="imgsGeshi(form.imgs)" inputtype="coverImage" :limit="5"  
6 - @changimg="e=>changimg(e,'imgs')"></upimg>  
7 - <!-- <el-upload  
8 - list-type="picture-card"  
9 - :on-preview="handlePictureCardPreview"  
10 - :on-remove="handleRemove"  
11 - :headers="headers"  
12 - :data="dataObj"  
13 - :file-list="form.imgs"  
14 - :limit="20"  
15 - :on-success="handleImageSuccess"  
16 - :action="action"  
17 - >  
18 - <i slot="default" class="el-icon-plus" />  
19 - <div slot="file" slot-scope="{ file }">  
20 - <img class="el-upload-list__item-thumbnail" :src="file.imgPath">  
21 - <span class="el-upload-list__item-actions">  
22 - <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">  
23 - <i class="el-icon-zoom-in" />  
24 - </span>  
25 - <span class="el-upload-list__item-delete" @click="handleRemove(file)">  
26 - <i class="el-icon-delete" /> 3 + <el-form-item label="商品图片" >
  4 + <div class="upload-wrap">
  5 + <upimg filePath="bueniss" :value="imgsGeshi(form.imgs)" inputtype="coverImage" :limit="5"
  6 + @changimg="e=>changimg(e,'imgs')"></upimg>
  7 + <!-- <el-upload
  8 + list-type="picture-card"
  9 + :on-preview="handlePictureCardPreview"
  10 + :on-remove="handleRemove"
  11 + :headers="headers"
  12 + :data="dataObj"
  13 + :file-list="form.imgs"
  14 + :limit="20"
  15 + :on-success="handleImageSuccess"
  16 + :action="action"
  17 + >
  18 + <i slot="default" class="el-icon-plus" />
  19 + <div slot="file" slot-scope="{ file }">
  20 + <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
  21 + <span class="el-upload-list__item-actions">
  22 + <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
  23 + <i class="el-icon-zoom-in" />
  24 + </span>
  25 + <span class="el-upload-list__item-delete" @click="handleRemove(file)">
  26 + <i class="el-icon-delete" />
  27 + </span>
27 </span> 28 </span>
28 - </span>  
29 - </div>  
30 - </el-upload> -->  
31 - </div>  
32 - <el-form-item label="款式设置">  
33 - <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">  
34 - <el-radio :label="0">单款式</el-radio>  
35 - <el-radio :label="1">多款式</el-radio>  
36 - </el-radio-group> 29 + </div>
  30 + </el-upload> -->
  31 + </div>
37 </el-form-item> 32 </el-form-item>
38 - <div class="style-container"> 33 + <el-form-item label="规格设置">
  34 + <div class="style-container" >
39 <div v-if="form.attrStyle === 0" class="single-style"> 35 <div v-if="form.attrStyle === 0" class="single-style">
40 <el-table 36 <el-table
41 :data="skuList" 37 :data="skuList"
@@ -137,61 +133,17 @@ @@ -137,61 +133,17 @@
137 </el-form-item> 133 </el-form-item>
138 </div> 134 </div>
139 <el-button class="add-attr-btn" type="primary" @click="addSkuAttrList">添加规格</el-button> 135 <el-button class="add-attr-btn" type="primary" @click="addSkuAttrList">添加规格</el-button>
140 - <el-table  
141 - :data="skuList"  
142 - style="width: 100%"  
143 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"  
144 - >  
145 - <el-table-column  
146 - v-for="(skuAttr, index) in skuAttrName"  
147 - :key="index"  
148 - :label="skuAttr.skuName"  
149 - >  
150 - <template slot-scope="scope">  
151 - {{  
152 - scope.row.skuAttrCodeDTOList &&  
153 - scope.row.skuAttrCodeDTOList[index]  
154 - | attrValueFilter(form.skuAttrList)  
155 - }}  
156 - </template>  
157 - </el-table-column>  
158 - <el-table-column label="售价">  
159 - <template slot-scope="scope">  
160 - <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->  
161 - <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />  
162 - </template>  
163 - </el-table-column>  
164 - <el-table-column label="原价">  
165 - <template slot-scope="scope">  
166 - <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->  
167 - <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />  
168 - </template>  
169 - </el-table-column>  
170 - <el-table-column label="库存">  
171 - <template slot-scope="scope">  
172 - <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->  
173 - <el-input-number v-model="scope.row.stockNumber" :controls="false" :min="0" :precision="0" />  
174 - </template>  
175 - </el-table-column>  
176 - <el-table-column label="重量(KG)">  
177 - <template slot-scope="scope">  
178 - <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->  
179 - <el-input-number v-model="scope.row.weight" :controls="false" :min="0" :precision="6" :step="0.01" />  
180 - </template>  
181 - </el-table-column>  
182 - <el-table-column label="国际条码">  
183 - <template slot-scope="scope">  
184 - <el-input v-model="scope.row.sku" />  
185 - </template>  
186 - </el-table-column>  
187 - <!-- <el-table-column label="操作">  
188 - <template slot-scope="scope">  
189 - <el-button type="text" @click="delAttrValue(scope.row,scope.$index,scope.row,scope)">删除</el-button>  
190 - </template>  
191 - </el-table-column> -->  
192 - </el-table> 136 +
193 </div> 137 </div>
194 </div> 138 </div>
  139 + </el-form-item>
  140 + <!-- <el-form-item label="款式设置" >
  141 + <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
  142 + <el-radio :label="0">单款式</el-radio>
  143 + <el-radio :label="1">多款式</el-radio>
  144 + </el-radio-group>
  145 + </el-form-item> -->
  146 +
195 <el-dialog 147 <el-dialog
196 :append-to-body="true" 148 :append-to-body="true"
197 :visible.sync="dialogVisible" 149 :visible.sync="dialogVisible"
merchant-web-master/src/views/commodity/commoditySystem/index copy.vue 0 → 100644
  View file @89bb9f2
  1 +<!-- -->
  2 +<template>
  3 + <div style="padding: 0 10px;background-color:#f7f7f7;">
  4 + <div class="tab_show">
  5 + <!-- 搜索 -->
  6 + <div class="formSearch">
  7 + <el-form :inline="true" :model="formInline" class="demo-form-inline">
  8 + <el-form-item label="商品名称">
  9 + <el-input v-model="formInline.search" placeholder="请输入商品名称" style="width:168px"/>
  10 + </el-form-item>
  11 + <el-form-item label="上架状态">
  12 + <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" style="width:168px">
  13 + <el-option label="全部" :value="null" />
  14 + <el-option label="上架" value="1" />
  15 + <el-option label="下架" value="0" />
  16 + </el-select>
  17 + </el-form-item>
  18 + <el-form-item label="官方分类">
  19 + <el-cascader
  20 + v-model="formInline.classifyId"
  21 + :options="categoryList"
  22 + clearable
  23 + :props="{
  24 + checkStrictly: true,
  25 + expandTrigger: 'hover',
  26 + label:'categoryName',
  27 + value:'id',
  28 + children:'childs'
  29 + }"
  30 + />
  31 + </el-form-item>
  32 +
  33 + </el-form>
  34 + <div style="width:20%">
  35 + <el-button @click="search" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
  36 + <el-button @click="clear" class="buttonHover"
  37 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
  38 +
  39 + </div>
  40 + </div>
  41 + <div style="margin-bottom:20px;">
  42 + <el-button @click="add" style="background-color: #3F9B6A;color: #fff;">新增商品</el-button>
  43 + <el-button @click="sends" style="background-color: #3F9B6A;color: #fff;">批量导入</el-button>
  44 + <el-button @click="productDataExport" style="background-color: #3F9B6A;color: #fff;">导出商品</el-button>
  45 + </div>
  46 + <!-- 表格 -->
  47 + <div class="tableBox">
  48 + <el-table
  49 + ref="multipleTable"
  50 + :data="tableData"
  51 +
  52 + tooltip-effect="dark"
  53 + @selection-change="handleSelectionChange"
  54 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
  55 + >
  56 + <!-- <el-table-column
  57 + type="selection"
  58 + v-if="teble_sel"
  59 + min-width="4%">
  60 + </el-table-column> -->
  61 + <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
  62 + <el-table-column label="商品主图" width="150" align="center">
  63 + <template slot-scope="scope">
  64 + <img height="80" width="80" :src="$baseURL+msgList(scope.row.productImage)" alt srcset>
  65 + </template>
  66 + </el-table-column>
  67 + <el-table-column prop="productName" label="商品名称" width="220" />
  68 + <el-table-column prop="section" label="售价区间" show-overflow-tooltip />
  69 + <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip />
  70 + <el-table-column prop="ifCredit" label="积分兑换" show-overflow-tooltip>
  71 + <template slot-scope="scope">
  72 + <span v-if="scope.row.ifCredit == 1">允许</span>
  73 + <span v-if="scope.row.ifCredit == 0">不允许</span>
  74 + </template>
  75 + </el-table-column>
  76 + <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
  77 + <el-table-column prop="volume" label="销量" show-overflow-tooltip />
  78 + <el-table-column prop="volume" label="上架状态" show-overflow-tooltip>
  79 + <template slot-scope="scope">
  80 + <span v-if="scope.row.shelveState==0">未上架</span>
  81 + <span v-if="scope.row.shelveState==1">已上架</span>
  82 + <span v-if="scope.row.shelveState==2">待审核</span>
  83 + <span v-if="scope.row.shelveState==3">审核失败</span>
  84 + </template>
  85 + </el-table-column>
  86 + <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
  87 + <el-table-column :formatter="row=>getBrandName(row)" label="品牌" show-overflow-tooltip />
  88 + <el-table-column prop="createTime" label="创建时间" width="180" />
  89 + <el-table-column label="操作" width="180" fixed="right">
  90 + <template slot-scope="scope">
  91 + <div class="btnList">
  92 + <div @click="edit(scope.row)" class="tableBtn greens" >编辑</div>
  93 + <div @click="down(scope.row)" v-if="scope.row.shelveState==0" class="tableBtn greens" >上架</div>
  94 + <div @click="down(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens" >下架</div>
  95 + <div @click="setVipPrice(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens" >设置会员价</div>
  96 + <div @click="del(scope.row)" v-if="scope.row.shelveState!=1" class="tableBtn greens" >删除</div>
  97 +
  98 + <!-- <el-button type="text" @click="edit(scope.row)">编辑</el-button>
  99 + <el-button v-if="scope.row.shelveState==0" type="text" @click="down(scope.row)">上架</el-button>
  100 + <el-button v-if="scope.row.shelveState==1" type="text" @click="down(scope.row)">下架</el-button>
  101 + <el-button v-if="scope.row.shelveState==1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button>
  102 + <el-button v-if="scope.row.shelveState!=1" type="text" @click="del(scope.row)">删除</el-button> -->
  103 + </div>
  104 + </template>
  105 + </el-table-column>
  106 + </el-table>
  107 + <div class="fenye">
  108 + <el-pagination
  109 + :current-page="formInline.page"
  110 + :page-sizes="[10, 20, 50, 100]"
  111 + :page-size="10"
  112 + background
  113 + layout="prev, pager, next,total"
  114 + :total="total"
  115 + @size-change="handleSizeChange"
  116 + @current-change="handleCurrentChange"
  117 + />
  118 + </div>
  119 +
  120 + </div>
  121 + </div>
  122 + <!-- 批量导入 -->
  123 + <el-dialog
  124 + title="批量导入商品"
  125 + :visible.sync="batchAdd"
  126 + :close-on-click-modal="false"
  127 + center
  128 + width="400px"
  129 + >
  130 + <div class="uploadDialog">
  131 + <el-upload
  132 + drag
  133 + :limit="1"
  134 + :auto-upload="false"
  135 + accept=".xlsx"
  136 + :headers="headers"
  137 + :action="UploadUrl"
  138 + :before-upload="beforeUploadFile"
  139 + :on-change="fileChange"
  140 + :on-remove="batchRemove"
  141 + :on-exceed="exceedFile"
  142 + :on-success="handleSuccess"
  143 + :on-error="handleError"
  144 + :file-list="batchFileList"
  145 + >
  146 + <i class="el-icon-upload" />
  147 + <div class="el-upload__text">
  148 + <em style="color:#3F9B6A;">点击上传</em>
  149 + </div>
  150 + <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10M</div>
  151 + <div slot="tip" class="el-upload__tip">
  152 + 上传前不知道excel模板的，请点击
  153 + <span class="clickMe" @click="poDownload">点我下载模板</span> 去下载
  154 + </div>
  155 + </el-upload>
  156 + <br>
  157 + <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
  158 + </div>
  159 + </el-dialog>
  160 + <!-- 设置会员价弹窗 -->
  161 + <el-dialog
  162 + title="设置会员价"
  163 + :visible.sync="vipPriceVisible"
  164 + width="50%"
  165 + class="vipDialog"
  166 + >
  167 + <el-form ref="form" label-width="80px">
  168 + <el-form-item label="优惠方式">
  169 + <el-radio-group v-model="mode" @change="modeChange">
  170 + <el-radio :label="1">折扣</el-radio>
  171 + <!-- <el-radio :label="2">指定价格</el-radio> -->
  172 + </el-radio-group>
  173 + </el-form-item>
  174 + <div class="priceTable">
  175 + <table>
  176 + <tr>
  177 + <th>规格</th>
  178 + <th>售价</th>
  179 + <th v-for="(item,index) in gradeList" :key="index">
  180 + {{ item }}
  181 + </th>
  182 + </tr>
  183 + <tr v-for="(item,index) in productData" :key="index">
  184 + <td>
  185 + {{ item.value }}
  186 + </td>
  187 + <td>
  188 + {{ item.price }}
  189 + </td>
  190 + <td v-for="(itemJ,indexJ) in item.memberPrices" :key="indexJ" class="td-input">
  191 + <el-input v-model="itemJ.price" oninput="value=value.replace(/([^\d|\.])/g, '')" /> {{ mode==1?'折':'元' }}
  192 + </td>
  193 + </tr>
  194 + </table>
  195 + </div>
  196 + <el-button style="background-color: #3F9B6A;color: #fff;" class="clearBtn" @click="clearProductMember">清除所有旧会员价</el-button>
  197 + </el-form>
  198 + <span slot="footer" class="dialog-footer">
  199 + <el-button @click="vipPriceVisible = false" class="buttonHover"
  200 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
  201 + <el-button type="primary" @click="vipPriceSubmit">确 定</el-button>
  202 + </span>
  203 + </el-dialog>
  204 + <!-- 新增/修改商品弹窗 -->
  205 + <el-dialog
  206 + :title="!commId ? '新增商品' : '编辑商品'"
  207 + :visible.sync="commidyVisible"
  208 + custom-class="bian_css" width="70%"
  209 + center
  210 + top="6vh"
  211 + :close-on-click-modal="false"
  212 + @before-close="closeModal"
  213 + @close="closeModal"
  214 + >
  215 + <CommAdd
  216 + ref="child"
  217 + :show-tinymce="showTinymce"
  218 + :product-id="commId"
  219 + @cancel="cancelForm"
  220 + />
  221 + </el-dialog>
  222 + </div>
  223 +</template>
  224 +
  225 +<script>
  226 +import CommAdd from '@/views/commodity/commoditySystem/addCommodity.vue'
  227 +import { getBtnList, getToken } from '@/utils/auth'
  228 +import { uploadUrl } from '@/utils/request'
  229 +import {
  230 + getClassifyGetAll,
  231 + getClassifyDelete,
  232 + getClassifyStart,
  233 + downloadTemplate,
  234 + importProduct,
  235 + getClassify,
  236 + getProductMembers,
  237 + setProductMember,
  238 + clearProductMember,
  239 + productExport,
  240 + getBrandList
  241 +} from '@/api/commodity'
  242 +export default {
  243 + components: {
  244 + CommAdd
  245 + },
  246 + data() {
  247 + // 这里存放数据
  248 + return {
  249 + showTinymce: false,
  250 + btnList: '',
  251 + activeName: 'first',
  252 + formInline: {
  253 + search: '', // 搜索字段
  254 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  255 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  256 + classifyId: '', // 最下级分类id
  257 + page: 1, // 当前页
  258 + pageSize: 10
  259 + },
  260 + batchAdd: false,
  261 + batchFileList: [],
  262 + total: 1,
  263 + tableData: [],
  264 + categoryList: [],
  265 + UploadUrl: uploadUrl,
  266 + headers: {
  267 + 'Authorization-business': getToken()
  268 + },
  269 + vipPriceVisible: false,
  270 + productId: 0,
  271 + mode: 1,
  272 + productData: [],
  273 + gradeList: [],
  274 + commidyVisible: false,
  275 + commId: 0,
  276 + brandList: [],
  277 + teble_sel:false,
  278 + canst:'' //组合商品ID
  279 + }
  280 + },
  281 + computed: {
  282 + getBrandName() {
  283 + return (row) => {
  284 + const find = this.brandList.find(item => item.id === row.brandId);
  285 + if (find) return find.brandName
  286 + return '-'
  287 + }
  288 + }
  289 + },
  290 + mounted() {
  291 + this.getBrandList()
  292 + this.getAll(this.formInline)
  293 + this.queryAllCategory()
  294 + this.btnList = getBtnList()
  295 + },
  296 + // 方法集合
  297 + methods: {
  298 + msgList(list){
  299 + if(list && list!=''){
  300 + let strin = list.split(',')
  301 + return strin[0]
  302 + }
  303 + },
  304 + async getBrandList() {
  305 + const { data } = await getBrandList()
  306 + this.brandList = data
  307 + },
  308 + cancelForm() {
  309 + this.commidyVisible = false
  310 + this.formInline = {
  311 + search: '',
  312 + shelveState: '',
  313 + stock: '',
  314 + classifyId: '',
  315 + page: 1,
  316 + pageSize: 10
  317 + }
  318 + this.getAll(this.formInline)
  319 + this.closeModal()
  320 + },
  321 + closeModal() {
  322 + this.showTinymce = false
  323 + this.$refs.child.last()
  324 + this.$refs.child.reset()
  325 + },
  326 + btnClick(id) {
  327 + if (id.permissionName === '批量导入') {
  328 + this.sends()
  329 + } else if (id.permissionName === '新增商品') {
  330 + this.add()
  331 + }
  332 + },
  333 + handleSizeChange(val) {
  334 + this.formInline.pageSize = val
  335 + this.getAll(this.formInline)
  336 + },
  337 + handleCurrentChange(val) {
  338 + this.formInline.page = val
  339 + this.getAll(this.formInline)
  340 + },
  341 + // 查询
  342 + search() {
  343 + this.total = 1
  344 + this.formInline.page = 1
  345 + this.getAll(this.formInline)
  346 + },
  347 + // 重置
  348 + clear() {
  349 + this.formInline = {
  350 + search: '', // 搜索字段
  351 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  352 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  353 + classifyId: '', // 最下级分类id
  354 + page: 1, // 当前页
  355 + pageSize: 10
  356 + }
  357 + },
  358 + // 新增商品
  359 + add() {
  360 + this.showTinymce = true
  361 + if (this.commId) {
  362 + this.$refs.child.reset()
  363 + }
  364 + this.commidyVisible = true
  365 + this.commId = 0
  366 + // this.$router.push({ name: 'addCommodity', params: { id: '1' }})
  367 + },
  368 + // 导出商品
  369 + async productDataExport() {
  370 + this.$message({
  371 + message: '数据导出中，请勿重复操作！',
  372 + type: 'success'
  373 + })
  374 + const res = await productExport(this.formInline)
  375 + if (!res) { return }
  376 + const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
  377 + const fileName = '商品数据明细表.xls'
  378 + if ('download' in document.createElement('a')) {
  379 + // 非IE下载
  380 + const elink = document.createElement('a')
  381 + elink.download = fileName
  382 + elink.href = URL.createObjectURL(blob)
  383 + elink.style.display = 'none'
  384 + document.body.appendChild(elink)
  385 + elink.click()
  386 + URL.revokeObjectURL(elink.href) // 释放URL 对象
  387 + document.body.removeChild(elink)
  388 + } else {
  389 + // IE10+下载
  390 + navigator.msSaveBlob(blob, fileName)
  391 + }
  392 + },
  393 + // 批量导入
  394 + sends() {
  395 + this.batchAdd = true
  396 + this.batchFileList = []
  397 + },
  398 + // 编辑商品
  399 + edit(row) {
  400 + this.showTinymce = true
  401 + this.commidyVisible = true
  402 + this.commId = row.productId
  403 + this.$nextTick(() => {
  404 + this.$refs.child?.details()
  405 + })
  406 + // this.$router.push({
  407 + // name: 'addCommodity',
  408 + // params: { productId: row.productId }
  409 + // })
  410 + // let res = await getClassifyGetById({ productId: row.productId });
  411 + // console.log(res);
  412 + },
  413 + // 设置会员价
  414 + setVipPrice(row) {
  415 + var _ = this
  416 + this.productId = row.productId
  417 + getProductMembers({ productId: row.productId }).then(res => {
  418 + console.log(res,'11231312312312')
  419 + if (res.code === '') {
  420 + _.productData = res.data
  421 + if (_.productData && _.productData.length > 0) {
  422 + _.gradeList = []
  423 + const _memberPrices = _.productData[0].memberPrices
  424 + _memberPrices.forEach(function(item, i) {
  425 + _.gradeList.push(item.memberLevelName)
  426 + })
  427 + _.mode = _.productData[0].mode ? _.productData[0].mode : 1
  428 + _.vipPriceVisible = true
  429 + }
  430 + }
  431 + })
  432 + },
  433 + // 设置会员价提交
  434 + vipPriceSubmit() {
  435 + for (let i = 0; i < this.productData.length; i++) {
  436 + this.productData[i].mode = this.mode
  437 + for (let j = 0; j < this.productData[i].memberPrices.length; j++) {
  438 + this.productData[i].memberPrices[j].mode = this.mode
  439 + var _price = this.productData[i].memberPrices[j].price
  440 + if (!_price) {
  441 + this.$message({
  442 + type: 'warning',
  443 + message: '会员价格不能为空！'
  444 + })
  445 + return false
  446 + } else if (this.productData[i].mode === 1) {
  447 + if (_price <= 0 || _price >= 10) {
  448 + this.$message({
  449 + type: 'warning',
  450 + message: '会员折数必须大于0小于10！'
  451 + })
  452 + return false
  453 + }
  454 + } else if (this.productData[i].mode === 2) {
  455 + if (_price > this.productData[i].price) {
  456 + this.$message({
  457 + type: 'warning',
  458 + message: '会员价格不能大于原价！'
  459 + })
  460 + return false
  461 + }
  462 + }
  463 + }
  464 + }
  465 + setProductMember({ productId: this.productId, members: this.productData }).then(res => {
  466 + if (res.code === '') {
  467 + this.$message({
  468 + type: 'success',
  469 + message: '设置成功!'
  470 + })
  471 + this.getAll(this.formInline)
  472 + this.vipPriceVisible = false
  473 + }
  474 + })
  475 + },
  476 + // 清空会员价
  477 + clearProductMember() {
  478 + console.log(this.productData, 'this.productData')
  479 + this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {
  480 + confirmButtonText: '确定',
  481 + cancelButtonText: '取消',
  482 + type: 'warning'
  483 + }).then(() => {
  484 + clearProductMember({ productId: this.productId }).then(res => {
  485 + if (res.code === '') {
  486 + this.productData.map(item => {
  487 + item.memberPrices.map(itemChild => {
  488 + itemChild.price = null
  489 + })
  490 + })
  491 + this.$message.success('清除成功')
  492 + // this.vipPriceVisible = false
  493 + }
  494 + })
  495 + })
  496 + },
  497 + // 删除商品
  498 + del(row) {
  499 + this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
  500 + confirmButtonText: '确定',
  501 + cancelButtonText: '取消',
  502 + type: 'warning'
  503 + })
  504 + .then(() => {
  505 + getClassifyDelete({ productId: row.productId }).then(res => {
  506 + if (res.code === '') {
  507 + this.$message({
  508 + type: 'success',
  509 + message: '删除成功!'
  510 + })
  511 + this.getAll(this.formInline)
  512 + }
  513 + })
  514 + })
  515 + .catch(() => {})
  516 + },
  517 + // 商品上下架
  518 + async down(row) {
  519 + console.log(row.shelveState)
  520 + if (row.shelveState) {
  521 + console.log(111)
  522 + const res = await getClassifyStart({
  523 + productId: row.productId,
  524 + shelveState: 0
  525 + })
  526 + if (res.code === '') {
  527 + this.$message({
  528 + type: 'success',
  529 + message: '下架成功!'
  530 + })
  531 + this.getAll(this.formInline)
  532 + }
  533 + } else {
  534 + const res = await getClassifyStart({
  535 + productId: row.productId,
  536 + shelveState: 1
  537 + })
  538 + if (res.code === '') {
  539 + this.$message({
  540 + type: 'success',
  541 + message: '上架成功!'
  542 + })
  543 + this.getAll(this.formInline)
  544 + }
  545 + }
  546 + },
  547 + // 初始化查询所有数据
  548 + async getAll(formInline) {
  549 + this.formInline.classifyId =
  550 + this.formInline.classifyId[2] ||
  551 + this.formInline.classifyId[1] ||
  552 + this.formInline.classifyId[0] ||
  553 + this.formInline.classifyId
  554 + const res = await getClassifyGetAll(formInline)
  555 + this.total = res.data.total
  556 + this.tableData = res.data.list
  557 + console.log(this.tableData)
  558 + },
  559 + // 初始化查询所有分类
  560 + async queryAllCategory() {
  561 + const res = await getClassify()
  562 + this.categoryList = res.data
  563 + this.handleRemoveEmptyChild(this.categoryList)
  564 + },
  565 + handleRemoveEmptyChild(arr) {
  566 + for (let i = 0; i < arr.length; i++) {
  567 + if (arr[i].childs && Array.isArray(arr[i].childs)) {
  568 + this.handleRemoveEmptyChild(arr[i].childs)
  569 + }
  570 + if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
  571 + delete arr[i].childs
  572 + }
  573 + }
  574 + },
  575 + // *********************导入部分
  576 + UploadUrls: function() {
  577 + // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
  578 + return ''
  579 + },
  580 + // 下载模板
  581 + poDownload() {
  582 + downloadTemplate().then(res => {
  583 + console.log(res, 1111)
  584 + // const content = res
  585 + const blob = new Blob([res])
  586 + const fileName = '批量导入商品模板.xlsx'
  587 + if ('download' in document.createElement('a')) {
  588 + // 非IE下载
  589 + const elink = document.createElement('a')
  590 + elink.download = fileName
  591 + elink.style.display = 'none'
  592 + elink.href = URL.createObjectURL(blob)
  593 + document.body.appendChild(elink)
  594 + elink.click()
  595 + URL.revokeObjectURL(elink.href) // 释放URL 对象
  596 + document.body.removeChild(elink)
  597 + } else {
  598 + // IE10+下载
  599 + navigator.msSaveBlob(blob, fileName)
  600 + }
  601 + })
  602 + },
  603 + // 导入
  604 + uploadFile() {
  605 + if (this.batchFileList.length === 0) {
  606 + this.$message.warning('请上传文件')
  607 + } else {
  608 + const formDate = new FormData()
  609 + formDate.append('file', this.batchFileList[0])
  610 + console.log(formDate.get('file'))
  611 + importProduct(formDate).then(res => {
  612 + console.log(res)
  613 + if (res.code === '') {
  614 + this.$message.success('导入成功')
  615 + this.batchAdd = false
  616 + this.batchFileList = []
  617 + this.getAll(this.formInline)
  618 + }
  619 + })
  620 + }
  621 + },
  622 + // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
  623 + beforeUploadFile(file) {
  624 + console.log('before upload')
  625 + console.log(file)
  626 + const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
  627 + const size = file.size / 1024 / 1024
  628 + if (extension !== 'xlsx') {
  629 + this.$message.warning('只能上传后缀是.xlsx的文件')
  630 + }
  631 + if (size > 10) {
  632 + this.$message.warning('文件大小不得超过10M')
  633 + }
  634 + },
  635 + // 文件状态改变时的钩子
  636 + fileChange(file, batchFileList) {
  637 + console.log(file.raw)
  638 + this.batchFileList.push(file.raw)
  639 + console.log(this.batchFileList)
  640 + },
  641 + batchRemove(file, batchFileList) {
  642 + this.batchFileList = []
  643 + },
  644 + // 文件超出个数限制时的钩子
  645 + exceedFile(files, batchFileList) {
  646 + this.$message.warning(`只能选择1个文件`)
  647 + },
  648 + // 文件上传成功时的钩子
  649 + handleSuccess(res, file, batchFileList) {
  650 + this.$message.success('文件上传成功')
  651 + },
  652 + // 文件上传失败时的钩子
  653 + handleError() {
  654 + this.$message.error('文件上传失败')
  655 + },
  656 + // 切换优惠方式清除内容
  657 + modeChange() {
  658 + this.productData.forEach(item => {
  659 + item.memberPrices.forEach(itemJ => {
  660 + itemJ.price = ''
  661 + })
  662 + })
  663 + },
  664 + handleSelectionChange(val) {
  665 + console.log(val)
  666 + let zuheId = ''
  667 + for(let i=0;i<val.length;i++){
  668 + zuheId += val[i].productId + ','
  669 + }
  670 + this.canst = zuheId
  671 + }
  672 + }
  673 +}
  674 +</script>
  675 +<style lang='scss' scoped>
  676 +//@import url(); 引入公共css类
  677 +@import url("../../../styles/elDialog.scss");
  678 +::v-deep .bian_css{
  679 + margin:auto;
  680 + max-height:840px;
  681 + overflow-y: auto;
  682 + .el-dialog__body {
  683 + padding: 0px;
  684 + background-color: #fff;
  685 + }
  686 + .el-dialog__header {
  687 + background-color: #fff;
  688 + padding:10px 20px 10px 20px;
  689 + border-bottom: 1px solid #EFEFEF;
  690 + }
  691 + .el-dialog__title {
  692 + font-size: 14px;
  693 + color: #000000e6;
  694 + }
  695 + .el-date-table td.available:hover{
  696 + background-color:#3F9B6A;
  697 + }
  698 + .el-date-table td.start-date span{
  699 + background-color:#3F9B6A;
  700 + }
  701 + }
  702 +.tab_show {
  703 + padding: 0 20px 20px 20px;
  704 + background-color:#fff;
  705 +}
  706 +.fenye {
  707 + margin-top: 20px;
  708 + display: flex;
  709 + justify-content: flex-end;
  710 + position: relative;
  711 +}
  712 + ::v-deep .el-pagination__total {
  713 + position: absolute;
  714 + left: 10px;
  715 + }
  716 + .formSearch {
  717 + display: flex;
  718 + width: 100%;
  719 + font-size: 14px;
  720 + justify-content: space-between;
  721 + }
  722 +
  723 +.uploadDialog{
  724 + // display: flex;
  725 + // flex-direction: column;
  726 + // justify-content: center;
  727 + >>>.el-upload__tip{
  728 + display: inline-block;
  729 + width: 360px;
  730 + margin: auto;
  731 + }
  732 +}
  733 +.vipDialog{
  734 + .priceTable{
  735 + table{
  736 + width: 100%;
  737 + text-align: center;
  738 + border-left: 1px solid #EBEEF5;
  739 + border-bottom: 1px solid #EBEEF5;
  740 + font-size: 14px;
  741 + color: #606266;
  742 + border-collapse: collapse;
  743 + tr{
  744 + border-top: 1px solid #EBEEF5;
  745 + th{
  746 + padding: 12px 0;
  747 + background: #F2F3F5;
  748 + color: #0009;
  749 + border-right: 1px solid #F2F3F5;
  750 + }
  751 + td{
  752 + padding: 12px 0;
  753 + border-right: 1px solid #EBEEF5;
  754 + &.td-input{
  755 + .el-input{
  756 + width: 80px;
  757 + margin-right: 0;
  758 + }
  759 + }
  760 + &:nth-child(1),&:nth-child(2){
  761 + width: 80px;
  762 + }
  763 + .el-input{
  764 + width: 100px;
  765 + margin-right: 10px;
  766 + }
  767 + }
  768 + }
  769 + }
  770 + }
  771 + .clearBtn{
  772 + margin-top: 20px;
  773 + }
  774 +}
  775 +
  776 +</style>
merchant-web-master/src/views/commodity/commoditySystem/index.vue
  View file @89bb9f2
1 <!-- --> 1 <!-- -->
2 <template> 2 <template>
3 <div style="padding: 0 10px;background-color:#f7f7f7;"> 3 <div style="padding: 0 10px;background-color:#f7f7f7;">
4 - <div class="tab_show"> 4 + <div class="tab_show" v-if ="ontype == '1'">
5 <!-- 搜索 --> 5 <!-- 搜索 -->
6 <div class="formSearch"> 6 <div class="formSearch">
7 <el-form :inline="true" :model="formInline" class="demo-form-inline"> 7 <el-form :inline="true" :model="formInline" class="demo-form-inline">
8 <el-form-item label="商品名称"> 8 <el-form-item label="商品名称">
9 - <el-input v-model="formInline.search" placeholder="请输入商品名称" style="width:168px"/> 9 + <el-input v-model="formInline.search" placeholder="请输入商品名称" style="width:168px" />
10 </el-form-item> 10 </el-form-item>
11 <el-form-item label="上架状态"> 11 <el-form-item label="上架状态">
12 <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" style="width:168px"> 12 <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" style="width:168px">
@@ -16,44 +16,33 @@ @@ -16,44 +16,33 @@
16 </el-select> 16 </el-select>
17 </el-form-item> 17 </el-form-item>
18 <el-form-item label="官方分类"> 18 <el-form-item label="官方分类">
19 - <el-cascader  
20 - v-model="formInline.classifyId"  
21 - :options="categoryList"  
22 - clearable  
23 - :props="{ 19 + <el-cascader v-model="formInline.classifyId" :options="categoryList" clearable :props="{
24 checkStrictly: true, 20 checkStrictly: true,
25 expandTrigger: 'hover', 21 expandTrigger: 'hover',
26 label:'categoryName', 22 label:'categoryName',
27 value:'id', 23 value:'id',
28 children:'childs' 24 children:'childs'
29 - }"  
30 - /> 25 + }" />
31 </el-form-item> 26 </el-form-item>
32 27
33 </el-form> 28 </el-form>
34 <div style="width:20%"> 29 <div style="width:20%">
35 - <el-button @click="search" style="background-color: #3F9B6A;color: #fff;">查询</el-button>  
36 - <el-button @click="clear" class="buttonHover"  
37 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button> 30 + <el-button @click="search" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
  31 + <el-button @click="clear" class="buttonHover"
  32 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
38 33
39 </div> 34 </div>
40 </div> 35 </div>
41 <div style="margin-bottom:20px;"> 36 <div style="margin-bottom:20px;">
42 - <el-button @click="add" style="background-color: #3F9B6A;color: #fff;">新增商品</el-button>  
43 - <el-button @click="sends" style="background-color: #3F9B6A;color: #fff;">批量导入</el-button>  
44 - <el-button @click="productDataExport" style="background-color: #3F9B6A;color: #fff;">导出商品</el-button> 37 + <el-button @click="add" style="background-color: #3F9B6A;color: #fff;">新增商品</el-button>
  38 + <el-button @click="sends" style="background-color: #3F9B6A;color: #fff;">批量导入</el-button>
  39 + <el-button @click="productDataExport" style="background-color: #3F9B6A;color: #fff;">导出商品</el-button>
45 </div> 40 </div>
46 <!-- 表格 --> 41 <!-- 表格 -->
47 <div class="tableBox"> 42 <div class="tableBox">
48 - <el-table  
49 - ref="multipleTable"  
50 - :data="tableData"  
51 -  
52 - tooltip-effect="dark"  
53 - @selection-change="handleSelectionChange"  
54 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"  
55 - >  
56 - <!-- <el-table-column 43 + <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
  44 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
  45 + <!-- <el-table-column
57 type="selection" 46 type="selection"
58 v-if="teble_sel" 47 v-if="teble_sel"
59 min-width="4%"> 48 min-width="4%">
@@ -89,13 +78,13 @@ @@ -89,13 +78,13 @@
89 <el-table-column label="操作" width="180" fixed="right"> 78 <el-table-column label="操作" width="180" fixed="right">
90 <template slot-scope="scope"> 79 <template slot-scope="scope">
91 <div class="btnList"> 80 <div class="btnList">
92 - <div @click="edit(scope.row)" class="tableBtn greens" >编辑</div>  
93 - <div @click="down(scope.row)" v-if="scope.row.shelveState==0" class="tableBtn greens" >上架</div>  
94 - <div @click="down(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens" >下架</div>  
95 - <div @click="setVipPrice(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens" >设置会员价</div>  
96 - <div @click="del(scope.row)" v-if="scope.row.shelveState!=1" class="tableBtn greens" >删除</div> 81 + <div @click="edit(scope.row)" class="tableBtn greens">编辑</div>
  82 + <div @click="down(scope.row)" v-if="scope.row.shelveState==0" class="tableBtn greens">上架</div>
  83 + <div @click="down(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens">下架</div>
  84 + <div @click="setVipPrice(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens">设置会员价</div>
  85 + <div @click="del(scope.row)" v-if="scope.row.shelveState!=1" class="tableBtn greens">删除</div>
97 86
98 - <!-- <el-button type="text" @click="edit(scope.row)">编辑</el-button> 87 + <!-- <el-button type="text" @click="edit(scope.row)">编辑</el-button>
99 <el-button v-if="scope.row.shelveState==0" type="text" @click="down(scope.row)">上架</el-button> 88 <el-button v-if="scope.row.shelveState==0" type="text" @click="down(scope.row)">上架</el-button>
100 <el-button v-if="scope.row.shelveState==1" type="text" @click="down(scope.row)">下架</el-button> 89 <el-button v-if="scope.row.shelveState==1" type="text" @click="down(scope.row)">下架</el-button>
101 <el-button v-if="scope.row.shelveState==1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button> 90 <el-button v-if="scope.row.shelveState==1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button>
@@ -105,44 +94,19 @@ @@ -105,44 +94,19 @@
105 </el-table-column> 94 </el-table-column>
106 </el-table> 95 </el-table>
107 <div class="fenye"> 96 <div class="fenye">
108 - <el-pagination  
109 - :current-page="formInline.page"  
110 - :page-sizes="[10, 20, 50, 100]"  
111 - :page-size="10"  
112 - background  
113 - layout="prev, pager, next,total"  
114 - :total="total"  
115 - @size-change="handleSizeChange"  
116 - @current-change="handleCurrentChange"  
117 - /> 97 + <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10" background
  98 + layout="prev, pager, next,total" :total="total" @size-change="handleSizeChange"
  99 + @current-change="handleCurrentChange" />
118 </div> 100 </div>
119 101
120 </div> 102 </div>
121 </div> 103 </div>
122 <!-- 批量导入 --> 104 <!-- 批量导入 -->
123 - <el-dialog  
124 - title="批量导入商品"  
125 - :visible.sync="batchAdd"  
126 - :close-on-click-modal="false"  
127 - center  
128 - width="400px"  
129 - > 105 + <el-dialog title="批量导入商品" :visible.sync="batchAdd" :close-on-click-modal="false" center width="400px">
130 <div class="uploadDialog"> 106 <div class="uploadDialog">
131 - <el-upload  
132 - drag  
133 - :limit="1"  
134 - :auto-upload="false"  
135 - accept=".xlsx"  
136 - :headers="headers"  
137 - :action="UploadUrl"  
138 - :before-upload="beforeUploadFile"  
139 - :on-change="fileChange"  
140 - :on-remove="batchRemove"  
141 - :on-exceed="exceedFile"  
142 - :on-success="handleSuccess"  
143 - :on-error="handleError"  
144 - :file-list="batchFileList"  
145 - > 107 + <el-upload drag :limit="1" :auto-upload="false" accept=".xlsx" :headers="headers" :action="UploadUrl"
  108 + :before-upload="beforeUploadFile" :on-change="fileChange" :on-remove="batchRemove" :on-exceed="exceedFile"
  109 + :on-success="handleSuccess" :on-error="handleError" :file-list="batchFileList">
146 <i class="el-icon-upload" /> 110 <i class="el-icon-upload" />
147 <div class="el-upload__text"> 111 <div class="el-upload__text">
148 <em style="color:#3F9B6A;">点击上传</em> 112 <em style="color:#3F9B6A;">点击上传</em>
@@ -158,12 +122,7 @@ @@ -158,12 +122,7 @@
158 </div> 122 </div>
159 </el-dialog> 123 </el-dialog>
160 <!-- 设置会员价弹窗 --> 124 <!-- 设置会员价弹窗 -->
161 - <el-dialog  
162 - title="设置会员价"  
163 - :visible.sync="vipPriceVisible"  
164 - width="50%"  
165 - class="vipDialog"  
166 - > 125 + <el-dialog title="设置会员价" :visible.sync="vipPriceVisible" width="50%" class="vipDialog">
167 <el-form ref="form" label-width="80px"> 126 <el-form ref="form" label-width="80px">
168 <el-form-item label="优惠方式"> 127 <el-form-item label="优惠方式">
169 <el-radio-group v-model="mode" @change="modeChange"> 128 <el-radio-group v-model="mode" @change="modeChange">
@@ -188,589 +147,625 @@ @@ -188,589 +147,625 @@
188 {{ item.price }} 147 {{ item.price }}
189 </td> 148 </td>
190 <td v-for="(itemJ,indexJ) in item.memberPrices" :key="indexJ" class="td-input"> 149 <td v-for="(itemJ,indexJ) in item.memberPrices" :key="indexJ" class="td-input">
191 - <el-input v-model="itemJ.price" oninput="value=value.replace(/([^\d|\.])/g, '')" /> {{ mode==1?'折':'元' }} 150 + <el-input v-model="itemJ.price" oninput="value=value.replace(/([^\d|\.])/g, '')" />
  151 + {{ mode==1?'折':'元' }}
192 </td> 152 </td>
193 </tr> 153 </tr>
194 </table> 154 </table>
195 </div> 155 </div>
196 - <el-button style="background-color: #3F9B6A;color: #fff;" class="clearBtn" @click="clearProductMember">清除所有旧会员价</el-button> 156 + <el-button style="background-color: #3F9B6A;color: #fff;" class="clearBtn"
  157 + @click="clearProductMember">清除所有旧会员价</el-button>
197 </el-form> 158 </el-form>
198 <span slot="footer" class="dialog-footer"> 159 <span slot="footer" class="dialog-footer">
199 <el-button @click="vipPriceVisible = false" class="buttonHover" 160 <el-button @click="vipPriceVisible = false" class="buttonHover"
200 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button> 161 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
201 <el-button type="primary" @click="vipPriceSubmit">确 定</el-button> 162 <el-button type="primary" @click="vipPriceSubmit">确 定</el-button>
202 </span> 163 </span>
203 </el-dialog> 164 </el-dialog>
204 <!-- 新增/修改商品弹窗 --> 165 <!-- 新增/修改商品弹窗 -->
205 - <el-dialog  
206 - :title="!commId ? '新增商品' : '编辑商品'"  
207 - :visible.sync="commidyVisible"  
208 - custom-class="bian_css" width="70%"  
209 - center  
210 - top="6vh"  
211 - :close-on-click-modal="false"  
212 - @before-close="closeModal"  
213 - @close="closeModal"  
214 - >  
215 - <CommAdd  
216 - ref="child"  
217 - :show-tinymce="showTinymce"  
218 - :product-id="commId"  
219 - @cancel="cancelForm"  
220 - />  
221 - </el-dialog> 166 + <!-- <el-dialog :title="!commId ? '新增商品' : '编辑商品'" :visible.sync="commidyVisible" custom-class="bian_css" width="70%"
  167 + center top="6vh" :close-on-click-modal="false" @before-close="closeModal" @close="closeModal">
  168 + <CommAdd ref="child" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm" />
  169 + </el-dialog> -->
  170 + <div v-if ="ontype == '2'" class="tab_show">
  171 +
  172 + <CommAdd v-if ="ontype == '2'" ref="child" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm" />
  173 + </div>
222 </div> 174 </div>
223 </template> 175 </template>
224 176
225 <script> 177 <script>
226 -import CommAdd from '@/views/commodity/commoditySystem/addCommodity.vue'  
227 -import { getBtnList, getToken } from '@/utils/auth'  
228 -import { uploadUrl } from '@/utils/request'  
229 -import {  
230 - getClassifyGetAll,  
231 - getClassifyDelete,  
232 - getClassifyStart,  
233 - downloadTemplate,  
234 - importProduct,  
235 - getClassify,  
236 - getProductMembers,  
237 - setProductMember,  
238 - clearProductMember,  
239 - productExport,  
240 - getBrandList  
241 -} from '@/api/commodity'  
242 -export default {  
243 - components: {  
244 - CommAdd  
245 - },  
246 - data() {  
247 - // 这里存放数据  
248 - return {  
249 - showTinymce: false,  
250 - btnList: '',  
251 - activeName: 'first',  
252 - formInline: {  
253 - search: '', // 搜索字段  
254 - shelveState: '', // 上架状态 1-上架 0-不上架 null-全部  
255 - stock: '', // 库存状态 1-有库存 0-无库存 null-全部  
256 - classifyId: '', // 最下级分类id  
257 - page: 1, // 当前页  
258 - pageSize: 10  
259 - },  
260 - batchAdd: false,  
261 - batchFileList: [],  
262 - total: 1,  
263 - tableData: [],  
264 - categoryList: [],  
265 - UploadUrl: uploadUrl,  
266 - headers: {  
267 - 'Authorization-business': getToken()  
268 - },  
269 - vipPriceVisible: false,  
270 - productId: 0,  
271 - mode: 1,  
272 - productData: [],  
273 - gradeList: [],  
274 - commidyVisible: false,  
275 - commId: 0,  
276 - brandList: [],  
277 - teble_sel:false,  
278 - canst:'' //组合商品ID  
279 - }  
280 - },  
281 - computed: {  
282 - getBrandName() {  
283 - return (row) => {  
284 - const find = this.brandList.find(item => item.id === row.brandId);  
285 - if (find) return find.brandName  
286 - return '-'  
287 - }  
288 - }  
289 - },  
290 - mounted() {  
291 - this.getBrandList()  
292 - this.getAll(this.formInline)  
293 - this.queryAllCategory()  
294 - this.btnList = getBtnList()  
295 - },  
296 - // 方法集合  
297 - methods: {  
298 - msgList(list){  
299 - if(list && list!=''){  
300 - let strin = list.split(',')  
301 - return strin[0]  
302 - } 178 + import CommAdd from '@/views/commodity/commoditySystem/addCommodity.vue'
  179 + import {
  180 + getBtnList,
  181 + getToken
  182 + } from '@/utils/auth'
  183 + import {
  184 + uploadUrl
  185 + } from '@/utils/request'
  186 + import {
  187 + getClassifyGetAll,
  188 + getClassifyDelete,
  189 + getClassifyStart,
  190 + downloadTemplate,
  191 + importProduct,
  192 + getClassify,
  193 + getProductMembers,
  194 + setProductMember,
  195 + clearProductMember,
  196 + productExport,
  197 + getBrandList
  198 + } from '@/api/commodity'
  199 + export default {
  200 + components: {
  201 + CommAdd
303 }, 202 },
304 - async getBrandList() {  
305 - const { data } = await getBrandList()  
306 - this.brandList = data  
307 - },  
308 - cancelForm() {  
309 - this.commidyVisible = false  
310 - this.formInline = {  
311 - search: '',  
312 - shelveState: '',  
313 - stock: '',  
314 - classifyId: '',  
315 - page: 1,  
316 - pageSize: 10 203 + data() {
  204 + // 这里存放数据
  205 + return {
  206 + ontype:'1',
  207 + showTinymce: false,
  208 + btnList: '',
  209 + activeName: 'first',
  210 + formInline: {
  211 + search: '', // 搜索字段
  212 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  213 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  214 + classifyId: '', // 最下级分类id
  215 + page: 1, // 当前页
  216 + pageSize: 10
  217 + },
  218 + batchAdd: false,
  219 + batchFileList: [],
  220 + total: 1,
  221 + tableData: [],
  222 + categoryList: [],
  223 + UploadUrl: uploadUrl,
  224 + headers: {
  225 + 'Authorization-business': getToken()
  226 + },
  227 + vipPriceVisible: false,
  228 + productId: 0,
  229 + mode: 1,
  230 + productData: [],
  231 + gradeList: [],
  232 + commidyVisible: false,
  233 + commId: 0,
  234 + brandList: [],
  235 + teble_sel: false,
  236 + canst: '' //组合商品ID
317 } 237 }
318 - this.getAll(this.formInline)  
319 - this.closeModal()  
320 }, 238 },
321 - closeModal() {  
322 - this.showTinymce = false  
323 - this.$refs.child.last()  
324 - this.$refs.child.reset()  
325 - },  
326 - btnClick(id) {  
327 - if (id.permissionName === '批量导入') {  
328 - this.sends()  
329 - } else if (id.permissionName === '新增商品') {  
330 - this.add() 239 + computed: {
  240 + getBrandName() {
  241 + return (row) => {
  242 + const find = this.brandList.find(item => item.id === row.brandId);
  243 + if (find) return find.brandName
  244 + return '-'
  245 + }
331 } 246 }
332 }, 247 },
333 - handleSizeChange(val) {  
334 - this.formInline.pageSize = val 248 + mounted() {
  249 + this.getBrandList()
335 this.getAll(this.formInline) 250 this.getAll(this.formInline)
  251 + this.queryAllCategory()
  252 + this.btnList = getBtnList()
336 }, 253 },
337 - handleCurrentChange(val) {  
338 - this.formInline.page = val  
339 - this.getAll(this.formInline)  
340 - },  
341 - // 查询  
342 - search() {  
343 - this.total = 1  
344 - this.formInline.page = 1  
345 - this.getAll(this.formInline)  
346 - },  
347 - // 重置  
348 - clear() {  
349 - this.formInline = {  
350 - search: '', // 搜索字段  
351 - shelveState: '', // 上架状态 1-上架 0-不上架 null-全部  
352 - stock: '', // 库存状态 1-有库存 0-无库存 null-全部  
353 - classifyId: '', // 最下级分类id  
354 - page: 1, // 当前页  
355 - pageSize: 10  
356 - }  
357 - },  
358 - // 新增商品  
359 - add() {  
360 - this.showTinymce = true  
361 - if (this.commId) { 254 + // 方法集合
  255 + methods: {
  256 + msgList(list) {
  257 + if (list && list != '') {
  258 + let strin = list.split(',')
  259 + return strin[0]
  260 + }
  261 + },
  262 + async getBrandList() {
  263 + const {
  264 + data
  265 + } = await getBrandList()
  266 + this.brandList = data
  267 + },
  268 + cancelForm() {
  269 + this.commidyVisible = false
  270 + this.ontype = '1'
  271 + this.formInline = {
  272 + search: '',
  273 + shelveState: '',
  274 + stock: '',
  275 + classifyId: '',
  276 + page: 1,
  277 + pageSize: 10
  278 + }
  279 + this.getAll(this.formInline)
  280 + this.closeModal()
  281 + },
  282 + closeModal() {
  283 + this.showTinymce = false
  284 + this.$refs.child.last()
362 this.$refs.child.reset() 285 this.$refs.child.reset()
363 - }  
364 - this.commidyVisible = true  
365 - this.commId = 0  
366 - // this.$router.push({ name: 'addCommodity', params: { id: '1' }})  
367 - },  
368 - // 导出商品  
369 - async productDataExport() {  
370 - this.$message({  
371 - message: '数据导出中，请勿重复操作！',  
372 - type: 'success'  
373 - })  
374 - const res = await productExport(this.formInline)  
375 - if (!res) { return }  
376 - const blob = new Blob([res], { type: 'application/vnd.ms-excel' })  
377 - const fileName = '商品数据明细表.xls'  
378 - if ('download' in document.createElement('a')) {  
379 - // 非IE下载  
380 - const elink = document.createElement('a')  
381 - elink.download = fileName  
382 - elink.href = URL.createObjectURL(blob)  
383 - elink.style.display = 'none'  
384 - document.body.appendChild(elink)  
385 - elink.click()  
386 - URL.revokeObjectURL(elink.href) // 释放URL 对象  
387 - document.body.removeChild(elink)  
388 - } else {  
389 - // IE10+下载  
390 - navigator.msSaveBlob(blob, fileName)  
391 - }  
392 - },  
393 - // 批量导入  
394 - sends() {  
395 - this.batchAdd = true  
396 - this.batchFileList = []  
397 - },  
398 - // 编辑商品  
399 - edit(row) {  
400 - this.showTinymce = true  
401 - this.commidyVisible = true  
402 - this.commId = row.productId  
403 - this.$nextTick(() => {  
404 - this.$refs.child?.details()  
405 - })  
406 - // this.$router.push({  
407 - // name: 'addCommodity',  
408 - // params: { productId: row.productId }  
409 - // })  
410 - // let res = await getClassifyGetById({ productId: row.productId });  
411 - // console.log(res);  
412 - },  
413 - // 设置会员价  
414 - setVipPrice(row) {  
415 - var _ = this  
416 - this.productId = row.productId  
417 - getProductMembers({ productId: row.productId }).then(res => {  
418 - console.log(res,'11231312312312')  
419 - if (res.code === '') {  
420 - _.productData = res.data  
421 - if (_.productData && _.productData.length > 0) {  
422 - _.gradeList = []  
423 - const _memberPrices = _.productData[0].memberPrices  
424 - _memberPrices.forEach(function(item, i) {  
425 - _.gradeList.push(item.memberLevelName)  
426 - })  
427 - _.mode = _.productData[0].mode ? _.productData[0].mode : 1  
428 - _.vipPriceVisible = true  
429 - } 286 + },
  287 + btnClick(id) {
  288 + if (id.permissionName === '批量导入') {
  289 + this.sends()
  290 + } else if (id.permissionName === '新增商品') {
  291 + this.add()
430 } 292 }
431 - })  
432 - },  
433 - // 设置会员价提交  
434 - vipPriceSubmit() {  
435 - for (let i = 0; i < this.productData.length; i++) {  
436 - this.productData[i].mode = this.mode  
437 - for (let j = 0; j < this.productData[i].memberPrices.length; j++) {  
438 - this.productData[i].memberPrices[j].mode = this.mode  
439 - var _price = this.productData[i].memberPrices[j].price  
440 - if (!_price) {  
441 - this.$message({  
442 - type: 'warning',  
443 - message: '会员价格不能为空！'  
444 - })  
445 - return false  
446 - } else if (this.productData[i].mode === 1) {  
447 - if (_price <= 0 || _price >= 10) {  
448 - this.$message({  
449 - type: 'warning',  
450 - message: '会员折数必须大于0小于10！' 293 + },
  294 + handleSizeChange(val) {
  295 + this.formInline.pageSize = val
  296 + this.getAll(this.formInline)
  297 + },
  298 + handleCurrentChange(val) {
  299 + this.formInline.page = val
  300 + this.getAll(this.formInline)
  301 + },
  302 + // 查询
  303 + search() {
  304 + this.total = 1
  305 + this.formInline.page = 1
  306 + this.getAll(this.formInline)
  307 + },
  308 + // 重置
  309 + clear() {
  310 + this.formInline = {
  311 + search: '', // 搜索字段
  312 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  313 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  314 + classifyId: '', // 最下级分类id
  315 + page: 1, // 当前页
  316 + pageSize: 10
  317 + }
  318 + },
  319 + // 新增商品
  320 + add() {
  321 + this.showTinymce = true
  322 + // if (this.commId) {
  323 + // this.$refs.child.reset()
  324 + // }
  325 + this.commidyVisible = true
  326 + this.commId = null
  327 + this.ontype = '2'
  328 + // this.$router.push({ name: 'addCommodity', params: { id: '1' }})
  329 + },
  330 + // 导出商品
  331 + async productDataExport() {
  332 + this.$message({
  333 + message: '数据导出中，请勿重复操作！',
  334 + type: 'success'
  335 + })
  336 + const res = await productExport(this.formInline)
  337 + if (!res) {
  338 + return
  339 + }
  340 + const blob = new Blob([res], {
  341 + type: 'application/vnd.ms-excel'
  342 + })
  343 + const fileName = '商品数据明细表.xls'
  344 + if ('download' in document.createElement('a')) {
  345 + // 非IE下载
  346 + const elink = document.createElement('a')
  347 + elink.download = fileName
  348 + elink.href = URL.createObjectURL(blob)
  349 + elink.style.display = 'none'
  350 + document.body.appendChild(elink)
  351 + elink.click()
  352 + URL.revokeObjectURL(elink.href) // 释放URL 对象
  353 + document.body.removeChild(elink)
  354 + } else {
  355 + // IE10+下载
  356 + navigator.msSaveBlob(blob, fileName)
  357 + }
  358 + },
  359 + // 批量导入
  360 + sends() {
  361 + this.batchAdd = true
  362 + this.batchFileList = []
  363 + },
  364 + // 编辑商品
  365 + edit(row) {
  366 + this.showTinymce = true
  367 + this.commidyVisible = true
  368 + this.ontype = '2'
  369 + this.commId = row.productId
  370 + this.$nextTick(() => {
  371 + this.$refs.child?.details()
  372 + })
  373 + // this.$router.push({
  374 + // name: 'addCommodity',
  375 + // params: { productId: row.productId }
  376 + // })
  377 + // let res = await getClassifyGetById({ productId: row.productId });
  378 + // console.log(res);
  379 + },
  380 + // 设置会员价
  381 + setVipPrice(row) {
  382 + var _ = this
  383 + this.productId = row.productId
  384 + getProductMembers({
  385 + productId: row.productId
  386 + }).then(res => {
  387 + console.log(res, '11231312312312')
  388 + if (res.code === '') {
  389 + _.productData = res.data
  390 + if (_.productData && _.productData.length > 0) {
  391 + _.gradeList = []
  392 + const _memberPrices = _.productData[0].memberPrices
  393 + _memberPrices.forEach(function(item, i) {
  394 + _.gradeList.push(item.memberLevelName)
451 }) 395 })
452 - return false 396 + _.mode = _.productData[0].mode ? _.productData[0].mode : 1
  397 + _.vipPriceVisible = true
453 } 398 }
454 - } else if (this.productData[i].mode === 2) {  
455 - if (_price > this.productData[i].price) { 399 + }
  400 + })
  401 + },
  402 + // 设置会员价提交
  403 + vipPriceSubmit() {
  404 + for (let i = 0; i < this.productData.length; i++) {
  405 + this.productData[i].mode = this.mode
  406 + for (let j = 0; j < this.productData[i].memberPrices.length; j++) {
  407 + this.productData[i].memberPrices[j].mode = this.mode
  408 + var _price = this.productData[i].memberPrices[j].price
  409 + if (!_price) {
456 this.$message({ 410 this.$message({
457 type: 'warning', 411 type: 'warning',
458 - message: '会员价格不能大于原价！' 412 + message: '会员价格不能为空！'
459 }) 413 })
460 return false 414 return false
  415 + } else if (this.productData[i].mode === 1) {
  416 + if (_price <= 0 || _price >= 10) {
  417 + this.$message({
  418 + type: 'warning',
  419 + message: '会员折数必须大于0小于10！'
  420 + })
  421 + return false
  422 + }
  423 + } else if (this.productData[i].mode === 2) {
  424 + if (_price > this.productData[i].price) {
  425 + this.$message({
  426 + type: 'warning',
  427 + message: '会员价格不能大于原价！'
  428 + })
  429 + return false
  430 + }
461 } 431 }
462 } 432 }
463 } 433 }
464 - }  
465 - setProductMember({ productId: this.productId, members: this.productData }).then(res => {  
466 - if (res.code === '') {  
467 - this.$message({  
468 - type: 'success',  
469 - message: '设置成功!'  
470 - })  
471 - this.getAll(this.formInline)  
472 - this.vipPriceVisible = false  
473 - }  
474 - })  
475 - },  
476 - // 清空会员价  
477 - clearProductMember() {  
478 - console.log(this.productData, 'this.productData')  
479 - this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {  
480 - confirmButtonText: '确定',  
481 - cancelButtonText: '取消',  
482 - type: 'warning'  
483 - }).then(() => {  
484 - clearProductMember({ productId: this.productId }).then(res => { 434 + setProductMember({
  435 + productId: this.productId,
  436 + members: this.productData
  437 + }).then(res => {
485 if (res.code === '') { 438 if (res.code === '') {
486 - this.productData.map(item => {  
487 - item.memberPrices.map(itemChild => {  
488 - itemChild.price = null  
489 - }) 439 + this.$message({
  440 + type: 'success',
  441 + message: '设置成功!'
490 }) 442 })
491 - this.$message.success('清除成功')  
492 - // this.vipPriceVisible = false 443 + this.getAll(this.formInline)
  444 + this.vipPriceVisible = false
493 } 445 }
494 }) 446 })
495 - })  
496 - },  
497 - // 删除商品  
498 - del(row) {  
499 - this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {  
500 - confirmButtonText: '确定',  
501 - cancelButtonText: '取消',  
502 - type: 'warning'  
503 - })  
504 - .then(() => {  
505 - getClassifyDelete({ productId: row.productId }).then(res => { 447 + },
  448 + // 清空会员价
  449 + clearProductMember() {
  450 + console.log(this.productData, 'this.productData')
  451 + this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {
  452 + confirmButtonText: '确定',
  453 + cancelButtonText: '取消',
  454 + type: 'warning'
  455 + }).then(() => {
  456 + clearProductMember({
  457 + productId: this.productId
  458 + }).then(res => {
506 if (res.code === '') { 459 if (res.code === '') {
507 - this.$message({  
508 - type: 'success',  
509 - message: '删除成功!' 460 + this.productData.map(item => {
  461 + item.memberPrices.map(itemChild => {
  462 + itemChild.price = null
  463 + })
510 }) 464 })
511 - this.getAll(this.formInline) 465 + this.$message.success('清除成功')
  466 + // this.vipPriceVisible = false
512 } 467 }
513 }) 468 })
514 }) 469 })
515 - .catch(() => {})  
516 - },  
517 - // 商品上下架  
518 - async down(row) {  
519 - console.log(row.shelveState)  
520 - if (row.shelveState) {  
521 - console.log(111)  
522 - const res = await getClassifyStart({  
523 - productId: row.productId,  
524 - shelveState: 0  
525 - })  
526 - if (res.code === '') {  
527 - this.$message({  
528 - type: 'success',  
529 - message: '下架成功!' 470 + },
  471 + // 删除商品
  472 + del(row) {
  473 + this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
  474 + confirmButtonText: '确定',
  475 + cancelButtonText: '取消',
  476 + type: 'warning'
530 }) 477 })
531 - this.getAll(this.formInline)  
532 - }  
533 - } else {  
534 - const res = await getClassifyStart({  
535 - productId: row.productId,  
536 - shelveState: 1  
537 - })  
538 - if (res.code === '') {  
539 - this.$message({  
540 - type: 'success',  
541 - message: '上架成功!' 478 + .then(() => {
  479 + getClassifyDelete({
  480 + productId: row.productId
  481 + }).then(res => {
  482 + if (res.code === '') {
  483 + this.$message({
  484 + type: 'success',
  485 + message: '删除成功!'
  486 + })
  487 + this.getAll(this.formInline)
  488 + }
  489 + })
542 }) 490 })
543 - this.getAll(this.formInline)  
544 - }  
545 - }  
546 - },  
547 - // 初始化查询所有数据  
548 - async getAll(formInline) {  
549 - this.formInline.classifyId =  
550 - this.formInline.classifyId[2] ||  
551 - this.formInline.classifyId[1] ||  
552 - this.formInline.classifyId[0] ||  
553 - this.formInline.classifyId  
554 - const res = await getClassifyGetAll(formInline)  
555 - this.total = res.data.total  
556 - this.tableData = res.data.list  
557 - console.log(this.tableData)  
558 - },  
559 - // 初始化查询所有分类  
560 - async queryAllCategory() {  
561 - const res = await getClassify()  
562 - this.categoryList = res.data  
563 - this.handleRemoveEmptyChild(this.categoryList)  
564 - },  
565 - handleRemoveEmptyChild(arr) {  
566 - for (let i = 0; i < arr.length; i++) {  
567 - if (arr[i].childs && Array.isArray(arr[i].childs)) {  
568 - this.handleRemoveEmptyChild(arr[i].childs)  
569 - }  
570 - if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {  
571 - delete arr[i].childs  
572 - }  
573 - }  
574 - },  
575 - // *********************导入部分  
576 - UploadUrls: function() {  
577 - // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错  
578 - return ''  
579 - },  
580 - // 下载模板  
581 - poDownload() {  
582 - downloadTemplate().then(res => {  
583 - console.log(res, 1111)  
584 - // const content = res  
585 - const blob = new Blob([res])  
586 - const fileName = '批量导入商品模板.xlsx'  
587 - if ('download' in document.createElement('a')) {  
588 - // 非IE下载  
589 - const elink = document.createElement('a')  
590 - elink.download = fileName  
591 - elink.style.display = 'none'  
592 - elink.href = URL.createObjectURL(blob)  
593 - document.body.appendChild(elink)  
594 - elink.click()  
595 - URL.revokeObjectURL(elink.href) // 释放URL 对象  
596 - document.body.removeChild(elink) 491 + .catch(() => {})
  492 + },
  493 + // 商品上下架
  494 + async down(row) {
  495 + console.log(row.shelveState)
  496 + if (row.shelveState) {
  497 + console.log(111)
  498 + const res = await getClassifyStart({
  499 + productId: row.productId,
  500 + shelveState: 0
  501 + })
  502 + if (res.code === '') {
  503 + this.$message({
  504 + type: 'success',
  505 + message: '下架成功!'
  506 + })
  507 + this.getAll(this.formInline)
  508 + }
597 } else { 509 } else {
598 - // IE10+下载  
599 - navigator.msSaveBlob(blob, fileName)  
600 - }  
601 - })  
602 - },  
603 - // 导入  
604 - uploadFile() {  
605 - if (this.batchFileList.length === 0) {  
606 - this.$message.warning('请上传文件')  
607 - } else {  
608 - const formDate = new FormData()  
609 - formDate.append('file', this.batchFileList[0])  
610 - console.log(formDate.get('file'))  
611 - importProduct(formDate).then(res => {  
612 - console.log(res) 510 + const res = await getClassifyStart({
  511 + productId: row.productId,
  512 + shelveState: 1
  513 + })
613 if (res.code === '') { 514 if (res.code === '') {
614 - this.$message.success('导入成功')  
615 - this.batchAdd = false  
616 - this.batchFileList = [] 515 + this.$message({
  516 + type: 'success',
  517 + message: '上架成功!'
  518 + })
617 this.getAll(this.formInline) 519 this.getAll(this.formInline)
618 } 520 }
619 - })  
620 - }  
621 - },  
622 - // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传  
623 - beforeUploadFile(file) {  
624 - console.log('before upload')  
625 - console.log(file)  
626 - const extension = file.name.substring(file.name.lastIndexOf('.') + 1)  
627 - const size = file.size / 1024 / 1024  
628 - if (extension !== 'xlsx') {  
629 - this.$message.warning('只能上传后缀是.xlsx的文件')  
630 - }  
631 - if (size > 10) {  
632 - this.$message.warning('文件大小不得超过10M')  
633 - }  
634 - },  
635 - // 文件状态改变时的钩子  
636 - fileChange(file, batchFileList) {  
637 - console.log(file.raw)  
638 - this.batchFileList.push(file.raw)  
639 - console.log(this.batchFileList)  
640 - },  
641 - batchRemove(file, batchFileList) {  
642 - this.batchFileList = []  
643 - },  
644 - // 文件超出个数限制时的钩子  
645 - exceedFile(files, batchFileList) {  
646 - this.$message.warning(`只能选择1个文件`)  
647 - },  
648 - // 文件上传成功时的钩子  
649 - handleSuccess(res, file, batchFileList) {  
650 - this.$message.success('文件上传成功')  
651 - },  
652 - // 文件上传失败时的钩子  
653 - handleError() {  
654 - this.$message.error('文件上传失败')  
655 - },  
656 - // 切换优惠方式清除内容  
657 - modeChange() {  
658 - this.productData.forEach(item => {  
659 - item.memberPrices.forEach(itemJ => {  
660 - itemJ.price = ''  
661 - })  
662 - })  
663 - },  
664 - handleSelectionChange(val) {  
665 - console.log(val)  
666 - let zuheId = ''  
667 - for(let i=0;i<val.length;i++){  
668 - zuheId += val[i].productId + ','  
669 - }  
670 - this.canst = zuheId 521 + }
  522 + },
  523 + // 初始化查询所有数据
  524 + async getAll(formInline) {
  525 + this.formInline.classifyId =
  526 + this.formInline.classifyId[2] ||
  527 + this.formInline.classifyId[1] ||
  528 + this.formInline.classifyId[0] ||
  529 + this.formInline.classifyId
  530 + const res = await getClassifyGetAll(formInline)
  531 + this.total = res.data.total
  532 + this.tableData = res.data.list
  533 + console.log(this.tableData)
  534 + },
  535 + // 初始化查询所有分类
  536 + async queryAllCategory() {
  537 + const res = await getClassify()
  538 + this.categoryList = res.data
  539 + this.handleRemoveEmptyChild(this.categoryList)
  540 + },
  541 + handleRemoveEmptyChild(arr) {
  542 + for (let i = 0; i < arr.length; i++) {
  543 + if (arr[i].childs && Array.isArray(arr[i].childs)) {
  544 + this.handleRemoveEmptyChild(arr[i].childs)
  545 + }
  546 + if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
  547 + delete arr[i].childs
671 } 548 }
672 - }  
673 -}  
674 -</script>  
675 -<style lang='scss' scoped>  
676 -//@import url(); 引入公共css类  
677 -@import url("../../../styles/elDialog.scss");  
678 -::v-deep .bian_css{  
679 - margin:auto;  
680 - max-height:840px;  
681 - overflow-y: auto;  
682 - .el-dialog__body {  
683 - padding: 0px;  
684 - background-color: #fff;  
685 } 549 }
686 - .el-dialog__header {  
687 - background-color: #fff;  
688 - padding:10px 20px 10px 20px;  
689 - border-bottom: 1px solid #EFEFEF; 550 + },
  551 + // *********************导入部分
  552 + UploadUrls: function() {
  553 + // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
  554 + return ''
  555 + },
  556 + // 下载模板
  557 + poDownload() {
  558 + downloadTemplate().then(res => {
  559 + console.log(res, 1111)
  560 + // const content = res
  561 + const blob = new Blob([res])
  562 + const fileName = '批量导入商品模板.xlsx'
  563 + if ('download' in document.createElement('a')) {
  564 + // 非IE下载
  565 + const elink = document.createElement('a')
  566 + elink.download = fileName
  567 + elink.style.display = 'none'
  568 + elink.href = URL.createObjectURL(blob)
  569 + document.body.appendChild(elink)
  570 + elink.click()
  571 + URL.revokeObjectURL(elink.href) // 释放URL 对象
  572 + document.body.removeChild(elink)
  573 + } else {
  574 + // IE10+下载
  575 + navigator.msSaveBlob(blob, fileName)
  576 + }
  577 + })
  578 + },
  579 + // 导入
  580 + uploadFile() {
  581 + if (this.batchFileList.length === 0) {
  582 + this.$message.warning('请上传文件')
  583 + } else {
  584 + const formDate = new FormData()
  585 + formDate.append('file', this.batchFileList[0])
  586 + console.log(formDate.get('file'))
  587 + importProduct(formDate).then(res => {
  588 + console.log(res)
  589 + if (res.code === '') {
  590 + this.$message.success('导入成功')
  591 + this.batchAdd = false
  592 + this.batchFileList = []
  593 + this.getAll(this.formInline)
  594 + }
  595 + })
690 } 596 }
691 - .el-dialog__title {  
692 - font-size: 14px;  
693 - color: #000000e6; 597 + },
  598 + // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
  599 + beforeUploadFile(file) {
  600 + console.log('before upload')
  601 + console.log(file)
  602 + const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
  603 + const size = file.size / 1024 / 1024
  604 + if (extension !== 'xlsx') {
  605 + this.$message.warning('只能上传后缀是.xlsx的文件')
694 } 606 }
695 - .el-date-table td.available:hover{  
696 - background-color:#3F9B6A; 607 + if (size > 10) {
  608 + this.$message.warning('文件大小不得超过10M')
697 } 609 }
698 - .el-date-table td.start-date span{  
699 - background-color:#3F9B6A; 610 + },
  611 + // 文件状态改变时的钩子
  612 + fileChange(file, batchFileList) {
  613 + console.log(file.raw)
  614 + this.batchFileList.push(file.raw)
  615 + console.log(this.batchFileList)
  616 + },
  617 + batchRemove(file, batchFileList) {
  618 + this.batchFileList = []
  619 + },
  620 + // 文件超出个数限制时的钩子
  621 + exceedFile(files, batchFileList) {
  622 + this.$message.warning(`只能选择1个文件`)
  623 + },
  624 + // 文件上传成功时的钩子
  625 + handleSuccess(res, file, batchFileList) {
  626 + this.$message.success('文件上传成功')
  627 + },
  628 + // 文件上传失败时的钩子
  629 + handleError() {
  630 + this.$message.error('文件上传失败')
  631 + },
  632 + // 切换优惠方式清除内容
  633 + modeChange() {
  634 + this.productData.forEach(item => {
  635 + item.memberPrices.forEach(itemJ => {
  636 + itemJ.price = ''
  637 + })
  638 + })
  639 + },
  640 + handleSelectionChange(val) {
  641 + console.log(val)
  642 + let zuheId = ''
  643 + for (let i = 0; i < val.length; i++) {
  644 + zuheId += val[i].productId + ','
700 } 645 }
  646 + this.canst = zuheId
701 } 647 }
702 -.tab_show {  
703 - padding: 0 20px 20px 20px;  
704 - background-color:#fff;  
705 -}  
706 -.fenye {  
707 - margin-top: 20px;  
708 - display: flex;  
709 - justify-content: flex-end;  
710 - position: relative;  
711 -} 648 + }
  649 + }
  650 +</script>
  651 +<style lang='scss' scoped>
  652 + //@import url(); 引入公共css类
  653 + @import url("../../../styles/elDialog.scss");
  654 +
  655 + ::v-deep .bian_css {
  656 + margin: auto;
  657 + max-height: 840px;
  658 + overflow-y: auto;
  659 +
  660 + .el-dialog__body {
  661 + padding: 0px;
  662 + background-color: #fff;
  663 + }
  664 +
  665 + .el-dialog__header {
  666 + background-color: #fff;
  667 + padding: 10px 20px 10px 20px;
  668 + border-bottom: 1px solid #EFEFEF;
  669 + }
  670 +
  671 + .el-dialog__title {
  672 + font-size: 14px;
  673 + color: #000000e6;
  674 + }
  675 +
  676 + .el-date-table td.available:hover {
  677 + background-color: #3F9B6A;
  678 + }
  679 +
  680 + .el-date-table td.start-date span {
  681 + background-color: #3F9B6A;
  682 + }
  683 + }
  684 +
  685 + .tab_show {
  686 + padding: 0 20px 20px 20px;
  687 + background-color: #fff;
  688 + }
  689 +
  690 + .fenye {
  691 + margin-top: 20px;
  692 + display: flex;
  693 + justify-content: flex-end;
  694 + position: relative;
  695 + }
  696 +
712 ::v-deep .el-pagination__total { 697 ::v-deep .el-pagination__total {
713 position: absolute; 698 position: absolute;
714 left: 10px; 699 left: 10px;
715 } 700 }
  701 +
716 .formSearch { 702 .formSearch {
717 - display: flex;  
718 - width: 100%;  
719 - font-size: 14px;  
720 - justify-content: space-between;  
721 - } 703 + display: flex;
  704 + width: 100%;
  705 + font-size: 14px;
  706 + justify-content: space-between;
  707 + }
722 708
723 -.uploadDialog{  
724 - // display: flex;  
725 - // flex-direction: column;  
726 - // justify-content: center;  
727 - >>>.el-upload__tip{  
728 - display: inline-block;  
729 - width: 360px;  
730 - margin: auto; 709 + .uploadDialog {
  710 +
  711 + // display: flex;
  712 + // flex-direction: column;
  713 + // justify-content: center;
  714 + >>>.el-upload__tip {
  715 + display: inline-block;
  716 + width: 360px;
  717 + margin: auto;
  718 + }
731 } 719 }
732 -}  
733 -.vipDialog{  
734 - .priceTable{  
735 - table{  
736 - width: 100%;  
737 - text-align: center;  
738 - border-left: 1px solid #EBEEF5;  
739 - border-bottom: 1px solid #EBEEF5;  
740 - font-size: 14px;  
741 - color: #606266;  
742 - border-collapse: collapse;  
743 - tr{  
744 - border-top: 1px solid #EBEEF5;  
745 - th{  
746 - padding: 12px 0;  
747 - background: #F2F3F5;  
748 - color: #0009;  
749 - border-right: 1px solid #F2F3F5;  
750 - }  
751 - td{  
752 - padding: 12px 0;  
753 - border-right: 1px solid #EBEEF5;  
754 - &.td-input{  
755 - .el-input{ 720 +
  721 + .vipDialog {
  722 + .priceTable {
  723 + table {
  724 + width: 100%;
  725 + text-align: center;
  726 + border-left: 1px solid #EBEEF5;
  727 + border-bottom: 1px solid #EBEEF5;
  728 + font-size: 14px;
  729 + color: #606266;
  730 + border-collapse: collapse;
  731 +
  732 + tr {
  733 + border-top: 1px solid #EBEEF5;
  734 +
  735 + th {
  736 + padding: 12px 0;
  737 + background: #F2F3F5;
  738 + color: #0009;
  739 + border-right: 1px solid #F2F3F5;
  740 + }
  741 +
  742 + td {
  743 + padding: 12px 0;
  744 + border-right: 1px solid #EBEEF5;
  745 +
  746 + &.td-input {
  747 + .el-input {
  748 + width: 80px;
  749 + margin-right: 0;
  750 + }
  751 + }
  752 +
  753 + &:nth-child(1),
  754 + &:nth-child(2) {
756 width: 80px; 755 width: 80px;
757 - margin-right: 0;  
758 } 756 }
759 - }  
760 - &:nth-child(1),&:nth-child(2){  
761 - width: 80px;  
762 - }  
763 - .el-input{  
764 - width: 100px;  
765 - margin-right: 10px; 757 +
  758 + .el-input {
  759 + width: 100px;
  760 + margin-right: 10px;
  761 + }
766 } 762 }
767 } 763 }
768 } 764 }
769 } 765 }
770 - }  
771 - .clearBtn{  
772 - margin-top: 20px;  
773 - }  
774 -}  
775 766
  767 + .clearBtn {
  768 + margin-top: 20px;
  769 + }
  770 + }
776 </style> 771 </style>
merchant-web-master/src/views/order/pending/index.vue
  View file @89bb9f2
@@ -64,10 +64,18 @@ @@ -64,10 +64,18 @@
64 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}" 64 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
65 tooltip-effect="dark" 65 tooltip-effect="dark"
66 > 66 >
67 - <el-table-column label="订单id" width="220"> 67 + <el-table-column label="订单id" width="80">
68 <template slot-scope="scope">{{ scope.row.orderId }}</template> 68 <template slot-scope="scope">{{ scope.row.orderId }}</template>
69 </el-table-column> 69 </el-table-column>
70 - <el-table-column prop="price" label="支付金额（元）" width="220" /> 70 + <el-table-column label="商品名称" width="250" show-overflow-tooltip>
  71 + <template slot-scope="scope" v-if="scope.row.products &&scope.row.products.length > 0">
  72 + <span v-for="(item,index) in scope.row.products" :key="index">{{ item.productName || '暂无'}}</span>
  73 + </template>
  74 + <template slot-scope="scope" v-else>
  75 + 暂无
  76 + </template>
  77 + </el-table-column>
  78 + <el-table-column prop="price" label="支付金额（元）"/>
71 <el-table-column prop="number" label="商品数量（件）" show-overflow-tooltip /> 79 <el-table-column prop="number" label="商品数量（件）" show-overflow-tooltip />
72 <el-table-column label="订单状态" show-overflow-tooltip> 80 <el-table-column label="订单状态" show-overflow-tooltip>
73 <template slot-scope="scope"> 81 <template slot-scope="scope">
merchant-web-master/src/views/salesSta/dataSta.vue
  View file @89bb9f2
@@ -3,81 +3,80 @@ @@ -3,81 +3,80 @@
3 <div class="pending"> 3 <div class="pending">
4 <div class="tab_show"> 4 <div class="tab_show">
5 <div style="display: flex;margin: 15px 0;"> 5 <div style="display: flex;margin: 15px 0;">
6 - <el-form ref="formParams" :inline="true" :model="formParams">  
7 - <el-form-item label="日期">  
8 - <el-date-picker v-model="formParams.tongjiTime" type="daterange" range-separator="至"  
9 - start-placeholder="开始时间" end-placeholder="结束时间" />  
10 - </el-form-item>  
11 -  
12 - <el-form-item label-width="0">  
13 - <el-button plain @click="search(1)"  
14 - style="background-color: #3F9B6A;color: #fff;">查询</el-button>  
15 - <el-button plain @click="clear(1)"  
16 - class="buttonHover"  
17 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>  
18 - </el-form-item>  
19 - </el-form> 6 + <el-form ref="formParams" :inline="true" :model="formParams">
  7 + <el-form-item label="日期">
  8 + <el-date-picker v-model="formParams.tongjiTime" type="daterange" range-separator="至"
  9 + start-placeholder="开始时间" end-placeholder="结束时间" />
  10 + </el-form-item>
  11 +
  12 + <el-form-item label-width="0">
  13 + <el-button plain @click="search(1)" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
  14 + <el-button plain @click="clear(1)" class="buttonHover"
  15 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
  16 + </el-form-item>
  17 + </el-form>
20 </div> 18 </div>
21 <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;"> 19 <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;">
22 - <div class="titleTj">  
23 - 销售额统计  
24 - </div> 20 + <div class="titleTj">
  21 + 销售额统计
  22 + </div>
25 23
26 - <div class="">  
27 - <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle" :contentStyle="contentStyle">  
28 - <el-descriptions-item>  
29 - <template slot="label"> 24 + <div class="">
  25 + <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle"
  26 + :contentStyle="contentStyle">
  27 + <el-descriptions-item>
  28 + <template slot="label">
30 29
31 - 销售总额  
32 - </template>  
33 - ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}  
34 - </el-descriptions-item>  
35 - <el-descriptions-item>  
36 - <template slot="label"> 30 + 销售总额
  31 + </template>
  32 + ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}
  33 + </el-descriptions-item>
  34 + <el-descriptions-item>
  35 + <template slot="label">
37 36
38 - 有效订单数  
39 - </template>  
40 - {{tongji.validOrders}}  
41 - </el-descriptions-item> 37 + 有效订单数
  38 + </template>
  39 + {{tongji.validOrders}}
  40 + </el-descriptions-item>
42 41
43 - <el-descriptions-item>  
44 - <template slot="label">  
45 - 有效订单总额  
46 - </template>  
47 - ￥{{tongji.transactionsCompleted}}  
48 - </el-descriptions-item>  
49 - <el-descriptions-item>  
50 - <template slot="label">  
51 - 无效订单总数（关闭或取消）  
52 - </template>  
53 - {{tongji.invalidOrder}}  
54 - </el-descriptions-item>  
55 - <el-descriptions-item>  
56 - <template slot="label">  
57 - 无效订单总额  
58 - </template>  
59 - ￥{{tongji.invalidOrderAmount}}  
60 - </el-descriptions-item>  
61 - <el-descriptions-item>  
62 - <template slot="label">  
63 - 已成交订单总数  
64 - </template>  
65 - {{tongji.alreadyTransacted}}  
66 - </el-descriptions-item>  
67 - <el-descriptions-item>  
68 - <template slot="label">  
69 - 已成交订单总额  
70 - </template>  
71 - ￥{{tongji.transactionsCompleted}}  
72 - </el-descriptions-item>  
73 - </el-descriptions>  
74 - </div> 42 + <el-descriptions-item>
  43 + <template slot="label">
  44 + 有效订单总额
  45 + </template>
  46 + ￥{{tongji.transactionsCompleted}}
  47 + </el-descriptions-item>
  48 + <el-descriptions-item>
  49 + <template slot="label">
  50 + 无效订单总数（关闭或取消）
  51 + </template>
  52 + {{tongji.invalidOrder}}
  53 + </el-descriptions-item>
  54 + <el-descriptions-item>
  55 + <template slot="label">
  56 + 无效订单总额
  57 + </template>
  58 + ￥{{tongji.invalidOrderAmount}}
  59 + </el-descriptions-item>
  60 + <el-descriptions-item>
  61 + <template slot="label">
  62 + 已成交订单总数
  63 + </template>
  64 + {{tongji.alreadyTransacted}}
  65 + </el-descriptions-item>
  66 + <el-descriptions-item>
  67 + <template slot="label">
  68 + 已成交订单总额
  69 + </template>
  70 + ￥{{tongji.transactionsCompleted}}
  71 + </el-descriptions-item>
  72 + </el-descriptions>
  73 + </div>
75 </div> 74 </div>
76 <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;"> 75 <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;">
77 - <div class="titleTj">  
78 - 销售毛利润/率统计  
79 - </div>  
80 - <!-- <div style="display: flex;margin: 15px 0;"> 76 + <div class="titleTj">
  77 + 销售毛利润/率统计
  78 + </div>
  79 + <!-- <div style="display: flex;margin: 15px 0;">
81 <el-form ref="formParams" :inline="true" :model="formParams"> 80 <el-form ref="formParams" :inline="true" :model="formParams">
82 <el-form-item label="日期"> 81 <el-form-item label="日期">
83 <el-date-picker v-model="formParams.maoliTime" type="daterange" range-separator="至" 82 <el-date-picker v-model="formParams.maoliTime" type="daterange" range-separator="至"
@@ -92,88 +91,89 @@ @@ -92,88 +91,89 @@
92 </el-form-item> 91 </el-form-item>
93 </el-form> 92 </el-form>
94 </div> --> 93 </div> -->
95 - <div class="">  
96 - <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle" :contentStyle="contentStyle">  
97 - <el-descriptions-item>  
98 - <template slot="label"> 94 + <div class="">
  95 + <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle"
  96 + :contentStyle="contentStyle">
  97 + <el-descriptions-item>
  98 + <template slot="label">
99 99
100 - 销售总额  
101 - </template>  
102 - ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}  
103 - </el-descriptions-item>  
104 - <el-descriptions-item>  
105 - <template slot="label"> 100 + 销售总额
  101 + </template>
  102 + ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}
  103 + </el-descriptions-item>
  104 + <el-descriptions-item>
  105 + <template slot="label">
106 106
107 - 订单毛利润（总）  
108 - </template>  
109 - ￥{{maoli.subtract}}  
110 - </el-descriptions-item> 107 + 订单毛利润（总）
  108 + </template>
  109 + ￥{{maoli.subtract}}
  110 + </el-descriptions-item>
111 111
112 - <el-descriptions-item>  
113 - <template slot="label">  
114 - 订单毛利率（总）  
115 - </template>  
116 - 毛利率：{{maoli.divide}}%  
117 - </el-descriptions-item>  
118 - <el-descriptions-item>  
119 - <template slot="label">  
120 - 有效订单总数  
121 - </template>  
122 - {{tongji.validOrders}}  
123 - </el-descriptions-item>  
124 - <el-descriptions-item>  
125 - <template slot="label">  
126 - 有效订单总额  
127 - </template>  
128 - ￥{{tongji.transactionsCompleted}}  
129 - </el-descriptions-item>  
130 - <el-descriptions-item>  
131 - <template slot="label">  
132 - 无效订单总数（关闭或取消）  
133 - </template>  
134 - {{tongji.invalidOrder}}  
135 - </el-descriptions-item>  
136 - <el-descriptions-item>  
137 - <template slot="label">  
138 - 无效订单总额  
139 - </template>  
140 - ￥{{tongji.invalidOrderAmount}}  
141 - </el-descriptions-item>  
142 - <el-descriptions-item>  
143 - <template slot="label">  
144 - 已成交订单总数  
145 - </template>  
146 - {{tongji.alreadyTransacted}}  
147 - </el-descriptions-item>  
148 - <el-descriptions-item>  
149 - <template slot="label">  
150 - 已成交订单总额  
151 - </template>  
152 - ￥{{tongji.transactionsCompleted}}  
153 - </el-descriptions-item>  
154 - <el-descriptions-item>  
155 - <template slot="label">  
156 - 毛利率排行  
157 - </template> 112 + <el-descriptions-item>
  113 + <template slot="label">
  114 + 订单毛利率（总）
  115 + </template>
  116 + 毛利率：{{maoli.divide}}%
  117 + </el-descriptions-item>
  118 + <el-descriptions-item>
  119 + <template slot="label">
  120 + 有效订单总数
  121 + </template>
  122 + {{tongji.validOrders}}
  123 + </el-descriptions-item>
  124 + <el-descriptions-item>
  125 + <template slot="label">
  126 + 有效订单总额
  127 + </template>
  128 + ￥{{tongji.transactionsCompleted}}
  129 + </el-descriptions-item>
  130 + <el-descriptions-item>
  131 + <template slot="label">
  132 + 无效订单总数（关闭或取消）
  133 + </template>
  134 + {{tongji.invalidOrder}}
  135 + </el-descriptions-item>
  136 + <el-descriptions-item>
  137 + <template slot="label">
  138 + 无效订单总额
  139 + </template>
  140 + ￥{{tongji.invalidOrderAmount}}
  141 + </el-descriptions-item>
  142 + <el-descriptions-item>
  143 + <template slot="label">
  144 + 已成交订单总数
  145 + </template>
  146 + {{tongji.alreadyTransacted}}
  147 + </el-descriptions-item>
  148 + <el-descriptions-item>
  149 + <template slot="label">
  150 + 已成交订单总额
  151 + </template>
  152 + ￥{{tongji.transactionsCompleted}}
  153 + </el-descriptions-item>
  154 + <el-descriptions-item>
  155 + <template slot="label">
  156 + 毛利率排行
  157 + </template>
158 158
159 - </el-descriptions-item>  
160 - <el-descriptions-item v-for="item in maoli.salesRanking" :key="item.id">  
161 - <template slot="label">  
162 - <span v-for="(value, key) in item" :key="key">{{ key }}</span>  
163 - </template>  
164 - <span v-for="(value, key) in item" :key="key">毛利率：{{ value }}%</span>  
165 - </el-descriptions-item>  
166 - <!-- <el-descriptions-item> 159 + </el-descriptions-item>
  160 + <el-descriptions-item v-for="item in maoli.salesRanking" :key="item.id">
  161 + <template slot="label">
  162 + <span v-for="(value, key) in item" :key="key">{{ key }}</span>
  163 + </template>
  164 + <span v-for="(value, key) in item" :key="key">毛利率：{{ value }}%</span>
  165 + </el-descriptions-item>
  166 + <!-- <el-descriptions-item>
167 <template slot="label"> 167 <template slot="label">
168 商品2 168 商品2
169 </template> 169 </template>
170 毛利率：21.01% 170 毛利率：21.01%
171 </el-descriptions-item> --> 171 </el-descriptions-item> -->
172 - </el-descriptions>  
173 - </div> 172 + </el-descriptions>
  173 + </div>
174 </div> 174 </div>
175 <!-- 搜索 --> 175 <!-- 搜索 -->
176 -<!-- <div class="filter-container"> 176 + <!-- <div class="filter-container">
177 <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px"> 177 <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
178 <div style="line-height:200%">筛选查询</div> 178 <div style="line-height:200%">筛选查询</div>
179 <div> 179 <div>
@@ -198,48 +198,41 @@ @@ -198,48 +198,41 @@
198 </div> --> 198 </div> -->
199 <!-- 表格 --> 199 <!-- 表格 -->
200 <div class="tableBox"> 200 <div class="tableBox">
201 - <el-table  
202 - :data="tableData"  
203 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"  
204 - >  
205 - <el-table-column prop="id" label="排名">  
206 - <template slot-scope="scope">  
207 - {{scope.$index + 1 }}  
208 - </template>  
209 - </el-table-column>  
210 - <el-table-column prop="shopnum" label="商品编号">  
211 - <template slot-scope="scope">  
212 - {{scope.row.products[0].productId}}  
213 - </template>  
214 - </el-table-column>  
215 - <el-table-column prop="shopname" label="商品名称" width="300">  
216 - <template slot-scope="scope">  
217 - {{scope.row.products[0].productName}}  
218 - </template>  
219 - </el-table-column>  
220 - <el-table-column prop="fl" label="商品分类">  
221 - <template slot-scope="scope">  
222 - {{scope.row.product.shopGroupName}}  
223 - </template>  
224 - </el-table-column>  
225 -  
226 - <el-table-column prop="createTime" label="商品创建时间">  
227 - <template slot-scope="scope">  
228 - {{scope.row.product.createTime}}  
229 - </template>  
230 - </el-table-column>  
231 - <el-table-column prop="bigDecimal" label="销售数量" />  
232 - <el-table-column prop="multiply" label="销售金额" :sortable="true" :sort-method="sortMethod"/>  
233 - </el-table> 201 + <el-table :data="tableData"
  202 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
  203 + <el-table-column prop="id" label="排名">
  204 + <template slot-scope="scope">
  205 + {{scope.$index + 1 }}
  206 + </template>
  207 + </el-table-column>
  208 + <el-table-column prop="shopnum" label="商品编号">
  209 + <template slot-scope="scope">
  210 + {{scope.row.products[0].productId}}
  211 + </template>
  212 + </el-table-column>
  213 + <el-table-column prop="shopname" label="商品名称" width="300">
  214 + <template slot-scope="scope">
  215 + {{scope.row.products[0].productName}}
  216 + </template>
  217 + </el-table-column>
  218 + <el-table-column prop="fl" label="商品分类">
  219 + <template slot-scope="scope">
  220 + {{scope.row.product.shopGroupName}}
  221 + </template>
  222 + </el-table-column>
  223 +
  224 + <el-table-column prop="createTime" label="商品创建时间">
  225 + <template slot-scope="scope">
  226 + {{scope.row.product.createTime}}
  227 + </template>
  228 + </el-table-column>
  229 + <el-table-column prop="bigDecimal" label="销售数量" />
  230 + <el-table-column prop="multiply" label="销售金额" :sortable="true" :sort-method="sortMethod" />
  231 + </el-table>
234 <div class="fenye"> 232 <div class="fenye">
235 <div>共{{ total }}条</div> 233 <div>共{{ total }}条</div>
236 - <el-pagination  
237 - :current-page="currentPage"  
238 - :page-size="10"  
239 - layout="prev, pager, next"  
240 - :total="total"  
241 - @current-change="handleCurrentChange"  
242 - /> 234 + <el-pagination :current-page="currentPage" :page-size="10" layout="prev, pager, next" :total="total"
  235 + @current-change="handleCurrentChange" />
243 </div> 236 </div>
244 </div> 237 </div>
245 </div> 238 </div>
@@ -248,201 +241,222 @@ @@ -248,201 +241,222 @@
248 </template> 241 </template>
249 242
250 <script> 243 <script>
251 - import {salesStatistics,  
252 - orderGetAll,  
253 - calculateGrossProfit} from '@/api/dataSta'  
254 import { 244 import {
255 - salesRanking,} from '@/api/psRanking'  
256 -import { async } from 'q';  
257 -export default {  
258 - data () {  
259 - // 这里存放数据  
260 - return {  
261 - formParams:{  
262 - maoliTime:'',  
263 - tongjiTime:''  
264 - },  
265 - currentPage:1,  
266 - formInline: {  
267 - searchType: '1',  
268 - search: '', // 搜索字段  
269 - state: '4',  
270 - // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭  
271 - dates: [], // 下单时间数组  
272 - page: 1,  
273 - shopName: '',  
274 - pageSize: 10  
275 - },  
276 - fut:true,  
277 - total: 1,  
278 - tableData: [],  
279 - tableLoading: false,  
280 - dialogVisible:false,  
281 - tongji:{},  
282 - maoli:{},  
283 - pageindex: {  
284 - pageNumber: 1,  
285 - pageSize: 10,  
286 - },  
287 - labelStyle:{  
288 - width:'35%',  
289 - textAlign:'center',  
290 - color:'#000',  
291 - backgroundColor:'#F9FAFC',  
292 - },  
293 - contentStyle:{  
294 - textAlign:'center',  
295 - }  
296 -  
297 - } 245 + salesStatistics,
  246 + orderGetAll,
  247 + calculateGrossProfit
  248 + } from '@/api/dataSta'
  249 + import {
  250 + salesRanking,
  251 + } from '@/api/psRanking'
  252 + import {
  253 + async
  254 + } from 'q';
  255 + export default {
  256 + data() {
  257 + // 这里存放数据
  258 + return {
  259 + formParams: {
  260 + maoliTime: '',
  261 + tongjiTime: ''
  262 + },
  263 + currentPage: 1,
  264 + formInline: {
  265 + searchType: '1',
  266 + search: '', // 搜索字段
  267 + state: '4',
  268 + // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
  269 + dates: [], // 下单时间数组
  270 + page: 1,
  271 + shopName: '',
  272 + pageSize: 10
  273 + },
  274 + fut: true,
  275 + total: 1,
  276 + tableData: [],
  277 + tableLoading: false,
  278 + dialogVisible: false,
  279 + tongji: {},
  280 + maoli: {},
  281 + pageindex: {
  282 + pageNumber: 1,
  283 + pageSize: 10,
  284 + },
  285 + labelStyle: {
  286 + width: '35%',
  287 + textAlign: 'center',
  288 + color: '#000',
  289 + backgroundColor: '#F9FAFC',
  290 + },
  291 + contentStyle: {
  292 + textAlign: 'center',
  293 + }
298 294
299 - },  
300 - // 生命周期 - 挂载完成（可以访问DOM元素）  
301 - mounted() {  
302 - this.getAll()  
303 - },  
304 - // 方法集合  
305 - methods: {  
306 - sortMethod(before,after){  
307 - return Number(after.multiply) - Number(before.multiply)  
308 - },  
309 - toggleFilter(){  
310 - this.fut = !this.fut  
311 - },  
312 - handleSizeChange (val) {  
313 - this.formInline.pageSize = val  
314 - // this.getAll(this.formInline)  
315 - },  
316 - handleCurrentChange (val) {  
317 - this.formInline.page = val  
318 - // this.getAll(this.formInline)  
319 - },  
320 - //重置  
321 - clear(val){  
322 - this.formInline = {  
323 - searchType: '1',  
324 - search: '', // 搜索字段  
325 - state: '',  
326 - // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭  
327 - dates: [], // 下单时间数组  
328 - page: 1,  
329 - shopName: '',  
330 - pageSize: 10  
331 } 295 }
332 - this.formParams.tongjiTime = ''  
333 - this.getAll()  
334 - // if(val == 1){  
335 - // this.formParams.tongjiTime = ''  
336 - // this.getAll()  
337 - // }else{  
338 - // this.formParams.maoliTime = ''  
339 - // this.getAll()  
340 - // } 296 +
341 }, 297 },
342 - // 查询  
343 - search (val) {  
344 - this.formInline.dates = this.formParams.tongjiTime || [] 298 + // 生命周期 - 挂载完成（可以访问DOM元素）
  299 + mounted() {
345 this.getAll() 300 this.getAll()
346 - // if(val ==1){  
347 - // this.formInline.dates = this.formParams.tongjiTime  
348 - // this.getAll()  
349 - // }else{  
350 - // this.formInline.dates = this.formParams.maoliTime  
351 - // this.getAll()  
352 - // } 301 + },
  302 + // 方法集合
  303 + methods: {
  304 + sortMethod(before, after) {
  305 + return Number(after.multiply) - Number(before.multiply)
  306 + },
  307 + toggleFilter() {
  308 + this.fut = !this.fut
  309 + },
  310 + handleSizeChange(val) {
  311 + this.formInline.pageSize = val
  312 + // this.getAll(this.formInline)
  313 + },
  314 + handleCurrentChange(val) {
  315 + this.formInline.page = val
  316 + // this.getAll(this.formInline)
  317 + },
  318 + //重置
  319 + clear(val) {
  320 + this.formInline = {
  321 + searchType: '1',
  322 + search: '', // 搜索字段
  323 + state: '',
  324 + // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
  325 + dates: [], // 下单时间数组
  326 + page: 1,
  327 + shopName: '',
  328 + pageSize: 10
  329 + }
  330 + this.formParams.tongjiTime = ''
  331 + this.getAll()
  332 + // if(val == 1){
  333 + // this.formParams.tongjiTime = ''
  334 + // this.getAll()
  335 + // }else{
  336 + // this.formParams.maoliTime = ''
  337 + // this.getAll()
  338 + // }
  339 + },
  340 + // 查询
  341 + search(val) {
  342 + this.formInline.dates = this.formParams.tongjiTime || []
  343 + this.getAll()
  344 + // if(val ==1){
  345 + // this.formInline.dates = this.formParams.tongjiTime
  346 + // this.getAll()
  347 + // }else{
  348 + // this.formInline.dates = this.formParams.maoliTime
  349 + // this.getAll()
  350 + // }
353 // console.log(this.formParams.tongjiTime) 351 // console.log(this.formParams.tongjiTime)
354 // console.log(this.formParams.maoliTime) 352 // console.log(this.formParams.maoliTime)
355 - },  
356 - // 初始化查询所有数据  
357 - async getAll () {  
358 - const res = await orderGetAll(this.formInline)  
359 - const Orderlist = await calculateGrossProfit(res.data.list)  
360 - const tablelist = await salesStatistics(res.data.list)  
361 - this.maoli = Orderlist.data  
362 - this.tongji = tablelist.data  
363 - // this.loading = false; 353 + },
  354 + // 初始化查询所有数据
  355 + async getAll() {
  356 + const res = await orderGetAll(this.formInline)
  357 + const Orderlist = await calculateGrossProfit(res.data.list)
  358 + const tablelist = await salesStatistics(res.data.list)
  359 + this.maoli = Orderlist.data
  360 + this.tongji = tablelist.data
  361 + // this.loading = false;
364 362
365 363
366 - const list = await salesRanking(res.data.list)  
367 - this.tableData = list.data  
368 - this.total = list.data.length 364 + const list = await salesRanking(res.data.list)
  365 + this.tableData = list.data
  366 + // console.log(list.data)
  367 + this.total = list.data.length
369 368
370 - }, 369 + },
371 370
372 371
  372 + }
373 } 373 }
374 -}  
375 </script> 374 </script>
376 <style lang='scss' scoped> 375 <style lang='scss' scoped>
377 -.pending{  
378 - padding-left: 15px;  
379 -}  
380 -.tab_show{  
381 - padding-top: 10px;  
382 - padding-left: 15px;  
383 - padding-right: 15px;  
384 - background-color: #fff;  
385 -}  
386 -.filter-container {  
387 -font-size:12px;  
388 -border:1px solid #EBEEF5;  
389 - margin-bottom:20px;  
390 -  
391 -}  
392 -.formSearch{  
393 - padding: 0 20px;  
394 - height: 60px; /* 或者你想要的任何高度 */ 376 + .pending {
  377 + padding-left: 15px;
  378 + }
  379 +
  380 + .tab_show {
  381 + padding-top: 10px;
  382 + padding-left: 15px;
  383 + padding-right: 15px;
  384 + background-color: #fff;
  385 + }
  386 +
  387 + .filter-container {
  388 + font-size: 12px;
  389 + border: 1px solid #EBEEF5;
  390 + margin-bottom: 20px;
  391 +
  392 + }
  393 +
  394 + .formSearch {
  395 + padding: 0 20px;
  396 + height: 60px;
  397 + /* 或者你想要的任何高度 */
395 /* 过渡效果 */ 398 /* 过渡效果 */
396 - transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */  
397 - overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */  
398 -  
399 -}  
400 -.collapsed {  
401 - padding: 0 10px;  
402 - margin-top: 0px;  
403 - height: 0;  
404 - transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */  
405 - overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */  
406 -}  
407 -::v-deep .collapsed{  
408 - .el-form--inline .el-form-item{  
409 - margin-top: 10px;  
410 - margin-right:20px;  
411 - margin-bottom:0px; 399 + transition: height 0.3s ease-in-out;
  400 + /* 动画的持续时间、类型 */
  401 + overflow: hidden;
  402 + /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
  403 +
412 } 404 }
413 - .el-form-item__label{  
414 - font-size:12px; 405 +
  406 + .collapsed {
  407 + padding: 0 10px;
  408 + margin-top: 0px;
  409 + height: 0;
  410 + transition: height 0.3s ease-in-out;
  411 + /* 动画的持续时间、类型 */
  412 + overflow: hidden;
  413 + /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
415 } 414 }
416 -}  
417 -::v-deep .formSearch{  
418 - .el-form--inline .el-form-item{ 415 +
  416 + ::v-deep .collapsed {
  417 + .el-form--inline .el-form-item {
419 margin-top: 10px; 418 margin-top: 10px;
420 - margin-right:20px;  
421 - margin-bottom:0px; 419 + margin-right: 20px;
  420 + margin-bottom: 0px;
  421 + }
  422 +
  423 + .el-form-item__label {
  424 + font-size: 12px;
  425 + }
422 } 426 }
423 - .el-form-item__label{  
424 - font-size:12px; 427 +
  428 + ::v-deep .formSearch {
  429 + .el-form--inline .el-form-item {
  430 + margin-top: 10px;
  431 + margin-right: 20px;
  432 + margin-bottom: 0px;
  433 + }
  434 +
  435 + .el-form-item__label {
  436 + font-size: 12px;
  437 + }
  438 + }
  439 +
  440 + .fenye {
  441 + margin-top: 20px;
  442 + display: flex;
  443 + justify-content: space-between;
  444 + }
  445 +
  446 + .titleTj {
  447 + width: 100%;
  448 + color: #9C9C9C;
  449 + position: relative;
  450 + margin-bottom: 15px;
  451 + }
  452 +
  453 + .titleTj::before {
  454 + content: "";
  455 + position: absolute;
  456 + top: 0;
  457 + left: -10px;
  458 + width: 4px;
  459 + height: 100%;
  460 + background-color: #14BA99;
425 } 461 }
426 -}  
427 -.fenye{  
428 - margin-top: 20px;  
429 - display: flex;  
430 - justify-content: space-between;  
431 -}  
432 -.titleTj{  
433 - width:100%;  
434 - color:#9C9C9C;  
435 - position: relative;  
436 - margin-bottom:15px;  
437 -}  
438 -  
439 -.titleTj::before {  
440 - content: "";  
441 - position: absolute;  
442 - top:0;  
443 - left:-10px;  
444 - width: 4px;  
445 - height: 100%;  
446 - background-color: #14BA99;  
447 -}  
448 </style> 462 </style>
merchant-web-master/src/views/stockControl/inventory/addCommodity copy.vue 0 → 100644
  View file @89bb9f2
  1 +<template>
  2 + <div>
  3 + <el-card class="box-card">
  4 + <div slot="header" style="display:flex;justify-content: space-between;">
  5 + <div>
  6 + <span v-if="!productId" class="addTitle">新增商品</span>
  7 + <span v-else class="addTitle">编辑商品</span>
  8 + </div>
  9 + <div>
  10 + <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="back">取消</el-button>
  11 + <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>
  12 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>
  13 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>
  14 + </div>
  15 + </div>
  16 + <!-- 步骤条 -->
  17 + <div class="stepsColor common">
  18 + <div class="stepsOne common">
  19 + <div :class="active ? 'one_class common' : 't_class common'">1</div>
  20 + <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>
  21 + </div>
  22 + <div class="line" />
  23 + <div class="stepsTwo common">
  24 + <div :class="active ? 't_class common' : 'one_class common'">2</div>
  25 + <div :class="active ? 'w_class' : 'two_class' ">基本属性&商品描述</div>
  26 + </div>
  27 + </div>
  28 + </el-card>
  29 + <!-- 商品 -->
  30 + <div class="addCom common">
  31 + <div v-if="active">
  32 + <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="padding: 40px 40px;">
  33 + <div class="leftCom">
  34 + <el-form-item label="商品名称" prop="productName">
  35 + <el-input v-model="form.productName" maxlength="50" show-word-limit />
  36 + </el-form-item>
  37 + <el-form-item label="卖点简介">
  38 + <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
  39 + </el-form-item>
  40 + <el-form-item>
  41 + <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
  42 + </el-form-item>
  43 + </div>
  44 + <div class="rightCom">
  45 + <el-form-item label="官方分类" prop="classifyId">
  46 + <el-cascader
  47 + v-model="form.classifyId"
  48 + :options="classifyList"
  49 + clearable
  50 + :props="{
  51 + checkStrictly: false,
  52 + label:'categoryName',
  53 + value:'id',
  54 + children:'childs'
  55 + }"
  56 + @change="handleChangeCascader"
  57 + />
  58 + </el-form-item>
  59 +
  60 + <el-form-item label="商品分组" prop="shopGroupId">
  61 + <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable>
  62 + <el-option
  63 + v-for="(item,index) in groupList"
  64 + :key="index"
  65 + :label="item.groupName"
  66 + :value="item.shopGroupId"
  67 + />
  68 + </el-select>
  69 + </el-form-item>
  70 + <el-form-item label="品牌">
  71 + <el-select
  72 + v-model="form.brandId"
  73 + clearable
  74 + placeholder="请选择品牌"
  75 + >
  76 + <el-option
  77 + v-for="item in brandList"
  78 + :key="item.id"
  79 + :label="item.brandName"
  80 + :value="item.id"
  81 + />
  82 + </el-select>
  83 + </el-form-item>
  84 + <el-form-item class="form-item-long" label="供应商">
  85 + <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />
  86 + </el-form-item>
  87 + <el-form-item class="form-item-long" label="成本价" prop="cost">
  88 + <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />
  89 + </el-form-item>
  90 + <el-form-item label="需要物流" prop="ifLogistics">
  91 + <el-radio-group v-model="form.ifLogistics">
  92 + <el-radio :label="1">是</el-radio>
  93 + <el-radio :label="0">否</el-radio>
  94 + </el-radio-group>
  95 + </el-form-item>
  96 + <el-form-item label="上架状态" prop="shelveState">
  97 + <el-radio-group v-model="form.shelveState">
  98 + <el-radio :label="1">上架</el-radio>
  99 + <el-radio :label="0">下架</el-radio>
  100 + </el-radio-group>
  101 + </el-form-item>
  102 + <el-form-item label="允许超卖" prop="ifOversold">
  103 + <el-radio-group v-model="form.ifOversold">
  104 + <el-radio :label="1">允许</el-radio>
  105 + <el-radio :label="0">不允许</el-radio>
  106 + </el-radio-group>
  107 + </el-form-item>
  108 + <el-form-item label="积分兑换" prop="ifCredit">
  109 + <el-radio-group v-model="form.ifCredit">
  110 + <el-radio :label="1">允许</el-radio>
  111 + <el-radio :label="0">不允许</el-radio>
  112 + </el-radio-group>
  113 + <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
  114 + </el-form-item>
  115 + <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
  116 + <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->
  117 + <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />
  118 + <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
  119 + <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
  120 + </el-form-item>
  121 + <!-- <el-form-item label="花呗分期">-->
  122 + <!-- <el-radio-group v-model="form.ifHuabei">-->
  123 + <!-- <el-radio :label="1">支持</el-radio>-->
  124 + <!-- <el-radio :label="0">不支持</el-radio>-->
  125 + <!-- </el-radio-group>-->
  126 + <!-- </el-form-item>-->
  127 + </div>
  128 + </el-form>
  129 + </div>
  130 + <div v-if="!active" class="centerCom">
  131 + <el-form ref="form" :model="params" label-width="80px">
  132 + <StyleInformation :form="params" />
  133 + </el-form>
  134 + </div>
  135 + </div>
  136 +
  137 + <!-- 弹窗 -->
  138 + <el-dialog
  139 + :visible.sync="dialogVisible"
  140 + class="check-image-dialog"
  141 + title="查看图片"
  142 + center="center"
  143 + >
  144 + <img width="100%" :src="dialogImageUrl" alt>
  145 + </el-dialog>
  146 + </div>
  147 +</template>
  148 +
  149 +<script>
  150 +import Tinymce from '@/components/Tinymce'
  151 +import {
  152 + getGroupSelect,
  153 + getClassify,
  154 + getClassifyAdd,
  155 + getClassifyGetById,
  156 + getClassifyUpdate,
  157 + getBrandList
  158 +} from '@/api/commodity'
  159 +import {
  160 + getSelect
  161 +} from '@/api/account';
  162 +import { uploadUrl } from '@/utils/request'
  163 +import StyleInformation from './addComponent'
  164 +export default {
  165 + components: {
  166 + Tinymce,
  167 + StyleInformation
  168 + },
  169 + props: {
  170 + productId: {
  171 + type: Number,
  172 + default: 0
  173 + },
  174 + showTinymce: {
  175 + type: Boolean
  176 + },
  177 + message: {
  178 + type: String,
  179 + default: ''
  180 + }
  181 + },
  182 + data() {
  183 + // const checkCreditLimit = (rule, value, callback) => {
  184 + // console.log(this.form.ifCredit)
  185 + // if (this.form.ifCredit) {
  186 + // callback(new Error('当选择允许积分兑换时，必须填写该值'))
  187 + // }
  188 + // const reg = /^[1-9]\d*$/
  189 + // if (value === '' || value === undefined || value === null) {
  190 + // callback();
  191 + // } else {
  192 + // if ((!reg.test(value)) && value !== '') {
  193 + // callback(new Error('请输入正确的价格'));
  194 + // } else {
  195 + // callback();
  196 + // }
  197 + // }
  198 + // callback()
  199 + // }
  200 + return {
  201 + brandList: [],
  202 + active: 1,
  203 + action: uploadUrl,
  204 + form: {
  205 + brandId: null, // 品牌ID
  206 + productName: '', // 商品名称
  207 + productBrief: '', // 商品简介
  208 + shopGroupId: '', // 商品分组id
  209 + classifyId: '', // 分类id
  210 + supplierName: '', // 供应商名称
  211 + cost:null,//成本价
  212 + ifLogistics: '', // 是否需要物流 1-是 0-否
  213 + shelveState: '', // 是否上架 1-上架 0-不上架
  214 + ifOversold: '', // 是否允许超卖 1-是 0-否
  215 + ifCredit: '', // 是否支持积分兑换 1-是 0-否
  216 + creditLimit: '', // 单笔订单限制使用多少积分
  217 + ifHuabei: 1, // 是否支持花呗分期 1-是 0-否
  218 + productText: '', // 商品描述（富文本）
  219 + images: [], // "图片地址"
  220 + deletes: [], // 删除的规格id数组
  221 + names: [
  222 + {
  223 + code: '', // 级别
  224 + skuName: '', // 规格名
  225 + values: [
  226 + {
  227 + valueCode: '', // 级别
  228 + skuValue: '', // 规格值
  229 + image: '' // 图片
  230 + }
  231 + ]
  232 + }
  233 + ],
  234 + skus: [
  235 + {
  236 + skuName: '', // 规格名称
  237 + skuValue: '', // 规格值
  238 + price: '', // 售价
  239 + originalPrice: '', // 原价
  240 + stockNumber: '', // 库存数量
  241 + weight: '', // 重量
  242 + skuImage: '', // 配图地址
  243 + style: '' // 款式 1-单款式 2-多款式
  244 + }
  245 + ]
  246 + },
  247 + params: {
  248 + applyPrice: 0,
  249 + attrStyle: 0,
  250 + categoryId: '',
  251 + oversold: 1,
  252 + collects: 0,
  253 + groupId: '',
  254 + imgs: [],
  255 + deletes: [], // 删除规格数据
  256 + isDelete: 0,
  257 + limitCount: 0,
  258 + minusStock: '',
  259 + needLogistics: 1,
  260 + platform: '',
  261 + price: 0,
  262 + productCode: '',
  263 + productName: '',
  264 + sellCount: 0,
  265 + sellDesc: '',
  266 + sellType: '',
  267 + shortName: '',
  268 + skuAttrList: [
  269 + {
  270 + code: '',
  271 + skuName: '',
  272 + needImg: false,
  273 + values: [
  274 + {
  275 + skuValue: '',
  276 + valueCode: '',
  277 + image: ''
  278 + }
  279 + ]
  280 + }
  281 + ],
  282 + skuList: [
  283 + {
  284 + isDelete: '',
  285 + skuAttrCodeDTOList: [
  286 + {
  287 + code: '',
  288 + valueCode: ''
  289 + }
  290 + ],
  291 + skuAttrList: [],
  292 + sku: '',
  293 + skuImg: '',
  294 + price: 0,
  295 + originalPrice: 0,
  296 + stockNumber: 0,
  297 + weight: 0
  298 + }
  299 + ],
  300 + sortOrder: '',
  301 + status: '',
  302 + stock: '',
  303 + supplierName: '',
  304 + cost:null,
  305 + views: '',
  306 + weight: ''
  307 + },
  308 + imgList: [],
  309 + groupList: [],
  310 + classifyList: [],
  311 + dialogImageUrl: '',
  312 + dialogVisible: false,
  313 + rules: {
  314 + productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  315 + shopGroupId: [{ required: true, message: '请选择商品分组', trigger: 'change' }],
  316 + classifyId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
  317 + cost:[{ required: true, message: '请输入成本价', trigger: 'change' }],
  318 + ifLogistics: [{ required: true, message: '请选择是否需要物流', trigger: 'change' }],
  319 + shelveState: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
  320 + ifOversold: [{ required: true, message: '请选择是否允许超卖', trigger: 'change' }],
  321 + ifCredit: [{ required: true, message: '请选择是否支持积分兑换', trigger: 'change' }],
  322 + creditLimit: [{ required: true, message: '请输入单笔最大抵扣', trigger: 'blur' }]
  323 + },
  324 + integralList: [],
  325 + integralProportion: '' // 积分兑换金额比例
  326 + }
  327 + },
  328 + watch: {
  329 + productId: {
  330 + handler(nVal, oVal) {
  331 + if (nVal) {
  332 + // this.details()
  333 + }
  334 + }
  335 + },
  336 + },
  337 + mounted() {
  338 + this.groups()
  339 + this.selectList()
  340 + this.getBrandList()
  341 + // if (this.productId) {
  342 + // this.details()
  343 + // }
  344 + this.getCredit()
  345 + },
  346 + methods: {
  347 + handleChangeCascader() {
  348 + console.log(this.form.classifyId)
  349 + },
  350 + async getBrandList() {
  351 + const { data } = await getBrandList()
  352 + this.brandList = data
  353 + },
  354 + async getCredit() {
  355 + const res = await getSelect({ dictName: 'CREDIT_CONFIG' })
  356 + this.integralList = res.data
  357 + this.integralList.forEach((item) => {
  358 + if (item.dictName === 'credit_exchange_rate') {
  359 + this.integralProportion = item.dictDescribe
  360 + }
  361 + })
  362 + },
  363 + handleImageSuccess(response) {
  364 + const { url } = response.data
  365 + this.imgList.push(url)
  366 + },
  367 + handlePictureCardPreview(file) {
  368 + this.dialogImageUrl = file.imgPath
  369 + this.dialogVisible = true
  370 + },
  371 + // 移除图片
  372 + handleRemove(file) {
  373 + const { imgPath } = file
  374 + this.form.imgs = this.form.imgs.filter(item => {
  375 + return item.imgPath !== imgPath
  376 + })
  377 + },
  378 + // 下一步
  379 + next() {
  380 + this.$refs['form'].validate((valid) => {
  381 + console.log('val', valid)
  382 + if (valid) {
  383 + if (this.active === 1) {
  384 + this.active = 0
  385 + // console.log(this.form);
  386 + sessionStorage.setItem('form', JSON.stringify(this.form.skus))
  387 + }
  388 + } else {
  389 + this.$message({
  390 + message: '请填写正确的信息',
  391 + type: 'warning'
  392 + })
  393 + return false
  394 + }
  395 + })
  396 + },
  397 + // 点击新增商品时表单数据重置
  398 + reset() {
  399 + // this.form.productText = ''
  400 + this.form = {
  401 + productName: '',
  402 + productBrief: '',
  403 + shopGroupId: '',
  404 + classifyId: '',
  405 + supplierName: '',
  406 + ifLogistics: '',
  407 + shelveState: ' ',
  408 + ifOversold: '',
  409 + ifCredit: '',
  410 + creditLimit: '',
  411 + ifHuabei: 1,
  412 + cost:0,
  413 + productText: '',
  414 + images: [],
  415 + deletes: [],
  416 + names: [
  417 + {
  418 + code: '',
  419 + skuName: '',
  420 + values: [
  421 + {
  422 + valueCode: '',
  423 + skuValue: '',
  424 + image: ''
  425 + }
  426 + ]
  427 + }
  428 + ],
  429 + skus: [
  430 + {
  431 + skuName: '',
  432 + skuValue: '',
  433 + price: '',
  434 + originalPrice: '',
  435 + stockNumber: '',
  436 + weight: '',
  437 + skuImage: '',
  438 + style: ''
  439 + }
  440 + ]
  441 + }
  442 + this.params = {
  443 + applyPrice: 0,
  444 + attrStyle: 0,
  445 + categoryId: '',
  446 + oversold: 1,
  447 + collects: 0,
  448 + groupId: '',
  449 + imgs: [],
  450 + deletes: [],
  451 + isDelete: 0,
  452 + limitCount: 0,
  453 + minusStock: '',
  454 + needLogistics: 1,
  455 + platform: '',
  456 + price: 0,
  457 + productCode: '',
  458 + productName: '',
  459 + sellCount: 0,
  460 + sellDesc: '',
  461 + sellType: '',
  462 + shortName: '',
  463 + skuAttrList: [
  464 + {
  465 + code: '',
  466 + skuName: '',
  467 + needImg: false,
  468 + values: [
  469 + {
  470 + skuValue: '',
  471 + valueCode: '',
  472 + image: ''
  473 + }
  474 + ]
  475 + }
  476 + ],
  477 + skuList: [
  478 + {
  479 + isDelete: '',
  480 + skuAttrCodeDTOList: [
  481 + {
  482 + code: '',
  483 + valueCode: ''
  484 + }
  485 + ],
  486 + skuAttrList: [],
  487 + sku: '',
  488 + skuImg: '',
  489 + price: 0,
  490 + originalPrice: 0,
  491 + stockNumber: 0,
  492 + weight: 0
  493 + }
  494 + ],
  495 + sortOrder: '',
  496 + status: '',
  497 + stock: '',
  498 + supplierName: '',
  499 + views: '',
  500 + weight: ''
  501 + }
  502 + this.imgList = []
  503 + this.dialogImageUrl = ''
  504 + this.dialogVisible = false
  505 + this.active = 1
  506 + },
  507 + // 返回
  508 + back() {
  509 + this.active = 1
  510 + this.$emit('cancel')
  511 + },
  512 + // 上一步
  513 + last() {
  514 + if (this.active !== 1) {
  515 + this.active = 1
  516 + }
  517 + },
  518 + // 保存
  519 + async save() {
  520 + console.log(this.params.skuAttrList)
  521 + if (this.params.attrStyle === 1) {
  522 + for (let i = 0; i < this.params.skuAttrList.length; i++) {
  523 + if (this.params.skuAttrList[i].skuName === '') {
  524 + this.$message({
  525 + message: '规格名不能为空',
  526 + type: 'warning'
  527 + })
  528 + return false
  529 + }
  530 + }
  531 + }
  532 + this.form.names = this.params.skuAttrList
  533 + this.params.skuList.forEach(element => {
  534 + element.style = this.params.attrStyle
  535 + })
  536 + this.form.skus = this.params.skuList
  537 + this.form.images = this.params.imgs
  538 + this.form.deletes = this.params.deletes
  539 + this.form.classifyId = Array.isArray(this.form.classifyId) ? this.form.classifyId[this.form.classifyId.length - 1] : this.form.classifyId
  540 + if (this.productId) {
  541 + this.form.productId = this.productId
  542 + const sku = JSON.parse(sessionStorage.getItem('form'))
  543 + console.log(sku)
  544 + sku.forEach((element, i) => {
  545 + for (let index = 0; index < this.form.skus.length; index++) {
  546 + if (i === index) {
  547 + this.form.skus[index].skuId = element.skuId
  548 + }
  549 + }
  550 + })
  551 + console.log(this.form, 'this.form')
  552 + const res = await getClassifyUpdate(this.form)
  553 + console.log(res)
  554 + if (res.code === '') {
  555 + this.$message({
  556 + type: 'success',
  557 + message: '成功!'
  558 + })
  559 + this.back()
  560 + }
  561 + } else {
  562 + console.log('message1',this.message)
  563 + if(this.message != ''){
  564 + const formData = new FormData();
  565 + formData.append('combinationId', this.message);
  566 + for (let [key, value] of formData.entries()) {
  567 + this.form[key] = value;
  568 + }
  569 + }
  570 + const res = await getClassifyAdd(this.form)
  571 + if (res.code === '') {
  572 + this.$message({
  573 + type: 'success',
  574 + message: '成功!'
  575 + })
  576 + this.reset()
  577 + this.back()
  578 + }
  579 + }
  580 + },
  581 + // 获取商品分组
  582 + async groups() {
  583 + const res = await getGroupSelect({
  584 + })
  585 + this.groupList = res.data
  586 + },
  587 + // 获取详情
  588 + async details() {
  589 + const res = await getClassifyGetById({ productId: this.productId })
  590 + this.form = res.data
  591 + this.$set(this.form, 'productText', res.data.productText)
  592 + // this.form.productText = res.data.productText
  593 + // console.log(this.form.productText, 'productText')
  594 + if (res.data.names.length !== 0) {
  595 + this.params.skuAttrList = res.data.names
  596 + }
  597 + // this.params.skuAttrList.forEach((item) => {
  598 + // var data = {}
  599 + // var arr = Object.keys(res.data)
  600 + // if (arr.length === 0) {
  601 + // item.needImg = false
  602 + // }
  603 + // })
  604 + this.params.skuList = this.form.skus
  605 + this.params.attrStyle = res.data.skus[0].style
  606 + this.params.imgs = res.data.images
  607 + },
  608 + async selectList() {
  609 + const res = await getClassify()
  610 + this.classifyList = this.filterList(res.data)
  611 + },
  612 + filterList(data) {
  613 + data.forEach(i => {
  614 + if (i.childs.length) {
  615 + this.filterList(i.childs)
  616 + } else {
  617 + i.childs = null
  618 + }
  619 + })
  620 + return data
  621 + }
  622 + }
  623 +}
  624 +</script>
  625 +
  626 +<style scoped lang='scss'>
  627 +@import url("../../../styles/elDialog.scss");
  628 +.btnList {
  629 + float: right;
  630 + padding: 3px 0;
  631 + width: 100px;
  632 + height: 40px;
  633 + border-radius: 4px;
  634 + margin-right: 30px;
  635 +}
  636 +.addTitle {
  637 + font-size: 20px;
  638 + color: #333333;
  639 + line-height: 50px;
  640 +}
  641 +.stepsColor{
  642 + font-size: 20px;
  643 + line-height: 40px;
  644 + .one_class {
  645 + width: 40px;
  646 + background: #3F9B6A;
  647 + border-radius: 50%;
  648 + color: #ffffff;
  649 + margin: 0 10px;
  650 + }
  651 + .two_class {
  652 + color: #3F9B6A;
  653 + }
  654 + .line {
  655 + width: 230px;
  656 + height: 2px;
  657 + background: #e0e5eb;
  658 + margin: 0 20px;
  659 + }
  660 + .t_class {
  661 + width: 40px;
  662 + background: #dddddd;
  663 + border-radius: 50%;
  664 + color: #333333;
  665 + margin: 0 10px;
  666 + }
  667 + .w_class {
  668 + color: #666666;
  669 + }
  670 +}
  671 +.common {
  672 + display: flex;
  673 + justify-content: center;
  674 + align-items: center;
  675 +}
  676 +
  677 +.addCom {
  678 + margin: 10px 0;
  679 + justify-content: space-around;
  680 + align-items: unset;
  681 + .el-form{
  682 + display: flex;
  683 + padding: 40px 0;
  684 + }
  685 + .leftCom {
  686 + width: 65%;
  687 + background: #ffffff;
  688 + }
  689 + .rightCom {
  690 + width: 35%;
  691 + background: #ffffff;
  692 + margin-left: 80px;
  693 + }
  694 +}
  695 +.centerCom {
  696 + width: 1660px;
  697 + background: #ffffff;
  698 + box-shadow: 0px 5px 20px 0px rgba(51, 51, 51, 0.15);
  699 + border-radius: 4px;
  700 +}
  701 +</style>
  702 +<style scoped>
  703 +.form-item-long >>> .el-input {
  704 + width: 100%;
  705 +}
  706 +</style>
merchant-web-master/src/views/stockControl/inventory/addCommodity.vue
  View file @89bb9f2
1 <template> 1 <template>
2 <div> 2 <div>
3 - <el-card class="box-card">  
4 - <div slot="header" style="display:flex;justify-content: space-between;">  
5 - <div>  
6 - <span v-if="!productId" class="addTitle">新增商品</span>  
7 - <span v-else class="addTitle">编辑商品</span>  
8 - </div>  
9 - <div>  
10 - <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="back">取消</el-button>  
11 - <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>  
12 - <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>  
13 - <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>  
14 - </div> 3 + <!-- 步骤条 -->
  4 + <div class="stepsColor common">
  5 + <div class="stepsOne common">
  6 + <div :class="active ? 'one_class common' : 't_class common'">1</div>
  7 + <div :class="active ? 'two_class' : 'w_class'">基本属性</div>
15 </div> 8 </div>
16 - <!-- 步骤条 -->  
17 - <div class="stepsColor common">  
18 - <div class="stepsOne common">  
19 - <div :class="active ? 'one_class common' : 't_class common'">1</div>  
20 - <div :class="active ? 'two_class' : 'w_class'">基本属性&商品描述</div>  
21 - </div>  
22 - <div class="line" />  
23 - <div class="stepsTwo common">  
24 - <div :class="active ? 't_class common' : 'one_class common'">2</div>  
25 - <div :class="active ? 'w_class' : 'two_class' ">基本属性&商品描述</div>  
26 - </div> 9 + <div class="line" />
  10 + <div class="stepsTwo common">
  11 + <div :class="active ? 't_class common' : 'one_class common'">2</div>
  12 + <div :class="active ? 'w_class' : 'two_class' ">商品描述</div>
27 </div> 13 </div>
28 - </el-card> 14 + </div>
29 <!-- 商品 --> 15 <!-- 商品 -->
30 <div class="addCom common"> 16 <div class="addCom common">
31 <div v-if="active"> 17 <div v-if="active">
32 - <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="padding: 40px 40px;">  
33 - <div class="leftCom">  
34 - <el-form-item label="商品名称" prop="productName">  
35 - <el-input v-model="form.productName" maxlength="50" show-word-limit />  
36 - </el-form-item>  
37 - <el-form-item label="卖点简介">  
38 - <el-input v-model="form.productBrief" maxlength="50" show-word-limit />  
39 - </el-form-item>  
40 - <el-form-item>  
41 - <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />  
42 - </el-form-item>  
43 - </div>  
44 - <div class="rightCom">  
45 - <el-form-item label="官方分类" prop="classifyId">  
46 - <el-cascader  
47 - v-model="form.classifyId"  
48 - :options="classifyList"  
49 - clearable  
50 - :props="{  
51 - checkStrictly: false,  
52 - label:'categoryName',  
53 - value:'id',  
54 - children:'childs'  
55 - }"  
56 - @change="handleChangeCascader"  
57 - />  
58 - </el-form-item>  
59 -  
60 - <el-form-item label="商品分组" prop="shopGroupId">  
61 - <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable>  
62 - <el-option  
63 - v-for="(item,index) in groupList"  
64 - :key="index"  
65 - :label="item.groupName"  
66 - :value="item.shopGroupId" 18 + <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px 20px;">
  19 + <el-form-item label="商品名称" prop="productName">
  20 + <el-input v-model="form.productName" maxlength="50" show-word-limit />
  21 + </el-form-item>
  22 + <el-row :gutter="20">
  23 + <el-col :span="12">
  24 + <el-form-item label="官方分类" prop="classifyId">
  25 + <el-cascader
  26 + v-model="form.classifyId"
  27 + :options="classifyList"
  28 + clearable
  29 + :props="{
  30 + checkStrictly: false,
  31 + label:'categoryName',
  32 + value:'id',
  33 + children:'childs'
  34 + }"
  35 + style="width: 100%"
  36 + @change="handleChangeCascader"
67 /> 37 />
68 - </el-select>  
69 - </el-form-item>  
70 - <el-form-item label="品牌">  
71 - <el-select  
72 - v-model="form.brandId"  
73 - clearable  
74 - placeholder="请选择品牌"  
75 - >  
76 - <el-option  
77 - v-for="item in brandList"  
78 - :key="item.id"  
79 - :label="item.brandName"  
80 - :value="item.id"  
81 - />  
82 - </el-select>  
83 - </el-form-item>  
84 - <el-form-item class="form-item-long" label="供应商">  
85 - <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />  
86 - </el-form-item>  
87 - <el-form-item class="form-item-long" label="成本价" prop="cost">  
88 - <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />  
89 - </el-form-item>  
90 - <el-form-item label="需要物流" prop="ifLogistics">  
91 - <el-radio-group v-model="form.ifLogistics">  
92 - <el-radio :label="1">是</el-radio>  
93 - <el-radio :label="0">否</el-radio>  
94 - </el-radio-group>  
95 - </el-form-item>  
96 - <el-form-item label="上架状态" prop="shelveState">  
97 - <el-radio-group v-model="form.shelveState">  
98 - <el-radio :label="1">上架</el-radio>  
99 - <el-radio :label="0">下架</el-radio>  
100 - </el-radio-group>  
101 - </el-form-item>  
102 - <el-form-item label="允许超卖" prop="ifOversold">  
103 - <el-radio-group v-model="form.ifOversold">  
104 - <el-radio :label="1">允许</el-radio>  
105 - <el-radio :label="0">不允许</el-radio>  
106 - </el-radio-group>  
107 - </el-form-item>  
108 - <el-form-item label="积分兑换" prop="ifCredit">  
109 - <el-radio-group v-model="form.ifCredit">  
110 - <el-radio :label="1">允许</el-radio>  
111 - <el-radio :label="0">不允许</el-radio>  
112 - </el-radio-group>  
113 - <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>  
114 - </el-form-item>  
115 - <el-form-item v-if="form.ifCredit" class="form-item-long" label="单笔最大抵扣" prop="creditLimit">  
116 - <!-- <el-input v-model="form.creditLimit" type="number" placeholder="请输入单笔最大抵扣" /> -->  
117 - <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />  
118 - <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>  
119 - <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>  
120 - </el-form-item>  
121 - <!-- <el-form-item label="花呗分期">-->  
122 - <!-- <el-radio-group v-model="form.ifHuabei">-->  
123 - <!-- <el-radio :label="1">支持</el-radio>-->  
124 - <!-- <el-radio :label="0">不支持</el-radio>-->  
125 - <!-- </el-radio-group>-->  
126 - <!-- </el-form-item>-->  
127 - </div> 38 + </el-form-item>
  39 + </el-col>
  40 + <el-col :span="12">
  41 + <el-form-item label="商品分组" prop="shopGroupId">
  42 + <el-select v-model="form.shopGroupId" placeholder="请选择商品分组" clearable style="width: 100%">
  43 + <el-option
  44 + v-for="(item,index) in groupList"
  45 + :key="index"
  46 + :label="item.groupName"
  47 + :value="item.shopGroupId"
  48 + />
  49 + </el-select>
  50 + </el-form-item>
  51 + </el-col>
  52 + <el-col :span="12">
  53 + <el-form-item label="品牌">
  54 + <el-select
  55 + v-model="form.brandId"
  56 + clearable
  57 + placeholder="请选择品牌"
  58 + style="width: 100%"
  59 + >
  60 + <el-option
  61 + v-for="item in brandList"
  62 + :key="item.id"
  63 + :label="item.brandName"
  64 + :value="item.id"
  65 + />
  66 + </el-select>
  67 + </el-form-item>
  68 + </el-col>
  69 + <el-col :span="12">
  70 + <el-form-item class="form-item-long" label="供应商">
  71 + <el-input v-model="form.supplierName" maxlength="30" show-word-limit placeholder="请输入供应商名称" />
  72 + </el-form-item>
  73 + </el-col>
  74 + <el-col :span="12">
  75 + <el-form-item class="form-item-long" label="成本价(/元)" prop="cost">
  76 + <el-input v-model.number="form.cost" type="number" maxlength="10" show-word-limit placeholder="请输入成本价" />
  77 + </el-form-item>
  78 + </el-col>
  79 + <el-col :span="12">
  80 + <el-form-item label="需要物流" prop="ifLogistics">
  81 + <el-radio-group v-model="form.ifLogistics">
  82 + <el-radio :label="1">是</el-radio>
  83 + <el-radio :label="0">否</el-radio>
  84 + </el-radio-group>
  85 + </el-form-item>
  86 + </el-col>
  87 + <el-col :span="12">
  88 + <el-form-item label="上架状态" prop="shelveState">
  89 + <el-radio-group v-model="form.shelveState">
  90 + <el-radio :label="1">上架</el-radio>
  91 + <el-radio :label="0">下架</el-radio>
  92 + </el-radio-group>
  93 + </el-form-item>
  94 + </el-col>
  95 + <el-col :span="12">
  96 + <el-form-item label="允许超卖" prop="ifOversold">
  97 + <el-radio-group v-model="form.ifOversold">
  98 + <el-radio :label="1">允许</el-radio>
  99 + <el-radio :label="0">不允许</el-radio>
  100 + </el-radio-group>
  101 + </el-form-item>
  102 + </el-col>
  103 +
  104 + </el-row>
  105 + <el-form-item label="卖点简介">
  106 + <el-input v-model="form.productBrief" maxlength="50" show-word-limit />
  107 + </el-form-item>
  108 + <el-form-item>
  109 + <Tinymce v-if="showTinymce" ref="content" v-model="form.productText" class="tinymce-wrap" :height="200" />
  110 + </el-form-item>
  111 + <el-row :gutter="20">
  112 + <el-col :span="12">
  113 + <el-form-item label="积分兑换" prop="ifCredit">
  114 + <el-radio-group v-model="form.ifCredit">
  115 + <el-radio :label="1">允许</el-radio>
  116 + <el-radio :label="0">不允许</el-radio>
  117 + </el-radio-group>
  118 + <p style="color: #cf0f0f">开启积分兑换后，积分所抵扣的金额由商户承担</p>
  119 + </el-form-item>
  120 + </el-col>
  121 + <el-col :span="12" v-if="form.ifCredit">
  122 + <el-form-item class="form-item-long" label="单笔最大抵扣" prop="creditLimit">
  123 + <el-input-number v-model="form.creditLimit" :controls="false" :min="0" :precision="0" placeholder="请输入单笔最大抵扣" />
  124 + <p style="color: #cf0f0f; height: 25px; line-height: 25px;margin-top: 10px">限制一笔订单中该商品最多抵扣多少积分</p>
  125 + <p style="color: #cf0f0f; height: 25px; line-height: 25px">( 注：1积分 = {{ integralProportion }}元 请输入整数 )</p>
  126 + </el-form-item>
  127 + </el-col>
  128 + </el-row>
  129 +
128 </el-form> 130 </el-form>
129 </div> 131 </div>
130 - <div v-if="!active" class="centerCom"> 132 + <div v-if="!active" style="width: 100%;">
131 <el-form ref="form" :model="params" label-width="80px"> 133 <el-form ref="form" :model="params" label-width="80px">
132 <StyleInformation :form="params" /> 134 <StyleInformation :form="params" />
133 </el-form> 135 </el-form>
@@ -143,6 +145,12 @@ @@ -143,6 +145,12 @@
143 > 145 >
144 <img width="100%" :src="dialogImageUrl" alt> 146 <img width="100%" :src="dialogImageUrl" alt>
145 </el-dialog> 147 </el-dialog>
  148 + <div style="padding: 20px;">
  149 + <el-button v-if="active" class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="back">取消</el-button>
  150 + <el-button v-if="active" style="background-color: #3F9B6A;color: #fff" @click="next">下一步</el-button>
  151 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="save">保存</el-button>
  152 + <el-button v-if="!active" style="background-color: #3F9B6A;color: #fff" @click="last">上一步</el-button>
  153 + </div>
146 </div> 154 </div>
147 </template> 155 </template>
148 156
@@ -160,7 +168,7 @@ import { @@ -160,7 +168,7 @@ import {
160 getSelect 168 getSelect
161 } from '@/api/account'; 169 } from '@/api/account';
162 import { uploadUrl } from '@/utils/request' 170 import { uploadUrl } from '@/utils/request'
163 -import StyleInformation from './addComponent' 171 +import StyleInformation from '@/views/stockControl/inventory/addComponent'
164 export default { 172 export default {
165 components: { 173 components: {
166 Tinymce, 174 Tinymce,
@@ -173,12 +181,11 @@ export default { @@ -173,12 +181,11 @@ export default {
173 }, 181 },
174 showTinymce: { 182 showTinymce: {
175 type: Boolean 183 type: Boolean
176 - },  
177 - message: {  
178 - type: String,  
179 - default: ''  
180 - } 184 + }
181 }, 185 },
  186 + watch: {
  187 +
  188 + },
182 data() { 189 data() {
183 // const checkCreditLimit = (rule, value, callback) => { 190 // const checkCreditLimit = (rule, value, callback) => {
184 // console.log(this.form.ifCredit) 191 // console.log(this.form.ifCredit)
@@ -409,7 +416,7 @@ export default { @@ -409,7 +416,7 @@ export default {
409 ifCredit: '', 416 ifCredit: '',
410 creditLimit: '', 417 creditLimit: '',
411 ifHuabei: 1, 418 ifHuabei: 1,
412 - cost:0, 419 + cost:null,
413 productText: '', 420 productText: '',
414 images: [], 421 images: [],
415 deletes: [], 422 deletes: [],
@@ -447,6 +454,7 @@ export default { @@ -447,6 +454,7 @@ export default {
447 collects: 0, 454 collects: 0,
448 groupId: '', 455 groupId: '',
449 imgs: [], 456 imgs: [],
  457 + cost:null,
450 deletes: [], 458 deletes: [],
451 isDelete: 0, 459 isDelete: 0,
452 limitCount: 0, 460 limitCount: 0,
@@ -540,7 +548,6 @@ export default { @@ -540,7 +548,6 @@ export default {
540 if (this.productId) { 548 if (this.productId) {
541 this.form.productId = this.productId 549 this.form.productId = this.productId
542 const sku = JSON.parse(sessionStorage.getItem('form')) 550 const sku = JSON.parse(sessionStorage.getItem('form'))
543 - console.log(sku)  
544 sku.forEach((element, i) => { 551 sku.forEach((element, i) => {
545 for (let index = 0; index < this.form.skus.length; index++) { 552 for (let index = 0; index < this.form.skus.length; index++) {
546 if (i === index) { 553 if (i === index) {
@@ -549,8 +556,8 @@ export default { @@ -549,8 +556,8 @@ export default {
549 } 556 }
550 }) 557 })
551 console.log(this.form, 'this.form') 558 console.log(this.form, 'this.form')
  559 +
552 const res = await getClassifyUpdate(this.form) 560 const res = await getClassifyUpdate(this.form)
553 - console.log(res)  
554 if (res.code === '') { 561 if (res.code === '') {
555 this.$message({ 562 this.$message({
556 type: 'success', 563 type: 'success',
@@ -559,14 +566,7 @@ export default { @@ -559,14 +566,7 @@ export default {
559 this.back() 566 this.back()
560 } 567 }
561 } else { 568 } else {
562 - console.log('message1',this.message)  
563 - if(this.message != ''){  
564 - const formData = new FormData();  
565 - formData.append('combinationId', this.message);  
566 - for (let [key, value] of formData.entries()) {  
567 - this.form[key] = value;  
568 - }  
569 - } 569 +
570 const res = await getClassifyAdd(this.form) 570 const res = await getClassifyAdd(this.form)
571 if (res.code === '') { 571 if (res.code === '') {
572 this.$message({ 572 this.$message({
@@ -634,13 +634,16 @@ export default { @@ -634,13 +634,16 @@ export default {
634 margin-right: 30px; 634 margin-right: 30px;
635 } 635 }
636 .addTitle { 636 .addTitle {
637 - font-size: 20px; 637 + font-size: 14px;
638 color: #333333; 638 color: #333333;
639 line-height: 50px; 639 line-height: 50px;
640 } 640 }
641 .stepsColor{ 641 .stepsColor{
642 font-size: 20px; 642 font-size: 20px;
643 line-height: 40px; 643 line-height: 40px;
  644 + width: 50%;
  645 + margin: 0 auto;
  646 + padding: 15px 0;
644 .one_class { 647 .one_class {
645 width: 40px; 648 width: 40px;
646 background: #3F9B6A; 649 background: #3F9B6A;
@@ -678,9 +681,12 @@ export default { @@ -678,9 +681,12 @@ export default {
678 margin: 10px 0; 681 margin: 10px 0;
679 justify-content: space-around; 682 justify-content: space-around;
680 align-items: unset; 683 align-items: unset;
  684 + // width: 100%;
  685 + padding:0 20px;
  686 +
681 .el-form{ 687 .el-form{
682 - display: flex;  
683 - padding: 40px 0; 688 + // display: flex;
  689 + padding: 0px 10px 10px;
684 } 690 }
685 .leftCom { 691 .leftCom {
686 width: 65%; 692 width: 65%;
merchant-web-master/src/views/stockControl/inventory/addComponent copy.vue 0 → 100644
  View file @89bb9f2
  1 +<template>
  2 + <div class="style-information-component">
  3 + <el-form-item label="商品图片" />
  4 + <div class="upload-wrap">
  5 + <upimg filePath="bueniss" :value="imgsGeshi(form.imgs)" inputtype="coverImage" :limit="5"
  6 + @changimg="e=>changimg(e,'imgs')"></upimg>
  7 + <!-- <el-upload
  8 + list-type="picture-card"
  9 + :on-preview="handlePictureCardPreview"
  10 + :on-remove="handleRemove"
  11 + :headers="headers"
  12 + :data="dataObj"
  13 + :file-list="form.imgs"
  14 + :limit="20"
  15 + :on-success="handleImageSuccess"
  16 + :action="action"
  17 + >
  18 + <i slot="default" class="el-icon-plus" />
  19 + <div slot="file" slot-scope="{ file }">
  20 + <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
  21 + <span class="el-upload-list__item-actions">
  22 + <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
  23 + <i class="el-icon-zoom-in" />
  24 + </span>
  25 + <span class="el-upload-list__item-delete" @click="handleRemove(file)">
  26 + <i class="el-icon-delete" />
  27 + </span>
  28 + </span>
  29 + </div>
  30 + </el-upload> -->
  31 + </div>
  32 + <el-form-item label="款式设置">
  33 + <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
  34 + <el-radio :label="0">单款式</el-radio>
  35 + <el-radio :label="1">多款式</el-radio>
  36 + </el-radio-group>
  37 + </el-form-item>
  38 + <div class="style-container">
  39 + <div v-if="form.attrStyle === 0" class="single-style">
  40 + <el-table
  41 + :data="skuList"
  42 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
  43 + >
  44 + <el-table-column label="规格">
  45 + <template slot-scope="scope">
  46 + <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="40" />
  47 + </template>
  48 + </el-table-column>
  49 + <el-table-column label="售价">
  50 + <template slot-scope="scope">
  51 + <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
  52 + <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />
  53 + </template>
  54 + </el-table-column>
  55 + <el-table-column label="原价">
  56 + <template slot-scope="scope">
  57 + <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
  58 + <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />
  59 + </template>
  60 + </el-table-column>
  61 + <el-table-column label="库存">
  62 + <template slot-scope="scope">
  63 + <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
  64 + <el-input-number v-model="scope.row.stockNumber" :controls="false" :min="0" :precision="0" />
  65 + </template>
  66 + </el-table-column>
  67 + <el-table-column label="重量(KG)">
  68 + <template slot-scope="scope">
  69 + <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
  70 + <el-input-number v-model="scope.row.weight" :controls="false" :min="0" :precision="2" :step="0.01" />
  71 + </template>
  72 + </el-table-column>
  73 + <el-table-column label="国际条码">
  74 + <template slot-scope="scope">
  75 + <el-input v-model="scope.row.sku" />
  76 + </template>
  77 + </el-table-column>
  78 + </el-table>
  79 + </div>
  80 + <div v-else class="multiple-styles">
  81 + <div v-for="(skuAttr, index) in form.skuAttrList" :key="index" class="sku-attr-list">
  82 + <el-form-item label="规格名">
  83 + <el-input v-model="skuAttr.skuName" maxlength="20" />
  84 + <i v-if="index != 0" class="el-icon-close delImg" @click="delSkuAttrList(index)" />
  85 + <el-checkbox
  86 + v-if="index === 0"
  87 + v-model="skuAttr.needImg"
  88 + style="margin-left: 20px;"
  89 + >需要配图</el-checkbox>
  90 + </el-form-item>
  91 + <el-form-item label="规格值">
  92 + <div class="attr-value-list">
  93 + <div
  94 + v-for="(sku, index1) in skuAttr.values"
  95 + :key="index + '-' + index1"
  96 + class="main-diagram m-8"
  97 + >
  98 + <el-input v-model="sku.skuValue" maxlength="10" />
  99 + <i v-if="index === 0 && index1 === 0" />
  100 + <i v-else class="el-icon-close delImg" @click="delValue(index,index1)" />
  101 + <div v-if="skuAttr.needImg && index === 0" class="upload-wrap diagram-upload">
  102 + <div class="span-wrap">
  103 + <el-upload
  104 + list-type="picture-card"
  105 + :show-file-list="false"
  106 + :on-preview="handlePictureCardPreview"
  107 + :on-remove="handleRemove"
  108 + :headers="headers"
  109 + :data="dataObj"
  110 + :file-list="[sku]"
  111 + :multiple="false"
  112 + :on-success="handleImageSuccess1"
  113 + :action="action"
  114 + >
  115 + <i v-if="!sku.image" slot="trigger" class="el-icon-plus" />
  116 + <div v-else class="attr-value-img">
  117 + <img class="attr-thumbnail" :src="sku.image">
  118 + </div>
  119 + </el-upload>
  120 + <div v-if="sku.image" class="attr-actions">
  121 + <span
  122 + class="attr-preview"
  123 + @click="handlePictureCardPreview({imgPath:sku.image})"
  124 + >
  125 + <i class="el-icon-zoom-in" />
  126 + </span>
  127 + <span class="attr-delete" @click="handleRemove1(sku)">
  128 + <i class="el-icon-delete" />
  129 + </span>
  130 + </div>
  131 + </div>
  132 + </div>
  133 + </div>
  134 + <div class="tableBtn greens" style="margin-left: 10px;" @click="addAttrValue(index)">添加</div>
  135 + </div>
  136 + </el-form-item>
  137 + </div>
  138 + <el-button class="add-attr-btn" style="background-color: #3F9B6A;color: #fff" @click="addSkuAttrList">添加规格</el-button>
  139 + <el-table
  140 + :data="skuList"
  141 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
  142 + >
  143 + <el-table-column
  144 + v-for="(skuAttr, index) in skuAttrName"
  145 + :key="index"
  146 + :label="skuAttr.skuName"
  147 + >
  148 + <template slot-scope="scope">
  149 + {{
  150 + scope.row.skuAttrCodeDTOList &&
  151 + scope.row.skuAttrCodeDTOList[index]
  152 + | attrValueFilter(form.skuAttrList)
  153 + }}
  154 + </template>
  155 + </el-table-column>
  156 + <el-table-column label="售价">
  157 + <template slot-scope="scope">
  158 + <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
  159 + <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />
  160 + </template>
  161 + </el-table-column>
  162 + <el-table-column label="原价">
  163 + <template slot-scope="scope">
  164 + <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
  165 + <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />
  166 + </template>
  167 + </el-table-column>
  168 + <!-- <el-table-column label="成本">
  169 + <template slot-scope="scope">
  170 + <el-input-number v-model="scope.row.cost" :controls="false" :min="0" :precision="2" :step="0.01" />
  171 + </template>
  172 + </el-table-column> -->
  173 + <el-table-column label="库存">
  174 + <template slot-scope="scope">
  175 + <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->
  176 + <el-input-number v-model="scope.row.stockNumber" :controls="false" :min="0" :precision="0" />
  177 + </template>
  178 + </el-table-column>
  179 + <el-table-column label="重量(KG)">
  180 + <template slot-scope="scope">
  181 + <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->
  182 + <el-input-number v-model="scope.row.weight" :controls="false" :min="0" :precision="6" :step="0.01" />
  183 + </template>
  184 + </el-table-column>
  185 + <el-table-column label="国际条码">
  186 + <template slot-scope="scope">
  187 + <el-input v-model="scope.row.sku" />
  188 + </template>
  189 + </el-table-column>
  190 + <!-- <el-table-column label="操作">
  191 + <template slot-scope="scope">
  192 + <el-button type="text" @click="delAttrValue(scope.row,scope.$index,scope.row,scope)">删除</el-button>
  193 + </template>
  194 + </el-table-column> -->
  195 + </el-table>
  196 + </div>
  197 + </div>
  198 + <el-dialog
  199 + :append-to-body="true"
  200 + :visible.sync="dialogVisible"
  201 + title="查看图片"
  202 + center
  203 + custom-class="bian_css"
  204 + >
  205 + <img width="100%" :src="dialogImageUrl" alt>
  206 + </el-dialog>
  207 + </div>
  208 +</template>
  209 +<script>
  210 +import { uploadUrl } from '@/utils/request'
  211 +import { getToken } from '@/utils/auth'
  212 +import upimg from "@/components/ImageUpload/index"
  213 +export default {
  214 + components: {
  215 + upimg
  216 + },
  217 + filters: {
  218 + attrValueFilter(map, list) {
  219 + const hasChilds =
  220 + list &&
  221 + list.filter(skuAttr => {
  222 + const hasChild = skuAttr.values.some(attr => {
  223 + return attr.skuValue
  224 + })
  225 + return skuAttr.skuName && hasChild
  226 + })
  227 + if (!map) {
  228 + return ''
  229 + }
  230 + const { code, valueCode } = map
  231 + let codeStr = ''
  232 + hasChilds.map(item => {
  233 + const { values } = item
  234 + values &&
  235 + values.some(attr => {
  236 + const isSome = item.code === code && attr.valueCode === valueCode
  237 + if (isSome) {
  238 + codeStr = attr.skuValue
  239 + }
  240 + return isSome
  241 + })
  242 + })
  243 + return codeStr
  244 + }
  245 + },
  246 + props: {
  247 + form: {
  248 + type: Object,
  249 + default() {
  250 + return {}
  251 + }
  252 + }
  253 + },
  254 + data() {
  255 + return {
  256 + dialogImageUrl: '',
  257 + dialogVisible: false,
  258 + newform: this.form,
  259 + headers: {
  260 + 'Authorization-business': getToken()
  261 + },
  262 + action: uploadUrl,
  263 + dataObj: {
  264 + folderId: 1
  265 + },
  266 + fileList: []
  267 + }
  268 + },
  269 + computed: {
  270 + skuAttrName() {
  271 + return (
  272 + this.form.skuAttrList &&
  273 + this.form.skuAttrList.filter(skuAttr => {
  274 + const hasChilds = skuAttr.values.some(attr => {
  275 + return attr.skuValue
  276 + })
  277 + return skuAttr.skuName && hasChilds
  278 + })
  279 + )
  280 + },
  281 + singleStyle() {
  282 + if (this.form.skuAttrList && this.form.skuAttrList[0]) {
  283 + return this.form.skuAttrList && this.form.skuAttrList[0].values[0]
  284 + }
  285 + return {
  286 + skuValue: ''
  287 + }
  288 + },
  289 + skuList() {
  290 + if (this.form.attrStyle === 0) {
  291 + return this.form.skuList.slice(0, 1)
  292 + }
  293 + return this.form.skuList
  294 + }
  295 + },
  296 + watch: {
  297 + 'form.skuAttrList': {
  298 + handler(newVal, oldVal) {
  299 + // 判断是否有规格值
  300 + const hasChilds =
  301 + this.form.skuAttrList &&
  302 + this.form.skuAttrList.filter(skuAttr => {
  303 + const hasChild = skuAttr.values.some(attr => {
  304 + return attr.skuValue
  305 + })
  306 + return skuAttr.skuName && hasChild
  307 + })
  308 + if (this.form.attrStyle === 1 && hasChilds.length) {
  309 + this.skuFormat()
  310 + }
  311 + // console.log(newVal);
  312 + // console.log(oldVal);
  313 + },
  314 + deep: true
  315 + },
  316 + 'form.skuList': {
  317 + handler(newVal, oldVal) {
  318 + // console.log(newVal);
  319 + // console.log(oldVal);
  320 + },
  321 + deep: true
  322 + }
  323 + },
  324 + created() {
  325 + this.headers.tenant = 'MDAwMA=='
  326 + },
  327 + methods: {
  328 + imgsGeshi(val){
  329 + let arr = []
  330 + val.forEach(item => {
  331 + arr.push(item.imgPath)
  332 + });
  333 + arr = arr.join(',')
  334 + return arr
  335 + },
  336 + changimg(e, type) {
  337 + e = e.split(',')
  338 + this.form.imgs = []
  339 + e.map(item => {
  340 + this.form.imgs.push({
  341 + imgPath: item
  342 + })
  343 + })
  344 + },
  345 + // proving1(e) {
  346 + // var keynum = window.event ? e.keyCode : e.which // 获取键盘码
  347 + // // var keychar = String.fromCharCode(keynum) // 获取键盘码对应的字符
  348 + // console.log(
  349 + // e.key
  350 + // .replace(/[^\d^\.]+/g, '')
  351 + // .replace('.', '$#$')
  352 + // .replace(/\./g, '')
  353 + // .replace('$#$', '.')
  354 + // )
  355 + // console.log(keynum)
  356 + // if (
  357 + // e.key
  358 + // .replace(/[^\d^\.]+/g, '')
  359 + // .replace('.', '$#$')
  360 + // .replace(/\./g, '')
  361 + // .replace('$#$', '.') === '' &&
  362 + // keynum !== 8
  363 + // ) {
  364 + // this.$message.warning('禁止输入中文或空')
  365 + // e.target.value = ' '
  366 + // }
  367 + // },
  368 + handleImageSuccess(response) {
  369 + const url = response.data.url
  370 + this.form.imgs.push({
  371 + imgPath: url
  372 + })
  373 + },
  374 + // 移除图片
  375 + handleRemove(file) {
  376 + const { imgPath } = file
  377 + this.form.imgs = this.form.imgs.filter(item => {
  378 + return item.imgPath !== imgPath
  379 + })
  380 + },
  381 + handleRemove1(file) {
  382 + file.image = ''
  383 + },
  384 + handlePictureCardPreview(file) {
  385 + this.dialogImageUrl = file.imgPath
  386 + this.dialogVisible = true
  387 + },
  388 + handleImageSuccess1(response, file, fileList) {
  389 + const url = response.data.url
  390 + fileList[0].image = url
  391 + },
  392 + del(row, index, arr) {
  393 + console.log(row, index)
  394 + // this.form.skuList.splice(index, 1);
  395 + // console.log(this.form.skuAttrList);
  396 + // console.log(this.form.skuList);
  397 + console.log(arr)
  398 + },
  399 + //
  400 + changeAttrStyle(index) {
  401 + console.log(index)
  402 + console.log(this.form)
  403 + // if (index === 0) {
  404 + // this.form.skuAttrList = []
  405 + // }
  406 + },
  407 + addSkuAttrList() {
  408 + this.form.skuAttrList.push({
  409 + code: '',
  410 + skuName: '',
  411 + values: [
  412 + {
  413 + skuValue: '',
  414 + valueCode: '',
  415 + image: '',
  416 + isDelete: 0,
  417 + sortOrder: 0
  418 + }
  419 + ],
  420 + isDelete: 0,
  421 + needImg: 0,
  422 + sortOrder: 0
  423 + })
  424 + },
  425 + addAttrValue(index) {
  426 + this.form.skuAttrList[index].values.push({
  427 + skuValue: '',
  428 + valueCode: '',
  429 + image: ''
  430 + })
  431 + },
  432 + // 删除规格值
  433 + delValue(index, index1) {
  434 + const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
  435 + const valueObj = {
  436 + code: newList.code,
  437 + skuId: newList.skuId,
  438 + valueCode: newList.values[index1].valueCode
  439 + }
  440 + this.form.deletes.push(valueObj)
  441 + this.form.skuAttrList[index].values.splice(index1, 1)
  442 + },
  443 + // 删除规格名
  444 + delSkuAttrList(index) {
  445 + const newList = JSON.parse(JSON.stringify(this.form.skuAttrList[index]))
  446 + newList.values.forEach(item => {
  447 + const valueObj = {
  448 + code: newList.code,
  449 + skuId: newList.skuId,
  450 + valueCode: ''
  451 + }
  452 + valueObj.valueCode = item.valueCode
  453 + this.form.deletes.push(valueObj)
  454 + })
  455 + this.form.skuAttrList.splice(index, 1)
  456 + },
  457 + delAttrValue1(row, index, arr) {
  458 +
  459 + },
  460 + skuFormat() {
  461 + const skuListArray = []
  462 + const result = {
  463 + isDelete: 0,
  464 + productId: '',
  465 + skuAttrCodeDTOList: [
  466 + {
  467 + code: '',
  468 + valueCode: ''
  469 + }
  470 + ],
  471 + sku: '',
  472 + skuImg: '',
  473 + price: 0,
  474 + originalPrice: 0,
  475 + stockNumber: 0,
  476 + weight: 0
  477 + }
  478 + const doExchange = (arr, depth) => {
  479 + const map = {
  480 + arr: []
  481 + }
  482 + for (var i = 0; i < arr[depth].length; i++) {
  483 + map.arr.push(arr[depth][i])
  484 + const { code, valueCode, attrId } = arr[depth][i]
  485 + result.skuAttrCodeDTOList[depth] = {
  486 + code,
  487 + valueCode,
  488 + attrId
  489 + }
  490 + if (depth !== arr.length - 1) {
  491 + doExchange(arr, depth + 1)
  492 + } else {
  493 + skuListArray.push(JSON.parse(JSON.stringify(result)))
  494 + }
  495 + }
  496 + }
  497 + // this.form.skuList = skuListArray
  498 + // 获取规格值的所有组合
  499 + const values = []
  500 + this.form.skuAttrList.map((skuItem, index) => {
  501 + const attrList = []
  502 + skuItem.code = skuItem.code || 'attr_code_' + index
  503 + const { code } = skuItem
  504 + skuItem.values &&
  505 + skuItem.values.map((attrItem, index1) => {
  506 + attrItem.valueCode = skuItem.valueCode || code + '_value_' + index1
  507 + const skuId = attrItem.skuId
  508 + const attrId = attrItem.attrId
  509 + if (attrItem.skuValue) {
  510 + attrList.push({
  511 + skuId,
  512 + attrId,
  513 + code,
  514 + valueCode: attrItem.valueCode
  515 + })
  516 + }
  517 + })
  518 + if (attrList.length) {
  519 + values.push(attrList)
  520 + }
  521 + })
  522 + // 相互组合
  523 + if (values.length) {
  524 + doExchange(values, 0)
  525 + }
  526 + this.form.skuList = skuListArray.map(sku1 => {
  527 + const { skuAttrList, skuAttrCodeDTOList } = sku1
  528 + const skuAttrList1 = skuAttrCodeDTOList || skuAttrList
  529 + const skuMap = this.form.skuList.filter(sku2 => {
  530 + const skuAttrList2 = sku2.skuAttrList
  531 + sku2.skuAttrCodeDTOList = skuAttrList2
  532 + if (!skuAttrList2) return false
  533 + const ids = []
  534 + skuAttrList1.filter(item => ids.push(item.id))
  535 + const result = skuAttrList2.every(
  536 + item => ids.indexOf(item.attrValueId) !== -1
  537 + )
  538 + return result
  539 + })
  540 + let selectMap = sku1
  541 + if (skuMap && skuMap.length) {
  542 + selectMap = JSON.parse(JSON.stringify(skuMap[0]))
  543 + selectMap.skuAttrCodeDTOList = skuAttrCodeDTOList
  544 + }
  545 + return selectMap
  546 + })
  547 + }
  548 + }
  549 +}
  550 +</script>
  551 +<style lang="scss" scoped>
  552 +@import url("../../../styles/elDialog.scss");
  553 +.style-information-component {
  554 + width: 100%;
  555 + min-height: 300px;
  556 + padding: 24px;
  557 + background-color: rgb(255, 255, 255);
  558 + .el-form-item {
  559 + margin-bottom: 10px;
  560 + }
  561 + .attr-value-list {
  562 + display: flex;
  563 + flex-wrap: wrap;
  564 + .main-diagram {
  565 + width: 180px;
  566 + .span-wrap {
  567 + position: relative;
  568 + display: inline-block;
  569 + margin-top: 10px;
  570 + .attr-actions {
  571 + line-height: 100px;
  572 + position: absolute;
  573 + width: 100%;
  574 + height: 100%;
  575 + left: 0;
  576 + top: 0;
  577 + cursor: default;
  578 + text-align: center;
  579 + color: #fff;
  580 + opacity: 0;
  581 + font-size: 20px;
  582 + background-color: rgba(0, 0, 0, 0.5);
  583 + -webkit-transition: opacity 0.3s;
  584 + transition: opacity 0.3s;
  585 + z-index: 1;
  586 + &:hover {
  587 + opacity: 1;
  588 + .attr-preview {
  589 + display: inline-block;
  590 + }
  591 + i {
  592 + color: #fff;
  593 + font-size: 20px;
  594 + }
  595 + }
  596 + }
  597 + .attr-preview {
  598 + display: none;
  599 + cursor: pointer;
  600 + font-size: 20px;
  601 + color: #fff;
  602 + }
  603 + .attr-delete {
  604 + margin-left: 15px;
  605 + color: #fff;
  606 + }
  607 + }
  608 + .attr-value-img {
  609 + width: 100%;
  610 + height: 100%;
  611 + img {
  612 + width: 100%;
  613 + height: 100%;
  614 + object-fit: contain;
  615 + }
  616 + }
  617 + }
  618 + }
  619 + .m-8 {
  620 + margin-right: 8px;
  621 + }
  622 + .upload-btn {
  623 + box-sizing: border-box;
  624 + display: flex;
  625 + align-items: center;
  626 + justify-content: center;
  627 + width: 100%;
  628 + height: 110px;
  629 + cursor: pointer;
  630 + border: 2px dashed #2e60f8;
  631 + border-radius: 2px;
  632 + background-color: #f8f9fb;
  633 + text-align: center;
  634 + font-size: 20px;
  635 + color: #2e60f8;
  636 + i {
  637 + color: #2e60f8;
  638 + font-size: 20px;
  639 + }
  640 + .upload-title {
  641 + margin-left: 10px;
  642 + font-size: 14px;
  643 + }
  644 + }
  645 + .upload-wrap {
  646 + margin-bottom: 25px;
  647 + .el-upload-list__item {
  648 + transition: none !important;
  649 + }
  650 + .el-upload,
  651 + .el-upload-list__item {
  652 + width: 100px;
  653 + height: 100px;
  654 + line-height: 100px;
  655 + }
  656 + .el-progress,
  657 + .el-progress-circle {
  658 + width: 80px !important;
  659 + height: 80px !important;
  660 + }
  661 + }
  662 + .sku-attr-list {
  663 + .el-input {
  664 + width: 180px;
  665 + }
  666 + }
  667 + .single-style {
  668 + .el-input {
  669 + max-width: 180px;
  670 + }
  671 + }
  672 + .add-attr-btn {
  673 + margin-bottom: 25px;
  674 + }
  675 + .check-image-dialog {
  676 + .el-dialog {
  677 + margin-top: 25px;
  678 + .el-dialog__body {
  679 + img {
  680 + max-width: 100%;
  681 + max-height: 100%;
  682 + height: 500px;
  683 + object-fit: contain;
  684 + }
  685 + }
  686 + }
  687 + }
  688 + .delImg{
  689 + position: absolute;
  690 + top: 12px;
  691 + margin-left: -24px
  692 + }
  693 + .delImg:hover{
  694 + border-radius: 50%;
  695 + color: #ffffff;
  696 + background:#2e60f8;
  697 + cursor: pointer;
  698 + }
  699 +}
  700 +</style>
merchant-web-master/src/views/stockControl/inventory/addComponent.vue
  View file @89bb9f2
1 <template> 1 <template>
2 <div class="style-information-component"> 2 <div class="style-information-component">
3 - <el-form-item label="商品图片" />  
4 - <div class="upload-wrap">  
5 - <upimg filePath="bueniss" :value="imgsGeshi(form.imgs)" inputtype="coverImage" :limit="5"  
6 - @changimg="e=>changimg(e,'imgs')"></upimg>  
7 - <!-- <el-upload  
8 - list-type="picture-card"  
9 - :on-preview="handlePictureCardPreview"  
10 - :on-remove="handleRemove"  
11 - :headers="headers"  
12 - :data="dataObj"  
13 - :file-list="form.imgs"  
14 - :limit="20"  
15 - :on-success="handleImageSuccess"  
16 - :action="action"  
17 - >  
18 - <i slot="default" class="el-icon-plus" />  
19 - <div slot="file" slot-scope="{ file }">  
20 - <img class="el-upload-list__item-thumbnail" :src="file.imgPath">  
21 - <span class="el-upload-list__item-actions">  
22 - <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">  
23 - <i class="el-icon-zoom-in" />  
24 - </span>  
25 - <span class="el-upload-list__item-delete" @click="handleRemove(file)">  
26 - <i class="el-icon-delete" /> 3 + <el-form-item label="商品图片" >
  4 + <div class="upload-wrap">
  5 + <upimg filePath="bueniss" :value="imgsGeshi(form.imgs)" inputtype="coverImage" :limit="5"
  6 + @changimg="e=>changimg(e,'imgs')"></upimg>
  7 + <!-- <el-upload
  8 + list-type="picture-card"
  9 + :on-preview="handlePictureCardPreview"
  10 + :on-remove="handleRemove"
  11 + :headers="headers"
  12 + :data="dataObj"
  13 + :file-list="form.imgs"
  14 + :limit="20"
  15 + :on-success="handleImageSuccess"
  16 + :action="action"
  17 + >
  18 + <i slot="default" class="el-icon-plus" />
  19 + <div slot="file" slot-scope="{ file }">
  20 + <img class="el-upload-list__item-thumbnail" :src="file.imgPath">
  21 + <span class="el-upload-list__item-actions">
  22 + <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
  23 + <i class="el-icon-zoom-in" />
  24 + </span>
  25 + <span class="el-upload-list__item-delete" @click="handleRemove(file)">
  26 + <i class="el-icon-delete" />
  27 + </span>
27 </span> 28 </span>
28 - </span>  
29 - </div>  
30 - </el-upload> -->  
31 - </div>  
32 - <el-form-item label="款式设置">  
33 - <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">  
34 - <el-radio :label="0">单款式</el-radio>  
35 - <el-radio :label="1">多款式</el-radio>  
36 - </el-radio-group> 29 + </div>
  30 + </el-upload> -->
  31 + </div>
37 </el-form-item> 32 </el-form-item>
38 - <div class="style-container"> 33 + <el-form-item label="规格设置">
  34 + <div class="style-container" >
39 <div v-if="form.attrStyle === 0" class="single-style"> 35 <div v-if="form.attrStyle === 0" class="single-style">
40 <el-table 36 <el-table
41 :data="skuList" 37 :data="skuList"
42 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}" 38 +
  39 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
43 > 40 >
44 <el-table-column label="规格"> 41 <el-table-column label="规格">
45 <template slot-scope="scope"> 42 <template slot-scope="scope">
46 <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="40" /> 43 <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="40" />
47 </template> 44 </template>
48 </el-table-column> 45 </el-table-column>
49 - <el-table-column label="售价"> 46 + <el-table-column label="售价(/元)">
50 <template slot-scope="scope"> 47 <template slot-scope="scope">
51 <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> --> 48 <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
52 <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" /> 49 <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />
53 </template> 50 </template>
54 </el-table-column> 51 </el-table-column>
55 - <el-table-column label="原价"> 52 + <el-table-column label="原价(/元)">
56 <template slot-scope="scope"> 53 <template slot-scope="scope">
57 <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> --> 54 <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
58 <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" /> 55 <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />
@@ -131,76 +128,28 @@ @@ -131,76 +128,28 @@
131 </div> 128 </div>
132 </div> 129 </div>
133 </div> 130 </div>
134 - <div class="tableBtn greens" style="margin-left: 10px;" @click="addAttrValue(index)">添加</div> 131 + <el-button type="primary" style="margin-left: 10px;" @click="addAttrValue(index)">添加</el-button>
135 </div> 132 </div>
136 </el-form-item> 133 </el-form-item>
137 </div> 134 </div>
138 - <el-button class="add-attr-btn" style="background-color: #3F9B6A;color: #fff" @click="addSkuAttrList">添加规格</el-button>  
139 - <el-table  
140 - :data="skuList"  
141 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"  
142 - >  
143 - <el-table-column  
144 - v-for="(skuAttr, index) in skuAttrName"  
145 - :key="index"  
146 - :label="skuAttr.skuName"  
147 - >  
148 - <template slot-scope="scope">  
149 - {{  
150 - scope.row.skuAttrCodeDTOList &&  
151 - scope.row.skuAttrCodeDTOList[index]  
152 - | attrValueFilter(form.skuAttrList)  
153 - }}  
154 - </template>  
155 - </el-table-column>  
156 - <el-table-column label="售价">  
157 - <template slot-scope="scope">  
158 - <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->  
159 - <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />  
160 - </template>  
161 - </el-table-column>  
162 - <el-table-column label="原价">  
163 - <template slot-scope="scope">  
164 - <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->  
165 - <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />  
166 - </template>  
167 - </el-table-column>  
168 - <!-- <el-table-column label="成本">  
169 - <template slot-scope="scope">  
170 - <el-input-number v-model="scope.row.cost" :controls="false" :min="0" :precision="2" :step="0.01" />  
171 - </template>  
172 - </el-table-column> -->  
173 - <el-table-column label="库存">  
174 - <template slot-scope="scope">  
175 - <!-- <el-input v-model="scope.row.stockNumber" type="number" oninput="value=value.replace(/[^\d]/g,'')" /> -->  
176 - <el-input-number v-model="scope.row.stockNumber" :controls="false" :min="0" :precision="0" />  
177 - </template>  
178 - </el-table-column>  
179 - <el-table-column label="重量(KG)">  
180 - <template slot-scope="scope">  
181 - <!-- <el-input v-model="scope.row.weight" type="number" oninput="value=value.replace(/-/, '')" /> -->  
182 - <el-input-number v-model="scope.row.weight" :controls="false" :min="0" :precision="6" :step="0.01" />  
183 - </template>  
184 - </el-table-column>  
185 - <el-table-column label="国际条码">  
186 - <template slot-scope="scope">  
187 - <el-input v-model="scope.row.sku" />  
188 - </template>  
189 - </el-table-column>  
190 - <!-- <el-table-column label="操作">  
191 - <template slot-scope="scope">  
192 - <el-button type="text" @click="delAttrValue(scope.row,scope.$index,scope.row,scope)">删除</el-button>  
193 - </template>  
194 - </el-table-column> -->  
195 - </el-table> 135 + <el-button class="add-attr-btn" type="primary" @click="addSkuAttrList">添加规格</el-button>
  136 +
196 </div> 137 </div>
197 </div> 138 </div>
  139 + </el-form-item>
  140 + <!-- <el-form-item label="款式设置" >
  141 + <el-radio-group v-model="form.attrStyle" @change="changeAttrStyle">
  142 + <el-radio :label="0">单款式</el-radio>
  143 + <el-radio :label="1">多款式</el-radio>
  144 + </el-radio-group>
  145 + </el-form-item> -->
  146 +
198 <el-dialog 147 <el-dialog
199 :append-to-body="true" 148 :append-to-body="true"
200 :visible.sync="dialogVisible" 149 :visible.sync="dialogVisible"
  150 + class="check-image-dialog"
201 title="查看图片" 151 title="查看图片"
202 - center  
203 - custom-class="bian_css" 152 + center="center"
204 > 153 >
205 <img width="100%" :src="dialogImageUrl" alt> 154 <img width="100%" :src="dialogImageUrl" alt>
206 </el-dialog> 155 </el-dialog>
merchant-web-master/src/views/stockControl/inventory/index.vue
  View file @89bb9f2
1 <!-- --> 1 <!-- -->
2 <template> 2 <template>
3 <div style="padding: 0 10px;background-color:#f7f7f7;"> 3 <div style="padding: 0 10px;background-color:#f7f7f7;">
4 - <div class="pending"> 4 + <div class="pending" v-if ="ontype == '1'">
5 <!-- 搜索 --> 5 <!-- 搜索 -->
6 <div class="formSearch" style="margin-bottom:10px"> 6 <div class="formSearch" style="margin-bottom:10px">
7 <el-form :inline="true" :model="formInline" class="demo-form-inline"> 7 <el-form :inline="true" :model="formInline" class="demo-form-inline">
8 <el-form-item label="商品名称"> 8 <el-form-item label="商品名称">
9 - <el-input v-model="formInline.search" placeholder="请输入商品名称" /> 9 + <el-input v-model="formInline.search" placeholder="请输入商品名称" />
10 </el-form-item> 10 </el-form-item>
11 <el-form-item label="上架状态"> 11 <el-form-item label="上架状态">
12 - <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" > 12 + <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
13 <el-option label="全部" :value="null" /> 13 <el-option label="全部" :value="null" />
14 <el-option label="上架" value="1" /> 14 <el-option label="上架" value="1" />
15 <el-option label="下架" value="0" /> 15 <el-option label="下架" value="0" />
16 </el-select> 16 </el-select>
17 </el-form-item> 17 </el-form-item>
18 <el-form-item label="官方分类"> 18 <el-form-item label="官方分类">
19 - <el-cascader  
20 -  
21 - v-model="formInline.classifyId"  
22 - :options="categoryList"  
23 - clearable  
24 - :props="{ 19 + <el-cascader v-model="formInline.classifyId" :options="categoryList" clearable :props="{
25 checkStrictly: true, 20 checkStrictly: true,
26 expandTrigger: 'hover', 21 expandTrigger: 'hover',
27 label:'categoryName', 22 label:'categoryName',
28 value:'id', 23 value:'id',
29 children:'childs' 24 children:'childs'
30 - }"  
31 - /> 25 + }" />
32 </el-form-item> 26 </el-form-item>
33 </el-form> 27 </el-form>
34 <div> 28 <div>
35 - <el-button style="background-color: #3F9B6A;color: #fff" @click="search" >查询</el-button>  
36 - <el-button @click="clear" class="buttonHover" 29 + <el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
  30 + <el-button @click="clear" class="buttonHover"
37 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button> 31 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
38 </div> 32 </div>
39 33
40 </div> 34 </div>
41 <div style="margin-bottom:20px;"> 35 <div style="margin-bottom:20px;">
42 - <el-button style="background-color: #3F9B6A;color: #fff" @click="rukdengji" >入库登记</el-button>  
43 - <el-button style="background-color: #3F9B6A;color: #fff" @click="shopzuhe" >商品组合</el-button>  
44 - <el-button style="background-color: #3F9B6A;color: #fff" @click="productDataExport" >导出商品</el-button> 36 + <!-- <el-button style="background-color: #3F9B6A;color: #fff" @click="rukdengji" >入库登记</el-button> -->
  37 + <el-button style="background-color: #3F9B6A;color: #fff" @click="rukdengji">补货</el-button>
  38 + <el-button style="background-color: #3F9B6A;color: #fff" @click="shopzuhe">商品组合</el-button>
  39 + <el-button style="background-color: #3F9B6A;color: #fff" @click="productDataExport">导出商品</el-button>
45 </div> 40 </div>
46 <!-- 表格 --> 41 <!-- 表格 -->
47 <div class="tableBox"> 42 <div class="tableBox">
48 - <el-table  
49 - ref="multipleTable"  
50 - :data="tableData"  
51 - tooltip-effect="dark"  
52 - @selection-change="handleSelectionChange"  
53 - :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"  
54 - >  
55 - <el-table-column  
56 - type="selection"  
57 - v-if="teble_sel"  
58 - min-width="4%"> 43 + <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
  44 + :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
  45 + <el-table-column type="selection" v-if="teble_sel" min-width="4%">
59 </el-table-column> 46 </el-table-column>
60 <el-table-column prop="productId" label="商品id" show-overflow-tooltip /> 47 <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
61 <el-table-column label="商品主图" width="150" align="center"> 48 <el-table-column label="商品主图" width="150" align="center">
@@ -85,10 +72,10 @@ @@ -85,10 +72,10 @@
85 <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip /> 72 <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
86 <el-table-column prop="registrationStatus" label="登记状态" show-overflow-tooltip> 73 <el-table-column prop="registrationStatus" label="登记状态" show-overflow-tooltip>
87 <template slot-scope="scope"> 74 <template slot-scope="scope">
88 - <span v-if="scope.row.registrationStatus==''">未入库</span>  
89 - <span v-if="scope.row.registrationStatus==1">已入库</span>  
90 - </template>  
91 - </el-table-column> 75 + <span v-if="scope.row.registrationStatus==''">未入库</span>
  76 + <span v-if="scope.row.registrationStatus==1">已入库</span>
  77 + </template>
  78 + </el-table-column>
92 <el-table-column prop="createTime" label="创建时间" width="180" /> 79 <el-table-column prop="createTime" label="创建时间" width="180" />
93 <el-table-column label="操作" width="200" fixed="right"> 80 <el-table-column label="操作" width="200" fixed="right">
94 <template slot-scope="scope"> 81 <template slot-scope="scope">
@@ -96,71 +83,49 @@ @@ -96,71 +83,49 @@
96 <div class="tableBtn greens" @click="edit(scope.row)">编辑</div> 83 <div class="tableBtn greens" @click="edit(scope.row)">编辑</div>
97 <div v-if="scope.row.shelveState==0" class="tableBtn greens" @click="down(scope.row)">上架</div> 84 <div v-if="scope.row.shelveState==0" class="tableBtn greens" @click="down(scope.row)">上架</div>
98 <div v-if="scope.row.shelveState==1" class="tableBtn greens" @click="down(scope.row)">下架</div> 85 <div v-if="scope.row.shelveState==1" class="tableBtn greens" @click="down(scope.row)">下架</div>
99 - <div v-if="scope.row.combinationId != '' && scope.row.stockNumber != 0" class="tableBtn greens" @click="chaiFen(scope.row)" >拆分</div>  
100 - <div @click="setVipPrice(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens" >设置会员价</div> 86 + <div v-if="scope.row.combinationId != '' && scope.row.stockNumber != 0" class="tableBtn greens"
  87 + @click="chaiFen(scope.row)">拆分</div>
  88 + <div @click="setVipPrice(scope.row)" v-if="scope.row.shelveState==1" class="tableBtn greens">设置会员价</div>
101 <div v-if="scope.row.shelveState!=1" class="tableBtn greens" @click="del(scope.row)">删除</div> 89 <div v-if="scope.row.shelveState!=1" class="tableBtn greens" @click="del(scope.row)">删除</div>
102 </div> 90 </div>
103 </template> 91 </template>
104 </el-table-column> 92 </el-table-column>
105 </el-table> 93 </el-table>
106 <div class="fenye"> 94 <div class="fenye">
107 - <el-pagination  
108 - :current-page="formInline.page"  
109 - :page-sizes="[10, 20, 50, 100]"  
110 - :page-size="10"  
111 - background  
112 - small  
113 - layout="prev, pager, next,total"  
114 - :total="total"  
115 - @size-change="handleSizeChange"  
116 - @current-change="handleCurrentChange"  
117 - /> 95 + <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10" background
  96 + small layout="prev, pager, next,total" :total="total" @size-change="handleSizeChange"
  97 + @current-change="handleCurrentChange" />
118 </div> 98 </div>
119 - <div style="padding: 5px 10px 5px 20px;border:1px solid #EBEEF5;display: flex;justify-content: space-between;margin-top: 10px;" v-if="teble_sel">  
120 - <div style="font-size: 14px;">  
121 - <span>已选择{{this.zuheNum}}项</span>  
122 - <div  
123 - class="tableBtn greens"  
124 - style="color: #3F9B6A;font-size: 14px;margin-left: 10px;"  
125 - @click="toggleSelection"  
126 - >清楚选项</div>  
127 - </div>  
128 - <div>  
129 - <el-button @click="zuheShop(index)" style="background-color: #3F9B6A;color: #fff;">{{index==1?'确定登记':'确定组合'}}</el-button>  
130 - <el-button @click="selClose" class="buttonHover"  
131 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>  
132 - </div> 99 + <div
  100 + style="padding: 5px 10px 5px 20px;border:1px solid #EBEEF5;display: flex;justify-content: space-between;margin-top: 10px;"
  101 + v-if="teble_sel">
  102 + <div style="font-size: 14px;">
  103 + <span>已选择{{this.zuheNum}}项</span>
  104 + <div class="tableBtn greens" style="color: #3F9B6A;font-size: 14px;margin-left: 10px;"
  105 + @click="toggleSelection">清楚选项</div>
  106 + </div>
  107 + <div>
  108 + <el-button @click="zuheShop(index)"
  109 + style="background-color: #3F9B6A;color: #fff;">{{index==1?'确定登记':'确定组合'}}</el-button>
  110 + <el-button @click="selClose" class="buttonHover"
  111 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
  112 + </div>
133 </div> 113 </div>
134 </div> 114 </div>
135 </div> 115 </div>
136 116
137 <!-- 新增/修改商品弹窗 --> 117 <!-- 新增/修改商品弹窗 -->
138 - <el-dialog  
139 - :title="!commId ? '新增商品' : '登记商品'"  
140 - :visible.sync="commidyVisible"  
141 - width="70%"  
142 - center  
143 - custom-class="bian_css"  
144 - top="6vh"  
145 - :close-on-click-modal="false"  
146 - @before-close="closeModal"  
147 - @close="closeModal"  
148 - >  
149 - <CommAdd  
150 - ref="child"  
151 - :show-tinymce="showTinymce"  
152 - :product-id="commId"  
153 - @cancel="cancelForm"  
154 - :message="parentMessage"  
155 - />  
156 - </el-dialog> 118 + <!-- <el-dialog :title="!commId ? '新增商品' : '登记商品'" :visible.sync="commidyVisible" width="70%" center
  119 + custom-class="bian_css" top="6vh" :close-on-click-modal="false" @before-close="closeModal" @close="closeModal">
  120 + <CommAdd ref="child" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm"
  121 + :message="parentMessage" />
  122 + </el-dialog> -->
  123 + <div v-if ="ontype == '2'" class="pending">
  124 +
  125 + <CommAdd v-if ="ontype == '2'" ref="child" :show-tinymce="showTinymce" :product-id="commId" @cancel="cancelForm" />
  126 + </div>
157 <!-- 设置会员价弹窗 --> 127 <!-- 设置会员价弹窗 -->
158 - <el-dialog  
159 - title="设置会员价"  
160 - :visible.sync="vipPriceVisible"  
161 - width="50%"  
162 - class="vipDialog"  
163 - > 128 + <el-dialog title="设置会员价" :visible.sync="vipPriceVisible" width="50%" class="vipDialog">
164 <el-form ref="form" label-width="80px"> 129 <el-form ref="form" label-width="80px">
165 <el-form-item label="优惠方式"> 130 <el-form-item label="优惠方式">
166 <el-radio-group v-model="mode"> 131 <el-radio-group v-model="mode">
@@ -169,15 +134,15 @@ @@ -169,15 +134,15 @@
169 </el-radio-group> 134 </el-radio-group>
170 </el-form-item> 135 </el-form-item>
171 <div class="priceTable"> 136 <div class="priceTable">
172 - <table >  
173 - <tr >  
174 - <th >规格</th>  
175 - <th >售价</th> 137 + <table>
  138 + <tr>
  139 + <th>规格</th>
  140 + <th>售价</th>
176 <th v-for="(item,index) in gradeList" :key="index"> 141 <th v-for="(item,index) in gradeList" :key="index">
177 {{ item }} 142 {{ item }}
178 </th> 143 </th>
179 </tr> 144 </tr>
180 - <tr v-for="(item,index) in productData" :key="index" > 145 + <tr v-for="(item,index) in productData" :key="index">
181 <td> 146 <td>
182 {{ item.value }} 147 {{ item.value }}
183 </td> 148 </td>
@@ -185,46 +150,59 @@ @@ -185,46 +150,59 @@
185 {{ item.price }} 150 {{ item.price }}
186 </td> 151 </td>
187 <td v-for="(itemJ,indexJ) in item.memberPrices" :key="indexJ" class="td-input"> 152 <td v-for="(itemJ,indexJ) in item.memberPrices" :key="indexJ" class="td-input">
188 - <el-input v-model="itemJ.price" oninput="value=value.replace(/([^\d|\.])/g, '')" /> {{ mode==1?'折':'元' }} 153 + <el-input v-model="itemJ.price" oninput="value=value.replace(/([^\d|\.])/g, '')" />
  154 + {{ mode==1?'折':'元' }}
189 </td> 155 </td>
190 </tr> 156 </tr>
191 </table> 157 </table>
192 </div> 158 </div>
193 - <el-button style="background-color: #3F9B6A;color: #fff;" class="clearBtn" @click="clearProductMember">清除所有旧会员价</el-button> 159 + <el-button style="background-color: #3F9B6A;color: #fff;" class="clearBtn"
  160 + @click="clearProductMember">清除所有旧会员价</el-button>
194 </el-form> 161 </el-form>
195 <span slot="footer" class="dialog-footer"> 162 <span slot="footer" class="dialog-footer">
196 <el-button @click="vipPriceVisible = false" class="buttonHover" 163 <el-button @click="vipPriceVisible = false" class="buttonHover"
197 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button> 164 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
198 <el-button style="background-color: #3F9B6A;color: #fff;" @click="vipPriceSubmit">确 定</el-button> 165 <el-button style="background-color: #3F9B6A;color: #fff;" @click="vipPriceSubmit">确 定</el-button>
199 </span> 166 </span>
200 </el-dialog> 167 </el-dialog>
201 - <el-dialog  
202 - title="入库登记"  
203 - :visible.sync="rukuShow"  
204 - width="60%"  
205 - class="vipDialog"  
206 - >  
207 - <el-form ref="form" label-width="80px">  
208 - <el-form-item label="商品名称">  
209 - <el-select v-model="shopId" filterable placeholder="请选择">  
210 - <el-option  
211 - v-for="item in tableData"  
212 - :key="item.productId"  
213 - :label="item.productName"  
214 - :value="item.productId">  
215 - </el-option>  
216 - </el-select>  
217 - </el-form-item>  
218 - <el-form-item label="是否登记">  
219 - <el-radio-group v-model="dengjiMsg" >  
220 - <el-radio label="1">是</el-radio>  
221 - <el-radio label="">否</el-radio>  
222 - </el-radio-group>  
223 - </el-form-item>  
224 - </el-form> 168 + <!-- <el-dialog title="入库登记" :visible.sync="rukuShow" width="60%" class="vipDialog">
  169 + <el-form ref="form" label-width="80px">
  170 + <el-form-item label="商品名称">
  171 + <el-select v-model="shopId" filterable placeholder="请选择">
  172 + <el-option v-for="item in tableData" :key="item.productId" :label="item.productName"
  173 + :value="item.productId">
  174 + </el-option>
  175 + </el-select>
  176 + </el-form-item>
  177 + <el-form-item label="是否登记">
  178 + <el-radio-group v-model="dengjiMsg">
  179 + <el-radio label="1">是</el-radio>
  180 + <el-radio label="">否</el-radio>
  181 + </el-radio-group>
  182 + </el-form-item>
  183 + </el-form>
  184 + <span slot="footer" class="dialog-footer">
  185 + <el-button @click="rukuShow = false" class="buttonHover"
  186 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
  187 + <el-button type="primary" @click="rukuCheck">确 定</el-button>
  188 + </span>
  189 + </el-dialog> -->
  190 + <el-dialog title="补货" :visible.sync="rukuShow" width="60%" class="vipDialog">
  191 + <el-form ref="form" label-width="80px">
  192 + <el-form-item label="商品名称">
  193 + <el-select v-model="shopId" filterable placeholder="请选择" @change="getShopData">
  194 + <el-option v-for="item in tableData" :key="item.productId" :label="item.productName"
  195 + :value="item.productId">
  196 + </el-option>
  197 + </el-select>
  198 + </el-form-item>
  199 + <el-form-item label="数量">
  200 + <el-input-number v-model="num" :min="0" :max="9999" ></el-input-number>
  201 + </el-form-item>
  202 + </el-form>
225 <span slot="footer" class="dialog-footer"> 203 <span slot="footer" class="dialog-footer">
226 <el-button @click="rukuShow = false" class="buttonHover" 204 <el-button @click="rukuShow = false" class="buttonHover"
227 - style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button> 205 + style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取 消</el-button>
228 <el-button type="primary" @click="rukuCheck">确 定</el-button> 206 <el-button type="primary" @click="rukuCheck">确 定</el-button>
229 </span> 207 </span>
230 </el-dialog> 208 </el-dialog>
@@ -232,525 +210,610 @@ @@ -232,525 +210,610 @@
232 </template> 210 </template>
233 211
234 <script> 212 <script>
235 -import CommAdd from './addCommodity.vue'  
236 -import { getBtnList, getToken } from '@/utils/auth'  
237 -import { uploadUrl } from '@/utils/request'  
238 -import {  
239 - getClassifyGetAll,  
240 - getClassifyDelete,  
241 - getClassifyStart,  
242 - downloadTemplate,  
243 - importProduct,  
244 - getClassify,  
245 - getProductMembers,  
246 - setProductMember,  
247 - productExport,  
248 - getBrandList,  
249 - chFen,  
250 - getClassifyUpdate  
251 -} from '@/api/commodity'  
252 -export default {  
253 - components: {  
254 - CommAdd  
255 - },  
256 - data() {  
257 - // 这里存放数据  
258 - return {  
259 - showTinymce: false,  
260 - btnList: '',  
261 - activeName: 'first',  
262 - formInline: {  
263 - search: '', // 搜索字段  
264 - shelveState: '', // 上架状态 1-上架 0-不上架 null-全部  
265 - stock: '', // 库存状态 1-有库存 0-无库存 null-全部  
266 - classifyId: '', // 最下级分类id  
267 - page: 1, // 当前页  
268 - pageSize: 10  
269 - },  
270 - batchAdd: false,  
271 - total: 1,  
272 - tableData: [],  
273 - categoryList: [],  
274 - UploadUrl: uploadUrl,  
275 - headers: {  
276 - 'Authorization-business': getToken()  
277 - },  
278 - productId: 0,  
279 - commidyVisible: false,  
280 - commId: 0,  
281 - brandList: [],  
282 - zuheNum:0,  
283 -  
284 - parentMessage: '这是父组件传递给子组件的消息',  
285 - canst:'' ,//组合商品ID  
286 - index:1,  
287 - dengji:[],  
288 - vipPriceVisible: false,  
289 - mode: 1,  
290 - productData: [],  
291 - gradeList: [],  
292 - teble_sel:false,  
293 - rukuShow:false,  
294 - dengjiMsg:'',  
295 - shopId:''  
296 - }  
297 - },  
298 - computed: {  
299 - },  
300 - mounted() {  
301 - this.getBrandList()  
302 - this.getAll(this.formInline)  
303 - this.queryAllCategory()  
304 - this.btnList = getBtnList()  
305 - },  
306 - // 方法集合  
307 - methods: {  
308 - msgList(list){  
309 - if(list && list!=''){  
310 - let strin = list.split(',')  
311 - return strin[0]  
312 - }  
313 - },  
314 - async getBrandList() {  
315 - const { data } = await getBrandList()  
316 - this.brandList = data  
317 - },  
318 - cancelForm() {  
319 - this.commidyVisible = false  
320 - this.formInline = {  
321 - search: '',  
322 - shelveState: '',  
323 - stock: '',  
324 - classifyId: '',  
325 - page: 1,  
326 - pageSize: 10  
327 - }  
328 - this.getAll(this.formInline)  
329 - this.closeModal()  
330 - },  
331 - closeModal() {  
332 - this.showTinymce = false  
333 - this.$refs.child.last()  
334 - this.$refs.child.reset() 213 + import CommAdd from './addCommodity.vue'
  214 + import {
  215 + getBtnList,
  216 + getToken
  217 + } from '@/utils/auth'
  218 + import {
  219 + uploadUrl
  220 + } from '@/utils/request'
  221 + import {
  222 + getClassifyGetAll,
  223 + getClassifyDelete,
  224 + getClassifyStart,
  225 + downloadTemplate,
  226 + importProduct,
  227 + getClassify,
  228 + getProductMembers,
  229 + setProductMember,
  230 + productExport,
  231 + getBrandList,
  232 + chFen,
  233 + getClassifyUpdate,
  234 + getClassifyGetById
  235 + } from '@/api/commodity'
  236 + export default {
  237 + components: {
  238 + CommAdd
335 }, 239 },
336 - btnClick(id) {  
337 - if (id.permissionName === '新增商品') {  
338 - this.add() 240 + data() {
  241 + // 这里存放数据
  242 + return {
  243 + ontype:'1',
  244 + num:0,
  245 + showTinymce: false,
  246 + btnList: '',
  247 + activeName: 'first',
  248 + formInline: {
  249 + search: '', // 搜索字段
  250 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  251 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  252 + classifyId: '', // 最下级分类id
  253 + page: 1, // 当前页
  254 + pageSize: 10
  255 + },
  256 + batchAdd: false,
  257 + total: 1,
  258 + tableData: [],
  259 + categoryList: [],
  260 + UploadUrl: uploadUrl,
  261 + headers: {
  262 + 'Authorization-business': getToken()
  263 + },
  264 + productId: 0,
  265 + commidyVisible: false,
  266 + commId: 0,
  267 + brandList: [],
  268 + zuheNum: 0,
  269 +
  270 + parentMessage: '这是父组件传递给子组件的消息',
  271 + canst: '', //组合商品ID
  272 + index: 1,
  273 + dengji: [],
  274 + vipPriceVisible: false,
  275 + mode: 1,
  276 + productData: [],
  277 + gradeList: [],
  278 + teble_sel: false,
  279 + rukuShow: false,
  280 + dengjiMsg: '',
  281 + shopId: ''
339 } 282 }
340 }, 283 },
341 - handleSizeChange(val) {  
342 - this.formInline.pageSize = val  
343 - this.getAll(this.formInline)  
344 - },  
345 - handleCurrentChange(val) {  
346 - this.formInline.page = val 284 + computed: {},
  285 + mounted() {
  286 + this.getBrandList()
347 this.getAll(this.formInline) 287 this.getAll(this.formInline)
  288 + this.queryAllCategory()
  289 + this.btnList = getBtnList()
348 }, 290 },
349 - // 查询  
350 - search() {  
351 - this.total = 1  
352 - this.formInline.page = 1  
353 - this.getAll(this.formInline)  
354 - },  
355 - // 重置  
356 - clear() {  
357 - this.formInline = {  
358 - search: '', // 搜索字段  
359 - shelveState: '', // 上架状态 1-上架 0-不上架 null-全部  
360 - stock: '', // 库存状态 1-有库存 0-无库存 null-全部  
361 - classifyId: '', // 最下级分类id  
362 - page: 1, // 当前页  
363 - pageSize: 10  
364 - }  
365 - this.getAll(this.formInline)  
366 - },  
367 - // 新增商品  
368 - add() {  
369 - this.showTinymce = true  
370 - if (this.commId) { 291 + // 方法集合
  292 + methods: {
  293 + getShopData(e){
  294 + const targetProduct = this.tableData.find(item => item.productId === e)
  295 + console.log(targetProduct)
  296 + this.num = targetProduct.stockNumber
  297 + },
  298 + msgList(list) {
  299 + if (list && list != '') {
  300 + let strin = list.split(',')
  301 + return strin[0]
  302 + }
  303 + },
  304 + async getBrandList() {
  305 + const {
  306 + data
  307 + } = await getBrandList()
  308 + this.brandList = data
  309 + },
  310 + cancelForm() {
  311 + this.commidyVisible = false
  312 + this.ontype = '1'
  313 + this.formInline = {
  314 + search: '',
  315 + shelveState: '',
  316 + stock: '',
  317 + classifyId: '',
  318 + page: 1,
  319 + pageSize: 10
  320 + }
  321 + this.getAll(this.formInline)
  322 + this.closeModal()
  323 + },
  324 + closeModal() {
  325 + this.showTinymce = false
  326 + this.$refs.child.last()
371 this.$refs.child.reset() 327 this.$refs.child.reset()
372 - }  
373 - this.commidyVisible = true  
374 - this.commId = 0  
375 - // this.$router.push({ name: 'addCommodity', params: { id: '1' }})  
376 - },  
377 - // 导出商品  
378 - async productDataExport() {  
379 - this.$message({  
380 - message: '数据导出中，请勿重复操作！',  
381 - type: 'success'  
382 - })  
383 - const res = await productExport(this.formInline)  
384 - if (!res) { return }  
385 - const blob = new Blob([res], { type: 'application/vnd.ms-excel' })  
386 - const fileName = '商品数据明细表.xls'  
387 - if ('download' in document.createElement('a')) {  
388 - // 非IE下载  
389 - const elink = document.createElement('a')  
390 - elink.download = fileName  
391 - elink.href = URL.createObjectURL(blob)  
392 - elink.style.display = 'none'  
393 - document.body.appendChild(elink)  
394 - elink.click()  
395 - URL.revokeObjectURL(elink.href) // 释放URL 对象  
396 - document.body.removeChild(elink)  
397 - } else {  
398 - // IE10+下载  
399 - navigator.msSaveBlob(blob, fileName)  
400 - }  
401 - },  
402 - // 编辑商品  
403 - edit(row) {  
404 - console.log(row)  
405 - this.showTinymce = true  
406 - this.commidyVisible = true  
407 - this.commId = row.productId  
408 - this.$nextTick(() => {  
409 - this.$refs.child?.details()  
410 - })  
411 - },  
412 -  
413 - // 删除商品  
414 - del(row) {  
415 - this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {  
416 - confirmButtonText: '确定',  
417 - cancelButtonText: '取消',  
418 - type: 'warning'  
419 - })  
420 - .then(() => {  
421 - getClassifyDelete({ productId: row.productId }).then(res => {  
422 - if (res.code === '') {  
423 - this.$message({  
424 - type: 'success',  
425 - message: '删除成功!'  
426 - })  
427 - this.getAll(this.formInline)  
428 - }  
429 - }) 328 + },
  329 + btnClick(id) {
  330 + if (id.permissionName === '新增商品') {
  331 + this.add()
  332 + }
  333 + },
  334 + handleSizeChange(val) {
  335 + this.formInline.pageSize = val
  336 + this.getAll(this.formInline)
  337 + },
  338 + handleCurrentChange(val) {
  339 + this.formInline.page = val
  340 + this.getAll(this.formInline)
  341 + },
  342 + // 查询
  343 + search() {
  344 + this.total = 1
  345 + this.formInline.page = 1
  346 + this.getAll(this.formInline)
  347 + },
  348 + // 重置
  349 + clear() {
  350 + this.formInline = {
  351 + search: '', // 搜索字段
  352 + shelveState: '', // 上架状态 1-上架 0-不上架 null-全部
  353 + stock: '', // 库存状态 1-有库存 0-无库存 null-全部
  354 + classifyId: '', // 最下级分类id
  355 + page: 1, // 当前页
  356 + pageSize: 10
  357 + }
  358 + this.getAll(this.formInline)
  359 + },
  360 + // 新增商品
  361 + add() {
  362 + this.showTinymce = true
  363 + if (this.commId) {
  364 + this.$refs.child.reset()
  365 + }
  366 + this.commidyVisible = true
  367 + this.ontype = '2'
  368 + this.commId = 0
  369 + // this.$router.push({ name: 'addCommodity', params: { id: '1' }})
  370 + },
  371 + // 导出商品
  372 + async productDataExport() {
  373 + this.$message({
  374 + message: '数据导出中，请勿重复操作！',
  375 + type: 'success'
430 }) 376 })
431 - .catch(() => {})  
432 - },  
433 - // 商品上下架  
434 - async down(row) {  
435 - console.log(row.shelveState)  
436 - if (row.shelveState) {  
437 - console.log(111)  
438 - const res = await getClassifyStart({  
439 - productId: row.productId,  
440 - shelveState: 0 377 + const res = await productExport(this.formInline)
  378 + if (!res) {
  379 + return
  380 + }
  381 + const blob = new Blob([res], {
  382 + type: 'application/vnd.ms-excel'
441 }) 383 })
442 - if (res.code === '') {  
443 - this.$message({  
444 - type: 'success',  
445 - message: '下架成功!'  
446 - })  
447 - this.getAll(this.formInline) 384 + const fileName = '商品数据明细表.xls'
  385 + if ('download' in document.createElement('a')) {
  386 + // 非IE下载
  387 + const elink = document.createElement('a')
  388 + elink.download = fileName
  389 + elink.href = URL.createObjectURL(blob)
  390 + elink.style.display = 'none'
  391 + document.body.appendChild(elink)
  392 + elink.click()
  393 + URL.revokeObjectURL(elink.href) // 释放URL 对象
  394 + document.body.removeChild(elink)
  395 + } else {
  396 + // IE10+下载
  397 + navigator.msSaveBlob(blob, fileName)
448 } 398 }
449 - } else {  
450 - const res = await getClassifyStart({  
451 - productId: row.productId,  
452 - shelveState: 1 399 + },
  400 + // 编辑商品
  401 + edit(row) {
  402 + console.log(row)
  403 + this.showTinymce = true
  404 + this.commidyVisible = true
  405 + this.ontype = '2'
  406 + this.commId = row.productId
  407 + this.$nextTick(() => {
  408 + this.$refs.child?.details()
453 }) 409 })
454 - if (res.code === '') {  
455 - this.$message({  
456 - type: 'success',  
457 - message: '上架成功!' 410 + },
  411 +
  412 + // 删除商品
  413 + del(row) {
  414 + this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
  415 + confirmButtonText: '确定',
  416 + cancelButtonText: '取消',
  417 + type: 'warning'
458 }) 418 })
459 - this.getAll(this.formInline)  
460 - }  
461 - }  
462 - },  
463 - // 初始化查询所有数据  
464 - async getAll(formInline) {  
465 - this.formInline.classifyId =  
466 - this.formInline.classifyId[2] ||  
467 - this.formInline.classifyId[1] ||  
468 - this.formInline.classifyId[0] ||  
469 - this.formInline.classifyId  
470 - const res = await getClassifyGetAll(formInline)  
471 - this.total = res.data.total  
472 - this.tableData = res.data.list  
473 - console.log(this.tableData)  
474 - },  
475 - // 初始化查询所有分类  
476 - async queryAllCategory() {  
477 - const res = await getClassify()  
478 - this.categoryList = res.data  
479 - this.handleRemoveEmptyChild(this.categoryList)  
480 - },  
481 - handleRemoveEmptyChild(arr) {  
482 - for (let i = 0; i < arr.length; i++) {  
483 - if (arr[i].childs && Array.isArray(arr[i].childs)) {  
484 - this.handleRemoveEmptyChild(arr[i].childs) 419 + .then(() => {
  420 + getClassifyDelete({
  421 + productId: row.productId
  422 + }).then(res => {
  423 + if (res.code === '') {
  424 + this.$message({
  425 + type: 'success',
  426 + message: '删除成功!'
  427 + })
  428 + this.getAll(this.formInline)
  429 + }
  430 + })
  431 + })
  432 + .catch(() => {})
  433 + },
  434 + // 商品上下架
  435 + async down(row) {
  436 + console.log(row.shelveState)
  437 + if (row.shelveState) {
  438 + console.log(111)
  439 + const res = await getClassifyStart({
  440 + productId: row.productId,
  441 + shelveState: 0
  442 + })
  443 + if (res.code === '') {
  444 + this.$message({
  445 + type: 'success',
  446 + message: '下架成功!'
  447 + })
  448 + this.getAll(this.formInline)
  449 + }
  450 + } else {
  451 + const res = await getClassifyStart({
  452 + productId: row.productId,
  453 + shelveState: 1
  454 + })
  455 + if (res.code === '') {
  456 + this.$message({
  457 + type: 'success',
  458 + message: '上架成功!'
  459 + })
  460 + this.getAll(this.formInline)
  461 + }
485 } 462 }
486 - if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {  
487 - delete arr[i].childs 463 + },
  464 + // 初始化查询所有数据
  465 + async getAll(formInline) {
  466 + this.formInline.classifyId =
  467 + this.formInline.classifyId[2] ||
  468 + this.formInline.classifyId[1] ||
  469 + this.formInline.classifyId[0] ||
  470 + this.formInline.classifyId
  471 + const res = await getClassifyGetAll(formInline)
  472 + this.total = res.data.total
  473 + this.tableData = res.data.list
  474 + console.log(this.tableData)
  475 + },
  476 + // 初始化查询所有分类
  477 + async queryAllCategory() {
  478 + const res = await getClassify()
  479 + this.categoryList = res.data
  480 + this.handleRemoveEmptyChild(this.categoryList)
  481 + },
  482 + handleRemoveEmptyChild(arr) {
  483 + for (let i = 0; i < arr.length; i++) {
  484 + if (arr[i].childs && Array.isArray(arr[i].childs)) {
  485 + this.handleRemoveEmptyChild(arr[i].childs)
  486 + }
  487 + if (arr[i].childs && Array.isArray(arr[i].childs) && arr[i].childs.length === 0) {
  488 + delete arr[i].childs
  489 + }
488 } 490 }
489 - }  
490 - },  
491 - handleSelectionChange(val) {  
492 - // console.log(val)  
493 - if(this.index ==1){  
494 - if (val.length > 1) {  
495 - // 清除之前的选择  
496 - this.$refs.multipleTable.clearSelection();  
497 - // 保留最后一个选中的项目  
498 - if (val.length > 0) {  
499 - this.$refs.multipleTable.toggleRowSelection(val[val.length - 1], true);  
500 -  
501 - }  
502 - }  
503 - this.dengji = val  
504 - }else{  
505 - let zuheId = ''  
506 - for(let i=0;i<val.length;i++){  
507 - zuheId += val[i].productId + ','  
508 - }  
509 - this.canst = zuheId  
510 - this.zuheNum = val.length  
511 - }  
512 - },  
513 - //清除选项  
514 - toggleSelection() { 491 + },
  492 + handleSelectionChange(val) {
  493 + // console.log(val)
  494 + if (this.index == 1) {
  495 + if (val.length > 1) {
  496 + // 清除之前的选择
515 this.$refs.multipleTable.clearSelection(); 497 this.$refs.multipleTable.clearSelection();
516 - },  
517 - selClose(){  
518 - this.teble_sel = false  
519 - },  
520 - //商品组合  
521 - shopzuhe(){  
522 - this.index = 2  
523 - this.teble_sel = true  
524 - },  
525 - //确定组合  
526 - zuheShop(val){  
527 - if(this.index == 1){  
528 - this.edit(this.dengji[0])  
529 - }else{  
530 - this.parentMessage =this.canst.slice(0, -1)  
531 - this.add() 498 + // 保留最后一个选中的项目
  499 + if (val.length > 0) {
  500 + this.$refs.multipleTable.toggleRowSelection(val[val.length - 1], true);
  501 +
532 } 502 }
533 - },  
534 - //拆分  
535 - chaiFen(row){  
536 - let _=this  
537 - this.$confirm('是否拆分组合的商品', '提示', {  
538 - confirmButtonText: '确定',  
539 - cancelButtonText: '取消',  
540 - type: 'warning'  
541 - })  
542 - .then(() => {  
543 - const formData = new FormData();  
544 - formData.append('id', row.productId);  
545 - chFen(formData).then(res=>{  
546 - this.getAll(this.formInline)  
547 - })  
548 -  
549 - })  
550 - .catch(() => {})  
551 -  
552 - },  
553 - //入库登记  
554 - rukdengji(){  
555 - this.rukuShow = true  
556 -  
557 - },  
558 - // 设置会员价  
559 - setVipPrice(row) {  
560 - var _ = this  
561 - this.productId = row.productId  
562 - getProductMembers({ productId: row.productId }).then(res => {  
563 - if (res.code === '') {  
564 - _.productData = res.data  
565 - if (_.productData && _.productData.length > 0) {  
566 - _.gradeList = []  
567 - const _memberPrices = _.productData[0].memberPrices  
568 - _memberPrices.forEach(function(item, i) {  
569 - _.gradeList.push(item.memberLevelName)  
570 - })  
571 - _.mode = _.productData[0].mode ? _.productData[0].mode : 1  
572 - _.vipPriceVisible = true  
573 - }  
574 - } 503 + }
  504 + this.dengji = val
  505 + } else {
  506 + let zuheId = ''
  507 + for (let i = 0; i < val.length; i++) {
  508 + zuheId += val[i].productId + ','
  509 + }
  510 + this.canst = zuheId
  511 + this.zuheNum = val.length
  512 + }
  513 + },
  514 + //清除选项
  515 + toggleSelection() {
  516 + this.$refs.multipleTable.clearSelection();
  517 + },
  518 + selClose() {
  519 + this.teble_sel = false
  520 + },
  521 + //商品组合
  522 + shopzuhe() {
  523 + this.index = 2
  524 + this.teble_sel = true
  525 + },
  526 + //确定组合
  527 + zuheShop(val) {
  528 + if (this.index == 1) {
  529 + this.edit(this.dengji[0])
  530 + } else {
  531 + this.parentMessage = this.canst.slice(0, -1)
  532 + this.add()
  533 + }
  534 + },
  535 + //拆分
  536 + chaiFen(row) {
  537 + let _ = this
  538 + this.$confirm('是否拆分组合的商品', '提示', {
  539 + confirmButtonText: '确定',
  540 + cancelButtonText: '取消',
  541 + type: 'warning'
  542 + })
  543 + .then(() => {
  544 + const formData = new FormData();
  545 + formData.append('id', row.productId);
  546 + chFen(formData).then(res => {
  547 + this.getAll(this.formInline)
575 }) 548 })
576 - },  
577 - // 设置会员价提交  
578 - vipPriceSubmit() {  
579 - for (let i = 0; i < this.productData.length; i++) {  
580 - this.productData[i].mode = this.mode  
581 - for (let j = 0; j < this.productData[i].memberPrices.length; j++) {  
582 - this.productData[i].memberPrices[j].mode = this.mode  
583 - var _price = this.productData[i].memberPrices[j].price  
584 - if (!_price) {  
585 - this.$message({  
586 - type: 'warning',  
587 - message: '会员价格不能为空！'  
588 - })  
589 - return false  
590 - } else if (this.productData[i].mode === 1) {  
591 - if (_price <= 0 || _price >= 10) {  
592 - this.$message({  
593 - type: 'warning',  
594 - message: '会员折数必须大于0小于10！'  
595 - })  
596 - return false  
597 - }  
598 - } else if (this.productData[i].mode === 2) {  
599 - if (_price > this.productData[i].price) {  
600 - this.$message({  
601 - type: 'warning',  
602 - message: '会员价格不能大于原价！'  
603 - })  
604 - return false  
605 - }  
606 - }  
607 - } 549 +
  550 + })
  551 + .catch(() => {})
  552 +
  553 + },
  554 + //入库登记
  555 + rukdengji() {
  556 + this.shopId = null;
  557 + this.num = 0
  558 + this.rukuShow = true
  559 +
  560 + },
  561 + // 设置会员价
  562 + setVipPrice(row) {
  563 + var _ = this
  564 + this.productId = row.productId
  565 + getProductMembers({
  566 + productId: row.productId
  567 + }).then(res => {
  568 + if (res.code === '') {
  569 + _.productData = res.data
  570 + if (_.productData && _.productData.length > 0) {
  571 + _.gradeList = []
  572 + const _memberPrices = _.productData[0].memberPrices
  573 + _memberPrices.forEach(function(item, i) {
  574 + _.gradeList.push(item.memberLevelName)
  575 + })
  576 + _.mode = _.productData[0].mode ? _.productData[0].mode : 1
  577 + _.vipPriceVisible = true
608 } 578 }
609 - setProductMember({ productId: this.productId, members: this.productData }).then(res => {  
610 - if (res.code === '') { 579 + }
  580 + })
  581 + },
  582 + // 设置会员价提交
  583 + vipPriceSubmit() {
  584 + for (let i = 0; i < this.productData.length; i++) {
  585 + this.productData[i].mode = this.mode
  586 + for (let j = 0; j < this.productData[i].memberPrices.length; j++) {
  587 + this.productData[i].memberPrices[j].mode = this.mode
  588 + var _price = this.productData[i].memberPrices[j].price
  589 + if (!_price) {
  590 + this.$message({
  591 + type: 'warning',
  592 + message: '会员价格不能为空！'
  593 + })
  594 + return false
  595 + } else if (this.productData[i].mode === 1) {
  596 + if (_price <= 0 || _price >= 10) {
611 this.$message({ 597 this.$message({
612 - type: 'success',  
613 - message: '设置成功!' 598 + type: 'warning',
  599 + message: '会员折数必须大于0小于10！'
614 }) 600 })
615 - this.getAll(this.formInline)  
616 - this.vipPriceVisible = false 601 + return false
617 } 602 }
  603 + } else if (this.productData[i].mode === 2) {
  604 + if (_price > this.productData[i].price) {
  605 + this.$message({
  606 + type: 'warning',
  607 + message: '会员价格不能大于原价！'
  608 + })
  609 + return false
  610 + }
  611 + }
  612 + }
  613 + }
  614 + setProductMember({
  615 + productId: this.productId,
  616 + members: this.productData
  617 + }).then(res => {
  618 + if (res.code === '') {
  619 + this.$message({
  620 + type: 'success',
  621 + message: '设置成功!'
618 }) 622 })
619 - },  
620 - // 清空会员价  
621 - clearProductMember() {  
622 - console.log(this.productData, 'this.productData')  
623 - this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {  
624 - confirmButtonText: '确定',  
625 - cancelButtonText: '取消',  
626 - type: 'warning'  
627 - }).then(() => {  
628 - clearProductMember({ productId: this.productId }).then(res => {  
629 - if (res.code === '') {  
630 - this.productData.map(item => {  
631 - item.memberPrices.map(itemChild => {  
632 - itemChild.price = null  
633 - })  
634 - })  
635 - this.$message.success('清除成功')  
636 - // this.vipPriceVisible = false  
637 - }  
638 - })  
639 - })  
640 - },  
641 - async rukuCheck(){  
642 - const targetProduct = this.tableData.find(item => item.productId === this.shopId)  
643 - targetProduct.registrationStatus = this.dengjiMsg  
644 - await getClassifyUpdate(targetProduct)  
645 - this.$message.success('保存成功')  
646 - this.rukuShow = false  
647 this.getAll(this.formInline) 623 this.getAll(this.formInline)
  624 + this.vipPriceVisible = false
648 } 625 }
  626 + })
  627 + },
  628 + // 清空会员价
  629 + clearProductMember() {
  630 + console.log(this.productData, 'this.productData')
  631 + this.$confirm('该商品所有旧设置的会员价将被清除, 是否继续？', '提示', {
  632 + confirmButtonText: '确定',
  633 + cancelButtonText: '取消',
  634 + type: 'warning'
  635 + }).then(() => {
  636 + clearProductMember({
  637 + productId: this.productId
  638 + }).then(res => {
  639 + if (res.code === '') {
  640 + this.productData.map(item => {
  641 + item.memberPrices.map(itemChild => {
  642 + itemChild.price = null
  643 + })
  644 + })
  645 + this.$message.success('清除成功')
  646 + // this.vipPriceVisible = false
  647 + }
  648 + })
  649 + })
  650 + },
  651 + async rukuCheck() {
  652 + const res = await getClassifyGetById({ productId: this.shopId })
  653 + const form = res.data
  654 + const params = {}
  655 + if (res.data.names.length !== 0) {
  656 + params.skuAttrList = res.data.names
  657 + }
  658 + params.skuList = form.skus
  659 + params.attrStyle = res.data.skus[0].style
  660 + params.imgs = res.data.images
  661 +
  662 + form.names = params.skuAttrList
  663 + params.skuList.forEach(element => {
  664 + element.style = params.attrStyle
  665 + })
  666 + form.skus = params.skuList
  667 + form.images = params.imgs
  668 + form.deletes = params.deletes
  669 + form.classifyId = Array.isArray(form.classifyId) ? form.classifyId[form.classifyId.length - 1] : form.classifyId
  670 + form.productId = this.shopId
  671 + console.log(form, 'form')
  672 + if(form.skus.length>0) {
  673 + form.skus[0].stockNumber = this.num
  674 + }
  675 + await getClassifyUpdate(form)
  676 + this.$message.success('保存成功')
  677 + this.rukuShow = false
  678 + this.getAll(this.formInline)
  679 + return
  680 +
  681 + const targetProduct = this.tableData.find(item => item.productId === this.shopId)
  682 + // targetProduct.registrationStatus = this.dengjiMsg
  683 +
  684 +
  685 + await getClassifyUpdate(targetProduct)
  686 + this.$message.success('保存成功')
  687 + this.rukuShow = false
  688 + this.getAll(this.formInline)
  689 + }
  690 + }
649 } 691 }
650 -}  
651 </script> 692 </script>
652 <style lang='scss' scoped> 693 <style lang='scss' scoped>
653 -//@import url(); 引入公共css类  
654 -@import url("../../../styles/elDialog.scss");  
655 -.pending {  
656 - padding: 0 20px 20px 20px;  
657 - background-color:#fff;  
658 -  
659 -}  
660 -.fenye {  
661 - margin-top: 20px;  
662 - display: flex;  
663 - justify-content: flex-end;  
664 - position: relative;  
665 -} 694 + //@import url(); 引入公共css类
  695 + @import url("../../../styles/elDialog.scss");
  696 +
  697 + .pending {
  698 + padding: 0 20px 20px 20px;
  699 + background-color: #fff;
  700 +
  701 + }
  702 +
  703 + .fenye {
  704 + margin-top: 20px;
  705 + display: flex;
  706 + justify-content: flex-end;
  707 + position: relative;
  708 + }
  709 +
666 ::v-deep .el-pagination__total { 710 ::v-deep .el-pagination__total {
667 position: absolute; 711 position: absolute;
668 left: 10px; 712 left: 10px;
669 } 713 }
  714 +
670 .formSearch { 715 .formSearch {
671 - display: flex;  
672 - width: 100%;  
673 - font-size: 14px;  
674 - justify-content: space-between; 716 + display: flex;
  717 + width: 100%;
  718 + font-size: 14px;
  719 + justify-content: space-between;
  720 + }
  721 +
  722 + .clickMe {
  723 + color: #3F9B6A;
  724 + cursor: pointer;
  725 + }
  726 +
  727 + .uploadDialog {
  728 +
  729 + // display: flex;
  730 + // flex-direction: column;
  731 + // justify-content: center;
  732 + >>>.el-upload__tip {
  733 + display: inline-block;
  734 + width: 360px;
  735 + margin: auto;
675 } 736 }
676 -.clickMe {  
677 - color: #3F9B6A;  
678 - cursor: pointer;  
679 -}  
680 -.uploadDialog{  
681 - // display: flex;  
682 - // flex-direction: column;  
683 - // justify-content: center;  
684 - >>>.el-upload__tip{  
685 - display: inline-block;  
686 - width: 360px;  
687 - margin: auto;  
688 } 737 }
689 -}  
690 -.vipDialog{  
691 - .priceTable{  
692 - table{  
693 - width: 100%;  
694 - text-align: center;  
695 - border-left: 1px solid #EBEEF5;  
696 - border-bottom: 1px solid #EBEEF5;  
697 - font-size: 14px;  
698 - color: #606266;  
699 - border-collapse: collapse;  
700 - tr{  
701 - border-top: 1px solid #EBEEF5;  
702 - th{  
703 - padding: 12px 0;  
704 - background: #F2F3F5;  
705 - color: #0009;  
706 - border-right: 1px solid #F2F3F5;  
707 - }  
708 - td{  
709 - padding: 12px 0;  
710 - border-right: 1px solid #EBEEF5;  
711 - &.td-input{  
712 - .el-input{ 738 +
  739 + .vipDialog {
  740 + .priceTable {
  741 + table {
  742 + width: 100%;
  743 + text-align: center;
  744 + border-left: 1px solid #EBEEF5;
  745 + border-bottom: 1px solid #EBEEF5;
  746 + font-size: 14px;
  747 + color: #606266;
  748 + border-collapse: collapse;
  749 +
  750 + tr {
  751 + border-top: 1px solid #EBEEF5;
  752 +
  753 + th {
  754 + padding: 12px 0;
  755 + background: #F2F3F5;
  756 + color: #0009;
  757 + border-right: 1px solid #F2F3F5;
  758 + }
  759 +
  760 + td {
  761 + padding: 12px 0;
  762 + border-right: 1px solid #EBEEF5;
  763 +
  764 + &.td-input {
  765 + .el-input {
  766 + width: 80px;
  767 + margin-right: 0;
  768 + }
  769 + }
  770 +
  771 + &:nth-child(1),
  772 + &:nth-child(2) {
713 width: 80px; 773 width: 80px;
714 - margin-right: 0;  
715 } 774 }
716 - }  
717 - &:nth-child(1),&:nth-child(2){  
718 - width: 80px;  
719 - }  
720 - .el-input{  
721 - width: 100px;  
722 - margin-right: 10px; 775 +
  776 + .el-input {
  777 + width: 100px;
  778 + margin-right: 10px;
  779 + }
723 } 780 }
724 } 781 }
725 } 782 }
726 } 783 }
  784 +
  785 + .clearBtn {
  786 + margin-top: 20px;
  787 + }
727 } 788 }
728 - .clearBtn{  
729 - margin-top: 20px; 789 +
  790 + ::v-deep .bian_css {
  791 + margin: auto;
  792 + max-height: 840px;
  793 + overflow-y: auto;
  794 +
  795 + .el-dialog__body {
  796 + padding: 0px;
  797 + background-color: #fff;
  798 + }
  799 +
  800 + .el-dialog__header {
  801 + background-color: #fff;
  802 + padding: 10px 20px 10px 20px;
  803 + border-bottom: 1px solid #EFEFEF;
  804 + }
  805 +
  806 + .el-dialog__title {
  807 + font-size: 14px;
  808 + color: #000000e6;
  809 + }
  810 +
  811 + .el-date-table td.available:hover {
  812 + background-color: #3F9B6A;
  813 + }
  814 +
  815 + .el-date-table td.start-date span {
  816 + background-color: #3F9B6A;
  817 + }
730 } 818 }
731 -}  
732 -::v-deep .bian_css{  
733 - margin:auto;  
734 - max-height:840px;  
735 - overflow-y: auto;  
736 - .el-dialog__body {  
737 - padding: 0px;  
738 - background-color: #fff;  
739 - }  
740 - .el-dialog__header {  
741 - background-color: #fff;  
742 - padding:10px 20px 10px 20px;  
743 - border-bottom: 1px solid #EFEFEF;  
744 - }  
745 - .el-dialog__title {  
746 - font-size: 14px;  
747 - color: #000000e6;  
748 - }  
749 - .el-date-table td.available:hover{  
750 - background-color:#3F9B6A;  
751 - }  
752 - .el-date-table td.start-date span{  
753 - background-color:#3F9B6A;  
754 - }  
755 - }  
756 </style> 819 </style>