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),
        // 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>

最终效果