带时间线的历史记录

历史记录"/>

带时间线的历史记录

<div style="border: 1px solid #CFDBFB;border-radius: 4px;width:100%;padding:10px;margin-top:10px;"><span v-if="pInfo.PlanList&&pInfo.PlanList.length == 0" style="font-size: 12px;color: #666;">暂无数据</span><el-timeline :reverse="reverse" ><el-timeline-item v-for="(activity, index) in pInfo.PlanList" @mouseenter.native="enterFun(activity)" @mouseleave.native ="leaveFun(activity)":key="index"><div style="display: flex;justify-content: space-between"><div style="display: inline-block;height: 36px;line-height: 36px;"><span>药师：{{activity.Name}}</span>&nbsp;&nbsp;<span style="color:#999999;">{{activity.Date}}</span>&nbsp;&nbsp;<span style="color: #2B60F8;cursor: pointer;" @click="editPlanList(activity)" v-if="activity.isEditShow"><i class="iconfont iconxiugai" style="color:#2B60F8;"></i>编辑</span></div><div style="display: inline-block;" v-if='activity.isEdit'><el-buttonstyle="width: 60px;border: 1px solid #C0CBE9;color: #666;height: 28px;border-radius: 4px;margin-bottom:5px;"@click="cancel(activity)" size="mini">取消</el-button><el-buttonstyle="width: 60px;border: 1px solid #C0CBE9;color: #fff;height: 28px;border-radius: 4px;margin-bottom:5px;background: #2B60F8;"@click="SavePlanList(activity)" size="mini">保存</el-button></div></div><div><span v-if='!activity.isEdit' style="background: #F0F5FF;border-radius: 4px;display: inline-block;height: 36px;width: 100%;line-height: 36px;padding: 0 15px;">{{activity.Detail}}</span><el-input v-else v-model="activity.Detail" placeholder="请输入内容" @input="changeDetail(activity)"style="height: 36px;width: 100%;"></el-input></div></el-timeline-item></el-timeline></div>

1，每条记录有编辑，保存，取消的按钮；编辑的按钮，是当这条记录鼠标进入的时候才显示，移出的时候隐藏；用到的是这两个，因为在vue里，用了修饰符.native，要不然不起作用
@mouseenter.native=“enterFun(activity)”
@mouseleave.native =“leaveFun(activity)”
2，初始的时候从数据里set两个值

this.pInfo.PlanList.forEach(element => {this.$set(element,'isEdit',false)this.$set(element,'isEditShow',false)});

3，鼠标移入，移出的时候

			// 鼠标移入enterFun(activity){console.log('鼠标移入',activity);activity.isEditShow=true},// 鼠标移出leaveFun(activity){console.log('鼠标移出',activity);activity.isEditShow=false},

4，编辑的时候

//编辑单条内容editPlanList(row){  row.isEdit = true;this.rowCopy = row},

5，取消的时候，input框改变的时候

		changeDetail(activity){console.log(111,activity)this.rowCopy = activity;},// 取消cancel(activity){activity.isEdit = false;activity.Detail = '';},