首先是点击添加备注按钮,会向后台发起一个请求,获得当前角色的备注,然后循环到备注的区域,然后可以自己写备注,点击确定按钮也会向后台发送请求,添加备注.
data 里面的数据
// 备注信息模态框
notesModule: {
notesShow: false,
id: ‘‘,
taskName: ‘‘,
status: ‘‘,
info: ‘‘
},
objdata: [], //备注容器
// 修改备注按钮
<el-table-column label="备注" width="100">
<template slot-scope="scope">
<span class="action-btn" @click="notesEdit(scope.row)">
我是备注</span>
</template>
</el-table-column>
// 点击备注按钮发送请求
notesEdit(obj) {
this.notesModule = {
notesShow: true,
name: obj.taskName,
id: obj.id,
info: ‘‘
}
this.getTaskReMark()
},
// 获取备注的列表
getTaskReMark() {
this.$http(this.GLOBALApi.commonBrandRemarkList(), {
sourceType: 8,
sourceId: this.notesModule.id,
personId: ‘1‘ //用户的iD-或者管理员的id
}).then(res => {
if (res.status == 1) {
this.objdata = res.data
console.log(res.data)
} else {
}
})
this.initPage()
},
获得了objdata就去循环渲染页面咯
<!-- 您讲给谁进行备注 -->
<p style="height:30px; line-height:30px;text-align: center;font-size: 22px;margin: 0;">
您将给
<span style="color: #ff4081;">{{ notesModule.name }}</span> 进行备注
</p>
<!-- 备注内容滚动条 -->
<div class="scrollarea">
<el-scrollbar style="height:100%;width: 100%;margin: 0 auto;">
<div style="height: 40px;line-height: 40px;" v-for="(item, index) in objdata" :key="index">
<span>{{ item.createTime }}</span>
<span>管理员名称:{{ item.personName }}</span>
<span>备注内容:{{ item.description }}</span>
</div>
</el-scrollbar>
</div>
// 点击确定按钮
<div>
<span>取 消</span>
<span @click="notesSubmit">确 定</span>
</div>
// 点击确定按钮发送请求
// 发起请求提交备注的信息
notesSubmit() {
this.$http(this.GLOBALApi.commonRemark(), {
sourceType: 8,
sourceId: this.notesModule.id,
description: this.notesModule.info,
personId: ‘1‘ //用户的iD-或者管理员的id
}).then(res => {
if (res.status == 1) {
this.$message({
message: ‘保存成功‘,
type: ‘info‘
})
this.notesModule = {
notesShow: false,
name: ‘‘,
id: ‘‘,
info: ‘‘
}
this.initPage()
} else {
this.$message({
message: ‘请填写备注‘,
type: ‘error‘
})
}
})
},