dayjs format 变成12小时制_2019-12-16小组会议总结

20191216小组会议

一、时间工具类

时间格式转换工具，使用的是 moment.js

使用方法如下：

格式类型

写法

转换结果

YYYY this.$_moment(‘2019-12-10’).format(‘YYYY’) 2019

YY this.$_moment(‘2019-12-10’).format(‘YY’) 19

MM this.$_moment(‘2019-12-10’).format(‘MM’) 12

DD this.$_moment(‘2019-12-10’).format(‘DD’) 10

HH this.$_moment(‘2019-12-10 15:20:15’).format(‘HH’) 15

hh this.$_moment(‘2019-12-10 15:20:15’).format(‘hh’) 03

mm this.$_moment(‘2019-12-10 15:20:15’).format(‘mm’) 20

ss this.$_moment(‘2019-12-10 15:20:15’).format(‘ss’) 15

注意点：

年月日必须是大写

时分秒

HH 表示24小时制

hh 表示12小时制

mm 表示补全0

总结：年月日大写，小时需要24小时制，需要大写，时分秒都需要小写，需要补全0的话，时分秒需要写叠加

重定向方法调整

页面刷新问题：

把页面替换成改成这样：

this.$router.replace({ path: query.path,query: query.query})

二 汇总组件参数介绍

Demo 展示

在 xframe/pages/demo/demoDisplayTotalSummary.vue

效果展示

前端样式代码规范问题

建议相关的属性说明放在一组，提高代码的可读性

1. 布局方式、位置、相关属性 (position、left、right、top、bottom、z-index)

2. 盒子模型，相关属性包括 (display、float、width、height、margin、padding、border、border-radius)

3. 文本排版，相关属性包括 (font、color、background、line-height、text-align)

4. 视觉外观，相关属性包括 (color、background、list-style、transform、animation)

由于定义可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首页。而盒模型决定了组件的尺寸和大小，所以排在第二位。文本和视觉对元素影响较小，所以放在第三，第四位。示例代码如下：

```
.box {
    position: absolute;
    top: 0;
    left: 20%;
    z-index: 99;
    width: 100px;
    height: 100px;
    font-size: 20px;
    color: red;
    background-color: aqua;
}
```

可删除人名标签 tab 组件

效果展示

表格文字过长问题处理

表格内文字超出隐藏显示 tootip 目前统一使用下面这种方法进行处理，具体参考地址在 demoComponent.vue 文件中

使用方法：

具体展示效果：

多列布局样式调整

具体请参考 xframe/demo/demoDisplayTotalSummary.vue

计算属性与 methods 区别 xcredit/userCredit/noReturnLimitOrderList.vue

Computed 计算属性

像如果直接在 DOM 里面引用的话，比如下面 (计算量不大的情况下，可以如以下这么写)

在计算量非常大的情况，建议使用 computed 计算属性

```
computed: {
getReceiver() {
If(this.credit.dataType == 3){
return this.credit.userGroupName + ‘’
} else {
return this.credit.receiverOneName
}
}
}
```

引用如下

<fy-form-item :label="ufd.fields.receiver.fieldName" prop="receiver">
    <span>{{ getReceiver }}</span>
 </fy-form-item>

三、methods

方法，跟computed都不一样，我们通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。

需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。