jeecg-boot：Form表单

业务需求：店铺基础信息展示，信息修改，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>

最终效果

jeecg-boot：Form表单相关推荐

vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
form表单用js提前执行函数若不成功则不提交_面试必会的重复提交 8 种解决方案！...
重复提交看似是一个小儿科的问题,但却存在好几种变种用法.在面试中回答的好,说不定会有意想不到的收获!现把这 8 种解决方案分享给大家! 1.什么是幂等在我们编程中常见幂等 select查询天然幂等 ...
【一文学会文件上传】SpringBoot+form表单实现文件上传
唠嗑部分平时我们在项目过程中,往往会遇到这种情况,比如:我的用户应该有一个头像,那就涉及到文件上传,那么文件应该如何存储呢? 这就会有很多方式 1.最简单的就是存在服务器上,这就要考虑到服务器的磁盘 ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
form表单提交编码的问题
浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urle ...
js异步提交form表单的解决方案
1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span sty ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单的reset
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值.): 1.使用reset按钮,条件reset按钮必须在form表单内部. 2. <input id="But ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...

jeecg-boot：Form表单

业务需求：店铺基础信息展示，信息修改，button提交按钮

最终效果

jeecg-boot：Form表单相关推荐

最新文章

热门文章