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

细节修改

Browse Source
feature/0423
fanfan 10 months ago
parent 341819dcf9
commit eb6ac52253
1 changed files with 117 additions and 125 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. 210
      src/views/goods/Update.vue

210
src/views/goods/Update.vue
Unescape View File

@ -55,26 +55,20 @@
</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-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-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_in_store', { initialValue: 0, rules: [{ required: true }] }]"
>
<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>
@ -108,8 +102,14 @@
<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: '配送方式至少选择一个' }] }]"
:options="[
{ label: '快递配送', value: 10 },
{ label: '上门自提', value: 20 },
]"
v-decorator="[
'delivery_type',
{ initialValue: [10, 20], rules: [{ required: true, message: '配送方式至少选择一个' }] },
]"
/>
</a-form-item>
</div>
@ -129,29 +129,27 @@
v-for="(item, index) in formData.deliveryList"
:key="index"
:value="item.delivery_id"
>{{ item.name }}</a-select-option>
>{{ item.name }}</a-select-option
>
</a-select>
<div class="form-item-help">
<router-link
target="_blank"
:to="{ path: '/setting/delivery/template/create' }"
>新增模板</router-link>
<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-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-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" html-type="submit" :loading="isBtnLoading">提交</a-button>
<a-button type="primary" @click="handleTabs(1)" style="margin-left: 20px">下一步</a-button>
</a-form-item>
</div>
@ -193,17 +191,8 @@
/>
<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']"
/>
<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
@ -215,7 +204,10 @@
<a-input-number
:min="0"
:precision="0"
v-decorator="['stock_num', { initialValue: 100, rules: [{ required: true, message: '请输入库存数量' }] }]"
v-decorator="[
'stock_num',
{ initialValue: 100, rules: [{ required: true, message: '请输入库存数量' }] },
]"
/>
<span class="ml-10">件</span>
</a-form-item>
@ -227,15 +219,16 @@
>
<a-input-number
:min="0"
v-decorator="['goods_weight', { initialValue: 0, rules: [{ required: true, message: '请输入库存数量' }] }]"
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-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>
@ -274,12 +267,22 @@
</a-form-item>
</div>
</a-form-item>
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
<a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
<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}">
<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" html-type="submit" :loading="isBtnLoading">提交</a-button>
<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>
<!-- 更多设置 -->
@ -323,11 +326,9 @@
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-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>
@ -340,7 +341,7 @@
:wrapperCol="wrapperCol"
extra="用户端展示的销量 = 初始销量 + 实际销量"
>
<a-input-number v-decorator="['sales_initial', { initialValue: 0}]" />
<a-input-number v-decorator="['sales_initial', { initialValue: 0 }]" />
</a-form-item>
<div>
<a-divider orientation="left">销售区域</a-divider>
@ -385,9 +386,7 @@
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品将获得积分"
>
<a-radio-group
v-decorator="['is_points_gift', { initialValue: 1, rules: [{ required: true }] }]"
>
<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>
@ -398,9 +397,7 @@
:wrapperCol="wrapperCol"
extra="开启后用户购买此商品可以使用积分进行抵扣"
>
<a-radio-group
v-decorator="['is_points_discount', { initialValue: 1, rules: [{ required: true }] }]"
>
<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>
@ -443,17 +440,20 @@
: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: '折扣率不能为空'}]
}]"
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-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>
@ -492,16 +492,17 @@
:addonBefore="item.name"
:addonAfter="form.getFieldValue('dealer_money_type') == 10 ? '%' : '元'"
:inputProps="{ min: 0, precision: 2 }"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空'}] }]"
v-decorator="[item.value, { rules: [{ required: true, message: '佣金不能为空' }] }]"
/>
</a-form-item>
</a-form-item>
</div>
</div>
</div>
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
<a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
<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" />
</a-spin>
@ -530,7 +531,7 @@ export default {
MultiSpec,
AreasModal
},
data () {
data() {
return {
// 默认的标签索引
tabKey: 0,
@ -565,32 +566,30 @@ export default {
},
watch: {
// 监听商品ID变化
'$route.query.goodsId' (val) {
'$route.query.goodsId'(val) {
if (val) {
this.goodsId = val
this.initData()
this.getDataList()
}
}
},
created () {
},
created() {
// 初始化数据
this.initData()
},
beforeDestroy () {
beforeDestroy() {
// 销毁商品详情
GoodsModel.formData.goods = {}
},
methods: {
// 初始化数据
initData () {
initData() {
// 记录商品ID
this.goodsId = this.$route.query.goodsId
// 获取form所需的数据
this.isLoading = true
GoodsModel.getFromData(this.goodsId)
.then(() => {
GoodsModel.getFromData(this.goodsId).then(() => {
// 商品表单数据
if (!isEmptyObject(this.form.getFieldsValue())) {
// 第一次赋值
@ -598,7 +597,6 @@ export default {
// 第二次赋值 (适用于动态渲染的form-item)
this.$nextTick(() => {
this.form.setFieldsValue(GoodsModel.getFieldsValue2())
this.ruleList = this.formData.goods.rules?this.formData.goods.rules:[]
this.onForceUpdate()
})
}
@ -607,22 +605,23 @@ export default {
},
// 手动强制更新页面
onForceUpdate (bool = false) {
onForceUpdate(bool = false) {
this.$forceUpdate()
// bool为true时再执行一次 $forceUpdate, 特殊情况下需执行两次，原因如下：
// 第一次执行 $forceUpdate时, 新元素绑定v-decorator无法获取到form.getFieldValue
bool && setTimeout(() => {
bool &&
setTimeout(() => {
this.$forceUpdate()
}, 10)
},
// 切换tab选项卡
handleTabs (key) {
handleTabs(key) {
this.tabKey = key
},
// 刷新分类列表
onReloadCategoryList () {
onReloadCategoryList() {
this.isLoading = true
GoodsModel.getCategoryList().then(() => {
this.isLoading = false
@ -630,7 +629,7 @@ export default {
},
// 刷新服务与承诺列表
onReloadServiceList () {
onReloadServiceList() {
this.isLoading = true
GoodsModel.getServiceList().then(() => {
this.isLoading = false
@ -638,7 +637,7 @@ export default {
},
// 刷新配送模板列表
onReloadDeliveryList () {
onReloadDeliveryList() {
this.isLoading = true
GoodsModel.getDeliveryList().then(() => {
this.isLoading = false
@ -646,10 +645,12 @@ export default {
},
// 确认按钮
handleSubmit (e) {
handleSubmit(e) {
e.preventDefault()
// 表单验证
const { form: { validateFields }, } = this
const {
form: { validateFields },ruleList
} = this
validateFields((errors, values) => {
// 定位到错误的tab选项卡
if (errors) {
@ -668,7 +669,7 @@ export default {
}
values.rules = ruleList
// 整理商品分类ID集
values.categoryIds = values.categorys.map(item => item.value)
values.categoryIds = values.categorys.map((item) => item.value)
delete values.categorys
// 提交到后端api
this.onFormSubmit(values)
@ -677,14 +678,24 @@ export default {
},
// 定位到错误的tab选项卡
onTargetTabError (errors) {
onTargetTabError(errors) {
// 表单字段与tabKey对应关系
// 只需要必填字段就可
const tabsFieldsMap = [
['goods_type', 'goods_name', 'categorys', 'imagesIds', 'delivery_id', 'is_ind_delivery_type', 'delivery_type', 'is_brand', 'is_in_store'],
[
'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']
['alone_grade_equity', 'first_money', 'second_money', 'third_money'],
]
const field = Object.keys(errors).shift()
for (const key in tabsFieldsMap) {
@ -696,11 +707,11 @@ export default {
},
// 提交到后端api
onFormSubmit (values) {
onFormSubmit(values) {
this.isLoading = true
this.isBtnLoading = true
GoodsApi.edit({ goodsId: this.goodsId, form: values })
.then(result => {
.then((result) => {
// 显示提示信息
this.$message.success(result.message, 1.5)
// 跳转到列表页
@ -711,9 +722,8 @@ export default {
.catch(() => {
this.isBtnLoading = false
})
.finally(() => this.isLoading = false)
.finally(() => (this.isLoading = false))
},
// 新增记录
handleAdd() {
const index = this.ruleList.length
@ -775,28 +785,10 @@ export default {
},
})
},
}
},
}
</script>
<style lang="less" scoped>
@import './style.less';
.table-rules {
.operation {
text-align: right;
a {
font-size: @font-size-base;
margin-left: 6px;
}
}
.content {
color: #505050;
white-space: normal;
.city-name {
font-size: 12.5px;
color: #7b7b7b;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save