hust-epi/admin-ui/yvanui/example/tablegrid-edit.js

define(function (require) {
  return function (context) {
    var $grid;
    var addRowId = 0;

    return {
      center: {
        border: false,
        items: {
          onRender: function () {
            $grid = $(this);
          },
          xtype: 'yvgrid',
          data: [],
          rownumbers: true,
          idField: 'skuid',
          editable: true,
          autoSizeColumns: false,
          pagination: false,
          onRowBeginEdit: function (event) {
            console.log('onRowBeginEdit', event);
          },
          onRowEndEdit: function (event) {
            console.log('onRowEndEdit', event);
          },
          onSelectRow: function (rowid) {
            console.log('onSelectRow', rowid);
          },
          toolbar: {
            xtype: 'toolbar',
            title: '本地批量编辑',
            items: [{
              text: '新增', iconCls: 'fa fa-plus-circle', onClick: function () {
                addRowId++;
                var s = "99.";
                for (var j = 0; j < addRowId; j++) {
                  s = s + "9";
                }
                $grid.yvgrid('addRow', {
                  remark: '备注' + addRowId,
                  skuid: $.yvan.createId('row'),
                  skucode: 'aa',
                  uom: 5,
                  orderqty: addRowId + '3',
                  orderqtyeach: s,
                  unitprice: addRowId + '9',
                  totalprice: addRowId + '27',
                  createAt: '2019-07-15',
                  excereceperc: addRowId * 2,
                  allowexcerece: (addRowId % 2 === 0 ? 'YES' : 'NO')
                });
              }
            }, {
              text: 'beginEdit',
              onClick: function () {
                $grid.yvgrid('beginEdit');
              }
            }, {
              text: 'endEdit',
              onClick: function () {
                $grid.yvgrid('endEdit');
              }
            }, {
              text: 'cancelEdit',
              onClick: function () {
                $grid.yvgrid('cancelEdit');
              }
            }, {
              text: '刷新',
              onClick: function () {
                $grid.yvgrid('refresh');
              }
            }, {
              text: 'getData',
              onClick: function () {
                $.yvan.alert(
                  '<pre>' +
                  JSON.stringify(
                    $grid.yvgrid('getData'), null, '  '
                  )
                  + '</pre>'
                );
              }
            }, {
              text: 'getEditRow',
              onClick: function () {
                $.yvan.alert(
                  '<pre>' +
                  JSON.stringify(
                    $grid.yvgrid('getEditRow'), null, '  '
                  )
                  + '</pre>'
                );
              }
            }, {
              text: 'setEditRow',
              onClick: function () {
                $grid.yvgrid('setEditRow', {
                  skuid: '111',
                  polineno: '222',
                  skucode: '我的编号',
                  skuname: '我的产品名称',
                  manufacturer: '我的厂家',
                  createAt: moment().format('YYYY-MM-DD'),
                  packcode: '我的包装编号',
                  uom: 5,
                  orderqty: '11',
                  orderqtyeach: '22',
                  unitprice: '33',
                  totalprice: '44',
                  allowexcerece: 'YES',
                  excereceperc: '55',
                  packid: 'ep',
                  packtype: 'ep2',
                  packmeasspec: 'ep3',
                  zpackMeasspec: 'ep4',
                  pono: 'ep5',
                  packunit: 'ep6'
                });
                $grid.focus();
              }
            }, {
              text: 'setPresentRow',
              onClick: function () {
                $grid.yvgrid('setPresentRow', {
                  skuid: '111',
                  polineno: '222',
                  skucode: '新编号',
                  skuname: '新产品名称',
                  manufacturer: '我的厂家',
                  createAt: '2013-01-01',
                  packcode: '新包装编号',
                  uom: 5,
                  orderqty: '1111',
                  orderqtyeach: '2222',
                  unitprice: '3333',
                  totalprice: '4444',
                  allowexcerece: 1,
                  excereceperc: '5555',
                  packid: 'np',
                  packtype: 'np2',
                  packmeasspec: 'np3',
                  zpackMeasspec: 'np4',
                  pono: 'np5',
                  packunit: 'np6'
                });
                $grid.focus();
              }
            }, {
              text: '判断编辑中',
              onClick: function () {
                $.yvan.msg('isEditing:' + $grid.yvgrid('isEditing'));
              }
            }, {
              text: '当前编辑行ID',
              onClick: function () {
                $.yvan.msg('editRowIndex:' + $grid.yvgrid('editRowIndex'));
              }
            }, '|', {
              text: '删除当前行',
              onClick: function () {
                $grid.yvgrid('deleteSelectedRow');
              }
            }
            ],
          },
          columns: [[
            {field: 'skuid', hidden: true},
            {field: 'polineno', hidden: true},
            {
              field: 'remark', title: '产品备注', width: 120, editor: {
                required: true,
                maxlength: 10,
                minlength: 2,
                onChange: function (value, event) {
                  console.log('产品备注 onChange', value, event);
                },
                validate: function (value, row) {
                  if (value.length < 3) {
                    return '自定义校验，要求字符必须大于3';
                  }
                  if ($.trim(value) === 'abc') {
                    return '自定义校验，要求不允许是abc';
                  }
                }
              }
            },
            {
              field: 'skucode', title: '产品编号', width: 120
            },
            {
              field: 'skuname', title: '产品名称', width: 210, editor: {
                required: true,
                xtype: 'searchbox',
                onChange: function (row) {
                  console.log('产品名称 onChange', row);
                },
                widget: {
                  url: '/yvanui/example/widget/selectDocSku.js',
                  onWidgetLoadData: function (option, sender) {
                    return {
                      ownerId: 'CNT00000022'
                    };
                  },
                  bind: {
                    skuid: 'skuId',
                    skucode: 'skuCode',
                    skuname: 'skuName',
                    manufacturer: 'manufacturer',
                    packcode: 'packCode',
                    packid: 'packId',
                    packmeasspec: 'packMeasspec',
                    zpackMeasspec: 'zpackMeasspec',
                    uom: 'defCustomerPack'
                  },
                  clear: {
                    orderqty: 0,
                    orderqtyeach: 0,
                    unitprice: 0,
                    totalprice: 0,
                    skuid: '',
                    skucode: '',
                    skuname: '',
                    manufacturer: '',
                    packcode: '',
                    packid: '',
                    packmeasspec: '',
                    zpackMeasspec: '',
                    excereceperc: 0,
                    packunit: '',
                    uom: '',
                    allowexcerece: 'NO',
                  },
                  success: function (data) {
                    if (data.defCustomerPack == 0) {
                      data.defCustomerPack = '';
                    }
                    $grid.yvgrid('setEditRow', {
                      skuid: data.skuId, skucode: data.skuCode, skuname: data.skuName,
                      manufacturer: data.manufacturer, packcode: data.packCode, packid: data.packId,
                      packmeasspec: data.packMeasspec,
                      zpackMeasspec: data.zpackMeasspec,
                      uom: data.defCustomerPack,
                      allowexcerece: (data.allowExceRece === '1' ? 'YES' : 'NO'),
                      excereceperc: data.exceRecePerc
                    }, this);
                  }
                }
              }
            },
            {field: 'manufacturer', title: '生产厂家', width: 140},
            {
              field: 'createAt', title: '生产日期', width: 120, editor: {
                xtype: 'datebox',
                required: true,
                min: '2018-12-31',
                max: '2019-12-31',
                validate: function (value, row) {
                  if (moment().format('YYYY-MM-DD') !== value) {
                    return '自定义校验，要求时间必须是' + moment().format('YYYY-MM-DD');
                  }
                },
                onChange: function (value) {
                  console.log('生产日期 changed to:', value);
                }
              }
            },
            {field: 'packcode', title: '包装编号', width: 100},
            {
              field: 'uom',
              title: '收货单位',
              width: 120,
              editor: {
                xtype: 'combobox',
                required: true,
                data: [
                  {id: '1', text: '主单位'},
                  {id: '2', text: '内包装'},
                  {id: '3', text: '箱'},
                  {id: '4', text: '托盘'},
                  {id: '5', text: '其他'},
                ],
                valueField: 'id',
                textField: 'text',
                validate: function (value, row) {
                  if (value === '5') {
                    return '自定义校验，要求不允许是5(其他)';
                  }
                },
                onChange: function (newValue) {
                  console.log('收货单位 onChange', newValue);
                  var row = $grid.yvgrid('getEditRow', this);
                  if (!row.skuid) {
                    $.yvan.msg("请先选择当前行商品信息!");
                    $grid.yvgrid('setEditRow', {uom: ''}, this);
                    return;
                  }
                  row.uom = newValue;
                  //$.yvan.ajax({
                  //  url: whUrl('/wms/inbound/docpo/changeUom'),
                  //  type: 'get',
                  //  async: false,
                  //  data: {
                  //    skuid: row.skuid,
                  //    uom: row.uom
                  //  },
                  //  success: function (data) {
                  //    row.packtype = 1;
                  //    row.packmeasspec = data.data.packMeasspec;
                  //    row.packunit = data.data.packUnit;
                  //    row.zpackMeasspec = data.data.zpackMeasspec;
                  //    if (row.orderqty) {
                  //      row.orderqtyeach = (row.orderqty * row.zpackMeasspec / row.packmeasspec).toFixed(2);
                  //    }
                  //    $grid.setEditRow(row);
                  //  }
                  //});
                }
              }
            },
            {
              field: 'orderqty', title: '订单数量(主单位)', width: 120, type: 'number',
              editor: {
                xtype: 'numberbox',
                precision: 1,
                required: true,
                min: 0,
                max: 100,
                validate: function (value, row) {
                  if (value > 50) {
                    return '自定义校验，必须小于50';
                  }
                },
                onChange: function () {
                  console.log('订单数量(主单位) changed');
                  var row = $grid.yvgrid('getEditRow', this);
                  var obj = {};
                  if (row.orderqty) {
                    //obj.orderqtyeach = (row.orderqty * row.zpackMeasspec / row.packmeasspec).toFixed(2);
                    obj.orderqtyeach = row.orderqty;
                  }
                  if (row.unitprice && row.orderqty) {
                    obj.totalprice = row.unitprice * row.orderqty;
                  }
                  $grid.yvgrid('setEditRow', obj, this);
                }
              }
            },
            {
              field: 'orderqtyeach', title: '订单数量(收货单位)', width: 120, type: 'number',
              editor: {
                xtype: 'numberbox',
                precision: 2,
                required: true,
                min: 0,
                max: 100,
                validate: function (value, row) {
                  if (value > 50) {
                    return '自定义校验，必须小于50';
                  }
                },
                onChange: function () {
                  console.log('订单数量(收货单位) changed');
                  var row = $grid.yvgrid('getEditRow', this);
                  if (row.orderqtyeach) {
                    $grid.yvgrid('setEditRow', {
                      //orderqty: ((row.orderqtyeach * row.packmeasspec) / row.zpackMeasspec).toFixed(2)
                      orderqty: row.orderqtyeach
                    }, this);
                  }
                }
              }
            },
            {
              field: 'unitprice', title: '含税单价', width: 100, type: 'number',
              editor: {
                xtype: 'numberbox',
                precision: 3,
                required: true,
                min: 0,
                max: 100,
                validate: function (value, row) {
                  if (value <= 10) {
                    return '自定义校验，业务要求必须大于10';
                  }
                },
                onChange: function () {
                  console.log('含税单价 changed');
                  var row = $grid.yvgrid('getEditRow', this);
                  if (row.unitprice && row.orderqty) {
                    $grid.yvgrid('setEditRow', {
                      totalprice: row.unitprice * row.orderqty
                    }, this);
                  }
                }
              }
            },
            {
              field: 'totalprice', title: '含税金额', width: 100, type: 'number',
              editor: {
                xtype: 'numberbox',
                precision: 4,
                required: true,
                min: 0,
                max: 100,
                validate: function (value, row) {
                  if (value <= 10) {
                    return '自定义校验，要求必须大于10';
                  }
                  if (value > 50) {
                    return '自定义校验，必须小于50';
                  }
                },
                onChange: function () {
                  console.log('含税金额 changed');
                  var row = $grid.yvgrid('getEditRow', this);
                  if (row.totalprice && row.orderqty) {
                    $grid.yvgrid('setEditRow', {
                      unitprice: (row.totalprice / row.orderqty).toFixed(2)
                    }, this);
                  }
                }
              }
            },
            {
              field: 'allowexcerece', title: '超量收货', width: 100,
              editor: {
                xtype: 'checkbox',
                on: 'YES',
                off: 'NO',
                validate: function (value, row) {
                  if (value !== 'YES') {
                    return '自定义校验，要求必须勾选';
                  }
                },
                onChange: function (value) {
                  console.log('超量收货 changed', value);
                }
              }
            },
            {
              field: 'excereceperc', title: '超量百分比(%)', width: 100, type: 'number',
              editor: {
                xtype: 'numberbox',
                required: true,
                precision: 0,
                min: 0,
                max: 100,
                validate: function (value, row) {
                  if (value < 5) {
                    return '自定义校验，要求必须大于5';
                  }
                  if (value > 80) {
                    return '自定义校验，必须小于80';
                  }
                },
                onChange: function () {
                  console.log('超量百分比 changed');
                }
              }
            },
            {field: 'packid', hidden: true},
            {field: 'packtype', hidden: true, value: '1'},
            {field: 'packmeasspec', hidden: true},
            {field: 'zpackMeasspec', hidden: true},
            {field: 'pono', hidden: true},
            {field: 'packunit', hidden: true}
          ]]
        }
      }
    };
  };
});