renzhou
/
yz_wholesaler_admin_vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

取消选择 去修改

Browse Source
main
fanfan 3 months ago
parent 61acb95924
commit 250886c840
4 changed files with 140 additions and 83 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/common/model/goods/MultiSpec.js
  2. 12
      src/components/Modal/GoodsModal/GoodsModal.vue
  3. 31
      src/views/dataCenter/goods/Index.vue
  4. 132
      src/views/dataCenter/goods/modules/MultiSpec.vue

2
src/common/model/goods/MultiSpec.js
Unescape View File

@ -230,7 +230,7 @@ export default class MultiSpec {
oldSkuItem = oldSkuList.find(
(item) =>
newSkuList[index].tempId ===
(item.goods_props && item.goods_props.length > 0) ? item.goods_props.map((v) => v.value.name).join('_') : item.tempId
((item.goods_props && item.goods_props.length > 0) ? item.goods_props.map((v) => v.value.name).join('_') : item.tempId)
)
// }

12
src/components/Modal/GoodsModal/GoodsModal.vue
Unescape View File

@ -52,6 +52,11 @@
:subTitleColor="true"
/>
</template>
<span slot="spec_type" slot-scope="text">
<p class="twoline-hide" style="width: 40px">
{{ text == 10 ? '单规格' : '多规格' }}
</p>
</span>
<span slot="specific_value" slot-scope="text">
<a-tooltip placement="topLeft" :title="text"> {{ text }}</a-tooltip>
</span>
@ -82,10 +87,9 @@ const columns = [
scopedSlots: { customRender: 'item' },
},
{
title: '规格值',
dataIndex: 'specific_value',
width: '100px',
scopedSlots: { customRender: 'specific_value' },
title: '规格类型',
dataIndex: 'spec_type',
scopedSlots: { customRender: 'spec_type' },
},
{
title: '商品价格',

31
src/views/dataCenter/goods/Index.vue
Unescape View File

@ -191,9 +191,15 @@
title="批量加价"
@ok="handleBatchPrice(selectedRowKeys, batchRate)"
>
<div class="fen" style="margin-top:-10px">
<div class="fen" style="margin-top: -10px">
<span style="margin-right: 5px">加价利润率：</span>
<input placeholder="请输入加价利润率" @input="validateBatchAmount" v-model="batchRate" class="input" type="text" />
<input
placeholder="请输入加价利润率"
@input="validateBatchAmount"
v-model="batchRate"
class="input"
type="text"
/>
</div>
</a-modal>
<a-modal
@ -272,7 +278,7 @@
>
<a-button
v-if="selectedRowKeys.length"
style="background-color: #67C23A; color: #fff; border: none; border-radius: 2px"
style="background-color: #67c23a; color: #fff; border: none; border-radius: 2px"
@click="batchPrice = true"
>批量加价</a-button
>
@ -339,6 +345,11 @@
<span slot="profit_rate" slot-scope="text, item">
<p>{{ text > 0 ? Number(text) + '%' : 0 }}</p>
</span>
<span slot="spec_type" slot-scope="text">
<p class="twoline-hide" style="width: 40px">
{{ text == 10 ? '单规格' : '多规格' }}
</p>
</span>
<!-- 商品池 -->
<span slot="is_pool" slot-scope="text">
<p
@ -356,7 +367,7 @@
</span>
<!-- 京东下架 -->
<span slot="is_jd_remove" slot-scope="text">
<p style="width: 40px;text-align: center;" :style="{ color: text == 1 ? 'red' : 'green'}">
<p style="width: 40px; text-align: center" :style="{ color: text == 1 ? 'red' : 'green' }">
{{ text == 1 ? '是' : '否' }}
</p>
</span>
@ -404,6 +415,12 @@ const columns = [
width: '300px',
scopedSlots: { customRender: 'goods_name' },
},
{
title: '规格类型',
width: '90px',
dataIndex: 'spec_type',
scopedSlots: { customRender: 'spec_type' },
},
{
title: '行情价',
width: '100px',
@ -524,7 +541,7 @@ export default {
end_time: '',
is_has_banner: '',
is_has_detail: '',
is_jd_remove:''
is_jd_remove: '',
},
// 正在加载
isLoading: false,
@ -560,7 +577,7 @@ export default {
saleVisible: false,
priceVisible: false,
jingPinVisible: false,
batchPrice:false,
batchPrice: false,
specsType: [
{ name: '全部', val: '' },
{ name: '单规格', val: 10 },
@ -595,7 +612,7 @@ export default {
categoryIds: [],
categoryPriceIds: [],
rate: '',
batchRate:'',
batchRate: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()

132
src/views/dataCenter/goods/modules/MultiSpec.vue
Unescape View File

@ -14,11 +14,7 @@
placeholder="请输入规格名称"
@change="onChangeSpecGroupIpt"
/>
<a
v-if="!isSpecLocked"
class="group-item-delete"
href="javascript:;"
@click="handleDeleteSpecGroup(index)"
<a v-if="!isSpecLocked" class="group-item-delete" href="javascript:;" @click="handleDeleteSpecGroup(index)"
>删除规格组</a
>
</div>
@ -95,13 +91,26 @@
bordered
>
<template slot="select_goods" slot-scope="text, item">
<SelectGoods :multiple="false" :source='source' :channel="channel" @change="handleSelectGoods($event, item)" />
<SelectGoods
:multiple="false"
:source="source"
:channel="channel"
@change="handleSelectGoods($event, item)"
/>
</template>
<template slot="item" slot-scope="item" v-if="item.goods_id">
<GoodsItem
:data="{
image: item.goods_image,
imageAlt: '商品图片',
title: item.goods_name,
}"
:subTitleColor="true"
/>
</template>
<template slot="goods_id" slot-scope="text, item">
{{ item.goods_id }}{{item.goods_name}}
</template>
<!-- 商品名称 -->
<!-- <template slot="goods_name" slot-scope="text, item">
{{ item.goods_name }}
</template> -->
<!-- 商品价格 -->
<template slot="goods_price" slot-scope="text, item">
{{ item.goods_price }}
</template>
@ -124,12 +133,14 @@
{{ item.goods_sku_no }}
</template>
<!-- 操作 -->
<template slot="action" slot-scope="text, item">
<router-link
<template slot="action" slot-scope="text, item, index">
<!-- <router-link
v-if="item.goods_id"
:to="{ path: '/goods/update', query: { goodsId: item.goods_id } }"
>去修改</router-link
>
> -->
<a @click="handleEdit(index, item)" v-if="item.goods_id" style="margin-left: 10px">去修改</a>
<a @click="handleCancel(index)" v-if="item.goods_id" style="margin-left: 10px">取消选择</a>
</template>
</a-table>
</a-form-item>
@ -142,11 +153,12 @@ import MultiSpecModel from '@/common/model/goods/MultiSpec'
import { SelectImage } from '@/components'
import SelectGoods from '@/components/SelectGoods/SelectGoods.vue'
import * as GoodsApi from '@/api/goods'
import { GoodsItem } from '@/components/Table/table'
export default {
components: {
SelectImage,
SelectGoods
SelectGoods,
GoodsItem
},
props: {
// 默认的规格列表
@ -156,10 +168,10 @@ export default {
// 商品规格是否锁定(锁定状态下不允许编辑规格)
isSpecLocked: PropTypes.bool.def(false),
checkList: PropTypes.array.def([]),
channel:PropTypes.any,
channel: PropTypes.any,
source: PropTypes.any.def(0),
},
data () {
data() {
return {
// 标签布局属性
labelCol: { span: 3 },
@ -172,93 +184,114 @@ export default {
// 规格列表
specList: [],
// SKU列表
skuList: []
skuList: [],
},
visible: false
visible: false,
}
},
watch: {
defaultSpecList (val) {
defaultSpecList(val) {
if (val.length && this.MultiSpecModel.isEmpty()) {
this.getData()
}
}
},
},
// 初始化数据
created () {
created() {
// 获取规格及SKU信息
this.getData()
},
methods: {
handleEdit(item) {
const routeData = this.$router.resolve({
path: '/goods/update',
query: {
goodsId: item.goods_id,
},
})
window.open(routeData.href, '_blank')
},
handleCancel(index) {
this.multiSpecData.skuList[index].cost_price = ''
this.multiSpecData.skuList[index].goods_id = ''
this.multiSpecData.skuList[index].goods_image = ''
this.multiSpecData.skuList[index].goods_name = ''
this.multiSpecData.skuList[index].goods_price = ''
this.multiSpecData.skuList[index].goods_price_min = ''
this.multiSpecData.skuList[index].goods_sku_no = ''
this.multiSpecData.skuList[index].goods_weight = ''
this.multiSpecData.skuList[index].line_price = ''
this.multiSpecData.skuList[index].stock_num = ''
},
// 获取规格及SKU信息(展示)
getData () {
getData() {
const { defaultSpecList, defaultSkuList } = this
this.multiSpecData = this.MultiSpecModel.getData(defaultSpecList, defaultSkuList)
},
// 获取规格及SKU信息(表单提交)
getFromSpecData () {
getFromSpecData() {
return this.MultiSpecModel.getFromSpecData()
},
// 添加规格组
handleAddSpecGroup () {
handleAddSpecGroup() {
if (this.checkSkuMaxNum()) {
this.MultiSpecModel.handleAddSpecGroup()
}
},
// 删除规格组
handleDeleteSpecGroup (groupIndex) {
handleDeleteSpecGroup(groupIndex) {
const app = this
const modal = this.$confirm({
title: '您确定要删除该规格组吗?',
content: '删除后不可恢复',
onOk () {
onOk() {
// 删除元素
app.MultiSpecModel.handleDeleteSpecGroup(groupIndex)
// 关闭对话框
modal.destroy()
}
},
})
},
// 新增规格值
handleAddSpecValue (groupIndex) {
handleAddSpecValue(groupIndex) {
if (this.checkSkuMaxNum()) {
this.MultiSpecModel.handleAddSpecValue(groupIndex)
}
},
// 删除规格值
handleDeleteSpecValue (groupIndex, valueIndex) {
handleDeleteSpecValue(groupIndex, valueIndex) {
const app = this
const modal = this.$confirm({
title: '您确定要删除该规格值吗?',
content: '删除后不可恢复',
onOk () {
onOk() {
// 删除元素
app.MultiSpecModel.handleDeleteSpecValue(groupIndex, valueIndex)
// 关闭对话框
modal.destroy()
}
},
})
},
// 规格组输入框change事件
onChangeSpecGroupIpt () {
onChangeSpecGroupIpt() {
// 更新skuList
this.MultiSpecModel.onUpdate(true)
},
// 规格值输入框change事件
onChangeSpecValueIpt (event, itm) {
onChangeSpecValueIpt(event, itm) {
// 更新skuList
this.MultiSpecModel.onUpdate(true)
},
// 验证最大sku数量
checkSkuMaxNum () {
checkSkuMaxNum() {
const skuList = this.multiSpecData.skuList
if (skuList.length >= 50) {
this.$message.error(`生成的sku列表数量不能大于50个，当前数量：${skuList.length}个`, 2.5)
@ -268,31 +301,31 @@ export default {
},
// 批量设置sku事件
handleSkuBatch () {
handleSkuBatch() {
this.MultiSpecModel.handleSkuBatch()
},
// 验证多规格表单
verifyForm () {
verifyForm() {
if (!this.MultiSpecModel.verifyForm()) {
this.$message.error(this.MultiSpecModel.getError(), 2)
return false
}
return true
},
showModal () {
showModal() {
this.visible = true
},
async handleSelectGoods (goodsId, item) {
async handleSelectGoods(goodsId, item) {
const skuList = this.multiSpecData.skuList
const skuItem = skuList.find(sku => sku.goods_id === goodsId)
const skuItem = skuList.find((sku) => sku.goods_id === goodsId)
if (skuItem) {
this.$message.error('一个商品只能选择一次', 2)
return false
}
this.getGoodsDetail(goodsId).then(res => {
this.getGoodsDetail(goodsId).then((res) => {
const queryGoodsId = this.$route.query.goodsId
if (res.spec_type === 20 && queryGoodsId !== goodsId) {
this.$message.error('您选择的商品是多规格商品', 2)
@ -300,27 +333,30 @@ export default {
}
const sku = res.skuList[0]
console.log(res)
item.goods_price = sku.goods_price
item.cost_price = sku.cost_price
item.stock_num = sku.stock_num
item.goods_weight = sku.goods_weight
item.goods_sku_no = sku.goods_sku_no
// item.goods_name = res.goods_name
item.goods_name = res.goods_name
item.goods_id = res.goods_id
item.goods_image = res.goods_image
item.goods_price_min = res.goods_price_min
})
console.log(item)
},
// 获取商品详情
getGoodsDetail (goodsId = null) {
getGoodsDetail(goodsId = null) {
if (!goodsId) return false
return new Promise((resolve, reject) => {
GoodsApi.detail({ goodsId })
.then(result => {
GoodsApi.detail({ goodsId }).then((result) => {
resolve(result.data.goodsInfo)
})
})
}
}
},
},
}
</script>
<style lang="less" scoped>

Write Preview
Loading…
Cancel
Save