<template> <el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules"> <el-form-item label="ID"> <div class="detail">{{activityDetail.id}} </div> </el-form-item> <el-form-item label="负责人"> <div class="detail"> {{activityDetail.ownerDO.name}} </div> </el-form-item> <el-form-item label="活动名称"> <div class="detail">{{activityDetail.name}} </div> </el-form-item> <el-form-item label="开始时间"> <div class="detail">{{activityDetail.startDate}} </div> </el-form-item> <el-form-item label="结束时间"> <div class="detail">{{activityDetail.endDate}} </div> </el-form-item> <el-form-item label="活动预算"> <div class="detail">{{activityDetail.cost}} </div> </el-form-item> <el-form-item label="活动描述"> <div class="detail">{{activityDetail.description}} </div> </el-form-item> <el-form-item label="创建时间"> <div class="detail">{{activityDetail.createTime}} </div> </el-form-item> <el-form-item label="创建人"> <div class="detail">{{activityDetail.createByDO.name}} </div> </el-form-item> <el-form-item label="编辑时间"> <div class="detail">{{activityDetail.editTime}} </div> </el-form-item> <el-form-item label="编辑人"> <div class="detail">{{activityDetail.editByDO.name}} </div> </el-form-item> <el-form-item label="填写备注:" prop="noteContent"> <el-input v-model="activityRemarkQuery.noteContent" :rows="8" type="textarea" placeholder="请输入活动备注" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submit()">提交</el-button> <el-button @click="goBack()">返回</el-button> </el-form-item> </el-form> <hr> <el-table :data="activityRemarkList" style="width: 100%" > <el-table-column type="index" label="序号" width="52%" /> <el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip /> <el-table-column property="createTime" label="备注时间" show-overflow-tooltip /> <el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip /> <el-table-column property="editTime" label="编辑时间" show-overflow-tooltip /> <el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip /> <el-table-column label="操作" show-overflow-tooltip> <template #default="scope"> <el-button type="success" @click="edit(scope.row.id)">编辑</el-button> <el-button type="danger" @click="del(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页条 --> <div class="parent"> <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage" @next-click="toPage" @current-change="toPage" /> </div></template><script>import { doGet, doPost } from '../http/httpRequest';import { goBack,messageTip } from '../util/util.js';export default { name : "activityDetail", mounted(){ this.loadActivityDetail(); this.getData(1); }, inject : ["reload"], data(){ return { activityRules : {}, activityDetail : { ownerDO : {}, createByDO : {}, editByDO : {} }, activityRemarkList : [ { createByDO : {}, editByDO : {} } ], pageSize : 0, total : 0, activityRemarkQuery : { noteContent : "" }, activityRemarkRules : { noteContent : [ { required: true, message: '请输入活动备注', trigger: 'blur' }, { min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' } ] } } }, methods : { loadActivityDetail(){ let id = this.$route.params.id; doGet("/api/activity/"+id,{}).then(resp => { if(resp.data.code === 200){ this.activityDetail = resp.data.data; if(!this.activityDetail.ownerDO){ this.activityDetail.ownerDO = {}; } if(!this.activityDetail.createByDO){ this.activityDetail.createByDO = {}; } if(!this.activityDetail.editByDO){ this.activityDetail.editByDO = {}; } this.activityDetail.id = id; } else{ messageTip("网络错误","error"); } }); }, toPage(current){ // 把当前页作为current传递给获取数据方法,就可以实现分页查询了 this.getData(current); }, getData(current){ //获取数据,查询用户列表数据 doGet("/api/acitivity/remark",{ // 当前查询第几页 current : current, activityId : this.$route.params.id }).then(resp => { if(resp.data.code === 200){ this.activityRemarkList = resp.data.data.list; console.log(resp.data.data.list) this.pageSize = resp.data.data.pageSize; this.total = resp.data.data.total; } else{ messageTip("网络错误","error"); } }); }, submit(){ this.$refs.activityRefForm.validate((isValid) => { if(isValid){ doPost("/api/activity/remark",{ activityId : this.activityDetail.id, noteContent : this.activityRemarkQuery.noteContent }).then(resp => { if(resp.data.code === 200){ messageTip("提交成功","success"); this.reload(); } else{ messageTip("网络错误","error"); } }) } }); }, goBack, }}</script><style></style>
<template>
<el-form ref="activityRefForm" :model="activityRemarkQuery" label-width="20%" :rules="activityRemarkRules">
<el-form-item label="ID">
<div class="detail">{{activityDetail.id}} </div>
</el-form-item>
<el-form-item label="负责人">
<div class="detail"> {{activityDetail.ownerDO.name}} </div>
</el-form-item>
<el-form-item label="活动名称">
<div class="detail">{{activityDetail.name}} </div>
</el-form-item>
<el-form-item label="开始时间">
<div class="detail">{{activityDetail.startDate}} </div>
</el-form-item>
<el-form-item label="结束时间">
<div class="detail">{{activityDetail.endDate}} </div>
</el-form-item>
<el-form-item label="活动预算">
<div class="detail">{{activityDetail.cost}} </div>
</el-form-item>
<el-form-item label="活动描述">
<div class="detail">{{activityDetail.description}} </div>
</el-form-item>
<el-form-item label="创建时间">
<div class="detail">{{activityDetail.createTime}} </div>
</el-form-item>
<el-form-item label="创建人">
<div class="detail">{{activityDetail.createByDO.name}} </div>
</el-form-item>
<el-form-item label="编辑时间">
<div class="detail">{{activityDetail.editTime}} </div>
</el-form-item>
<el-form-item label="编辑人">
<div class="detail">{{activityDetail.editByDO.name}} </div>
</el-form-item>
<el-form-item label="填写备注:" prop="noteContent">
<el-input
v-model="activityRemarkQuery.noteContent"
:rows="8"
type="textarea"
placeholder="请输入活动备注"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit()">提交</el-button>
<el-button @click="goBack()">返回</el-button>
</el-form-item>
</el-form>
<hr>
<el-table
:data="activityRemarkList"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="52%" />
<el-table-column property="createByDO.name" label="备注人" width="75%" show-overflow-tooltip />
<el-table-column property="createTime" label="备注时间" show-overflow-tooltip />
<el-table-column property="editByDO.name" label="编辑人" width="75%" show-overflow-tooltip />
<el-table-column property="editTime" label="编辑时间" show-overflow-tooltip />
<el-table-column prop="noteContent" label="备注内容" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip>
<template #default="scope">
<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<div class="parent">
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@prev-click="toPage"
@next-click="toPage"
@current-change="toPage"
/>
</div>
</template>
<script>
import { doGet, doPost } from '../http/httpRequest';
import { goBack,messageTip } from '../util/util.js';
export default {
name : "activityDetail",
mounted(){
this.loadActivityDetail();
this.getData(1);
},
inject : ["reload"],
data(){
return {
activityRules : {},
activityDetail : {
ownerDO : {},
createByDO : {},
editByDO : {}
},
activityRemarkList : [
{
createByDO : {},
editByDO : {}
}
],
pageSize : 0,
total : 0,
activityRemarkQuery : {
noteContent : ""
},
activityRemarkRules : {
noteContent : [
{ required: true, message: '请输入活动备注', trigger: 'blur' },
{ min: 5, max: 255, message: '活动备注长度为5-255字符', trigger: 'blur' }
]
}
}
},
methods : {
loadActivityDetail(){
let id = this.$route.params.id;
doGet("/api/activity/"+id,{}).then(resp => {
if(resp.data.code === 200){
this.activityDetail = resp.data.data;
if(!this.activityDetail.ownerDO){
this.activityDetail.ownerDO = {};
}
if(!this.activityDetail.createByDO){
this.activityDetail.createByDO = {};
}
if(!this.activityDetail.editByDO){
this.activityDetail.editByDO = {};
}
this.activityDetail.id = id;
}
else{
messageTip("网络错误","error");
}
});
},
toPage(current){
// 把当前页作为current传递给获取数据方法,就可以实现分页查询了
this.getData(current);
},
getData(current){
//获取数据,查询用户列表数据
doGet("/api/acitivity/remark",{
// 当前查询第几页
current : current,
activityId : this.$route.params.id
}).then(resp => {
if(resp.data.code === 200){
this.activityRemarkList = resp.data.data.list;
console.log(resp.data.data.list)
this.pageSize = resp.data.data.pageSize;
this.total = resp.data.data.total;
}
else{
messageTip("网络错误","error");
}
});
},
submit(){
this.$refs.activityRefForm.validate((isValid) => {
if(isValid){
doPost("/api/activity/remark",{
activityId : this.activityDetail.id,
noteContent : this.activityRemarkQuery.noteContent
}).then(resp => {
if(resp.data.code === 200){
messageTip("提交成功","success");
this.reload();
}
else{
messageTip("网络错误","error");
}
})
}
});
},
goBack,
}
}
</script>
<style>
</style>