【Hzero 前端随笔】

h0前端随笔

——C7N UI，JS， ES6， NPM与YARN包管理器等

 

VSCode插件推荐：

IntelliJ IDEA Key Bindings ：安装后IDEA的很多快捷键都可以在vs这里使用了，（比如熟悉的双击shift？）

ESLint：代码语法检查插件，因为不像IDEA，vscode提交时没有代码错误检测，手误出现的错误可能会被提交上去>

 

【VsCode git 拉取问题】 

拉取git项目后install失败：

拉取yarn install失败，hzero-front-utils 完整性失败什么的  (computed integrity doesn't match our records, got

方案一：删除yarn.lock，然后再yarn intsall，但是会在yarn build时出现错误，否定

方案二：直接 尝试使用 yarn --update-checksums 来升级所有安装过的包的 integrity checksums ，可以install成功

然后yarn build

最后发现，这个install和我从哪个分支拉取有关系，分支的不同意味着配置文件可能不同，这会影响依赖的拉取

【前端debugger】

在要进行debug的地方添加 debugger，然后在f12 的Sources中可以观察到具体参数变化

 

【实现查询，查询出的字段数据选中后可通过lov查询编辑并保存】 

实现效果如图：

 

 

 这里面有一个坑，lov传递的是对象类型而非具体数据类型，执行后会在后端产生JSON格式转换错误， 需要利用bind 绑定lov中的value才能获得对象中具体的字段：

　　bind 可以让我在具体的字段属性配置中，声明一个虚拟字段，用来绑定一个需要的已有字段。

 

 

利用Obj获取lov查询值，然后用bind来获取lov对象中的某个字段，比如上图是在DS中的Fields内，配置好这两个，还要保证表格能正常显示，所以需要在对应的 table中进行修改，不然DS中出现两个name为lineBusiness系统会无法识别导致其只显示为文本框

 

另外写的过程中还遇到一个问题：去掉这个箭头所指这个小框框，或者说，去除圆角矩形

 出现这样的显示是因为字段处于[可编辑] 状态，改为用变量来控制字段，实现未选中该行时不可编辑即可。

 

【Form表单的一些属性】

　　1.LabalWidtn：调整form表单的字段标签名长度（注意不是数据长度）

　　2.maxLength：在Form中给TextField，TextAre等类型的标签 限制数据长度

　　

 

　　PS：限制表单显示的字段长度：两种方法：一种是DS中限制maxlength，一种是table里限制，注意83是指83个字符（此处一个数字和一个汉字是一样的，而非字节）         

　　<TextAre name="summary" rows={3} colSpan={2} maxLength={83}/>

　　3.placeholder="xxx"：显示文本提示内容：

　　

　

【实现date期间选择与存储】

方法一：

　　可以从猪齿鱼官网的文档中找到类似的Pro组件，如下：

可以直接在DS中进行配置，table中不进行配置也是可以的：

Table：

 并且添加校验函数：

function rangeValidator(value, name) {
  console.log(`[validation ${name} value]`, value);
  return true;
}

 

 DS：

返回结果是一个包含开始（start）和结束（end）字段的对象duration，字段内容为字符串格式，可以在后端进行接收并处理格式。

效果如下：

 

 方法二：也是不需要修改table，只需要DS修改并处理一些参数即可

      {
        name: 'creatDate',
        type: 'date',
        ignore: 'always',
        format: DEFAULT_DATE_FORMAT,
        range: ['start', 'end'],
        label: '创建日期',
      },

参数解析：

        if (name === 'creatDate') {
          record.set('creationDateStart', value && value.start && dateGetValuePropFunc(value.start));
          record.set('creationDateEnd', value && value.end && dateGetValuePropFunc(value.end));
        }

后端实体类：

    @Transient
    private String creationDateStart;
    @Transient
    private String creationDateEnd;
    @Transient
    private Date creatDate;

 

 

【关于值集与值集视图】

　　值集配置后通常通过值集视图映射然后以lov形式进行显示（通常独立值集是以下拉框的形式在前端展示），最后选择数据时不管显示的是什么，向后端传递的字段是由值集的valueField内容决定的，这点容易混淆（我们常常展示meaning字段而传递value字段）。

　　报表与独立值集，单独说一下报表查询中的下拉框问题： 

　　当配置某字段为独立值集给报表，并在数据集里作为下拉框显示时，会出现错误，下面举栗

 

 　　此时显示异常，且尝试选择下拉框，复选框，值列表等都无法正常显示，最后发现想要报表里正常显示 还是需要通过值集视图来映射独立值集：事实上通过测试发现，独立值集中传递的字段名默认是value：如下图

 

解决办法：配置值集视图并绑定独立值集中的对应字段：

 

 【前端弹窗提示】

?

1	1.这种类似抛出异常，谨慎使用

?

1 2 3 4 5 6 7

const { only = [], except = [] } = opts;   if (only.length > 0 && except.length > 0) {     throw Error('init employee error');   }

　效果如图：

 

 

2.这种弹窗是大致位于界面中央位置

?

1 2 3 4 5 6 7

import { Button, DataSet, Modal, Spin } from 'choerodon-ui/pro';            if (f !== -1) {              Modal.error('请检查填报内容是否合规');            }

以及警告：

?

1	Modal.warning('请先保存后再进行提交操作');

效果如图：

成功弹窗：

?

1	Modal.success("操作成功！");

附：C7N参考连接：https://open-hand.gitee.io/choerodon-ui/zh/procmp/feedback/modal

 

【前端权限控制】

　　第一次接触这个话题是由于测试环境中的一个用户账号某页面编辑按钮没有显示，而admin账户是可以看到的，可以确定是权限问题，于是去看前端代码，到底是怎么控制的：

　　根据文档记录，hzero-front 1.0.2 及以后的版本 不分配权限时(角色管理-分配权限中不勾选权限)，不显示UI组件

 　  目前系统中有两种权限限制方式，一种是与页面权限控制相关的，一种是与API相关的，这里主要介绍的是 API权限控制：

　　前端配置截图如下：

 　　   字段属性解释：

　　　code = 前端路由（match.path） + 权限组件类别（button | table | formItem | fields）+ 具体的含义（新建：create | 编辑： edit）；

　　　meaning = 功能页面菜单名称 + 权限集的含义；

　　　

　　　配置路径：菜单配置-> 对应页面项目的权限子菜单->权限集

　　主要分为url（所有通过url路径访问的就通过【权限】来添加权限）和lov（sql类型的值集配置 在这里添加权限）

当然，也要给员工对应的岗位进行 分配权限 操作（见 【角色管理-操作-分配权限】）。