hust-epi/admin-ui/yvanui/example/vm.js

define(function (require) {
  return function () {

    var $form, _form, $preview;

    function getXs(unitCode) {
      switch (unitCode) {
        case '1':
          return 1;
        case '2':
          return 10;
        case '3':
          return 100;
      }
      return 1;
    }

    var prodDict = [
      { id: 'prod1', text: '产品1' },
      { id: 'prod2', text: '产品2' },
      { id: 'prod3', text: '产品3' },
      { id: 'prod4', text: '产品4' },
      { id: 'prod5', text: '产品5' },
      { id: 'prod6', text: '产品6' },
      { id: 'prod7', text: '产品7' },
      { id: 'prod8', text: '产品8' },
      { id: 'prod9', text: '产品9' },
      { id: 'prod10', text: '产品10' },
      { id: 'prod11', text: '产品11' },
      { id: 'prod12', text: '产品12' },
    ];

    var unitDict = [
      { id: '1', text: '个' },
      { id: '2', text: '盒' },
      { id: '3', text: '箱' }
    ];

    return {
      west: {
        onRender: function () {
          $preview = $(this);
        },
        title: '绑定效果',
        split: true,
        border: false,
        width: '400',
        items:
        '<p>hiddenUnit:<input class="textbox" v-model="hiddenUnit"></p>' +
        '<p>hiddenUnit2:<input class="textbox" v-model="hiddenUnit2"></p>' +
        '<p>{{unit$label}}:<input class="textbox" v-model="unit"></p>' +
        '<p>{{count1$label}}:<input class="textbox" v-model="count1"></p>' +
        '<p>{{count2$label}}:<input class="textbox" v-model="count2"></p>' +
        '<p>{{price$label}}:<input class="textbox" v-model="price"></p>' +
        '<p>{{total$label}}:<input class="textbox" v-model="total"></p>' +
        '<p>autoRemark:<input class="textbox" v-model="autoRemark"></p>' +
        '<p>autoCount:<input class="textbox" v-model="autoCount"></p>' +
        '<p>autoPrice:<input class="textbox" v-model="autoPrice"></p>' +
        '<p>rb:<input class="textbox" v-model="rb"></p>' +
        '<hr />' +
        '<p>{{prodCode$label}}:<input class="textbox" v-model="prodCode"></p>' +
        '<p>{{lot1$label}}:<input class="textbox" v-model="lot1"></p>' +
        '<p>{{lot2$label}}:<input class="textbox" v-model="lot2"></p>' +
        '<p>{{lot3$label}}:<input class="textbox" v-model="lot3"></p>' +
        '<p>{{lot4$label}}:<input class="textbox" v-model="lot4"></p>' +
        '<p>{{lot5$label}}:<input class="textbox" v-model="lot5"></p>' +
        '<p>{{lot6$label}}:<input class="textbox" v-model="lot6"></p>' +
        '<p>{{lot7$label}}:<input class="textbox" v-model="lot7"></p>' +
        '<p>{{lot8$label}}:<input class="textbox" v-model="lot8"></p>' +
        '<p>{{lot9$label}}:<input class="textbox" v-model="lot9"></p>' +
        '<p>{{lot10$label}}:<input class="textbox" v-model="lot10"></p>' +
        '<p>{{lot11$label}}:<input class="textbox" v-model="lot11"></p>' +
        '<p>{{lot12$label}}:<input class="textbox" v-model="lot12"></p>' +
        '<p>unit$text:{{unit$text}}</p>' +
        '<p>prodCode$text:{{prodCode$text}}</p>'
      },
      center: {
        title: '双向绑定演示',
        border: false,
        items: {
          onCreateViewModel: {
            previewElement: function () {
              return $preview[0];  //预览调试用的，实际情况下不需要设定
            },
            autoCreateLabel: true,  //自动根据内部的组件的Label，创建对应的 name$label 属性
            binds: [
              //如果不使用上面的3个 auto, 就个性化的设定所需要的 binds
              //'prodCode$text',       //combobox 组件，可以创建 name$text 代表combobox的显示值， combobox 的 value 对应还是 name 属性值
              'hiddenUnit2'
            ]
          },
          onRender: function () {
            //$form 以 $ 开头命名，代表他是一个 jQuery-DOM 对象
            $form = $(this);
            _form = $form.vm();
          },
          xtype: 'form',
          //subLabelWidth: 140,
          items: [
            '<div class="form-box form-name">金额计算:</div>',
            [
              {
                xtype: 'hidden', name: 'hiddenUnit',
                watch: function (v) {
                  this.hiddenUnit2 = v;
                }
              },
              {
                label: '收货单位', name: 'unit', data: unitDict, xtype: 'combobox', prompt: '空',
                watch: function (v) {
                  //this 就是 viewModel 对象
                  this.count2 = this.count1 * getXs(v);
                },
                watch$text: function (v) {
                  this.hiddenUnit = v;
                }
              },
              {
                label: '预期数量(主单位)', name: 'count1', xtype: 'numberbox', min: 0, precision: 2, labelWidth: 'auto',
                watch: function (v) {
                  this.count2 = v * getXs(this.unit);
                }
              },
              {
                label: '预期数量(收货单位)', name: 'count2', xtype: 'numberbox', min: 0, precision: 2, labelWidth: 'auto',
                watch: function (v) {
                  this.count1 = v / getXs(this.unit);
                }
              }
            ], [
              {
                label: '单价', name: 'price', xtype: 'numberbox', min: 0, precision: 2,
                onChange: function (n, o) {
                  $.yvan.msg('onChange unit from [' + o + '] to [' + n + ']');
                },
                watch: function (v) {
                  console.log('prodCode 改掉了', v);
                }
              },
              {
                label: '总金额', name: 'total', min: 0, precision: 2, xtype: 'numberbox', computed: function () {
                  return this.price * this.count2;
                }
              },
            ], [
              { xtype: 'offset' },
              {
                label: '自动备注', name: 'autoRemark', xtype: 'checkbox', value: 'Y', watch: function (v) {
                  //if (v) {
                  //  this.remark = '';
                  //  $form.item('remark').textbox({
                  //    readonly: false,
                  //    prompt: '填写备注',
                  //    label: '备注'
                  //  });
                  //} else {
                  //  $form.item('remark').textbox({
                  //    readonly: true,
                  //    prompt: '请选择收货单位',
                  //    label: '自动备注'
                  //  });
                  //}
                }
              },
              { label: '自动计算数量', name: 'autoCount', xtype: 'checkbox', value: 'Y' },
              { label: '自动计算金额', name: 'autoPrice', xtype: 'checkbox', value: 'Y' }
            ], [
              {
                label: '自动备注', name: 'remark', span: 3, prompt: '请选择收货单位',
                computed: function () {
                  if (!this.hiddenUnit2) {
                    return '';
                  }
                  return '以' + this.price + '的单价，购买' + this.count1 + this.hiddenUnit2 + '(合计' + this.count2 + ')，总价' + this.total;
                }
              }
            ], [
              { xtype: 'offset' },
              { xtype: 'radiobutton', label: '单选1-禁用', name: 'rb', value: 'a', disabled: true },
              { xtype: 'radiobutton', label: '单选2', name: 'rb', value: 'b' },
              { xtype: 'radiobutton', label: '单选3', name: 'rb', value: 'c', checked: true },
              { xtype: 'radiobutton', label: '单选4', name: 'rb', value: 'd' },
            ],
            '<div class="form-box form-name">助记码:</div>',
            [
              { label: '单位名称', name: 'orgName' },
              {
                label: '助记码', name: 'mnemonic',
                computed: function () {
                  return pinyin.getCamelChars(this.orgName);
                }
              }
            ], [
              { xtype: 'offset' },
              {
                text: '提交', xtype: 'button', onClick: function () {
                  var data = $form.formGet(true);
                  console.log(data);
                }
              }, {
                text: '清空', xtype: 'button', onClick: function () {
                  $form.formClear();
                }
              },
            ], [
              { xtype: 'offset' },
              {
                text: 'VM 改值', xtype: 'button', onClick: function () {
                  $.extend(_form, {
                    unit: 1,
                    price: 0.91,
                    count1: 23,
                    prodCode: '',
                    orgName: '九州通医药集团',
                    autoRemark: 'N',
                    autoCount: 'Y',
                    autoPrice: 'Y',
                    rb: 'a',
                    lot1: 'lot1-vm',
                    lot2: 'lot2-vm',
                    lot3: 'lot3-vm',
                    lot4: 'lot4-vm',
                    lot5: 'lot5-vm',
                    lot6: 'lot6-vm',
                    lot7: 'lot7-vm',
                    lot8: 'lot8-vm',
                    lot9: 'lot9-vm',
                    lot10: 'lot10-vm',
                    lot11: 'lot11-vm',
                    lot12: 'lot12-vm'
                  });
                }
              }, {
                text: 'Form 改值', xtype: 'button', onClick: function () {
                  $form.formSet({
                    unit: 2,
                    price: 1.71,
                    count1: 41,
                    prodCode: 'prod2',
                    orgName: 'FBBC工程部',
                    autoRemark: 'Y',
                    autoCount: 'N',
                    autoPrice: 'Y',
                    rb: 'b',
                    lot1: 'lot1-formSet',
                    lot2: 'lot2-formSet',
                    lot3: 'lot3-formSet',
                    lot4: 'lot4-formSet',
                    lot5: 'lot5-formSet',
                    lot6: 'lot6-formSet',
                    lot7: 'lot7-formSet',
                    lot8: 'lot8-formSet',
                    lot9: 'lot9-formSet',
                    lot10: 'lot10-formSet',
                    lot11: 'lot11-formSet',
                    lot12: 'lot12-formSet'
                  });
                }
              }, {
                text: 'jQuery 改值', xtype: 'button', onClick: function () {
                  $form.find('input[name="rb"]').val('c').change();
                  $form.find('input[name="autoRemark"]').val('Y').change();
                  $form.find('input[name="autoCount"]').val('Y').change();
                  $form.find('input[name="autoPrice"]').val('N').change();
                  //$form.find('input[name="unit"]').val(3).change();
                  //$form.find('input[name="price"]').val(1.71).change();
                  //$form.find('input[name="count1"]').val(99).change();
                  //$form.find('input[name="prodCode"]').val('prod1').change();
                  //$form.find('input[name="orgName"]').val('不知名公司').change();
                  //$form.find('input[name="lot1"]').val('lot1-jQuery').change();
                  //$form.find('input[name="lot2"]').val('lot2-jQuery').change();
                  //$form.find('input[name="lot3"]').val('lot3-jQuery').change();
                  //$form.find('input[name="lot4"]').val('lot4-jQuery').change();
                  //$form.find('input[name="lot5"]').val('lot5-jQuery').change();
                  //$form.find('input[name="lot6"]').val('lot6-jQuery').change();
                  //$form.find('input[name="lot7"]').val('lot7-jQuery').change();
                  //$form.find('input[name="lot8"]').val('lot8-jQuery').change();
                  //$form.find('input[name="lot9"]').val('lot9-jQuery').change();
                  //$form.find('input[name="lot10"]').val('lot10-jQuery').change();
                  //$form.find('input[name="lot11"]').val('lot11-jQuery').change();
                  //$form.find('input[name="lot12"]').val('lot12-jQuery').change();
                }
              }
            ], [
              {
                label: '产品名称', name: 'prodCode', xtype: 'combobox', data: prodDict, prompt: '空白',
                watch$text: function (v) {
                  if (v) {
                    this.lot1$label = v + '-' + '1';
                    this.lot2$label = v + '-' + '2';
                    this.lot3$label = v + '-' + '3';
                    this.lot4$label = v + '-' + '4';
                    this.lot5$label = v + '-' + '5';
                    this.lot6$label = v + '-' + '6';
                    this.lot7$label = v + '-' + '7';
                    this.lot8$label = v + '-' + '8';
                    this.lot9$label = v + '-' + '9';
                    this.lot10$label = v + '-' + '10';
                    this.lot11$label = v + '-' + '11';
                    this.lot12$label = v + '-' + '12';
                  } else {
                    this.lot1$label = '批属性1';
                    this.lot2$label = '批属性2';
                    this.lot3$label = '批属性3';
                    this.lot4$label = '批属性4';
                    this.lot5$label = '批属性5';
                    this.lot6$label = '批属性6';
                    this.lot7$label = '批属性7';
                    this.lot8$label = '批属性8';
                    this.lot9$label = '批属性9';
                    this.lot10$label = '批属性10';
                    this.lot11$label = '批属性11';
                    this.lot12$label = '批属性12';
                  }
                }
              },
            ], [
              { label: '批属性1', name: 'lot1' },
              { label: '批属性2', name: 'lot2' },
              { label: '批属性3', name: 'lot3' },
            ], [
              { label: '批属性4', name: 'lot4' },
              { label: '批属性5', name: 'lot5' },
              { label: '批属性6', name: 'lot6' },
            ], [
              { label: '批属性7', name: 'lot7' },
              { label: '批属性8', name: 'lot8' },
              { label: '批属性9', name: 'lot9' },
            ], [
              { label: '批属性10', name: 'lot10' },
              { label: '批属性11', name: 'lot11' },
              { label: '批属性12', name: 'lot12' },
            ]
          ]
        }
      }
    };

  };
});