AJ-Report项目分析（5）

2021SC@SDUSC

继续分析：

在上篇文章AJ-Report项目分析（4）中，我们着重分析了此页面对应源码中的button源码，接下来我们分析button之后的column源码：

 // 表格列
        columns: [
          {
            label: "",
            field: "id",
            primaryKey: true,  
            tableHide: true,  
            editHide: true 
          },
          {
            label: "菜单代码", 
            placeholder: "",
            field: "target",
            editField: "target",
            tableHide: true,  
            inputType: "input",
            rules: [
              { required: true, message: "目标菜单必填", trigger: "blur" },
              { min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
            ],
            disabled: false
          },
           ....还有很多，篇幅原因先不再赘述，等用到了再说
        ]

这个column栏主要是用来描述下面编辑以及新建页面的：

首先我们来看column中的第一个{}内的元素，即第一个label：

      {
            label: "",
            field: "id",
            primaryKey: true,  
            tableHide: true, 
            editHide: true  
      },

属性的含义分别如下：

1. label：标签名称，在这里为空

2. primaryKey：是否根据主键查询详情或者根据主键删除

3. tableHide：表格中是否不显示，在这里为不显示

4. editHide：编辑弹框是否不显示，在这里为true

这个标签由于是不显示而且标签名称为空，在页面中是不显示的

接下来看下一个label：

         {
            label: "菜单代码", //目标菜单
            placeholder: "",
            field: "target",
            editField: "target",
            tableHide: true, // 表格中不显示
            inputType: "input",
            rules: [
              { required: true, message: "目标菜单必填", trigger: "blur" },
              { min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
            ],
            disabled: false
          },

我们注意到这个菜单代码就对应如下input框：

这里多了一个字段rules，rules的作用是规定input输入框的内容，比如在这里，rules内的required表示这个input输入框是必填的，不然会出现如下错误：

可以看到报错内容就是rules内message的值。trigger是指什么时候检查这些rules，blur表示当焦点移走的时候就检错。

rules中第二行规定了input输入框内容的长度在1-64之间，如果违背则报如下错误：

接下来看一关于“启用状态”的label源码：

          {
            label: "启用状态", 
            placeholder: "",
            field: "enableFlag",
            fieldTableRowRenderer: row => {
              return this.getDictLabelByCode("ENABLE_FLAG", row["enableFlag"]);
            },
            editField: "enableFlag",
            inputType: "anji-select",
            anjiSelectOption: {
              dictCode: "ENABLE_FLAG" 
            },
            colorStyle: {
              0: "table-danger",  
              1: "table-success"
            },
            rules: [
              { required: true, message: "启用状态必填", trigger: "blur" }
            ],
            disabled: false
          },

可以看到一个字段fieldTableRowRenderer调用了一个函数：this.getDictLabelByCode函数。

我们来看下这个函数的源码：

     getDictLabelByCode (dict, code) {
      var dictItem = this.getDictItemByCode(dict, code)
      if (dictItem != null) {
        return dictItem['text']
      } else {
        return ''
      }
    },

函数首先调用了getDictItemByCode函数，此函数源码如下：

     getDictExtendByCode (dict, code) {
      var dictItem = this.getDictItemByCode(dict, code)
      if (dictItem == null) {
        return null
      }
      var extend = dictItem['extend']
      if (extend == null || extend.trim() == 'null') {
        return null
      }
      return dictItem['extend']
    },

这两个函数的共同作用是：根据数据字典，查询指定字典dict指定值code的dictItem.text。从getDictLabelByCode可以看出，入股dictItem等于null 的话，直接返回空。

我们回到“启动状态”源码，启动状态有两个：0--已禁用 1--已启用。anjiSelectOption字段指定了数据字典为ENABLE_FLAG。

剩下的就是常规的rules和tableHide，就不分析了，和前面的一样。

おすすめ