VUE 解决Modal 按钮验证

按钮验证

<Modal v-model="T_pick" title="创建领料单" width="900" :closable="true" >
      <Table :columns="pickCol" :data="pickBomData" height="600" />
     <!-- 解决验证失败后的关闭问题-->
      <div slot="footer" align="center">
        <Button class="btn" size="default" type="default" @click="T_pick = false">取消</Button>
        <Button class="btn" size="default" type="primary" @click="pickSaveAction()">确定</Button>
      </div>
    </Modal>

 

验证编辑页面

 

 

 

 

producebomCol: [{
            type: 'index',
            title: '序号',
            align: 'center',
            width: 80
          },
          {
            title: '顺序号',
            align: 'center',
            key: 'pro_index',
          },
          {
            title: '物料编码',
            align: 'center',
            key: 'invcode'
          },
          {
            title: '投料方式',
            align: 'center',
            key: 'feedtype_code',
          },
          {
            title: '储存位置',
            align: 'center',
            key: 'storage',
          },
          {
            title: '公差上限',
            align: 'center',
            key: 'toleranceupperlimit',
          },
          {
            title: '公差下限',
            align: 'center',
            key: 'tolerancelowerlimit',
          },
          //下拉选择
          {
            title: '单包数量',
            key: 'singleqty',
            align: 'center',
            render: (h, params) => {
              let edit
              const row = params.row
              if (this.editindex === params.index) {

                edit = h('Select', {
                    on: {
                      'onChange': (event) => {
                        params.row.singleqty = event;
                      }
                    },
                  },
                  this.volumeTypes.map(function(type) { //这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                    return h('Option', {
                      props: {
                        value: type.value
                      }
                    }, type);
                  })
                )
              } else {
                edit = h(
                  'span', {},
                  row.singleqty
                )
              }
              return h('div', [edit])
            },
          },
          //手动输入
          // {
          //   title: '单包数量',
          //   key: 'singleqty',
          //   align: 'center',
          //   render: (h, params) => {
          //     let edit
          //     const row = params.row
          //     if (this.editindex === params.index) {
          //       edit = h(
          //         'Input', {
          //           props: {
          //             value: params.row.singleqty
          //           },
          //           on: {
          //             input: event => {
          //               params.row.singleqty = Number(event)
          //             }
          //           }
          //         }
          //       )
          //     } else {
          //       edit = h(
          //         'span', {},
          //         row.singleqty
          //       )
          //     }
          //     return h('div', [edit])
          //   }
          // },
          {
            title: '需求数量',
            key: 'expected_cnt',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 200,
            render: (h, params) => {
              const arr = []

              arr.push(h('Button', {
                on: {
                  click: () => {
                    this.handlebomedit(params.row)
                  }
                },
                props: {
                  type: 'warning',
                  size: 'small'
                  // icon: 'ios-brush-outline'
                },
                style: {
                  marginRight: '5px'
                }
              }, '编辑'))

              if (this.editindex === params.index) {
                return h('div', [
                  h('Button', {
                    on: {
                      click: () => {
                        this.handlebomeditsave(params)
                      }
                    },
                    props: {
                      type: 'success',
                      size: 'small'
                      // icon: 'ios-brush-outline'
                    },
                    style: {
                      marginRight: '5px'
                    }
                  }, '保存'),
                  h('Button', {
                    on: {
                      click: () => {
                        this.handlebomeditcancle(params.row)
                      }
                    },
                    props: {
                      type: 'info',
                      size: 'small'
                      // icon: 'ios-brush-outline'
                    },
                    style: {
                      marginRight: '5px'
                    }
                  }, '取消')

                ]);
              } else {
                return h('div', arr);
              }
            }
          }
        ]

 

 //单行编辑
      handlebomedit(item) {
        this.editindex = item._index
      },
      // bom编辑数量
      handlebomeditsave(params) {
        if (/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(params.row
            .singleqty)) {
          this.bomdata[params.index] = params.row;
          console.log('this.bomdata', params.row, this.bomdata);
          this.handlesavebom();
        } else {
          this.$Message.warning('请输入正确的数字')
          return;
        }
      },
      handlesavebom() {
        this.editindex = null;
        this.$Message.info("保存成功")
      },