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