yxt_product
/
yxt-yythmall-ui-admin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

品牌、类别

master
liupopo 1 year ago
parent
d0413645f9
commit
be1e6fb220
7 changed files with 796 additions and 684 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/api/adminmallapi.js
  2. 59
      src/layout/components/Sidebar/index.vue
  3. 286
      src/views/commodity/commodityAdd.vue
  4. 10
      src/views/pms/brand/components/BrandDetail.vue
  5. 353
      src/views/pms/product/components/ProductInfoDetail.vue
  6. 168
      src/views/pms/product/components/ProductSaleDetail.vue
  7. 586
      src/views/pms/product/index.vue

18
src/api/adminmallapi.js
View File

@ -0,0 +1,18 @@
import request from '@/utils/request'
export default {
// 品牌列表
listAllBrand: function(params) {
return request({
url: '/adminapi/mall/listAllBrand',
method: 'get'
})
},
// 品牌列表
listAllCategory: function(params) {
return request({
url: '/adminapi/mall/listAllCategory',
method: 'get'
})
}
}

59
src/layout/components/Sidebar/index.vue
View File

@ -62,25 +62,27 @@
}, },
name: '/pms', name: '/pms',
path: '/pms', path: '/pms',
children: [{ children: [
alwaysShow: true, // {
component: 'product', // alwaysShow: true,
meta: { // component: 'product',
icon: 'el-icon-help', // meta: {
title: '商品列表' // icon: 'el-icon-help',
}, // title: '商品列表'
name: '/pms/product', // },
path: '/pms/product' // name: '/pms/product',
}, // path: '/pms/product'
{ // },
path: '/pms/addProduct', // {
name: '/pms/addProduct', // path: '/pms/addProduct',
component: 'addProduct', // name: '/pms/addProduct',
meta: { // component: 'addProduct',
title: '添加商品', // meta: {
icon: 'el-icon-help' // title: '添加商品',
} // icon: 'el-icon-help'
}, { // }
// },
{
alwaysShow: true, alwaysShow: true,
component: 'brand', component: 'brand',
meta: { meta: {
@ -98,16 +100,17 @@
}, },
name: '/pms/productCate', name: '/pms/productCate',
path: '/pms/productCate' path: '/pms/productCate'
}, {
alwaysShow: true,
component: 'productAttr',
meta: {
icon: 'el-icon-help',
title: '商品类型'
},
name: '/pms/productAttr',
path: '/pms/productAttr'
} }
// , {
// alwaysShow: true,
// component: 'productAttr',
// meta: {
// icon: 'el-icon-help',
// title: '商品类型'
// },
// name: '/pms/productAttr',
// path: '/pms/productAttr'
// }
] ]
}, },
{ {

286
src/views/commodity/commodityAdd.vue
View File

@ -1,85 +1,131 @@
<template> <template>
<div> <div>
<div class="tab-header webtop"> <div class="tab-header webtop">
<!-- 标题 --> <!-- 标题 -->
<div>商品信息</div> <div>商品信息</div>
<!-- start 添加修改按钮 --> <!-- start 添加修改按钮 -->
<div> <div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div> </div>
<!-- end 添加修改按钮 --> <!-- end 添加修改按钮 -->
<!-- end 详情按钮 --> <!-- end 详情按钮 -->
</div> </div>
<div class="listconadd"> <div class="listconadd">
<el-card class="box-card"> <el-card class="box-card">
<div class="item"> <div class="item">
<span class="item_text">名称：</span> <span class="item_text">选择菜窖分类：</span>
<el-input v-model="formobj.name" placeholder="" class="item_input" clearable /> <el-select v-model="formobj.brandId" placeholder="请选择菜窖分类" class="item_input" @change="selectBrandChange">
</div> <el-option
<div class="item"> v-for="item in brandList"
<span class="item_text">编码：</span> :key="item.id"
<el-input v-model="formobj.code" placeholder="" class="item_input" clearable :label="item.name"
oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" /> :value="item.id"
</div> />
<div class="item"> </el-select>
<span class="item_text">条码：</span> </div>
<el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable <div class="item">
oninput="value=value.replace(/[^0-9]/g,'')" /> <span class="item_text">选择商品分类：</span>
</div> <el-select v-model="formobj.categoryId" placeholder="请选择商品分类" class="item_input" @change="selectCateChange">
<div class="item"> <el-option
<span class="item_text">价格 (元/斤)：</span> v-for="item in cateList"
<el-input v-model="formobj.price" placeholder="" class="item_input" clearable :key="item.id"
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" /> :label="item.name"
</div> :value="item.id"
/>
<div class="item"> </el-select>
<span class="item_text">商品单位：</span> </div>
<el-input v-model="formobj.specificationUnit" placeholder="例如：斤/瓶/袋/箱/盒" class="item_input" clearable /> <div class="item">
</div> <span class="item_text">名称：</span>
<div class="item"> <el-input v-model="formobj.name" placeholder="" class="item_input" clearable />
<span class="item_text">规格 (斤/份)：</span> </div>
<el-input v-model="formobj.weight" placeholder="例如：30" class="item_input" clearable oninput="value=value.replace(/[^0-9]/g,'')" /> <div class="item">
</div> <span class="item_text">编码：</span>
<div class="item"> <el-input
<span class="item_text">规格单位：</span> v-model="formobj.code"
<el-input v-model="formobj.unitName" placeholder="例如：份" :readonly="true" class="item_input" clearable /> placeholder=""
</div> class="item_input"
<div class="item"> clearable
<span class="item_text">规格描述：</span> oninput="value=value.replace(/[^A-Za-z0-9]/g, '')"
<el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable /> />
</div> </div>
<div class="item"> <div class="item">
<span class="item_text">商品简介：</span> <span class="item_text">条码：</span>
<el-input v-model="formobj.content" placeholder="商品简介" class="item_input" clearable /> <el-input
</div> v-model="formobj.barcode"
placeholder=""
class="item_input"
clearable
oninput="value=value.replace(/[^0-9]/g,'')"
/>
</div>
<div class="item">
<span class="item_text">价格 (元/斤)：</span>
<el-input
v-model="formobj.price"
placeholder=""
class="item_input"
clearable
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
/>
</div>
<div class="item" style="margin-bottom: 100px;margin-top: 100px;"> <div class="item">
<span class="item_text">图片：</span> <span class="item_text">商品单位：</span>
<upload style="margin-top: 20px;" class="item_input" ref="uploadImg2" v-model="imgList" :limit="1" <el-input v-model="formobj.specificationUnit" placeholder="例如：斤/瓶/袋/箱/盒" class="item_input" clearable />
@change="backData" bucket="map" :class="{ hide: hideUploadBtn }" </div>
:upload-data="{ type: '0001' }"></upload> <div class="item">
</div> <span class="item_text">规格 (斤/份)：</span>
<el-input v-model="formobj.weight" placeholder="例如：30" class="item_input" clearable oninput="value=value.replace(/[^0-9]/g,'')" />
</div>
<div class="item">
<span class="item_text">规格单位：</span>
<el-input v-model="formobj.unitName" placeholder="例如：份" :readonly="true" class="item_input" clearable />
</div>
<div class="item">
<span class="item_text">规格描述：</span>
<el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
</div>
<div class="item">
<span class="item_text">商品简介：</span>
<el-input v-model="formobj.content" placeholder="商品简介" class="item_input" clearable />
</div>
<div> <div class="item" style="margin-bottom: 100px;margin-top: 100px;">
<span class="item_text">商品详情：</span> <span class="item_text">图片：</span>
<editor :height="300" :minHeight="100" :value="formobj.appContent" @input="editinput"></editor> <upload
</div> ref="uploadImg2"
v-model="imgList"
style="margin-top: 20px;"
class="item_input"
:limit="1"
bucket="map"
:class="{ hide: hideUploadBtn }"
:upload-data="{ type: '0001' }"
@change="backData"
/>
</div>
</el-card> <div>
<span class="item_text">商品详情：</span>
<editor :height="300" :min-height="100" :value="formobj.appContent" @input="editinput" />
</div>
</div> </el-card>
</div> </div>
</div>
</template> </template>
<script> <script>
import req from '@/api/commodity/commodity.js' import req from '@/api/commodity/commodity.js'
import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue' import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
import Editor from '@/components/Editor' import Editor from '@/components/Editor'
import reqMall from '@/api/adminmallapi.js'
export default { export default {
components: { components: {
@ -90,39 +136,54 @@
return { return {
imgList: [ imgList: [
], ],
submitdisabled: false, submitdisabled: false,
formobj: { formobj: {
sid: "", sid: '',
name: '', name: '',
code: '', code: '',
barcode: '', barcode: '',
price: "", price: '',
unitName: "份", unitName: '份',
specificationUnit:"", specificationUnit: '',
weight:"", weight: '',
remarks: "", remarks: '',
content: "", content: '',
picUrl: "", picUrl: '',
appContent: '' brandId: null,
brandName: '',
categoryId: null,
categoryName: ''
}, },
hideUploadBtn: false, brandList: [],
cateList: [],
hideUploadBtn: false
} }
}, },
created() {
this.initData()
},
methods: { methods: {
initData() {
reqMall.listAllBrand().then(resp => {
this.brandList = resp.data
})
reqMall.listAllCategory().then(resp => {
this.cateList = resp.data
})
},
backData(value) { backData(value) {
console.log("backData》》》》", value) console.log('backData》》》》', value)
console.log("imgList", this.imgList) console.log('imgList', this.imgList)
if (this.imgList.length > 0) { if (this.imgList.length > 0) {
this.formobj.picUrl = this.imgList[0].url this.formobj.picUrl = this.imgList[0].url
} else { } else {
this.formobj.picUrl = "" this.formobj.picUrl = ''
} }
this.hideUploadBtn = this.imgList.length != 0; this.hideUploadBtn = this.imgList.length != 0
console.log("this.hideUploadBtn", this.hideUploadBtn) console.log('this.hideUploadBtn', this.hideUploadBtn)
}, },
saveOrUpdate() { saveOrUpdate() {
@ -146,22 +207,21 @@
if (isreload === 'true') this.$emit('reloadlist') if (isreload === 'true') this.$emit('reloadlist')
this.imgList = [] this.imgList = []
this.formobj = { this.formobj = {
sid: "", sid: '',
name: '', name: '',
code: '', code: '',
barcode: '', barcode: '',
price: "", price: '',
unitName: "份", unitName: '份',
specificationUnit:"", specificationUnit: '',
weight:"", weight: '',
remarks: "", remarks: '',
content: "", content: '',
picUrl: "", picUrl: '',
appContent: '' appContent: ''
} }
this.$emit('doback') this.$emit('doback')
}, },
showAdd() { showAdd() {
console.log(this.imgList, 88888888) console.log(this.imgList, 88888888)
}, },
@ -171,30 +231,48 @@
if (resp.success) { if (resp.success) {
this.formobj = resp.data this.formobj = resp.data
this.imgList = [] this.imgList = []
if (resp.data.picUrl != '') if (resp.data.picUrl != '') {
this.imgList.push({ this.imgList.push({
url: resp.data.picUrl url: resp.data.picUrl
}) })
}
this.hideUploadBtn = this.imgList.length != 0; this.hideUploadBtn = this.imgList.length != 0
console.log("this.hideUploadBtn", this.hideUploadBtn) console.log('this.hideUploadBtn', this.hideUploadBtn)
} }
}) })
.catch(e => { .catch(e => {
this.formobj = row this.formobj = row
this.imgList = [] this.imgList = []
if (resp.data.picUrl != '') // if (resp.data.picUrl != '') {
this.imgList.push({ // this.imgList.push({
url: formobj.picUrl // url: formobj.picUrl
}) // })
// }
this.hideUploadBtn = this.imgList.length != 0; // this.hideUploadBtn = this.imgList.length != 0
console.log("this.hideUploadBtn", this.hideUploadBtn) console.log('this.hideUploadBtn', this.hideUploadBtn)
}) })
}, },
editinput(text) { editinput(text) {
this.formobj.appContent = text this.formobj.appContent = text
} },
selectBrandChange(val) {
for (var i = 0; i < this.brandList.length; i++) {
if (val === this.brandList[i].id) {
this.formobj.brandName = this.brandList[i].name
break
}
}
},
selectCateChange(val) {
for (var i = 0; i < this.cateList.length; i++) {
if (val === this.cateList[i].id) {
this.formobj.categoryName = this.cateList[i].name
break
}
}
}
} }
} }
</script> </script>
@ -268,4 +346,4 @@
} }
} }
</style> </style>

10
src/views/pms/brand/components/BrandDetail.vue
View File

@ -32,6 +32,12 @@
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="起始销售数量：">
<el-input v-model="brand.qssl" />
</el-form-item>
<el-form-item label="订购协议：">
<el-input v-model="brand.dgxy" />
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button> <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
<el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button> <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
@ -55,7 +61,9 @@
logo: '', logo: '',
name: '', name: '',
showStatus: 0, showStatus: 0,
sort: 0 sort: 0,
qssl: 0,
dgxy: ''
} }
export default { export default {
name: 'BrandDetail', name: 'BrandDetail',

353
src/views/pms/product/components/ProductInfoDetail.vue
View File

@ -1,33 +1,34 @@
<template> <template>
<div style="margin-top: 50px"> <div style="margin-top: 50px">
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small"> <el-form ref="productInfoForm" :model="value" :rules="rules" label-width="120px" style="width: 600px" size="small">
<el-form-item label="商品分类：" prop="productCategoryId"> <el-form-item label="商品分类：" prop="productCategoryId">
<el-cascader <el-cascader
change-on-select
v-model="selectProductCateValue" v-model="selectProductCateValue"
:options="productCateOptions"> change-on-select
</el-cascader> :options="productCateOptions"
/>
</el-form-item> </el-form-item>
<el-form-item label="商品名称：" prop="name"> <el-form-item label="商品名称：" prop="name">
<el-input v-model="value.name"></el-input> <el-input v-model="value.name" />
</el-form-item> </el-form-item>
<el-form-item label="副标题：" prop="subTitle"> <el-form-item label="副标题：" prop="subTitle">
<el-input v-model="value.subTitle"></el-input> <el-input v-model="value.subTitle" />
</el-form-item> </el-form-item>
<el-form-item label="商品品牌：" prop="brandId"> <el-form-item label="商品品牌：" prop="brandId">
<el-select <el-select
v-model="value.brandId" v-model="value.brandId"
placeholder="请选择品牌"
@change="handleBrandChange" @change="handleBrandChange"
placeholder="请选择品牌"> >
<el-option <el-option
v-for="item in brandOptions" v-for="item in brandOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-form-item label="店内分类：" prop="storeClassId"> <!-- <el-form-item label="店内分类：" prop="storeClassId">
<el-select <el-select
v-model="value.storeClassId" v-model="value.storeClassId"
@ -46,7 +47,7 @@
v-model="selectAreaValue" v-model="selectAreaValue"
:options="areaOptions"> :options="areaOptions">
</el-cascader> </el-cascader>
</el-form-item> --> </el-form-item>
<el-form-item label="标签" prop="tags"> <el-form-item label="标签" prop="tags">
<el-select <el-select
v-model="value.tagList" v-model="value.tagList"
@ -64,45 +65,47 @@
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<el-form-item label="商品介绍："> <el-form-item label="商品介绍：">
<el-input <el-input
:autoSize="true"
v-model="value.description" v-model="value.description"
:auto-size="true"
type="textarea" type="textarea"
placeholder="请输入内容"></el-input> placeholder="请输入内容"
/>
</el-form-item> </el-form-item>
<el-form-item label="商品货号："> <el-form-item label="商品货号：">
<el-input v-model="value.productSn"></el-input> <el-input v-model="value.productSn" />
</el-form-item> </el-form-item>
<el-form-item label="商品售价："> <el-form-item label="商品售价：">
<el-input v-model="value.price"></el-input> <el-input v-model="value.price" />
</el-form-item> </el-form-item>
<el-form-item label="惠农价："> <el-form-item label="惠农价：">
<el-input v-model="value.originalPrice"></el-input> <el-input v-model="value.originalPrice" />
</el-form-item> </el-form-item>
<el-form-item label="商品库存："> <el-form-item label="商品库存：">
<el-input v-model="value.stock"></el-input> <el-input v-model="value.stock" />
</el-form-item> </el-form-item>
<el-form-item label="计量单位："> <el-form-item label="计量单位：">
<el-select <el-select
v-model="value.unit" v-model="value.unit"
placeholder="请选择计量单位"> placeholder="请选择计量单位"
>
<el-option <el-option
v-for="item in unitOptions" v-for="item in unitOptions"
:key="item.id" :key="item.id"
:label="item.id" :label="item.id"
:value="item.id"> :value="item.id"
</el-option> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品重量："> <el-form-item label="商品重量：">
<el-input v-model="value.weight" style="width: 300px"></el-input> <el-input v-model="value.weight" style="width: 300px" />
<span style="margin-left: 20px">千克</span> <span style="margin-left: 20px">千克</span>
</el-form-item> </el-form-item>
<!-- <el-form-item label="固定运费："> <!-- <el-form-item label="固定运费：">
<el-input v-model="value.transfee" style="width: 300px"></el-input> <el-input v-model="value.transfee" style="width: 300px"></el-input>
<span style="margin-left: 20px">优先于运费模版</span> <span style="margin-left: 20px">优先于运费模版</span>
</el-form-item> </el-form-item>
@ -120,7 +123,7 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="排序"> <el-form-item label="排序">
<el-input v-model="value.sort"></el-input> <el-input v-model="value.sort" />
</el-form-item> </el-form-item>
<el-form-item style="text-align: center"> <el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步</el-button> <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步</el-button>
@ -130,17 +133,17 @@
</template> </template>
<script> <script>
import {fetchListWithChildren} from '@/api/productCate' import { fetchListWithChildren } from '@/api/productCate'
import {fetchAreaListWithChildren,getArea} from '@/api/area' import { fetchAreaListWithChildren, getArea } from '@/api/area'
import {fetchList as fetchTagList} from '@/api/ums/umsMemberTag' import { fetchList as fetchTagList } from '@/api/ums/umsMemberTag'
import {fetchList as fetchBrandList} from '@/api/brand' import { fetchList as fetchBrandList } from '@/api/brand'
import {fetchList as fetchStoreClassList} from '@/api/sys/sysStoreClass' import { fetchList as fetchStoreClassList } from '@/api/sys/sysStoreClass'
import {fetchList as fetchFeightTemplateList} from '@/api/pms/feightTemplate'; import { fetchList as fetchFeightTemplateList } from '@/api/pms/feightTemplate'
import {getProduct} from '@/api/product'; import { getProduct } from '@/api/product'
let userRoles = [] let userRoles = []
export default { export default {
name: "ProductInfoDetail", name: 'ProductInfoDetail',
props: { props: {
value: Object, value: Object,
isEdit: { isEdit: {
@ -150,119 +153,116 @@ let userRoles = []
}, },
data() { data() {
return { return {
hasEditCreated:false, hasEditCreated: false,
//选中商品分类的值 // 选中商品分类的值
selectProductCateValue: [], selectProductCateValue: [],
productCateOptions: [], productCateOptions: [],
//选中商品分类的值 // 选中商品分类的值
selectAreaValue: [], selectAreaValue: [],
areaOptions: [], areaOptions: [],
brandOptions: [], brandOptions: [],
storeClassOptions:[], storeClassOptions: [],
area:null, area: null,
TagList:[], TagList: [],
areaList:[], areaList: [],
feightTemplateOptions:[], feightTemplateOptions: [],
unitOptions:[{ unitOptions: [{
id: "个", id: '个',
name: "个", name: '个'
},{ }, {
id: "袋", id: '袋',
name: "袋", name: '袋'
}, },
{ {
id: "箱", id: '箱',
name: "箱", name: '箱'
}, },
{ {
id: "条", id: '条',
name: "条", name: '条'
}, },
{ {
id: "盒", id: '盒',
name: "盒", name: '盒'
},{ }, {
id: "包", id: '包',
name: "包", name: '包'
},{ }, {
id: "斤", id: '斤',
name: "斤", name: '斤'
},{ }, {
id: "两", id: '两',
name: "两", name: '两'
},{ }, {
id: "件", id: '件',
name: "件", name: '件'
},{ }, {
id: "瓶", id: '瓶',
name: "瓶", name: '瓶'
},{ }, {
id: "千克", id: '千克',
name: "千克", name: '千克'
}], }],
rules: { rules: {
name: [ name: [
{required: true, message: '请输入商品名称', trigger: 'blur'}, { required: true, message: '请输入商品名称', trigger: 'blur' },
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
], ],
subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}], subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}], productCategoryId: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}], brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}], description: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}] requiredProp: [{ required: true, message: '该项为必填项', trigger: 'blur' }]
} }
}; }
},
created() {
this.getProductCateList();
this.getAreaList();
this.getBrandList();
this.getTagList();
this.getFeightTemplateList();
this.getStoreClassList();
}, },
computed:{ computed: {
//商品的编号 // 商品的编号
productId(){ productId() {
return this.value.id; return this.value.id
} }
}, },
watch: { watch: {
productId:function(newValue){ productId: function(newValue) {
if(!this.isEdit)return; if (!this.isEdit) return
if(this.hasEditCreated)return; if (this.hasEditCreated) return
console.log(newValue) console.log(newValue)
if(newValue===undefined||newValue==null||newValue===0)return; if (newValue === undefined || newValue == null || newValue === 0) return
this.handleEditCreated(); this.handleEditCreated()
}, },
selectProductCateValue: function (newValue) { selectProductCateValue: function(newValue) {
if (newValue != null) { if (newValue != null) {
this.value.productCategoryId = newValue[newValue.length-1 >0?newValue.length-1:0]; this.value.productCategoryId = newValue[newValue.length - 1 > 0 ? newValue.length - 1 : 0]
this.value.productCategoryName= this.getCateNameById(this.value.productCategoryId); this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId)
} else { } else {
this.value.productCategoryId = null; this.value.productCategoryId = null
this.value.productCategoryName=null; this.value.productCategoryName = null
} }
}, },
selectAreaValue: function (newValue) { selectAreaValue: function(newValue) {
if (newValue != null) { if (newValue != null) {
console.log(newValue) console.log(newValue)
this.value.areaId = newValue[newValue.length-1 >0?newValue.length-1:0]; this.value.areaId = newValue[newValue.length - 1 > 0 ? newValue.length - 1 : 0]
getArea(this.value.areaId).then(response => { getArea(this.value.areaId).then(response => {
this.value.areaName = response.data.name; this.value.areaName = response.data.name
}); })
} else { } else {
this.value.areaId = null; this.value.areaId = null
this.value.areaName=null; this.value.areaName = null
} }
} }
}, },
created() {
this.getProductCateList()
// this.getAreaList()
this.getBrandList()
// this.getTagList()
// this.getFeightTemplateList()
// this.getStoreClassList()
},
methods: { methods: {
changeRole(value) { changeRole(value) {
userRoles = [] userRoles = []
@ -286,25 +286,23 @@ let userRoles = []
}) })
this.value.tagList = initRoles this.value.tagList = initRoles
}, },
//处理编辑逻辑 // 处理编辑逻辑
handleEditCreated(){ handleEditCreated() {
console.log(this.value) console.log(this.value)
if(this.value.productCategoryId!=null){ if (this.value.productCategoryId != null) {
let seleval = [] const seleval = []
seleval.push(this.value.cateParentId); seleval.push(this.value.cateParentId)
seleval.push(this.value.productCategoryId); seleval.push(this.value.productCategoryId)
this.selectProductCateValue = seleval this.selectProductCateValue = seleval
// this.selectProductCateValue.push(this.value.cateParentId); // this.selectProductCateValue.push(this.value.cateParentId);
// this.selectProductCateValue.push(this.value.productCategoryId); // this.selectProductCateValue.push(this.value.productCategoryId);
} }
if(this.value.areaId!=null){ if (this.value.areaId != null) {
getArea(this.value.areaId).then(response => { getArea(this.value.areaId).then(response => {
this.selectAreaValue.push(response.data.pid); this.selectAreaValue.push(response.data.pid)
this.selectAreaValue.push(this.value.areaId); this.selectAreaValue.push(this.value.areaId)
}); })
} }
console.log(this.selectAreaValue) console.log(this.selectAreaValue)
userRoles = [] userRoles = []
@ -317,114 +315,111 @@ let userRoles = []
}) })
console.log(this.value.tagList) console.log(this.value.tagList)
this.value.tagList = roles this.value.tagList = roles
this.hasEditCreated=true; this.hasEditCreated = true
}, },
getAreaList() { getAreaList() {
fetchAreaListWithChildren().then(response => { fetchAreaListWithChildren().then(response => {
let list = response.data; const list = response.data
this.areaList=list; this.areaList = list
this.areaOptions = []; this.areaOptions = []
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let children = []; const children = []
if (list[i].children != null && list[i].children.length > 0) { if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) { for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id}); children.push({ label: list[i].children[j].name, value: list[i].children[j].id })
} }
} }
this.areaOptions.push({label: list[i].name, value: list[i].id, children: children}); this.areaOptions.push({ label: list[i].name, value: list[i].id, children: children })
} }
}); })
}, },
getCateNameById(id){ getCateNameById(id) {
let name=null; let name = null
for(let i=0;i<this.productCateOptions.length;i++){ for (let i = 0; i < this.productCateOptions.length; i++) {
for(let j=0;j<this.productCateOptions[i].children.length;j++){ for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
if( this.productCateOptions[i].children[j].value && this.productCateOptions[i].children[j].value!=undefined && this.productCateOptions[i].children[j].value===id){ if (this.productCateOptions[i].children[j].value && this.productCateOptions[i].children[j].value != undefined && this.productCateOptions[i].children[j].value === id) {
name=this.productCateOptions[i].children[j].label; name = this.productCateOptions[i].children[j].label
return name; return name
} }
} }
} }
return name; return name
}, },
getProductCateList() { getProductCateList() {
fetchListWithChildren().then(response => { fetchListWithChildren().then(response => {
let list = response.data; const list = response.data
this.productCateOptions = []; this.productCateOptions = []
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let children = []; const children = []
if (list[i].children != null && list[i].children.length > 0) { if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) { for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id}); children.push({ label: list[i].children[j].name, value: list[i].children[j].id })
} }
} }
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children}); this.productCateOptions.push({ label: list[i].name, value: list[i].id, children: children })
} }
}); })
}, },
getFeightTemplateList() { getFeightTemplateList() {
fetchFeightTemplateList({pageNum: 1, pageSize: 100}).then(response => { fetchFeightTemplateList({ pageNum: 1, pageSize: 100 }).then(response => {
this.feightTemplateOptions = []; this.feightTemplateOptions = []
let feightTemplateList = response.data.records; const feightTemplateList = response.data.records
for (let i = 0; i < feightTemplateList.length; i++) { for (let i = 0; i < feightTemplateList.length; i++) {
this.feightTemplateOptions.push({label: feightTemplateList[i].name, value: feightTemplateList[i].id}); this.feightTemplateOptions.push({ label: feightTemplateList[i].name, value: feightTemplateList[i].id })
} }
}); })
}, },
getBrandList() { getBrandList() {
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => { fetchBrandList({ pageNum: 1, pageSize: 100 }).then(response => {
this.brandOptions = []; this.brandOptions = []
let brandList = response.data.records; const brandList = response.data.records
for (let i = 0; i < brandList.length; i++) { for (let i = 0; i < brandList.length; i++) {
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id}); this.brandOptions.push({ label: brandList[i].name, value: brandList[i].id })
} }
}); })
}, },
getStoreClassList() { getStoreClassList() {
fetchStoreClassList({pageNum: 1, pageSize: 100}).then(response => { fetchStoreClassList({ pageNum: 1, pageSize: 100 }).then(response => {
this.storeClassOptions = []; this.storeClassOptions = []
let brandList = response.data.records; const brandList = response.data.records
for (let i = 0; i < brandList.length; i++) { for (let i = 0; i < brandList.length; i++) {
this.storeClassOptions.push({label: brandList[i].name, value: brandList[i].id}); this.storeClassOptions.push({ label: brandList[i].name, value: brandList[i].id })
} }
}); })
}, },
getTagList() { getTagList() {
fetchTagList({pageNum: 1, pageSize: 100,type:2,status:1}).then(response => { fetchTagList({ pageNum: 1, pageSize: 100, type: 2, status: 1 }).then(response => {
this.TagList = response.data.records; this.TagList = response.data.records
}); })
}, },
handleNext(formName) {
handleNext(formName){
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
this.$emit('nextStep'); this.$emit('nextStep')
} else { } else {
this.$message({ this.$message({
message: '验证失败', message: '验证失败',
type: 'error', type: 'error',
duration:1000 duration: 1000
}); })
return false; return false
} }
}); })
}, },
handleBrandChange(val) { handleBrandChange(val) {
let brandName = ''; let brandName = ''
for (let i = 0; i < this.brandOptions.length; i++) { for (let i = 0; i < this.brandOptions.length; i++) {
if (this.brandOptions[i].value === val) { if (this.brandOptions[i].value === val) {
brandName = this.brandOptions[i].label; brandName = this.brandOptions[i].label
break; break
} }
} }
this.value.brandName = brandName; this.value.brandName = brandName
} }
} }
} }

168
src/views/pms/product/components/ProductSaleDetail.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div style="margin-top: 50px"> <div style="margin-top: 50px">
<el-form :model="value" ref="productSaleForm" label-width="120px" style="width: 600px" size="small"> <el-form ref="productSaleForm" :model="value" label-width="120px" style="width: 600px" size="small">
<!-- <el-form-item label="赠送积分："> <!-- <el-form-item label="赠送积分：">
<el-input v-model="value.giftPoint"></el-input> <el-input v-model="value.giftPoint"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="赠送成长值："> <el-form-item label="赠送成长值：">
@ -21,10 +21,10 @@
<el-switch <el-switch
v-model="value.publishStatus" v-model="value.publishStatus"
:active-value="1" :active-value="1"
:inactive-value="0"> :inactive-value="0"
</el-switch> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="分销商品："> <!-- <el-form-item label="分销商品：">
<el-switch <el-switch
v-model="value.isFenxiao" v-model="value.isFenxiao"
:active-value="1" :active-value="1"
@ -43,14 +43,14 @@
<el-switch <el-switch
v-model="value.newStatus" v-model="value.newStatus"
:active-value="1" :active-value="1"
:inactive-value="0"> :inactive-value="0"
</el-switch> />
<span style="margin-left: 10px;margin-right: 10px">推荐</span> <span style="margin-left: 10px;margin-right: 10px">推荐</span>
<el-switch <el-switch
v-model="value.recommandStatus" v-model="value.recommandStatus"
:active-value="1" :active-value="1"
:inactive-value="0"> :inactive-value="0"
</el-switch> />
</el-form-item> </el-form-item>
<el-form-item label="服务保证："> <el-form-item label="服务保证：">
<el-checkbox-group v-model="selectServiceList"> <el-checkbox-group v-model="selectServiceList">
@ -60,18 +60,18 @@
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="详细页标题："> <el-form-item label="详细页标题：">
<el-input v-model="value.detailTitle"></el-input> <el-input v-model="value.detailTitle" />
</el-form-item> </el-form-item>
<el-form-item label="详细页描述："> <el-form-item label="详细页描述：">
<el-input v-model="value.detailDesc"></el-input> <el-input v-model="value.detailDesc" />
</el-form-item> </el-form-item>
<el-form-item label="商品关键字："> <el-form-item label="商品关键字：">
<el-input v-model="value.keywords"></el-input> <el-input v-model="value.keywords" />
</el-form-item> </el-form-item>
<el-form-item label="商品备注："> <el-form-item label="商品备注：">
<el-input v-model="value.note" type="textarea" :autoSize="true"></el-input> <el-input v-model="value.note" type="textarea" :auto-size="true" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="选择优惠方式："> <!-- <el-form-item label="选择优惠方式：">
<el-radio-group v-model="value.promotionType" size="small"> <el-radio-group v-model="value.promotionType" size="small">
<el-radio-button :label="0">无优惠</el-radio-button> <el-radio-button :label="0">无优惠</el-radio-button>
<el-radio-button :label="1">特惠促销</el-radio-button> <el-radio-button :label="1">特惠促销</el-radio-button>
@ -88,8 +88,8 @@
type="datetime" type="datetime"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
placeholder="选择开始时间"> placeholder="选择开始时间"
</el-date-picker> />
</div> </div>
<div class="littleMargin"> <div class="littleMargin">
结束时间： 结束时间：
@ -98,43 +98,49 @@
type="datetime" type="datetime"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
placeholder="选择结束时间"> placeholder="选择结束时间"
</el-date-picker> />
</div> </div>
<div class="littleMargin"> <div class="littleMargin">
促销价格： 促销价格：
<el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input> <el-input v-model="value.promotionPrice" style="width: 220px" placeholder="输入促销价格" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-show="value.promotionType===2"> <el-form-item v-show="value.promotionType===2">
<div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}"> <div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
{{item.memberLevelName}}： {{ item.memberLevelName }}：
<el-input v-model="item.memberPrice" style="width: 200px"></el-input> <el-input v-model="item.memberPrice" style="width: 200px" />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-show="value.promotionType===3"> <el-form-item v-show="value.promotionType===3">
<el-table :data="value.productLadderList" <el-table
style="width: 80%" border> :data="value.productLadderList"
style="width: 80%"
border
>
<el-table-column <el-table-column
label="数量" label="数量"
align="center" align="center"
width="120"> width="120"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.count"></el-input> <el-input v-model="scope.row.count" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="折扣" label="折扣"
align="center" align="center"
width="120"> width="120"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.discount"></el-input> <el-input v-model="scope.row.discount" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
label="操作"> label="操作"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button> <el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button> <el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
@ -143,27 +149,33 @@
</el-table> </el-table>
</el-form-item> </el-form-item>
<el-form-item v-show="value.promotionType===4"> <el-form-item v-show="value.promotionType===4">
<el-table :data="value.productFullReductionList" <el-table
style="width: 80%" border> :data="value.productFullReductionList"
style="width: 80%"
border
>
<el-table-column <el-table-column
label="满" label="满"
align="center" align="center"
width="120"> width="120"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.fullPrice"></el-input> <el-input v-model="scope.row.fullPrice" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="立减" label="立减"
align="center" align="center"
width="120"> width="120"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.reducePrice"></el-input> <el-input v-model="scope.row.reducePrice" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
label="操作"> label="操作"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button> <el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button> <el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
@ -180,10 +192,10 @@
</template> </template>
<script> <script>
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel' import { fetchList as fetchMemberLevelList } from '@/api/memberLevel'
export default { export default {
name: "ProductSaleDetail", name: 'ProductSaleDetail',
props: { props: {
value: Object, value: Object,
isEdit: { isEdit: {
@ -193,79 +205,79 @@
}, },
data() { data() {
return { return {
//日期选择器配置 // 日期选择器配置
pickerOptions1: { pickerOptions1: {
disabledDate(time) { disabledDate(time) {
return time.getTime() < Date.now(); return time.getTime() < Date.now()
} }
} }
} }
}, },
created() {
if (this.isEdit) {
// this.handleEditCreated();
} else {
fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList = [];
for (let i = 0; i < response.data.records.length; i++) {
let item = response.data.records[i];
memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
}
this.value.memberPriceList = memberPriceList;
});
}
},
computed: { computed: {
//选中的服务保证 // 选中的服务保证
selectServiceList: { selectServiceList: {
get() { get() {
let list = []; const list = []
if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list; if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list
let ids = this.value.serviceIds.split(','); const ids = this.value.serviceIds.split(',')
for (let i = 0; i < ids.length; i++) { for (let i = 0; i < ids.length; i++) {
list.push(Number(ids[i])); list.push(Number(ids[i]))
} }
return list; return list
}, },
set(newValue) { set(newValue) {
let serviceIds = ''; let serviceIds = ''
if (newValue != null && newValue.length > 0) { if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) { for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ','; serviceIds += newValue[i] + ','
} }
if (serviceIds.endsWith(',')) { if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0, serviceIds.length - 1) serviceIds = serviceIds.substr(0, serviceIds.length - 1)
} }
this.value.serviceIds = serviceIds; this.value.serviceIds = serviceIds
} else { } else {
this.value.serviceIds = null; this.value.serviceIds = null
} }
} }
} }
}, },
created() {
if (this.isEdit) {
// this.handleEditCreated();
} else {
// fetchMemberLevelList({defaultStatus: 0}).then(response => {
// let memberPriceList = [];
// for (let i = 0; i < response.data.records.length; i++) {
// let item = response.data.records[i];
// memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
// }
// this.value.memberPriceList = memberPriceList;
// });
}
},
methods: { methods: {
handleEditCreated() { handleEditCreated() {
let ids = this.value.serviceIds.split(','); const ids = this.value.serviceIds.split(',')
console.log('handleEditCreated', ids); console.log('handleEditCreated', ids)
for (let i = 0; i < ids.length; i++) { for (let i = 0; i < ids.length; i++) {
this.selectServiceList.push(Number(ids[i])); this.selectServiceList.push(Number(ids[i]))
} }
}, },
handleRemoveProductLadder(index, row) { handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList; const productLadderList = this.value.productLadderList
if (productLadderList.length === 1) { if (productLadderList.length === 1) {
productLadderList.pop(); productLadderList.pop()
productLadderList.push({ productLadderList.push({
count: 0, count: 0,
discount: 0, discount: 0,
price: 0 price: 0
}) })
} else { } else {
productLadderList.splice(index, 1); productLadderList.splice(index, 1)
} }
}, },
handleAddProductLadder(index, row) { handleAddProductLadder(index, row) {
let productLadderList = this.value.productLadderList; const productLadderList = this.value.productLadderList
if (productLadderList.length < 3) { if (productLadderList.length < 3) {
productLadderList.push({ productLadderList.push({
count: 0, count: 0,
@ -276,33 +288,33 @@
this.$message({ this.$message({
message: '最多只能添加三条', message: '最多只能添加三条',
type: 'warning' type: 'warning'
}); })
} }
}, },
handleRemoveFullReduction(index, row) { handleRemoveFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList; const fullReductionList = this.value.productFullReductionList
if (fullReductionList.length === 1) { if (fullReductionList.length === 1) {
fullReductionList.pop(); fullReductionList.pop()
fullReductionList.push({ fullReductionList.push({
fullPrice: 0, fullPrice: 0,
reducePrice: 0 reducePrice: 0
}); })
} else { } else {
fullReductionList.splice(index, 1); fullReductionList.splice(index, 1)
} }
}, },
handleAddFullReduction(index, row) { handleAddFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList; const fullReductionList = this.value.productFullReductionList
if (fullReductionList.length < 3) { if (fullReductionList.length < 3) {
fullReductionList.push({ fullReductionList.push({
fullPrice: 0, fullPrice: 0,
reducePrice: 0 reducePrice: 0
}); })
} else { } else {
this.$message({ this.$message({
message: '最多只能添加三条', message: '最多只能添加三条',
type: 'warning' type: 'warning'
}); })
} }
}, },
handlePrev() { handlePrev() {

586
src/views/pms/product/index.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="main-content"> <button-bar ref="btnbar" view-title="商品列表" :btndisabled="btndisabled" @btnhandle="btnHandle" />
<button-bar ref="btnbar" view-title="商品列表" :btndisabled="btndisabled" @btnhandle="btnHandle" />
<!-- <el-card class="filter-container" shadow="never"> <!-- <el-card class="filter-container" shadow="never">
<div> <div>
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
<span>筛选搜索</span> <span>筛选搜索</span>
@ -55,200 +54,200 @@
</div> </div>
</el-card> --> </el-card> -->
<div class="main-content" style="margin-left: 20px;margin-right: 20px;"> <div class="main-content" style="margin-left: 20px;margin-right: 20px;">
<div class="searchcon"> <div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow"> <el-button size="small" class="searchbtn" @click="clicksearchShow">
{{ searchxianshitit }} {{ searchxianshitit }}
</el-button> </el-button>
<div v-show="isSearchShow" class="search"> <div v-show="isSearchShow" class="search">
<el-form :model="listQuery" :inline="true" class="tab-header"> <el-form :model="listQuery" :inline="true" class="tab-header">
<el-form-item label="输入搜索："> <el-form-item label="输入搜索：">
<el-input v-model="listQuery.keyword" style="width: 203px" placeholder="商品名称" /> <el-input v-model="listQuery.keyword" style="width: 203px" placeholder="商品名称" />
</el-form-item> </el-form-item>
<el-form-item label="商品类型："> <el-form-item label="商品类型：">
<el-select v-model="listQuery.productAttributeCategoryId" placeholder="商品类型" clearable style="width: 160px;"> <el-select v-model="listQuery.productAttributeCategoryId" placeholder="商品类型" clearable style="width: 160px;">
<el-option <el-option
v-for="item in productAttributeCategoryOptions" v-for="item in productAttributeCategoryOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品分类："> <el-form-item label="商品分类：">
<el-cascader <el-cascader
v-model="selectProductCateValue" v-model="selectProductCateValue"
clearable clearable
change-on-select change-on-select
:options="productCateOptions" :options="productCateOptions"
/>
</el-form-item>
<el-form-item label="商品品牌：">
<el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上架状态：">
<el-select v-model="listQuery.publishStatus" placeholder="全部" clearable style="width: 120px;">
<el-option
v-for="item in publishStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="审核状态：">
<el-select v-model="listQuery.verifyStatus" placeholder="全部" clearable style="width: 120px;">
<el-option
v-for="item in verifyStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-form-item> </el-select>
<el-form-item label="商品品牌："> </el-form-item>
<el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable> <el-form-item label="是否新品：">
<el-option <el-select v-model="listQuery.newStatus" placeholder="全部" clearable style="width: 120px;">
v-for="item in brandOptions" <el-option
:key="item.value" v-for="item in newStatusOptions"
:label="item.label" :key="item.value"
:value="item.value" :label="item.label"
/> :value="item.value"
</el-select> />
</el-form-item> </el-select>
<el-form-item label="上架状态："> </el-form-item>
<el-select v-model="listQuery.publishStatus" placeholder="全部" clearable style="width: 120px;"> <el-form-item label="是否推荐：">
<el-option <el-select v-model="listQuery.recommandStatus" placeholder="全部" clearable style="width: 120px;">
v-for="item in publishStatusOptions" <el-option
:key="item.value" v-for="item in recommandStatusOptions"
:label="item.label" :key="item.value"
:value="item.value" :label="item.label"
/> :value="item.value"
</el-select> />
</el-form-item> </el-select>
<el-form-item label="审核状态："> </el-form-item>
<el-select v-model="listQuery.verifyStatus" placeholder="全部" clearable style="width: 120px;"> </el-form>
<el-option <div class="btn" style="text-align: center;">
v-for="item in verifyStatusOptions" <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearchList()">查询</el-button>
:key="item.value" <el-button type="primary" size="small" icon="el-icon-refresh" @click="handleResetSearch()">重置</el-button>
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="是否新品：">
<el-select v-model="listQuery.newStatus" placeholder="全部" clearable style="width: 120px;">
<el-option
v-for="item in newStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="是否推荐：">
<el-select v-model="listQuery.recommandStatus" placeholder="全部" clearable style="width: 120px;">
<el-option
v-for="item in recommandStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" size="small" icon="el-icon-search" @click="handleSearchList()">查询</el-button>
<el-button type="primary" size="small" icon="el-icon-refresh" @click="handleResetSearch()">重置</el-button>
</div>
</div> </div>
</div> </div>
</div>
<!-- 标签栏 --> <!-- 标签栏 -->
<el-tabs v-model="status" type="card" style="margin-top: 10px;" @tab-click="handleGoods"> <el-tabs v-model="status" type="card" style="margin-top: 10px;" @tab-click="handleGoods">
<el-tab-pane name="0"> <el-tab-pane name="0">
<span slot="label"><i class="el-icon-s-order" /> 全部商品</span> <span slot="label"><i class="el-icon-s-order" /> 全部商品</span>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="1"> <el-tab-pane name="1">
<span slot="label"><i class="el-icon-bank-card" /> 出售中</span> <span slot="label"><i class="el-icon-bank-card" /> 出售中</span>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="2"> <el-tab-pane name="2">
<span slot="label"><i class="el-icon-refrigerator" /> 已售馨</span> <span slot="label"><i class="el-icon-refrigerator" /> 已售馨</span>
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="3"> <el-tab-pane name="3">
<span slot="label"><i class="el-icon-truck" />仓库中</span> <span slot="label"><i class="el-icon-truck" />仓库中</span>
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane name="4"> <!-- <el-tab-pane name="4">
<span slot="label"><i class="el-icon-truck"></i> 回收站</span> <span slot="label"><i class="el-icon-truck"></i> 回收站</span>
</el-tab-pane> --> </el-tab-pane> -->
<!-- <el-tab-pane name="5"> <!-- <el-tab-pane name="5">
<span slot="label"><i class="el-icon-truck"></i> <span slot="label"><i class="el-icon-truck"></i>
<el-button class="btn-add" @click="handleAddProduct()" size="mini"> <el-button class="btn-add" @click="handleAddProduct()" size="mini">
添加商品 添加商品
</el-button> </el-button>
</span> </span>
</el-tab-pane> --> </el-tab-pane> -->
</el-tabs> </el-tabs>
<div class="batch-operate-container"> <div class="batch-operate-container">
<el-select v-model="operateType" size="small" placeholder="批量操作"> <el-select v-model="operateType" size="small" placeholder="批量操作">
<el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-button <el-button
style="margin-left: 20px" style="margin-left: 20px"
class="search-button" class="search-button"
type="primary" type="primary"
size="small" size="small"
@click="handleBatchOperate()" @click="handleBatchOperate()"
> >
确定 确定
</el-button> </el-button>
</div> </div>
<div class="pagination-container"> <div class="pagination-container">
<el-pagination <el-pagination
background background
layout="total, sizes,prev, pager, next,jumper" layout="total, sizes,prev, pager, next,jumper"
:page-size="listQuery.pageSize" :page-size="listQuery.pageSize"
:page-sizes="[5,10,15]" :page-sizes="[5,10,15]"
:current-page.sync="listQuery.pageNum" :current-page.sync="listQuery.pageNum"
:total="total" :total="total"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
</div> </div>
<div class="table-container"> <div class="table-container">
<el-table <el-table
ref="productTable" ref="productTable"
v-loading="listLoading" v-loading="listLoading"
:data="list" :data="list"
style="width: 100%" style="width: 100%"
border border
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="60" align="center" /> <el-table-column type="selection" width="60" align="center" />
<el-table-column label="编号" width="100" align="center"> <el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template> <template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column> </el-table-column>
<el-table-column label="商品图片" width="120" align="center"> <el-table-column label="商品图片" width="120" align="center">
<template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template> <template slot-scope="scope"><img style="height: 80px" :src="scope.row.pic"></template>
</el-table-column> </el-table-column>
<el-table-column label="商品名称" align="center"> <el-table-column label="商品名称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>{{ scope.row.name }}</p> <p>{{ scope.row.name }}</p>
<p>品牌：{{ scope.row.brandName }}</p> <p>品牌：{{ scope.row.brandName }}</p>
<p>类别：{{ scope.row.productCategoryName }}</p> <p>类别：{{ scope.row.productCategoryName }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="价格/货号" width="120" align="center"> <el-table-column label="价格/货号" width="120" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>价格：￥{{ scope.row.price }}</p> <p>价格：￥{{ scope.row.price }}</p>
<p>货号：{{ scope.row.productSn }}</p> <p>货号：{{ scope.row.productSn }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="标签" width="140" align="center"> <el-table-column label="标签" width="140" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>上架： <p>上架：
<el-switch <el-switch
v-model="scope.row.publishStatus" v-model="scope.row.publishStatus"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@change="handlePublishStatusChange(scope.$index, scope.row)" @change="handlePublishStatusChange(scope.$index, scope.row)"
/> />
</p> </p>
<p>新品： <p>新品：
<el-switch <el-switch
v-model="scope.row.newStatus" v-model="scope.row.newStatus"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@change="handleNewStatusChange(scope.$index, scope.row)" @change="handleNewStatusChange(scope.$index, scope.row)"
/> />
</p> </p>
<p>推荐： <p>推荐：
<el-switch <el-switch
v-model="scope.row.recommandStatus" v-model="scope.row.recommandStatus"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@change="handleRecommendStatusChange(scope.$index, scope.row)" @change="handleRecommendStatusChange(scope.$index, scope.row)"
/> />
</p> </p>
<!-- <p>分销： <!-- <p>分销：
<el-switch @change="handleFenxiaoStatusChange(scope.$index, scope.row)" <el-switch @change="handleFenxiaoStatusChange(scope.$index, scope.row)"
:active-value="1" :inactive-value="0" v-model="scope.row.isFenxiao"> :active-value="1" :inactive-value="0" v-model="scope.row.isFenxiao">
</el-switch> </el-switch>
@ -258,128 +257,127 @@
:inactive-value="0" v-model="scope.row.isVip"> :inactive-value="0" v-model="scope.row.isVip">
</el-switch> </el-switch>
</p> --> </p> -->
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="排序" width="100" align="center"> <!-- <el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template> <template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column> --> </el-table-column> -->
<el-table-column label="库存数" width="100" align="center"> <el-table-column label="库存数" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>{{ scope.row.stock }}</p> <p>{{ scope.row.stock }}</p>
<!-- <el-button type="primary" icon="el-icon-edit" <!-- <el-button type="primary" icon="el-icon-edit"
@click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button> --> @click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button> -->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="销量" width="100" align="center"> <el-table-column label="销量" width="100" align="center">
<template slot-scope="scope">{{ scope.row.sale }}</template> <template slot-scope="scope">{{ scope.row.sale }}</template>
</el-table-column> </el-table-column>
<el-table-column label="审核状态" width="100" align="center"> <el-table-column label="审核状态" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p> <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
<p> <p>
<el-button type="text" @click="handleShowVeriyEditDialog(scope.$index, scope.row)">审核详情 <el-button type="text" @click="handleShowVeriyEditDialog(scope.$index, scope.row)">审核详情
</el-button> </el-button>
</p> </p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="160" align="center"> <el-table-column label="操作" width="160" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<p> <p>
<el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑 <el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">编辑
</el-button> </el-button>
<!-- <el-button size="mini" @click="handleDeleteStatus(scope.$index, scope.row)">回收 <!-- <el-button size="mini" @click="handleDeleteStatus(scope.$index, scope.row)">回收
</el-button> </el-button>
</p> </p>
<p> <p>
<el-button size="mini" @click="handleShowVeriyEditDialog(scope.$index, scope.row)">日志 <el-button size="mini" @click="handleShowVeriyEditDialog(scope.$index, scope.row)">日志
</el-button> --> </el-button> -->
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除 <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
</el-button> </el-button>
</p> </p>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-dialog title="审核信息" :visible.sync="vertyProduct.dialogVisible" width="40%"> <el-dialog title="审核信息" :visible.sync="vertyProduct.dialogVisible" width="40%">
<el-form ref="brandFrom" :model="vertyProduct" label-width="150px"> <el-form ref="brandFrom" :model="vertyProduct" label-width="150px">
<el-form-item label="审核状态：" prop="verifyStatus"> <el-form-item label="审核状态：" prop="verifyStatus">
<el-switch v-model="vertyProduct.verifyStatus" :active-value="1" :inactive-value="0" /> <el-switch v-model="vertyProduct.verifyStatus" :active-value="1" :inactive-value="0" />
</el-form-item> </el-form-item>
<el-form-item label="审核备注：" prop="detail"> <el-form-item label="审核备注：" prop="detail">
<el-input v-model="vertyProduct.detail" /> <el-input v-model="vertyProduct.detail" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="vertyProduct.dialogVisible = false">取 消</el-button> <el-button @click="vertyProduct.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEditVConfirm">确 定</el-button> <el-button type="primary" @click="handleEditVConfirm">确 定</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table style="width: 100%;margin-top: 20px" :data="vertyProduct.list" border> <el-table style="width: 100%;margin-top: 20px" :data="vertyProduct.list" border>
<el-table-column label="审核状态" width="160" align="center"> <el-table-column label="审核状态" width="160" align="center">
<template slot-scope="scope">{{ scope.row.status | verifyStatusFilter }}</template> <template slot-scope="scope">{{ scope.row.status | verifyStatusFilter }}</template>
</el-table-column> </el-table-column>
<el-table-column label="审核人" width="160" align="center"> <el-table-column label="审核人" width="160" align="center">
<template slot-scope="scope">{{ scope.row.vertifyMan }}</template> <template slot-scope="scope">{{ scope.row.vertifyMan }}</template>
</el-table-column> </el-table-column>
<el-table-column label="审核信息" width="160" align="center"> <el-table-column label="审核信息" width="160" align="center">
<template slot-scope="scope">{{ scope.row.detail }}</template> <template slot-scope="scope">{{ scope.row.detail }}</template>
</el-table-column> </el-table-column>
<el-table-column label="审核时间" width="160" align="center"> <el-table-column label="审核时间" width="160" align="center">
<template slot-scope="scope">{{ scope.row.createTime|formatTime }}</template> <template slot-scope="scope">{{ scope.row.createTime|formatTime }}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-dialog title="编辑货品信息" :visible.sync="editSkuInfo.dialogVisible" width="40%"> <el-dialog title="编辑货品信息" :visible.sync="editSkuInfo.dialogVisible" width="40%">
<span>商品货号：</span> <span>商品货号：</span>
<span>{{ editSkuInfo.productSn }}</span> <span>{{ editSkuInfo.productSn }}</span>
<el-input <el-input
v-model="editSkuInfo.keyword" v-model="editSkuInfo.keyword"
placeholder="按sku编号搜索" placeholder="按sku编号搜索"
size="small" size="small"
style="width: 50%;margin-left: 20px" style="width: 50%;margin-left: 20px"
>
<el-button slot="append" icon="el-icon-search" @click="handleSearchEditSku" />
</el-input>
<el-table style="width: 100%;margin-top: 20px" :data="editSkuInfo.stockList" border>
<el-table-column label="SKU编号" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.skuCode" />
</template>
</el-table-column>
<el-table-column
v-for="(item,index) in editSkuInfo.productAttr"
:key="item.id"
:label="item.name"
align="center"
> >
<el-button slot="append" icon="el-icon-search" @click="handleSearchEditSku" /> <template slot-scope="scope">
</el-input> {{ getProductSkuSp(scope.row,index) }}
<el-table style="width: 100%;margin-top: 20px" :data="editSkuInfo.stockList" border> </template>
<el-table-column label="SKU编号" align="center"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="销售价格" width="80" align="center">
<el-input v-model="scope.row.skuCode" /> <template slot-scope="scope">
</template> <el-input v-model="scope.row.price" />
</el-table-column> </template>
<el-table-column </el-table-column>
v-for="(item,index) in editSkuInfo.productAttr" <el-table-column label="商品库存" width="80" align="center">
:key="item.id" <template slot-scope="scope">
:label="item.name" <el-input v-model="scope.row.stock" />
align="center" </template>
> </el-table-column>
<template slot-scope="scope"> <el-table-column label="库存预警值" width="100" align="center">
{{ getProductSkuSp(scope.row,index) }} <template slot-scope="scope">
</template> <el-input v-model="scope.row.lowStock" />
</el-table-column> </template>
<el-table-column label="销售价格" width="80" align="center"> </el-table-column>
<template slot-scope="scope"> </el-table>
<el-input v-model="scope.row.price" /> <span slot="footer" class="dialog-footer">
</template> <el-button @click="editSkuInfo.dialogVisible = false">取 消</el-button>
</el-table-column> <el-button type="primary" @click="handleEditSkuConfirm">确 定</el-button>
<el-table-column label="商品库存" width="80" align="center"> </span>
<template slot-scope="scope"> </el-dialog>
<el-input v-model="scope.row.stock" />
</template>
</el-table-column>
<el-table-column label="库存预警值" width="100" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.lowStock" />
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="editSkuInfo.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEditSkuConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</div> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save