mutation简化

tag去除圆角
默认动画改为`烟花`
master
toesbieya 6 years ago
parent a8fcd3c3ab
commit 1d0fd1032b
  1. 1
      vue/src/assets/styles/tagsView.scss
  2. 2
      vue/src/bizComponents/CategoryTree/index.vue
  3. 2
      vue/src/layout/components/Header.vue
  4. 2
      vue/src/layout/components/Sidebar/index.vue
  5. 6
      vue/src/layout/components/TagsView/index.vue
  6. 6
      vue/src/layout/components/TagsView/mixin/decideRouterTransition.js
  7. 22
      vue/src/store/modules/app.js
  8. 6
      vue/src/store/modules/dataCache.js
  9. 18
      vue/src/store/modules/iframe.js
  10. 12
      vue/src/store/modules/resource.js
  11. 22
      vue/src/store/modules/socket.js
  12. 63
      vue/src/store/modules/tagsView.js
  13. 12
      vue/src/store/modules/user.js
  14. 6
      vue/src/utils/index.js
  15. 2
      vue/src/views/app/login.vue
  16. 2
      vue/src/views/app/register.vue
  17. 2
      vue/src/views/purchase/order/components/CategorySelector.vue
  18. 2
      vue/src/views/system/category/components/List.vue
  19. 2
      vue/src/views/userCenter/components/Avatar.vue

@ -20,7 +20,6 @@
padding: 0 12px; padding: 0 12px;
font-size: 12px; font-size: 12px;
margin: 4px; margin: 4px;
border-radius: 3px;
user-select: none; user-select: none;
&:first-of-type { &:first-of-type {

@ -24,7 +24,7 @@
}, },
mounted() { mounted() {
getAllCategories() getAllCategories()
.then(data => this.$store.commit('dataCache/SET_CATEGORIES', data)) .then(data => this.$store.commit('dataCache/categories', data))
.finally(() => this.loading = false) .finally(() => this.loading = false)
} }
} }

@ -39,7 +39,7 @@
}, },
watch: { watch: {
hideHeader(v) { hideHeader(v) {
this.$store.commit('app/setHasHeader', !v) this.$store.commit('app/hasHeader', !v)
v ? this.addEvent() : this.removeEvent() v ? this.addEvent() : this.removeEvent()
} }
}, },

@ -73,7 +73,7 @@
}, },
select(index) { select(index) {
if (this.$route.path === index) { if (this.$route.path === index) {
this.$store.commit('tagsView/DEL_CACHED_VIEW', this.$route) this.$store.commit('tagsView/delCachedView', this.$route)
this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath})) this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
} }
else this.$router.push(index) else this.$router.push(index)

@ -96,7 +96,7 @@
initTags() { initTags() {
this.affixTags = this.filterAffixTags(this.routes) this.affixTags = this.filterAffixTags(this.routes)
for (let tag of this.affixTags) { for (let tag of this.affixTags) {
this.$store.commit('tagsView/ADD_VISITED_VIEW', tag) this.$store.commit('tagsView/addVisitedView', tag)
} }
}, },
@ -114,7 +114,7 @@
this.$refs.scrollPane.moveToTarget(tag) this.$refs.scrollPane.moveToTarget(tag)
// //
if (tag.to.fullPath !== this.$route.fullPath) { if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.commit('tagsView/UPDATE_VISITED_VIEW', this.$route) this.$store.commit('tagsView/updateVisitedViews', this.$route)
} }
}) })
}, },
@ -124,7 +124,7 @@
* 刷新所选关闭所选关闭其他关闭所有 * 刷新所选关闭所选关闭其他关闭所有
* */ * */
refreshSelectedTag(view) { refreshSelectedTag(view) {
this.$store.commit('tagsView/DEL_CACHED_VIEW', view) this.$store.commit('tagsView/delCachedView', view)
this.$nextTick(() => this.$router.replace({path: '/redirect' + view.fullPath})) this.$nextTick(() => this.$router.replace({path: '/redirect' + view.fullPath}))
}, },
closeSelectedTag(view) { closeSelectedTag(view) {

@ -5,12 +5,12 @@ export default {
//根据访问的tab页的左右顺序来确定路由动画 //根据访问的tab页的左右顺序来确定路由动画
decideRouteTransition(to, from) { decideRouteTransition(to, from) {
let fromIndex = this.visitedViews.findIndex(i => i.path === from.path) let fromIndex = this.visitedViews.findIndex(i => i.path === from.path)
if (fromIndex < 0) return this.$store.commit('tagsView/SET_TRANSITION_NAME', rightSideRouteTransition) if (fromIndex < 0) return this.$store.commit('tagsView/transitionName', rightSideRouteTransition)
let toIndex = this.visitedViews.findIndex(i => i.path === to.path) let toIndex = this.visitedViews.findIndex(i => i.path === to.path)
if (toIndex < 0) return this.$store.commit('tagsView/SET_TRANSITION_NAME', rightSideRouteTransition) if (toIndex < 0) return this.$store.commit('tagsView/transitionName', rightSideRouteTransition)
this.$store.commit('tagsView/SET_TRANSITION_NAME', toIndex > fromIndex ? rightSideRouteTransition : leftSideRouteTransition) this.$store.commit('tagsView/transitionName', toIndex > fromIndex ? rightSideRouteTransition : leftSideRouteTransition)
}, },
} }
} }

@ -1,11 +1,12 @@
import {getLocalPersonalSettings} from "@/utils/localStorage" import {getLocalPersonalSettings} from "@/utils/localStorage"
import {createMutations} from "@/utils"
const localSettings = getLocalPersonalSettings() const localSettings = getLocalPersonalSettings()
const state = { const state = {
device: 'pc', device: 'pc',
//登陆页背景动画 //登陆页背景动画
loginPageBackgroundAnimation: 'reflectRain', loginPageBackgroundAnimation: 'firework',
//注册页背景动画 //注册页背景动画
registerPageBackgroundAnimation: 'firework', registerPageBackgroundAnimation: 'firework',
//路由页面滚动高度 //路由页面滚动高度
@ -14,24 +15,7 @@ const state = {
hasHeader: !!!localSettings.headerAutoHidden, hasHeader: !!!localSettings.headerAutoHidden,
} }
const mutations = { const mutations = createMutations(state)
setDevice: (state, device) => {
state.device = device
},
setLoginPageBackgroundAnimation: (state, value) => {
state.loginPageBackgroundAnimation = value
},
setRegisterPageBackgroundAnimation: (state, value) => {
state.registerPageBackgroundAnimation = value
},
setScrollTop(state, scrollTop) {
state.scrollTop = scrollTop
},
setHasHeader(state, hasHeader) {
state.hasHeader = hasHeader
}
}
export default { export default {
namespaced: true, namespaced: true,

@ -12,11 +12,11 @@ const state = {
} }
const mutations = { const mutations = {
SET_CATEGORIES(state, categories) { categories(state, categories) {
state.categories = categories || [] state.categories = categories || []
state.categoryTree = createTree(state.categories) state.categoryTree = createTree(state.categories)
}, },
SET_REGION_TREE(state, regionTree) { regionTree(state, regionTree) {
state.regionTree = regionTree || [] state.regionTree = regionTree || []
}, },
} }
@ -25,7 +25,7 @@ const actions = {
initRegion({commit}) { initRegion({commit}) {
return fetch(regionDataUrl) return fetch(regionDataUrl)
.then(r => r.json()) .then(r => r.json())
.then(r => commit('SET_REGION_TREE', r)) .then(r => commit('regionTree', r))
} }
} }

@ -7,12 +7,12 @@ const state = {
} }
const mutations = { const mutations = {
...createMutations(state, false), ...createMutations(state),
ADD_IFRAME(state, src) { addIframe(state, src) {
if (state.list.some(i => i === src)) return if (state.list.some(i => i === src)) return
state.list.push(src) state.list.push(src)
}, },
DEL_IFRAME(state, src) { delIframe(state, src) {
if (!src) return if (!src) return
let index = state.list.findIndex(i => i === src) let index = state.list.findIndex(i => i === src)
index > -1 && state.list.splice(index, 1) index > -1 && state.list.splice(index, 1)
@ -22,14 +22,14 @@ const mutations = {
const actions = { const actions = {
open({commit}, src) { open({commit}, src) {
if (!src) return if (!src) return
commit('SET_SHOW', true) commit('show', true)
commit('SET_CURRENT', src) commit('current', src)
commit('ADD_IFRAME', src) commit('addIframe', src)
}, },
close({commit}, src) { close({commit}, src) {
commit('SET_SHOW', false) commit('show', false)
commit('SET_CURRENT', '') commit('current', '')
commit('DEL_IFRAME', src) commit('delIframe', src)
} }
} }

@ -22,7 +22,7 @@ const state = {
} }
const mutations = { const mutations = {
SET_ROUTES: (state, routes) => { routes(state, routes) {
let tempConstantRoutes = JSON.parse(JSON.stringify(finalConstantRoutes)) let tempConstantRoutes = JSON.parse(JSON.stringify(finalConstantRoutes))
let tempAuthorityRoutes = JSON.parse(JSON.stringify(routes)) let tempAuthorityRoutes = JSON.parse(JSON.stringify(routes))
clean(tempConstantRoutes) clean(tempConstantRoutes)
@ -30,12 +30,12 @@ const mutations = {
state.routes = finalConstantRoutes.concat(routes) state.routes = finalConstantRoutes.concat(routes)
state.sidebarMenus = tempConstantRoutes.concat(tempAuthorityRoutes) state.sidebarMenus = tempConstantRoutes.concat(tempAuthorityRoutes)
}, },
SET_DATA: (state, data) => { data(state, data) {
state.data = data || [] state.data = data || []
state.tree = createTree(data) state.tree = createTree(data)
setLocalResource(data) setLocalResource(data)
}, },
SET_INIT_ROUTES_SIGN: (state, sign) => { hasInitRoutes(state, sign) {
state.hasInitRoutes = sign state.hasInitRoutes = sign
} }
} }
@ -51,8 +51,8 @@ const actions = {
const {resources, admin} = user const {resources, admin} = user
return new Promise(resolve => { return new Promise(resolve => {
let accessedRoutes = getAuthorizedRoutes({resources, admin}) let accessedRoutes = getAuthorizedRoutes({resources, admin})
commit('SET_ROUTES', accessedRoutes) commit('routes', accessedRoutes)
commit('SET_INIT_ROUTES_SIGN', true) commit('hasInitRoutes', true)
resolve() resolve()
}) })
}, },
@ -61,7 +61,7 @@ const actions = {
//if (state.data.length > 0) return resolve(); //if (state.data.length > 0) return resolve();
getResources() getResources()
.then(data => { .then(data => {
commit('SET_DATA', data) commit('data', data)
resolve() resolve()
}) })
}) })

@ -1,20 +1,14 @@
import {MessageBox} from "element-ui" import {MessageBox} from "element-ui"
import {socketUrl} from '@/config' import {socketUrl} from '@/config'
import SocketIO from 'socket.io-client' import SocketIO from 'socket.io-client'
import {createMutations} from "@/utils"
const state = { const state = {
socket: null, socket: null,
online: true online: true
} }
const mutations = { const mutations = createMutations(state)
SET_SOCKET(state, socket) {
state.socket = socket
},
SET_ONLINE(state, online) {
state.online = online
}
}
const actions = { const actions = {
init({state, commit, dispatch, rootState}, user) { init({state, commit, dispatch, rootState}, user) {
@ -38,13 +32,13 @@ const actions = {
}) })
}) })
commit('SET_SOCKET', socket) commit('socket', socket)
}, },
close({state, commit}) { close({state, commit}) {
return new Promise(resolve => { return new Promise(resolve => {
if (!state.socket) return resolve() if (!state.socket) return resolve()
state.socket.close() state.socket.close()
commit('SET_SOCKET', null) commit('socket', null)
resolve() resolve()
}) })
} }
@ -59,12 +53,12 @@ function initSocket({id, session_id}) {
function defaultEventBind(socket, {state, commit, dispatch}) { function defaultEventBind(socket, {state, commit, dispatch}) {
socket.on('connect', () => { socket.on('connect', () => {
commit('SET_ONLINE', true) commit('online', true)
console.log('socket连接成功') console.log('socket连接成功')
}) })
socket.on('disconnect', (reason) => { socket.on('disconnect', (reason) => {
commit('SET_ONLINE', false) commit('online', false)
if (reason === 'io server disconnect') { if (reason === 'io server disconnect') {
return console.log('服务端关闭了socket连接') return console.log('服务端关闭了socket连接')
} }
@ -72,12 +66,12 @@ function defaultEventBind(socket, {state, commit, dispatch}) {
}) })
socket.on('reconnecting', (attemptNumber) => { socket.on('reconnecting', (attemptNumber) => {
commit('SET_ONLINE', false) commit('online', false)
console.log(`socket第${attemptNumber}次重连中...`) console.log(`socket第${attemptNumber}次重连中...`)
}) })
socket.on('reconnect', (attemptNumber) => { socket.on('reconnect', (attemptNumber) => {
commit('SET_ONLINE', true) commit('online', true)
console.log(`socket第${attemptNumber}次重连成功`) console.log(`socket第${attemptNumber}次重连成功`)
}) })

@ -1,4 +1,5 @@
import {rightSideRouteTransition} from '@/config' import {rightSideRouteTransition} from '@/config'
import {createMutations} from "@/utils"
const state = { const state = {
visitedViews: [], visitedViews: [],
@ -7,78 +8,62 @@ const state = {
} }
const mutations = { const mutations = {
SET_VISITED_VIEWS(state, views) { ...createMutations(state),
state.visitedViews = views
},
SET_CACHED_VIEWS(state, views) {
state.cachedViews = views
},
ADD_VISITED_VIEW: (state, view) => { addVisitedView(state, view) {
if (state.visitedViews.some(v => v.path === view.path)) return if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push({...view, title: view.meta.title || 'no-name'}) state.visitedViews.push({...view, title: view.meta.title || 'no-name'})
}, },
ADD_CACHED_VIEW: (state, view) => { addCachedView(state, view) {
if (state.cachedViews.includes(view.name)) return if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache && !view.meta.iframe) { if (!view.meta.noCache && !view.meta.iframe) {
state.cachedViews.push(view.name) state.cachedViews.push(view.name)
} }
}, },
DEL_VISITED_VIEW: (state, view) => { delVisitedView(state, view) {
const index = state.visitedViews.findIndex(i => i.path === view.path) const index = state.visitedViews.findIndex(i => i.path === view.path)
index > -1 && state.visitedViews.splice(index, 1) index > -1 && state.visitedViews.splice(index, 1)
}, },
DEL_CACHED_VIEW: (state, view) => { delCachedView(state, view) {
const index = state.cachedViews.indexOf(view.name) const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1) index > -1 && state.cachedViews.splice(index, 1)
}, },
DEL_OTHERS_VISITED_VIEWS: (state, view) => { updateVisitedViews(state, view) {
state.visitedViews = state.visitedViews.filter(v => {
return v.meta.affix || v.path === view.path
})
},
DEL_OTHERS_CACHED_VIEWS: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
if (index > -1) {
state.cachedViews = state.cachedViews.slice(index, index + 1)
}
else state.cachedViews = []
},
UPDATE_VISITED_VIEW: (state, view) => {
for (let v of state.visitedViews) { for (let v of state.visitedViews) {
if (v.path === view.path) { if (v.path === view.path) {
v = Object.assign(v, view) v = Object.assign(v, view)
break break
} }
} }
},
SET_TRANSITION_NAME: (state, name) => {
state.transitionName = name
} }
} }
const actions = { const actions = {
addView({commit, dispatch}, view) { addView({commit}, view) {
commit('ADD_VISITED_VIEW', view) commit('addVisitedView', view)
commit('ADD_CACHED_VIEW', view) commit('addCachedView', view)
}, },
delView({commit}, view) { delView({commit}, view) {
commit('DEL_VISITED_VIEW', view) commit('delVisitedView', view)
commit('DEL_CACHED_VIEW', view) commit('delCachedView', view)
commit('iframe/DEL_IFRAME', view.meta ? view.meta.iframe : null, {root: true}) commit('iframe/delIframe', view.meta ? view.meta.iframe : null, {root: true})
}, },
delOthersViews({commit, state}, view) { delOthersViews({state, commit}, view) {
commit('DEL_OTHERS_VISITED_VIEWS', view) const visitedViews = state.visitedViews.filter(v => v.meta.affix || v.path === view.path)
commit('DEL_OTHERS_CACHED_VIEWS', view) let cachedViews = []
const index = state.cachedViews.indexOf(view.name)
if (index > -1) {
cachedViews = state.cachedViews.slice(index, index + 1)
}
commit('visitedViews', visitedViews)
commit('cachedViews', cachedViews)
}, },
delAllViews({state, commit}) { delAllViews({state, commit}) {
commit('SET_VISITED_VIEWS', state.visitedViews.filter(tag => tag.meta.affix)) commit('visitedViews', state.visitedViews.filter(tag => tag.meta.affix))
commit('SET_CACHED_VIEWS', []) commit('cachedViews', [])
} }
} }

@ -21,7 +21,7 @@ const state = {
session_id: !isEmpty(user.session_id) ? user.session_id : '' session_id: !isEmpty(user.session_id) ? user.session_id : ''
} }
const mutations = createMutations(state) const mutations = createMutations(state, true)
const actions = { const actions = {
login({commit, dispatch}, userInfo) { login({commit, dispatch}, userInfo) {
@ -30,7 +30,7 @@ const actions = {
login({username: username.trim(), password}) login({username: username.trim(), password})
.then(user => { .then(user => {
user.avatar = autoCompleteUrl(user.avatar) user.avatar = autoCompleteUrl(user.avatar)
commit('SET_$ALL', user) commit('$all', user)
setUser(user) setUser(user)
return dispatch('socket/init', user, {root: true}) return dispatch('socket/init', user, {root: true})
}) })
@ -42,18 +42,18 @@ const actions = {
logout({commit, state, dispatch}) { logout({commit, state, dispatch}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (state.prepare_logout) return Promise.reject() if (state.prepare_logout) return Promise.reject()
commit('SET_PREPARE_LOGOUT', 'yes') commit('prepare_logout', 'yes')
logout(state.token) logout(state.token)
.then(() => dispatch('socket/close', null, {root: true})) .then(() => dispatch('socket/close', null, {root: true}))
.then(() => { .then(() => {
dispatch('removeUser') dispatch('removeUser')
dispatch('tagsView/delAllViews', null, {root: true}) dispatch('tagsView/delAllViews', null, {root: true})
commit('resource/SET_INIT_ROUTES_SIGN', false, {root: true}) commit('resource/hasInitRoutes', false, {root: true})
resolve() resolve()
window.location.reload() window.location.reload()
}) })
.catch(error => reject(error)) .catch(error => reject(error))
.finally(() => commit('SET_PREPARE_LOGOUT', '')) .finally(() => commit('prepare_logout', ''))
}) })
}, },
@ -62,7 +62,7 @@ const actions = {
}, },
removeUser({commit}) { removeUser({commit}) {
commit('SET_$ALL', {resources: {}}) commit('$all', {resources: {}})
setUser() setUser()
} }
} }

@ -151,13 +151,13 @@ export function waitUntilSuccess(success, callback, interval = 1000) {
} }
//store中根据state批量生成对应的mutation //store中根据state批量生成对应的mutation
export function createMutations(state, all = true, keyFunction = key => 'SET_' + key.toUpperCase()) { export function createMutations(state, all = false) {
const arr = Object.keys(state) const arr = Object.keys(state)
const obj = {} const obj = {}
arr.forEach(key => { arr.forEach(key => {
obj[keyFunction(key)] = (s, v) => s[key] = v obj[key] = (s, v) => s[key] = v
}) })
if (all) obj['SET_$ALL'] = (s, v) => arr.forEach(key => s[key] = v ? v[key] || '' : '') if (all) obj['$all'] = (s, v) => arr.forEach(key => s[key] = v ? v[key] || '' : '')
return obj return obj
} }

@ -129,7 +129,7 @@
}, },
setAnimation(value) { setAnimation(value) {
this.clearAnimation() this.clearAnimation()
this.$store.commit('app/setLoginPageBackgroundAnimation', value) this.$store.commit('app/loginPageBackgroundAnimation', value)
if (isEmpty(value)) return if (isEmpty(value)) return
import(`@/plugin/canvasAnimation/${value}`) import(`@/plugin/canvasAnimation/${value}`)
.then(_ => this.animation = new _.default(document.getElementById('login-background'))) .then(_ => this.animation = new _.default(document.getElementById('login-background')))

@ -125,7 +125,7 @@
}, },
setAnimation(value) { setAnimation(value) {
this.clearAnimation() this.clearAnimation()
this.$store.commit('app/setRegisterPageBackgroundAnimation', value) this.$store.commit('app/registerPageBackgroundAnimation', value)
if (isEmpty(value)) return if (isEmpty(value)) return
import(`@/plugin/canvasAnimation/${value}`) import(`@/plugin/canvasAnimation/${value}`)
.then(_ => this.animation = new _.default(document.getElementById('login-background'))) .then(_ => this.animation = new _.default(document.getElementById('login-background')))

@ -31,7 +31,7 @@
init() { init() {
if (this.selectableCategories.length > 0) return if (this.selectableCategories.length > 0) return
getAllCategories() getAllCategories()
.then(data => this.$store.commit('dataCache/SET_CATEGORIES', data)) .then(data => this.$store.commit('dataCache/categories', data))
}, },
change(v) { change(v) {
if (!v || this.selected.length <= 0) return if (!v || this.selected.length <= 0) return

@ -47,7 +47,7 @@
this.currentCategory = null this.currentCategory = null
this.contextmenu.show = false this.contextmenu.show = false
getAllCategories() getAllCategories()
.then(data => this.$store.commit('dataCache/SET_CATEGORIES', data)) .then(data => this.$store.commit('dataCache/categories', data))
.finally(() => this.loading = false) .finally(() => this.loading = false)
}, },
add() { add() {

@ -82,7 +82,7 @@
upload(new Blob([data]), this.name) upload(new Blob([data]), this.name)
.then(key => updateAvatar(key)) .then(key => updateAvatar(key))
.then(({key, msg}) => { .then(({key, msg}) => {
this.$store.commit('user/SET_AVATAR', autoCompleteUrl(key)) this.$store.commit('user/avatar', autoCompleteUrl(key))
this.$store.dispatch('user/refresh') this.$store.dispatch('user/refresh')
elSuccess(msg) elSuccess(msg)
}) })

Loading…
Cancel
Save