wangmingchuan
/
yanzong_vue_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

细取消选择 去修改

Browse Source
master
fanfan 3 months ago
parent 5bfef7c7a0
commit dfe502966e
3 changed files with 110 additions and 59 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. 18
      src/components/Modal/GoodsModal/GoodsModal.vue
  2. 11
      src/views/dataCenter/goods/Index.vue
  3. 140
      src/views/dataCenter/goods/modules/MultiSpec.vue

18
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: '商品价格',
@ -131,8 +135,8 @@ export default {
searchForm: this.$form.createForm(this),
// 查询参数
queryParam: {},
queryNew:{
is_sale: 0,
queryNew: {
is_sale: 0,
},
// table表头
columns,
@ -140,7 +144,7 @@ export default {
loadData: (param) => {
this.queryParam.channel = this.channel
this.queryNew = this.source == 1 ? this.queryNew : {}
return GoodsApi.list({ ...param, ...this.queryParam,...this.queryNew }).then((response) => {
return GoodsApi.list({ ...param, ...this.queryParam, ...this.queryNew }).then((response) => {
return response.data.list
})
},

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

@ -349,6 +349,11 @@
{{ text == 0 ? '待处理' : text == 1 ? '已入池' : '未入池' }}
</p>
</span>
<span slot="spec_type" slot-scope="text">
<p class="twoline-hide" style="width: 40px">
{{ text == 10 ? '单规格' : '多规格' }}
</p>
</span>
<span slot="cate_status" slot-scope="text">
<p class="twoline-hide" style="width: 40px" :style="{ color: text == 0 ? 'red' : 'green' }">
{{ text == 0 ? '待处理' : '已归类' }}
@ -404,6 +409,12 @@ const columns = [
width: '300px',
scopedSlots: { customRender: 'goods_name' },
},
{
title: '规格类型',
width: '90px',
dataIndex: 'spec_type',
scopedSlots: { customRender: 'spec_type' },
},
{
title: '行情价',
width: '100px',

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

@ -14,12 +14,8 @@
placeholder="请输入规格名称"
@change="onChangeSpecGroupIpt"
/>
<a
v-if="!isSpecLocked"
class="group-item-delete"
href="javascript:;"
@click="handleDeleteSpecGroup(index)"
>删除规格组</a
<a v-if="!isSpecLocked" class="group-item-delete" href="javascript:;" @click="handleDeleteSpecGroup(index)"
>删除规格组</a
>
</div>
<div class="spec-value clearfix">
@ -50,7 +46,7 @@
class="spec-group-add-btn"
icon="plus"
@click="handleAddSpecGroup"
>添加规格组</a-button
>添加规格组</a-button
>
</a-form-item>
<a-form-item v-show="multiSpecData.skuList.length" label="SKU列表" :labelCol="labelCol" :wrapperCol="wrapperCol">
@ -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 => {
resolve(result.data.goodsInfo)
})
GoodsApi.detail({ goodsId }).then((result) => {
resolve(result.data.goodsInfo)
})
})
}
}
},
},
}
</script>
<style lang="less" scoped>

Write Preview
Loading…
Cancel
Save