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

一键获取

Browse Source
main
fanfan 6 months ago
parent 94c9b25935
commit 6f283e7f50
1 changed files with 567 additions and 727 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. 300
      src/views/goods/Create.vue

300
src/views/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}]" @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">
<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 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 v-decorator="['goods_source', { initialValue: 'JD', rules: [{ required: true }] }]">
@ -103,9 +86,9 @@
</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="商品编码" :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']" />
@ -115,51 +98,26 @@
<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-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="[
<a-checkbox-group :options="[
{ label: '快递配送', value: 10 },
{ label: '上门自提', value: 20 },
]"
v-decorator="[
]" 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-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>
@ -184,10 +142,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">多规格</a-radio> -->
</a-radio-group>
@ -198,55 +153,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>
@ -256,36 +185,20 @@
<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-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: '请输入总限购数量' }] }]"
/>
<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: '请输入每单限购数量' }] }]"
/>
<a-input-number :min="1" :precision="0" v-decorator="['restrict_single', { rules: [{ required: true, message: '请输入每单限购数量' }] }]" />
<span class="ml-10">件/人</span>
</a-form-item>
</div>
@ -311,37 +224,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">
<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>
@ -351,25 +244,13 @@
<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">
@ -377,12 +258,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>
@ -399,23 +275,13 @@
</div>
<div v-show="$module('market-points')">
<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>
@ -425,48 +291,27 @@
<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-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">
@ -481,10 +326,7 @@
<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-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>
@ -492,27 +334,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>
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
@ -589,6 +419,13 @@ export default {
})
},
methods: {
handInfo(){
let obj={
goods_name:'测试',
goods_price:123
}
this.form.setFieldsValue(obj)
},
// 手动强制更新页面
onForceUpdate(bool = false) {
this.$forceUpdate()
@ -784,4 +621,7 @@ export default {
}
}
}
.action-item{
margin-left: 20px;
}
</style>

Write Preview
Loading…
Cancel
Save