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

一键获取

Browse Source
master
fanfan 8 months ago
parent 2f271a59f6
commit 9ae97b82a0
4 changed files with 1150 additions and 1363 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. 9
      src/api/goods/index.js
  2. 16
      src/components/SelectImage/SelectImage.vue
  3. 249
      src/views/dataCenter/goods/Create.vue
  4. 293
      src/views/dataCenter/goods/modules/Update.vue

9
src/api/goods/index.js
Unescape View File

@ -16,8 +16,15 @@ const api = {
exportData:'/goods/import',
jingPin:'/goods/jingpin',
batchAddPrice:'/goods/batchAddPrice',
collector:'/goods/collector',
}
export function getCollector (params) {
return axios({
url: api.collector,
method: 'get',
params
})
}
// 列表记录
export function list (params) {
return axios({

16
src/components/SelectImage/SelectImage.vue
Unescape View File

@ -12,7 +12,7 @@
<transition-group class="draggable-item" type="transition" :name="'flip-list'">
<div
v-for="(item, index) in selectedItems"
:key="item.file_id"
:key="item.file_id>0?item.file_id:index"
class="file-item"
:style="{ width: `${width}px`, height: `${width}px` }"
>
@ -77,7 +77,8 @@ export default {
// 默认选中的文件
defaultList: PropTypes.array.def([]),
// 元素的尺寸(宽)
width: PropTypes.integer.def(80)
width: PropTypes.integer.def(80),
source: PropTypes.any.def(0)
},
data () {
return {
@ -94,6 +95,7 @@ export default {
immediate: true,
handler (val) {
const { selectedItems, allowProps } = this
console.log(selectedItems)
if (val.length && !selectedItems.length && allowProps) {
this.selectedItems = cloneDeep(val)
this.onChange()
@ -141,10 +143,18 @@ export default {
return this.$emit('change', multiple ? [] : 0)
}
// 生成fileId
if (this.source == 1) {
let fileId = []
const list = multiple ? selectedItems.map(item => item) : selectedItems[0].file_id
list.forEach(function (item) {
fileId.push({ file_id: item.file_id, preview_url: item.preview_url })
})
return this.$emit('change', fileId, selectedItems)
} else {
const fileId = multiple ? selectedItems.map(item => item.file_id) : selectedItems[0].file_id
// 触发change事件
return this.$emit('change', fileId, selectedItems)
}
}
}
}

249
src/views/dataCenter/goods/Create.vue
Unescape View File

@ -13,49 +13,32 @@
<!-- 基本信息 -->
<div class="tab-pane" v-show="tabKey == 0">
<a-form-item label="商品类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<GoodsType
v-decorator="['goods_type', { initialValue: 10, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
/>
<GoodsType v-decorator="['goods_type', { initialValue: 10, rules: [{ required: true }] }]" @change="onForceUpdate(true)" />
</a-form-item>
<a-form-item label="商品SKU" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div style=" display: flex;align-items: center;width:100%">
<a-input style="width:242px" placeholder="输入商品SKU" v-decorator="['goods_no', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
<div class="action-item" style="margin-left:15px">
<a-button type="primary" @click="handInfo">一键获取</a-button>
</div>
</div>
</a-form-item>
<a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入商品名称"
v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
<a-input placeholder="请输入商品名称" v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
</a-form-item>
<a-form-item label="商品型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入商品型号"
v-decorator="['cmmdty_model', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
<a-input placeholder="请输入商品型号" v-decorator="['cmmdty_model', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
</a-form-item>
<a-form-item label="商品分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-tree-select
placeholder="请选择商品分类"
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
:treeData="formData.categoryList"
treeCheckable
treeCheckStrictly
allowClear
v-decorator="['categorys', { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"
></a-tree-select>
<a-tree-select placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable treeCheckStrictly allowClear
v-decorator="['categorys', { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"></a-tree-select>
<div class="form-item-help">
<router-link target="_blank" :to="{ path: '/goods/category/index' }">去新增</router-link>
<a href="javascript:;" @click="onReloadCategoryList">刷新</a>
</div>
</a-form-item>
<a-form-item
label="商品图片"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图"
>
<SelectImage
multiple
:maxNum="10"
v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]"
/>
<a-form-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图">
<SelectImage ref="childComponent" :source='1' multiple :maxNum="10" v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]" />
</a-form-item>
<!-- <a-form-item label="是否大牌正品" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group
@ -82,11 +65,6 @@
<a-radio :value="1">是</a-radio>
</a-radio-group>
</a-form-item> -->
<a-form-item label="商品编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入商品编码" v-decorator="['goods_no']" />
</a-form-item>
<!-- <a-form-item label="所属分类排行(0表示不参加排行)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="所属分类排行" v-decorator="['paihang']" />
</a-form-item> -->
@ -196,10 +174,7 @@
<!-- 规格/库存 -->
<div class="tab-pane" v-show="tabKey == 1">
<a-form-item label="规格类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group
v-decorator="['spec_type', { initialValue: 10, rules: [{ required: true }] }]"
@change="onForceUpdate()"
>
<a-radio-group v-decorator="['spec_type', { initialValue: 10, rules: [{ required: true }] }]" @change="onForceUpdate()">
<a-radio :value="10">单规格</a-radio>
<!-- <a-radio :value="20" :disabled="true">多规格</a-radio> -->
</a-radio-group>
@ -213,55 +188,29 @@
</div>
<!-- 单规格的表单内容 -->
<div v-show="form.getFieldValue('spec_type') == 10">
<a-form-item
label="商品价格"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际购买金额，最低0.01"
>
<a-input-number
:min="0.01"
:precision="2"
v-decorator="[
<a-form-item label="商品价格" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际购买金额，最低0.01">
<a-input-number :min="0.01" :precision="2" v-decorator="[
'goods_price',
{ initialValue: 1, rules: [{ required: true, message: '请输入商品价格' }] },
]"
/>
]" />
<span class="ml-10">元</span>
</a-form-item>
<a-form-item label="成本价" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="成本价仅用于商品页展示">
<a-input-number :min="0" :precision="2" v-decorator="['cost_price']" />
<span class="ml-10">元</span>
</a-form-item>
<a-form-item
label="当前库存数量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际库存数量，为0时用户无法下单"
>
<a-input-number
:min="0"
:precision="0"
v-decorator="[
<a-form-item label="当前库存数量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际库存数量，为0时用户无法下单">
<a-input-number :min="0" :precision="0" v-decorator="[
'stock_num',
{ initialValue: 100, rules: [{ required: true, message: '请输入库存数量' }] },
]"
/>
]" />
<span class="ml-10">件</span>
</a-form-item>
<a-form-item
label="商品重量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际重量，用于计算运费"
>
<a-input-number
:min="0"
v-decorator="[
<a-form-item label="商品重量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际重量，用于计算运费">
<a-input-number :min="0" v-decorator="[
'goods_weight',
{ initialValue: 0, rules: [{ required: true, message: '请输入库存数量' }] },
]"
/>
]" />
<span class="ml-10">千克 (Kg)</span>
</a-form-item>
</div>
@ -318,37 +267,17 @@
<!-- 更多设置 -->
<div class="tab-pane" v-show="tabKey == 3">
<a-form-item
label="主图视频"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议视频宽高比19:9，建议时长8-45秒"
>
<a-form-item label="主图视频" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议视频宽高比19:9，建议时长8-45秒">
<SelectVideo :multiple="false" v-decorator="['video_id']" />
</a-form-item>
<a-form-item
label="视频封面"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸：750像素*750像素"
>
<a-form-item label="视频封面" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750像素*750像素">
<SelectImage :multiple="false" v-decorator="['video_cover_id']" />
</a-form-item>
<a-form-item
label="商品卖点"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="一句话简述，例如：此款商品美观大方 性价比较高 不容错过"
>
<a-form-item label="商品卖点" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="一句话简述，例如：此款商品美观大方 性价比较高 不容错过">
<a-input placeholder="请输入商品卖点" v-decorator="['selling_point']" />
</a-form-item>
<a-form-item label="服务与承诺" :labelCol="labelCol" :wrapperCol="wrapperCol" style="display: none">
<a-select
v-if="formData.serviceList"
mode="multiple"
v-decorator="['serviceIds', { initialValue: formData.defaultServiceIds }]"
placeholder="请选择服务与承诺"
>
<a-select v-if="formData.serviceList" mode="multiple" v-decorator="['serviceIds', { initialValue: formData.defaultServiceIds }]" placeholder="请选择服务与承诺">
<a-select-option v-for="(item, index) in formData.serviceList" :key="index" :value="item.service_id">{{
item.name
}}</a-select-option>
@ -358,26 +287,14 @@
<a href="javascript:;" @click="onReloadServiceList">刷新</a>
</div>
</a-form-item>
<a-form-item
label="初始销量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="用户端展示的销量 = 初始销量 + 实际销量"
>
<a-form-item label="初始销量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端展示的销量 = 初始销量 + 实际销量">
<a-input-number v-decorator="['sales_initial', { initialValue: 0 }]" />
</a-form-item>
<div>
<a-divider orientation="left">销售区域</a-divider>
<a-form-item label="销售区域" :labelCol="labelCol" :wrapperCol="{ span: 15 }">
<a-table
v-show="ruleList.length"
class="table-rules"
:columns="columns"
:dataSource="ruleList"
:pagination="false"
bordered
>
<a-table v-show="ruleList.length" class="table-rules" :columns="columns" :dataSource="ruleList" :pagination="false" bordered>
<!-- 销售区域 -->
<template slot="region_text" slot-scope="text, item, index">
<p class="content">
@ -385,9 +302,7 @@
<span>{{ province.name }}</span>
<template v-if="province.citys.length">
<span>(</span>
<span class="city-name" v-for="(city, cidx) in province.citys" :key="cidx"
>{{ city.name }}{{ province.citys.length > cidx + 1 ? '、' : '' }}</span
>
<span class="city-name" v-for="(city, cidx) in province.citys" :key="cidx">{{ city.name }}{{ province.citys.length > cidx + 1 ? '、' : '' }}</span>
<span>)</span>
</template>
<span>{{ ' ' }}</span>
@ -405,23 +320,13 @@
<div style="display: none">
<a-divider orientation="left">积分设置</a-divider>
<a-form-item
label="积分赠送"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品将获得积分"
>
<a-form-item label="积分赠送" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后用户购买此商品将获得积分">
<a-radio-group v-decorator="['is_points_gift', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="积分抵扣"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品可以使用积分进行抵扣"
>
<a-form-item label="积分抵扣" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后用户购买此商品可以使用积分进行抵扣">
<a-radio-group v-decorator="['is_points_discount', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
@ -431,48 +336,27 @@
<div style="display: none">
<a-divider orientation="left">会员折扣设置</a-divider>
<a-form-item
label="会员折扣"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后会员折扣，会员购买此商品可以享受会员等级折扣价"
>
<a-radio-group
v-decorator="['is_enable_grade', { initialValue: 1, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后会员折扣，会员购买此商品可以享受会员等级折扣价">
<a-radio-group v-decorator="['is_enable_grade', { initialValue: 1, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-if="form.getFieldValue('is_enable_grade')"
label="会员折扣设置"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-radio-group
v-decorator="['is_alone_grade', { initialValue: 0, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item v-if="form.getFieldValue('is_enable_grade')" label="会员折扣设置" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['is_alone_grade', { initialValue: 0, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="0">默认等级折扣</a-radio>
<a-radio :value="1">单独设置折扣</a-radio>
</a-radio-group>
<!-- 会员等级列表 -->
<div v-if="form.getFieldValue('is_alone_grade')">
<a-form-item v-for="item in formData.userGradeList" :key="item.grade_id">
<InputNumberGroup
:addonBefore="item.name"
addonAfter="折"
:inputProps="{ min: 0, max: 9.9 }"
v-decorator="[
<InputNumberGroup :addonBefore="item.name" addonAfter="折" :inputProps="{ min: 0, max: 9.9 }" v-decorator="[
`alone_grade_equity[grade_id:${item.grade_id}]`,
{
initialValue: formData.defaultUserGradeValue[item.grade_id],
rules: [{ required: true, message: '折扣率不能为空' }],
},
]"
/>
]" />
</a-form-item>
</div>
<div class="form-item-help">
@ -487,10 +371,7 @@
<div style="display: none">
<a-divider orientation="left">分销设置</a-divider>
<a-form-item label="分销佣金" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group
v-decorator="['is_ind_dealer', { initialValue: 0, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-radio-group v-decorator="['is_ind_dealer', { initialValue: 0, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="0">系统默认</a-radio>
<a-radio :value="1">单独设置</a-radio>
</a-radio-group>
@ -498,27 +379,15 @@
<p class="extra">若使用分销功能必须在 [分销中心 - 分销设置] 中开启</p>
</div>
</a-form-item>
<a-form-item
v-if="form.getFieldValue('is_ind_dealer')"
label="分销佣金类型"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-radio-group
v-decorator="['dealer_money_type', { initialValue: 10, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item v-if="form.getFieldValue('is_ind_dealer')" label="分销佣金类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['dealer_money_type', { initialValue: 10, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="10">百分比</a-radio>
<a-radio :value="20">固定金额</a-radio>
</a-radio-group>
<!-- 分销等级列表 -->
<a-form-item v-for="(item, index) in formData.dealer.levelList" :key="index">
<InputNumberGroup
:addonBefore="item.name"
:addonAfter="form.getFieldValue('dealer_money_type') == 10 ? '%' : '元'"
:inputProps="{ min: 0, precision: 2 }"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空' }] }]"
/>
<InputNumberGroup :addonBefore="item.name" :addonAfter="form.getFieldValue('dealer_money_type') == 10 ? '%' : '元'" :inputProps="{ min: 0, precision: 2 }"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空' }] }]" />
</a-form-item>
</a-form-item>
</div>
@ -628,6 +497,34 @@ export default {
})
},
methods: {
handInfo() {
const { form } = this
const goods_no = form.getFieldValue('goods_no')
if (goods_no) {
let param = {
sku: goods_no
}
this.isLoading = true
GoodsApi.getCollector(param).then((result) => {
this.$refs.childComponent.selectedItems = result.data.goods_images
let obj = {
goods_name: result.data.name,
content: result.data.content,
goods_price: result.data.proxyPrice,
imagesIds:result.data.goods_images,
goods_images:result.data.goods_images,
}
this.form.setFieldsValue(obj)
this.isLoading = false
})
.catch(() => {
this.isLoading = false
})
.finally(() => (this.isLoading = false))
} else {
this.$message.warning('请输入商品SKU', 1.5)
}
},
// 手动强制更新页面
onForceUpdate(bool = false) {
this.$forceUpdate()

293
src/views/dataCenter/goods/modules/Update.vue
Unescape View File

@ -1,14 +1,5 @@
<template>
<a-modal
title="编辑商品"
width="90%"
:visible="visible"
:confirmLoading="confirmLoading"
:maskClosable="false"
:destroyOnClose="true"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-modal title="编辑商品" width="90%" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false" :destroyOnClose="true" @ok="handleSubmit" @cancel="handleCancel">
<a-card :bordered="false">
<div class="card-title">商品编辑</div>
<a-spin :spinning="isLoading">
@ -23,56 +14,34 @@
<!-- 基本信息 -->
<div class="tab-pane" v-show="tabKey == 0">
<a-form-item label="商品类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<GoodsType
:onlyShowChecked="true"
v-decorator="['goods_type', { rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
/>
<GoodsType :onlyShowChecked="true" v-decorator="['goods_type', { rules: [{ required: true }] }]" @change="onForceUpdate(true)" />
</a-form-item>
<a-form-item label="商品SKU" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div style=" display: flex;align-items: center;width:100%">
<a-input style="width:242px" placeholder="输入商品SKU" v-decorator="['goods_no', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
<div class="action-item" style="margin-left:15px">
<a-button type="primary" @click="handInfo">一键获取</a-button>
</div>
</div>
</a-form-item>
<a-form-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入商品名称"
v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
<a-input placeholder="请输入商品名称" v-decorator="['goods_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
</a-form-item>
<a-form-item label="商品型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入商品型号"
v-decorator="['cmmdty_model', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
<a-input placeholder="请输入商品型号" v-decorator="['cmmdty_model', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
</a-form-item>
<a-form-item label="商品分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-tree-select
placeholder="请选择商品分类"
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
:treeData="formData.categoryList"
treeCheckable
treeCheckStrictly
allowClear
v-decorator="['categorys', { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"
></a-tree-select>
<a-tree-select placeholder="请选择商品分类" :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" :treeData="formData.categoryList" treeCheckable treeCheckStrictly allowClear
v-decorator="['categorys', { rules: [{ required: true, message: '请至少选择1个商品分类' }] }]"></a-tree-select>
<div class="form-item-help">
<router-link target="_blank" :to="{ path: '/goods/category/index' }">去新增</router-link>
<a href="javascript:;" @click="onReloadCategoryList">刷新</a>
</div>
</a-form-item>
<a-form-item
label="商品图片"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图"
>
<SelectImage
multiple
:maxNum="10"
:defaultList="formData.goods.goods_images"
v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]"
/>
</a-form-item>
<a-form-item label="商品编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入商品编码" v-decorator="['goods_no']" />
</a-form-item>
<a-form-item label="商品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750*750像素, 最多上传10张, 可拖拽图片调整顺序, 第1张将作为商品首图">
<SelectImage ref="childComponent" :source='1' multiple :maxNum="10" :defaultList="formData.goods.goods_images" v-decorator="['imagesIds', { rules: [{ required: true, message: '请至少上传1张商品图片' }] }]" />
</a-form-item>
<a-form-item label="热卖指数" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="热卖指数" v-decorator="['remaizhishu']" />
</a-form-item>
@ -131,10 +100,7 @@
<!-- 规格/库存 -->
<div class="tab-pane" v-show="tabKey == 1">
<a-form-item label="规格类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group
v-decorator="['spec_type', { initialValue: 10, rules: [{ required: true }] }]"
@change="onForceUpdate()"
>
<a-radio-group v-decorator="['spec_type', { initialValue: 10, rules: [{ required: true }] }]" @change="onForceUpdate()">
<a-radio :value="10" :disabled="formData.goods.isSpecLocked">单规格</a-radio>
<a-radio :value="20" :disabled="formData.goods.isSpecLocked">多规格</a-radio>
</a-radio-group>
@ -147,69 +113,31 @@
</a-form-item>
<!-- 多规格的表单内容 -->
<div v-if="form.getFieldValue('spec_type') == 20">
<MultiSpec
ref="MultiSpec"
:isSpecLocked="formData.goods.isSpecLocked"
:defaultSpecList="formData.goods.specList"
:defaultSkuList="formData.goods.skuList"
:channel="formData.goods.channel"
:checkList="checkList"
:source="1"
/>
<MultiSpec ref="MultiSpec" :isSpecLocked="formData.goods.isSpecLocked" :defaultSpecList="formData.goods.specList" :defaultSkuList="formData.goods.skuList" :channel="formData.goods.channel" :checkList="checkList"
:source="1" />
</div>
<!-- 单规格的表单内容 -->
<div v-if="form.getFieldValue('spec_type') == 10">
<a-form-item
label="商品价格"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际购买金额，最低0.01"
>
<a-input-number
:min="0.01"
:precision="2"
v-decorator="['goods_price', { rules: [{ required: true, message: '请输入商品价格' }] }]"
/>
<a-form-item label="商品价格" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际购买金额，最低0.01">
<a-input-number :min="0.01" :precision="2" v-decorator="['goods_price', { rules: [{ required: true, message: '请输入商品价格' }] }]" />
<span class="ml-10">元</span>
</a-form-item>
<a-form-item
label="成本价"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="成本价仅用于商品页展示"
>
<a-form-item label="成本价" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="成本价仅用于商品页展示">
<a-input-number :min="0" :precision="2" v-decorator="['cost_price']" />
<span class="ml-10">元</span>
</a-form-item>
<a-form-item
label="当前库存数量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际库存数量，为0时用户无法下单"
>
<a-input-number
:min="0"
:precision="0"
v-decorator="[
<a-form-item label="当前库存数量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际库存数量，为0时用户无法下单">
<a-input-number :min="0" :precision="0" v-decorator="[
'stock_num',
{ initialValue: 100, rules: [{ required: true, message: '请输入库存数量' }] },
]"
/>
]" />
<span class="ml-10">件</span>
</a-form-item>
<a-form-item
label="商品重量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="商品的实际重量，用于计算运费"
>
<a-input-number
:min="0"
v-decorator="[
<a-form-item label="商品重量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商品的实际重量，用于计算运费">
<a-input-number :min="0" v-decorator="[
'goods_weight',
{ initialValue: 0, rules: [{ required: true, message: '请输入库存数量' }] },
]"
/>
]" />
<span class="ml-10">千克 (Kg)</span>
</a-form-item>
</div>
@ -223,58 +151,23 @@
<!-- 更多设置 -->
<div class="tab-pane" v-show="tabKey == 3">
<a-form-item
label="主图视频"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议视频宽高比19:9，建议时长8-45秒"
>
<SelectVideo
:multiple="false"
:defaultList="formData.goods.video ? [formData.goods.video] : []"
v-decorator="['video_id']"
/>
</a-form-item>
<a-form-item
label="视频封面"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸：750像素*750像素"
>
<SelectImage
:multiple="false"
:defaultList="formData.goods.videoCover ? [formData.goods.videoCover] : []"
v-decorator="['video_cover_id']"
/>
</a-form-item>
<a-form-item
label="商品卖点"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="一句话简述，例如：此款商品美观大方 性价比较高 不容错过"
>
<a-form-item label="主图视频" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议视频宽高比19:9，建议时长8-45秒">
<SelectVideo :multiple="false" :defaultList="formData.goods.video ? [formData.goods.video] : []" v-decorator="['video_id']" />
</a-form-item>
<a-form-item label="视频封面" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="建议尺寸：750像素*750像素">
<SelectImage :multiple="false" :defaultList="formData.goods.videoCover ? [formData.goods.videoCover] : []" v-decorator="['video_cover_id']" />
</a-form-item>
<a-form-item label="商品卖点" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="一句话简述，例如：此款商品美观大方 性价比较高 不容错过">
<a-input placeholder="请输入商品卖点" v-decorator="['selling_point']" />
</a-form-item>
<a-form-item
label="初始销量"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="用户端展示的销量 = 初始销量 + 实际销量"
>
<a-form-item label="初始销量" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端展示的销量 = 初始销量 + 实际销量">
<a-input-number v-decorator="['sales_initial', { initialValue: 0 }]" />
</a-form-item>
<div>
<a-divider orientation="left">销售区域</a-divider>
<a-form-item label="销售区域" :labelCol="labelCol" :wrapperCol="{ span: 15 }">
<a-table
v-show="ruleList.length"
class="table-rules"
:columns="columns"
:dataSource="ruleList"
:pagination="false"
bordered
>
<a-table v-show="ruleList.length" class="table-rules" :columns="columns" :dataSource="ruleList" :pagination="false" bordered>
<!-- 销售区域 -->
<template slot="region_text" slot-scope="text, item, index">
<p class="content">
@ -282,9 +175,7 @@
<span>{{ province.name }}</span>
<template v-if="province.citys.length">
<span>(</span>
<span class="city-name" v-for="(city, cidx) in province.citys" :key="cidx"
>{{ city.name }}{{ province.citys.length > cidx + 1 ? '、' : '' }}</span
>
<span class="city-name" v-for="(city, cidx) in province.citys" :key="cidx">{{ city.name }}{{ province.citys.length > cidx + 1 ? '、' : '' }}</span>
<span>)</span>
</template>
<span>{{ ' ' }}</span>
@ -296,31 +187,19 @@
</p>
</template>
</a-table>
<a-button icon="environment" v-if="ruleList.length == 0" @click="handleAdd"
>点击添加销售区域</a-button
>
<a-button icon="environment" v-if="ruleList.length == 0" @click="handleAdd">点击添加销售区域</a-button>
</a-form-item>
</div>
<div style="display: none">
<a-divider orientation="left">积分设置</a-divider>
<a-form-item
label="积分赠送"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品将获得积分"
>
<a-form-item label="积分赠送" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后用户购买此商品将获得积分">
<a-radio-group v-decorator="['is_points_gift', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
label="积分抵扣"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品可以使用积分进行抵扣"
>
<a-form-item label="积分抵扣" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后用户购买此商品可以使用积分进行抵扣">
<a-radio-group v-decorator="['is_points_discount', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
@ -330,48 +209,27 @@
<div style="display: none">
<a-divider orientation="left">会员折扣设置</a-divider>
<a-form-item
label="会员折扣"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="开启后会员折扣，会员购买此商品可以享受会员等级折扣价"
>
<a-radio-group
v-decorator="['is_enable_grade', { initialValue: 1, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="开启后会员折扣，会员购买此商品可以享受会员等级折扣价">
<a-radio-group v-decorator="['is_enable_grade', { initialValue: 1, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="1">开启</a-radio>
<a-radio :value="0">关闭</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-show="form.getFieldValue('is_enable_grade')"
label="会员折扣设置"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-radio-group
v-decorator="['is_alone_grade', { initialValue: 0, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item v-show="form.getFieldValue('is_enable_grade')" label="会员折扣设置" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['is_alone_grade', { initialValue: 0, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="0">默认等级折扣</a-radio>
<a-radio :value="1">单独设置折扣</a-radio>
</a-radio-group>
<!-- 会员等级列表 -->
<div v-show="form.getFieldValue('is_alone_grade')">
<a-form-item v-for="item in formData.userGradeList" :key="item.grade_id">
<InputNumberGroup
:addonBefore="item.name"
addonAfter="折"
:inputProps="{ min: 0, max: 9.9 }"
v-decorator="[
<InputNumberGroup :addonBefore="item.name" addonAfter="折" :inputProps="{ min: 0, max: 9.9 }" v-decorator="[
`alone_grade_equity[grade_id:${item.grade_id}]`,
{
initialValue: formData.defaultUserGradeValue[item.grade_id],
rules: [{ required: true, message: '折扣率不能为空' }],
},
]"
/>
]" />
</a-form-item>
</div>
<div class="form-item-help">
@ -386,10 +244,7 @@
<div style="display: none">
<a-divider orientation="left">分销设置</a-divider>
<a-form-item label="分销佣金" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group
v-decorator="['is_ind_dealer', { initialValue: 0, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-radio-group v-decorator="['is_ind_dealer', { initialValue: 0, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="0">系统默认</a-radio>
<a-radio :value="1">单独设置</a-radio>
</a-radio-group>
@ -397,27 +252,15 @@
<p class="extra">若使用分销功能必须在 [分销中心 - 分销设置] 中开启</p>
</div>
</a-form-item>
<a-form-item
v-show="form.getFieldValue('is_ind_dealer')"
label="分销佣金类型"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-radio-group
v-decorator="['dealer_money_type', { initialValue: 10, rules: [{ required: true }] }]"
@change="onForceUpdate(true)"
>
<a-form-item v-show="form.getFieldValue('is_ind_dealer')" label="分销佣金类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['dealer_money_type', { initialValue: 10, rules: [{ required: true }] }]" @change="onForceUpdate(true)">
<a-radio :value="10">百分比</a-radio>
<a-radio :value="20">固定金额</a-radio>
</a-radio-group>
<!-- 分销等级列表 -->
<a-form-item v-for="(item, index) in formData.dealer.levelList" :key="index">
<InputNumberGroup
:addonBefore="item.name"
:addonAfter="form.getFieldValue('dealer_money_type') == 10 ? '%' : '元'"
:inputProps="{ min: 0, precision: 2 }"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空' }] }]"
/>
<InputNumberGroup :addonBefore="item.name" :addonAfter="form.getFieldValue('dealer_money_type') == 10 ? '%' : '元'" :inputProps="{ min: 0, precision: 2 }"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空' }] }]" />
</a-form-item>
</a-form-item>
</div>
@ -502,6 +345,35 @@ export default {
GoodsModel.formData.goods = {}
},
methods: {
handInfo() {
const { form } = this
const goods_no = form.getFieldValue('goods_no')
this.formData.goods.goods_no = goods_no
if (goods_no) {
let param = {
sku: goods_no
}
this.isLoading = true
GoodsApi.getCollector(param).then((result) => {
this.formData.goods.imagesIds=result.data.goods_images
this.formData.goods.goods_images = result.data.goods_images
this.$refs.childComponent.selectedItems = result.data.goods_images
this.formData.goods.goods_name = result.data.name
this.formData.goods.content = result.data.content
this.formData.goods.goods_price = result.data.proxyPrice
this.form.setFieldsValue(this.formData.goods)
this.onForceUpdate()
this.$forceUpdate()
this.isLoading = false
})
.catch(() => {
this.isLoading = false
})
.finally(() => (this.isLoading = false))
} else {
this.$message.warning('请输入商品SKU', 1.5)
}
},
showEdit(goodsId) {
// 记录商品ID
this.visible = true
@ -653,6 +525,7 @@ export default {
// 提交到后端api
onFormSubmit(values) {
console.log(values)
this.isLoading = true
this.isBtnLoading = true
GoodsApi.edit({ goodsId: this.goodsId, form: values })

Write Preview
Loading…
Cancel
Save