jeecgBoot 开发前端组件

实现这种类型的组件
1 表头

  <a-row type="flex" style="margin-bottom:10px" :gutter="16">
             <a-col :span="5">客户名</a-col>
              <a-col :span="5">性别</a-col>
              <a-col :span="5">身份证号码</a-col>
             <a-col :span="5">手机号</a-col>
              <a-col :span="4">操作</a-col>
            </a-row>

2.下面的框

 <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderCustomerList" :key="index">
               <a-col :span="5">
                 <a-form-item>
                   <a-input placeholder="客户名" v-decorator="['jeecgOrderCustomerList['+index+'].name', {'initialValue':item.name,rules: [{ required: true, message: '请输入用户名!' }]}]" />
                 </a-form-item>
               </a-col>
               <a-col :span="5">
                 <a-form-item>
                   <a-select placeholder="性别" v-decorator="['jeecgOrderCustomerList['+index+'].sex', {'initialValue':item.sex}]">
                     <a-select-option value="1">男</a-select-option>
                     <a-select-option value="2">女</a-select-option>
                   </a-select>
                 </a-form-item>
               </a-col>
               <a-col :span="5">
                 <a-form-item>
                   <a-input placeholder="身份证号" v-decorator="['jeecgOrderCustomerList['+index+'].idcard', {'initialValue':item.idcard,rules: [{ pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$', message: '身份证号格式不对!' }]}]"/>
                 </a-form-item>
               </a-col>
               <a-col :span="5">
                 <a-form-item>
                   <a-input placeholder="手机号" v-decorator="['jeecgOrderCustomerList['+index+'].telphone', {'initialValue':item.telphone,rules: [{ pattern: '^1(3|4|5|7|8)\\d{9}$', message: '手机号格式不对!' }]}]"/>
                 </a-form-item>
               </a-col>
               <a-col :span="4">
                 <a-form-item>
                   <a-button @click="addRowCustom" icon="plus"></a-button>&nbsp;
                   <a-button @click="delRowCustom(index)" icon="minus"></a-button>
                 </a-form-item>
               </a-col>
             </a-row>

3.一些相关的变量

 orderMainModel: {jeecgOrderCustomerList: [{}],     //数据源 可以写多个
          jeecgOrderTicketList: [{}]},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },

4.方法

 addRowCustom () {            //增加的方法
        this.orderMainModel.jeecgOrderCustomerList.push({});
        this.$forceUpdate();
      },
      delRowCustom (index) {        //删除的方法
        console.log(index)
        this.orderMainModel.jeecgOrderCustomerList.splice(index,1);
        this.$forceUpdate();
      },

5.进行添加到数据库的关键代码

    let orderMainData = Object.assign(this.orderMainModel, values);
            //时间格式化
            orderMainData.orderDate = orderMainData.orderDate?orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss'):null;
            let formData = {
              ...orderMainData,
              jeecgOrderCustomerList: orderMainData.jeecgOrderCustomerList,
            }
             httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            })