业务需求：店铺基础信息展示，信息修改，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),// croppershopinfo:[],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>最终效果
