Skip to content

L
linshenxs-shop
Commit 37a5f53e by cpa
Options

规格修改

parent a58dc8e5
Showing with 193 additions and 81 deletions
src/views/businessGoods/components/addSpec.vue 0 → 100644
<template>
<el-dialog :title="topTitle"
:visible.sync="show"
:close-on-click-modal="false"
:before-close="handleClose" append-to-body >
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="选择规格名称" prop="specName"
:initDropDownBox="initDropDownBox">
<avue-select v-model="form.specName" @change="getSpecValue" placeholder="选择规格名称" type="tree" :dic="dic" ></avue-select>
</el-form-item>
<el-form-item label="选择规格值" prop="specValueStr">
<el-checkbox-group v-model="specValueStr" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
</el-form>
<!-- 底部 -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="loading" @click="onSubmit" style="width: 200px; height: 40px;display:block;margin:0 auto;" >确认添加</el-button>
</span>
</el-dialog>
</template>
<script>
import {ZmMixin} from '@/mixins/ZmMixin.js'
export default {
props: {
show: Boolean,
},
mixins: [ZmMixin],
components: {
},
computed: {
topTitle() {
return '添加规格'
},
initDropDownBox(){
this.$axios.get("/general/mallGoodsSpec/dropDownBox").then(e =>{
this.dic=Object.values(e.data)
})
}
},
watch: {},
data() {
return {
dic:[],
value:'选择规格名称',//下拉
specValueStr: [],
cities: [],
inputVisible: false,
inputValue: '',
loading: false,
form: {
specName: '',
specValueStr:'',
},
rules: {},
}
},
methods: {
// 下拉框值变更事件：获取规格值
getSpecValue(val){
if(val!==undefined && val!==''){
this.$axios.get("/general/mallGoodsSpecValue/multiSelectButton",{
params:{specId:val}
}).then(response => {
this.cities=Object.values(response.data)
return response.data
}, error => {
console.log('错误', error.message)
})
}
},
handleClose() {
this.$emit('close')
},
handleCloseTag(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
onSubmit() {
this.$refs.elTable.style.display='none'
this.handleClose()
}
},
}
</script>
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
src/views/businessGoods/goodsEdit/goods_api.js
......@@ -15,6 +15,15 @@ export function searchSpecByName(query) {
})
}
export function searchSpecByClassId(query) {
return request({
url: '/admin/mallGoodsSpec/getSpecByClassId',
method: 'get',
params: query
})
}
export function getSpecValue(query) {
return request({
url: '/admin/mallGoodsSpec/getSpecValueById',
......@@ -25,16 +34,19 @@ export function getSpecValue(query) {
export function getGoodsDetails(query) {
return request({
url: '/admin/mallGoodsSpec/getDetails',
url: '/admin/mallGoods/getDetailsById',
method: 'get',
params: query
})
}
export function addOrEditGoods(data) {
return request({
url: '/admin/merchantMallGoods/addOrEditGoods',
method: 'get',
url: '/admin/mallGoods/addOrEditGoods',
method: 'post',
params: data
})
}
src/views/businessGoods/goodsEdit/goods_edit.vue
......@@ -27,7 +27,7 @@
添加规格</el-button>
<el-table :data="form.skus" size="mini">
<el-table-column v-for="(spec, index) in specs" :label="spec.specName" width="120">
<el-table-column v-for="(spec, index) in specs" :key="index" :label="spec.specName" width="120">
<template slot-scope="scope">
<span>{{titleValue(spec, scope.row)}}</span>
......@@ -35,14 +35,14 @@
</el-table-column>
<el-table-column label="商家价格" width="170">
<el-table-column label="商家价格" width="160">
<template slot-scope="scope">
<el-input-number v-model="scope.row.merchantPrice" :precision="2" :step="1" :min="0">
</el-input-number>
</template>
</el-table-column>
<el-table-column label="售卖价格" width="170">
<el-table-column label="售卖价格" width="160">
<template slot-scope="scope">
<el-input-number v-model="scope.row.sellPrice" :precision="2" :step="1" :min="0">
</el-input-number>
......@@ -55,7 +55,7 @@
</template>
</el-table-column>
<el-table-column label="商品库存" width="170">
<el-table-column label="商品库存" width="160">
<template slot-scope="scope">
<el-input-number v-model="scope.row.stock" :step="1" :min="0"></el-input-number>
</template>
......@@ -85,12 +85,6 @@
<span class="sug">上传视频，建议视频长度1分钟，仅支持MP4格式</span>
</div>
</el-form-item>
<el-form-item label="商品认证视频" prop="authUrl" v-if="this.needVideoProof===0">
<div class="upload">
<uploader :lazyList="form.authUrl" :video="true" :image="false" @change="(list) => { form.authUrl = list.join(',') }" />
<span class="sug">上传视频，建议视频长度1分钟，仅支持MP4格式</span>
</div>
</el-form-item>
</div>
<div class="zm_info_row">
......@@ -183,7 +177,7 @@
</span>
<!-- 规格显示控件 -->
<type-select v-if="this.form.goodsClassId != undefined" :show="showSpecList" :classifyId="this.form.goodsClassId"
<type-select v-if="this.form.goodsClassId != undefined" :show="showSpecList" :classId="this.form.goodsClassId"
@chosen="onChosen" @close="showSpecList = false" />
</div>
......@@ -192,9 +186,7 @@
<script>
import {getMerchantByAccount} from "@/api/mall/merchantMallgoods";
let DBG = true
let DBG = false
import {
ZmMixin
} from '@/mixins/ZmMixin.js'
......@@ -206,9 +198,9 @@
import {
getClassifyDropDown,
getGoodsDetails,
addOrEditGoods
addOrEditGoods,
addOrEdit
} from './goods_api.js'
import {fetchList} from "@/api/mall/merchantMallorder";
export default {
mixins: [ZmMixin],
components: {
......@@ -218,7 +210,6 @@
},
data() {
return {
needVideoProof:2,
//如果是编辑则需要id
id: undefined,
//如果是编辑则需要加载数据
......@@ -229,10 +220,8 @@
specs: [],
//表单数据
form: {
merchantId:'',
goodsName: "1",
goodsClassId: "1",
skus: [],
goodsName: "",
goodsClassId: "",
listImage: "",
detailImage: "",
videoUrl: "",
......@@ -244,7 +233,8 @@
needVideo: true,
needContract: true,
needDelivery: true,
hireRate: 0
hireRate: 0,
skus: [],
},
//分类数据
classOptions: [],
......@@ -380,24 +370,9 @@
}
}
},
created() {
let userInfo= JSON.parse(sessionStorage.getItem("linshenxs-userInfo"))
let account=userInfo.content.username
getMerchantByAccount(
{account: account}
).then(response => {
this.form.merchantId=response.data.data.id
this.needVideoProof=response.data.data.needVideoProof
})
},
computed: {
//点前页面标题
editTitle() {
return this.id ? "编辑商品基础信息" : "添加商品基础信息"
},
//能否选择规格
......@@ -419,6 +394,9 @@
methods: {
//重新加载
reload(id) {
if(id == undefined) {
this.clearData()
}
this.loading = true
getClassifyDropDown()
.then(r => {
......@@ -443,9 +421,29 @@
})
.catch(e => {
this.loading = false
console.log(e)
})
},
//清除数据
clearData() {
this.form = {
goodsName: "",
goodsClassId: "",
listImage: "",
detailImage: "",
videoUrl: "",
authUrl: "",
details: "",
fakeNumber: 0,
needReal: true,
payWithA: true,
needVideo: true,
needContract: true,
needDelivery: true,
hireRate: 0,
skus: [],
}
},
//回填数据
refill(data) {
let skus = data.skus
......@@ -683,14 +681,11 @@
//点击退出
handleClose() {
this.$emit('close')
// this.$router.push('/index')
// this.$router.go(-1)
},
//点击确认
onSubmit() {
this.$refs['refForm'].validate((valid) => {
if(valid) {
console.log("valid"+valid)
this.doSubmit()
}
})
......@@ -770,4 +765,8 @@
display: flex;
flex-direction: column;
}
>>> .el-input-number__increase {
right: 1px!important
}
</style>
src/views/businessGoods/goodsEdit/goods_edit_pop.vue
......@@ -23,9 +23,6 @@
},
computed: {
topTitle() {
if(this.id>=0&&this.id!=undefined){
return "编辑商品"
}
return "新增商品"
}
},
......
src/views/businessGoods/goodsEdit/mock_data.js
export const mock = {
"goodsName": "你行你上",
"goodsName": "老牛批了",
"goodsClassId": 1,
"skus": [
{
......@@ -19,7 +19,7 @@ export const mock = {
],
"merchantPrice": 10,
"sellPrice": 50,
"goodsImage": "https://s.cn.bing.net/th?id=OJ.yL3aH2PmKyuCjQ",
"goodsImage": "http://linshenxs.oss-cn-beijing.aliyuncs.com/images/9941abc6gy1g4s9kdz3d1j205k05kt8o.jpg",
"stock": 10
},
{
......
src/views/businessGoods/goodsEdit/type_select.vue
......@@ -10,23 +10,14 @@
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="选择规格" prop="class">
<el-select
v-model="form.class"
filterable
remote
reserve-keyword
placeholder="搜索规格名称"
@change="onSelect"
:remote-method="remoteMethod"
:disabled="valuing"
:loading="searching">
<el-select v-model="form.class" filterable placeholder="请选择规格" @change="onSelect">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-select>
</el-form-item>
<el-form-item label="选择规格值" prop="value">
......@@ -55,7 +46,7 @@
} from '@/mixins/ZmMixin.js'
import {
searchSpecByName,
searchSpecByClassId,
getSpecValue
} from './goods_api.js'
......@@ -63,7 +54,7 @@
mixins: [ZmMixin],
props: {
show: Boolean,
classifyId: [String, Number]
classId: [String, Number]
},
data() {
return {
......@@ -97,6 +88,7 @@
this.values = []
this.form.class = ""
this.form.value = []
this.remoteMethod()
}
}
},
......@@ -104,26 +96,21 @@
handleClose() {
this.$emit('close')
},
remoteMethod(query) {
remoteMethod() {
this.options = []
if(query !== '') {
this.searching = true
searchSpecByName({specName: query, classifyId: this.classifyId})
.then(z => {
this.searching = false
let r = this.zmRes(z)
if(r) {
this.options = r.map(r => {
return {
label: r.specName,
value: r.id
}})
}
})
.catch(e => {
this.searching = false
})
}
searchSpecByClassId({classId: this.classId})
.then(z => {
let r = this.zmRes(z)
if(r) {
this.options = r.map(r => {
return {
label: r.specName,
value: r.id
}})
}
})
.catch(e => {
})
},
onSelect(select) {
if(select) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment