fix 更新相关依赖版本，后台管理页面及代码生成页面改为setup语法糖

package.json

@@ -4,66 +4,67 @@
   "description": "vue3 vite next admin template",
   "author": "lyt_20201208",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "vite --force",
+    "dev": "vite",
     "build": "vite build",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.1.0",
-    "@element-plus/icons-vue": "^2.1.0",
+    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.3.5",
+    "axios": "^1.6.8",
     "codemirror": "^6.0.1",
-    "countup.js": "^2.6.0",
+    "countup.js": "^2.8.0",
-    "cropperjs": "^1.5.13",
+    "cropperjs": "^1.6.0",
-    "echarts": "^5.4.2",
+    "echarts": "^5.5.0",
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "^2.6.3",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "^3.0.5",
     "jsplumb": "^2.15.6",
     "lodash": "^4.17.21",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.34",
+    "pinia": "^2.1.7",
     "print-js": "^1.6.0",
     "qrcodejs2-fixes": "^0.0.2",
-    "qs": "^6.11.1",
+    "qs": "^6.12.0",
     "screenfull": "^6.0.2",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.15.2",
     "spark-md5": "^3.0.2",
     "splitpanes": "^3.1.5",
-    "vue": "^3.2.47",
+    "vue": "^3.4.21",
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",
-    "vue-demi": "^0.13.11",
+    "vue-demi": "^0.14.7",
     "vue-grid-layout": "^3.0.0-beta1",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^9.10.2",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.3.0",
     "vue-simple-uploader": "^1.0.0-beta.5",
     "vue-ueditor-wrap": "^3.0.8"
   },
   "devDependencies": {
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.11.28",
-    "@types/nprogress": "^0.2.0",
+    "@types/nprogress": "^0.2.3",
-    "@types/sortablejs": "^1.15.1",
+    "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^5.58.0",
+    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/compiler-sfc": "^3.4.21",
     "dotenv": "^16.0.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.23.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.2.5",
-    "sass": "^1.61.0",
+    "sass": "^1.72.0",
     "sass-loader": "^13.0.2",
-    "typescript": "^5.0.4",
+    "typescript": "^5.4.2",
-    "vite": "^4.2.1",
+    "vite": "^5.1.6",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-setup-extend-plus": "^0.1.0",
-    "vue-eslint-parser": "^9.1.1"
+    "vue-eslint-parser": "^9.4.1"
   },
   "browserslist": [
     "> 1%",

src/layout/component/aside.vue

@@ -9,7 +9,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import pinia from '/@/stores/index';
@@ -18,24 +18,22 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import Logo from '/@/layout/logo/index.vue';
 import Vertical from '/@/layout/navMenu/vertical.vue';
+defineOptions({ name: "layoutAside"})
 
-export default defineComponent({
+const { proxy } = <any>getCurrentInstance();
-	name: 'layoutAside',
+const stores = useRoutesList();
-	components: { Logo, Vertical },
+const storesThemeConfig = useThemeConfig();
-	setup() {
+const storesTagsViewRoutes = useTagsViewRoutes();
-		const { proxy } = <any>getCurrentInstance();
+const { routesList } = storeToRefs(stores);
-		const stores = useRoutesList();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const storesThemeConfig = useThemeConfig();
+const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const storesTagsViewRoutes = useTagsViewRoutes();
+const state = reactive({
-		const { routesList } = storeToRefs(stores);
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const state = reactive({
   menuList: [],
   clientWidth: 0,
-		});
+});
-		// 设置菜单展开/收起时的宽度
+const { menuList } = toRefs(state);
-		const setCollapseStyle = computed(() => {
+// 设置菜单展开/收起时的宽度
+const setCollapseStyle = computed(() => {
   const { layout, isCollapse, menuBar } = themeConfig.value;
   const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
   const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
@@ -65,9 +63,9 @@ export default defineComponent({
       else return [asideBrColor, 'layout-aside-pc-220'];
     }
   }
-		});
+});
-		// 关闭移动端蒙版
+// 关闭移动端蒙版
-		const closeLayoutAsideMobileMode = () => {
+const closeLayoutAsideMobileMode = () => {
   const el = document.querySelector('.layout-aside-mobile-mode');
   el?.setAttribute('style', 'animation: error-img-two 0.3s');
   setTimeout(() => {
@@ -76,19 +74,19 @@ export default defineComponent({
   const clientWidth = document.body.clientWidth;
   if (clientWidth < 1000) themeConfig.value.isCollapse = false;
   document.body.setAttribute('class', '');
-		};
+};
-		// 设置显示/隐藏 logo
+// 设置显示/隐藏 logo
-		const setShowLogo = computed(() => {
+const setShowLogo = computed(() => {
   let { layout, isShowLogo } = themeConfig.value;
   return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
-		});
+});
-		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
-		const setFilterRoutes = () => {
+const setFilterRoutes = () => {
   if (themeConfig.value.layout === 'columns') return false;
   (state.menuList as any) = filterRoutesFun(routesList.value);
-		};
+};
-		// 路由过滤递归函数
+// 路由过滤递归函数
-		const filterRoutesFun = (arr: Array<string>) => {
+const filterRoutesFun = (arr: Array<string>) => {
   return arr
     .filter((item: any) => !item.meta.isHide)
     .map((item: any) => {
@@ -96,27 +94,27 @@ export default defineComponent({
       if (item.children) item.children = filterRoutesFun(item.children);
       return item;
     });
-		};
+};
-		// 设置菜单导航是否固定（移动端）
+// 设置菜单导航是否固定（移动端）
-		const initMenuFixed = (clientWidth: number) => {
+const initMenuFixed = (clientWidth: number) => {
   state.clientWidth = clientWidth;
-		};
+};
-		// 鼠标移入、移出
+// 鼠标移入、移出
-		const onAsideEnterLeave = (bool: Boolean) => {
+const onAsideEnterLeave = (bool: Boolean) => {
   let { layout } = themeConfig.value;
   if (layout !== 'columns') return false;
   if (!bool) proxy.mittBus.emit('restoreDefault');
   stores.setColumnsMenuHover(bool);
-		};
+};
-		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-		watch(themeConfig.value, (val) => {
+watch(themeConfig.value, (val) => {
   if (val.isShowLogoChange !== val.isShowLogo) {
     if (!proxy.$refs.layoutAsideScrollbarRef) return false;
     proxy.$refs.layoutAsideScrollbarRef.update();
   }
-		});
+});
-		// 监听vuex值的变化，动态赋值给菜单中
+// 监听vuex值的变化，动态赋值给菜单中
-		watch(
+watch(
   pinia.state,
   (val) => {
     let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
@@ -126,9 +124,9 @@ export default defineComponent({
   {
     deep: true,
   }
-		);
+);
-		// 页面加载前
+// 页面加载前
-		onBeforeMount(() => {
+onBeforeMount(() => {
   initMenuFixed(document.body.clientWidth);
   setFilterRoutes();
   // 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
@@ -150,14 +148,5 @@ export default defineComponent({
     initMenuFixed(res.clientWidth);
     closeLayoutAsideMobileMode();
   });
-		});
-		return {
-			setCollapseStyle,
-			setShowLogo,
-			isTagsViewCurrenFull,
-			onAsideEnterLeave,
-			...toRefs(state),
-		};
-	},
 });
 </script>

src/layout/component/columnsAside.vue

@@ -44,7 +44,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, ref, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -62,20 +62,17 @@ interface ColumnsAsideState {
 	difference: number;
 	routeSplit: string[];
 }
-
+defineOptions({ name: "layoutColumnsAside"})
-export default defineComponent({
+const columnsAsideOffsetTopRefs: any = ref([]);
-	name: 'layoutColumnsAside',
+const columnsAsideActiveRef = ref();
-	setup() {
+const { proxy } = <any>getCurrentInstance();
-		const columnsAsideOffsetTopRefs: any = ref([]);
+const stores = useRoutesList();
-		const columnsAsideActiveRef = ref();
+const storesThemeConfig = useThemeConfig();
-		const { proxy } = <any>getCurrentInstance();
+const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
-		const stores = useRoutesList();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const storesThemeConfig = useThemeConfig();
+const route = useRoute();
-		const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
+const router = useRouter();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
+const state = reactive<ColumnsAsideState>({
-		const route = useRoute();
-		const router = useRouter();
-		const state = reactive<ColumnsAsideState>({
   columnsAsideList: [],
   liIndex: 0,
   liOldIndex: null,
@@ -83,21 +80,22 @@ export default defineComponent({
   liOldPath: null,
   difference: 0,
   routeSplit: [],
-		});
+});
-		// 设置菜单高亮位置移动
+const { columnsAsideList, liIndex, liHoverIndex} = toRefs(state);
-		const setColumnsAsideMove = (k: number) => {
+// 设置菜单高亮位置移动
+const setColumnsAsideMove = (k: number) => {
   state.liIndex = k;
   columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
-		};
+};
-		// 菜单高亮点击事件
+// 菜单高亮点击事件
-		const onColumnsAsideMenuClick = (v: Object, k: number) => {
+const onColumnsAsideMenuClick = (v: Object, k: number) => {
   setColumnsAsideMove(k);
   let { path, redirect } = v as any;
   if (redirect) router.push(redirect);
   else router.push(path);
-		};
+};
-		// 鼠标移入时，显示当前的子级菜单
+// 鼠标移入时，显示当前的子级菜单
-		const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
+const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
   if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
   let { path } = v;
   state.liOldPath = path;
@@ -106,31 +104,31 @@ export default defineComponent({
   proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
   stores.setColumnsMenuHover(false);
   stores.setColumnsNavHover(true);
-		};
+};
-		// 鼠标移走时，显示原来的子级菜单
+// 鼠标移走时，显示原来的子级菜单
-		const onColumnsAsideMenuMouseleave = async () => {
+const onColumnsAsideMenuMouseleave = async () => {
   await stores.setColumnsNavHover(false);
   // 添加延时器，防止拿到的 store.state.routesList 值不是最新的
   setTimeout(() => {
     if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
   }, 100);
-		};
+};
-		// 设置高亮动态位置
+// 设置高亮动态位置
-		const onColumnsAsideDown = (k: number) => {
+const onColumnsAsideDown = (k: number) => {
   nextTick(() => {
     setColumnsAsideMove(k);
   });
-		};
+};
-		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
-		const setFilterRoutes = () => {
+const setFilterRoutes = () => {
   state.columnsAsideList = filterRoutesFun(routesList.value);
   const resData: any = setSendChildren(route.path);
   if (Object.keys(resData).length <= 0) return false;
   onColumnsAsideDown(resData.item[0].k);
   proxy.mittBus.emit('setSendColumnsChildren', resData);
-		};
+};
-		// 传送当前子级数据到菜单中
+// 传送当前子级数据到菜单中
-		const setSendChildren = (path: string) => {
+const setSendChildren = (path: string) => {
   let currentData: any = {};
   state.columnsAsideList.some((v:any,k:number)=>{
     if(v.children){
@@ -147,9 +145,9 @@ export default defineComponent({
      return false
   })
   return currentData;
-		};
+};
-		// 路由过滤递归函数
+// 路由过滤递归函数
-		const filterRoutesFun = (arr: Array<string>) => {
+const filterRoutesFun = (arr: Array<string>) => {
   return arr
     .filter((item: any) => !item.meta.isHide)
     .map((item: any) => {
@@ -157,9 +155,9 @@ export default defineComponent({
       if (item.children) item.children = filterRoutesFun(item.children);
       return item;
     });
-		};
+};
-		// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
+// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
-		const setColumnsMenuHighlight = (path: string) => {
+const setColumnsMenuHighlight = (path: string) => {
   const currentSplitRoute = state.columnsAsideList.some((v:any)=>{
     if(v.children){
       v.children.some((sv:any)=>{
@@ -175,9 +173,9 @@ export default defineComponent({
   setTimeout(() => {
     onColumnsAsideDown((<any>currentSplitRoute).k);
   }, 0);
-		};
+};
-		// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
+// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
-		watch(
+watch(
   pinia.state,
   (val) => {
     val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
@@ -193,36 +191,24 @@ export default defineComponent({
   {
     deep: true,
   }
-		);
+);
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   setFilterRoutes();
   // 销毁变量，防止鼠标再次移入时，保留了上次的记录
   proxy.mittBus.on('restoreDefault', () => {
     state.liOldIndex = null;
     state.liOldPath = null;
   });
-		});
+});
-		// 页面卸载时
+// 页面卸载时
-		onUnmounted(() => {
+onUnmounted(() => {
   proxy.mittBus.off('restoreDefault', () => {});
-		});
+});
-		// 路由更新时
+// 路由更新时
-		onBeforeRouteUpdate((to) => {
+onBeforeRouteUpdate((to) => {
   setColumnsMenuHighlight(to.path);
   proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
-		});
-		return {
-			themeConfig,
-			columnsAsideOffsetTopRefs,
-			columnsAsideActiveRef,
-			onColumnsAsideDown,
-			onColumnsAsideMenuClick,
-			onColumnsAsideMenuMouseenter,
-			onColumnsAsideMenuMouseleave,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/component/header.vue

@@ -4,31 +4,21 @@
 	</el-header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import NavBarsIndex from '/@/layout/navBars/index.vue';
-
+defineOptions({ name: "layoutHeader"})
-export default defineComponent({
+const storesTagsViewRoutes = useTagsViewRoutes();
-	name: 'layoutHeader',
+const storesThemeConfig = useThemeConfig();
-	components: { NavBarsIndex },
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	setup() {
+const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const storesTagsViewRoutes = useTagsViewRoutes();
+// 设置 header 的高度
-		const storesThemeConfig = useThemeConfig();
+const setHeaderHeight = computed(() => {
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		// 设置 header 的高度
-		const setHeaderHeight = computed(() => {
   let { isTagsview, layout } = themeConfig.value;
   if (isTagsview && layout !== 'classic') return '84px';
   else return '50px';
-		});
-		return {
-			setHeaderHeight,
-			isTagsViewCurrenFull,
-		};
-	},
 });
 </script>

src/layout/component/main.vue

@@ -19,8 +19,8 @@
 	</el-main>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
+import { toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -33,43 +33,40 @@ interface MainState {
 	headerHeight: string | number;
 	currentRouteMeta: any;
 }
-
+defineOptions({ name: "layoutMain"})
-export default defineComponent({
+const { proxy } = <any>getCurrentInstance();
-	name: 'layoutMain',
+const storesThemeConfig = useThemeConfig();
-	components: { LayoutParentView, Footer },
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	setup() {
+const route = useRoute();
-		const { proxy } = <any>getCurrentInstance();
+const state = reactive<MainState>({
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const route = useRoute();
-		const state = reactive<MainState>({
   headerHeight: '',
   currentRouteMeta: {},
-		});
+});
-		// 判断布局
+const { currentRouteMeta } = toRefs(state);
-		const isClassicOrTransverse = computed(() => {
+// 判断布局
+const isClassicOrTransverse = computed(() => {
   const { layout } = themeConfig.value;
   return layout === 'classic' || layout === 'transverse';
-		});
+});
-		// 设置 main 的高度
+// 设置 main 的高度
-		const initHeaderHeight = () => {
+const initHeaderHeight = () => {
   const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
   let { isTagsview } = themeConfig.value;
   if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
   else return (state.headerHeight = `80px`);
-		};
+};
-		// 初始化获取当前路由 meta，用于设置 iframes padding
+// 初始化获取当前路由 meta，用于设置 iframes padding
-		const initGetMeta = () => {
+const initGetMeta = () => {
   state.currentRouteMeta = route.meta;
-		};
+};
-		// 页面加载前
+// 页面加载前
-		onMounted(async () => {
+onMounted(async () => {
   await initGetMeta();
   initHeaderHeight();
   NextLoading.done();
-		});
+});
-		// 监听路由变化
+// 监听路由变化
-		watch(
+watch(
   () => route.path,
   () => {
     state.currentRouteMeta = route.meta;
@@ -77,9 +74,9 @@ export default defineComponent({
     state.headerHeight = bool ? `86px` : `115px`;
     proxy.$refs.layoutScrollbarRef.update();
   }
-		);
+);
-		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-		watch(
+watch(
   themeConfig,
   (val) => {
     state.currentRouteMeta = route.meta;
@@ -90,12 +87,5 @@ export default defineComponent({
   {
     deep: true,
   }
-		);
+);
-		return {
-			themeConfig,
-			isClassicOrTransverse,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/layout/footer/index.vue

@@ -7,29 +7,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
+import {ref} from 'vue';
-import { onBeforeRouteUpdate } from 'vue-router';
+import {onBeforeRouteUpdate} from 'vue-router';
-
+defineOptions({ name: "layoutFooter"})
-export default defineComponent({
+const isDelayFooter = ref(true)
-	name: 'layoutFooter',
+// 路由改变时，等主界面动画加载完毕再显示 footer
-	setup() {
+onBeforeRouteUpdate(() => {
-		const state = reactive({
-			isDelayFooter: true,
-		});
-		// 路由改变时，等主界面动画加载完毕再显示 footer
-		onBeforeRouteUpdate(() => {
   setTimeout(() => {
-				state.isDelayFooter = false;
+    isDelayFooter.value = false;
     setTimeout(() => {
-					state.isDelayFooter = true;
+      isDelayFooter.value = true;
     }, 800);
   }, 0);
-		});
-		return {
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/lockScreen/index.vue

@@ -59,7 +59,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
 import { formatDate } from '/@/utils/formatTime';
 import { Local } from '/@/utils/storage';
@@ -84,15 +84,13 @@ interface LockScreenState {
 	isShowLockScreenIntervalTime: number;
 	lockScreenPassword: string;
 }
+defineOptions({ name: "layoutLockScreen"})
 
-export default defineComponent({
+const { proxy } = <any>getCurrentInstance();
-	name: 'layoutLockScreen',
+const layoutLockScreenInputRef = ref();
-	setup() {
+const storesThemeConfig = useThemeConfig();
-		const { proxy } = <any>getCurrentInstance();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const layoutLockScreenInputRef = ref();
+const state = reactive<LockScreenState>({
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const state = reactive<LockScreenState>({
   transparency: 1,
   downClientY: 0,
   moveDifference: 0,
@@ -108,14 +106,15 @@ export default defineComponent({
   isShowLockScreen: false,
   isShowLockScreenIntervalTime: 0,
   lockScreenPassword: '',
-		});
+});
-		// 鼠标按下
+const { isShowLockScreen, lockScreenPassword,isShowLoockLogin,time} = toRefs(state);
-		const onDown = (down: any) => {
+// 鼠标按下
+const onDown = (down: any) => {
   state.isFlags = true;
   state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
-		};
+};
-		// 鼠标移动
+// 鼠标移动
-		const onMove = (move: any) => {
+const onMove = (move: any) => {
   if (state.isFlags) {
     const el = <HTMLElement>state.querySelectorEl;
     const opacitys = (state.transparency -= 1 / 200);
@@ -138,36 +137,36 @@ export default defineComponent({
       layoutLockScreenInputRef.value.focus();
     }
   }
-		};
+};
-		// 鼠标松开
+// 鼠标松开
-		const onEnd = () => {
+const onEnd = () => {
   state.isFlags = false;
   state.transparency = 1;
   if (state.moveDifference >= -400) {
     (<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
   }
-		};
+};
-		// 获取要拖拽的初始元素
+// 获取要拖拽的初始元素
-		const initGetElement = () => {
+const initGetElement = () => {
   nextTick(() => {
     state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
   });
-		};
+};
-		// 时间初始化
+// 时间初始化
-		const initTime = () => {
+const initTime = () => {
   state.time.hm = formatDate(new Date(), 'HH:MM');
   state.time.s = formatDate(new Date(), 'SS');
   state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
-		};
+};
-		// 时间初始化定时器
+// 时间初始化定时器
-		const initSetTime = () => {
+const initSetTime = () => {
   initTime();
   state.setIntervalTime = window.setInterval(() => {
     initTime();
   }, 1000);
-		};
+};
-		// 锁屏时间定时器
+// 锁屏时间定时器
-		const initLockScreen = () => {
+const initLockScreen = () => {
   if (themeConfig.value.isLockScreen) {
     state.isShowLockScreenIntervalTime = window.setInterval(() => {
       if (themeConfig.value.lockScreenTime <= 1) {
@@ -180,38 +179,28 @@ export default defineComponent({
   } else {
     clearInterval(state.isShowLockScreenIntervalTime);
   }
-		};
+};
-		// 存储布局配置
+// 存储布局配置
-		const setLocalThemeConfig = () => {
+const setLocalThemeConfig = () => {
   themeConfig.value.isDrawer = false;
   Local.set('themeConfig', themeConfig.value);
-		};
+};
-		// 密码输入点击事件
+// 密码输入点击事件
-		const onLockScreenSubmit = () => {
+const onLockScreenSubmit = () => {
   themeConfig.value.isLockScreen = false;
   themeConfig.value.lockScreenTime = 30;
   setLocalThemeConfig();
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initGetElement();
   initSetTime();
   initLockScreen();
-		});
+});
-		// 页面卸载时
+// 页面卸载时
-		onUnmounted(() => {
+onUnmounted(() => {
   window.clearInterval(state.setIntervalTime);
   window.clearInterval(state.isShowLockScreenIntervalTime);
-		});
-		return {
-			layoutLockScreenInputRef,
-			onDown,
-			onMove,
-			onEnd,
-			onLockScreenSubmit,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/logo/index.vue

@@ -8,36 +8,25 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 
 import logoMini from '/@/assets/logo-mini.svg';
-
+defineOptions({ name: "layoutLogo"})
-export default defineComponent({
+const storesThemeConfig = useThemeConfig();
-	name: 'layoutLogo',
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	setup() {
+// 设置 logo 的显示。classic 经典布局默认显示 logo
-		const storesThemeConfig = useThemeConfig();
+const setShowLogo = computed(() => {
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		// 设置 logo 的显示。classic 经典布局默认显示 logo
-		const setShowLogo = computed(() => {
   let { isCollapse, layout } = themeConfig.value;
   return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
-		});
+});
-		// logo 点击实现菜单展开/收起
+// logo 点击实现菜单展开/收起
-		const onThemeConfigChange = () => {
+const onThemeConfigChange = () => {
   if (themeConfig.value.layout === 'transverse') return false;
   themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
-		};
+};
-		return {
-			logoMini,
-			setShowLogo,
-			themeConfig,
-			onThemeConfigChange,
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/layout/main/classic.vue

@@ -12,7 +12,7 @@
 	</el-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -20,16 +20,7 @@ import Aside from '/@/layout/component/aside.vue';
 import Header from '/@/layout/component/header.vue';
 import Main from '/@/layout/component/main.vue';
 import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
-
+defineOptions({ name: "layoutClassic"})
-export default defineComponent({
+const storesThemeConfig = useThemeConfig();
-	name: 'layoutClassic',
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	components: { Aside, Header, Main, TagsView },
-	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		return {
-			themeConfig,
-		};
-	},
-});
 </script>

src/layout/main/columns.vue

@@ -15,7 +15,7 @@
 	</el-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -23,19 +23,11 @@ import Aside from '/@/layout/component/aside.vue';
 import Header from '/@/layout/component/header.vue';
 import Main from '/@/layout/component/main.vue';
 import ColumnsAside from '/@/layout/component/columnsAside.vue';
-
+defineOptions({ name: "layoutColumns"})
-export default defineComponent({
+const storesThemeConfig = useThemeConfig();
-	name: 'layoutColumns',
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	components: { Aside, Header, Main, ColumnsAside },
+const isFixedHeader = computed(() => {
-	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const isFixedHeader = computed(() => {
   return themeConfig.value.isFixedHeader;
-		});
-		return {
-			isFixedHeader,
-		};
-	},
 });
+
 </script>

src/layout/main/defaults.vue

@@ -12,7 +12,7 @@
   </el-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {computed, getCurrentInstance, watch, defineComponent, ref} from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -20,29 +20,19 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import layoutAside from '/@/layout/component/aside.vue';
 import layoutHeader from '/@/layout/component/header.vue';
 import layoutMain from '/@/layout/component/main.vue';
-
+defineOptions({ name: "layoutDefaults"})
-export default defineComponent({
+const route = useRoute();
-  name: 'layoutDefaults',
+const layoutDefaultsScrollbarRef = ref()
-  components: { layoutAside, layoutHeader, layoutMain },
+const storesThemeConfig = useThemeConfig();
-  setup() {
+const { themeConfig } = storeToRefs(storesThemeConfig);
-    const route = useRoute();
+const isFixedHeader = computed(() => {
-    const layoutDefaultsScrollbarRef = ref()
-    const storesThemeConfig = useThemeConfig();
-    const { themeConfig } = storeToRefs(storesThemeConfig);
-    const isFixedHeader = computed(() => {
   return themeConfig.value.isFixedHeader;
-    });
+});
-    // 监听路由的变化
+// 监听路由的变化
-    watch(
+watch(
     () => route.path,
     () => {
       layoutDefaultsScrollbarRef.value.wrapRef.scrollTop = 0;
     }
-    );
+);
-    return {
-      isFixedHeader,
-      layoutDefaultsScrollbarRef,
-    };
-  },
-});
 </script>

src/layout/main/transverse.vue

@@ -6,12 +6,8 @@
 	</el-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Header from '/@/layout/component/header.vue';
 import Main from '/@/layout/component/main.vue';
-
+defineOptions({ name: "layoutTransverse"})
-export default {
-	name: 'layoutTransverse',
-	components: { Header, Main },
-};
 </script>

src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -23,7 +23,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { Local } from '/@/utils/storage';
@@ -31,7 +31,6 @@ import other from '/@/utils/other';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useRoutesList } from '/@/stores/routesList';
-
 // 定义接口来定义对象的类型
 interface BreadcrumbState {
 	breadcrumbList: Array<any>;
@@ -40,46 +39,45 @@ interface BreadcrumbState {
 	routeSplitIndex: number;
 }
 
-export default defineComponent({
+defineOptions({ name: "layoutBreadcrumb"})
-	name: 'layoutBreadcrumb',
+const stores = useRoutesList();
-	setup() {
+const storesThemeConfig = useThemeConfig();
-		const stores = useRoutesList();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const storesThemeConfig = useThemeConfig();
+const { routesList } = storeToRefs(stores);
-		const { themeConfig } = storeToRefs(storesThemeConfig);
+const route = useRoute();
-		const { routesList } = storeToRefs(stores);
+const router = useRouter();
-		const route = useRoute();
+const state = reactive<BreadcrumbState>({
-		const router = useRouter();
-		const state = reactive<BreadcrumbState>({
   breadcrumbList: [],
   routeSplit: [],
   routeSplitFirst: '',
   routeSplitIndex: 1,
-		});
+});
-		// 动态设置经典、横向布局不显示
+const {breadcrumbList}= toRefs(state);
-		const isShowBreadcrumb = computed(() => {
+// 动态设置经典、横向布局不显示
+const isShowBreadcrumb = computed(() => {
   initRouteSplit(route.path);
   const { layout, isBreadcrumb } = themeConfig.value;
   if (layout === 'classic' || layout === 'transverse') return false;
   else return isBreadcrumb ? true : false;
-		});
+});
-		// 面包屑点击时
+// 面包屑点击时
-		const onBreadcrumbClick = (v: any) => {
+const onBreadcrumbClick = (v: any) => {
   const { redirect, path } = v;
   if (redirect) router.push(redirect);
   else router.push(path);
-		};
+};
-		// 展开/收起左侧菜单点击
+// 展开/收起左侧菜单点击
-		const onThemeConfigChange = () => {
+const onThemeConfigChange = () => {
   themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
   setLocalThemeConfig();
-		};
+};
-		// 存储布局配置
+// 存储布局配置
-		const setLocalThemeConfig = () => {
+const setLocalThemeConfig = () => {
   Local.remove('themeConfig');
   Local.set('themeConfig', themeConfig.value);
-		};
+};
-		// 处理面包屑数据
+// 处理面包屑数据
-		const getBreadcrumbList = (arr: Array<string>) => {
+const getBreadcrumbList = (arr: Array<string>) => {
   arr.forEach((item: any) => {
     state.routeSplit.forEach((v: any, k: number, arrs: any) => {
       if (state.routeSplitFirst === item.path) {
@@ -90,9 +88,9 @@ export default defineComponent({
       }
     });
   });
-		};
+};
-		// 当前路由字符串切割成数组，并删除第一项空内容
+// 当前路由字符串切割成数组，并删除第一项空内容
-		const initRouteSplit = (path: string) => {
+const initRouteSplit = (path: string) => {
   if (!themeConfig.value.isBreadcrumb) return false;
   state.breadcrumbList = [routesList.value[0]];
   state.routeSplit = path.split('/');
@@ -102,23 +100,14 @@ export default defineComponent({
   getBreadcrumbList(routesList.value);
   if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
   if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initRouteSplit(route.path);
-		});
+});
-		// 路由更新时
+// 路由更新时
-		onBeforeRouteUpdate((to) => {
+onBeforeRouteUpdate((to) => {
   initRouteSplit(to.path);
-		});
-		return {
-			onThemeConfigChange,
-			isShowBreadcrumb,
-			themeConfig,
-			onBreadcrumbClick,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/navBars/breadcrumb/closeFull.vue

@@ -6,26 +6,17 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-
+defineOptions({ name: "layoutCloseFull"})
-export default defineComponent({
+const stores = useTagsViewRoutes();
-	name: 'layoutCloseFull',
+const { isTagsViewCurrenFull } = storeToRefs(stores);
-	setup() {
+// 关闭当前全屏
-		const stores = useTagsViewRoutes();
+const onCloseFullscreen = () => {
-		const { isTagsViewCurrenFull } = storeToRefs(stores);
-		// 关闭当前全屏
-		const onCloseFullscreen = () => {
   stores.setCurrenFullscreen(false);
-		};
+};
-		return {
+
-			isTagsViewCurrenFull,
-			onCloseFullscreen,
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/layout/navBars/breadcrumb/index.vue

@@ -7,7 +7,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -22,32 +22,29 @@ import Horizontal from '/@/layout/navMenu/horizontal.vue';
 interface IndexState {
 	menuList: object[];
 }
-
+defineOptions({ name: "layoutBreadcrumbIndex"})
-export default defineComponent({
+const { proxy } = <any>getCurrentInstance();
-	name: 'layoutBreadcrumbIndex',
+const stores = useRoutesList();
-	components: { Breadcrumb, User, Logo, Horizontal },
+const storesThemeConfig = useThemeConfig();
-	setup() {
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { proxy } = <any>getCurrentInstance();
+const { routesList } = storeToRefs(stores);
-		const stores = useRoutesList();
+const route = useRoute();
-		const storesThemeConfig = useThemeConfig();
+const state = reactive<IndexState>({
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { routesList } = storeToRefs(stores);
-		const route = useRoute();
-		const state = reactive<IndexState>({
   menuList: [],
-		});
+});
-		// 设置 logo 显示/隐藏
+const { menuList } = toRefs(state);
-		const setIsShowLogo = computed(() => {
+// 设置 logo 显示/隐藏
+const setIsShowLogo = computed(() => {
   let { isShowLogo, layout } = themeConfig.value;
   return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
-		});
+});
-		// 设置是否显示横向导航菜单
+// 设置是否显示横向导航菜单
-		const isLayoutTransverse = computed(() => {
+const isLayoutTransverse = computed(() => {
   let { layout, isClassicSplitMenu } = themeConfig.value;
   return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
-		});
+});
-		// 设置/过滤路由（非静态路由/是否显示在菜单中）
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
-		const setFilterRoutes = () => {
+const setFilterRoutes = () => {
   let { layout, isClassicSplitMenu } = themeConfig.value;
   if (layout === 'classic' && isClassicSplitMenu) {
     state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
@@ -56,16 +53,16 @@ export default defineComponent({
   } else {
     state.menuList = filterRoutesFun(routesList.value);
   }
-		};
+};
-		// 设置了分割菜单时，删除底下 children
+// 设置了分割菜单时，删除底下 children
-		const delClassicChildren = (arr: Array<object>) => {
+const delClassicChildren = (arr: Array<object>) => {
   arr.map((v: any) => {
     if (v.children) delete v.children;
   });
   return arr;
-		};
+};
-		// 路由过滤递归函数
+// 路由过滤递归函数
-		const filterRoutesFun = (arr: Array<string>) => {
+const filterRoutesFun = (arr: Array<string>) => {
   return arr
     .filter((item: any) => !item.meta.isHide)
     .map((item: any) => {
@@ -73,9 +70,9 @@ export default defineComponent({
       if (item.children) item.children = filterRoutesFun(item.children);
       return item;
     });
-		};
+};
-		// 传送当前子级数据到菜单中
+// 传送当前子级数据到菜单中
-		const setSendClassicChildren = (path: string) => {
+const setSendClassicChildren = (path: string) => {
   const currentPathSplit = path.split('/');
   let currentData: any = {};
   filterRoutesFun(routesList.value).map((v, k) => {
@@ -87,24 +84,17 @@ export default defineComponent({
     }
   });
   return currentData;
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   setFilterRoutes();
   proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
     setFilterRoutes();
   });
-		});
+});
-		// 页面卸载时
+// 页面卸载时
-		onUnmounted(() => {
+onUnmounted(() => {
   proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
-		});
-		return {
-			setIsShowLogo,
-			isLayoutTransverse,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/navBars/breadcrumb/search.vue

@@ -25,7 +25,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -44,22 +44,20 @@ interface Restaurant {
 		title: string;
 	};
 }
-
+defineOptions({ name: "layoutBreadcrumbSearch"})
-export default defineComponent({
+const storesTagsViewRoutes = useTagsViewRoutes();
-	name: 'layoutBreadcrumbSearch',
+const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
-	setup() {
+const layoutMenuAutocompleteRef = ref();
-		const storesTagsViewRoutes = useTagsViewRoutes();
+const { t } = useI18n();
-		const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
+const router = useRouter();
-		const layoutMenuAutocompleteRef = ref();
+const state = reactive<SearchState>({
-		const { t } = useI18n();
-		const router = useRouter();
-		const state = reactive<SearchState>({
   isShowSearch: false,
   menuQuery: '',
   tagsViewList: [],
-		});
+});
-		// 搜索弹窗打开
+const { isShowSearch, menuQuery} =toRefs(state)
-		const openSearch = () => {
+// 搜索弹窗打开
+const openSearch = () => {
   state.menuQuery = '';
   state.isShowSearch = true;
   initTageView();
@@ -68,18 +66,18 @@ export default defineComponent({
       layoutMenuAutocompleteRef.value.focus();
     });
   });
-		};
+};
-		// 搜索弹窗关闭
+// 搜索弹窗关闭
-		const closeSearch = () => {
+const closeSearch = () => {
   state.isShowSearch = false;
-		};
+};
-		// 菜单搜索数据过滤
+// 菜单搜索数据过滤
-		const menuSearch = (queryString: string, cb: Function) => {
+const menuSearch = (queryString: string, cb: Function) => {
   let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
   cb(results);
-		};
+};
-		// 菜单搜索过滤
+// 菜单搜索过滤
-		const createFilter: any = (queryString: string) => {
+const createFilter: any = (queryString: string) => {
   return (restaurant: Restaurant) => {
     return (
       restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
@@ -87,37 +85,27 @@ export default defineComponent({
       t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1
     );
   };
-		};
+};
-		// 初始化菜单数据
+// 初始化菜单数据
-		const initTageView = () => {
+const initTageView = () => {
   if (state.tagsViewList.length > 0) return false;
   tagsViewRoutes.value.map((v: any) => {
     if (!v.meta.isHide) state.tagsViewList.push({ ...v });
   });
-		};
+};
-		// 当前菜单选中时
+// 当前菜单选中时
-		const onHandleSelect = (item: any) => {
+const onHandleSelect = (item: any) => {
   let { path, redirect } = item;
   if (item.meta.isLink && !item.meta.isIframe) window.open(item.meta.isLink);
   else if (redirect) router.push(redirect);
   else router.push(path);
   closeSearch();
-		};
+};
-		// input 失去焦点时
+// input 失去焦点时
-		const onSearchBlur = () => {
+const onSearchBlur = () => {
   closeSearch();
-		};
+};
-		return {
+
-			layoutMenuAutocompleteRef,
-			openSearch,
-			closeSearch,
-			menuSearch,
-			onHandleSelect,
-			onSearchBlur,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/layout/navBars/breadcrumb/setings.vue

@@ -407,8 +407,18 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, reactive, toRefs } from 'vue';
+import {
+  nextTick,
+  onUnmounted,
+  onMounted,
+  getCurrentInstance,
+  defineComponent,
+  computed,
+  reactive,
+  toRefs,
+  ref
+} from 'vue';
 import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -418,23 +428,18 @@ import { Local } from '/@/utils/storage';
 import Watermark from '/@/utils/wartermark';
 import commonFunction from '/@/utils/commonFunction';
 import other from '/@/utils/other';
-
+defineOptions({ name: "layoutBreadcrumbSeting"})
-export default defineComponent({
+const { proxy } = <any>getCurrentInstance();
-	name: 'layoutBreadcrumbSeting',
+const storesThemeConfig = useThemeConfig();
-	setup() {
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { proxy } = <any>getCurrentInstance();
+const { copyText } = commonFunction();
-		const storesThemeConfig = useThemeConfig();
+const isMobile = ref(false);
-		const { themeConfig } = storeToRefs(storesThemeConfig);
+// 获取布局配置信息
-		const { copyText } = commonFunction();
+const getThemeConfig = computed(() => {
-		const state = reactive({
-			isMobile: false,
-		});
-		// 获取布局配置信息
-		const getThemeConfig = computed(() => {
   return themeConfig.value;
-		});
+});
-		// 1、全局主题
+// 1、全局主题
-		const onColorPickerChange = () => {
+const onColorPickerChange = () => {
   if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
   // 颜色加深
   document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
@@ -444,9 +449,9 @@ export default defineComponent({
     document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
   }
   setDispatchThemeConfig();
-		};
+};
-		// 2、菜单 / 顶栏
+// 2、菜单 / 顶栏
-		const onBgColorPickerChange = (bg: string) => {
+const onBgColorPickerChange = (bg: string) => {
   document.documentElement.style.setProperty(`--next-bg-${bg}`, (<any>getThemeConfig.value)[bg]);
   if (bg === 'menuBar') {
     document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, <any>getLightColor(getThemeConfig.value.menuBar, 0.05));
@@ -455,21 +460,21 @@ export default defineComponent({
   onMenuBarGradualChange();
   onColumnsMenuBarGradualChange();
   setDispatchThemeConfig();
-		};
+};
-		// 2、菜单 / 顶栏 --> 顶栏背景渐变
+// 2、菜单 / 顶栏 --> 顶栏背景渐变
-		const onTopBarGradualChange = () => {
+const onTopBarGradualChange = () => {
   setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
-		};
+};
-		// 2、菜单 / 顶栏 --> 菜单背景渐变
+// 2、菜单 / 顶栏 --> 菜单背景渐变
-		const onMenuBarGradualChange = () => {
+const onMenuBarGradualChange = () => {
   setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
-		};
+};
-		// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
-		const onColumnsMenuBarGradualChange = () => {
+const onColumnsMenuBarGradualChange = () => {
   setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
-		};
+};
-		// 2、菜单 / 顶栏 --> 背景渐变函数
+// 2、菜单 / 顶栏 --> 背景渐变函数
-		const setGraduaFun = (el: string, bool: boolean, color: string) => {
+const setGraduaFun = (el: string, bool: boolean, color: string) => {
   setTimeout(() => {
     let els = document.querySelector(el);
     if (!els) return false;
@@ -478,46 +483,46 @@ export default defineComponent({
     else els.setAttribute('style', ``);
     setLocalThemeConfig();
   }, 200);
-		};
+};
-		// 3、界面设置 --> 菜单水平折叠
+// 3、界面设置 --> 菜单水平折叠
-		const onThemeConfigChange = () => {
+const onThemeConfigChange = () => {
   setDispatchThemeConfig();
-		};
+};
-		// 3、界面设置 --> 固定 Header
+// 3、界面设置 --> 固定 Header
-		const onIsFixedHeaderChange = () => {
+const onIsFixedHeaderChange = () => {
   getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
   setLocalThemeConfig();
-		};
+};
-		// 3、界面设置 --> 经典布局分割菜单
+// 3、界面设置 --> 经典布局分割菜单
-		const onClassicSplitMenuChange = () => {
+const onClassicSplitMenuChange = () => {
   getThemeConfig.value.isBreadcrumb = false;
   setLocalThemeConfig();
   proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
-		};
+};
-		// 4、界面显示 --> 侧边栏 Logo
+// 4、界面显示 --> 侧边栏 Logo
-		const onIsShowLogoChange = () => {
+const onIsShowLogoChange = () => {
   getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 面包屑 Breadcrumb
+// 4、界面显示 --> 面包屑 Breadcrumb
-		const onIsBreadcrumbChange = () => {
+const onIsBreadcrumbChange = () => {
   if (getThemeConfig.value.layout === 'classic') {
     getThemeConfig.value.isClassicSplitMenu = false;
   }
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 开启 TagsView 拖拽
+// 4、界面显示 --> 开启 TagsView 拖拽
-		const onSortableTagsViewChange = () => {
+const onSortableTagsViewChange = () => {
   proxy.mittBus.emit('openOrCloseSortable');
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 开启 TagsView 共用
+// 4、界面显示 --> 开启 TagsView 共用
-		const onShareTagsViewChange = () => {
+const onShareTagsViewChange = () => {
   proxy.mittBus.emit('openShareTagsView');
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 灰色模式/色弱模式
+// 4、界面显示 --> 灰色模式/色弱模式
-		const onAddFilterChange = (attr: string) => {
+const onAddFilterChange = (attr: string) => {
   if (attr === 'grayscale') {
     if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
   } else {
@@ -528,91 +533,91 @@ export default defineComponent({
   const appEle: any = document.body;
   appEle.setAttribute('style', `filter: ${cssAttr}`);
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 深色模式
+// 4、界面显示 --> 深色模式
-		const onAddDarkChange = () => {
+const onAddDarkChange = () => {
   const body = document.documentElement as HTMLElement;
   if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
   else body.setAttribute('data-theme', '');
-		};
+};
-		// 4、界面显示 --> 开启水印
+// 4、界面显示 --> 开启水印
-		const onWartermarkChange = () => {
+const onWartermarkChange = () => {
   getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
   setLocalThemeConfig();
-		};
+};
-		// 4、界面显示 --> 水印文案
+// 4、界面显示 --> 水印文案
-		const onWartermarkTextInput = (val: any) => {
+const onWartermarkTextInput = (val: any) => {
   getThemeConfig.value.wartermarkText = verifyAndSpace(val);
   if (getThemeConfig.value.wartermarkText === '') return false;
   if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
   setLocalThemeConfig();
-		};
+};
-		// 5、布局切换
+// 5、布局切换
-		const onSetLayout = (layout: string) => {
+const onSetLayout = (layout: string) => {
   Local.set('oldLayout', layout);
   if (getThemeConfig.value.layout === layout) return false;
   if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
   getThemeConfig.value.layout = layout;
   getThemeConfig.value.isDrawer = false;
   initLayoutChangeFun();
-		};
+};
-		// 设置布局切换函数
+// 设置布局切换函数
-		const initLayoutChangeFun = () => {
+const initLayoutChangeFun = () => {
   onBgColorPickerChange('menuBar');
   onBgColorPickerChange('menuBarColor');
   onBgColorPickerChange('topBar');
   onBgColorPickerChange('topBarColor');
   onBgColorPickerChange('columnsMenuBar');
   onBgColorPickerChange('columnsMenuBarColor');
-		};
+};
-		// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
-		const onDrawerClose = () => {
+const onDrawerClose = () => {
   getThemeConfig.value.isFixedHeaderChange = false;
   getThemeConfig.value.isShowLogoChange = false;
   getThemeConfig.value.isDrawer = false;
   setLocalThemeConfig();
-		};
+};
-		// 布局配置弹窗打开
+// 布局配置弹窗打开
-		const openDrawer = () => {
+const openDrawer = () => {
   getThemeConfig.value.isDrawer = true;
-		};
+};
-		// 触发 store 布局配置更新
+// 触发 store 布局配置更新
-		const setDispatchThemeConfig = () => {
+const setDispatchThemeConfig = () => {
   setLocalThemeConfig();
   setLocalThemeConfigStyle();
-		};
+};
-		// 存储布局配置
+// 存储布局配置
-		const setLocalThemeConfig = () => {
+const setLocalThemeConfig = () => {
   Local.remove('themeConfig');
   Local.set('themeConfig', getThemeConfig.value);
-		};
+};
-		// 存储布局配置全局主题样式（html根标签）
+// 存储布局配置全局主题样式（html根标签）
-		const setLocalThemeConfigStyle = () => {
+const setLocalThemeConfigStyle = () => {
   Local.set('themeConfigStyle', document.documentElement.style.cssText);
-		};
+};
-		// 一键复制配置
+// 一键复制配置
-		const onCopyConfigClick = () => {
+const onCopyConfigClick = () => {
   let copyThemeConfig = Local.get('themeConfig');
   copyThemeConfig.isDrawer = false;
   copyText(JSON.stringify(copyThemeConfig)).then(() => {
     getThemeConfig.value.isDrawer = false;
   });
-		};
+};
-		// 一键恢复默认
+// 一键恢复默认
-		const onResetConfigClick = () => {
+const onResetConfigClick = () => {
   Local.clear();
   window.location.reload();
-		};
+};
-		// 初始化菜单样式等
+// 初始化菜单样式等
-		const initSetStyle = () => {
+const initSetStyle = () => {
   // 2、菜单 / 顶栏 --> 顶栏背景渐变
   onTopBarGradualChange();
   // 2、菜单 / 顶栏 --> 菜单背景渐变
   onMenuBarGradualChange();
   // 2、菜单 / 顶栏 --> 分栏菜单背景渐变
   onColumnsMenuBarGradualChange();
-		};
+};
-		onMounted(() => {
+onMounted(() => {
   nextTick(() => {
     // 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
     if (!Local.get('frequency')) initLayoutChangeFun();
@@ -622,7 +627,7 @@ export default defineComponent({
       getThemeConfig.value.layout = res.layout;
       getThemeConfig.value.isDrawer = false;
       initLayoutChangeFun();
-					state.isMobile = other.isMobile();
+      isMobile.value = other.isMobile();
     });
     setTimeout(() => {
       // 默认样式
@@ -641,37 +646,9 @@ export default defineComponent({
       initSetStyle();
     }, 100);
   });
-		});
+});
-		onUnmounted(() => {
+onUnmounted(() => {
   proxy.mittBus.off('layoutMobileResize', () => {});
-		});
-		return {
-			openDrawer,
-			onColorPickerChange,
-			onBgColorPickerChange,
-			onTopBarGradualChange,
-			onMenuBarGradualChange,
-			onColumnsMenuBarGradualChange,
-			onThemeConfigChange,
-			onIsFixedHeaderChange,
-			onIsShowLogoChange,
-			getThemeConfig,
-			onDrawerClose,
-			onAddFilterChange,
-			onAddDarkChange,
-			onWartermarkChange,
-			onWartermarkTextInput,
-			onSetLayout,
-			setLocalThemeConfig,
-			onClassicSplitMenuChange,
-			onIsBreadcrumbChange,
-			onSortableTagsViewChange,
-			onShareTagsViewChange,
-			onCopyConfigClick,
-			onResetConfigClick,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/layout/navBars/breadcrumb/user.vue

@@ -79,7 +79,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent, watch} from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {ElMessageBox, ElMessage, ElNotification} from 'element-plus';
@@ -96,37 +96,34 @@ import {logout} from "/@/api/login";
 import {removeCache} from "/@/api/system/cache";
 import {noticeStore} from "/@/stores/noticeStore";
 
-
+defineOptions({ name: "layoutBreadcrumbUser"})
-export default defineComponent({
+const { t } = useI18n();
-	name: 'layoutBreadcrumbUser',
+const { proxy } = <any>getCurrentInstance();
-	components: { UserNews, Search },
+const router = useRouter();
-	setup() {
+const route = useRoute();
-		const { t } = useI18n();
+const stores = useUserInfo();
-		const { proxy } = <any>getCurrentInstance();
+const storesThemeConfig = useThemeConfig();
-		const router = useRouter();
+const { userInfos } = storeToRefs(stores);
-    const route = useRoute();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const stores = useUserInfo();
+const searchRef = ref();
-		const storesThemeConfig = useThemeConfig();
+const newPopoverRef=ref();
-		const { userInfos } = storeToRefs(stores);
+const state = reactive({
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const searchRef = ref();
-    const newPopoverRef=ref();
-		const state = reactive({
   isScreenfull: false,
   disabledI18n: 'zh-cn',
   disabledSize: 'large',
-		});
+});
-		// 设置分割样式
+const {isScreenfull, disabledI18n, disabledSize} = toRefs(state)
-		const layoutUserFlexNum = computed(() => {
+// 设置分割样式
+const layoutUserFlexNum = computed(() => {
   let num: string | number = '';
   const { layout, isClassicSplitMenu } = themeConfig.value;
   const layoutArr: string[] = ['defaults', 'columns'];
   if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
   else num = '';
   return num;
-		});
+});
-		// 全屏点击时
+// 全屏点击时
-		const onScreenfullClick = () => {
+const onScreenfullClick = () => {
   if (!screenfull.isEnabled) {
     ElMessage.warning('暂不不支持全屏');
     return false;
@@ -136,13 +133,13 @@ export default defineComponent({
     if (screenfull.isFullscreen) state.isScreenfull = true;
     else state.isScreenfull = false;
   });
-		};
+};
-		// 布局配置 icon 点击时
+// 布局配置 icon 点击时
-		const onLayoutSetingClick = () => {
+const onLayoutSetingClick = () => {
   proxy.mittBus.emit('openSetingsDrawer');
-		};
+};
-    //清除缓存
+//清除缓存
-    const removeCacheClick = ()=>{
+const removeCacheClick = ()=>{
   //清除浏览器缓存
   Session.remove('userMenu');
   //清除后端缓存
@@ -150,9 +147,9 @@ export default defineComponent({
     ElMessage.success('缓存清除成功');
     window.location.reload();
   })
-    };
+};
-		// 下拉菜单点击时
+// 下拉菜单点击时
-		const onHandleCommandClick = (path: string) => {
+const onHandleCommandClick = (path: string) => {
   if (path === 'logOut') {
     ElMessageBox({
       closeOnClickModal: false,
@@ -193,38 +190,38 @@ export default defineComponent({
   } else {
     router.push(path);
   }
-		};
+};
-		// 菜单搜索点击
+// 菜单搜索点击
-		const onSearchClick = () => {
+const onSearchClick = () => {
   searchRef.value.openSearch();
-		};
+};
-    const  hideNews=()=>{
+const  hideNews=()=>{
   debugger
   newPopoverRef.value.hide()
-    }
+}
-		// 组件大小改变
+// 组件大小改变
-		const onComponentSizeChange = (size: string) => {
+const onComponentSizeChange = (size: string) => {
   Local.remove('themeConfig');
   themeConfig.value.globalComponentSize = size;
   Local.set('themeConfig', themeConfig.value);
   initComponentSize();
   window.location.reload();
-		};
+};
-		// 语言切换
+// 语言切换
-		const onLanguageChange = (lang: string) => {
+const onLanguageChange = (lang: string) => {
   Local.remove('themeConfig');
   themeConfig.value.globalI18n = lang;
   Local.set('themeConfig', themeConfig.value);
   proxy.$i18n.locale = lang;
   initI18n();
   other.useTitle();
-		};
+};
-		// 设置 element plus 组件的国际化
+// 设置 element plus 组件的国际化
-		const setI18nConfig = (locale: string) => {
+const setI18nConfig = (locale: string) => {
   proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]);
-		};
+};
-		// 初始化言语国际化
+// 初始化言语国际化
-		const initI18n = () => {
+const initI18n = () => {
   switch (Local.get('themeConfig').globalI18n) {
     case 'zh-cn':
       state.disabledI18n = 'zh-cn';
@@ -239,9 +236,9 @@ export default defineComponent({
       setI18nConfig('zh-tw');
       break;
   }
-		};
+};
-		// 初始化全局组件大小
+// 初始化全局组件大小
-		const initComponentSize = () => {
+const initComponentSize = () => {
   switch (Local.get('themeConfig').globalComponentSize) {
     case 'large':
       state.disabledSize = 'large';
@@ -253,25 +250,25 @@ export default defineComponent({
       state.disabledSize = 'small';
       break;
   }
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   if (Local.get('themeConfig')) {
     initI18n();
     initComponentSize();
   }
-		});
+});
-    const noticeStoreAct = noticeStore()
+const noticeStoreAct = noticeStore()
-    const getMessages = computed(() => {
+const getMessages = computed(() => {
   return noticeStoreAct.message;
-    });
+});
-    watch(getMessages,(nv,ov)=>{
+watch(getMessages,(nv,ov)=>{
   if (!nv || !nv.id) {
     return;
   }
   showNotice(nv)
-    },{ immediate: true, deep: true })
+},{ immediate: true, deep: true })
-    const showNotice = (data:any) => {
+const showNotice = (data:any) => {
   const eln = ElNotification({
     title: '新消息',
     message: `您有一条新消息：【${data.title}】，请点击查看详情。`,
@@ -286,23 +283,7 @@ export default defineComponent({
       eln.close()
     }
   })
-    }
+}
-		return {
-			userInfos,
-			onLayoutSetingClick,
-			onHandleCommandClick,
-			onScreenfullClick,
-			onSearchClick,
-			onComponentSizeChange,
-			onLanguageChange,
-      removeCacheClick,
-      hideNews,
-			searchRef,
-			layoutUserFlexNum,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/layout/navBars/breadcrumb/userNews.vue

@@ -88,25 +88,25 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {reactive, toRefs, defineComponent, computed, watch} from 'vue';
+import {reactive, toRefs, onMounted} from 'vue';
 import {
   listShowNotice,
    unReadCount,
 } from "/@/api/system/notice/sysNotice";
-import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
 import {readNotice} from "/@/api/system/notice/sysNoticeRead";
 import {SysNoticeInfoData} from "/@/views/system/sysNotice/list/component/model";
 import {useRouter} from "vue-router";
-export default defineComponent({
+defineOptions({ name: "layoutBreadcrumbUserNews"})
-  name: 'layoutBreadcrumbUserNews',
+
-  created() {
+onMounted(()=>{
-    this.getUnReadCount()
+  getUnReadCount()
-    this.getData(1)
+  getData(1)
-  },
+})
-  setup() {
+
-    const router = useRouter();
+const router = useRouter();
-    const state = reactive({
+const state = reactive({
   type1Num: 0,
   type2Num: 0,
   // notifyList: [],
@@ -119,28 +119,28 @@ export default defineComponent({
   activeInfo: 1,
   isShowDialog: false,
   barName: "通知"
-    });
+});
-
+const { tabsActive, activeInfo, isShowDialog, count, noticeList} = toRefs(state)
-    /** 改变tab*/
+/** 改变tab*/
-    const handleTabChange = (tabName: number) => {
+const handleTabChange = (tabName: number) => {
   if (tabName === 1) {
     state.barName = "通知"
   } else {
     state.barName = "公告"
   }
   getData(tabName)
-    };
+};
-    //获取维度信息
+//获取维度信息
-    const getUnReadCount = () => {
+const getUnReadCount = () => {
   unReadCount().then((res: any) => {
     if (res.data != null) {
       state.count.notice = res.data.noticeCount || 0
       state.count.notify = res.data.notifyCount || 0
     }
   })
-    }
+}
-    //获取数据
+//获取数据
-    const getData = (barName: number | undefined) => {
+const getData = (barName: number | undefined) => {
   /*    let notifyParam = {
         pageNum: 1,
         pageSize: 5,
@@ -158,20 +158,20 @@ export default defineComponent({
   listShowNotice(noticeParam).then((res: any) => {
     state.noticeList = res.data.list || []
   })
-    };
+};
-    const readAllItem = () => {
+const readAllItem = () => {
 
-    }
+}
-    // 全部已读点击
+// 全部已读点击
-    const onAllReadClick = () => {
+const onAllReadClick = () => {
   state.noticeList = [];
-    };
+};
-    // 前往通知中心点击
+// 前往通知中心点击
-    const onGoToGiteeClick = () => {
+const onGoToGiteeClick = () => {
   /*window.open('https://gitee.com/tiger1103/gfast');*/
   state.isShowDialog = true
-    };
+};
-    const hendleClear = (type: string) => {
+const hendleClear = (type: string) => {
   ElMessageBox.confirm("是否清除全部" + type + "!", '提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
@@ -193,8 +193,8 @@ export default defineComponent({
       .catch(() => {
       });
 
-    };
+};
-    const hendleAllread = (type: string) => {
+const hendleAllread = (type: string) => {
 
   ElMessageBox.confirm("是否将全部" + type + "标记为已读!", '提示', {
     confirmButtonText: '确认',
@@ -208,14 +208,14 @@ export default defineComponent({
       })
       .catch(() => {
       });
-    };
+};
-    const hendleShowMore = () => {
+const hendleShowMore = () => {
  // console.log(emit)
   router.push("/system/sysNotice/show")
-    };
+};
 
 
-    const handleRead = (item: SysNoticeInfoData) => {
+const handleRead = (item: SysNoticeInfoData) => {
   // console.log("handleRead", item)
   let query = {
     noticeId: item.id
@@ -225,22 +225,7 @@ export default defineComponent({
     getData(item.type)
     ElMessage.success("已读");
   })
-    }
+}
-    return {
-      getData,
-      readAllItem,
-      onAllReadClick,
-      onGoToGiteeClick,
-      hendleClear,
-      hendleAllread,
-      hendleShowMore,
-      getUnReadCount,
-      handleRead,
-      ...toRefs(state),
-      handleTabChange
-    };
-  },
-});
 </script>
 
 <style scoped lang="scss">

src/layout/navBars/index.vue

@@ -5,28 +5,19 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, defineComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import BreadcrumbIndex from '/@/layout/navBars/breadcrumb/index.vue';
 import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
-
+defineOptions({ name: "layoutNavBars"})
-export default defineComponent({
+const storesThemeConfig = useThemeConfig();
-	name: 'layoutNavBars',
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	components: { BreadcrumbIndex, TagsView },
+// 是否显示 tagsView
-	setup() {
+const setShowTagsView = computed(() => {
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		// 是否显示 tagsView
-		const setShowTagsView = computed(() => {
   let { layout, isTagsview } = themeConfig.value;
   return layout !== 'classic' && isTagsview;
-		});
-		return {
-			setShowTagsView,
-		};
-	},
 });
 </script>
 

src/layout/navBars/tagsView/contextmenu.vue

@@ -29,12 +29,10 @@
 	</transition>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
-
+defineOptions({ name: "layoutTagsViewContextmenu"})
-export default defineComponent({
+const props = defineProps({
-	name: 'layoutTagsViewContextmenu',
-	props: {
   dropdown: {
     type: Object,
     default: () => {
@@ -43,10 +41,10 @@ export default defineComponent({
         y: 0,
       };
     },
-		},
+  }
-	},
+});
-	setup(props, { emit }) {
+const emit = defineEmits(['currentContextmenuClick']);
-		const state = reactive({
+const state = reactive({
   isShow: false,
   dropdownList: [
     { contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
@@ -62,9 +60,10 @@ export default defineComponent({
   ],
   item: {},
   arrowLeft: 10,
-		});
+});
-		// 父级传过来的坐标 x,y 值
+const { isShow, dropdownList, arrowLeft}=toRefs(state);
-		const dropdowns = computed(() => {
+// 父级传过来的坐标 x,y 值
+const dropdowns = computed(() => {
   // 117 为 `Dropdown 下拉菜单` 的宽度
   if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
     return {
@@ -74,34 +73,34 @@ export default defineComponent({
   } else {
     return props.dropdown;
   }
-		});
+});
-		// 当前项菜单点击
+// 当前项菜单点击
-		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+const onCurrentContextmenuClick = (contextMenuClickId: number) => {
   emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
-		};
+};
-		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
+// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
-		const openContextmenu = (item: any) => {
+const openContextmenu = (item: any) => {
   state.item = item;
   item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
   closeContextmenu();
   setTimeout(() => {
     state.isShow = true;
   }, 10);
-		};
+};
-		// 关闭右键菜单
+// 关闭右键菜单
-		const closeContextmenu = () => {
+const closeContextmenu = () => {
   state.isShow = false;
-		};
+};
-		// 监听页面监听进行右键菜单的关闭
+// 监听页面监听进行右键菜单的关闭
-		onMounted(() => {
+onMounted(() => {
   document.body.addEventListener('click', closeContextmenu);
-		});
+});
-		// 页面卸载时，移除右键菜单监听事件
+// 页面卸载时，移除右键菜单监听事件
-		onUnmounted(() => {
+onUnmounted(() => {
   document.body.removeEventListener('click', closeContextmenu);
-		});
+});
-		// 监听下拉菜单位置
+// 监听下拉菜单位置
-		watch(
+watch(
   () => props.dropdown,
   ({ x }) => {
     if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
@@ -110,16 +109,8 @@ export default defineComponent({
   {
     deep: true,
   }
-		);
+);
-		return {
+defineExpose({openContextmenu})
-			dropdowns,
-			openContextmenu,
-			closeContextmenu,
-			onCurrentContextmenuClick,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/layout/navBars/tagsView/tagsView.vue

@@ -23,7 +23,7 @@
             <SvgIcon
                 name="ele-RefreshRight"
                 class="ml5 layout-navbars-tagsview-ul-li-refresh"
-                @click.stop="refreshCurrentTagsView($route.fullPath)"
+                @click.stop="refreshCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
             />
             <SvgIcon
                 name="ele-Close"
@@ -45,7 +45,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   toRefs,
   reactive,
@@ -101,11 +101,7 @@ interface CurrentContextmenu {
   path: string;
   contextMenuClickId: string | number;
 }
-
+defineOptions({ name: "layoutTagsView"})
-export default defineComponent({
-  name: 'layoutTagsView',
-  components: { Contextmenu },
-  setup() {
     const { proxy } = <any>getCurrentInstance();
     const tagsRefs = ref<any[]>([]);
     const scrollbarRef = ref();
@@ -128,6 +124,7 @@ export default defineComponent({
       tagsViewList: [],
       tagsViewRoutesList: [],
     });
+    const { tagsViewList, dropdown} = toRefs(state)
     // 动态设置 tagsView 风格样式
     const setTagsStyle = computed(() => {
       return themeConfig.value.tagsStyle;
@@ -367,7 +364,7 @@ export default defineComponent({
           // 刷新当前
           if (meta.isDynamic) await router.push({ name, params });
           else await router.push({ path, query });
-          refreshCurrentTagsView(route.fullPath);
+          refreshCurrentTagsView(getThemeConfig.value.isShareTagsView ? path : url);
           break;
         case 1:
           // 关闭当前
@@ -580,25 +577,6 @@ export default defineComponent({
           deep: true,
         }
     );
-    return {
-      isActive,
-      onContextmenu,
-      onTagsClick,
-      tagsRefs,
-      contextmenuRef,
-      scrollbarRef,
-      tagsUlRef,
-      onHandleScroll,
-      getThemeConfig,
-      setTagsStyle,
-      setTagsViewNameI18n,
-      refreshCurrentTagsView,
-      closeCurrentTagsView,
-      onCurrentContextmenuClick,
-      ...toRefs(state),
-    };
-  },
-});
 </script>
 
 <style scoped lang="scss">

src/router/route.ts

@@ -65,7 +65,6 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				path: '/bigUpload',
 				name: 'bigUpload',
 				component: () => import('/@/layout/routerView/parent.vue'),
-				redirect: '/bigUpload',
 				meta:{
 					title: '大文件上传',
 					isLink: '',
@@ -78,8 +77,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				},
 				children:[
 					{
-						path: '/bigUpload',
+						path: '/bigUpload/list',
-						name: 'bigUpload',
+						name: 'bigUploadList',
 						component: () => import('/@/views/bigUpload/index.vue'),
 						meta: {
 							title: '大文件上传',
@@ -574,6 +573,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
 							icon: 'ele-Sunny',
 						},
 					},
+
 					{
 						path: '/demo/pages/iocnfont',
 						name: 'pagesIocnfont',
@@ -589,6 +589,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
 							icon: 'ele-Present',
 						},
 					},
+
 					{
 						path: '/demo/pages/element',
 						name: 'pagesElement',
@@ -813,22 +814,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
 							roles: ['admin'],
 							icon: 'iconfont icon-diannao',
 						},
-					},
+					}
-					{
-						path: '/demo/pages/workflow',
-						name: 'pagesWorkflow',
-						component: () => import('/@/views/pages/workflow/index.vue'),
-						meta: {
-							title: 'message.router.pagesWorkflow',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'ele-Connection',
-						},
-					},
 				],
 			},
 			{

src/views/bigUpload/component/editBigUpload.vue

@@ -18,25 +18,22 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {ref, reactive, defineComponent} from 'vue';
 import {getBigFile, editBigFile} from "/@/api/system/bigFile";
 
 import {ElMessage} from "element-plus";
-export default defineComponent({
+defineOptions({ name: "editBigUpload"})
-  name: "editBigUpload",
+const emit = defineEmits(["success"])
-  props:{},
+const formRef = ref<HTMLElement | null>(null);
-  emits: ["success"],
+const isShowDialog = ref<boolean>(false)
-  setup(prop, {emit}) {
+const ruleForm = reactive<any>({id:0, name:"", describe:""})
-    const formRef = ref<HTMLElement | null>(null);
+const rules = reactive<any>({
-    const isShowDialog = ref<boolean>(false)
-    const ruleForm = reactive<any>({id:0, name:"", describe:""})
-    const rules = reactive<any>({
   name: [
     { required: true, message: "标题不能为空", trigger: "blur" }
   ],
-    })
+})
-    const openDialog = async (id:number) => {
+const openDialog = async (id:number) => {
   resetForm()
   const result = await getBigFile(id).then((res:any) => res.code === 0? res.data || {} : {})
   const {name, describe} = result
@@ -44,19 +41,22 @@ export default defineComponent({
   ruleForm.name = name
   ruleForm.describe = describe
   isShowDialog.value = true
-    }
+}
-    const closeDialog =  () => {
+const closeDialog =  () => {
   isShowDialog.value = false
-    }
+}
 
+defineExpose({
+  openDialog
+})
 
-    const resetForm = () => {
+const resetForm = () => {
   ruleForm.id = 0
   ruleForm.name = ""
   ruleForm.describe = ""
-    }
+}
 
-    const  onSubmit = async () => {
+const  onSubmit = async () => {
   const formWrap = formRef.value as any
   if (!formWrap) return;
 
@@ -72,20 +72,7 @@ export default defineComponent({
       }
     }
   });
-    }
+}
-
-    return {
-      openDialog,
-      closeDialog,
-      isShowDialog,
-      ruleForm,
-      rules,
-      onSubmit,
-      formRef,
-      resetForm
-    }
-  }
-})
 </script>
 
 <style scoped>

src/views/bigUpload/index.vue

@@ -73,7 +73,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
 import { onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
 import getTableData from '/@/views/bigUpload/tableData'
@@ -81,14 +81,7 @@ import {addBigFile, deleteBigFile} from "/@/api/system/bigFile";
 import {ElMessage, ElMessageBox} from "element-plus";
 import EditBigUpload from '/@/views/bigUpload/component/editBigUpload.vue'
 
-
+defineOptions({ name: "bigUpload"})
-export default defineComponent({
-  name: "bigUpload",
-  components:{
-    EditBigUpload
-  },
-  setup() {
-
     const {
       total,
       queryParams,
@@ -98,20 +91,13 @@ export default defineComponent({
       getBigFileList,
       resetBigFileList
     } = getTableData()
-
-
     const editBigUploadRef = ref();
-
-
     const {proxy} = <any>getCurrentInstance();
-
     const selected = ref<number[]>([])
-
     // 文件上传
     const uploadHandle = function () {
       proxy.mittBus.emit("bigUploader.uploadFile")
     }
-
     onMounted(()=> {
       proxy.mittBus.on("bigUploader.uploadFileSuccess", (res:any) => {
         //console.log(res)
@@ -182,26 +168,6 @@ export default defineComponent({
         return ""
       }
     }
-
-
-    return {
-      total,
-      queryParams,
-      tableData,
-      queryRef,
-      resetQuery,
-      getBigFileList,
-      resetBigFileList,
-      uploadHandle,
-      handleSelectionChange,
-      byteText,
-      edit,
-      del,
-      delMult,
-      editBigUploadRef
-    }
-  }
-})
 </script>
 
 <style scoped lang="scss">

src/views/chart/head.vue

@@ -80,15 +80,6 @@ export default defineComponent({
 		animation: masked-animation-data-v-b02d8052 4s linear infinite;
 		-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
 		position: relative;
-		@keyframes masked-animation {
-			0% {
-				background-position: 0 0;
-			}
-			100% {
-				background-position: -100% 0;
-			}
-		}
-		position: relative;
 		&::after {
 			content: '';
 			width: 250px;
@@ -104,4 +95,12 @@ export default defineComponent({
 		}
 	}
 }
+@keyframes masked-animation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
 </style>

src/views/home/index.vue

@@ -65,7 +65,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
 import * as echarts from 'echarts';
 import { storeToRefs } from 'pinia';
@@ -78,18 +78,16 @@ let global: any = {
 	homeCharThree: null,
 	dispose: [null, '', undefined],
 };
+defineOptions({ name: "home"})
 
-export default defineComponent({
+const homeLineRef = ref();
-	name: 'home',
+const homePieRef = ref();
-	setup() {
+const homeBarRef = ref();
-		const homeLineRef = ref();
+const storesTagsViewRoutes = useTagsViewRoutes();
-		const homePieRef = ref();
+const storesThemeConfig = useThemeConfig();
-		const homeBarRef = ref();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-		const storesTagsViewRoutes = useTagsViewRoutes();
+const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const storesThemeConfig = useThemeConfig();
+const state = reactive({
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const state = reactive({
   homeOne: [
     {
       num1: '125,12',
@@ -190,9 +188,10 @@ export default defineComponent({
     bgColor: '',
     color: '#303133',
   },
-		});
+});
-		// 折线图
+const { homeOne,homeThree } = toRefs(state);
-		const initLineChart = () => {
+// 折线图
+const initLineChart = () => {
   if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
   global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
   const option = {
@@ -272,9 +271,9 @@ export default defineComponent({
   };
   (<any>global.homeChartOne).setOption(option);
   (<any>state.myCharts).push(global.homeChartOne);
-		};
+};
-		// 饼图
+// 饼图
-		const initPieChart = () => {
+const initPieChart = () => {
   if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
   global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
   var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
@@ -357,9 +356,9 @@ export default defineComponent({
   };
   (<any>global.homeChartTwo).setOption(option);
   (<any>state.myCharts).push(global.homeChartTwo);
-		};
+};
-		// 柱状图
+// 柱状图
-		const initBarChart = () => {
+const initBarChart = () => {
   if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
   global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
   const option = {
@@ -488,9 +487,9 @@ export default defineComponent({
   };
   (<any>global.homeCharThree).setOption(option);
   (<any>state.myCharts).push(global.homeCharThree);
-		};
+};
-		// 批量设置 echarts resize
+// 批量设置 echarts resize
-		const initEchartsResizeFun = () => {
+const initEchartsResizeFun = () => {
   nextTick(() => {
     for (let i = 0; i < state.myCharts.length; i++) {
       setTimeout(() => {
@@ -498,28 +497,28 @@ export default defineComponent({
       }, i * 1000);
     }
   });
-		};
+};
-		// 批量设置 echarts resize
+// 批量设置 echarts resize
-		const initEchartsResize = () => {
+const initEchartsResize = () => {
   window.addEventListener('resize', initEchartsResizeFun);
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initEchartsResize();
-		});
+});
-		// 由于页面缓存原因，keep-alive
+// 由于页面缓存原因，keep-alive
-		onActivated(() => {
+onActivated(() => {
   initEchartsResizeFun();
-		});
+});
-		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
-		watch(
+watch(
   () => isTagsViewCurrenFull.value,
   () => {
     initEchartsResizeFun();
   }
-		);
+);
-		// 监听 vuex 中是否开启深色主题
+// 监听 vuex 中是否开启深色主题
-		watch(
+watch(
   () => themeConfig.value.isIsDark,
   (isIsDark) => {
     nextTick(() => {
@@ -541,15 +540,7 @@ export default defineComponent({
     deep: true,
     immediate: true,
   }
-		);
+);
-		return {
-			homeLineRef,
-			homePieRef,
-			homeBarRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/views/login/component/account.vue

@@ -80,7 +80,7 @@
   </el-form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   toRefs,
   reactive,
@@ -103,20 +103,17 @@ import { formatAxis } from '/@/utils/formatTime';
 import { NextLoading } from '/@/utils/loading';
 import {captcha, login} from "/@/api/login";
 import GoCaptchaBtn from "/@/components/goCaptcha/GoCaptchaBtn.vue";
-export default defineComponent({
+defineOptions({ name: "loginAccount"})
-	name: 'loginAccount',
+const { t } = useI18n();
-  components: {GoCaptchaBtn},
+const {proxy} = <any>getCurrentInstance();
-	setup() {
+const storesThemeConfig = useThemeConfig();
-		const { t } = useI18n();
+const { themeConfig } = storeToRefs(storesThemeConfig);
-    const {proxy} = <any>getCurrentInstance();
+const route = useRoute();
-		const storesThemeConfig = useThemeConfig();
+const router = useRouter();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
+const loginForm = ref(null)
-		const route = useRoute();
+const checkCaptchaResult = ref('default')
-		const router = useRouter();
+const verifyStatus = ref(0)
-    const loginForm = ref(null)
+const state = reactive({
-    const checkCaptchaResult = ref('default')
-    const verifyStatus = ref(0)
-		const state = reactive({
   isShowPassword: false,
   ruleForm: {
     username: 'demo',
@@ -136,24 +133,25 @@ export default defineComponent({
     signIn: false,
   },
   captchaSrc:'',
-		});
+});
-    onMounted(() => {
+const { isShowPassword,ruleForm,formRules,loading,captchaSrc} = toRefs(state);
+onMounted(() => {
   getCaptcha();
-    });
+});
-    const getCaptcha = () => {
+const getCaptcha = () => {
   // 验证码V1版
   captcha().then((res:any)=>{
     state.captchaSrc = res.data.img
     state.ruleForm.verifyKey = res.data.key
     verifyStatus.value = res.data.verifyStatus
   })
-    };
+};
-		// 时间获取
+// 时间获取
-		const currentTime = computed(() => {
+const currentTime = computed(() => {
   return formatAxis(new Date());
-		});
+});
-		// 登录
+// 登录
-		const onSignIn = async () => {
+const onSignIn = async () => {
   if(state.loading.signIn){
     return
   }
@@ -196,9 +194,9 @@ export default defineComponent({
       })
     }
   })
-		};
+};
-		// 登录成功后的跳转
+// 登录成功后的跳转
-		const signInSuccess = () => {
+const signInSuccess = () => {
   // 初始化登录成功时间问候语
   let currentTimeInfo = currentTime.value;
   // 登录成功，跳到转首页
@@ -218,24 +216,12 @@ export default defineComponent({
   ElMessage.success(`${currentTimeInfo}，${signInText}`);
   // 添加 loading，防止第一次进入界面时出现短暂空白
   NextLoading.start();
-		};
+};
 
-    const handleVerifyCodeConfirm = (data:{key:string,dots:string})=>{
+const handleVerifyCodeConfirm = (data:{key:string,dots:string})=>{
   state.ruleForm.verifyCode = data.dots
   state.ruleForm.verifyKey = data.key
-    }
+}
-
-		return {
-			onSignIn,
-      getCaptcha,
-      checkCaptchaResult,
-      handleVerifyCodeConfirm,
-      loginForm,
-      verifyStatus,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 

src/views/login/component/mobile.vue

@@ -29,8 +29,8 @@
 	</el-form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
+import {ref} from 'vue';
 
 // 定义接口来定义对象的类型
 interface LoginMobileState {
@@ -39,20 +39,11 @@ interface LoginMobileState {
 }
 
 // 定义对象与类型
-const ruleForm: LoginMobileState = {
+const ruleForm = ref<LoginMobileState>({
 	userName: '',
 	code: '',
-};
-
-export default defineComponent({
-	name: 'loginMobile',
-	setup() {
-		const state = reactive({ ruleForm });
-		return {
-			...toRefs(state),
-		};
-	},
 });
+defineOptions({ name: "loginMobile"})
 </script>
 
 <style scoped lang="scss">

src/views/login/component/scan.vue

@@ -5,31 +5,25 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, defineComponent, onMounted } from 'vue';
 import QRCode from 'qrcodejs2-fixes';
-
+defineOptions({ name: "loginScan"})
-export default defineComponent({
+const qrcodeRef = ref<HTMLElement | null>(null);
-	name: 'loginScan',
+// 初始化生成二维码
-	setup() {
+const initQrcode = () => {
-		const qrcodeRef = ref<HTMLElement | null>(null);
-		// 初始化生成二维码
-		const initQrcode = () => {
   (qrcodeRef.value as HTMLElement).innerHTML = '';
   new QRCode(qrcodeRef.value, {
-				text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
+    text: `https://qm.qq.com/cgi-bin/qm/qr?k=CDO9yYdygFMKdQihlUXj4-Y0RDEhPTsh&authKey=vw/uQT5H4L/Kb0zT1gj7dd0PVtUDm9RdWqz4cztJb/QmPaSdyS/yeRHhjZaUj43v&noverify=0`,
     width: 260,
     height: 260,
     colorDark: '#000000',
     colorLight: '#ffffff',
   });
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initQrcode();
-		});
-		return { qrcodeRef };
-	},
 });
 </script>
 

src/views/login/index.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
@@ -54,32 +54,21 @@ interface LoginState {
 	tabsActiveName: string;
 	isScan: boolean;
 }
-
+defineOptions({ name: "loginIndex"})
-export default defineComponent({
+const storesThemeConfig = useThemeConfig();
-	name: 'loginIndex',
+const { themeConfig } = storeToRefs(storesThemeConfig);
-	components: { Account, Mobile, Scan },
+const state = reactive<LoginState>({
-	setup() {
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const state = reactive<LoginState>({
   tabsActiveName: 'account',
   isScan: false,
-		});
+});
-		// 获取布局配置信息
+const { tabsActiveName,isScan } = toRefs(state);
-		const getThemeConfig = computed(() => {
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
   return themeConfig.value;
-		});
+});
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   NextLoading.done();
-		});
-		return {
-			logoMini,
-			loginIconTwo,
-			getThemeConfig,
-			...toRefs(state),
-		};
-	},
 });
 </script>
 

src/views/system/config/component/editConfig.vue

@@ -34,7 +34,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
 import {ElMessage} from "element-plus";
 import {addConfig, editConfig, getConfig} from "/@/api/system/config";
@@ -51,18 +51,16 @@ interface DicState {
 	ruleForm: RuleFormState;
   rules:{}
 }
-
+defineOptions({ name: "apiV1SystemConfigEdit"})
-export default defineComponent({
+const props = defineProps({
-	name: 'systemEditDicData',
-  props:{
   sysYesNoOptions:{
     type:Array,
     default:()=>[]
   }
-  },
+})
-	setup(prop,{emit}) {
+const emit = defineEmits(['dataList'])
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-		const state = reactive<DicState>({
+const state = reactive<DicState>({
   isShowDialog: false,
   ruleForm: {
     configId: 0,
@@ -83,9 +81,10 @@ export default defineComponent({
       { required: true, message: "参数键值不能为空", trigger: "blur" }
     ]
   }
-		});
+});
-		// 打开弹窗
+const { isShowDialog,ruleForm,rules } = toRefs(state);
-		const openDialog = (row: RuleFormState|null) => {
+// 打开弹窗
+const openDialog = (row: RuleFormState|null) => {
   resetForm();
   if (row){
     getConfig(row.configId).then((res:any)=>{
@@ -96,8 +95,9 @@ export default defineComponent({
     state.ruleForm = row;
   }
   state.isShowDialog = true;
-		};
+};
-    const resetForm = ()=>{
+defineExpose({ openDialog})
+const resetForm = ()=>{
   state.ruleForm = {
     configId: 0,
     configName: '',
@@ -106,17 +106,17 @@ export default defineComponent({
     configType: '0',
     remark: '',
   }
-    };
+};
-		// 关闭弹窗
+// 关闭弹窗
-		const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -138,15 +138,5 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/config/index.vue

@@ -8,7 +8,6 @@
                 v-model="tableData.param.configName"
                 placeholder="请输入参数名称"
                 clearable
-                size="default"
                 @keyup.enter.native="dataList"
             />
           </el-form-item>
@@ -17,7 +16,6 @@
                 v-model="tableData.param.configKey"
                 placeholder="请输入参数键名"
                 clearable
-                size="default"
                 @keyup.enter.native="dataList"
             />
           </el-form-item>
@@ -26,7 +24,6 @@
                 v-model="tableData.param.configType"
                 placeholder="系统内置"
                 clearable
-                size="default"
                 style="width: 240px"
             >
               <el-option v-for="dict in sys_yes_no"
@@ -38,7 +35,6 @@
           <el-form-item label="创建时间" prop="dateRange">
             <el-date-picker
                 v-model="tableData.param.dateRange"
-                size="default"
                 style="width: 240px"
                 value-format="YYYY-MM-DD"
                 type="daterange"
@@ -103,7 +99,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
 import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
 import EditConfig from '/@/views/system/config/component/editConfig.vue';
@@ -135,17 +131,13 @@ interface TableDataState {
     };
   };
 }
-
+defineOptions({ name: "apiV1SystemConfigList"})
-export default defineComponent({
+const {proxy} = getCurrentInstance() as any;
-  name: 'apiV1SystemDictDataList',
+const addDicRef = ref();
-  components: { EditConfig },
+const editDicRef = ref();
-  setup() {
+const queryRef = ref();
-    const {proxy} = getCurrentInstance() as any;
+const {sys_yes_no} = proxy.useDict('sys_yes_no')
-    const addDicRef = ref();
+const state = reactive<TableDataState>({
-    const editDicRef = ref();
-    const queryRef = ref();
-    const {sys_yes_no} = proxy.useDict('sys_yes_no')
-    const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -160,27 +152,28 @@ export default defineComponent({
       configType:''
     },
   },
-    });
+});
-    // 初始化表格数据
+const { tableData } = toRefs(state);
-    const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   dataList()
-    };
+};
-    const dataList=()=>{
+const dataList=()=>{
   getConfigList(state.tableData.param).then((res:any)=>{
     state.tableData.data = res.data.list;
     state.tableData.total = res.data.total;
   });
-    };
+};
-    // 打开新增字典弹窗
+// 打开新增字典弹窗
-    const onOpenAddDic = () => {
+const onOpenAddDic = () => {
   editDicRef.value.openDialog();
-    };
+};
-    // 打开修改字典弹窗
+// 打开修改字典弹窗
-    const onOpenEditDic = (row: TableDataRow) => {
+const onOpenEditDic = (row: TableDataRow) => {
   editDicRef.value.openDialog(row);
-    };
+};
-    // 删除字典
+// 删除字典
-    const onRowDel = (row: TableDataRow) => {
+const onRowDel = (row: TableDataRow|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -205,39 +198,23 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   initTableData();
-    });
+});
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   dataList()
-    };
+};
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:TableDataRow[])=> {
+const handleSelectionChange = (selection:TableDataRow[])=> {
   state.ids = selection.map(item => item.configId)
-    };
+};
-    // 参数系统内置字典翻译
+// 参数系统内置字典翻译
-    const typeFormat=(row:TableDataRow) => {
+const typeFormat=(row:TableDataRow) => {
   return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
-    };
+};
-    return {
-      addDicRef,
-      editDicRef,
-      queryRef,
-      sys_yes_no,
-      onOpenAddDic,
-      onOpenEditDic,
-      onRowDel,
-      dataList,
-      resetQuery,
-      handleSelectionChange,
-      typeFormat,
-      ...toRefs(state),
-    };
-  },
-});
 </script>

src/views/system/dept/component/editDept.vue

@@ -71,7 +71,7 @@
   <select-user   ref="selectUserRef"    @selectUser="confirmUser" :selectedUsers="deptUser"></select-user>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
 import {addDept,editDept, getDeptList} from "/@/api/system/dept";
 import {getUserByIds} from '/@/api/system/user';
@@ -101,19 +101,13 @@ interface DeptSate {
 	deptData: Array<TableDataRow>;
   rules: object;
 }
-
+defineOptions({ name: "systemEditDept"})
-export default defineComponent({
+const emit = defineEmits(['deptList'])
-	name: 'systemEditDept',
+const {proxy} = getCurrentInstance() as any;
-  components:{
+const formRef = ref<HTMLElement | null>(null);
-    selectUser,
+const selectUserRef = ref();
-  },
+const  deptUser = ref([]);
-  emits:['deptList'],
+const state = reactive<DeptSate>({
-	setup(prop,{emit}) {
-    const {proxy} = getCurrentInstance() as any;
-    const formRef = ref<HTMLElement | null>(null);
-    const selectUserRef = ref();
-    const  deptUser = ref([]);
-		const state = reactive<DeptSate>({
   isShowDialog: false,
   ruleForm: {
     deptId:0,
@@ -131,9 +125,10 @@ export default defineComponent({
       {required: true, message: "部门名称不能为空", trigger: "blur"},
     ]
   }
-		});
+});
-		// 打开弹窗
+const { isShowDialog, ruleForm, deptData,rules } = toRefs(state);
-		const openDialog = (row?: RuleFormState|number) => {
+// 打开弹窗
+const openDialog = (row?: RuleFormState|number) => {
   resetForm()
   getDeptList().then((res:any)=>{
     state.deptData =  proxy.handleTree(res.data.deptList??[], "deptId","parentId");
@@ -160,17 +155,18 @@ export default defineComponent({
     deptUser.value = [];
   }
   state.isShowDialog = true;
-		};
+};
-		// 关闭弹窗
+defineExpose({openDialog})
-		const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -192,8 +188,8 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.ruleForm = {
     deptId:0,
     parentId: 0, // 上级部门
@@ -204,13 +200,13 @@ export default defineComponent({
     email: '',
     status: 1,
   }
-    };
+};
 
-    const handleClose = (data:any,key:number) => {
+const handleClose = (data:any,key:number) => {
      deptUser.value.splice(key, 1);
      state.ruleForm.leader = deptUser.value.map((item:any) => item.id)
-    };
+};
-    const confirmUser = (data:any[]) => {
+const confirmUser = (data:any[]) => {
   let leaderArr = state.ruleForm.leader??[];
   if(data.length>0){
     data.map((item:any)=>{
@@ -225,26 +221,11 @@ export default defineComponent({
     deptUser.value = []
     state.ruleForm.leader = []
   }
-    };
+};
-    //选择用户
+//选择用户
-    const  handleSelectUser = () =>{
+const  handleSelectUser = () =>{
   selectUserRef.value.openDialog()
-    };
+};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      selectUserRef,
-      formRef,
-      deptUser,
-      confirmUser,
-      handleClose,
-      handleSelectUser,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 <style>
 .u-m-r-10{

src/views/system/dept/index.vue

@@ -57,7 +57,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditDept from '/@/views/system/dept/component/editDept.vue';
@@ -86,14 +86,10 @@ interface TableDataState {
 		};
 	};
 }
-
+defineOptions({ name: "systemDept"})
-export default defineComponent({
+const {proxy} = getCurrentInstance() as any;
-	name: 'systemDept',
+const editDeptRef = ref();
-	components: { EditDept },
+const state = reactive<TableDataState>({
-	setup() {
-    const {proxy} = getCurrentInstance() as any;
-		const editDeptRef = ref();
-		const state = reactive<TableDataState>({
   tableData: {
     data: [],
     loading: false,
@@ -104,27 +100,28 @@ export default defineComponent({
       status:''
     },
   },
-		});
+});
-		// 初始化表格数据
+const { tableData } = toRefs(state);
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   deptList();
-		};
+};
-    const deptList = ()=>{
+const deptList = ()=>{
   getDeptList(state.tableData.param).then((res:any)=>{
     state.tableData.data = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
   });
-    };
+};
-		// 打开新增菜单弹窗
+// 打开新增菜单弹窗
-		const onOpenAddDept = (row?: TableDataRow) => {
+const onOpenAddDept = (row?: TableDataRow) => {
 
   editDeptRef.value.openDialog(row?.deptId);
-		};
+};
-		// 打开编辑菜单弹窗
+// 打开编辑菜单弹窗
-		const onOpenEditDept = (row: TableDataRow) => {
+const onOpenEditDept = (row: TableDataRow) => {
   editDeptRef.value.openDialog(row);
-		};
+};
-		// 删除当前行
+// 删除当前行
-		const onTabelRowDel = (row: TableDataRow) => {
+const onTabelRowDel = (row: TableDataRow) => {
   ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
     confirmButtonText: '删除',
     cancelButtonText: '取消',
@@ -137,19 +134,9 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
-		return {
-			editDeptRef,
-      deptList,
-			onOpenAddDept,
-			onOpenEditDept,
-			onTabelRowDel,
-			...toRefs(state),
-		};
-	},
 });
 </script>

src/views/system/dict/component/editDic.vue

@@ -10,8 +10,8 @@
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="ruleForm.status">
-            <el-radio :label="1" >启用</el-radio>
+            <el-radio :value="1" >启用</el-radio>
-            <el-radio :label="0" >禁用</el-radio>
+            <el-radio :value="0" >禁用</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -28,7 +28,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
 import { getType,addType,editType } from '/@/api/system/dict/type';
 import {ElMessage} from "element-plus";
@@ -44,12 +44,10 @@ interface DicState {
 	ruleForm: RuleFormState;
   rules:{}
 }
-
+defineOptions({ name: "systemEditDic"})
-export default defineComponent({
+const emit = defineEmits(['typeList']);
-	name: 'systemEditDic',
+const formRef = ref<HTMLElement | null>(null);
-	setup(prop,{emit}) {
+const state = reactive<DicState>({
-    const formRef = ref<HTMLElement | null>(null);
-		const state = reactive<DicState>({
   isShowDialog: false,
   ruleForm: {
     dictId:0,
@@ -66,9 +64,10 @@ export default defineComponent({
       { required: true, message: "字典类型不能为空", trigger: "blur" }
     ]
   }
-		});
+});
-		// 打开弹窗
+const { isShowDialog,ruleForm,rules } = toRefs(state);
-		const openDialog = (row: RuleFormState|null) => {
+// 打开弹窗
+const openDialog = (row: RuleFormState|null) => {
   resetForm();
   if (row){
     getType(row.dictId).then((res:any)=>{
@@ -77,8 +76,9 @@ export default defineComponent({
     state.ruleForm = row;
   }
   state.isShowDialog = true;
-		};
+};
-    const resetForm = ()=>{
+defineExpose({ openDialog})
+const resetForm = ()=>{
   state.ruleForm = {
     dictId:0,
     dictName:'',
@@ -86,17 +86,17 @@ export default defineComponent({
     status:1,
     remark:''
   }
-    };
+};
-		// 关闭弹窗
+// 关闭弹窗
-		const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -118,17 +118,6 @@ export default defineComponent({
       }
     }
   });
-		};
+};
 
-
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/dict/component/editDicData.vue

@@ -26,8 +26,8 @@
 
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="ruleForm.status">
-            <el-radio :label="1" >启用</el-radio>
+            <el-radio :value="1" >启用</el-radio>
-            <el-radio :label="0" >禁用</el-radio>
+            <el-radio :value="0" >禁用</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -44,7 +44,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
 import { getData,addData,editData } from '/@/api/system/dict/data';
 import {ElMessage} from "element-plus";
@@ -63,18 +63,16 @@ interface DicState {
 	ruleForm: RuleFormState;
   rules:{}
 }
-
+defineOptions({ name: "systemEditDicData"})
-export default defineComponent({
+const prop = defineProps({
-	name: 'systemEditDicData',
-  props:{
   dictType:{
     type:String,
-      default:()=>''
+    default:''
   }
-  },
+})
-	setup(prop,{emit}) {
+const emit = defineEmits(['dataList']);
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-		const state = reactive<DicState>({
+const state = reactive<DicState>({
   isShowDialog: false,
   ruleForm: {
     dictCode: 0,
@@ -97,9 +95,10 @@ export default defineComponent({
       { required: true, message: "数据顺序不能为空", trigger: "blur" }
     ]
   }
-		});
+});
-		// 打开弹窗
+const { isShowDialog,ruleForm,rules } = toRefs(state);
-		const openDialog = (row: RuleFormState|null) => {
+// 打开弹窗
+const openDialog = (row: RuleFormState|null) => {
   resetForm();
   if (row){
     getData(row.dictCode).then((res:any)=>{
@@ -108,8 +107,9 @@ export default defineComponent({
     state.ruleForm = row;
   }
   state.isShowDialog = true;
-		};
+};
-    const resetForm = ()=>{
+defineExpose({ openDialog})
+const resetForm = ()=>{
   state.ruleForm = {
     dictCode: 0,
     dictLabel: '',
@@ -120,17 +120,17 @@ export default defineComponent({
     remark: '',
     dictType:prop.dictType
   }
-    };
+};
-		// 关闭弹窗
+// 关闭弹窗
-		const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -152,15 +152,5 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/dict/dataList.vue

@@ -91,15 +91,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
 import EditDic from '/@/views/system/dict/component/editDicData.vue';
 import {getDataList,deleteData} from "/@/api/system/dict/data";
 import { useRoute } from 'vue-router';
 
-
-
 // 定义接口来定义对象的类型
 interface TableDataRow {
   dictCode: number;
@@ -126,16 +124,12 @@ interface TableDataState {
     };
   };
 }
-
+defineOptions({ name: "apiV1SystemDictDataList"})
-export default defineComponent({
+const route = useRoute();
-  name: 'apiV1SystemDictDataList',
+const addDicRef = ref();
-  components: { EditDic },
+const editDicRef = ref();
-  setup() {
+const queryRef = ref();
-    const route = useRoute();
+const state = reactive<TableDataState>({
-    const addDicRef = ref();
-    const editDicRef = ref();
-    const queryRef = ref();
-    const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -149,27 +143,28 @@ export default defineComponent({
       status:''
     },
   },
-    });
+});
-    // 初始化表格数据
+const { tableData } = toRefs(state);
-    const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   dataList()
-    };
+};
-    const dataList=()=>{
+const dataList=()=>{
   getDataList(state.tableData.param).then((res:any)=>{
     state.tableData.data = res.data.list;
     state.tableData.total = res.data.total;
   });
-    };
+};
-    // 打开新增字典弹窗
+// 打开新增字典弹窗
-    const onOpenAddDic = () => {
+const onOpenAddDic = () => {
   editDicRef.value.openDialog();
-    };
+};
-    // 打开修改字典弹窗
+// 打开修改字典弹窗
-    const onOpenEditDic = (row: TableDataRow) => {
+const onOpenEditDic = (row: TableDataRow) => {
   editDicRef.value.openDialog(row);
-    };
+};
-    // 删除字典
+// 删除字典
-    const onRowDel = (row: TableDataRow) => {
+const onRowDel = (row: TableDataRow|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -194,35 +189,21 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   const dictType = route.params && route.params.dictType;
   state.tableData.param.dictType = <string>dictType
   initTableData();
-    });
+});
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   dataList()
-    };
+};
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:TableDataRow[])=> {
+const handleSelectionChange = (selection:TableDataRow[])=> {
   state.ids = selection.map(item => item.dictCode)
-    };
+};
-    return {
-      addDicRef,
-      editDicRef,
-      queryRef,
-      onOpenAddDic,
-      onOpenEditDic,
-      onRowDel,
-      dataList,
-      resetQuery,
-      handleSelectionChange,
-      ...toRefs(state),
-    };
-  },
-});
 </script>

src/views/system/dict/index.vue

@@ -109,7 +109,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
 import EditDic from '/@/views/system/dict/component/editDic.vue';
@@ -141,15 +141,11 @@ interface TableDataState {
 		};
 	};
 }
-
+defineOptions({ name: "systemDic"})
-export default defineComponent({
+const addDicRef = ref();
-	name: 'systemDic',
+const editDicRef = ref();
-	components: { EditDic },
+const queryRef = ref();
-	setup() {
+const state = reactive<TableDataState>({
-		const addDicRef = ref();
-		const editDicRef = ref();
-    const queryRef = ref();
-		const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -164,27 +160,28 @@ export default defineComponent({
       dateRange:[],
     },
   },
-		});
+});
-		// 初始化表格数据
+const { tableData } = toRefs(state);
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   typeList()
-		};
+};
-    const typeList=()=>{
+const typeList=()=>{
   getTypeList(state.tableData.param).then((res:any)=>{
     state.tableData.data = res.data.dictTypeList;
     state.tableData.total = res.data.total;
   });
-    };
+};
-		// 打开新增字典弹窗
+// 打开新增字典弹窗
-		const onOpenAddDic = () => {
+const onOpenAddDic = () => {
   editDicRef.value.openDialog();
-		};
+};
-		// 打开修改字典弹窗
+// 打开修改字典弹窗
-		const onOpenEditDic = (row: TableDataRow) => {
+const onOpenEditDic = (row: TableDataRow) => {
   editDicRef.value.openDialog(row);
-		};
+};
-		// 删除字典
+// 删除字典
-		const onRowDel = (row: TableDataRow) => {
+const onRowDel = (row: TableDataRow|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -209,33 +206,20 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   typeList()
-    };
+};
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:TableDataRow[])=> {
+const handleSelectionChange = (selection:TableDataRow[])=> {
   state.ids = selection.map(item => item.dictId)
-    };
+};
-		return {
+
-			addDicRef,
-			editDicRef,
-      queryRef,
-			onOpenAddDic,
-			onOpenEditDic,
-			onRowDel,
-      typeList,
-      resetQuery,
-      handleSelectionChange,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/menu/component/editMenu.vue

@@ -25,9 +25,9 @@
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
 						<el-form-item label="菜单类型" prop="menuType">
 							<el-radio-group v-model="ruleForm.menuType">
-                <el-radio label="0">目录</el-radio>
+                <el-radio value="0">目录</el-radio>
-                <el-radio label="1">菜单</el-radio>
+                <el-radio value="1">菜单</el-radio>
-                <el-radio label="2">按钮</el-radio>
+                <el-radio value="2">按钮</el-radio>
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
@@ -98,7 +98,7 @@
                   <el-radio
                       v-for="dict in visibleOptions"
                       :key="dict.value"
-                      :label="dict.value"
+                      :value="dict.value"
                   >{{ dict.label }}</el-radio>
 								</el-radio-group>
 							</el-form-item>
@@ -106,32 +106,32 @@
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
 							<el-form-item label="页面缓存">
 								<el-radio-group v-model="ruleForm.isKeepAlive">
-									<el-radio :label="1">缓存</el-radio>
+									<el-radio :value="1">缓存</el-radio>
-									<el-radio :label="0">不缓存</el-radio>
+									<el-radio :value="0">不缓存</el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
 							<el-form-item label="是否固定">
 								<el-radio-group v-model="ruleForm.isAffix">
-									<el-radio :label="1">固定</el-radio>
+									<el-radio :value="1">固定</el-radio>
-									<el-radio :label="0">不固定</el-radio>
+									<el-radio :value="0">不固定</el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
 							<el-form-item label="是否外链">
 								<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
-									<el-radio :label="1">是</el-radio>
+									<el-radio :value="1">是</el-radio>
-									<el-radio :label="0">否</el-radio>
+									<el-radio :value="0">否</el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
 							<el-form-item label="是否内嵌">
 								<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
-									<el-radio :label="1">是</el-radio>
+									<el-radio :value="1">是</el-radio>
-									<el-radio :label="0">否</el-radio>
+									<el-radio :value="0">否</el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
@@ -148,18 +148,14 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
 import IconSelector from '/@/components/iconSelector/index.vue';
 import { refreshBackEndControlRoutes } from "/@/router/backEnd";
 import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
 import {ElMessage} from "element-plus"
-
+defineOptions({ name: "systemEditMenu"})
-
+const props = defineProps({
-export default defineComponent({
-	name: 'systemEditMenu',
-	components: { IconSelector },
-  props:{
   visibleOptions:{
     type:Array,
     default:()=>[],
@@ -168,11 +164,11 @@ export default defineComponent({
     type:String,
     default:()=>'add'
   }
-  },
+})
-	setup(props,{emit}) {
+const emit = defineEmits(['menuList']);
-    const ruleFormRef = ref<HTMLElement | null>(null);
+const ruleFormRef = ref<HTMLElement | null>(null);
-    const {proxy} = getCurrentInstance() as any;
+const {proxy} = getCurrentInstance() as any;
-		const state = reactive({
+const state = reactive({
   loading: false,
   isShowDialog: false,
   roles:[],
@@ -215,10 +211,10 @@ export default defineComponent({
     ],
   },
   menuData: [], // 上级菜单数据
-		});
+});
-
+const {ruleForm, rules, menuData, loading, isShowDialog, roles} = toRefs(state);
-		// 打开弹窗
+// 打开弹窗
-		const openDialog = (row: any) => {
+const openDialog = (row: any) => {
   initForm();
   nextTick(()=>{
     //获取角色信息
@@ -260,22 +256,22 @@ export default defineComponent({
     state.isShowDialog = true;
     state.loading = false;
   })
-		};
+};
-		// 关闭弹窗
+// 关闭弹窗
-		const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 是否内嵌下拉改变
+// 是否内嵌下拉改变
-		const onSelectIframeChange = () => {
+const onSelectIframeChange = () => {
   if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
   else state.ruleForm.isLink = 0;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(ruleFormRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -304,12 +300,12 @@ export default defineComponent({
       }
     }
   })
-		};
+};
-    // 重置菜单session
+// 重置菜单session
-    const resetMenuSession = () => {
+const resetMenuSession = () => {
   refreshBackEndControlRoutes();
-    };
+};
-    const initForm=()=>{
+const initForm=()=>{
   state.ruleForm =  {
     id:undefined,
     pid: 0, // 上级菜单
@@ -329,17 +325,6 @@ export default defineComponent({
     linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
     isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
   }
-    };
+};
-		return {
+defineExpose({ openDialog, resetMenuSession})
-      ruleFormRef,
-			openDialog,
-			closeDialog,
-			onSelectIframeChange,
-			onCancel,
-			onSubmit,
-      resetMenuSession,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/menu/index.vue

@@ -80,38 +80,36 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref} from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditMenu from '/@/views/system/menu/component/editMenu.vue';
 import {delMenu, getMenuList} from "/@/api/system/menu";
-export default defineComponent({
+defineOptions({ name: "apiV1SystemAuthMenuList"})
-	name: 'apiV1SystemAuthMenuList',
+const editMenuRef = ref();
-	components: { EditMenu },
+const state = reactive({
-	setup() {
-		const editMenuRef = ref();
-		const state = reactive({
   queryParams:{
     title:"",
     component:""
   },
   menuTableData:[],
-    });
+});
-    const {proxy} = getCurrentInstance() as any;
+const {queryParams,menuTableData} = toRefs(state);
-    const {sys_show_hide} = proxy.useDict('sys_show_hide')
+const {proxy} = getCurrentInstance() as any;
-    const acType = ref('add')
+const {sys_show_hide} = proxy.useDict('sys_show_hide')
-		// 打开新增菜单弹窗
+const acType = ref('add')
-		const onOpenAddMenu = (row:any) => {
+// 打开新增菜单弹窗
+const onOpenAddMenu = (row:any) => {
   acType.value = 'add'
   editMenuRef.value.openDialog(row);
-		};
+};
-		// 打开编辑菜单弹窗
+// 打开编辑菜单弹窗
-		const onOpenEditMenu = (row: any) => {
+const onOpenEditMenu = (row: any) => {
   acType.value='edit'
   editMenuRef.value.openDialog(row);
-		};
+};
-		// 删除当前行
+// 删除当前行
-		const onTabelRowDel = (row: any) => {
+const onTabelRowDel = (row: any) => {
   ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
     confirmButtonText: '删除',
     cancelButtonText: '取消',
@@ -125,33 +123,19 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-    const formatIsHide = (row:any)=>{
+const formatIsHide = (row:any)=>{
   return proxy.selectDictLabel(unref(sys_show_hide), ''+row.isHide);
-    };
+};
-    onBeforeMount(()=>{
+onBeforeMount(()=>{
   menuList()
-    });
+});
-    const handleQuery=() => {
+const handleQuery=() => {
   menuList();
-    };
+};
-    const menuList = ()=>{
+const menuList = ()=>{
   getMenuList(state.queryParams).then(res=>{
     state.menuTableData = proxy.handleTree(res.data.rules??[], "id","pid");
   })
-    };
+};
-		return {
-			editMenuRef,
-			onOpenAddMenu,
-			onOpenEditMenu,
-			onTabelRowDel,
-      formatIsHide,
-      menuList,
-      handleQuery,
-			...toRefs(state),
-      sys_show_hide,
-      acType
-		};
-	},
-});
 </script>

src/views/system/monitor/loginLog/index.vue

@@ -9,7 +9,6 @@
                 placeholder="请输入登录地址"
                 clearable
                 style="width: 180px;"
-                size="default"
                 @keyup.enter.native="dataList"
             />
           </el-form-item>
@@ -20,7 +19,6 @@
                 placeholder="请输入登录地点"
                 clearable
                 style="width: 180px;"
-                size="default"
                 @keyup.enter.native="dataList"
             />
           </el-form-item>
@@ -31,7 +29,6 @@
                 placeholder="请输入用户名称"
                 clearable
                 style="width: 180px;"
-                size="default"
                 @keyup.enter.native="dataList"
             />
           </el-form-item>
@@ -41,7 +38,6 @@
                 v-model="tableData.param.status"
                 placeholder="登录状态"
                 clearable
-                size="default"
                 style="width: 180px"
             >
               <el-option
@@ -56,7 +52,6 @@
           <el-form-item label="登录时间" prop="dateRange">
             <el-date-picker
                 v-model="tableData.param.dateRange"
-                size="default"
                 style="width: 240px"
                 value-format="YYYY-MM-DD"
                 type="daterange"
@@ -117,7 +112,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue';
 import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
 import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog';
@@ -152,14 +147,11 @@ interface TableDataState {
     };
   };
 }
-
+defineOptions({ name: "apiV1SystemLoginLogList"})
-export default defineComponent({
+const {proxy} = getCurrentInstance() as any;
-  name: 'apiV1SystemLoginLogList',
+const queryRef = ref();
-  setup() {
+const {admin_login_status} = proxy.useDict('admin_login_status')
-    const {proxy} = getCurrentInstance() as any;
+const state = reactive<TableDataState>({
-    const queryRef = ref();
-    const {admin_login_status} = proxy.useDict('admin_login_status')
-    const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -175,19 +167,20 @@ export default defineComponent({
       userName:''
     },
   },
-    });
+});
-    // 初始化表格数据
+const { tableData } = toRefs(state);
-    const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   dataList()
-    };
+};
-    const dataList=()=>{
+const dataList=()=>{
   logList(state.tableData.param).then((res:any)=>{
     state.tableData.data = res.data.list;
     state.tableData.total = res.data.total;
   });
-    };
+};
-    // 删除日志
+// 删除日志
-    const onRowDel = (row: TableDataRow) => {
+const onRowDel = (row: TableDataRow|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -212,9 +205,9 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    // 清空日志
+// 清空日志
-    const onRowClear = () => {
+const onRowClear = () => {
   ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
@@ -227,36 +220,23 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   initTableData();
-    });
+});
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   dataList()
-    };
+};
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:TableDataRow[])=> {
+const handleSelectionChange = (selection:TableDataRow[])=> {
   state.ids = selection.map(item => item.infoId)
-    };
+};
-    // 登录状态字典翻译
+// 登录状态字典翻译
-    const statusFormat = (row:TableDataRow) => {
+const statusFormat = (row:TableDataRow) => {
   return proxy.selectDictLabel(unref(admin_login_status), row.status);
-    };
+};
-    return {
-      queryRef,
-      onRowDel,
-      dataList,
-      resetQuery,
-      handleSelectionChange,
-      statusFormat,
-      onRowClear,
-      admin_login_status,
-      ...toRefs(state),
-    };
-  },
-});
 </script>

src/views/system/monitor/operLog/component/detail.vue

@@ -48,7 +48,7 @@
     </el-drawer>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
 import {
   getSysOperLog
@@ -57,21 +57,18 @@ import {
   SysOperLogInfoData,
   SysOperLogEditState,
 } from "/@/views/system/monitor/operLog/component/model"
-export default defineComponent({
+defineOptions({ name: "apiV1SystemSysOperLogDetail"})
-  name:"apiV1SystemSysOperLogDetail",
+const props = defineProps({
-  components:{
-  },
-  props:{
   requestMethodOptions:{
     type:Array,
     default:()=>[]
   },
-  },
+})
-  setup(props,{emit}) {
+const emit = defineEmits(['getSysDeptItemsDeptName'])
-    const {proxy} = <any>getCurrentInstance()
+const {proxy} = <any>getCurrentInstance()
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-    const menuRef = ref();
+const menuRef = ref();
-    const state = reactive<SysOperLogEditState>({
+const state = reactive<SysOperLogEditState>({
   loading:false,
   isShowDialog: false,
   formData: {
@@ -111,9 +108,10 @@ export default defineComponent({
       { required: true, message: "操作状态（0正常 1异常）不能为空", trigger: "blur" }
     ],
   }
-    });
+});
-    // 打开弹窗
+const {isShowDialog,formData} = toRefs(state);
-    const openDialog = (row?: SysOperLogInfoData) => {
+// 打开弹窗
+const openDialog = (row?: SysOperLogInfoData) => {
   resetForm();
   if(row) {
     getSysOperLog(row.operId!).then((res:any)=>{
@@ -122,16 +120,17 @@ export default defineComponent({
     })
   }
   state.isShowDialog = true;
-    };
+};
-    // 关闭弹窗
+defineExpose({ openDialog})
-    const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   state.isShowDialog = false;
-    };
+};
-    // 取消
+// 取消
-    const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-    };
+};
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.formData = {
     operId: undefined,
     title: undefined,
@@ -154,23 +153,11 @@ export default defineComponent({
       deptName:undefined,    // 部门名称
     },
   }
-    };
+};
-    //关联sys_dept表选项
+//关联sys_dept表选项
-    const getSysDeptItemsDeptName = () => {
+const getSysDeptItemsDeptName = () => {
   emit("getSysDeptItemsDeptName")
-    }
+}
-    return {
-      proxy,
-      openDialog,
-      closeDialog,
-      onCancel,
-      menuRef,
-      formRef,
-      getSysDeptItemsDeptName,
-      ...toRefs(state),
-    };
-  }
-})
 </script>
 <style scoped>
 .system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){

src/views/system/monitor/operLog/index.vue

@@ -43,7 +43,6 @@
                     v-model="tableData.param.operName"
                     placeholder="请输入操作人员"
                     clearable
-                    size="small"
                     @keyup.enter.native="sysOperLogList"
                 />
               </el-form-item>
@@ -165,7 +164,7 @@
     ></apiV1SystemSysOperLogDetail>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import {ItemOptions} from "/@/api/items";
 import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
 import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
@@ -180,40 +179,35 @@ import {
   SysOperLogTableDataState,
 } from "/@/views/system/monitor/operLog/component/model"
 import apiV1SystemSysOperLogDetail from "/@/views/system/monitor/operLog/component/detail.vue"
-export default defineComponent({
+defineOptions({ name: "apiV1SystemSysOperLogList"})
-  name: "apiV1SystemSysOperLogList",
+const {proxy} = <any>getCurrentInstance()
-  components:{
+const loading = ref(false)
-    apiV1SystemSysOperLogDetail
+const queryRef = ref()
-  },
+const editRef = ref();
-  setup() {
+const detailRef = ref();
-    const {proxy} = <any>getCurrentInstance()
+// 是否显示所有搜索选项
-    const loading = ref(false)
+const showAll =  ref(false)
-    const queryRef = ref()
+// 非单个禁用
-    const editRef = ref();
+const single = ref(true)
-    const detailRef = ref();
+// 非多个禁用
-    // 是否显示所有搜索选项
+const multiple =ref(true)
-    const showAll =  ref(false)
+const word = computed(()=>{
-    // 非单个禁用
-    const single = ref(true)
-    // 非多个禁用
-    const multiple =ref(true)
-    const word = computed(()=>{
   if(showAll.value === false) {
     //对文字进行处理
     return "展开搜索";
   } else {
     return "收起搜索";
   }
-    })
+})
-    // 字典选项数据
+// 字典选项数据
-    const {
+const {
   sys_oper_log_type,
-    } = proxy.useDict(
+} = proxy.useDict(
   'sys_oper_log_type',
-    )
+)
-    // deptNameOptions关联表数据
+// deptNameOptions关联表数据
-    const deptNameOptions = ref<Array<ItemOptions>>([])
+const deptNameOptions = ref<Array<ItemOptions>>([])
-    const state = reactive<SysOperLogTableDataState>({
+const state = reactive<SysOperLogTableDataState>({
   operIds:[],
   tableData: {
     data: [],
@@ -229,23 +223,24 @@ export default defineComponent({
       dateRange: []
     },
   },
-    });
+});
-    // 页面加载时
+const { tableData } = toRefs(state);
-    onMounted(() => {
+// 页面加载时
+onMounted(() => {
   initTableData();
-    });
+});
-    // 初始化表格数据
+// 初始化表格数据
-    const initTableData = () => {
+const initTableData = () => {
   sysOperLogList()
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   sysOperLogList()
-    };
+};
-    // 获取列表数据
+// 获取列表数据
-    const sysOperLogList = ()=>{
+const sysOperLogList = ()=>{
   loading.value = true
   listSysOperLog(state.tableData.param).then((res:any)=>{
     let list = res.data.list??[];
@@ -253,32 +248,32 @@ export default defineComponent({
     state.tableData.total = res.data.total;
     loading.value = false
   })
-    };
+};
-    const toggleSearch = () => {
+const toggleSearch = () => {
   showAll.value = !showAll.value;
-    }
+}
-    // 请求方式字典翻译
+// 请求方式字典翻译
-    const requestMethodFormat = (row:SysOperLogTableColumns) => {
+const requestMethodFormat = (row:SysOperLogTableColumns) => {
   return proxy.selectDictLabel(sys_oper_log_type.value, row.requestMethod);
-    }
+}
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
+const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
   state.operIds = selection.map(item => item.operId)
   single.value = selection.length!=1
   multiple.value = !selection.length
-    }
+}
-    const handleAdd =  ()=>{
+const handleAdd =  ()=>{
   editRef.value.openDialog()
-    }
+}
-    const handleUpdate = (row: SysOperLogTableColumns) => {
+const handleUpdate = (row: SysOperLogTableColumns) => {
   if(!row){
     row = state.tableData.data.find((item:SysOperLogTableColumns)=>{
       return item.operId ===state.operIds[0]
     }) as SysOperLogTableColumns
   }
   editRef.value.openDialog(toRaw(row));
-    };
+};
-    const handleDelete = (row: SysOperLogTableColumns) => {
+const handleDelete = (row: SysOperLogTableColumns|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -303,9 +298,9 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    }
+}
-    // 清空日志
+// 清空日志
-    const onRowClear = () => {
+const onRowClear = () => {
   ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
@@ -318,37 +313,10 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    const handleView = (row:SysOperLogTableColumns)=>{
+const handleView = (row:SysOperLogTableColumns)=>{
   detailRef.value.openDialog(toRaw(row));
-    }
+}
-    return {
-      proxy,
-      editRef,
-      detailRef,
-      showAll,
-      loading,
-      single,
-      multiple,
-      word,
-      queryRef,
-      resetQuery,
-      sysOperLogList,
-      toggleSearch,
-      requestMethodFormat,
-      sys_oper_log_type,
-      //关联表数据选项
-      deptNameOptions,
-      handleSelectionChange,
-      handleAdd,
-      handleUpdate,
-      handleDelete,
-      handleView,
-      onRowClear,
-      ...toRefs(state),
-    }
-  }
-})
 </script>
 <style lang="scss" scoped>
 .colBlock {

src/views/system/monitor/server/index.vue

@@ -318,10 +318,8 @@
 							detail: {
 								valueAnimation: true,
 								formatter: '{value}%',
-								textStyle: {
                 fontSize: 36,
                 color: 'red',
-								},
 								offsetCenter: ['0', '80%'],    //表盘数据(30%)位置
 							},
 							// data: [
@@ -369,10 +367,8 @@
 							detail: {
 								valueAnimation: true,
 								formatter: '{value}%',
-								textStyle: {
                 fontSize: 36,
                 color: 'red',
-								},
 								offsetCenter: ['0', '80%'],    //表盘数据(30%)位置
 							},
 							// data: [

src/views/system/monitor/userOnline/index.vue

@@ -4,10 +4,10 @@
       <div class="system-user-search mb15">
         <el-form :model="tableData.param" ref="queryRef" :inline="true">
           <el-form-item label="登录IP" prop="ipaddr">
-            <el-input size="default" v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
+            <el-input v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
           </el-form-item>
           <el-form-item label="用户名称" prop="userName">
-            <el-input size="default" v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
+            <el-input v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
           </el-form-item>
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" @click="getList">
@@ -57,7 +57,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
 import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
 import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";
@@ -86,12 +86,9 @@ interface TableDataState {
     };
   };
 }
-
+defineOptions({ name: "apiV1SystemOnlineList"})
-export default defineComponent({
+const queryRef = ref();
-  name: 'apiV1SystemOnlineList',
+const state = reactive<TableDataState>({
-  setup() {
-    const queryRef = ref();
-    const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -104,25 +101,26 @@ export default defineComponent({
       pageSize: 10,
     },
   },
-    });
+});
-    // 初始化表格数据
+const { tableData} =toRefs(state)
-    const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   getList()
-    };
+};
-    const getList = ()=>{
+const getList = ()=>{
   listSysUserOnline(state.tableData.param).then(res=>{
     state.tableData.data = res.data.list??[];
     state.tableData.total = res.data.total;
   })
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   getList()
-    };
+};
-    // 删除岗位
+// 删除岗位
-    const onRowDel = (row: TableData) => {
+const onRowDel = (row: TableData|null) => {
   let msg = '你确定要强制退出用户登录？';
   let ids:number[] = [] ;
   if(row){
@@ -147,33 +145,21 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    };
+};
-    // 分页改变
+// 分页改变
-    const onHandleSizeChange = (val: number) => {
+const onHandleSizeChange = (val: number) => {
   state.tableData.param.pageSize = val;
-    };
+};
-    // 分页改变
+// 分页改变
-    const onHandleCurrentChange = (val: number) => {
+const onHandleCurrentChange = (val: number) => {
   state.tableData.param.pageNum = val;
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   initTableData();
-    });
-    // 多选框选中数据
-    const handleSelectionChange = (selection:Array<TableData>)=> {
-      state.ids = selection.map(item => item.id)
-    };
-    return {
-      queryRef,
-      onRowDel,
-      onHandleSizeChange,
-      onHandleCurrentChange,
-      getList,
-      handleSelectionChange,
-      resetQuery,
-      ...toRefs(state),
-    };
-  },
 });
+// 多选框选中数据
+const handleSelectionChange = (selection:Array<TableData>)=> {
+  state.ids = selection.map(item => item.id)
+};
 </script>

src/views/system/personal/index.vue

@@ -203,7 +203,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
 import { formatAxis } from '/@/utils/formatTime';
 import { storeToRefs } from 'pinia';
@@ -224,18 +224,16 @@ interface PersonalState {
   newsInfoList: any;
   recommendList: any;
 }
+defineOptions({ name: "personals"})
 
-export default defineComponent({
+const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
-  name: 'personals',
+const {proxy} = <any>getCurrentInstance();
-  setup() {
+const stores = useUserInfo();
-    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+const { userInfos } = storeToRefs(stores);
-    const {proxy} = <any>getCurrentInstance();
+const dataParam = reactive({
-    const stores = useUserInfo();
-    const { userInfos } = storeToRefs(stores);
-    const dataParam = reactive({
   token:getToken(),
-    })
+})
-    const state = reactive<PersonalState>({
+const state = reactive<PersonalState>({
   newsInfoList,
   recommendList,
   imageUrl:'',
@@ -252,10 +250,10 @@ export default defineComponent({
     lastLoginIp:'',
     lastLoginTime:''
   },
-    });
+});
 
-    // const  handleUpload =
+const { deptName,roles,imageUrl,personalForm} = toRefs(state);
-    const handleUpload = () => {
+const handleUpload = () => {
   // console.log(state.personalForm)
   editPersonal(state.personalForm).then((res:any)=>{
       const userInfo = res.data.userInfo
@@ -267,26 +265,26 @@ export default defineComponent({
       useUserInfo().setUserInfos();
       ElMessage.success('已更新');
   });
-    };
+};
-    // 当前时间提示语
+// 当前时间提示语
-    const currentTime = computed(() => {
+const currentTime = computed(() => {
 
   return formatAxis(new Date());
-    });
+});
-    const handleAvatarSuccess: UploadProps['onSuccess'] = (
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
     response,
     uploadFile
-    ) => {
+) => {
    if(response.code == 0){
       state.imageUrl = response.data.path;
       state.personalForm.avatar = response.data.path;
      handleUpload();
    }
 
-    };
+};
 
-    /** 重置密码按钮操作 */
+/** 重置密码按钮操作 */
-    const handleEditPass = ()=> {
+const handleEditPass = ()=> {
   ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消"
@@ -299,9 +297,9 @@ export default defineComponent({
       ElMessage.success("修改成功，新密码是：" + value);
     });
   }).catch(() => {});
-    };
+};
-    // 初始化用户数据
+// 初始化用户数据
-    const initUserInfo = () => {
+const initUserInfo = () => {
   getPersonalInfo().then((res:any)=>{
     const user = res.data.user;
     state.imageUrl = user.avatar;
@@ -320,24 +318,12 @@ export default defineComponent({
     state.roles = res.data.roles;
   })
 
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   initUserInfo();
-    });
-    return {
-      proxy,
-      baseURL,
-      userInfos,
-      currentTime,
-      handleUpload,
-      handleEditPass,
-      handleAvatarSuccess,
-      dataParam,
-      ...toRefs(state),
-    };
-  },
 });
+
 </script>
 
 <style scoped lang="scss">

src/views/system/post/component/editPost.vue

@@ -31,7 +31,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
 import {addPost, editPost} from "/@/api/system/post";
 import {ElMessage} from "element-plus";
@@ -57,13 +57,11 @@ interface PostState {
 	};
   rules: object;
 }
-
+defineOptions({ name: "systemEditPost"})
-export default defineComponent({
+const emit = defineEmits(['getPostList']);
-	name: 'systemEditPost',
+const formRef = ref<HTMLElement | null>(null);
-	setup(props,{emit}) {
+const menuRef = ref();
-    const formRef = ref<HTMLElement | null>(null);
+const state = reactive<PostState>({
-    const menuRef = ref();
-		const state = reactive<PostState>({
   loading:false,
   isShowDialog: false,
   formData: {
@@ -93,25 +91,27 @@ export default defineComponent({
     children: 'children',
     label: 'title',
   },
-		});
+});
-		// 打开弹窗
+const {isShowDialog,formData,loading,rules} = toRefs(state);
-		const openDialog = (row?: DialogRow) => {
+// 打开弹窗
+const openDialog = (row?: DialogRow) => {
   resetForm();
   if(row) {
     state.formData = row;
   }
   state.isShowDialog = true;
-		};
+};
-		// 关闭弹窗
+defineExpose({ openDialog})
-		const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -138,8 +138,8 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.menuCheckStrictly=false;
   state.menuExpand = false;
   state.menuNodeAll = false;
@@ -151,19 +151,7 @@ export default defineComponent({
     status:1,
     remark:'',
   }
-    };
+};
-
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      menuRef,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/views/system/post/index.vue

@@ -70,7 +70,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditPost from '/@/views/system/post/component/editPost.vue';
@@ -100,14 +100,10 @@ interface TableDataState {
 		};
 	};
 }
-
+defineOptions({ name: "apiV1SystemPostList"})
-export default defineComponent({
+const addPostRef = ref();
-	name: 'apiV1SystemPostList',
+const editPostRef = ref();
-	components: {EditPost},
+const state = reactive<TableDataState>({
-	setup() {
-		const addPostRef = ref();
-		const editPostRef = ref();
-		const state = reactive<TableDataState>({
   ids:[],
   tableData: {
     data: [],
@@ -121,27 +117,28 @@ export default defineComponent({
       pageSize: 10,
     },
   },
-		});
+});
-		// 初始化表格数据
+const { tableData } = toRefs(state);
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   postList()
-		};
+};
-    const postList = ()=>{
+const postList = ()=>{
   getPostList(state.tableData.param).then(res=>{
     state.tableData.data = res.data.postList??[];
     state.tableData.total = res.data.total;
   })
-    };
+};
-		// 打开新增岗位弹窗
+// 打开新增岗位弹窗
-		const onOpenAddPost = () => {
+const onOpenAddPost = () => {
   editPostRef.value.openDialog();
-		};
+};
-		// 打开修改岗位弹窗
+// 打开修改岗位弹窗
-		const onOpenEditPost = (row: Object) => {
+const onOpenEditPost = (row: Object) => {
   editPostRef.value.openDialog(toRaw(row));
-		};
+};
-		// 删除岗位
+// 删除岗位
-		const onRowDel = (row: any) => {
+const onRowDel = (row: any) => {
   let msg = '你确定要删除所选岗位？';
   let ids:number[] = [] ;
   if(row){
@@ -166,35 +163,21 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleSizeChange = (val: number) => {
+const onHandleSizeChange = (val: number) => {
   state.tableData.param.pageSize = val;
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleCurrentChange = (val: number) => {
+const onHandleCurrentChange = (val: number) => {
   state.tableData.param.pageNum = val;
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
-    // 多选框选中数据
-    const handleSelectionChange = (selection:Array<TableData>)=> {
-      state.ids = selection.map(item => item.postId)
-    };
-		return {
-			addPostRef,
-			editPostRef,
-			onOpenAddPost,
-			onOpenEditPost,
-			onRowDel,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-      postList,
-      handleSelectionChange,
-			...toRefs(state),
-		};
-	},
 });
+// 多选框选中数据
+const handleSelectionChange = (selection:Array<TableData>)=> {
+  state.ids = selection.map(item => item.postId)
+};
 </script>

src/views/system/role/component/dataScope.vue

@@ -33,7 +33,7 @@
           <template #header>
               <el-radio-group v-model="optionsActionValue" @change="setOptionsActionValueHandle">
                 <template v-for="item in dataScopeOptions" :key="item.value">
-                  <el-radio v-if="item.value!='2'" :value="item.value" >{{item.label}}</el-radio>
+                  <el-radio v-if="item.value.toString()!='2'" :value="item.value" >{{item.label}}</el-radio>
                 </template>
               </el-radio-group>
           </template>
@@ -42,7 +42,7 @@
               <el-radio-group v-model="menuAuthData[scope.row.id]">
                 <template v-for="item in dataScopeOptions" :key="item.value">
                   <el-radio :value="item.value" @change="setOptionsItemHandle(item.value,scope.row.id)">
-                    <el-badge v-if="item.value=='2' && menuAuthData[scope.row.id]=='2'" type="success" :value="getDeptLen(scope.row.id)" :max="99" class="item" :show-zero="false">{{item.label}}</el-badge>
+                    <el-badge v-if="item.value.toString()=='2' && menuAuthData[scope.row.id]=='2'" type="success" :value="getDeptLen(scope.row.id)" :max="99" class="item" :show-zero="false">{{item.label}}</el-badge>
                     <span v-else>{{item.label}}</span>
                   </el-radio>
                 </template>
@@ -91,40 +91,31 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent, getCurrentInstance, nextTick, reactive, ref} from "vue";
+import {getCurrentInstance, nextTick, reactive, ref} from "vue";
 import {dataScope, getRole, roleDeptTreeSelect, roleMenuTreeSelect} from "/@/api/system/role";
 import {ElMessage} from "element-plus/es";
-import {findChildrenByPid, flattenTree} from "/@/utils/gfast";
+defineOptions({ name: "dataScope"})
-import * as events from "events";
+const emit = defineEmits(["getRoleList"])
-
+const tableRef = ref()
-export default defineComponent({
+const openSelDept = ref(false);
-  name: "dataScope",
+const {proxy} = getCurrentInstance() as any;
-  computed: {
+const openDataScope = ref(false)
-    events() {
+const deptExpand =  ref(true)
-      return events
+const deptNodeAll = ref(false)
-    }
+const deptOptions = ref<Array<any>>([])
-  },
+const menuOptions = ref([])
-  setup(props,{emit}){
+const deptRef = ref();
-    const tableRef = ref()
+const formRef = ref();
-    const openSelDept = ref(false);
+const deptCheckStrictly = ref(false)
-    const {proxy} = getCurrentInstance() as any;
+const optionsActionValue = ref("0")
-    const openDataScope = ref(false)
+const setDeptId = ref(0)
-    const deptExpand =  ref(true)
+const deptProps = ref({
-    const deptNodeAll = ref(false)
-    const deptOptions = ref<Array<any>>([])
-    const menuOptions = ref([])
-    const deptRef = ref();
-    const formRef = ref();
-    const deptCheckStrictly = ref(false)
-    const optionsActionValue = ref("0")
-    const setDeptId = ref(0)
-    const deptProps = ref({
   children: "children",
       label: "deptName"
-    })
+})
-    // 数据范围选项
+// 数据范围选项
-    const dataScopeOptions = ref([
+const dataScopeOptions = ref([
   {
     value: 1,
     label: "全部"
@@ -145,10 +136,10 @@ export default defineComponent({
     value: 2,
     label: "自定义"
   }
-    ])
+])
-    const menuAuthData = ref([])
+const menuAuthData = ref([])
-    const deptAuthData = ref([])
+const deptAuthData = ref([])
-    const form = reactive({
+const form = reactive({
   roleId:undefined,
   roleName:'',
   authData:[{
@@ -156,26 +147,26 @@ export default defineComponent({
     scope:'0',
     deptIds:[]
   }]
-    })
+})
-    const menuTableData = ref([])
+const menuTableData = ref([])
-    const menuTableList = ref([])
+const menuTableList = ref([])
-    // 树权限（展开/折叠）
+// 树权限（展开/折叠）
-    const handleCheckedTreeExpand = (value:any) => {
+const handleCheckedTreeExpand = (value:any) => {
   let treeList = deptOptions.value;
   for (let i = 0; i < treeList.length; i++) {
     deptRef.value.store.nodesMap[treeList[i].deptId].expanded = value;
   }
-    }
+}
-    // 树权限（全选/全不选）
+// 树权限（全选/全不选）
-    const handleCheckedTreeNodeAll = (value:any) => {
+const handleCheckedTreeNodeAll = (value:any) => {
   deptRef.value.setCheckedNodes(value ? deptOptions.value: []);
-    }
+}
-    /** 树权限（父子联动） */
+/** 树权限（父子联动） */
-    const handleCheckedTreeConnect = (value:any) => {
+const handleCheckedTreeConnect = (value:any) => {
   deptCheckStrictly.value = value ? true : false;
-    }
+}
-    /** 提交按钮（数据权限） */
+/** 提交按钮（数据权限） */
-    const submitDataScope = () => {
+const submitDataScope = () => {
   form.authData = []
   //获取选中的菜单
   let rows = tableRef.value.getSelectionRows()
@@ -197,15 +188,15 @@ export default defineComponent({
     }
   });
 
-    }
+}
-    const cancelDataScope = () => {
+const cancelDataScope = () => {
   closeDialog();
-    };
+};
-    const submitDept = ()=>{
+const submitDept = ()=>{
   deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
   cancelDept()
-    }
+}
-    const submitSonMenuDept = ()=>{
+const submitSonMenuDept = ()=>{
   const checkedDeptId = getDeptAllCheckedKeys() as never;
   deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
   //查询所有子级
@@ -214,13 +205,13 @@ export default defineComponent({
     deptAuthData.value[item.id] = getDeptAllCheckedKeys() as never;
   })
   cancelDept()
-    }
+}
-    const cancelDept = () => {
+const cancelDept = () => {
   deptCheckStrictly.value= false
   openSelDept.value = false
-    };
+};
-    // 打开弹窗
+// 打开弹窗
-    const openDialog = (row: any) => {
+const openDialog = (row: any) => {
   openDataScope.value = true;
   roleDeptTreeSelect().then(response => {
     deptOptions.value = response.data.depts||[];
@@ -235,17 +226,18 @@ export default defineComponent({
     })
     getMenuTreeselect(row.id)
   }
-    };
+};
-    /** 根据角色ID查询部门树结构 */
+defineExpose({ openDialog})
-    const getRoleDeptTreeselect = (menuId:any) =>{
+/** 根据角色ID查询部门树结构 */
+const getRoleDeptTreeselect = (menuId:any) =>{
   nextTick(()=>{
     deptRef.value?.setCheckedKeys([], false)
     if(deptAuthData.value[menuId]){
       deptRef.value.setCheckedKeys(deptAuthData.value[menuId], true);
     }
   })
-    }
+}
-    const getMenuTreeselect = (roleId:number) =>{
+const getMenuTreeselect = (roleId:number) =>{
   roleMenuTreeSelect(roleId).then(res=>{
     menuTableData.value = proxy.handleTree(res.data.rules??[], "id","pid");
     menuTableList.value = proxy.flattenTree(menuTableData.value)
@@ -273,35 +265,36 @@ export default defineComponent({
       })
     }
   })
-    }
+}
-    // 关闭弹窗
+
-    const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   openDataScope.value = false;
-    };
+};
-    // 所有部门节点数据
+// 所有部门节点数据
-    const getDeptAllCheckedKeys = () => {
+const getDeptAllCheckedKeys = () => {
   // 目前被选中的部门节点
   let checkedKeys = deptRef.value.getCheckedKeys();
   return checkedKeys;
-    }
+}
-    const resetForm = ()=>{
+const resetForm = ()=>{
   form.roleId=undefined
   form.roleName=''
   form.authData = []
   deptCheckStrictly.value= false
   menuAuthData.value = []
   deptAuthData.value = []
-    };
+};
-    const handleSelectionChange = (val: any[]) => {
+const handleSelectionChange = (val: any[]) => {
 
-    }
+}
-    const setOptionsActionValueHandle = (value:any)=>{
+const setOptionsActionValueHandle = (value:any)=>{
   //遍历选择所有菜单
   menuTableList.value.map((item:any)=>{
     menuAuthData.value[item.id] = value as never
   })
-    }
+}
-    const setOptionsItemHandle = (value:any,id:any)=>{
+const setOptionsItemHandle = (value:any,id:any)=>{
   const children = proxy.findChildrenByPid(id,menuTableList.value)
   //设置行选中
   menuTableList.value.some((item:any)=>{
@@ -318,54 +311,19 @@ export default defineComponent({
   children.map((item:any)=>{
     menuAuthData.value[item.id] = value as never
   })
-    }
+}
-    const openSelDeptHandler = (id:any)=>{
+const openSelDeptHandler = (id:any)=>{
   openSelDept.value = true
   setDeptId.value = id
   getRoleDeptTreeselect(id)
-    }
+}
-    const getDeptLen = (id:any)=>{
+const getDeptLen = (id:any)=>{
   if(deptAuthData.value[id]){
     return (<Array<any>>deptAuthData.value[id]).length
   }
   return 0
-    }
+}
-    return {
+
-      tableRef,
-      openSelDept,
-      openDialog,
-      dataScopeOptions,
-      deptExpand,
-      openDataScope,
-      deptNodeAll,
-      deptOptions,
-      deptCheckStrictly,
-      deptProps,
-      menuOptions,
-      deptRef,
-      formRef,
-      optionsActionValue,
-      cancelDataScope,
-      submitDataScope,
-      handleCheckedTreeExpand,
-      handleCheckedTreeNodeAll,
-      handleCheckedTreeConnect,
-      menuTableData,
-      handleSelectionChange,
-      setOptionsActionValueHandle,
-      menuAuthData,
-      setOptionsItemHandle,
-      openSelDeptHandler,
-      cancelDept,
-      submitDept,
-      submitSonMenuDept,
-      deptAuthData,
-      setDeptId,
-      getDeptLen,
-      form
-    }
-  }
-})
 </script>
 
 <style scoped lang="scss">

src/views/system/role/component/editRole.vue

@@ -43,22 +43,22 @@
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
             <el-form-item label="有效时间">
               <el-radio-group v-model="formData.effectiveType">
-                <el-radio :label="0">不设置</el-radio>
+                <el-radio :value="0">不设置</el-radio>
-                <el-radio :label="1">按起止日期</el-radio>
+                <el-radio :value="1">按起止日期</el-radio>
-                <el-radio :label="2">按时间段</el-radio>
+                <el-radio :value="2">按时间段</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="formData.effectiveType===2">
             <el-form-item label="每周">
               <el-checkbox-group v-model="formData.weekDay">
-                <el-checkbox :label="1" >周一</el-checkbox>
+                <el-checkbox :value="1" >周一</el-checkbox>
-                <el-checkbox :label="2" >周二</el-checkbox>
+                <el-checkbox :value="2" >周二</el-checkbox>
-                <el-checkbox :label="3" >周三</el-checkbox>
+                <el-checkbox :value="3" >周三</el-checkbox>
-                <el-checkbox :label="4" >周四</el-checkbox>
+                <el-checkbox :value="4" >周四</el-checkbox>
-                <el-checkbox :label="5" >周五</el-checkbox>
+                <el-checkbox :value="5" >周五</el-checkbox>
-                <el-checkbox :label="6" >周六</el-checkbox>
+                <el-checkbox :value="6" >周六</el-checkbox>
-                <el-checkbox :label="0" >周日</el-checkbox>
+                <el-checkbox :value="0" >周日</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
           </el-col>
@@ -120,7 +120,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
 import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
 import {ElMessage} from "element-plus";
@@ -162,20 +162,18 @@ interface RoleState {
 	};
   rules: object;
 }
-
+defineOptions({ name: "systemEditRole"})
-export default defineComponent({
+const props = defineProps({
-	name: 'systemEditRole',
-  props:{
   roleData:{
     type:Array,
     default:()=>[]
   }
-  },
+})
-	setup(props,{emit}) {
+const emit = defineEmits(['getRoleList']);
-    const {proxy} = getCurrentInstance() as any;
+const {proxy} = getCurrentInstance() as any;
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-    const menuRef = ref();
+const menuRef = ref();
-		const state = reactive<RoleState>({
+const state = reactive<RoleState>({
   loading:false,
   isShowDialog: false,
   formData: {
@@ -209,9 +207,9 @@ export default defineComponent({
     label: 'title',
     disabled:'disabled'
   },
-		});
+});
-		// 打开弹窗
+// 打开弹窗
-		const openDialog = (row?: DialogRow) => {
+const openDialog = (row?: DialogRow) => {
   resetForm();
   getMenuData();
   if(row) {
@@ -226,17 +224,18 @@ export default defineComponent({
     })
   }
   state.isShowDialog = true;
-		};
+};
-		// 关闭弹窗
+defineExpose({ openDialog})
-		const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -266,9 +265,9 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-		// 获取菜单结构数据
+// 获取菜单结构数据
-		const getMenuData = () => {
+const getMenuData = () => {
   getRoleParams().then((res:any)=>{
     const menus = res.data.menu??[]
     const accessMenus = res.data.accessMenus??[]
@@ -277,8 +276,8 @@ export default defineComponent({
     })
     state.menuData = proxy.handleTree(menus, "id","pid");
   })
-		};
+};
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.menuCheckStrictly=false;
   state.menuExpand = false;
   state.menuNodeAll = false;
@@ -298,54 +297,40 @@ export default defineComponent({
     ],
     dateRange:[]
   }
-    };
+};
-    /** 树权限（展开/折叠）*/
+const {formData, menuData,menuExpand,menuNodeAll,menuCheckStrictly,menuProps,rules,loading,isShowDialog} = toRefs(state)
-    const handleCheckedTreeExpand = (value:any) => {
+/** 树权限（展开/折叠）*/
+const handleCheckedTreeExpand = (value:any) => {
   let treeList = state.menuData;
   for (let i = 0; i < treeList.length; i++) {
     menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
   }
-    }
+}
 
-    /** 树权限（全选/全不选） */
+/** 树权限（全选/全不选） */
-    const handleCheckedTreeNodeAll = (value:any) => {
+const handleCheckedTreeNodeAll = (value:any) => {
     menuRef.value.setCheckedNodes(value ? state.menuData : []);
-    }
+}
 
-    /** 树权限（父子联动） */
+/** 树权限（父子联动） */
-    const handleCheckedTreeConnect = (value:any) => {
+const handleCheckedTreeConnect = (value:any) => {
   state.menuCheckStrictly = value ? true : false;
-    }
+}
 
-    /** 所有菜单节点数据 */
+/** 所有菜单节点数据 */
-    function getMenuAllCheckedKeys() {
+function getMenuAllCheckedKeys() {
   // 目前被选中的菜单节点
   let checkedKeys = menuRef.value.getCheckedKeys();
   // 半选中的菜单节点
   let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
   return checkedKeys;
-    }
+}
 
-    // 重置菜单session
+// 重置菜单session
-    const resetMenuSession = () => {
+const resetMenuSession = () => {
   refreshBackEndControlRoutes();
-    };
+};
-		return {
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      menuRef,
-      formRef,
-      handleCheckedTreeExpand,
-      handleCheckedTreeNodeAll,
-      handleCheckedTreeConnect,
-      resetMenuSession,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 
 <style scoped lang="scss">

src/views/system/role/index.vue

@@ -7,7 +7,7 @@
             <el-input v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
           </el-form-item>
           <el-form-item label="状态">
-            <el-select placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable style="width:120px;">
+            <el-select placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable style="width: 120px;">
               <el-option label="启用"  value="1" />
               <el-option label="禁用"  value="0" />
             </el-select>
@@ -77,7 +77,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
 import { ElMessageBox, ElMessage,ElLoading } from 'element-plus';
 import EditRole from '/@/views/system/role/component/editRole.vue';
@@ -118,22 +118,18 @@ interface TableDataState {
 		};
 	};
 }
-
+defineOptions({ name: "apiV1SystemRoleList"})
-export default defineComponent({
+const selectUserRef = ref()
-	name: 'apiV1SystemRoleList',
+const {proxy} = getCurrentInstance() as any;
-	components: {selectUser, EditRole,DataScope,UserList},
+const {sys_user_sex} = proxy.useDict('sys_user_sex')
-	setup() {
+const addRoleRef = ref();
-    const selectUserRef = ref()
+const userListRef = ref();
-    const {proxy} = getCurrentInstance() as any;
+const editRoleRef = ref();
-    const {sys_user_sex} = proxy.useDict('sys_user_sex')
+const dataScopeRef =ref();
-		const addRoleRef = ref();
+const roleListData = ref<Array<TableData>>()
-		const userListRef = ref();
+const roleUsers = ref([])
-		const editRoleRef = ref();
+const setRole = ref(0)
-    const dataScopeRef =ref();
+const state = reactive<TableDataState>({
-    const roleListData = ref<Array<TableData>>()
-    const roleUsers = ref([])
-    const setRole = ref(0)
-		const state = reactive<TableDataState>({
   isShowDialog: false,
   deptData: [],
   userListParam: {
@@ -151,12 +147,13 @@ export default defineComponent({
       pageSize: 10,
     },
   },
-    });
+});
-		// 初始化表格数据
+const { tableData,selectRow,deptData,userListParam,isShowDialog} = toRefs(state);
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   roleList()
-		};
+};
-    const roleList = ()=>{
+const roleList = ()=>{
   const data: Array<TableData> = [];
   getRoleList(state.tableData.param).then(res=>{
     const list = res.data.list??[]
@@ -176,9 +173,9 @@ export default defineComponent({
     roleListData.value = data
     state.tableData.data = proxy.handleTree(data??[], "id","pid","children",true);
   })
-    };
+};
-		// 打开角色用户列表
+// 打开角色用户列表
-		const onOpenUserList = (row: TableData) => {
+const onOpenUserList = (row: TableData) => {
   state.selectRow = row
   state.userListParam.roleId = row.id
   if (state.deptData.length == 0){
@@ -189,21 +186,21 @@ export default defineComponent({
   }else{
     state.isShowDialog = true
   }
-		};
+};
-		// 打开新增角色弹窗
+// 打开新增角色弹窗
-		const onOpenAddRole = () => {
+const onOpenAddRole = () => {
   editRoleRef.value.openDialog();
-		};
+};
-		// 打开修改角色弹窗
+// 打开修改角色弹窗
-		const onOpenEditRole = (row: Object|undefined) => {
+const onOpenEditRole = (row: Object|undefined) => {
   editRoleRef.value.openDialog(toRaw(row));
-		};
+};
-    //数据权限设置弹窗
+//数据权限设置弹窗
-    const handleDataScope=(row:any)=>{
+const handleDataScope=(row:any)=>{
   dataScopeRef.value.openDialog(toRaw(row))
-    }
+}
-    //用户授权
+//用户授权
-    const handleUserScope = ((row:any)=>{
+const handleUserScope = ((row:any)=>{
   const ld = ElLoading.service()
   setRole.value = row.id
   getUsersById(row.id).then((res:any)=>{
@@ -211,9 +208,9 @@ export default defineComponent({
     roleUsers.value=res.data.userList??[]
     selectUserRef.value.openDialog()
   })
-    })
+})
-		// 删除角色
+// 删除角色
-		const onRowDel = (row: any) => {
+const onRowDel = (row: any) => {
   ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
@@ -227,23 +224,23 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleSizeChange = (val: number) => {
+const onHandleSizeChange = (val: number) => {
   state.tableData.param.pageSize = val;
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleCurrentChange = (val: number) => {
+const onHandleCurrentChange = (val: number) => {
   state.tableData.param.pageNum = val;
-		};
+};
-    const userList = ()=>{
+const userList = ()=>{
   userListRef.value.userList();
-    };
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    const handleCommand = (command: string )=>{
+const handleCommand = (command: string )=>{
   let commandArr = command.split('_')
   let row = roleListData.value?.filter((item:TableData)=>{
     return item.id==parseInt(commandArr[1])
@@ -259,8 +256,8 @@ export default defineComponent({
       handleUserScope(row)
       break
   }
-    }
+}
-    const confirmUser = (data:any[]) => {
+const confirmUser = (data:any[]) => {
   if(data.length>0){
     const ids = roleUsers.value.map((item:any)=>{
       return item.id
@@ -275,8 +272,8 @@ export default defineComponent({
   }else{
     roleUsers.value = []
   }
-    };
+};
-    const setRoleUser = ()=>{
+const setRoleUser = ()=>{
   const ids = roleUsers.value.map((item:any)=>{
     return item.id
   })
@@ -284,31 +281,7 @@ export default defineComponent({
   setRoleUsers({roleId:setRole.value,userIds:ids}).then((res:any)=>{
     roleList()
   })
-    }
+}
-		return {
-			addRoleRef,
-			editRoleRef,
-      dataScopeRef,
-      sys_user_sex,
-      selectUserRef,
-			userList,
-			onOpenUserList,
-			onOpenAddRole,
-			onOpenEditRole,
-			onRowDel,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-      roleList,
-      handleDataScope,
-      handleUserScope,
-      handleCommand,
-      roleUsers,
-      confirmUser,
-      setRoleUser,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 <style scoped lang="scss">
 .auth-action{

src/views/system/sysJob/list/component/detail.vue

@@ -76,28 +76,25 @@
     </el-drawer>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
+import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
-  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
+import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
-  import {
+import {
   listSysJob,
   getSysJob,
   delSysJob,
   addSysJob,
   updateSysJob,
   getUserList, getJobLogs, delSysJobLog,
-  } from "/@/api/system/tools/job/sysJob";
+} from "/@/api/system/tools/job/sysJob";
-  import {
+import {
   SysJobTableColumns,
   SysJobInfoData,
   SysJobTableDataState,
   SysJobEditState, SysJobLog, SysJobLogData,
-  } from "/@/views/system/sysJob/list/component/model"
+} from "/@/views/system/sysJob/list/component/model"
-  export default defineComponent({
+defineOptions({ name: "apiV1SystemSysJobDetail"})
-    name:"apiV1SystemSysJobDetail",
+const props = defineProps({
-    components:{
-    },
-    props:{
   jobGroupOptions:{
     type:Array,
     default:()=>[]
@@ -110,14 +107,13 @@
     type:Array,
     default:()=>[]
   },
-    },
+})
-    setup(props,{emit}) {
+const {proxy} = <any>getCurrentInstance()
-      const {proxy} = <any>getCurrentInstance()
+const formRef = ref<HTMLElement | null>(null);
-      const formRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
-      const menuRef = ref();
+// 非多个禁用
-      // 非多个禁用
+const multiple =ref(true)
-      const multiple =ref(true)
+const logList = reactive<SysJobLog>({
-      const logList = reactive<SysJobLog>({
   logIds:[],
   data: [],
   loading: false,
@@ -127,8 +123,8 @@
     targetName: undefined
   },
   total: 0
-      })
+})
-      const state = reactive<SysJobEditState>({
+const state = reactive<SysJobEditState>({
   loading:false,
   isShowDialog: false,
   formData: {
@@ -151,36 +147,38 @@
   },
   // 表单校验
   rules: {}
-      });
+});
-        // 打开弹窗
+const { isShowDialog,formData} = toRefs(state)
-        const openDialog = (row?: SysJobInfoData) => {
+// 打开弹窗
-          resetForm();
+const openDialog = (row?: SysJobInfoData) => {
-          if(row) {
+resetForm();
-            getSysJob(row.jobId!).then((res:any)=>{
+if(row) {
+getSysJob(row.jobId!).then((res:any)=>{
   state.formData = res.data;
-            })
+})
-            logList.loading=true
+logList.loading=true
-            getLogList(row.invokeTarget!);
+getLogList(row.invokeTarget!);
-          }
+}
-          state.isShowDialog = true;
+state.isShowDialog = true;
-        };
+};
-        const getLogList = (invokeTarget:string)=>{
+defineExpose({openDialog})
+const getLogList = (invokeTarget:string)=>{
   logList.param.targetName=invokeTarget
   getJobLogs(logList.param).then((res:any)=>{
     logList.data = res.data.list||[];
     logList.total=res.data.total;
     logList.loading=false;
   })
-        };
+};
-        // 关闭弹窗
+// 关闭弹窗
-        const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-        };
+};
-        // 取消
+// 取消
-        const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-        };
+};
-        const resetForm = ()=>{
+const resetForm = ()=>{
   state.formData = {
     jobId: undefined,
     jobName: undefined,
@@ -199,13 +197,13 @@
     createdUser:{userNickname:''},
     updatedUser:{userNickname:''}
   }
-        };
+};
-        // 多选框选中数据
+// 多选框选中数据
-        const handleSelectionChange = (selection:Array<SysJobLogData>) => {
+const handleSelectionChange = (selection:Array<SysJobLogData>) => {
   logList.logIds = selection.map(item => item.id)
   multiple.value = !selection.length
-        };
+};
-        const handleDelete = (row: SysJobLogData) => {
+const handleDelete = (row: SysJobLogData) => {
   let msg = '你确定要删除所选数据？';
   let logId:number[] = [] ;
   let targetName:string='';
@@ -233,23 +231,7 @@
         })
       })
       .catch(() => {});
-        }
+}
-        return {
-          proxy,
-          openDialog,
-          closeDialog,
-          onCancel,
-          menuRef,
-          formRef,
-          logList,
-          getLogList,
-          handleSelectionChange,
-          multiple,
-          handleDelete,
-          ...toRefs(state),
-        };
-      }
-  })
 </script>
 <style scoped>
   .system-sysJob-detail :deep(.el-form-item--large .el-form-item__label){

src/views/system/sysJob/list/component/edit.vue

@@ -56,7 +56,7 @@
             <el-radio
               v-for="dict in misfirePolicyOptions"
               :key="dict.value"
-              :label="dict.value"
+              :value="dict.value"
             >{{dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
@@ -65,7 +65,7 @@
             <el-radio
               v-for="dict in statusOptions"
               :key="dict.value"
-              :label="dict.value"
+              :value="dict.value"
             >{{dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
@@ -82,7 +82,7 @@
     </el-dialog>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
 import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
 import {
@@ -99,11 +99,8 @@ import {
   SysJobTableDataState,
   SysJobEditState,
 } from "/@/views/system/sysJob/list/component/model"
-export default defineComponent({
+defineOptions({ name: "apiV1SystemSysJobEdit"})
-  name:"apiV1SystemSysJobEdit",
+const props = defineProps({
-  components:{
-  },
-  props:{
   jobGroupOptions:{
     type:Array,
     default:()=>[]
@@ -116,12 +113,12 @@ export default defineComponent({
     type:Array,
     default:()=>[]
   },
-  },
+})
-  setup(props,{emit}) {
+const emit = defineEmits(['sysJobList'])
-    const {proxy} = <any>getCurrentInstance()
+const {proxy} = <any>getCurrentInstance()
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-    const menuRef = ref();
+const menuRef = ref();
-    const state = reactive<SysJobEditState>({
+const state = reactive<SysJobEditState>({
   loading:false,
   isShowDialog: false,
   formData: {
@@ -139,6 +136,8 @@ export default defineComponent({
     remark: undefined,
     createdAt: undefined,
     updatedAt: undefined,
+    createdUser:{userNickname:''},
+    updatedUser:{userNickname:''}
   },
   // 表单校验
   rules: {
@@ -155,9 +154,10 @@ export default defineComponent({
         { required: true, message: "状态不能为空", trigger: "blur" }
     ],
   }
-    });
+});
-    // 打开弹窗
+const {isShowDialog,formData,rules} = toRefs(state);
-    const openDialog = (row?: SysJobInfoData) => {
+// 打开弹窗
+const openDialog = (row?: SysJobInfoData) => {
   resetForm();
   if(row) {
     getSysJob(row.jobId!).then((res:any)=>{
@@ -167,19 +167,20 @@ export default defineComponent({
       data.status = ''+data.status
       state.formData = data;
   })
-    }
+}
   state.isShowDialog = true;
-    };
+};
-    // 关闭弹窗
+defineExpose({openDialog})
-    const closeDialog = () => {
+// 关闭弹窗
+const closeDialog = () => {
   state.isShowDialog = false;
-    };
+};
-    // 取消
+// 取消
-    const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-    };
+};
-    // 提交
+// 提交
-    const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -206,8 +207,8 @@ export default defineComponent({
       }
     }
   });
-    };
+};
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.formData = {
     jobId: undefined,
     jobName: undefined,
@@ -223,20 +224,10 @@ export default defineComponent({
     remark: undefined,
     createdAt: undefined,
     updatedAt: undefined,
+    createdUser:{userNickname:''},
+    updatedUser:{userNickname:''}
   }
-    };
+};
-    return {
-      proxy,
-      openDialog,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      menuRef,
-      formRef,
-      ...toRefs(state),
-    };
-  }
-})
 </script>
 <style scoped lang="scss">
 .cronExpression-rule{

src/views/system/sysJob/list/index.vue

@@ -127,7 +127,7 @@
 		></apiV1SystemSysJobDetail>
 	</div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { ItemOptions } from '/@/api/items';
 import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
@@ -135,35 +135,29 @@ import { listSysJob, getSysJob, delSysJob, addSysJob, updateSysJob, getUserList,
 import { SysJobTableColumns, SysJobInfoData, SysJobTableDataState } from '/@/views/system/sysJob/list/component/model';
 import apiV1SystemSysJobEdit from '/@/views/system/sysJob/list/component/edit.vue';
 import apiV1SystemSysJobDetail from '/@/views/system/sysJob/list/component/detail.vue';
-export default defineComponent({
+defineOptions({ name: "apiV1SystemSysJobList"})
-	name: 'apiV1SystemSysJobList',
+const { proxy } = <any>getCurrentInstance();
-	components: {
+const loading = ref(false);
-		apiV1SystemSysJobEdit,
+const queryRef = ref();
-		apiV1SystemSysJobDetail,
+const editRef = ref();
-	},
+const detailRef = ref();
-	setup() {
+// 是否显示所有搜索选项
-		const { proxy } = <any>getCurrentInstance();
+const showAll = ref(false);
-		const loading = ref(false);
+// 非单个禁用
-		const queryRef = ref();
+const single = ref(true);
-		const editRef = ref();
+// 非多个禁用
-		const detailRef = ref();
+const multiple = ref(true);
-		// 是否显示所有搜索选项
+const word = computed(() => {
-		const showAll = ref(false);
-		// 非单个禁用
-		const single = ref(true);
-		// 非多个禁用
-		const multiple = ref(true);
-		const word = computed(() => {
   if (showAll.value === false) {
     //对文字进行处理
     return '展开搜索';
   } else {
     return '收起搜索';
   }
-		});
+});
-		// 字典选项数据
+// 字典选项数据
-		const { sys_job_group, sys_job_policy, sys_job_status } = proxy.useDict('sys_job_group', 'sys_job_policy', 'sys_job_status');
+const { sys_job_group, sys_job_policy, sys_job_status } = proxy.useDict('sys_job_group', 'sys_job_policy', 'sys_job_status');
-		const state = reactive<SysJobTableDataState>({
+const state = reactive<SysJobTableDataState>({
   jobIds: [],
   tableData: {
     data: [],
@@ -177,23 +171,24 @@ export default defineComponent({
       status: undefined,
     },
   },
-		});
+});
-		// 页面加载时
+const { tableData } = toRefs(state);
-		onMounted(() => {
+// 页面加载时
+onMounted(() => {
   initTableData();
-		});
+});
-		// 初始化表格数据
+// 初始化表格数据
-		const initTableData = () => {
+const initTableData = () => {
   sysJobList();
-		};
+};
-		/** 重置按钮操作 */
+/** 重置按钮操作 */
-		const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
   sysJobList();
-		};
+};
-		// 获取列表数据
+// 获取列表数据
-		const sysJobList = () => {
+const sysJobList = () => {
   loading.value = true;
   listSysJob(state.tableData.param).then((res: any) => {
     let list = res.data.list ?? [];
@@ -201,41 +196,41 @@ export default defineComponent({
     state.tableData.total = res.data.total;
     loading.value = false;
   });
-		};
+};
-		const toggleSearch = () => {
+const toggleSearch = () => {
   showAll.value = !showAll.value;
-		};
+};
-		// 任务组名字典翻译
+// 任务组名字典翻译
-		const jobGroupFormat = (row: SysJobTableColumns) => {
+const jobGroupFormat = (row: SysJobTableColumns) => {
   return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
-		};
+};
-		// 计划执行策略字典翻译
+// 计划执行策略字典翻译
-		const misfirePolicyFormat = (row: SysJobTableColumns) => {
+const misfirePolicyFormat = (row: SysJobTableColumns) => {
   return proxy.selectDictLabel(sys_job_policy.value, row.misfirePolicy);
-		};
+};
-		// 状态字典翻译
+// 状态字典翻译
-		const statusFormat = (row: SysJobTableColumns) => {
+const statusFormat = (row: SysJobTableColumns) => {
   return proxy.selectDictLabel(sys_job_status.value, row.status);
-		};
+};
-		// 多选框选中数据
+// 多选框选中数据
-		const handleSelectionChange = (selection: Array<SysJobInfoData>) => {
+const handleSelectionChange = (selection: Array<SysJobInfoData>) => {
   state.jobIds = selection.map((item) => item.jobId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-		};
+};
-		const handleAdd = () => {
+const handleAdd = () => {
   editRef.value.openDialog();
-		};
+};
-		const handleUpdate = (row: SysJobTableColumns) => {
+const handleUpdate = (row: SysJobTableColumns|null) => {
   if (!row) {
     row = state.tableData.data.find((item: SysJobTableColumns) => {
       return item.jobId === state.jobIds[0];
     }) as SysJobTableColumns;
   }
   editRef.value.openDialog(toRaw(row));
-		};
+};
-		/** 执行按钮操作 */
+/** 执行按钮操作 */
-		const handleJobRun = (row: SysJobTableColumns) => {
+const handleJobRun = (row: SysJobTableColumns) => {
   const jobId = row.jobId || 0;
   ElMessageBox.confirm('是否确认立即执行一次该任务?', '警告', {
     confirmButtonText: '确定',
@@ -249,8 +244,8 @@ export default defineComponent({
       ElMessage.success('执行成功');
     })
     .catch(function () {});
-		};
+};
-		const handleDelete = (row: SysJobTableColumns) => {
+const handleDelete = (row: SysJobTableColumns|null) => {
   let msg = '你确定要删除所选数据？';
   let jobId: number[] = [];
   if (row) {
@@ -275,12 +270,12 @@ export default defineComponent({
       });
     })
     .catch(() => {});
-		};
+};
-		const handleView = (row: SysJobTableColumns) => {
+const handleView = (row: SysJobTableColumns) => {
   detailRef.value.openDialog(toRaw(row));
-		};
+};
-		// 任务状态修改
+// 任务状态修改
-		const handleStatusChange = (row: SysJobTableColumns) => {
+const handleStatusChange = (row: SysJobTableColumns) => {
   let text = row.status === 0 ? '启用' : '停用';
   ElMessageBox.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?', '警告', {
     confirmButtonText: '确定',
@@ -300,37 +295,7 @@ export default defineComponent({
     .catch(function () {
       row.status = row.status === 0 ? 1 : 0;
     });
-		};
+};
-		return {
-			proxy,
-			editRef,
-			detailRef,
-			showAll,
-			loading,
-			single,
-			multiple,
-			word,
-			queryRef,
-			resetQuery,
-			sysJobList,
-			toggleSearch,
-			jobGroupFormat,
-			sys_job_group,
-			misfirePolicyFormat,
-			sys_job_policy,
-			statusFormat,
-			sys_job_status,
-			handleSelectionChange,
-			handleAdd,
-			handleUpdate,
-			handleDelete,
-			handleView,
-			handleJobRun,
-			handleStatusChange,
-			...toRefs(state),
-		};
-	},
-});
 </script>
 <style lang="scss" scoped>
 .colBlock {

src/views/system/sysNotice/list/component/NoticeMessageEdit.vue

@@ -82,7 +82,7 @@
     </el-dialog>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import {reactive, onMounted, toRefs, defineComponent, ref, unref, getCurrentInstance} from 'vue';
 import { ElMessage} from 'element-plus';
 import {
@@ -95,23 +95,18 @@ import {
   SysNoticeInfoData,
   SysNoticeEditState
 } from "/@/views/system/sysNotice/list/component/model"
-
+defineOptions({ name: "NoticeMessageEdit"})
-export default defineComponent({
+const props = defineProps({
-  name: "NoticeMessageEdit",
-  components: {
-    GfUeditor,
-  },
-  props: {
   tagOptions: {
     type: Array,
     default: () => []
   },
-  },
+})
-  setup(props, {emit}) {
+const emit = defineEmits(["sysNoticeList"]);
-    const {proxy} = <any>getCurrentInstance()
+const {proxy} = <any>getCurrentInstance()
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-    const menuRef = ref();
+const menuRef = ref();
-    const state = reactive<SysNoticeEditState>({
+const state = reactive<SysNoticeEditState>({
   loading: false,
   isShowDialog: false,
   title: "",
@@ -151,12 +146,13 @@ export default defineComponent({
       {required: true, message: "状态不能为空", trigger: "blur"}
     ],
   }
-    });
+});
-    onMounted(() => {
+const { isShowDialog,formData,loading,userListOptions,rules,title} = toRefs(state)
+onMounted(() => {
   remoteUserMethod("");
-    });
+});
-    // 打开弹窗
+// 打开弹窗
-    const openDialog = (row?: SysNoticeInfoData) => {
+const openDialog = (row?: SysNoticeInfoData) => {
   resetForm();
   if (row) {
     getSysNotice(row.id!).then((res: any) => {
@@ -175,9 +171,8 @@ export default defineComponent({
     })
   }
   state.isShowDialog = true;
-    };
+};
-
+const remoteUserMethod = (query: string) => {
-    const remoteUserMethod = (query: string) => {
   //console.log("remoteMethod", query)
   state.userListOptions = []
   getUserList(query).then((res: any) => {
@@ -197,27 +192,27 @@ export default defineComponent({
   } else {
     options.value = []
   }*/
-    }
+}
-    //设置类型
+//设置类型
-    const setType = (type: number) => {
+const setType = (type: number) => {
   state.formData.type = type
   if (type == 1) {
     state.title = "通知"
   } else if (type == 2) {
     state.title = "私信"
   }
-    };
+};
 
-    // 关闭弹窗
+// 关闭弹窗
-    const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-    };
+};
-    // 取消
+// 取消
-    const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-    };
+};
-    // 提交
+// 提交
-    const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -244,8 +239,8 @@ export default defineComponent({
       }
     }
   });
-    };
+};
-    const resetForm = () => {
+const resetForm = () => {
   state.formData = {
     receiver: undefined,
     type: undefined,
@@ -262,27 +257,12 @@ export default defineComponent({
     updatedAt: undefined,
     deletedAt: undefined
   }
-    };
+};
-    //富文本编辑器内容
+//富文本编辑器内容
-    const setContentEditContent = (data: string) => {
+const setContentEditContent = (data: string) => {
   state.formData.content = data
-    }
+}
-    return {
+defineExpose({openDialog,setType})
-      proxy,
-      openDialog,
-      setType,
-      closeDialog,
-      onCancel,
-      onSubmit,
-      remoteUserMethod,
-      menuRef,
-      formRef,
-      //富文本编辑器内容
-      setContentEditContent,
-      ...toRefs(state),
-    };
-  }
-})
 </script>
 <style scoped>
 .kv-label {

src/views/system/sysNotice/list/index.vue

@@ -16,7 +16,7 @@
             </el-col>
             <el-col :span="5" class="colBlock">
               <el-form-item label="状态" prop="status">
-                <el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px;">
+                <el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px">
                   <el-option label="正常" :value="1"/>
                   <el-option label="停用" :value="0"/>
                 </el-select>
@@ -24,7 +24,7 @@
             </el-col>
             <el-col :span="5" class="colBlock">
               <el-form-item label="类型" prop="type">
-                <el-select v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 160px;">
+                <el-select v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 160px">
                   <el-option label="通知" value="1"/>
                   <el-option label="公告" value="2"/>
                 </el-select>
@@ -32,7 +32,7 @@
             </el-col>
             <el-col :span="5" class="colBlock">
               <el-form-item label="标签" prop="tag">
-                <el-select v-model="tableData.param.tag" placeholder="请选择标签" clearable style="width: 160px;">
+                <el-select v-model="tableData.param.tag" placeholder="请选择标签" clearable style="width: 160px">
                   <el-option
                       v-for="dict in notice_tag"
                       :key="dict.value"
@@ -193,52 +193,47 @@
 
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 
 import {toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw} from 'vue';
 import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
 import {
   listSysNotice,
   delSysNotice,
-} from "/src/api/system/notice/sysNotice";
+} from "/@/api/system/notice/sysNotice";
 import {
   SysNoticeTableColumns,
   SysNoticeInfoData,
   SysNoticeTableDataState,
 } from "/@/views/system/sysNotice/list/component/model"
 import NoticeMessageEdit from "/@/views/system/sysNotice/list/component/NoticeMessageEdit.vue"
-export default defineComponent({
+defineOptions({ name: "apiV1SystemSysNoticeList"})
-  name: "apiV1SystemSysNoticeList",
+const {proxy} = <any>getCurrentInstance()
-  components: {
+const loading = ref(false)
-    NoticeMessageEdit
+const queryRef = ref()
-  },
+const editRef = ref();
-  setup() {
-    const {proxy} = <any>getCurrentInstance()
-    const loading = ref(false)
-    const queryRef = ref()
-    const editRef = ref();
 
-    // 是否显示所有搜索选项
+// 是否显示所有搜索选项
-    const showAll = ref(false)
+const showAll = ref(false)
-    // 非单个禁用
+// 非单个禁用
-    const single = ref(true)
+const single = ref(true)
-    // 非多个禁用
+// 非多个禁用
-    const multiple = ref(true)
+const multiple = ref(true)
-    const word = computed(() => {
+const word = computed(() => {
   if (showAll.value === false) {
     //对文字进行处理
     return "展开搜索";
   } else {
     return "收起搜索";
   }
-    })
+})
-    // 字典选项数据
+// 字典选项数据
-    const {
+const {
   notice_tag,
-    } = proxy.useDict(
+} = proxy.useDict(
     'notice_tag',
-    )
+)
-    const state = reactive<SysNoticeTableDataState>({
+const state = reactive<SysNoticeTableDataState>({
   ids: [],
   tableData: {
     data: [],
@@ -256,23 +251,24 @@ export default defineComponent({
       dateRange: []
     },
   },
-    });
+});
-    // 页面加载时
+const { tableData} = toRefs(state)
-    onMounted(() => {
+// 页面加载时
+onMounted(() => {
   initTableData();
-    });
+});
-    // 初始化表格数据
+// 初始化表格数据
-    const initTableData = () => {
+const initTableData = () => {
   sysNoticeList()
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   sysNoticeList()
-    };
+};
-    // 获取列表数据
+// 获取列表数据
-    const sysNoticeList = () => {
+const sysNoticeList = () => {
   loading.value = true
   listSysNotice(state.tableData.param).then((res: any) => {
     let list = res.data.list ?? [];
@@ -283,34 +279,34 @@ export default defineComponent({
     state.tableData.total = res.data.total;
     loading.value = false
   })
-    };
+};
-    const toggleSearch = () => {
+const toggleSearch = () => {
   showAll.value = !showAll.value;
-    }
+}
-    // 标签字典翻译
+// 标签字典翻译
-    const tagFormat = (row: SysNoticeTableColumns) => {
+const tagFormat = (row: SysNoticeTableColumns) => {
   return proxy.selectDictLabel(notice_tag.value, row.tag);
-    }
+}
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection: Array<SysNoticeInfoData>) => {
+const handleSelectionChange = (selection: Array<SysNoticeInfoData>) => {
   state.ids = selection.map(item => item.id)
   single.value = selection.length != 1
   multiple.value = !selection.length
-    }
+}
 
-    const handleAdd = (type: number) => {
+const handleAdd = (type: number) => {
   editRef.value.openDialog()
   editRef.value.setType(type)
-    }
+}
-    const handleUpdate = (row: SysNoticeTableColumns) => {
+const handleUpdate = (row: SysNoticeTableColumns|null) => {
   if (!row) {
     row = state.tableData.data.find((item: SysNoticeTableColumns) => {
       return item.id === state.ids[0]
     }) as SysNoticeTableColumns
   }
   editRef.value.openDialog(toRaw(row));
-    };
+};
-    const handleDelete = (row: SysNoticeTableColumns) => {
+const handleDelete = (row: SysNoticeTableColumns|null) => {
   let msg = '你确定要删除所选数据？';
   let id: number[] = [];
   if (row) {
@@ -336,29 +332,7 @@ export default defineComponent({
       })
       .catch(() => {
       });
-    }
+}
-    return {
-      proxy,
-      editRef,
-      showAll,
-      loading,
-      single,
-      multiple,
-      word,
-      queryRef,
-      resetQuery,
-      sysNoticeList,
-      toggleSearch,
-      tagFormat,
-      notice_tag,
-      handleSelectionChange,
-      handleAdd,
-      handleUpdate,
-      handleDelete,
-      ...toRefs(state),
-    }
-  }
-})
 </script>
 <style lang="scss" scoped>
 .colBlock {

src/views/system/sysNotice/show/index.vue

@@ -90,7 +90,7 @@
 
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import {useRoute} from "vue-router";
 import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
 import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
@@ -102,15 +102,11 @@ import {
   SysNoticeTableDataState,
 } from "/@/views/system/sysNotice/list/component/model"
 import {readNotice} from "/@/api/system/notice/sysNoticeRead";
-
+defineOptions({ name: "apiV1SystemSysNoticeShow"})
-export default defineComponent({
+const route = useRoute();
-  name: "",
+const {proxy} = <any>getCurrentInstance()
-  components: {},
+const loading = ref(false)
-  setup() {
+const state = reactive<SysNoticeTableDataState>({
-    const route = useRoute();
-    const {proxy} = <any>getCurrentInstance()
-    const loading = ref(false)
-    const state = reactive<SysNoticeTableDataState>({
   ids: [],
   tableData: {
     data: [],
@@ -128,26 +124,27 @@ export default defineComponent({
       dateRange: []
     },
   },
-    });
+});
-    // 页面加载时
+const { tableData}= toRefs(state)
-    onMounted(() => {
+// 页面加载时
+onMounted(() => {
   if (route.query.type){
     state.tableData.param.type = parseInt(route.query.type as string)
   }
   initTableData();
-    });
+});
-    // 初始化表格数据
+// 初始化表格数据
-    const initTableData = () => {
+const initTableData = () => {
   sysNoticeList()
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   sysNoticeList()
-    };
+};
-    // 获取列表数据
+// 获取列表数据
-    const sysNoticeList = () => {
+const sysNoticeList = () => {
   loading.value = true
   listShowNotice(state.tableData.param).then((res: any) => {
     let list = res.data.list ?? [];
@@ -158,17 +155,17 @@ export default defineComponent({
     state.tableData.total = res.data.total;
     loading.value = false
   })
-    };
+};
 
 
-    const handleTabsClick = (e: any) => {
+const handleTabsClick = (e: any) => {
   //console.log(e.props.name)
   state.tableData.param.type = e.props.name
   sysNoticeList()
-    }
+}
 
 
-    const handleDelete = (row: SysNoticeTableColumns) => {
+const handleDelete = (row: SysNoticeTableColumns) => {
   let msg = '你确定要删除所选数据？';
   let id: number[] = [];
   if (row) {
@@ -194,9 +191,9 @@ export default defineComponent({
       })
       .catch(() => {
       });
-    }
+}
-    // eslint-disable-next-line no-undef
+// eslint-disable-next-line no-undef
-    const handleRead = (item: any) => {
+const handleRead = (item: any) => {
   // console.log("handleRead", item)
   let query = {
     noticeId: item.id
@@ -205,19 +202,7 @@ export default defineComponent({
     sysNoticeList()
     ElMessage.success("已读");
   })
-    }
+}
-    return {
-      proxy,
-      loading,
-      resetQuery,
-      sysNoticeList,
-      handleTabsClick,
-      handleDelete,
-      handleRead,
-      ...toRefs(state),
-    }
-  }
-})
 </script>
 <style lang="scss" scoped>
 .el_icon {

src/views/system/tools/gen/component/basicInfo.vue

@@ -104,17 +104,15 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, inject, reactive, ref, unref } from 'vue';
+import { inject, reactive, ref, unref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import type { TableDataInfo } from '/@/views/system/tools/gen/component/model';
 import { ElMessage } from 'element-plus';
-export default defineComponent({
+defineOptions({ name: "toolsBasicInfoForm"})
-	name: 'toolsBasicInfoForm',
+const emit = defineEmits(['goNext','close']);
-	emits: ['goNext','close'],
+const basicInfoFormRef = ref<FormInstance>();
-	setup(props, { emit }) {
+const overwriteOptions = ref([
-		const basicInfoFormRef = ref<FormInstance>();
-    const overwriteOptions = ref([
   {key:"api",name:"覆盖api"},
   {key:"controller",name:"覆盖controller"},
   {key:"dao",name:"覆盖dao"},
@@ -132,9 +130,9 @@ export default defineComponent({
   {key:"vue",name:"覆盖vue-list"},
   {key:"vueDetail",name:"覆盖vue-detail"},
   {key:"vueEdit",name:"覆盖vue-edit"},
-    ])
+])
-		const info = inject<TableDataInfo>('tableData') as TableDataInfo;
+const info = inject<TableDataInfo>('tableData') as TableDataInfo;
-		const nextTip = (): boolean => {
+const nextTip = (): boolean => {
   //表单验证
   let tag = false;
   const formWrap = unref(basicInfoFormRef) as any;
@@ -148,33 +146,22 @@ export default defineComponent({
     }
   });
   return tag;
-		};
+};
-    const close = ()=>{
+const close = ()=>{
   emit('close')
-    }
+}
-    const overwriteChange = (value:boolean)=>{
+const overwriteChange = (value:boolean)=>{
   info.value.overwriteInfo.map((item:any)=>{
     item.value = value
   })
-    }
+}
-		const rules = reactive<FormRules>({
+const rules = reactive<FormRules>({
   tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
   tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
   className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
   functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
   sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }],
   sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }],
-		});
-		return {
-			basicInfoFormRef,
-			info,
-			rules,
-      overwriteOptions,
-			nextTip,
-      overwriteChange,
-      close
-		};
-	},
 });
 </script>
 

src/views/system/tools/gen/component/edit.vue

@@ -23,9 +23,9 @@
 					<el-col :span="4"></el-col>
 				</el-row>
 			</div>
-			<tools-basic-info-form ref="toolsBasicInfoForm" v-show="active === 1" @goNext="goNext" @close="close"></tools-basic-info-form>
+			<toolsBasicInfoForm ref="toolsBasicInfoFormRef" v-show="active === 1" @goNext="goNext" @close="close"></toolsBasicInfoForm>
-			<gen-info-form ref="genInfoForm" v-show="active === 2" @goNext="goNext" @close="close"></gen-info-form>
+			<genInfoForm ref="genInfoFormRef" v-show="active === 2" @goNext="goNext" @close="close"></genInfoForm>
-      <gen-table-columns ref="tableColumns" v-show="active === 3"></gen-table-columns>
+      <genTableColumns ref="tableColumnsRef" v-show="active === 3"></genTableColumns>
 			<div class="tools-footer" v-show="active === 3">
 				<el-button size="default" @click="close">关 闭</el-button>
 				<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
@@ -34,8 +34,8 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent, onBeforeMount, ref, provide, getCurrentInstance} from 'vue';
+import {onBeforeMount, ref, provide, getCurrentInstance} from 'vue';
 import { useRoute } from 'vue-router';
 import toolsBasicInfoForm from '/@/views/system/tools/gen/component/basicInfo.vue';
 import { TableColumns, TableDataInfo } from '/@/views/system/tools/gen/component/model';
@@ -43,23 +43,20 @@ import { ElMessage } from 'element-plus/es';
 import {getGenTable, saveEdit} from '/@/api/system/tools/gen';
 import genInfoForm from '/@/views/system/tools/gen/component/genInfoForm.vue';
 import genTableColumns from '/@/views/system/tools/gen/component/tableColumns.vue';
-export default defineComponent({
+defineOptions({ name: "apiV1SystemToolsGenColumnEdit"})
-	name: 'apiV1SystemToolsGenColumnList',
+const { proxy } = getCurrentInstance() as any;
-	components: { toolsBasicInfoForm, genInfoForm,genTableColumns },
+const route = useRoute();
-	setup() {
+const toolsBasicInfoFormRef = ref();
-    const { proxy } = getCurrentInstance() as any;
+const genInfoFormRef = ref();
-		const route = useRoute();
+const tableColumnsRef = ref()
-		const toolsBasicInfoForm = ref();
+const active = ref(1);
-		const genInfoForm = ref();
-    const tableColumns = ref()
-		const active = ref(1);
 
-		const changeSteps = (args: number) => {
+const changeSteps = (args: number) => {
   if (args > active.value) {
     switch (args) {
       case 2:
         //验证基本信息表单
-						if (toolsBasicInfoForm.value.nextTip()) {
+        if (toolsBasicInfoFormRef.value.nextTip()) {
           active.value = args;
         }
         break;
@@ -67,12 +64,12 @@ export default defineComponent({
         //验证生成信息表单
         if (active.value==1){
           //验证基本信息表单
-              if (toolsBasicInfoForm.value.nextTip()) {
+          if (toolsBasicInfoFormRef.value.nextTip()) {
             active.value = args;
           }
         }else{
           //验证生成信息表单
-              if (genInfoForm.value.nextTip()) {
+          if (genInfoFormRef.value.nextTip()) {
             active.value = args;
           }
         }
@@ -81,8 +78,8 @@ export default defineComponent({
   } else {
     active.value = args;
   }
-		};
+};
-    const defaultOverwriteInfo = [
+const defaultOverwriteInfo = [
   {key:"api",value:false},
   {key:"controller",value:false},
   {key:"dao",value:false},
@@ -100,11 +97,11 @@ export default defineComponent({
   {key:"vue",value:false},
   {key:"vueDetail",value:false},
   {key:"vueEdit",value:false},
-    ]
+]
-		// 表详细信息
+// 表详细信息
-		const info = ref(<TableDataInfo>{overwriteInfo:defaultOverwriteInfo});
+const info = ref(<TableDataInfo>{overwriteInfo:defaultOverwriteInfo});
-		provide('tableData', info);
+provide('tableData', info);
-    const mergeArraysByKey = (arrays:Array<Array<object>>, key:string) :Array<any> => {
+const mergeArraysByKey = (arrays:Array<Array<object>>, key:string) :Array<any> => {
   const merged:any={}
   // 遍历所有数组，后面的数组会覆盖前面的数组
   arrays.forEach(array => {
@@ -115,8 +112,8 @@ export default defineComponent({
   });
   // 将merged对象转换为数组
   return Object.values(merged);
-    }
+}
-    onBeforeMount(() => {
+onBeforeMount(() => {
   const tableId = route.query?.tableId;
   if (tableId) {
     // 获取表详细信息
@@ -133,9 +130,9 @@ export default defineComponent({
   } else {
     ElMessage.error('参数错误');
   }
-		});
+});
-    // 表单组件验证
+// 表单组件验证
-    const formRulesValidate = (pageRef: string, sonRef: string) => {
+const formRulesValidate = (pageRef: string, sonRef: string) => {
   return new Promise((resolve,reject) => {
     proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
       if (valid) {
@@ -145,11 +142,11 @@ export default defineComponent({
       }
     });
   });
-    };
+};
-		const onSubmit = () => {
+const onSubmit = () => {
   Promise.all([
-        formRulesValidate('toolsBasicInfoForm', 'basicInfoFormRef'),
+    formRulesValidate('toolsBasicInfoFormRef', 'basicInfoFormRef'),
-        formRulesValidate('genInfoForm', 'genInfoFormRef'),
+    formRulesValidate('genInfoFormRef', 'genInfoFormRef'),
   ]).then(() => {
     saveEdit(info.value).then(()=>{
       ElMessage.success('保存成功');
@@ -158,31 +155,18 @@ export default defineComponent({
   }).catch(e=>{
     ElMessage.error(e.toString());
   });
-		};
+};
-		const goNext = () => {
+const goNext = () => {
   if (active.value > 2) {
     active.value = 1;
   } else {
     active.value++;
   }
-		};
+};
-    //取消返回
+//取消返回
-    const close = ()=>{
+const close = ()=>{
   proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
-    }
+}
-		return {
-			toolsBasicInfoForm,
-			genInfoForm,
-      tableColumns,
-			active,
-			changeSteps,
-			info,
-			onSubmit,
-			goNext,
-      close
-		};
-	},
-});
 </script>
 
 <style scoped>

src/views/system/tools/gen/component/genInfoForm.vue

@@ -150,26 +150,24 @@
 	</el-card>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {defineComponent, inject, reactive, ref, unref} from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import { TableDataInfo } from '/@/views/system/tools/gen/component/model';
 import {ElMessage} from "element-plus";
 import {Ref, UnwrapRef} from "@vue/reactivity";
-export default defineComponent({
+defineOptions({ name: "genInfoForm"})
-	name: 'genInfoForm',
+const emit = defineEmits(['goNext','close']);
-  emits:['goNext','close'],
+const genInfoFormRef = ref<FormInstance>();
-	setup(props,{emit}) {
+const info = inject<Ref<UnwrapRef<TableDataInfo>>>('tableData') as Ref<UnwrapRef<TableDataInfo>>;
-		const genInfoFormRef = ref<FormInstance>();
+const rules = reactive<FormRules>({
-		const info = inject<Ref<UnwrapRef<TableDataInfo>>>('tableData') as Ref<UnwrapRef<TableDataInfo>>;
-		const rules = reactive<FormRules>({
   tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
   packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
   moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
   businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
   functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
-		});
+});
-    const nextTip = ()=>{
+const nextTip = ()=>{
   //表单验证
   let tag = false;
   const formWrap = unref(genInfoFormRef) as any;
@@ -183,31 +181,22 @@ export default defineComponent({
     }
   });
   return tag;
-    }
+}
-    const close = ()=>{
+const close = ()=>{
   emit('close')
-    }
+}
-    const getLastSubstring = (str:string):string => {
+const getLastSubstring = (str:string):string => {
   let lastIndex = str.lastIndexOf('/');
   if (lastIndex !== -1) {
     return str.substring(lastIndex + 1);
   } else {
     return str;
   }
-    }
+}
-    const setModuleName = (value:string)=>{
+const setModuleName = (value:string)=>{
   info.value.moduleName = getLastSubstring(value)
-    }
+}
-		return {
+defineExpose({nextTip})
-      genInfoFormRef,
-			info,
-			rules,
-      setModuleName,
-      nextTip,
-      close
-		};
-	},
-});
 </script>
 
 <style scoped>

src/views/system/tools/gen/component/importTable.vue

@@ -48,21 +48,19 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {defineComponent, reactive, ref, toRefs} from "vue";
 import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model"
 import {getImportTableList, importTable} from "/@/api/system/tools/gen";
 import {ElMessage} from "element-plus/es";
-export default defineComponent({
+defineOptions({ name: "importTable"})
-  name: "importTable",
+const emit = defineEmits(['ok'])
-  emits:['ok'],
+const queryFormRef = ref()
-  setup(prop,{emit}) {
+const tableRef = ref()
-    const queryFormRef = ref()
+const visible = ref(false)
-    const tableRef = ref()
+// 选中数组值
-    const visible = ref(false)
+let tables:string[] = []
-    // 选中数组值
+const state = reactive<ImportTableDataState>({
-    let tables:string[] = []
-    const state = reactive<ImportTableDataState>({
   tableData:{
     data:[],
     total:0,
@@ -74,28 +72,29 @@ export default defineComponent({
       tableComment: ''
     },
   }
-    })
+})
-    const getList = ()=>{
+const {tableData} = toRefs(state)
+const getList = ()=>{
   getImportTableList(state.tableData.param).then(res=>{
     state.tableData.data = res.data.list??[]
     state.tableData.total = res.data.total
   })
-    }
+}
-    const handleQuery = ()=>{
+const handleQuery = ()=>{
   state.tableData.param.pageNum = 1
   getList()
-    }
+}
-    const resetQuery=()=>{
+const resetQuery=()=>{
   queryFormRef.value.resetFields()
   getList()
-    }
+}
-    const clickRow=(row:TableData)=>{
+const clickRow=(row:TableData)=>{
   tableRef.value.toggleRowSelection(row);
-    }
+}
-    const handleSelectionChange=(selection:Array<any>)=>{
+const handleSelectionChange=(selection:Array<any>)=>{
   tables = selection.map(item => item.tableName);
-    }
+}
-    const handleImportTable=()=>{
+const handleImportTable=()=>{
   if(tables.length==0){
     ElMessage.error("请选择要导入的表格");
     return
@@ -107,26 +106,11 @@ export default defineComponent({
       emit("ok");
     }
   })
-    }
+}
-    const openDialog = ()=>{
+const openDialog = ()=>{
   getList()
   visible.value = true
-    }
+}
-    return {
-      queryFormRef,
-      tableRef,
-      visible,
-      getList,
-      handleQuery,
-      resetQuery,
-      clickRow,
-      handleSelectionChange,
-      handleImportTable,
-      openDialog,
-      ...toRefs(state),
-    };
-  }
-})
 </script>
 
 <style scoped>

src/views/system/tools/gen/component/preview.vue

@@ -25,30 +25,28 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted} from "vue";
 import {previewState} from "/@/views/system/tools/gen/component/model";
 import {showPreview} from "/@/api/system/tools/gen";
 import MyCodeMirror from "/@/components/myCodeMirror/index.vue";
 import { ElLoading } from 'element-plus'
-export default defineComponent({
+defineOptions({ name: "genCodePreview"})
-  name: "genCodePreview",
+const height = ref(400)
-  components: {MyCodeMirror},
+// 预览参数
-  setup(){
+const preview:previewState = reactive({
-    const height = ref(400)
-    // 预览参数
-    const preview:previewState = reactive({
   flush: true,
   fullscreen: false,
   open: false,
   title: "代码预览",
   data: {},
   activeName: "api"
-    })
+})
-    const getWindowInfo = () => {
+const { data, activeName, fullscreen, open, title}=toRefs(preview)
+const getWindowInfo = () => {
   height.value = document.getElementsByTagName('body')[0].clientHeight-130;
-    };
+};
-    const showView = (tableId:number)=>{
+const showView = (tableId:number)=>{
   const loading = ElLoading.service({
     lock: true,
     text: 'Loading',
@@ -61,20 +59,14 @@ export default defineComponent({
   }).catch(()=>{
     loading.close()
   })
-    }
+}
-    onMounted(()=>{
+onMounted(()=>{
   height.value = document.getElementsByTagName('body')[0].clientHeight-130;
-    })
-    onBeforeMount(()=>{
-      window.addEventListener('resize', getWindowInfo);
-    })
-    return {
-      showView,
-      height,
-      ...toRefs(preview)
-    }
-  },
 })
+onBeforeMount(()=>{
+  window.addEventListener('resize', getWindowInfo);
+})
+defineExpose({showView})
 </script>
 
 <style lang="scss" scoped>

src/views/system/tools/gen/component/relationTable.vue

@@ -66,20 +66,18 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {defineComponent, reactive, ref, toRefs} from "vue";
 import {ImportTableDataState, TableColumns, TableData} from "/@/views/system/tools/gen/component/model"
 import {getRelationTable, importTable} from "/@/api/system/tools/gen";
 import {ElMessage} from "element-plus/es";
-export default defineComponent({
+defineOptions({ name: "relationTable"})
-  name: "relationTable",
+const emit = defineEmits(['ok'])
-  emits:['ok'],
+const queryFormRef = ref()
-  setup(prop,{emit}) {
+const tableRef = ref()
-    const queryFormRef = ref()
+const visible = ref(false)
-    const tableRef = ref()
+const columnId = ref<number>()
-    const visible = ref(false)
+const state = reactive<ImportTableDataState>({
-    const columnId = ref<number>()
-    const state = reactive<ImportTableDataState>({
   tableData:{
     data:[],
     total:0,
@@ -91,27 +89,28 @@ export default defineComponent({
       tableComment: ''
     },
   }
-    })
+})
-    const getList = ()=>{
+const { tableData} = toRefs(state)
+const getList = ()=>{
   getRelationTable(state.tableData.param).then((res:any)=>{
     state.tableData.data = res.data.data??[]
     state.tableData.total = res.data.total
 
   })
-    }
+}
-    const handleQuery = ()=>{
+const handleQuery = ()=>{
   state.tableData.param.pageNum = 1
   getList()
-    }
+}
-    const resetQuery=()=>{
+const resetQuery=()=>{
   queryFormRef.value.resetFields()
   getList()
-    }
+}
-    const clickRow=(row:TableColumns)=>{
+const clickRow=(row:TableColumns)=>{
   tableRef.value.toggleRowSelection(row);
-    }
+}
 
-    const handleImportTable=(row:TableColumns)=>{
+const handleImportTable=(row:TableColumns)=>{
   if(!row.linkLabelId){
     ElMessage.error("请选择关联表key")
     return
@@ -126,26 +125,13 @@ export default defineComponent({
     linkLabelName:row.linkLabelName
   });
   visible.value = false;
-    }
+}
-    const openDialog = (cid:number)=>{
+const openDialog = (cid:number)=>{
   columnId.value = cid
   getList()
   visible.value = true
-    }
+}
-    return {
+defineExpose({openDialog})
-      queryFormRef,
-      tableRef,
-      visible,
-      getList,
-      handleQuery,
-      resetQuery,
-      clickRow,
-      handleImportTable,
-      openDialog,
-      ...toRefs(state),
-    };
-  }
-})
 </script>
 
 <style scoped lang="scss">

src/views/system/tools/gen/component/tableColumns.vue

@@ -158,16 +158,11 @@
             <textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
           </template>
         </el-table-column>
-        <el-table-column label="详情占列" width="70">
+        <el-table-column label="详情占列" width="100">
           <template #default="scope">
             <textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
           </template>
         </el-table-column>
-        <el-table-column label="详情起新行" width="50">
-          <template #default="scope">
-            <el-checkbox true-value="1" v-model="scope.row.isRowStart"></el-checkbox>
-          </template>
-        </el-table-column>
         <el-table-column label="字典类型" width="160">
           <template #default="scope">
             <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
@@ -202,34 +197,30 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent, inject, nextTick, onBeforeMount, ref} from 'vue';
+import { inject, onBeforeMount, ref} from 'vue';
 import type { FormInstance } from 'element-plus';
 import {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model';
 import {optionselect} from "/@/api/system/dict/type";
 import RelationTable from "/@/views/system/tools/gen/component/relationTable.vue";
-import importTable from "/@/views/system/tools/gen/component/importTable.vue";
 import _ from "lodash";
-export default defineComponent({
+defineOptions({ name: "genTableColumns"})
-	name: 'genTableColumns',
+const relationTableRef = ref();
-  components: {importTable, RelationTable},
+const tableColumnsRef = ref<FormInstance>();
-	setup() {
+const info = inject<any>('tableData');
-    const relationTableRef = ref();
+// 表格的高度
-		const tableColumnsRef = ref<FormInstance>();
+const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
-		const info = inject<TableDataInfo>('tableData') as TableDataInfo;
+const dictOptions = ref(<DictOpt[]>[])
-		// 表格的高度
+onBeforeMount(()=>{
-		const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
-    const dictOptions = ref(<DictOpt[]>[])
-    onBeforeMount(()=>{
   //获取字典选项
   optionselect().then((res:any)=>{
     dictOptions.value = res.data.dictType??[]
   })
-    })
+})
-    const handleChangeConfig = (row:TableColumns)=>{
+const handleChangeConfig = (row:TableColumns)=>{
   relationTableRef.value.openDialog(row.columnId)
-    }
+}
-    const setRelationTable = (cid:number,data:any)=>{
+const setRelationTable = (cid:number,data:any)=>{
   info.value.columns.map((item:TableColumns,index :number)=>{
     if(item.columnId===cid){
       let d = _.cloneDeep(item)
@@ -239,8 +230,8 @@ export default defineComponent({
       info.value.columns[index] = d
     }
   })
-    }
+}
-    const handleRemoveRelation = (row:TableColumns)=>{
+const handleRemoveRelation = (row:TableColumns)=>{
   info.value.columns.map((item:TableColumns,index :number)=>{
     if(item.columnId===row.columnId){
       let d = _.cloneDeep(item)
@@ -250,19 +241,7 @@ export default defineComponent({
       info.value.columns[index] = d
     }
   })
-    }
+}
-		return {
-      relationTableRef,
-			tableColumnsRef,
-      info,
-			tableHeight,
-      dictOptions,
-      handleChangeConfig,
-      setRelationTable,
-      handleRemoveRelation
-		};
-	},
-});
 </script>
 
 <style scoped>

src/views/system/tools/gen/index.vue

@@ -100,7 +100,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
 import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
 import {getTableList, deleteTables, batchGenCode, syncTable} from "/@/api/system/tools/gen";
@@ -109,17 +109,14 @@ import importTable from "/@/views/system/tools/gen/component/importTable.vue";
 import { useRouter } from 'vue-router';
 import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
 import {refreshBackEndControlRoutes} from "/@/router/backEnd";
-export default defineComponent({
+defineOptions({ name: "apiV1SystemToolsGenTableList"})
-	name: 'apiV1SystemToolsGenTableList',
+const router =  useRouter()
-	components: {importTable,genCodePreview},
+const addPostRef = ref()
-	setup() {
+const editPostRef = ref()
-    const router =  useRouter()
+const queryRef = ref()
-		const addPostRef = ref()
+const importRef = ref()
-		const editPostRef = ref()
+const genCodePreviewRef = ref()
-    const queryRef = ref()
+const state = reactive<TableDataState>({
-    const importRef = ref()
-    const genCodePreviewRef = ref()
-		const state = reactive<TableDataState>({
   ids:[],
   // 非单个禁用
   single: true,
@@ -138,25 +135,26 @@ export default defineComponent({
       dateRange: []
     },
   },
-		});
+});
-		// 初始化表格数据
+const {single,multiple, tableData}=toRefs(state)
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   tableList()
-		};
+};
-    const tableList = ()=>{
+const tableList = ()=>{
   getTableList(state.tableData.param).then(res=>{
     state.tableData.data = res.data.list??[];
     state.tableData.total = res.data.total;
   })
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   tableList()
-    };
+};
-		// 删除导入的表
+// 删除导入的表
-		const onRowDel = (row: TableData) => {
+const onRowDel = (row: TableData|null) => {
   let msg = '你确定要删除所选数据？';
   let ids:number[] = [] ;
   if(row){
@@ -182,27 +180,27 @@ export default defineComponent({
       })
     })
     .catch(() => {});
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleSizeChange = (val: number) => {
+const onHandleSizeChange = (val: number) => {
   state.tableData.param.pageSize = val;
-		};
+};
-		// 分页改变
+// 分页改变
-		const onHandleCurrentChange = (val: number) => {
+const onHandleCurrentChange = (val: number) => {
   state.tableData.param.pageNum = val;
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:Array<TableData>)=> {
+const handleSelectionChange = (selection:Array<TableData>)=> {
   state.ids = selection.map(item => item.tableId)
   state.multiple = !selection.length
   state.single = selection.length != 1
   state.tableNames = selection.map(item=>item.tableName)
-    };
+};
-    const handleGenTable=(row: TableData)=>{
+const handleGenTable=(row: TableData|null)=>{
   let msg = '你确定要生成？';
   let ids:number[] = [] ;
   if(row){
@@ -229,49 +227,28 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-    }
+}
-    // 重置菜单session
+// 重置菜单session
-    const resetMenuSession = () => {
+const resetMenuSession = () => {
   refreshBackEndControlRoutes();
-    };
+};
-    //打开导入页面
+//打开导入页面
-    const openImportTable=()=>{
+const openImportTable=()=>{
   importRef.value.openDialog()
-    }
+}
-    const handlePreview = (row:TableData)=>{
+const handlePreview = (row:TableData)=>{
   genCodePreviewRef.value.showView(row.tableId);
-    }
+}
-    const handleEditTable=(row:TableData)=>{
+const handleEditTable=(row:TableData|null)=>{
   const tableId = row?.tableId || state.ids[0];
   router.push({ path: "/system/tools/gen/edit", query: { tableId: tableId } });
-    }
+}
-    const handleSyncTable=((row:TableData)=>{
+const handleSyncTable=((row:TableData)=>{
     const tableId = row?.tableId || state.ids[0];
     syncTable(tableId).then((res:any)=>{
         if (res.code === 0) {
             ElMessage.success('同步成功');
         }
     })
-    })
+})
-		return {
-			addPostRef,
-			editPostRef,
-      queryRef,
-      importRef,
-      genCodePreviewRef,
-			onRowDel,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-      tableList,
-      resetQuery,
-      handleSelectionChange,
-      handleGenTable,
-      openImportTable,
-      handleEditTable,
-      handlePreview,
-      handleSyncTable,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/user/component/editUser.vue

@@ -94,10 +94,10 @@
             <el-form-item label="用户类型">
               <el-radio-group v-model="ruleForm.isAdmin">
                 <el-radio
-                    :label="1"
+                    :value="1"
                 >后台管理员</el-radio>
                 <el-radio
-                    :label="0"
+                    :value="0"
                 >前台用户</el-radio>
               </el-radio-group>
             </el-form-item>
@@ -119,15 +119,13 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {reactive, toRefs, onMounted, defineComponent, ref, unref, getCurrentInstance} from 'vue';
 import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user";
 import {ElMessage} from "element-plus";
 
-
+defineOptions({ name: "systemEditUser"})
-export default defineComponent({
+const props = defineProps({
-	name: 'systemEditUser',
-  props:{
   deptData:{
     type:Array,
     default:()=>[]
@@ -136,13 +134,13 @@ export default defineComponent({
     type:Array,
     default:()=>[]
   }
-  },
+})
-	setup(prop,{emit}) {
+const emit = defineEmits(['getUserList']);
-    const {proxy} = getCurrentInstance() as any;
+const {proxy} = getCurrentInstance() as any;
-    const roleList = ref([]);
+const roleList = ref([]);
-    const postList = ref([]);
+const postList = ref([]);
-    const formRef = ref<HTMLElement | null>(null);
+const formRef = ref<HTMLElement | null>(null);
-		const state = reactive({
+const state = reactive({
   isShowDialog: false,
   ruleForm: {
     userId: 0,
@@ -189,9 +187,10 @@ export default defineComponent({
       }
     ]
   }
-		});
+});
-		// 打开弹窗
+const { ruleForm, isShowDialog, rules}=toRefs(state)
-		const openDialog = (row?:any) => {
+// 打开弹窗
+const openDialog = (row?:any) => {
   resetForm()
   if(row) {
     getEditUser(row.id).then((res:any)=>{
@@ -214,17 +213,17 @@ export default defineComponent({
     })
   }
   state.isShowDialog = true;
-		};
+};
-		// 关闭弹窗
+// 关闭弹窗
-		const closeDialog = () => {
+const closeDialog = () => {
   state.isShowDialog = false;
-		};
+};
-		// 取消
+// 取消
-		const onCancel = () => {
+const onCancel = () => {
   closeDialog();
-		};
+};
-		// 新增
+// 新增
-		const onSubmit = () => {
+const onSubmit = () => {
   const formWrap = unref(formRef) as any;
   if (!formWrap) return;
   formWrap.validate((valid: boolean) => {
@@ -246,9 +245,9 @@ export default defineComponent({
       }
     }
   });
-		};
+};
-		// 初始化部门数据
+// 初始化部门数据
-		const initTableData = () => {
+const initTableData = () => {
   //获取角色岗位选项
   getParams().then((res:any)=>{
     const roles = res.data.roleList??[];
@@ -261,12 +260,12 @@ export default defineComponent({
     roleList.value = proxy.handleTree(roles??[], "id","pid","children",true);
     postList.value = res.data.posts??[];
   });
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    const resetForm = ()=>{
+const resetForm = ()=>{
   state.ruleForm = {
     userId: 0,
     deptId: 0,
@@ -282,17 +281,6 @@ export default defineComponent({
     roleIds: [],
     isAdmin:0,
   }
-    };
+};
-		return {
+defineExpose({openDialog})
-			openDialog,
-			closeDialog,
-			onCancel,
-			onSubmit,
-      roleList,
-      postList,
-      formRef,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/user/component/userList.vue

@@ -45,7 +45,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
 import {ElMessageBox, ElMessage} from 'element-plus';
 import EditUser from '/@/views/system/user/component/editUser.vue';
@@ -71,9 +71,8 @@ interface TableParam {
   keyWords:string;
   dateRange: string[];
 }
-export default defineComponent({
+defineOptions({ name: "systemUserList"})
-	name: 'systemUserList', 
+const props = defineProps({
-  props:{
   deptData:{
     type:Array,
     default:()=>[]
@@ -86,13 +85,11 @@ export default defineComponent({
     type:Array,
     default:()=>[]
   }
-  },
+ })
-	components: { EditUser },
+const {proxy} = <any>getCurrentInstance();
-	setup() {
+const {sys_user_sex} = proxy.useDict('sys_user_sex')
-    const {proxy,props} = <any>getCurrentInstance();
+const editUserRef = ref();
-    const {sys_user_sex} = proxy.useDict('sys_user_sex')
+const state = reactive<TableDataState>({
-		const editUserRef = ref();
-		const state = reactive<TableDataState>({
   ids:[],
   deptProps:{
     id:"deptId",
@@ -114,28 +111,29 @@ export default defineComponent({
       dateRange:[]
     },
   },
-		});
+});
-		// 初始化表格数据
+const { tableData} = toRefs(state);
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   userList();
-		};
+};
-    const userList = ()=>{ 
+const userList = ()=>{
   const param = {...state.tableData.param, ...props.param};
   getUserList(param).then((res:any)=>{
     state.tableData.data = res.data.userList??[];
     state.tableData.total = res.data.total;
   });
-    };
+};
-		// 打开新增用户弹窗
+// 打开新增用户弹窗
-		const onOpenAddUser = () => {
+const onOpenAddUser = () => {
   editUserRef.value.openDialog();
-		};
+};
-		// 打开修改用户弹窗
+// 打开修改用户弹窗
-		const onOpenEditUser = (row:any) => {
+const onOpenEditUser = (row:any) => {
   editUserRef.value.openDialog(row);
-		};
+};
-		// 删除用户
+// 删除用户
-		const onRowDel = (row:any) => {
+const onRowDel = (row:any) => {
   let msg = '你确定要删除所选用户？';
   let ids:number[] = [] ;
   if(row){
@@ -160,17 +158,17 @@ export default defineComponent({
         })
       })
       .catch(() => {});
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    // 多选框选中数据
+// 多选框选中数据
-    const handleSelectionChange = (selection:any[])=> {
+const handleSelectionChange = (selection:any[])=> {
   state.ids = selection.map(item => item.id)
-    };
+};
-    /** 重置密码按钮操作 */
+/** 重置密码按钮操作 */
-    const handleResetPwd = (row:any)=> {
+const handleResetPwd = (row:any)=> {
   ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消"
@@ -183,9 +181,9 @@ export default defineComponent({
         ElMessage.success("修改成功，新密码是：" + value);
     });
   }).catch(() => {});
-    };
+};
-    // 用户状态修改
+// 用户状态修改
-    const handleStatusChange = (row:any)=> {
+const handleStatusChange = (row:any)=> {
   let text = row.userStatus === 1 ? "启用" : "停用";
   ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
     confirmButtonText: "确定",
@@ -198,19 +196,5 @@ export default defineComponent({
   }).catch(function() {
     row.userStatus =row.userStatus === 0 ?1 : 0;
   });
-    };
+};
-		return {
-			editUserRef,
-			onOpenAddUser,
-			onOpenEditUser,
-			onRowDel,
-      sys_user_sex,
-      userList,
-      handleSelectionChange,
-      handleResetPwd,
-      handleStatusChange,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/system/user/index.vue

@@ -5,7 +5,7 @@
         <el-card shadow="hover">
           <el-aside>
             <el-scrollbar>
-              <el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable size="default" style="width: 80%;"/>
+              <el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable style="width: 80%;"/>
               <el-tree
                   ref="treeRef"
                   class="filter-tree"
@@ -82,7 +82,7 @@
                   </el-icon>
                   新增用户
                 </el-button>
-                <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+                <el-button size="default" type="danger" class="ml10" @click="onRowDel()">
                   <el-icon>
                     <ele-Delete />
                   </el-icon>
@@ -99,7 +99,7 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
 import {ElTree,FormInstance} from 'element-plus';
 import { Search } from '@element-plus/icons-vue'
@@ -118,19 +118,15 @@ interface QueryParam {
     dateRange: string[];
   };
 }
-
+defineOptions({ name: "systemUser"})
-export default defineComponent({
+const {proxy} = <any>getCurrentInstance();
-	name: 'systemUser',
+const {sys_user_sex} = proxy.useDict('sys_user_sex')
-	components: { UserList },
+const userListRef = ref();
-	setup() {
+const queryRef = ref();
-    const {proxy} = <any>getCurrentInstance();
+const filterText = ref('');
-    const {sys_user_sex} = proxy.useDict('sys_user_sex')
+const treeRef = ref<InstanceType<typeof ElTree>>();
-		const userListRef = ref();
+const search = Search
-		const queryRef = ref();
+const state = reactive<QueryParam>({
-    const filterText = ref('');
-    const treeRef = ref<InstanceType<typeof ElTree>>();
-    const search = Search
-		const state = reactive<QueryParam>({
   ids:[],
   deptProps:{
     id:"deptId",
@@ -165,61 +161,45 @@ export default defineComponent({
     keyWords:'',
     dateRange:[]
   },
-		});
+});
-		// 初始化表格数据
+const { deptData,deptProps,param}=toRefs(state)
-		const initTableData = () => {
+// 初始化表格数据
+const initTableData = () => {
   getDeptTree().then((res:any)=>{
     state.deptData = res.data.deps
   })
-		};
+};
-    const userList = ()=>{
+const userList = ()=>{
   userListRef.value.userList();
-    };
+};
-		// 打开新增用户弹窗
+// 打开新增用户弹窗
-		const onOpenAddUser = () => {
+const onOpenAddUser = () => {
   userListRef.value.onOpenAddUser();
-		};
+};
-		// 删除用户
+// 删除用户
-		const onRowDel = () => {
+const onRowDel = () => {
   userListRef.value.onRowDel(null);
-		};
+};
-		// 页面加载时
+// 页面加载时
-		onMounted(() => {
+onMounted(() => {
   initTableData();
-		});
+});
-    watch(filterText, (val) => {
+watch(filterText, (val) => {
   treeRef.value!.filter(val)
-    });
+});
-    const deptFilterNode = (value: string, data:any) => {
+const deptFilterNode = (value: string, data:any) => {
   if (!value) return true;
   return data.deptName.includes(value)
-    };
+};
-    // 节点单击事件
+// 节点单击事件
-    const handleNodeClick = (data:any) => {
+const handleNodeClick = (data:any) => {
   state.param.deptId = data.deptId;
   userList();
-    };
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    const resetQuery = (formEl: FormInstance | undefined) => {
+const resetQuery = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
   userList()
-    };
+};
-		return {
-      queryRef,
-			userListRef,
-			onOpenAddUser,
-			onRowDel,
-      deptFilterNode,
-      filterText,
-      treeRef,
-      search,
-      sys_user_sex,
-      userList,
-      handleNodeClick,
-      resetQuery,
-			...toRefs(state),
-		};
-	},
-});
 </script>

src/views/visualizing/demo2.vue

@@ -792,7 +792,7 @@ export default defineComponent({
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
-	background: url(https://img-blog.csdnimg.cn/6267533849444025811bf0840f9366e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_20,color_FFFFFF,t_70,g_se,x_16);
+	background: url(/@/assets/board2.jpg);
 	background-size: 100% 100%;
 	display: flex;
 	flex-direction: column;
@@ -822,15 +822,6 @@ export default defineComponent({
 			background-size: 200% 100%;
 			animation: masked-animation 4s infinite linear;
 			-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
-			@keyframes masked-animation {
-				0% {
-					background-position: 0 0;
-				}
-				100% {
-					background-position: -100% 0;
-				}
-			}
-			position: relative;
 			&::after {
 				content: '';
 				width: 50%;
@@ -1341,4 +1332,12 @@ export default defineComponent({
 		}
 	}
 }
+@keyframes masked-animation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
 </style>

vite.config.ts

@@ -1,7 +1,6 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
-import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
 import viteCompression from 'vite-plugin-compression';
 import { buildConfig } from './src/utils/build';
 
@@ -17,7 +16,7 @@ const alias: Record<string, string> = {
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
-		plugins: [vue(), vueSetupExtend(), viteCompression({disable:true})],
+		plugins: [vue(), viteCompression({disable:true})],
 		root: process.cwd(),
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,