使用cookie完成浏览器动态存储
动态记录.png
描述
1.点击参与项目cell时，在没有任何输入的情况下，下拉框记录最近选择的前5条
2.当选择项目时，会根据此项目，把之前选择的审批人，工作类型一并带出
开发思路
1.使用数组记录下选择的项目，以项目id为统一标识，push项目对象。
2.当选择项目审批人或者工作类型时，首先更新记忆数组this.getHistory()，判断此行的项目是否填写，填了判断此时记忆数组中是否有此项目，有就把项目审批人/工作类型添加到数组中。
3.设置深度监听记忆数组，当数组内对象改变或者数组长度变化时，进行cookie储存记忆。
获取下拉框数据
初始化页面时，this.getHistory()，得到记忆数组
//获取填写记录
getHistory() {
var res = this.$cookies.get('historyList' + localStorage.getItem('id'))
this.historyList = JSON.parse(res) || new Array()
// console.log(this.historyList)
},
cookie只能保存字符串，所以要json转换
//深度监听记忆数组
historyList: {
handler: function (newValue) {
// console.log(newValue)
let string = JSON.stringify(newValue)
this.$cookies.set(
'historyList' + localStorage.getItem('id'),
string,
'2m'
)
},
deep: true,
},
选择审批人：
//选择审批人之后
changeApprove(index, name, arr) {
this.getHistory()
// ApproverName
this.tableData.push()
let id = arr.find((r) => r.ApproverName == name).ApproverID
this.tableData[index].ApproverID = id
//判断是否已选项目
if (
this.tableData[index].ProjectID == '' ||
this.tableData[index].projectName == ''
)
return
//存在 判断缓存中此项目存在
let num = this.historyList.findIndex(
(r) => r.ProjectID == this.tableData[index].ProjectID
)
if (num != -1) {
// this.$set(this.historyList[num], 'ApproverName', name)
// this.$set(this.historyList[num], 'ApproverID', id)
this.historyList[num].ApproverName = name
this.historyList[num].ApproverID = id
}
},
选择工作类型：
//选择工作类型之后
changeWorType(index, id) {
this.getHistory()
this.tableData.push()
let name = this.workTypeSelect.find((r) => r.ObjectID == id).Name
this.tableData[index].WorkTypeName = name
// console.log((this.tableData[index].WorkTypeName = name))
//判断是否已选项目
if (
this.tableData[index].ProjectID == '' ||
this.tableData[index].projectName == ''
)
return
//存在 判断缓存中此项目存在
let num = this.historyList.findIndex(
(r) => r.ProjectID == this.tableData[index].ProjectID
)
if (num != -1) {
this.historyList[num].WorkTypeName = name
this.historyList[num].WorkTypeID = id
}
},
选择项目 此处有验证项目是否合法
//选择项目之后
async handleSelect(item, index) {
this.getHistory()
// console.log('2', this.historyList)
this.tableData.push()
this.tableData[index].ProjectID = item.ObjectID
// await this.getApproveSelect(index, item.ObjectID)
//浏览器添加所选的项目
if (item.value == 'null' || item.value == undefined) return
//判断缓存中项目是否已存在 不存在在缓存
if (this.historyList.length == 0) {
this.historyList.unshift({
ProjectName: item.value,
ProjectID: item.ObjectID,
})
}
if (this.historyList.length > 0) {
// let arr1 = this.historyList.filter((r) => r.ProjectID == item.ProjectID)
let arr1 = this.historyList.map((r) => r.ProjectID)
let num = arr1.findIndex((r) => r == item.ObjectID)
// console.log(arr1, num)
if (num == -1) {
this.historyList.unshift({
ProjectName: item.value,
ProjectID: item.ObjectID,
})
}
}
let arr = this.historyList.filter((r) => r.ProjectID == item.ObjectID)
//1.判断缓存中此项目是否有项目审批人2.有判断是否合法 3.不合法或者不存在 不进行赋值
if (arr.length == 0) return
if (arr[0].ApproverID == undefined) return
if (arr[0].ApproverID != undefined) {
let { data } = await this.$api.verify({
projectID: item.ObjectID,
approverID: arr[0].ApproverID,
projectName: item.value,
})
if (data.status == 1) {
if (data.data) {
this.tableData.push()
//console.log('arr', arr, arr[0].ApproverID, arr[0].ApproverName)
this.tableData[index].ApproverID = arr[0].ApproverID
this.tableData[index].ApproverName = arr[0].ApproverName
if (arr[0].WorkTypeID != undefined) {
//判断类型是否合法
let type = this.workTypeSelect.filter(
(r) => r.ObjectID == arr[0].WorkTypeID
)
if (type.length > 0) {
this.tableData.push()
if (this.tableData[index].WorkTypeName != '') return
this.tableData[index].WorkTypeID = arr[0].WorkTypeID
this.tableData[index].WorkTypeName = arr[0].WorkTypeName
}
}
}
}
}
},