【项目实战——emos在线办公系统】：会议申请、请假申请等部分代码理解

一、trigger

1.tigger:'blur'：校验文本框是否为空

2.tigger:'changer':手动选择的东西，就用change

二、distinguishCancelAndClose

关于弹窗是点击空白关闭还是自定义关闭，如果是true就是点击空白关闭

三、element-ui组件

message box组件

效果：

调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

<template><el-button type="text" @click="open">点击打开 Message Box</el-button>
</template><script>export default {methods: {open() {this.$prompt('请输入邮箱', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: '邮箱格式不正确'}).then(({ value }) => {this.$message({type: 'success',message: '你的邮箱是: ' + value});}).catch(() => {this.$message({type: 'info',message: '取消输入'});       });}}}
</script>

四、标签大小写区分

在html当中是不区分大小写的，标签名使用大写或者小写都能达到一样的效果

五、that.$emit('refresh')

就是相当于触发一个叫做refresh的事件

六、this.$nextTick(()=>{}

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

七、this.$refs

ref 有三种用法：
　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素

　　2、ref 加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（）就可以使用了。

原文链接：原文章

八、.resetFields()

restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

使用：例如

that.$refs['dataForm'].resetFields();

就是把ref为dataForm重置

九、el-dialog标签的属性——:close-on-click-modal="false"

他的含义是：点击空白处是否关闭

十、scope.row.reason

scope.row相当于一个{},{}里边都是数据；按理说，列表里的数据是要供给表单展示，列表中的每个{}都是结构一样的，或者理解为包含的数据项相同。

例如（{"tomasfeng":"我是Tomas"，"id":"1"}，{"tomasfeng":"我是FH","id":"2"} ）,包含相同的tomasfeng和id的key

所以：

scope.row.tomasfeng表示就是这个{}中的tomasfeng属性值。

在审批的位置添加驳回理由

记录思路：

请假需要上传图片

审批添加驳回理由：

点击驳回之后，会弹出驳回的界面

驳回界面当中填写驳回理由

最后驳回理由可以查看到

思路

第一种，点击之后弹出像会议申请那样的界面

第二种，跳出原来的界面之后，点击否决，弹出我们的驳回理由

第三种，把审批直接改成否决同意，点击否决之后使用messagebox弹窗的组件

采用第三种

第一：先把操作界面改成“否决同意——在approval当中”170行

参考：会议管理部分的线上会议，online_meeting.vue的操作部分代码54行代码的进入和删除操作

第二步：修改了同意，使其能有已同意弹窗

第三步：为否决按钮添加弹窗，采用elementui当中messagebox弹框

第四步：实现点击之后出现类似于添加会议申请的弹窗

会议申请流程：

首先点击会议申请，调用addHandle函数，addHandle中，让addVisible为true，也就是说，让弹窗可见，

所以我先创建一个否决的vue文件

然后在approve.vue当中引入，注册，

然后用这个使用这个标签，最开始的时候，v-if要写成false,让其不可见

点击否决这个按钮，启用一个函数，函数，函数里面将v-if的值修改成true，使弹窗可见

现在进行：先不着急提交文本框里面的内容，我先让否决点击之后，可以弹出弹框，并且在点击确定的时候，可以提示操作成功

现在卡住了，点击之后没有弹出弹框

卡住了没有弹出弹框，所以现在我们来尝试复制整个offine_meeting_add的代码，先让他能弹出会议申请的那个弹框

现在已经完成了弹窗的必填以及验证，

现在需要做的是将理由提交，然后显示到被拒绝的用户的地方

发现同样的代码出现在在线办公-员工共请假，leave.vue70行

所以我们现在去理解这一部分代码，让我们的拒绝理由可以被看到

Leave_add.vue

Leave.vue

1.问题解决：

（1）问题：运行emos-workflow报错：ERROR org.springframework.boot.SpringApplication - Application run failed
org.yaml.snakeyaml.scanner.ScannerException: mapping values are not allowed here
in 'reader', line 18, column 12:
url: jdbc:mysql://localhost:3306/em ...

解决：格式没有对齐，把格式对其就没有报错了

（2）.问题：17:57:56 [vite] hmr update /src/views/approval.vue
17:57:56 [vite] Internal server error: Failed to resolve import "./approval_refuse" from "src\views\approval.vue". Does the file exist?
Plugin: vite:import-analysis
File: D:/myselfDownload/newproject/resource/project/update/emos-vue/src/views/approval.vue
2 | import Archive from './archive.vue';
3 | //导入我自己写的否决弹窗
4 | import refuse from './approval_refuse';
| ^
5 | const _sfc_main = {
6 | components: {

解决：很明显他告诉我们导入有问题，回头看，发现是导入vue文件位置报错，对比发现是文件没有加后缀名，加上.vue即可解决

(3)问题：点击否决按钮没有弹窗

解决：这个问题，我昨天，改了一晚上！！！！！！！对着那个代码看了几十遍！！！

结果发现，是我的标签没有v-model，没有进行双向数据绑定！！！！！

一周总结：

这一周最大的收获是，慢慢看代码懂了很多东西，比如vue整个框架的模板应该怎么去写，之前是有点晕。因为看代码然后就要去跟着代码的思路一个地方一个地方的看，把思路搞清楚才能去改代码，这样不断地看不断地看，自己再动手写印象就会很深（当然，突然一下搞清楚怎么import，export default，data，component的这些具体写法，整个联动起来工作，也是因为，改报错的时候，这些东西反反复复看了几十遍！！啊，九敏）

这一周学习就会发现，就是只是前端的东西我慢慢理解倒是都还可以，最大的问题可能还是前后端通信这个位置，主要还是看得少了，这两天要抓紧时间看这一部分，尽自己的理解去写，不懂的要请教学长（毕竟还是得自己实践了才知道哪里有问题），相信自己要是把这部分代码改出来，理解肯定比现在多得多得多。

还有还有，这两天改代码做得好的地方就是，把思路记录下来了，不仅是帮助自己下一次继续改代码方便，也帮助自己在改代码的过程当中理清了思路，知道目的是什么，我现在要做什么，目的明确，做事方向才清楚。

反正就是一定不能心浮气躁，静下心来，不管学多学少，总比之前心浮气躁最后什么也没学到得好。加油！