初始化项目
This commit is contained in:
@@ -0,0 +1,249 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user