wangdong
9 months ago
commit
719d1e7ad0
@ -0,0 +1,828 @@ |
||||
<template> |
||||
<a-modal |
||||
title="编辑商品" |
||||
width="90%" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-card :bordered="false"> |
||||
<a-spin :spinning="isLoading"> |
||||
<a-form :form="form" @submit="handleSubmit" :selfUpdate="true"> |
||||
<a-tabs :activeKey="tabKey" :tabBarStyle="{ marginBottom: '30px' }" @change="handleTabs"> |
||||
<a-tab-pane :key="0" tab="基本信息"></a-tab-pane> |
||||
<a-tab-pane :key="1" tab="规格/库存"></a-tab-pane> |
||||
<a-tab-pane :key="2" tab="商品详情"></a-tab-pane> |
||||
<a-tab-pane :key="3" tab="更多设置"></a-tab-pane> |
||||
</a-tabs> |
||||
<div class="tabs-content"> |
||||
<!-- 基本信息 --> |
||||
<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)" |
||||
/> |
||||
</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-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-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> |
||||
<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-radio-group v-decorator="['goods_source', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio value="JD">京东</a-radio> |
||||
<a-radio value="SN">苏宁</a-radio> |
||||
<a-radio value="GC">工厂</a-radio> |
||||
<a-radio value="CC">仓储</a-radio> |
||||
<a-radio value="ZC">自采</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="发货时效" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['delivery_time', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio :value="0">24小时</a-radio> |
||||
<a-radio :value="1">48小时</a-radio> |
||||
<a-radio :value="2">72小时</a-radio> |
||||
<a-radio :value="3">7天内</a-radio> |
||||
<a-radio :value="4">15天内</a-radio> |
||||
<a-radio :value="5">30天内</a-radio> |
||||
<a-radio :value="6">45天内</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="是否大牌正品" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['is_brand', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio :value="0">否</a-radio> |
||||
<a-radio :value="1">是</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
|
||||
<a-form-item label="是否新品首发" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['is_new', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio :value="0">否</a-radio> |
||||
<a-radio :value="1">是</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="是否审单" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['is_check', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio :value="0">否</a-radio> |
||||
<a-radio :value="1">是</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="是否店内" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['is_in_store', { initialValue: 0, rules: [{ required: true }] }]"> |
||||
<a-radio :value="0">否</a-radio> |
||||
<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> |
||||
|
||||
<a-form-item label="热卖指数" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-input placeholder="热卖指数" v-decorator="['remaizhishu']" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item |
||||
v-if="form.getFieldValue('goods_type') == 10" |
||||
label="配送方式" |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
> |
||||
<a-radio-group |
||||
v-decorator="['is_ind_delivery_type', { initialValue: 0, rules: [{ required: true }] }]" |
||||
@change="onForceUpdate()" |
||||
> |
||||
<a-radio :value="0">系统默认</a-radio> |
||||
<a-radio :value="1">单独配置</a-radio> |
||||
</a-radio-group> |
||||
<div v-show="form.getFieldValue('is_ind_delivery_type')"> |
||||
<a-form-item extra="需在 [设置 - 配送方式] 中，开启支持的配送方式才可生效"> |
||||
<a-checkbox-group |
||||
:options="[ |
||||
{ label: '快递配送', value: 10 }, |
||||
{ label: '上门自提', value: 20 }, |
||||
]" |
||||
v-decorator="[ |
||||
'delivery_type', |
||||
{ initialValue: [10, 20], rules: [{ required: true, message: '配送方式至少选择一个' }] }, |
||||
]" |
||||
/> |
||||
</a-form-item> |
||||
</div> |
||||
</a-form-item> |
||||
<a-form-item |
||||
v-if="form.getFieldValue('goods_type') == 10" |
||||
label="运费模板" |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
> |
||||
<a-select |
||||
style="width: 300px" |
||||
v-decorator="['delivery_id', { rules: [{ required: true, message: '请选择运费模板' }] }]" |
||||
placeholder="请选择运费模板" |
||||
> |
||||
<a-select-option |
||||
v-for="(item, index) in formData.deliveryList" |
||||
:key="index" |
||||
:value="item.delivery_id" |
||||
>{{ item.name }}</a-select-option |
||||
> |
||||
</a-select> |
||||
<div class="form-item-help"> |
||||
<router-link target="_blank" :to="{ path: '/setting/delivery/template/create' }">新增模板</router-link> |
||||
<a href="javascript:;" @click="onReloadDeliveryList">刷新</a> |
||||
</div> |
||||
</a-form-item> |
||||
<a-form-item label="商品状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['status', { initialValue: 10, rules: [{ required: true }] }]"> |
||||
<a-radio :value="10">上架</a-radio> |
||||
<a-radio :value="20">下架</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item label="商品排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前"> |
||||
<a-input-number :min="0" v-decorator="['sort', { initialValue: 100, rules: [{ required: true }] }]" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
||||
<a-button type="primary" @click="handleTabs(1)" style="margin-left: 20px">下一步</a-button> |
||||
</a-form-item> |
||||
</div> |
||||
|
||||
<!-- 规格/库存 --> |
||||
<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 :value="10" :disabled="formData.goods.isSpecLocked">单规格</a-radio> |
||||
<a-radio :value="20" :disabled="formData.goods.isSpecLocked">多规格</a-radio> |
||||
</a-radio-group> |
||||
<p v-if="formData.goods.isSpecLocked" class="form-item-help"> |
||||
<small class="c-red">注：该商品当前正在参与其他活动，商品规格不允许更改</small> |
||||
</p> |
||||
</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" |
||||
/> |
||||
</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: '请输入商品价格' }] }]" |
||||
/> |
||||
<span class="ml-10">元</span> |
||||
</a-form-item> |
||||
<a-form-item label="成本价" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="成本价仅用于商品页展示"> |
||||
<a-input-number :min="0.01" :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="[ |
||||
'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="[ |
||||
'goods_weight', |
||||
{ initialValue: 0, rules: [{ required: true, message: '请输入库存数量' }] }, |
||||
]" |
||||
/> |
||||
<span class="ml-10">千克 (Kg)</span> |
||||
</a-form-item> |
||||
</div> |
||||
<a-form-item label="库存计算方式" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['deduct_stock_type', { initialValue: 10, rules: [{ required: true }] }]"> |
||||
<a-radio :value="10">下单减库存</a-radio> |
||||
<a-radio :value="20">付款减库存</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item |
||||
label="商品限购" |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
extra="用于限制每人购买该商品的数量" |
||||
> |
||||
<a-radio-group |
||||
v-decorator="['is_restrict', { initialValue: 0, rules: [{ required: true }] }]" |
||||
@change="onForceUpdate()" |
||||
> |
||||
<a-radio :value="0">关闭</a-radio> |
||||
<a-radio :value="1">开启</a-radio> |
||||
</a-radio-group> |
||||
<div class="mt-10" v-if="form.getFieldValue('is_restrict')"> |
||||
<a-form-item> |
||||
<span class="mr-10">总限购</span> |
||||
<a-input-number |
||||
:min="1" |
||||
:precision="0" |
||||
v-decorator="['restrict_total', { rules: [{ required: true, message: '请输入总限购数量' }] }]" |
||||
/> |
||||
<span class="ml-10">件/人</span> |
||||
</a-form-item> |
||||
<a-form-item> |
||||
<span class="mr-10">每单限购</span> |
||||
<a-input-number |
||||
:min="1" |
||||
:precision="0" |
||||
v-decorator="['restrict_single', { rules: [{ required: true, message: '请输入每单限购数量' }] }]" |
||||
/> |
||||
<span class="ml-10">件/人</span> |
||||
</a-form-item> |
||||
</div> |
||||
</a-form-item> |
||||
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
||||
<a-button type="primary" @click="handleTabs(0)" style="margin-left: 20px">上一步</a-button> |
||||
<a-button type="primary" @click="handleTabs(2)" style="margin-left: 20px">下一步</a-button> |
||||
</a-form-item> |
||||
</div> |
||||
<!-- 商品详情 --> |
||||
<div class="tab-pane" v-show="tabKey == 2"> |
||||
<a-form-item label="商品详情" :labelCol="labelCol" :wrapperCol="{ span: 16 }"> |
||||
<Ueditor v-decorator="['content', { rules: [{ required: true, message: '商品详情不能为空' }] }]" /> |
||||
</a-form-item> |
||||
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
||||
<a-button type="primary" @click="handleTabs(1)" style="margin-left: 20px">上一步</a-button> |
||||
<a-button type="primary" @click="handleTabs(3)" style="margin-left: 20px">下一步</a-button> |
||||
</a-form-item> |
||||
</div> |
||||
|
||||
<!-- 更多设置 --> |
||||
<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-input placeholder="请输入商品卖点" v-decorator="['selling_point']" /> |
||||
</a-form-item> |
||||
<a-form-item label="服务与承诺" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-if="formData.serviceList" |
||||
mode="multiple" |
||||
v-decorator="['serviceIds']" |
||||
placeholder="请选择服务与承诺" |
||||
> |
||||
<a-select-option v-for="(item, index) in formData.serviceList" :key="index" :value="item.service_id">{{ |
||||
item.name |
||||
}}</a-select-option> |
||||
</a-select> |
||||
<div class="form-item-help"> |
||||
<router-link target="_blank" :to="{ path: '/goods/service/index' }">去新增</router-link> |
||||
<a href="javascript:;" @click="onReloadServiceList">刷新</a> |
||||
</div> |
||||
</a-form-item> |
||||
<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 |
||||
> |
||||
<!-- 销售区域 --> |
||||
<template slot="region_text" slot-scope="text, item, index"> |
||||
<p class="content"> |
||||
<span v-for="(province, pidx) in text" :key="pidx"> |
||||
<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>)</span> |
||||
</template> |
||||
<span>{{ ' ' }}</span> |
||||
</span> |
||||
</p> |
||||
<p class="operation"> |
||||
<a href="javascript:void(0);" class="edit" @click="handleEdit(index, item)">编辑</a> |
||||
<a href="javascript:void(0);" class="delete" @click="handleDelete(index)">删除</a> |
||||
</p> |
||||
</template> |
||||
</a-table> |
||||
<a-button icon="environment" v-if="ruleList.length == 0" @click="handleAdd">点击添加销售区域</a-button> |
||||
</a-form-item> |
||||
</div> |
||||
<div v-show="$module('market-points')"> |
||||
<a-divider orientation="left">积分设置</a-divider> |
||||
<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-radio-group v-decorator="['is_points_discount', { initialValue: 1, rules: [{ required: true }] }]"> |
||||
<a-radio :value="1">开启</a-radio> |
||||
<a-radio :value="0">关闭</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
</div> |
||||
|
||||
<div v-show="$module('user-grade')"> |
||||
<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-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-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="[ |
||||
`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"> |
||||
<p class="extra" v-if="form.getFieldValue('is_alone_grade')"> |
||||
单独折扣：折扣率范围0.0-9.9，例如: 9.8代表98折，0代表不折扣 |
||||
</p> |
||||
<p class="extra" v-else>默认折扣：默认为用户所属会员等级的折扣率</p> |
||||
</div> |
||||
</a-form-item> |
||||
</div> |
||||
|
||||
<div v-show="$module('apps-dealer')"> |
||||
<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 :value="0">系统默认</a-radio> |
||||
<a-radio :value="1">单独设置</a-radio> |
||||
</a-radio-group> |
||||
<div class="form-item-help"> |
||||
<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-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: '佣金不能为空' }] }]" |
||||
/> |
||||
</a-form-item> |
||||
</a-form-item> |
||||
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
||||
<a-button type="primary" @click="handleTabs(2)" style="margin-left: 20px">上一步</a-button> |
||||
</a-form-item> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-form> |
||||
<AreasModal ref="AreasModal" @handleSubmit="handleAreaSubmit" :loading="isBtnLoading"/> |
||||
</a-spin> |
||||
</a-card> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as GoodsApi from '@/api/goods' |
||||
import { SelectImage, SelectVideo, Ueditor, InputNumberGroup } from '@/components' |
||||
import GoodsModel from '@/common/model/goods/Index' |
||||
import GoodsType from './GoodsType' |
||||
import MultiSpec from './MultiSpec' |
||||
import { isEmptyObject } from '@/utils/util' |
||||
import { AreasModal } from '@/components/Modal' |
||||
const defaultItem = { |
||||
key: 0, |
||||
region: [], |
||||
region_text: [] |
||||
} |
||||
export default { |
||||
components: { |
||||
GoodsType, |
||||
SelectImage, |
||||
SelectVideo, |
||||
Ueditor, |
||||
InputNumberGroup, |
||||
MultiSpec, |
||||
AreasModal |
||||
}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data () { |
||||
return { |
||||
categoryList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 默认的标签索引 |
||||
tabKey: 0, |
||||
// 标签布局属性 |
||||
labelCol: { span: 3 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 10 }, |
||||
// loading状态 |
||||
isLoading: false, |
||||
isBtnLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 商品ID |
||||
goodsId: null, |
||||
// 表单数据 |
||||
formData: GoodsModel.formData, |
||||
checkList: [], |
||||
// 销售区域 |
||||
ruleList: [], |
||||
// 销售区域表头 |
||||
columns: [ |
||||
{ |
||||
title: '销售区域', |
||||
dataIndex: 'region_text', |
||||
width: '400px', |
||||
scopedSlots: { customRender: 'region_text' } |
||||
} |
||||
], |
||||
// 城市总数 |
||||
citysCount: null |
||||
} |
||||
}, |
||||
methods: { |
||||
initData (goodsId) { |
||||
this.visible = true |
||||
// 记录商品ID |
||||
this.goodsId = goodsId |
||||
// 获取form所需的数据 |
||||
this.isLoading = true |
||||
GoodsModel.getFromData(this.goodsId).then(() => { |
||||
// 商品表单数据 |
||||
if (!isEmptyObject(this.form.getFieldsValue())) { |
||||
// 第一次赋值 |
||||
this.form.setFieldsValue(GoodsModel.getFieldsValue()) |
||||
// 第二次赋值 (适用于动态渲染的form-item) |
||||
this.$nextTick(() => { |
||||
this.form.setFieldsValue(GoodsModel.getFieldsValue2()) |
||||
this.onForceUpdate() |
||||
// console.log(this.formData.formData.goods.skuList) |
||||
}) |
||||
} |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
|
||||
// 手动强制更新页面 |
||||
onForceUpdate (bool = false) { |
||||
this.$forceUpdate() |
||||
// bool为true时再执行一次 $forceUpdate, 特殊情况下需执行两次，原因如下： |
||||
// 第一次执行 $forceUpdate时, 新元素绑定v-decorator无法获取到form.getFieldValue |
||||
bool && |
||||
setTimeout(() => { |
||||
this.$forceUpdate() |
||||
}, 10) |
||||
}, |
||||
|
||||
// 切换tab选项卡 |
||||
handleTabs (key) { |
||||
this.tabKey = key |
||||
}, |
||||
|
||||
// 刷新分类列表 |
||||
onReloadCategoryList () { |
||||
this.isLoading = true |
||||
GoodsModel.getCategoryList().then(() => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
|
||||
// 刷新服务与承诺列表 |
||||
onReloadServiceList () { |
||||
this.isLoading = true |
||||
GoodsModel.getServiceList().then(() => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
|
||||
// 刷新配送模板列表 |
||||
onReloadDeliveryList () { |
||||
this.isLoading = true |
||||
GoodsModel.getDeliveryList().then(() => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
// 关闭对话框事件 |
||||
handleCancel () { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit (e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
ruleList |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 定位到错误的tab选项卡 |
||||
if (errors) { |
||||
this.onTargetTabError(errors) |
||||
return false |
||||
} |
||||
// 验证多规格 |
||||
if (values.spec_type === 20) { |
||||
const MultiSpec = this.$refs.MultiSpec |
||||
if (!MultiSpec.verifyForm()) { |
||||
this.tabKey = 1 |
||||
return false |
||||
} |
||||
// 记录多规格数据 |
||||
values.specData = MultiSpec.getFromSpecData() |
||||
} |
||||
values.rules = ruleList |
||||
// 整理商品分类ID集 |
||||
values.categoryIds = values.categorys.map((item) => item.value) |
||||
delete values.categorys |
||||
// 提交到后端api |
||||
this.onFormSubmit(values) |
||||
return true |
||||
}) |
||||
}, |
||||
|
||||
// 定位到错误的tab选项卡 |
||||
onTargetTabError (errors) { |
||||
// 表单字段与tabKey对应关系 |
||||
// 只需要必填字段就可 |
||||
const tabsFieldsMap = [ |
||||
[ |
||||
'goods_type', |
||||
'goods_name', |
||||
'categorys', |
||||
'imagesIds', |
||||
'delivery_id', |
||||
'is_ind_delivery_type', |
||||
'delivery_type', |
||||
'is_brand', |
||||
'is_in_store' |
||||
], |
||||
['spec_type', 'goods_price', 'is_restrict', 'restrict_total', 'restrict_single', 'cost_price'], |
||||
['content'], |
||||
['alone_grade_equity', 'first_money', 'second_money', 'third_money'] |
||||
] |
||||
const field = Object.keys(errors).shift() |
||||
for (const key in tabsFieldsMap) { |
||||
if (tabsFieldsMap[key].indexOf(field) > -1) { |
||||
this.tabKey = parseInt(key) |
||||
break |
||||
} |
||||
} |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit (values) { |
||||
this.isLoading = true |
||||
this.isBtnLoading = true |
||||
GoodsApi.edit({ goodsId: this.goodsId, form: values }) |
||||
.then((result) => { |
||||
// 显示提示信息 |
||||
this.$message.success(result.message, 1.5) |
||||
setTimeout(() => { |
||||
this.handleCancel() |
||||
}, 1500) |
||||
}) |
||||
.catch(() => { |
||||
this.isBtnLoading = false |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 新增记录 |
||||
handleAdd () { |
||||
const index = this.ruleList.length |
||||
const newItem = { ...defaultItem, key: index } |
||||
// 排除的城市id集(已存在的城市id集) |
||||
const excludedCityIds = this.getExcludedCityIds() |
||||
if (excludedCityIds.length === this.citysCount) { |
||||
this.$message.error('已选择了所有的区域', 0.8) |
||||
return false |
||||
} |
||||
// 显示选择地区对话框 |
||||
this.handleAreasModal('add', index, newItem, excludedCityIds) |
||||
}, |
||||
|
||||
// 编辑记录 |
||||
handleEdit (index, item) { |
||||
// 排除的城市id集(已存在的城市id集) |
||||
const excludedCityIds = this.getExcludedCityIds() |
||||
// 显示选择地区对话框 |
||||
this.handleAreasModal('edit', index, item, excludedCityIds) |
||||
}, |
||||
|
||||
// 选择地区后的回调 |
||||
handleAreaSubmit (result) { |
||||
const { |
||||
custom: { scene, item } |
||||
} = result |
||||
item.region = result.selectedCityIds |
||||
item.region_text = result.selectedText |
||||
if (scene === 'add') { |
||||
this.ruleList.push(item) |
||||
} |
||||
}, |
||||
|
||||
// 排除的城市id集(已存在的城市id集) |
||||
getExcludedCityIds () { |
||||
const excludedCityIds = [] |
||||
this.ruleList.forEach((item) => { |
||||
item.region.forEach((cityId) => { |
||||
excludedCityIds.push(cityId) |
||||
}) |
||||
}) |
||||
return excludedCityIds |
||||
}, |
||||
|
||||
// 显示选择地区对话框 |
||||
handleAreasModal (scene, index, item, excludedCityIds) { |
||||
this.$refs.AreasModal.handle({ scene, index, item }, item.region, excludedCityIds) |
||||
}, |
||||
|
||||
// 删除记录 |
||||
handleDelete (index) { |
||||
const app = this |
||||
const modal = this.$confirm({ |
||||
title: '您确定要删除该记录吗?', |
||||
onOk () { |
||||
app.ruleList.splice(index, 1) |
||||
modal.destroy() |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue