fanfan
8 months ago
parent
9ba3f0f03e
commit
27f476f734
@ -0,0 +1,243 @@ |
|||||||
|
<template> |
||||||
|
<a-card :bordered="false"> |
||||||
|
<div class="card-title">{{ $route.meta.title }}</div> |
||||||
|
<a-spin :spinning="isLoading"> |
||||||
|
<a-form :form="form" @submit="handleSubmit"> |
||||||
|
<a-form-item label="商户分类" :labelCol="labelCol" required> |
||||||
|
<a-tree-select |
||||||
|
style="width: 500px; margin-right: 8px; margin-top: 3px" |
||||||
|
placeholder="请选择商户分类" |
||||||
|
:dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" |
||||||
|
:treeData="formData.categoryList" |
||||||
|
treeCheckable |
||||||
|
allowClear |
||||||
|
treeCheckStrictly |
||||||
|
v-decorator="[`category`]" |
||||||
|
></a-tree-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }"> |
||||||
|
<a-button type="primary" html-type="submit">提交</a-button> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-spin> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import pick from 'lodash.pick' |
||||||
|
import * as Api from '@/api/shop' |
||||||
|
import GoodsModel from '@/common/model/goods/Index' |
||||||
|
import { isEmpty } from '@/utils/util' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 标签布局属性 |
||||||
|
labelCol: { span: 3 }, |
||||||
|
// 输入框布局属性 |
||||||
|
wrapperCol: { span: 10 }, |
||||||
|
// loading状态 |
||||||
|
isLoading: false, |
||||||
|
// 当前表单元素 |
||||||
|
form: this.$form.createForm(this), |
||||||
|
// 当前记录详情分类数据、 |
||||||
|
formData: GoodsModel.formData, |
||||||
|
record: {}, |
||||||
|
} |
||||||
|
}, |
||||||
|
// 初始化数据 |
||||||
|
created() { |
||||||
|
this.isLoading = true |
||||||
|
// 获取form所需的数据 |
||||||
|
GoodsModel.getFromData().then(() => { |
||||||
|
this.isLoading = false |
||||||
|
}) |
||||||
|
this.form.getFieldDecorator('category', { initialValue: [], preserve: true }) |
||||||
|
this.getDetail() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 设置表单默认值 |
||||||
|
setFieldsValue() { |
||||||
|
const { record, form, $nextTick } = this |
||||||
|
record[`goods_cate`] = this.formatCategoryIds(record.goods_cate.split(',')) |
||||||
|
// 设置表单内容 |
||||||
|
!isEmpty(form.getFieldsValue()) && |
||||||
|
$nextTick(() => { |
||||||
|
form.setFieldsValue({ |
||||||
|
category: record.goods_cate, |
||||||
|
}) |
||||||
|
this.$forceUpdate() |
||||||
|
}) |
||||||
|
}, |
||||||
|
formatCategoryIds(categoryIds) { |
||||||
|
return categoryIds.map((id) => { |
||||||
|
return { value: id } |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取当前详情记录 |
||||||
|
getDetail() { |
||||||
|
this.isLoading = true |
||||||
|
Api.getMerchantGoodsCate() |
||||||
|
.then((result) => { |
||||||
|
this.record = result.data.merchant |
||||||
|
// 设置默认值 |
||||||
|
if (result.data.merchant) { |
||||||
|
this.setFieldsValue() |
||||||
|
} |
||||||
|
}) |
||||||
|
.finally(() => (this.isLoading = false)) |
||||||
|
}, |
||||||
|
// 确认按钮 |
||||||
|
handleSubmit(e) { |
||||||
|
e.preventDefault() |
||||||
|
// 表单验证 |
||||||
|
const { |
||||||
|
form: { validateFields }, |
||||||
|
onFormSubmit, |
||||||
|
} = this |
||||||
|
validateFields((errors, values) => { |
||||||
|
!errors && onFormSubmit(values) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 提交到后端api |
||||||
|
onFormSubmit(values) { |
||||||
|
let ids = [] |
||||||
|
if (values.category.length > 0) { |
||||||
|
values.category.forEach((item) => { |
||||||
|
ids.push(item.value) |
||||||
|
}) |
||||||
|
} |
||||||
|
console.log(values, ids.join(',')) |
||||||
|
this.isLoading = true |
||||||
|
Api.setMerchantGoodsCate({ form: { goods_cate: ids.length > 0 ? ids.join(',') : '' } }) |
||||||
|
.then((result) => { |
||||||
|
// 显示提示信息 |
||||||
|
this.$message.success(result.message, 1.5) |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
this.isLoading = false |
||||||
|
}) |
||||||
|
.finally(() => (this.isLoading = false)) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.msg { |
||||||
|
width: 100%; |
||||||
|
background: #ffe7e7; |
||||||
|
border-radius: 0px 0px 0px 0px; |
||||||
|
opacity: 1; |
||||||
|
padding: 5px 25px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 16px; |
||||||
|
span { |
||||||
|
width: 33%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.ant-form-item-control { |
||||||
|
padding-left: 10px; |
||||||
|
.ant-form-item-control { |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.ant-input-prefix { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
/deep/.ant-col-10 { |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
.fan { |
||||||
|
display: flex; |
||||||
|
align-items: top; |
||||||
|
} |
||||||
|
.fan /deep/ .ant-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.fen { |
||||||
|
span { |
||||||
|
color: #555; |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
.input { |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #d9d9d9; |
||||||
|
height: 32px; |
||||||
|
width: 180px; |
||||||
|
margin-top: 10px; |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
input::-webkit-input-placeholder { |
||||||
|
// 针对 谷歌 内核 |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
input:-moz-placeholder { |
||||||
|
// 火狐 |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
input:-ms-input-placeholder { |
||||||
|
// 微软ie |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
} |
||||||
|
.setRule { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.ruleTitle { |
||||||
|
font-size: 14px; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #303030; |
||||||
|
} |
||||||
|
.ruleText { |
||||||
|
margin-top: 8px; |
||||||
|
font-size: 14px; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #8b8b8b; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
.inMax { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
padding: 0; |
||||||
|
font-variant: tabular-nums; |
||||||
|
list-style: none; |
||||||
|
display: inline-block; |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
padding: 0 26px 0 0; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
font-size: 13px; |
||||||
|
line-height: 32px; |
||||||
|
background-color: #fff; |
||||||
|
background-image: none; |
||||||
|
border: 1px solid #d9d9d9; |
||||||
|
border-radius: 2px; |
||||||
|
-webkit-transition: all 0.3s; |
||||||
|
transition: all 0.3s; |
||||||
|
input { |
||||||
|
border: none; |
||||||
|
width: 45%; |
||||||
|
margin: 0; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
input:focus { |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
input::-webkit-input-placeholder { |
||||||
|
color: #bfbfbf; |
||||||
|
} |
||||||
|
.yuan { |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue