业务需求:店铺基础信息展示,信息修改,button提交按钮
业务分析:
1.店铺基础信息展示
form表单,Horizontal布局,getAction获取店铺信息
2.信息修改
input组件,v-model绑定表单数据
3.button提交按钮
httpAction提交表单数据
<template>
<div class="shop-basicinfo-settings">
<a-row :gutter="16">
<a-col :md="24" :lg="16">
<a-form
:form="form"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol">
<a-form-item label="店铺编号">
<span class="form-text">{{shopinfo.shopno}}</span>
</a-form-item>
<a-form-item label="店铺名称" :required="true" >
<a-input v-model='shopname'/>
</a-form-item>
<a-form-item label="店铺地址" :required="false">
<a-textarea rows="1" v-model="recaddress"/>
</a-form-item>
<a-form-item label="店铺联系人" >
<a-input v-model="shoplinkman"/>
</a-form-item>
<a-form-item label="店铺联系邮箱" :required="false" >
<a-input v-model="shopemail"/>
</a-form-item>
<a-form-item label="店铺联系电话" :required="false" >
<a-input v-model="shopphone"/>
</a-form-item>
<a-form-item label="财务信用等级" :required="false" >
<a-input v-model="creditgradeid"/>
</a-form-item>
<a-form-item label="授信额度" :required="false" >
<a-input v-model="creditvalue"/>
</a-form-item>
<a-form-item label="结存现金" :required="false" >
<a-input prefix="¥" v-model="balance"/>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" @click="submit">提交</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { httpAction } from '@/api/manage'
const formItemLayout = {
labelCol: { span: 5 },
wrapperCol: { span: 12 },
};
export default {
mixins:[JeecgListMixin],
components: {
},
data () {
return {
form: this.$form.createForm(this),
// cropper
shopinfo:[],
valueM:'hhhh',
formLayout: 'horizontal',
formItemLayout,
form: this.$form.createForm(this, { name: 'shopinfomation' }),
preview: {},
shopno:{},//店铺编号
shopname:{},//店铺名称
recaddress:{},//店铺地址
shopemail:{},//店铺邮箱
shopphone:{},//店铺联系电话
shoplinkman:{},//店铺联系人
creditvalue:{},//授信额度
balance:{},//结存现金
creditgradeid:{},//财务信用等级
params:{
id:"1217751403467776002"
},
url: {
list: "/Bshopbusniess/crShops/list",
edit: "/Bshopbusniess/crShops/edit",
},
}
},
created(){
this.getBshopinfo()
},
methods: {
getBshopinfo(){
var params = this.params;//查询条件
getAction(this.url.list, params).then((res) => {
if (res.success){
this.shopinfo = res.result.records[0];
this.shopname = this.shopinfo.shopname;
this.recaddress = this.shopinfo.recaddress;
this.shopphone = this.shopinfo.shopphone;
this.shopemail = this.shopinfo.shopemail;
this.shoplinkman = this.shopinfo.shoplinkman;
this.creditvalue = this.shopinfo.creditvalue;
this.balance = this.shopinfo.balance;
this.creditgradeid = this.shopinfo.creditgradeid;
// alert(this.shopname)
// alert(JSON.stringify(this.shopinfo.records[0].shopno))
console.log("======"+JSON.stringify(this.shopinfo));
}else{
alert("获取数据失败")
}
})
},
submit(){
let httpurl = '';
let method = '';
httpurl+=this.url.edit;
method = 'put';
const id = {id:'1217751403467776002'};
const shopname = {shopname: this.shopname};
const recaddress = {recaddress: this.recaddress};
const shopphone = {shopphone: this.shopphone};
const shopemail = {shopemail: this.shopemail};
const shoplinkman = {shoplinkman: this.shoplinkman};
const creditvalue = {creditvalue: this.creditvalue};
const balance = {balance: this.shopinfo.balance};
const creditgradeid = {creditgradeid:this.creditgradeid};
let formData = Object.assign(id,shopname,recaddress,shopphone,shopemail,shoplinkman,creditvalue,balance,creditgradeid);
// alert(JSON.stringify(formData))
httpAction(httpurl,formData,method).then((res)=>{
console.log(res);
})
},
}
}
</script>
<style lang="scss" scoped>
.shop-basicinfo-settings {
margin: 40px auto;
}
.form-text{
font-size: 24px;
font-weight: bold;
}
</style>
最终效果