单个组件中写法
<template>
<section id="search">
<v-search :searchSettings="searchSettings" @search="carInfoSearch" @reset="resetSearch"></v-search>
</section>
</template>
<script>
import vSearch from "@/components/search/vSearch";
import { searchSettings } from "./data";
import { insertArray } from '@/config/search-history'
import { SEARCH_MAX_LEN } from '@/config/page-config'
import storage from 'good-storage'
const STATUS_KEY = '_status_' //车辆状态
export default {
name: "carStatusSearch",
data() {
return {
searchSettings: searchSettings,
searchData: '',
statusHistory: storage.get(STATUS_KEY, []) // 获取搜索记录 默认值为空
};
},
mounted() {
this.$nextTick(() => {
this.searchSettings[0].data = this.statusHistory
})
},
methods: {
carInfoSearch(searchObj) {
console.log(searchObj,'======提交的数据=======')
let searchKey={
"value":searchObj.keyWords
}
if(searchObj.keyWords){
this.saveHistory(searchKey)
}
this.loading = true;
if (searchObj) {
searchObj.city ? (searchObj.cityId = searchObj.city[1]) : (searchObj.cityId = null);
delete searchObj.city;
this.$emit('handleSearchData', searchObj)
}
},
// 存储并返回新的搜索数据
saveHistory(query) {
let searches = storage.get(STATUS_KEY, []) //默认为空数组
// 处理数据
insertArray(searches, query, item => { return item.value === query.value }, SEARCH_MAX_LEN)
storage.set(STATUS_KEY, searches)
this.searchSettings[0].data = searches
},
resetSearch() {
this.loading = true;
this.$emit('handleReset')
}
},
components: {
vSearch
}
};
</script>
<style lang="scss">
</style>
引入
// arr 存储的数组 val 存的值 compare 比较函数maxLen 最大值
export function insertArray(arr, val, compare, maxLen) {
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// 先查找这个数组中书否有这个值
const index = arr.findIndex(compare)
// 如果是在第一位 什么都不做
if (index === 0) {
return
}
// 如果这个值不是第一位 也就是有这个值 删除它
if (index > 0) {
arr.splice(index, 1)
}
console.log(index, "========位置==========")
// 然后把这个值添加到第一位
arr.unshift(val)
if (maxLen && arr.length > maxLen) {
// 删除数组中的最后一个元素
arr.pop()
}
}
vuex写法
import storage from 'good-storage'
const SEARCH_MAX_LEN = 5
const STATUS_KEY = '_status_' //车辆状态
const ALARM_KEY = '_alarm_' //车辆报警
const OFFILINE_RECORD_KEY = '_offiline_record_' //离线上线记录
const START_RECORD_KEY = '_start_record_' //点火熄火记录
const ACTION_RECORD_KEY = '_action_record_' //控制日志
const INFO_KEY = '_info_' //车辆信息
const MODEL_KEY = '_model_' //车型管理
const state = {
statusHistory: storage.get(STATUS_KEY, []),
alarmHistory: storage.get(ALARM_KEY, []),
offilineRecordHistory: storage.get(OFFILINE_RECORD_KEY, []),
startHistory: storage.get(START_RECORD_KEY, []),
actionHistory: storage.get(ACTION_RECORD_KEY, []),
infoHistory: storage.get(INFO_KEY, []),
modelHistory: storage.get(MODEL_KEY, [])
}
const getters = {
statusHistory(state) {
return state.statusHistory
},
alarmHistory(state) {
return state.alarmHistory
},
offilineRecordHistory(state) {
return state.offilineRecordHistory
},
startHistory(state) {
return state.startHistory
},
actionHistory(state) {
return state.actionHistory
},
infoHistory(state) {
return state.infoHistory
},
modelHistory(state) {
return state.modelHistory
},
}
const mutations = {
statusHistory(state, history) {
state.statusHistory = history
},
alarmHistory(state, history) {
state.alarmHistory = history
},
offilineRecordHistory(state, history) {
state.offilineRecordHistory = history
},
startHistory(state, history) {
state.startHistory = history
},
actionHistory(state, history) {
state.actionHistory = history
},
infoHistory(state, history) {
state.infoHistory = history
},
modelHistory(state, history) {
state.modelHistory = history
},
}
const actions = {
statusSaveHistory({ commit }, query) {
commit('statusHistory', statusSearch(query))
},
alarmSaveHistory({ commit }, query) {
commit('alarmHistory', alarmSaveSearch(query))
},
offilineRecordSaveHistory({ commit }, query) {
commit('offilineRecordHistory', saveSearch(query))
},
startSaveHistory({ commit }, query) {
commit('startHistory', startSearch(query))
},
actionSaveHistory({ commit }, query) {
commit('actionHistory', saveSearch(query))
},
infoSaveHistory({ commit }, query) {
commit('infoHistory', saveSearch(query))
},
modelSaveHistory({ commit }, query) {
commit('modelHistory', saveSearch(query))
}
}
function statusSearch(query) {
let searches = storage.get(STATUS_KEY, [])
insertArray(searches, query, (item) => {
return item.value === query.value
}, SEARCH_MAX_LEN)
storage.set(STATUS_KEY, searches)
return searches
}
function alarmSaveSearch(query) {
let searches = storage.get(ALARM_KEY, [])
insertArray(searches, query, (item) => {
return item.value === query.value
}, SEARCH_MAX_LEN)
storage.set(ALARM_KEY, searches)
return searches
}
function startSearch(query) {
let searches = storage.get(START_RECORD_KEY, [])
insertArray(searches, query, (item) => {
return item.value === query.value
}, SEARCH_MAX_LEN)
storage.set(START_RECORD_KEY, searches)
return searches
}
// arr 存储的数组 val 存的值 compare 比较函数maxLen 最大值
function insertArray(arr, val, compare, maxLen) {
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
// 先查找这个数组中书否有这个值
const index = arr.findIndex(compare)
// 如果是在第一位 什么都不做
if (index === 0) {
return
}
// 如果这个值不是第一位 也就是有这个值 删除它
if (index > 0) {
arr.splice(index, 1)
}
console.log(index, "========位置==========")
// 然后把这个值添加到第一位
arr.unshift(val)
if (maxLen && arr.length > maxLen) {
// 删除数组中的最后一个元素
arr.pop()
}
}
export default {
state,
getters,
mutations,
actions
}
网友评论