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" :subTitleColor="true"
/> />
</template> </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"> <span slot="specific_value" slot-scope="text">
<a-tooltip placement="topLeft" :title="text"> {{ text }}</a-tooltip> <a-tooltip placement="topLeft" :title="text"> {{ text }}</a-tooltip>
</span> </span>
@ -82,10 +87,9 @@ const columns = [
scopedSlots: { customRender: 'item' }, scopedSlots: { customRender: 'item' },
}, },
{ {
title: '规格值', title: '规格类型',
dataIndex: 'specific_value', dataIndex: 'spec_type',
width: '100px', scopedSlots: { customRender: 'spec_type' },
scopedSlots: { customRender: 'specific_value' },
}, },
{ {
title: '商品价格', title: '商品价格',
@ -131,8 +135,8 @@ export default {
searchForm: this.$form.createForm(this), searchForm: this.$form.createForm(this),
// 查询参数 // 查询参数
queryParam: {}, queryParam: {},
queryNew:{ queryNew: {
is_sale: 0, is_sale: 0,
}, },
// table表头 // table表头
columns, columns,
@ -140,7 +144,7 @@ export default {
loadData: (param) => { loadData: (param) => {
this.queryParam.channel = this.channel this.queryParam.channel = this.channel
this.queryNew = this.source == 1 ? this.queryNew : {} 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 return response.data.list
}) })
}, },

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

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

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

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

Write Preview
Loading…
Cancel
Save