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 17 if(host === 'localhost:8080' || host === 'localhost:8081' || host === 'localhost:9528'|| host === '192.168.31.45:9528'|| host === 'localhost:9529' ) {
18 18  
19 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 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 26 } else {
27 27 console.error('---------------------')
... ...
admin-web-master/src/views/shopRental/manage/index.vue
  View file @89bb9f2
... ... @@ -170,9 +170,9 @@
170 170  
171 171 </el-form>
172 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 173 <el-button @click="openoa =false" class="buttonHover"
175 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 176 </div>
177 177 </el-dialog>
178 178 </div>
... ...
merchant-web-master/src/utils/request.js
  View file @89bb9f2
... ... @@ -19,8 +19,9 @@ let PREFIX;
19 19 if( host == 'localhost:9528' || host == '8.130.38.56:8027' || host == 'localhost:9529'|| host == 'localhost:9530'){
20 20 // 其他情况的默认值
21 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 25 }else{
25 26 // PREFIX = '/merchant-business';
26 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 1 <template>
2 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 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 13 </div>
29   - </el-card>
  14 + </div>
30 15 <!-- 商品 -->
31 16 <div class="addCom common">
32 17 <div v-if="active">
33 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 130 </el-form>
130 131 </div>
131   - <div v-if="!active" class="centerCom">
  132 + <div v-if="!active" style="width: 100%;">
132 133 <el-form ref="form" :model="params" label-width="80px">
133 134 <StyleInformation :form="params" />
134 135 </el-form>
... ... @@ -144,6 +145,12 @@
144 145 >
145 146 <img width="100%" :src="dialogImageUrl" alt>
146 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 154 </div>
148 155 </template>
149 156  
... ... @@ -161,7 +168,7 @@ import {
161 168 getSelect
162 169 } from '@/api/account';
163 170 import { uploadUrl } from '@/utils/request'
164   -import StyleInformation from './addComponent'
  171 +import StyleInformation from '@/views/commodity/commoditySystem/addComponent'
165 172 export default {
166 173 components: {
167 174 Tinymce,
... ... @@ -634,6 +641,9 @@ export default {
634 641 .stepsColor{
635 642 font-size: 20px;
636 643 line-height: 40px;
  644 + width: 50%;
  645 + margin: 0 auto;
  646 + padding: 15px 0;
637 647 .one_class {
638 648 width: 40px;
639 649 background: #3F9B6A;
... ... @@ -671,9 +681,11 @@ export default {
671 681 margin: 10px 0;
672 682 justify-content: space-around;
673 683 align-items: unset;
674   - width: 100%;
  684 + // width: 100%;
  685 + padding:0 20px;
  686 +
675 687 .el-form{
676   - display: flex;
  688 + // display: flex;
677 689 padding: 0px 10px 10px;
678 690 }
679 691 .leftCom {
... ...
merchant-web-master/src/views/commodity/commoditySystem/addComponent.vue
  View file @89bb9f2
1 1 <template>
2 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 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 32 </el-form-item>
38   - <div class="style-container">
  33 + <el-form-item label="规格设置">
  34 + <div class="style-container" >
39 35 <div v-if="form.attrStyle === 0" class="single-style">
40 36 <el-table
41 37 :data="skuList"
... ... @@ -137,61 +133,17 @@
137 133 </el-form-item>
138 134 </div>
139 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 137 </div>
194 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 147 <el-dialog
196 148 :append-to-body="true"
197 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 2 <template>
3 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 6 <div class="formSearch">
7 7 <el-form :inline="true" :model="formInline" class="demo-form-inline">
8 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 10 </el-form-item>
11 11 <el-form-item label="上架状态">
12 12 <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" style="width:168px">
... ... @@ -16,44 +16,33 @@
16 16 </el-select>
17 17 </el-form-item>
18 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 20 checkStrictly: true,
25 21 expandTrigger: 'hover',
26 22 label:'categoryName',
27 23 value:'id',
28 24 children:'childs'
29   - }"
30   - />
  25 + }" />
31 26 </el-form-item>
32 27  
33 28 </el-form>
34 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 34 </div>
40 35 </div>
41 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 40 </div>
46 41 <!-- 表格 -->
47 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 46 type="selection"
58 47 v-if="teble_sel"
59 48 min-width="4%">
... ... @@ -89,13 +78,13 @@
89 78 <el-table-column label="操作" width="180" fixed="right">
90 79 <template slot-scope="scope">
91 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 88 <el-button v-if="scope.row.shelveState==0" type="text" @click="down(scope.row)">上架</el-button>
100 89 <el-button v-if="scope.row.shelveState==1" type="text" @click="down(scope.row)">下架</el-button>
101 90 <el-button v-if="scope.row.shelveState==1" type="text" @click="setVipPrice(scope.row)">设置会员价</el-button>
... ... @@ -105,44 +94,19 @@
105 94 </el-table-column>
106 95 </el-table>
107 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 100 </div>
119 101  
120 102 </div>
121 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 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 110 <i class="el-icon-upload" />
147 111 <div class="el-upload__text">
148 112 <em style="color:#3F9B6A;">点击上传</em>
... ... @@ -158,12 +122,7 @@
158 122 </div>
159 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 126 <el-form ref="form" label-width="80px">
168 127 <el-form-item label="优惠方式">
169 128 <el-radio-group v-model="mode" @change="modeChange">
... ... @@ -188,589 +147,625 @@
188 147 {{ item.price }}
189 148 </td>
190 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 152 </td>
193 153 </tr>
194 154 </table>
195 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 158 </el-form>
198 159 <span slot="footer" class="dialog-footer">
199 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 162 <el-button type="primary" @click="vipPriceSubmit">确 定</el-button>
202 163 </span>
203 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 174 </div>
223 175 </template>
224 176  
225 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 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 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 410 this.$message({
457 411 type: 'warning',
458   - message: '会员价格不能大于原价！'
  412 + message: '会员价格不能为空！'
459 413 })
460 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 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 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 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 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 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 697 ::v-deep .el-pagination__total {
713 698 position: absolute;
714 699 left: 10px;
715 700 }
  701 +
716 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 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 771 </style>
... ...
merchant-web-master/src/views/order/pending/index.vue
  View file @89bb9f2
... ... @@ -64,10 +64,18 @@
64 64 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
65 65 tooltip-effect="dark"
66 66 >
67   - <el-table-column label="订单id" width="220">
  67 + <el-table-column label="订单id" width="80">
68 68 <template slot-scope="scope">{{ scope.row.orderId }}</template>
69 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 79 <el-table-column prop="number" label="商品数量（件）" show-overflow-tooltip />
72 80 <el-table-column label="订单状态" show-overflow-tooltip>
73 81 <template slot-scope="scope">
... ...
merchant-web-master/src/views/salesSta/dataSta.vue
  View file @89bb9f2
... ... @@ -3,81 +3,80 @@
3 3 <div class="pending">
4 4 <div class="tab_show">
5 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 18 </div>
21 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 74 </div>
76 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 80 <el-form ref="formParams" :inline="true" :model="formParams">
82 81 <el-form-item label="日期">
83 82 <el-date-picker v-model="formParams.maoliTime" type="daterange" range-separator="至"
... ... @@ -92,88 +91,89 @@
92 91 </el-form-item>
93 92 </el-form>
94 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 167 <template slot="label">
168 168 商品2
169 169 </template>
170 170 毛利率：21.01%
171 171 </el-descriptions-item> -->
172   - </el-descriptions>
173   - </div>
  172 + </el-descriptions>
  173 + </div>
174 174 </div>
175 175 <!-- 搜索 -->
176   -<!-- <div class="filter-container">
  176 + <!-- <div class="filter-container">
177 177 <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
178 178 <div style="line-height:200%">筛选查询</div>
179 179 <div>
... ... @@ -198,48 +198,41 @@
198 198 </div> -->
199 199 <!-- 表格 -->
200 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 232 <div class="fenye">
235 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 236 </div>
244 237 </div>
245 238 </div>
... ... @@ -248,201 +241,222 @@
248 241 </template>
249 242  
250 243 <script>
251   - import {salesStatistics,
252   - orderGetAll,
253   - calculateGrossProfit} from '@/api/dataSta'
254 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 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 351 // console.log(this.formParams.tongjiTime)
354 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 374 </script>
376 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 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 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 1 <template>
2 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 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 13 </div>
28   - </el-card>
  14 + </div>
29 15 <!-- 商品 -->
30 16 <div class="addCom common">
31 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 130 </el-form>
129 131 </div>
130   - <div v-if="!active" class="centerCom">
  132 + <div v-if="!active" style="width: 100%;">
131 133 <el-form ref="form" :model="params" label-width="80px">
132 134 <StyleInformation :form="params" />
133 135 </el-form>
... ... @@ -143,6 +145,12 @@
143 145 >
144 146 <img width="100%" :src="dialogImageUrl" alt>
145 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 154 </div>
147 155 </template>
148 156  
... ... @@ -160,7 +168,7 @@ import {
160 168 getSelect
161 169 } from '@/api/account';
162 170 import { uploadUrl } from '@/utils/request'
163   -import StyleInformation from './addComponent'
  171 +import StyleInformation from '@/views/stockControl/inventory/addComponent'
164 172 export default {
165 173 components: {
166 174 Tinymce,
... ... @@ -173,12 +181,11 @@ export default {
173 181 },
174 182 showTinymce: {
175 183 type: Boolean
176   - },
177   - message: {
178   - type: String,
179   - default: ''
180   - }
  184 + }
181 185 },
  186 + watch: {
  187 +
  188 + },
182 189 data() {
183 190 // const checkCreditLimit = (rule, value, callback) => {
184 191 // console.log(this.form.ifCredit)
... ... @@ -409,7 +416,7 @@ export default {
409 416 ifCredit: '',
410 417 creditLimit: '',
411 418 ifHuabei: 1,
412   - cost:0,
  419 + cost:null,
413 420 productText: '',
414 421 images: [],
415 422 deletes: [],
... ... @@ -447,6 +454,7 @@ export default {
447 454 collects: 0,
448 455 groupId: '',
449 456 imgs: [],
  457 + cost:null,
450 458 deletes: [],
451 459 isDelete: 0,
452 460 limitCount: 0,
... ... @@ -540,7 +548,6 @@ export default {
540 548 if (this.productId) {
541 549 this.form.productId = this.productId
542 550 const sku = JSON.parse(sessionStorage.getItem('form'))
543   - console.log(sku)
544 551 sku.forEach((element, i) => {
545 552 for (let index = 0; index < this.form.skus.length; index++) {
546 553 if (i === index) {
... ... @@ -549,8 +556,8 @@ export default {
549 556 }
550 557 })
551 558 console.log(this.form, 'this.form')
  559 +
552 560 const res = await getClassifyUpdate(this.form)
553   - console.log(res)
554 561 if (res.code === '') {
555 562 this.$message({
556 563 type: 'success',
... ... @@ -559,14 +566,7 @@ export default {
559 566 this.back()
560 567 }
561 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 570 const res = await getClassifyAdd(this.form)
571 571 if (res.code === '') {
572 572 this.$message({
... ... @@ -634,13 +634,16 @@ export default {
634 634 margin-right: 30px;
635 635 }
636 636 .addTitle {
637   - font-size: 20px;
  637 + font-size: 14px;
638 638 color: #333333;
639 639 line-height: 50px;
640 640 }
641 641 .stepsColor{
642 642 font-size: 20px;
643 643 line-height: 40px;
  644 + width: 50%;
  645 + margin: 0 auto;
  646 + padding: 15px 0;
644 647 .one_class {
645 648 width: 40px;
646 649 background: #3F9B6A;
... ... @@ -678,9 +681,12 @@ export default {
678 681 margin: 10px 0;
679 682 justify-content: space-around;
680 683 align-items: unset;
  684 + // width: 100%;
  685 + padding:0 20px;
  686 +
681 687 .el-form{
682   - display: flex;
683   - padding: 40px 0;
  688 + // display: flex;
  689 + padding: 0px 10px 10px;
684 690 }
685 691 .leftCom {
686 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 1 <template>
2 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 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 32 </el-form-item>
38   - <div class="style-container">
  33 + <el-form-item label="规格设置">
  34 + <div class="style-container" >
39 35 <div v-if="form.attrStyle === 0" class="single-style">
40 36 <el-table
41 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 41 <el-table-column label="规格">
45 42 <template slot-scope="scope">
46 43 <el-input v-model="singleStyle.skuValue" :sss="scope" maxlength="40" />
47 44 </template>
48 45 </el-table-column>
49   - <el-table-column label="售价">
  46 + <el-table-column label="售价(/元)">
50 47 <template slot-scope="scope">
51 48 <!-- <el-input v-model="scope.row.price" type="number" oninput="value=value.replace(/-/, '')" /> -->
52 49 <el-input-number v-model="scope.row.price" :controls="false" :min="0" :precision="2" :step="0.01" />
53 50 </template>
54 51 </el-table-column>
55   - <el-table-column label="原价">
  52 + <el-table-column label="原价(/元)">
56 53 <template slot-scope="scope">
57 54 <!-- <el-input v-model="scope.row.originalPrice" type="number" oninput="value=value.replace(/-/, '')" /> -->
58 55 <el-input-number v-model="scope.row.originalPrice" :controls="false" :min="0" :precision="2" :step="0.01" />
... ... @@ -131,76 +128,28 @@
131 128 </div>
132 129 </div>
133 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 132 </div>
136 133 </el-form-item>
137 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 137 </div>
197 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 147 <el-dialog
199 148 :append-to-body="true"
200 149 :visible.sync="dialogVisible"
  150 + class="check-image-dialog"
201 151 title="查看图片"
202   - center
203   - custom-class="bian_css"
  152 + center="center"
204 153 >
205 154 <img width="100%" :src="dialogImageUrl" alt>
206 155 </el-dialog>
... ...
merchant-web-master/src/views/stockControl/inventory/index.vue
  View file @89bb9f2
1 1 <!-- -->
2 2 <template>
3 3 <div style="padding: 0 10px;background-color:#f7f7f7;">
4   - <div class="pending">
  4 + <div class="pending" v-if ="ontype == '1'">
5 5 <!-- 搜索 -->
6 6 <div class="formSearch" style="margin-bottom:10px">
7 7 <el-form :inline="true" :model="formInline" class="demo-form-inline">
8 8 <el-form-item label="商品名称">
9   - <el-input v-model="formInline.search" placeholder="请输入商品名称" />
  9 + <el-input v-model="formInline.search" placeholder="请输入商品名称" />
10 10 </el-form-item>
11 11 <el-form-item label="上架状态">
12   - <el-select v-model="formInline.shelveState" placeholder="请选择上架状态" >
  12 + <el-select v-model="formInline.shelveState" placeholder="请选择上架状态">
13 13 <el-option label="全部" :value="null" />
14 14 <el-option label="上架" value="1" />
15 15 <el-option label="下架" value="0" />
16 16 </el-select>
17 17 </el-form-item>
18 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 20 checkStrictly: true,
26 21 expandTrigger: 'hover',
27 22 label:'categoryName',
28 23 value:'id',
29 24 children:'childs'
30   - }"
31   - />
  25 + }" />
32 26 </el-form-item>
33 27 </el-form>
34 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 31 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
38 32 </div>
39 33  
40 34 </div>
41 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 40 </div>
46 41 <!-- 表格 -->
47 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 46 </el-table-column>
60 47 <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
61 48 <el-table-column label="商品主图" width="150" align="center">
... ... @@ -85,10 +72,10 @@
85 72 <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
86 73 <el-table-column prop="registrationStatus" label="登记状态" show-overflow-tooltip>
87 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 79 <el-table-column prop="createTime" label="创建时间" width="180" />
93 80 <el-table-column label="操作" width="200" fixed="right">
94 81 <template slot-scope="scope">
... ... @@ -96,71 +83,49 @@
96 83 <div class="tableBtn greens" @click="edit(scope.row)">编辑</div>
97 84 <div v-if="scope.row.shelveState==0" class="tableBtn greens" @click="down(scope.row)">上架</div>
98 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 89 <div v-if="scope.row.shelveState!=1" class="tableBtn greens" @click="del(scope.row)">删除</div>
102 90 </div>
103 91 </template>
104 92 </el-table-column>
105 93 </el-table>
106 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 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 113 </div>
134 114 </div>
135 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 129 <el-form ref="form" label-width="80px">
165 130 <el-form-item label="优惠方式">
166 131 <el-radio-group v-model="mode">
... ... @@ -169,15 +134,15 @@
169 134 </el-radio-group>
170 135 </el-form-item>
171 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 141 <th v-for="(item,index) in gradeList" :key="index">
177 142 {{ item }}
178 143 </th>
179 144 </tr>
180   - <tr v-for="(item,index) in productData" :key="index" >
  145 + <tr v-for="(item,index) in productData" :key="index">
181 146 <td>
182 147 {{ item.value }}
183 148 </td>
... ... @@ -185,46 +150,59 @@
185 150 {{ item.price }}
186 151 </td>
187 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 155 </td>
190 156 </tr>
191 157 </table>
192 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 161 </el-form>
195 162 <span slot="footer" class="dialog-footer">
196 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 165 <el-button style="background-color: #3F9B6A;color: #fff;" @click="vipPriceSubmit">确 定</el-button>
199 166 </span>
200 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 203 <span slot="footer" class="dialog-footer">
226 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 206 <el-button type="primary" @click="rukuCheck">确 定</el-button>
229 207 </span>
230 208 </el-dialog>
... ... @@ -232,525 +210,610 @@
232 210 </template>
233 211  
234 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 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 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 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 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 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 692 </script>
652 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 710 ::v-deep .el-pagination__total {
667 711 position: absolute;
668 712 left: 10px;
669 713 }
  714 +
670 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 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 819 </style>
... ...