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);
              }
            })