HC_YFZX
/
vue-vben-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

margis里面vuex的部分换成pinia

data_maintenance
滕嵩 2024-01-25 11:00:46 +08:00
parent 99cf5cda1a
commit e7dddbe1f5
4 changed files with 158 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/mars/common/store/test.ts
View File

@ -3,17 +3,26 @@
* @copyright 火星科技 mars3d.cn * @copyright 火星科技 mars3d.cn
* @author 火星渣渣灰 2022-02-19 * @author 火星渣渣灰 2022-02-19
*/ */
import { Store, createStore } from "vuex" /*
* @Author: 滕嵩
* @Date: 2024-01-24 14:09:37
* @LastEditors: 滕嵩
* @LastEditTime: 2024-01-25 10:53:31
* @FilePath: \vue-vben-admin\src\mars\common\store\test.ts
* @Description:
*/
import { defineStore } from "pinia"
import { InjectionKey } from "vue" import { InjectionKey } from "vue"
export interface Test { export interface Test {
count?: number count?: number
} }
export const key: InjectionKey<Store<Test>> = Symbol("test") export const key: InjectionKey<Test> = Symbol("test")
export const store = createStore<Test>({ export const store = defineStore({
state: { id: "marsTest",
count: 0 state: (): Test => ({
} count: 0,
}),
}) })

151
src/mars/common/store/widget.ts
View File

@ -3,8 +3,16 @@
* @copyright 火星科技 mars3d.cn * @copyright 火星科技 mars3d.cn
* @author 火星渣渣灰 2022-02-19 * @author 火星渣渣灰 2022-02-19
*/ */
import { Store, StoreOptions, createStore, useStore } from "vuex" /*
import { InjectionKey, computed, nextTick, onUnmounted, inject } from "vue" * @Author: 滕嵩
* @Date: 2024-01-24 15:39:38
* @LastEditors: 滕嵩
* @LastEditTime: 2024-01-25 10:58:14
* @FilePath: \vue-vben-admin\src\mars\common\store\widget.ts
* @Description:
*/
import { defineStore } from "pinia"
import { nextTick, onUnmounted, inject } from "vue"
import { v4 as uuidV4 } from "uuid" import { v4 as uuidV4 } from "uuid"
// 为 store state 声明类型 // 为 store state 声明类型
@ -33,69 +41,28 @@ export interface WidgetState {
defaultOption?: DefaultOption // 支持配置默认参数 defaultOption?: DefaultOption // 支持配置默认参数
} }
export let key: InjectionKey<Store<WidgetState>> = Symbol("widget") export const widgetStateStore = defineStore({
id:"WidgetState",
/** state: ():WidgetState => ({
* 初始化状态
* @param {StoreOptions<WidgetState>} options
* @return {Store<WidgetState>} 公共状态
*/
export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetState> => {
key = Symbol("widget")
if (typeof options.state === "function") {
options.state = (options.state() || {}) as WidgetState
}
const defaultOption = {
autoDisable: true,
disableOther: false,
...options.state.defaultOption
}
const openAtStart = options.state?.openAtStart
if (!options) {
throw new Error("injectState 参数不能为空")
} else {
const widgets = options.state?.widgets.map((item) => {
return {
visible: openAtStart?.includes(item.name),
...defaultOption,
...item,
meta: {
...defaultOption.meta,
...item.meta
},
key: uuidV4()
}
})
options.state!.widgets = widgets!
}
return createStore<WidgetState>({
state: {
widgets:[], widgets:[],
openAtStart:[], openAtStart:[],
...options.state, defaultOption:{
defaultOption autoDisable: true,
}, disableOther: false,
getters: { group:'',
...options.getters meta:''
},
mutations: {
addAlive(state, value: string) {
if (!state.openAtStart.includes(value)) {
state.openAtStart.push(value)
} }
}, }),
...options.mutations getters:{
}, },
actions:{ actions:{
activate({ commit, state, dispatch }, widget: any) { activate(widget: any) {
const value = typeof widget === "string" ? widget : widget.name const value = typeof widget === "string" ? widget : widget.name
const pannel = this.widgets.find((item) => item.name === value)
const pannel = state.widgets.find((item) => item.name === value)
if (!pannel) { if (!pannel) {
console.log("widget不存在", widget) console.log("widget不存在", widget)
return return
} }
if (pannel.visible && widget.reload) { if (pannel.visible && widget.reload) {
// 重载组件 // 重载组件
pannel.visible = false pannel.visible = false
@ -110,7 +77,7 @@ export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetSta
}) })
// 处理其他面板的显示隐藏 // 处理其他面板的显示隐藏
state.widgets.forEach((item) => { this.widgets.forEach((item) => {
if (pannel.name !== item.name) { if (pannel.name !== item.name) {
// 默认关闭同组 // 默认关闭同组
if (pannel.group && item.group === pannel.group) { if (pannel.group && item.group === pannel.group) {
@ -119,7 +86,7 @@ export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetSta
// 关闭非同组需要关闭的面板 // 关闭非同组需要关闭的面板
if (Array.isArray(pannel.disableOther)) { if (Array.isArray(pannel.disableOther)) {
pannel.disableOther.forEach((item: string) => { pannel.disableOther.forEach((item: string) => {
dispatch("disable", item) this.disable(item)
}) })
} else if (pannel.disableOther && item.autoDisable) { } else if (pannel.disableOther && item.autoDisable) {
item.visible = false item.visible = false
@ -127,15 +94,15 @@ export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetSta
} }
}) })
if (!state.openAtStart.includes(value)) { if (!this.openAtStart.includes(value)) {
commit("addAlive", value) this.openAtStart.push(value)
} }
}, },
disable({ state }, widget: string) { disable(widget: any) {
const value = widget const value = widget
const pannel = state.widgets.find((item, i) => { const pannel = this.widgets.find((item, i) => {
if (item.name === value) { if (item.name === value) {
delete state.widgets[i].data delete this.widgets[i].data
return true return true
} else { } else {
return false return false
@ -146,17 +113,48 @@ export const injectState = (options: StoreOptions<WidgetState>): Store<WidgetSta
pannel.visible = false pannel.visible = false
} }
}, },
disableAll({ state }, hasAll: boolean) { disableAll(hasAll: boolean) {
state.widgets.forEach((item: Widget) => { this.widgets.forEach((item: Widget) => {
if (item.visible && (hasAll || item.autoDisable)) { if (item.visible && (hasAll || item.autoDisable)) {
item.visible = false item.visible = false
} }
}) })
}, },
...options.actions },
})
/**
* 初始化状态
* @param {widgetStateStore} widgetStateStore
* @return {widgetStateStore} 公共状态
*/
export const injectState = (widgetStateStore) => {
if(typeof widgetStateStore.state === "function") {
widgetStateStore.state = (widgetStateStore.state() || {}) as WidgetState
}
const defaultOption = widgetStateStore.state.defaultOption
const openAtStart = widgetStateStore.state?.openAtStart
if(!widgetStateStore){
throw new Error("injectState 参数不能为空")
} else {
const widgets = widgetStateStore.state?.widgets.map((item) => {
return {
visible: openAtStart?.includes(item.name),
...defaultOption,
...item,
meta: {
...defaultOption.meta,
...item.meta
},
key: uuidV4()
} }
}) })
widgetStateStore.state!.widgets = widgets!
} }
return widgetStateStore
}
type EventCb = (...args: any[]) => void type EventCb = (...args: any[]) => void
class Event { class Event {
@ -199,12 +197,12 @@ class Event {
const widgetEvent = new Event() const widgetEvent = new Event()
export function useWidgetStore() { export function useWidgetStore() {
const store = useStore(key) const store = widgetStateStore()
return store return store
} }
export function useWidget() { export function useWidget() {
const store = useStore(key) const store = widgetStateStore()
const getCurrentWidget = inject<() => string>("getCurrentWidget") const getCurrentWidget = inject<() => string>("getCurrentWidget")
let currentWidget: any let currentWidget: any
@ -212,7 +210,7 @@ export function useWidget() {
const widegtName = getCurrentWidget() const widegtName = getCurrentWidget()
currentWidget = { currentWidget = {
...store.state.widgets.find((item: any) => item.name === widegtName), ...store.$state.widgets.find((item: any) => item.name === widegtName),
onUpdate(callback: EventCb) { onUpdate(callback: EventCb) {
if (currentWidget) { if (currentWidget) {
widgetEvent.on(currentWidget.name, callback) widgetEvent.on(currentWidget.name, callback)
@ -229,11 +227,10 @@ export function useWidget() {
currentWidget: currentWidget, currentWidget: currentWidget,
// 获取指定的widget // 获取指定的widget
getWidget: (name: string) => { getWidget: (name: string) => {
const widget = store.state.widgets.find((item: any) => item.name === name) const widget = store.$state.widgets.find((item: any) => item.name === name)
if (!widget) { if (!widget) {
return null return null
} }
return { return {
...widget, ...widget,
onUpdate(callback: EventCb) { onUpdate(callback: EventCb) {
@ -247,8 +244,10 @@ export function useWidget() {
} }
}, },
setVisible(name: string, visible: boolean) { setVisible(name: string, visible: boolean) {
const widget = store.state.widgets.find((item: any) => item.name === name) const widget = store.$state.widgets.find((item: any) => item.name === name)
if(widget){
widget.visible = visible widget.visible = visible
}
}, },
// 出发对应widget的onUpdate // 出发对应widget的onUpdate
updateWidget(name: string, ...args: any[]) { updateWidget(name: string, ...args: any[]) {
@ -256,7 +255,7 @@ export function useWidget() {
}, },
// 获取widget的当前激活状态 // 获取widget的当前激活状态
isActivate: (name: string) => { isActivate: (name: string) => {
const widget = store.state.widgets.find((item: any) => item.name === name) const widget = store.$state.widgets.find((item: any) => item.name === name)
return widget ? widget.visible : false return widget ? widget.visible : false
}, },
// 激活指定 widget模块 // 激活指定 widget模块
@ -267,7 +266,6 @@ export function useWidget() {
} else { } else {
widgets = option widgets = option
} }
console.log("widgets", widgets)
widgets.forEach((widget) => { widgets.forEach((widget) => {
let params: any let params: any
if (typeof widget === "string") { if (typeof widget === "string") {
@ -275,7 +273,8 @@ export function useWidget() {
} else { } else {
params = { reload, ...widget } params = { reload, ...widget }
} }
store.dispatch("activate", params) store.activate(params)
// store.dispatch("activate", params)
}) })
}, },
// 释放指定的widget // 释放指定的widget
@ -288,12 +287,12 @@ export function useWidget() {
} }
widgets.forEach((widget) => { widgets.forEach((widget) => {
store.dispatch("disable", widget) store.disable(widget)
}) })
}, },
// 关闭释放所有widget ，hasAll传true值强制释放所有widget(默认autoDisable为false的widet不会释放) // 关闭释放所有widget ，hasAll传true值强制释放所有widget(默认autoDisable为false的widet不会释放)
disableAll: (hasAll = false) => { disableAll: (hasAll = false) => {
store.dispatch("disableAll", hasAll) store.disableAll(hasAll)
} }
} }
} }

12
src/mars/components/mars-work/main-view.vue
View File

@ -6,6 +6,14 @@
* @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\mars\components\mars-work\main-view.vue * @FilePath: \费县天空地大屏正式代码e:\新架构\vue-vben-admin\src\mars\components\mars-work\main-view.vue
* @Description: * @Description:
--> -->
<!--
* @Author: 滕嵩
* @Date: 2024-01-25 08:59:36
* @LastEditors: 滕嵩
* @LastEditTime: 2024-01-25 10:55:02
* @FilePath: \vue-vben-admin\src\mars\components\mars-work\main-view.vue
* @Description:
-->
<template> <template>
<ConfigProvider :locale="locale"> <ConfigProvider :locale="locale">
<div class="mars-main-view" id="mars-main-view"> <div class="mars-main-view" id="mars-main-view">
@ -38,8 +46,8 @@ const locale = zhCN
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
const widgets = computed(() => widgetStore.state.widgets) const widgets = computed(() => widgetStore.widgets)
const openAtStart = computed(() => widgetStore.state.openAtStart) const openAtStart = computed(() => widgetStore.openAtStart)
const configUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}` const configUrl = `${process.env.BASE_URL}config/config.json?time=${new Date().getTime()}`
const props = withDefaults( const props = withDefaults(

19
src/mars/install/widget-store.ts
View File

@ -3,12 +3,21 @@
* @copyright 火星科技 mars3d.cn * @copyright 火星科技 mars3d.cn
* @author 木遥 2022-02-19 * @author 木遥 2022-02-19
*/ */
/*
* @Author: 滕嵩
* @Date: 2024-01-24 08:53:41
* @LastEditors: 滕嵩
* @LastEditTime: 2024-01-25 10:54:42
* @FilePath: \vue-vben-admin\src\mars\install\widget-store.ts
* @Description:
*/
import { defineAsyncComponent, markRaw } from "vue" import { defineAsyncComponent, markRaw } from "vue"
import { WidgetState } from "@/mars/common/store/widget" import { WidgetState } from "@/mars/common/store/widget"
import { StoreOptions } from "vuex" import { defineStore } from "pinia"
const store: StoreOptions<WidgetState> = { const store = defineStore({
state: { id: "widgets",
state:(): WidgetState => ({
widgets:[ widgets:[
{ {
component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))), component: markRaw(defineAsyncComponent(() => import("@/mars/widgets/basic/query-poi/index.vue"))),
@ -50,7 +59,7 @@ const store: StoreOptions<WidgetState> = {
} }
], ],
openAtStart: ["query-poi", "toolbar"] openAtStart: ["query-poi", "toolbar"]
} })
} })
export default store export default store