refactor(添加pinia数据持久化，添加package依赖): 🎨 添加fastcrud在setting.ts的公共配置

2023-02-05 22:08:36 +08:00
parent 4046bd0d0c
commit feac69af86
9 changed files with 68 additions and 129 deletions
--- a/web/package.json
+++ b/web/package.json
@@ -28,6 +28,8 @@
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.16",
+    "pinia-plugin-persist": "^1.0.0",
+    "pinia-plugin-persistedstate": "^3.0.2",
    "print-js": "^1.6.0",
    "qrcodejs2-fixes": "^0.0.2",
    "screenfull": "^6.0.2",
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,20 +1,21 @@
 import { createApp } from 'vue';
-import pinia from '/@/stores/index';
 import App from './App.vue';
 import router from './router';
 import { directive } from '/@/utils/directive';
 import { i18n } from '/@/i18n/index';
 import other from '/@/utils/other';
-
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 import '/@/theme/index.scss';
 import mitt from 'mitt';
 import VueGridLayout from 'vue-grid-layout';
-
+import piniaPersist from 'pinia-plugin-persist'
+// @ts-ignore
 import fastCrud from './settings.ts'
+import pinia from './stores';

 const app = createApp(App);
+pinia.use(piniaPersist)

 directive(app);
 other.elSvg(app);
--- a/web/src/settings.ts
+++ b/web/src/settings.ts
@@ -1,21 +1,21 @@
 // 引入fast-crud
-import {FastCrud} from "@fast-crud/fast-crud";
+import { FastCrud } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-
+import { setLogger } from '@fast-crud/fast-crud'
 // element
 import ui from "@fast-crud/ui-element";
-import {request} from "/@/utils/service.ts";
+import { request } from "/@/utils/service.ts";

 export default {
    async install(app: any, options: any) {
        // 先安装ui
        app.use(ui);
-// 然后安装FastCrud
+        // 然后安装FastCrud
        app.use(FastCrud, {
            //i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
            // 此处配置公共的dictRequest（字典请求）
-            async dictRequest({dict}:any) {
-                return await request({url: dict.url}); //根据dict的url，异步返回一个字典数组
+            async dictRequest({ dict }: any) {
+                return await request({ url: dict.url }); //根据dict的url，异步返回一个字典数组
            },
            //公共crud配置
            commonOptions() {
@@ -24,19 +24,20 @@ export default {
                        //接口请求配置
                        //你项目后台接口大概率与fast-crud所需要的返回结构不一致，所以需要配置此项
                        //请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
-                        transformQuery: ({page, form, sort}:any) => {
+                        transformQuery: ({ page, form, sort }: any) => {
                            //转换为你pageRequest所需要的请求参数结构
-                            return {page, form, sort};
+                            return { page, form, sort };
                        },
-                        transformRes: ({res}:any) => {
+                        transformRes: ({ res }: any) => {
                            //将pageRequest的返回数据，转换为fast-crud所需要的格式
                            //return {records,currentPage,pageSize,total};
-                            return {...res}
+                            return { records: res.data, currentPage: res.page, pageSize: res.limit, total: res.total }
                        }
                    },
                };
            },
        });
+        setLogger({ level: 'error' })
    }
 }

--- a/web/src/stores/dictionary.ts
+++ b/web/src/stores/dictionary.ts
@@ -49,4 +49,7 @@ export const DictionaryStore = defineStore('Dictionary', {
            })
        },
    },
+    persist: {
+        enabled: true,
+    },
 });
--- a/web/src/stores/interface/index.ts
+++ b/web/src/stores/interface/index.ts
@@ -88,3 +88,7 @@ export interface ThemeConfigState {
 export interface ThemeConfigStates {
 	themeConfig: ThemeConfigState;
 }
+
+export interface DictionaryStates {
+	data: any;
+}
--- a/web/src/views/system/login/component/account.vue
+++ b/web/src/views/system/login/component/account.vue
@@ -73,6 +73,7 @@ import { formatAxis } from '/@/utils/formatTime';
 import { NextLoading } from '/@/utils/loading';
 import * as loginApi from '/@/views/system/login/api';
 import { useUserInfo } from '/@/stores/userInfo';
+import { DictionaryStore } from '/@/stores/dictionary';
 import { Md5 } from 'ts-md5';

 export default defineComponent({
@@ -136,8 +137,9 @@ export default defineComponent({
 		};
 		// 登录成功后的跳转
 		const loginSuccess = () => {
-			//登录成功获取用户信息
+			//登录成功获取用户信息,获取系统字典数据
 			getUserInfo();
+			DictionaryStore().getSystemDictionarys();

 			// 初始化登录成功时间问候语
 			let currentTimeInfo = currentTime.value;
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -1,114 +1,26 @@
 <template>
-	<div class="system-menu-container">
-		<el-card shadow="hover">
-			<div class="system-menu-search mb15">
-				<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
-				<el-button size="default" type="primary" class="ml10">
-					<el-icon>
-						<ele-Search />
-					</el-icon>
-					查询
-				</el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu">
-					<el-icon>
-						<ele-FolderAdd />
-					</el-icon>
-					新增菜单
-				</el-button>
-			</div>
-			<el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-				<el-table-column label="菜单名称" show-overflow-tooltip>
-					<template #default="scope">
-						<SvgIcon :name="scope.row.meta.icon" />
-						<span class="ml10">{{ $t(scope.row.meta.title) }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
-				<el-table-column label="组件路径" show-overflow-tooltip>
-					<template #default="scope">
-						<span>{{ scope.row.component }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="权限标识" show-overflow-tooltip>
-					<template #default="scope">
-						<span>{{ scope.row.meta.roles }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="排序" show-overflow-tooltip width="80">
-					<template #default="scope">
-						{{ scope.$index }}
-					</template>
-				</el-table-column>
-				<el-table-column label="类型" show-overflow-tooltip width="80">
-					<template #default="scope">
-						<el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" show-overflow-tooltip width="140">
-					<template #default="scope">
-						<el-button size="small" text type="primary" @click="onOpenAddMenu">新增</el-button>
-						<el-button size="small" text type="primary" @click="onOpenEditMenu(scope.row)">修改</el-button>
-						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-card>
-		<AddMenu ref="addMenuRef" />
-		<EditMenu ref="editMenuRef" />
-	</div>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
 </template>

-<script lang="ts">
-import { ref, toRefs, reactive, computed, defineComponent } from 'vue';
-import { RouteRecordRaw } from 'vue-router';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import { storeToRefs } from 'pinia';
-import { useRoutesList } from '/@/stores/routesList';
-import AddMenu from '/@/views/system/menu/component/addMenu.vue';
-import EditMenu from '/@/views/system/menu/component/editMenu.vue';
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });

-export default defineComponent({
-	name: 'systemMenu',
-	components: { AddMenu, EditMenu },
-	setup() {
-		const stores = useRoutesList();
-		const { routesList } = storeToRefs(stores);
-		const addMenuRef = ref();
-		const editMenuRef = ref();
-		const state = reactive({});
-		// 获取 vuex 中的路由
-		const menuTableData = computed(() => {
-			return routesList.value;
-		});
-		// 打开新增菜单弹窗
-		const onOpenAddMenu = () => {
-			addMenuRef.value.openDialog();
-		};
-		// 打开编辑菜单弹窗
-		const onOpenEditMenu = (row: RouteRecordRaw) => {
-			editMenuRef.value.openDialog(row);
-		};
-		// 删除当前行
-		const onTabelRowDel = (row: RouteRecordRaw) => {
-			ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
-				confirmButtonText: '删除',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					ElMessage.success('删除成功');
-				})
-				.catch(() => {});
-		};
-		return {
-			addMenuRef,
-			editMenuRef,
-			onOpenAddMenu,
-			onOpenEditMenu,
-			menuTableData,
-			onTabelRowDel,
-			...toRefs(state),
-		};
-	},
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
 });
 </script>
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -5,7 +5,7 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-    <RolePermission ref="rolePermission"></RolePermission>
+		<RolePermission ref="rolePermission"></RolePermission>
 	</fs-page>
 </template>

@@ -13,9 +13,9 @@
 import { ref, onMounted } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './curd';
-import RolePermission from '/@/views/system/rolePermission/index.vue'
+import RolePermission from '/@/views/system/rolePermission/index.vue';
 const rolePermission = ref();
-defineExpose(rolePermission)
+defineExpose(rolePermission);
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -23,7 +23,7 @@ const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
 // 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose ,rolePermission });
+const { crudOptions } = createCrudOptions({ crudExpose, rolePermission });
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 // 你可以调用此方法，重新初始化crud配置
@@ -33,7 +33,4 @@ const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 onMounted(() => {
 	crudExpose.doRefresh();
 });
-
-
-
 </script>
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2254,6 +2254,18 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

+pinia-plugin-persist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888"
+  integrity sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==
+  dependencies:
+    vue-demi "^0.12.1"
+
+pinia-plugin-persistedstate@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz#c604591442d23ba3a86eaf8156f019812d59038e"
+  integrity sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==
+
 pinia@^2.0.16:
  version "2.0.16"
  resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.16.tgz"
@@ -2656,6 +2668,11 @@ vue-demi@*:
  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz"
  integrity sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==

+vue-demi@^0.12.1:
+  version "0.12.5"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-eslint-parser@^9.0.1, vue-eslint-parser@^9.0.3:
  version "9.0.3"
  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz"