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

更新门店的新增、修改逻辑

Browse Source
feature/0423
Wayne 1 year ago
parent 11427c19dd
commit 418a9d9cea
2 changed files with 201 additions and 41 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. 89
      src/views/store/shop/Create.vue
  2. 153
      src/views/store/shop/Update.vue

89
src/views/store/shop/Create.vue
Unescape View File

@ -20,6 +20,17 @@
v-decorator="['logo_image_id', { rules: [{ required: true, message: '请上传门店logo' }] }]"
/>
</a-form-item>
<a-form-item
label="门店照片"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
required
>
<SelectImage
multiple
v-decorator="['shop_image_id', { rules: [{ required: true, message: '请上传门店照片' }] }]"
/>
</a-form-item>
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入联系人"
@ -70,6 +81,48 @@
</a-radio-group>
</a-form-item>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" @close="() => handleCloseTag(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleCloseTag(tag)">
{{ tag }}
</a-tag>
</template>
<a-input
v-if="tagInputVisible"
ref="input"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputTagChange"
@blur="handleInputTagConfirm"
/>
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showTagInput">
<a-icon type="plus" /> 添加标签
</a-tag>
</div>
</a-form-item>
<!-- <a-form-item label="停车场名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入停车场名称"
v-decorator="['parking_name']"
/>
</a-form-item>
<a-form-item label="停车场描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea :autoSize="{ minRows: 4 }" v-decorator="['parking_desc']" />
</a-form-item>
<a-form-item label="停车场坐标" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请选择停车场坐标" v-decorator="['parking_coordinate']" />
<Getpoint @setCoordinate="setParkingCoordinate" />
</a-form-item> -->
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
@ -111,12 +164,44 @@ export default {
// 输入框布局属性
wrapperCol: { span: 10 },
// 当前表单元素
form: this.$form.createForm(this)
form: this.$form.createForm(this),
tags: [],
tagInputVisible: false,
tagInputValue: ''
}
},
created () {
},
methods: {
handleCloseTag (removedTag) {
const tags = this.tags.filter(tag => tag !== removedTag)
this.tags = tags
},
showTagInput () {
this.tagInputVisible = true
this.$nextTick(function () {
this.$refs.input.focus()
})
},
handleInputTagChange (e) {
this.tagInputValue = e.target.value
},
handleInputTagConfirm () {
const tagInputValue = this.tagInputValue
let tags = this.tags
if (tagInputValue && tags.indexOf(tagInputValue) === -1) {
tags = [...tags, tagInputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
},
// 设置门店坐标
setCoordinate (coordinate) {
@ -140,7 +225,7 @@ export default {
onFormSubmit (values) {
this.isLoading = true
this.isBtnLoading = true
Api.add({ form: values })
Api.add({ form: { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') } })
.then(result => {
// 显示提示信息
this.$message.success(result.message, 1.5)

153
src/views/store/shop/Update.vue
Unescape View File

@ -5,43 +5,55 @@
<a-form :form="form" @submit="handleSubmit">
<a-form-item label="门店名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入门店名称"
v-decorator="['shop_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
placeholder="请输入门店名称"
v-decorator="['shop_name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
</a-form-item>
<a-form-item
label="门店Logo"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸: 300*300"
required
label="门店Logo"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="建议尺寸: 300*300"
required
>
<SelectImage
:defaultList="record.logoImage ? [record.logoImage] : []"
v-decorator="['logo_image_id', { rules: [{ required: true, message: '请上传门店logo' }] }]"
:defaultList="record.logoImage ? [record.logoImage] : []"
v-decorator="['logo_image_id', { rules: [{ required: true, message: '请上传门店logo' }] }]"
/>
</a-form-item>
<a-form-item
label="门店照片"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
required
>
<SelectImage
multiple
:defaultList="record.shop_image_url || []"
v-decorator="['shop_image_id', { rules: [{ required: true, message: '请上传门店照片' }] }]"
/>
</a-form-item>
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入联系人"
v-decorator="['linkman', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
placeholder="请输入联系人"
v-decorator="['linkman', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
</a-form-item>
<a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入联系电话" v-decorator="['phone', { rules: [{ required: true }] }]"/>
</a-form-item>
<a-form-item
label="营业时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="例如：8:30-17:30"
label="营业时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
extra="例如：8:30-17:30"
>
<a-input placeholder="请输入营业时间" v-decorator="['shop_hours', { rules: [{ required: true }] }]"/>
</a-form-item>
<a-form-item label="门店区域" :labelCol="labelCol" :wrapperCol="wrapperCol">
<SelectRegion
placeholder="请选择省市区"
v-decorator="['cascader', { rules: [{ required: true, message: '请选择省市区' }] }]"
placeholder="请选择省市区"
v-decorator="['cascader', { rules: [{ required: true, message: '请选择省市区' }] }]"
/>
</a-form-item>
<a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
@ -71,6 +83,33 @@
</a-radio-group>
</a-form-item>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<div>
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" @close="() => handleCloseTag(tag)">
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleCloseTag(tag)">
{{ tag }}
</a-tag>
</template>
<a-input
v-if="tagInputVisible"
ref="input"
type="text"
size="small"
:style="{ width: '78px' }"
:value="tagInputValue"
@change="handleInputTagChange"
@blur="handleInputTagConfirm"
/>
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showTagInput">
<a-icon type="plus" /> 添加标签
</a-tag>
</div>
</a-form-item>
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
@ -80,8 +119,8 @@
</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, message: '请输入排序值' }] }]"
:min="0"
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入排序值' }] }]"
/>
</a-form-item>
<a-form-item class="mt-20" :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
@ -95,8 +134,8 @@
<script>
import pick from 'lodash.pick'
import * as Api from '@/api/store/shop'
import {isEmpty} from '@/utils/util'
import {SelectImage, SelectRegion, Getpoint} from '@/components'
import { isEmpty } from '@/utils/util'
import { SelectImage, SelectRegion, Getpoint } from '@/components'
export default {
components: {
@ -104,36 +143,68 @@ export default {
SelectRegion,
Getpoint
},
data() {
data () {
return {
// 正在加载
isLoading: false,
isBtnLoading: false,
// 标签布局属性
labelCol: {span: 3},
labelCol: { span: 3 },
// 输入框布局属性
wrapperCol: {span: 10},
wrapperCol: { span: 10 },
// 当前表单元素
form: this.$form.createForm(this),
// 门店ID
shopId: null,
// 当前记录
record: {}
record: {},
tags: [],
tagInputVisible: false,
tagInputValue: ''
}
},
created() {
created () {
// 记录门店ID
this.shopId = this.$route.query.shopId
// 获取当前记录
this.getDetail()
},
methods: {
handleCloseTag (removedTag) {
const tags = this.tags.filter(tag => tag !== removedTag)
this.tags = tags
},
showTagInput () {
this.tagInputVisible = true
this.$nextTick(function () {
this.$refs.input.focus()
})
},
handleInputTagChange (e) {
this.tagInputValue = e.target.value
},
handleInputTagConfirm () {
const tagInputValue = this.tagInputValue
let tags = this.tags
if (tagInputValue && tags.indexOf(tagInputValue) === -1) {
tags = [...tags, tagInputValue]
}
Object.assign(this, {
tags,
tagInputVisible: false,
tagInputValue: ''
})
},
// 获取当前记录
getDetail() {
const {shopId} = this
getDetail () {
const { shopId } = this
this.isLoading = true
Api.detail({shopId})
Api.detail({ shopId })
.then(result => {
// 当前记录
this.record = result.data.detail
@ -144,41 +215,45 @@ export default {
},
// 设置表单默认值
setFieldsValue() {
const {record, form, $nextTick} = this
setFieldsValue () {
const { record, form, $nextTick } = this
// 设置表单内容
!isEmpty(form.getFieldsValue()) && $nextTick(() => {
form.setFieldsValue(pick(record, [
'shop_name', 'logo_image_id', 'linkman', 'phone',
'shop_hours', 'address', 'summary', 'cascader',
'coordinate', 'sort', 'is_check', 'status','is_main'
'coordinate', 'sort', 'is_check', 'status', 'is_main', 'shop_image_id', 'remark'
]))
})
if (record.remark) {
this.tags = JSON.parse(record.remark)
}
},
// 设置门店坐标
setCoordinate(coordinate) {
const {form, $nextTick} = this
setCoordinate (coordinate) {
const { form, $nextTick } = this
$nextTick(() => {
form.setFieldsValue({coordinate})
form.setFieldsValue({ coordinate })
})
},
// 确认按钮
handleSubmit(e) {
handleSubmit (e) {
e.preventDefault()
// 表单验证
const {form: {validateFields}, onFormSubmit} = this
const { form: { validateFields }, onFormSubmit } = this
validateFields((errors, values) => {
!errors && onFormSubmit(values)
})
},
// 提交到后端api
onFormSubmit(values) {
onFormSubmit (values) {
this.isLoading = true
this.isBtnLoading = true
Api.edit({shopId: this.shopId, form: values})
Api.edit({ shopId: this.shopId, form: { ...values, remark: this.tags, shop_image_id: values.shop_image_id.join(',') } })
.then(result => {
// 显示提示信息
this.$message.success(result.message, 1.5)

Write Preview
Loading…
Cancel
Save