250 lines
7.9 KiB
Vue
250 lines
7.9 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
<div class="card-title">{{ $route.meta.title }}</div>
|
||
<a-spin :spinning="isLoading">
|
||
<a-form :form="form" @submit="handleSubmit" :selfUpdate="true">
|
||
<a-tabs :activeKey="tabKey" :tabBarStyle="{marginBottom: '30px'}" @change="handleTabs">
|
||
<a-tab-pane :key="0" tab="基本信息"></a-tab-pane>
|
||
</a-tabs>
|
||
<div class="tabs-content">
|
||
<!-- 基本信息 -->
|
||
<div class="tab-pane" v-show="tabKey == 0">
|
||
<a-form-item label="店铺" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-select
|
||
style="width: 300px"
|
||
v-decorator="['shop_id', {rules: [{required: true, message: '请选择店铺'}]}]"
|
||
placeholder="请选择店铺"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in formData.shopList"
|
||
:key="index"
|
||
:value="item.shop_id"
|
||
>{{ item.shop_name }}{{ item.contact_name?'（'+item.contact_name+'）':'' }}</a-select-option>
|
||
</a-select>
|
||
<div class="form-item-help">
|
||
<router-link
|
||
target="_blank"
|
||
:to="{ path: '/shop/create' }"
|
||
>新增店铺</router-link>
|
||
<a href="javascript:;" @click="onReloadShopList">刷新</a>
|
||
</div>
|
||
</a-form-item>
|
||
<a-form-item label="微信链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input
|
||
placeholder="请输入微信链接"
|
||
v-decorator="['link']"
|
||
@blur="getOrderNo"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="支付宝链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input placeholder="请输入支付宝链接" v-decorator="['alipay']"/>
|
||
</a-form-item>
|
||
<a-form-item label="产码账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input
|
||
placeholder="请输入产码账号"
|
||
v-decorator="['code_account', {rules: [{required: true, min: 2, message: ''}]}]"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input
|
||
placeholder="请输入订单号"
|
||
v-decorator="['order_no', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="通道编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-radio-group
|
||
v-decorator="['passageway', {rules: [{ required: true }]}]"
|
||
>
|
||
<a-radio
|
||
v-for="(item, index) in PassagewayEnum.data"
|
||
:key="index"
|
||
:value="item.value">{{ item.name }}</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="启停状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-radio-group
|
||
v-decorator="['state', {rules: [{ required: true }]}]"
|
||
>
|
||
<a-radio
|
||
v-for="(item, index) in StateEnum.data"
|
||
:key="index"
|
||
:value="item.value">{{ item.name }}</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
<a-form-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input-number
|
||
:min="0"
|
||
v-decorator="['money', { rules:[{ required: true }]}]"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="有限期限（秒） " :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-input-number
|
||
:min="0"
|
||
v-decorator="['expiration_time', { rules:[{ required: true }]}]"
|
||
/>
|
||
</a-form-item>
|
||
</div>
|
||
|
||
</div>
|
||
<a-form-item class="mt-20" :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
|
||
<a-button type="primary" html-type="submit" :loading="isBtnLoading">提交</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-spin>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import * as CodeApi from '@/api/code'
|
||
import { InputNumberGroup } from '@/components'
|
||
import CodeModel from '@/common/model/code/Index'
|
||
import { isEmptyObject, assignment } from '@/utils/util'
|
||
import {
|
||
PassagewayEnum,
|
||
StateEnum
|
||
} from '@/common/enum/code'
|
||
|
||
export default {
|
||
components: {
|
||
InputNumberGroup
|
||
},
|
||
data () {
|
||
return {
|
||
// 默认的标签索引
|
||
tabKey: 0,
|
||
// 标签布局属性
|
||
labelCol: { span: 3 },
|
||
// 输入框布局属性
|
||
wrapperCol: { span: 10 },
|
||
// loading状态
|
||
isLoading: false,
|
||
isBtnLoading: false,
|
||
// 当前表单元素
|
||
form: this.$form.createForm(this),
|
||
// 产码ID
|
||
codeId: null,
|
||
// 表单数据
|
||
formData: CodeModel.formData
|
||
}
|
||
},
|
||
beforeCreate () {
|
||
// 批量给当前实例赋值
|
||
assignment(this, {
|
||
PassagewayEnum,
|
||
StateEnum
|
||
})
|
||
},
|
||
created () {
|
||
// 初始化数据
|
||
this.initData()
|
||
},
|
||
beforeDestroy () {
|
||
// 销毁产码详情
|
||
CodeModel.formData.code = {}
|
||
},
|
||
methods: {
|
||
|
||
getOrderNo (event) {
|
||
const url = event.target.value
|
||
let orderId = url.match(/orderId=([^&]+)/)
|
||
let custNo = url.match(/custNo=([^&]+)/)
|
||
orderId = orderId !== null ? orderId[1] : ''
|
||
custNo = custNo !== null ? custNo[1] : ''
|
||
this.form.setFieldsValue({ 'code_account': custNo, 'order_no': orderId })
|
||
},
|
||
|
||
// 初始化数据
|
||
initData () {
|
||
// 记录产码ID
|
||
this.codeId = this.$route.query.codeId
|
||
// 获取form所需的数据
|
||
this.isLoading = true
|
||
CodeModel.getFromData(this.codeId)
|
||
.then(() => {
|
||
// 产码表单数据
|
||
if (!isEmptyObject(this.form.getFieldsValue())) {
|
||
this.form.setFieldsValue(CodeModel.getFieldsValue())
|
||
}
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
|
||
// 手动强制更新页面
|
||
onForceUpdate (bool = false) {
|
||
this.$forceUpdate()
|
||
// bool为true时再执行一次 $forceUpdate, 特殊情况下需执行两次，原因如下：
|
||
// 第一次执行 $forceUpdate时, 新元素绑定v-decorator无法获取到form.getFieldValue
|
||
bool && setTimeout(() => {
|
||
this.$forceUpdate()
|
||
}, 10)
|
||
},
|
||
|
||
// 切换tab选项卡
|
||
handleTabs (key) {
|
||
this.tabKey = key
|
||
},
|
||
|
||
// 刷新店铺列表
|
||
onReloadShopList () {
|
||
this.isLoading = true
|
||
CodeModel.getShopList().then(() => {
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 确认按钮
|
||
*/
|
||
handleSubmit (e) {
|
||
e.preventDefault()
|
||
// 表单验证
|
||
const { form: { validateFields } } = this
|
||
validateFields((errors, values) => {
|
||
// 定位到错误的tab选项卡
|
||
if (errors) {
|
||
this.onTargetTabError(errors)
|
||
return false
|
||
}
|
||
// 提交到后端api
|
||
this.onFormSubmit(values)
|
||
return true
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 定位到错误的tab选项卡
|
||
*/
|
||
onTargetTabError (errors) {
|
||
},
|
||
|
||
/**
|
||
* 提交到后端api
|
||
*/
|
||
onFormSubmit (values) {
|
||
this.isLoading = true
|
||
this.isBtnLoading = true
|
||
CodeApi.edit({ codeId: this.codeId, form: values })
|
||
.then(result => {
|
||
// 显示提示信息
|
||
this.$message.success(result.message, 1.5)
|
||
// 跳转到列表页
|
||
setTimeout(() => {
|
||
this.$router.push('./index')
|
||
}, 1500)
|
||
})
|
||
.catch(() => {
|
||
this.isBtnLoading = false
|
||
})
|
||
.finally(() => {
|
||
this.isLoading = false
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import './style.less';
|
||
</style>
|