hxd/zky_mandate_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yxh 2024-07-22 09:32:42 +08:00
parent b071104e17
commit 66b84ec199
73 changed files with 7093 additions and 7912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.eslintrc.js → .eslintrc.cjs
View File

1997
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

59
package.json
View File

@ -4,66 +4,67 @@
"description": "vue3 vite next admin template", "description": "vue3 vite next admin template",
"author": "lyt_20201208", "author": "lyt_20201208",
"license": "MIT", "license": "MIT",
"type": "module",
"scripts": { "scripts": {
"dev": "vite --force", "dev": "vite",
"build": "vite build", "build": "vite build",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}, },
"dependencies": { "dependencies": {
"@codemirror/lang-javascript": "^6.1.1", "@codemirror/lang-javascript": "^6.1.1",
"@codemirror/theme-one-dark": "^6.1.0", "@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", "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-gl": "^2.0.9",
"echarts-wordcloud": "^2.1.0", "echarts-wordcloud": "^2.1.0",
"element-plus": "^2.6.3", "element-plus": "^2.6.3",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.5",
"jsplumb": "^2.15.6", "jsplumb": "^2.15.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.0.34", "pinia": "^2.1.7",
"print-js": "^1.6.0", "print-js": "^1.6.0",
"qrcodejs2-fixes": "^0.0.2", "qrcodejs2-fixes": "^0.0.2",
"qs": "^6.11.1", "qs": "^6.12.0",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.2",
"spark-md5": "^3.0.2", "spark-md5": "^3.0.2",
"splitpanes": "^3.1.5", "splitpanes": "^3.1.5",
"vue": "^3.2.47", "vue": "^3.4.21",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-codemirror": "^6.1.1", "vue-codemirror": "^6.1.1",
"vue-demi": "^0.13.11", "vue-demi": "^0.14.7",
"vue-grid-layout": "^3.0.0-beta1", "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-simple-uploader": "^1.0.0-beta.5",
"vue-ueditor-wrap": "^3.0.8" "vue-ueditor-wrap": "^3.0.8"
}, },
"devDependencies": { "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", "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", "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-cdn-import": "^0.3.5",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-vue-setup-extend-plus": "^0.1.0", "vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vue-eslint-parser": "^9.1.1" "vue-eslint-parser": "^9.4.1"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",

271
src/layout/component/aside.vue
View File

@ -9,7 +9,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue'; import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import pinia from '/@/stores/index'; import pinia from '/@/stores/index';
@ -18,146 +18,135 @@ import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import Logo from '/@/layout/logo/index.vue'; import Logo from '/@/layout/logo/index.vue';
import Vertical from '/@/layout/navMenu/vertical.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); menuList: [],
const { themeConfig } = storeToRefs(storesThemeConfig); clientWidth: 0,
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes); });
const state = reactive({ const { menuList } = toRefs(state);
menuList: [], // 设置菜单展开/收起时的宽度
clientWidth: 0, const setCollapseStyle = computed(() => {
}); const { layout, isCollapse, menuBar } = themeConfig.value;
// 设置菜单展开/收起时的宽度 const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
const setCollapseStyle = computed(() => { const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
const { layout, isCollapse, menuBar } = themeConfig.value; // 判断是否是手机端
const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff']; if (state.clientWidth <= 1000) {
const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : ''; if (isCollapse) {
// 判断是否是手机端 document.body.setAttribute('class', 'el-popup-parent--hidden');
if (state.clientWidth <= 1000) { const asideEle = document.querySelector('.layout-container') as HTMLElement;
if (isCollapse) { const modeDivs = document.createElement('div');
document.body.setAttribute('class', 'el-popup-parent--hidden'); modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
const asideEle = document.querySelector('.layout-container') as HTMLElement; asideEle.appendChild(modeDivs);
const modeDivs = document.createElement('div'); modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
modeDivs.setAttribute('class', 'layout-aside-mobile-mode'); return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
asideEle.appendChild(modeDivs); } else {
modeDivs.addEventListener('click', closeLayoutAsideMobileMode); // 关闭弹窗
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open']; closeLayoutAsideMobileMode();
} else { return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
// 关闭弹窗 }
closeLayoutAsideMobileMode(); } else {
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close']; if (layout === 'columns') {
} // 分栏布局，菜单收起时宽度给 1px
} else { if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
if (layout === 'columns') { else return [asideBrColor, 'layout-aside-pc-220'];
// 分栏布局，菜单收起时宽度给 1px } else {
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1']; // 其它布局给 64px
else return [asideBrColor, 'layout-aside-pc-220']; if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
} else { else return [asideBrColor, 'layout-aside-pc-220'];
// 其它布局给 64px }
if (isCollapse) return [asideBrColor, 'layout-aside-pc-64']; }
else return [asideBrColor, 'layout-aside-pc-220']; });
} // 关闭移动端蒙版
} const closeLayoutAsideMobileMode = () => {
}); const el = document.querySelector('.layout-aside-mobile-mode');
// 关闭移动端蒙版 el?.setAttribute('style', 'animation: error-img-two 0.3s');
const closeLayoutAsideMobileMode = () => { setTimeout(() => {
const el = document.querySelector('.layout-aside-mobile-mode'); el?.parentNode?.removeChild(el);
el?.setAttribute('style', 'animation: error-img-two 0.3s'); }, 300);
setTimeout(() => { const clientWidth = document.body.clientWidth;
el?.parentNode?.removeChild(el); if (clientWidth < 1000) themeConfig.value.isCollapse = false;
}, 300); document.body.setAttribute('class', '');
const clientWidth = document.body.clientWidth; };
if (clientWidth < 1000) themeConfig.value.isCollapse = false; // 设置显示/隐藏 logo
document.body.setAttribute('class', ''); const setShowLogo = computed(() => {
}; let { layout, isShowLogo } = themeConfig.value;
// 设置显示/隐藏 logo return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
const setShowLogo = computed(() => { });
let { layout, isShowLogo } = themeConfig.value; // 设置/过滤路由（非静态路由/是否显示在菜单中）
return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns'); const setFilterRoutes = () => {
}); if (themeConfig.value.layout === 'columns') return false;
// 设置/过滤路由（非静态路由/是否显示在菜单中） (state.menuList as any) = filterRoutesFun(routesList.value);
const setFilterRoutes = () => { };
if (themeConfig.value.layout === 'columns') return false; // 路由过滤递归函数
(state.menuList as any) = filterRoutesFun(routesList.value); const filterRoutesFun = (arr: Array<string>) => {
}; return arr
// 路由过滤递归函数 .filter((item: any) => !item.meta.isHide)
const filterRoutesFun = (arr: Array<string>) => { .map((item: any) => {
return arr item = Object.assign({}, item);
.filter((item: any) => !item.meta.isHide) if (item.children) item.children = filterRoutesFun(item.children);
.map((item: any) => { return item;
item = Object.assign({}, item); });
if (item.children) item.children = filterRoutesFun(item.children); };
return item; // 设置菜单导航是否固定（移动端）
}); const initMenuFixed = (clientWidth: number) => {
}; state.clientWidth = clientWidth;
// 设置菜单导航是否固定（移动端） };
const initMenuFixed = (clientWidth: number) => { // 鼠标移入、移出
state.clientWidth = clientWidth; const onAsideEnterLeave = (bool: Boolean) => {
}; let { layout } = themeConfig.value;
// 鼠标移入、移出 if (layout !== 'columns') return false;
const onAsideEnterLeave = (bool: Boolean) => { if (!bool) proxy.mittBus.emit('restoreDefault');
let { layout } = themeConfig.value; stores.setColumnsMenuHover(bool);
if (layout !== 'columns') return false; };
if (!bool) proxy.mittBus.emit('restoreDefault'); // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
stores.setColumnsMenuHover(bool); watch(themeConfig.value, (val) => {
}; if (val.isShowLogoChange !== val.isShowLogo) {
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度 if (!proxy.$refs.layoutAsideScrollbarRef) return false;
watch(themeConfig.value, (val) => { proxy.$refs.layoutAsideScrollbarRef.update();
if (val.isShowLogoChange !== val.isShowLogo) { }
if (!proxy.$refs.layoutAsideScrollbarRef) return false; });
proxy.$refs.layoutAsideScrollbarRef.update(); // 监听vuex值的变化，动态赋值给菜单中
} watch(
}); pinia.state,
// 监听vuex值的变化，动态赋值给菜单中 (val) => {
watch( let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
pinia.state, if (layout === 'classic' && isClassicSplitMenu) return false;
(val) => { setFilterRoutes();
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig; },
if (layout === 'classic' && isClassicSplitMenu) return false; {
setFilterRoutes(); deep: true,
}, }
{ );
deep: true, // 页面加载前
} onBeforeMount(() => {
); initMenuFixed(document.body.clientWidth);
// 页面加载前 setFilterRoutes();
onBeforeMount(() => { // 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
initMenuFixed(document.body.clientWidth); // 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
setFilterRoutes(); proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren)) state.menuList = res.children;
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效 });
proxy.mittBus.on('setSendColumnsChildren', (res: any) => { proxy.mittBus.on('setSendClassicChildren', (res: any) => {
state.menuList = res.children; let { layout, isClassicSplitMenu } = themeConfig.value;
}); if (layout === 'classic' && isClassicSplitMenu) {
proxy.mittBus.on('setSendClassicChildren', (res: any) => { state.menuList = [];
let { layout, isClassicSplitMenu } = themeConfig.value; state.menuList = res.children;
if (layout === 'classic' && isClassicSplitMenu) { }
state.menuList = []; });
state.menuList = res.children; proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
} setFilterRoutes();
}); });
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => { proxy.mittBus.on('layoutMobileResize', (res: any) => {
setFilterRoutes(); initMenuFixed(res.clientWidth);
}); closeLayoutAsideMobileMode();
proxy.mittBus.on('layoutMobileResize', (res: any) => { });
initMenuFixed(res.clientWidth);
closeLayoutAsideMobileMode();
});
});
return {
setCollapseStyle,
setShowLogo,
isTagsViewCurrenFull,
onAsideEnterLeave,
...toRefs(state),
};
},
}); });
</script> </script>

302
src/layout/component/columnsAside.vue
View File

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

32
src/layout/component/header.vue
View File

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

122
src/layout/component/main.vue
View File

@ -19,8 +19,8 @@
</el-main> </el-main>
</template> </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 { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
@ -33,69 +33,59 @@ interface MainState {
headerHeight: string | number; headerHeight: string | number;
currentRouteMeta: any; 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(); headerHeight: '',
const { themeConfig } = storeToRefs(storesThemeConfig); currentRouteMeta: {},
const route = useRoute();
const state = reactive<MainState>({
headerHeight: '',
currentRouteMeta: {},
});
// 判断布局
const isClassicOrTransverse = computed(() => {
const { layout } = themeConfig.value;
return layout === 'classic' || layout === 'transverse';
});
// 设置 main 的高度
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
const initGetMeta = () => {
state.currentRouteMeta = route.meta;
};
// 页面加载前
onMounted(async () => {
await initGetMeta();
initHeaderHeight();
NextLoading.done();
});
// 监听路由变化
watch(
() => route.path,
() => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = bool ? `86px` : `115px`;
proxy.$refs.layoutScrollbarRef.update();
}
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
(val) => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
proxy.$refs?.layoutScrollbarRef?.update();
},
{
deep: true,
}
);
return {
themeConfig,
isClassicOrTransverse,
...toRefs(state),
};
},
}); });
const { currentRouteMeta } = toRefs(state);
// 判断布局
const isClassicOrTransverse = computed(() => {
const { layout } = themeConfig.value;
return layout === 'classic' || layout === 'transverse';
});
// 设置 main 的高度
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
const initGetMeta = () => {
state.currentRouteMeta = route.meta;
};
// 页面加载前
onMounted(async () => {
await initGetMeta();
initHeaderHeight();
NextLoading.done();
});
// 监听路由变化
watch(
() => route.path,
() => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = bool ? `86px` : `115px`;
proxy.$refs.layoutScrollbarRef.update();
}
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
themeConfig,
(val) => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
proxy.$refs?.layoutScrollbarRef?.update();
},
{
deep: true,
}
);
</script> </script>

36
src/layout/footer/index.vue
View File

@ -7,29 +7,19 @@
</div> </div>
</template> </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({ setTimeout(() => {
isDelayFooter: true, isDelayFooter.value = false;
}); setTimeout(() => {
// 路由改变时，等主界面动画加载完毕再显示 footer isDelayFooter.value = true;
onBeforeRouteUpdate(() => { }, 800);
setTimeout(() => { }, 0);
state.isDelayFooter = false;
setTimeout(() => {
state.isDelayFooter = true;
}, 800);
}, 0);
});
return {
...toRefs(state),
};
},
}); });
</script> </script>

245
src/layout/lockScreen/index.vue
View File

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

37
src/layout/logo/index.vue
View File

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

17
src/layout/main/classic.vue
View File

@ -12,7 +12,7 @@
</el-container> </el-container>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
@ -20,16 +20,7 @@ import Aside from '/@/layout/component/aside.vue';
import Header from '/@/layout/component/header.vue'; import Header from '/@/layout/component/header.vue';
import Main from '/@/layout/component/main.vue'; import Main from '/@/layout/component/main.vue';
import TagsView from '/@/layout/navBars/tagsView/tagsView.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> </script>

22
src/layout/main/columns.vue
View File

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

40
src/layout/main/defaults.vue
View File

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

8
src/layout/main/transverse.vue
View File

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

151
src/layout/navBars/breadcrumb/breadcrumb.vue
View File

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

25
src/layout/navBars/breadcrumb/closeFull.vue
View File

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

158
src/layout/navBars/breadcrumb/index.vue
View File

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

136
src/layout/navBars/breadcrumb/search.vue
View File

@ -25,7 +25,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue'; import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@ -44,80 +44,68 @@ interface Restaurant {
title: string; 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(); isShowSearch: false,
const router = useRouter(); menuQuery: '',
const state = reactive<SearchState>({ tagsViewList: [],
isShowSearch: false,
menuQuery: '',
tagsViewList: [],
});
// 搜索弹窗打开
const openSearch = () => {
state.menuQuery = '';
state.isShowSearch = true;
initTageView();
nextTick(() => {
setTimeout(() => {
layoutMenuAutocompleteRef.value.focus();
});
});
};
// 搜索弹窗关闭
const closeSearch = () => {
state.isShowSearch = false;
};
// 菜单搜索数据过滤
const menuSearch = (queryString: string, cb: Function) => {
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
cb(results);
};
// 菜单搜索过滤
const createFilter: any = (queryString: string) => {
return (restaurant: Restaurant) => {
return (
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1
);
};
};
// 初始化菜单数据
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) => {
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 失去焦点时
const onSearchBlur = () => {
closeSearch();
};
return {
layoutMenuAutocompleteRef,
openSearch,
closeSearch,
menuSearch,
onHandleSelect,
onSearchBlur,
...toRefs(state),
};
},
}); });
const { isShowSearch, menuQuery} =toRefs(state)
// 搜索弹窗打开
const openSearch = () => {
state.menuQuery = '';
state.isShowSearch = true;
initTageView();
nextTick(() => {
setTimeout(() => {
layoutMenuAutocompleteRef.value.focus();
});
});
};
// 搜索弹窗关闭
const closeSearch = () => {
state.isShowSearch = false;
};
// 菜单搜索数据过滤
const menuSearch = (queryString: string, cb: Function) => {
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
cb(results);
};
// 菜单搜索过滤
const createFilter: any = (queryString: string) => {
return (restaurant: Restaurant) => {
return (
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1
);
};
};
// 初始化菜单数据
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) => {
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 失去焦点时
const onSearchBlur = () => {
closeSearch();
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

489
src/layout/navBars/breadcrumb/setings.vue
View File

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

391
src/layout/navBars/breadcrumb/user.vue
View File

@ -79,7 +79,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent, watch} from 'vue'; import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent, watch} from 'vue';
import { useRoute,useRouter } from 'vue-router'; import { useRoute,useRouter } from 'vue-router';
import {ElMessageBox, ElMessage, ElNotification} from 'element-plus'; import {ElMessageBox, ElMessage, ElNotification} from 'element-plus';
@ -96,213 +96,194 @@ import {logout} from "/@/api/login";
import {removeCache} from "/@/api/system/cache"; import {removeCache} from "/@/api/system/cache";
import {noticeStore} from "/@/stores/noticeStore"; 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); isScreenfull: false,
const searchRef = ref(); disabledI18n: 'zh-cn',
const newPopoverRef=ref(); disabledSize: 'large',
const state = reactive({ });
isScreenfull: false, const {isScreenfull, disabledI18n, disabledSize} = toRefs(state)
disabledI18n: 'zh-cn', // 设置分割样式
disabledSize: 'large', const layoutUserFlexNum = computed(() => {
}); let num: string | number = '';
// 设置分割样式 const { layout, isClassicSplitMenu } = themeConfig.value;
const layoutUserFlexNum = computed(() => { const layoutArr: string[] = ['defaults', 'columns'];
let num: string | number = ''; if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
const { layout, isClassicSplitMenu } = themeConfig.value; else num = '';
const layoutArr: string[] = ['defaults', 'columns']; return num;
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1'; });
else num = ''; // 全屏点击时
return num; const onScreenfullClick = () => {
}); if (!screenfull.isEnabled) {
// 全屏点击时 ElMessage.warning('暂不不支持全屏');
const onScreenfullClick = () => { return false;
if (!screenfull.isEnabled) { }
ElMessage.warning('暂不不支持全屏'); screenfull.toggle();
return false; screenfull.on('change', () => {
} if (screenfull.isFullscreen) state.isScreenfull = true;
screenfull.toggle(); else state.isScreenfull = false;
screenfull.on('change', () => { });
if (screenfull.isFullscreen) state.isScreenfull = true; };
else state.isScreenfull = false; // 布局配置 icon 点击时
}); const onLayoutSetingClick = () => {
}; proxy.mittBus.emit('openSetingsDrawer');
// 布局配置 icon 点击时 };
const onLayoutSetingClick = () => { //清除缓存
proxy.mittBus.emit('openSetingsDrawer'); const removeCacheClick = ()=>{
}; //清除浏览器缓存
//清除缓存 Session.remove('userMenu');
const removeCacheClick = ()=>{ //清除后端缓存
//清除浏览器缓存 removeCache().then(()=>{
Session.remove('userMenu'); ElMessage.success('缓存清除成功');
//清除后端缓存 window.location.reload();
removeCache().then(()=>{ })
ElMessage.success('缓存清除成功'); };
// 下拉菜单点击时
const onHandleCommandClick = (path: string) => {
if (path === 'logOut') {
ElMessageBox({
closeOnClickModal: false,
closeOnPressEscape: false,
title: t('message.user.logOutTitle'),
message: t('message.user.logOutMessage'),
showCancelButton: true,
confirmButtonText: t('message.user.logOutConfirm'),
cancelButtonText: t('message.user.logOutCancel'),
buttonSize: 'default',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
//后端退出
logout().then(()=>{
instance.confirmButtonLoading = true;
instance.confirmButtonText = t('message.user.logOutExit');
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 500);
})
} else {
done();
}
},
})
.then(async () => {
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload(); window.location.reload();
}) })
}; .catch(() => {});
// 下拉菜单点击时 } else if (path === 'wareHouse') {
const onHandleCommandClick = (path: string) => { window.open('https://gitee.com/tiger1103/gfast');
if (path === 'logOut') { } else {
ElMessageBox({ router.push(path);
closeOnClickModal: false, }
closeOnPressEscape: false, };
title: t('message.user.logOutTitle'), // 菜单搜索点击
message: t('message.user.logOutMessage'), const onSearchClick = () => {
showCancelButton: true, searchRef.value.openSearch();
confirmButtonText: t('message.user.logOutConfirm'), };
cancelButtonText: t('message.user.logOutCancel'), const hideNews=()=>{
buttonSize: 'default', debugger
beforeClose: (action, instance, done) => { newPopoverRef.value.hide()
if (action === 'confirm') { }
//后端退出 // 组件大小改变
logout().then(()=>{ const onComponentSizeChange = (size: string) => {
instance.confirmButtonLoading = true; Local.remove('themeConfig');
instance.confirmButtonText = t('message.user.logOutExit'); themeConfig.value.globalComponentSize = size;
setTimeout(() => { Local.set('themeConfig', themeConfig.value);
done(); initComponentSize();
setTimeout(() => { window.location.reload();
instance.confirmButtonLoading = false; };
}, 300); // 语言切换
}, 500); const onLanguageChange = (lang: string) => {
}) Local.remove('themeConfig');
} else { themeConfig.value.globalI18n = lang;
done(); Local.set('themeConfig', themeConfig.value);
} proxy.$i18n.locale = lang;
}, initI18n();
}) other.useTitle();
.then(async () => { };
// 清除缓存/token等 // 设置 element plus 组件的国际化
Session.clear(); const setI18nConfig = (locale: string) => {
// 使用 reload 时，不需要调用 resetRoute() 重置路由 proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]);
window.location.reload(); };
}) // 初始化言语国际化
.catch(() => {}); const initI18n = () => {
} else if (path === 'wareHouse') { switch (Local.get('themeConfig').globalI18n) {
window.open('https://gitee.com/tiger1103/gfast'); case 'zh-cn':
} else { state.disabledI18n = 'zh-cn';
router.push(path); setI18nConfig('zh-cn');
} break;
}; case 'en':
// 菜单搜索点击 state.disabledI18n = 'en';
const onSearchClick = () => { setI18nConfig('en');
searchRef.value.openSearch(); break;
}; case 'zh-tw':
const hideNews=()=>{ state.disabledI18n = 'zh-tw';
debugger setI18nConfig('zh-tw');
newPopoverRef.value.hide() break;
} }
// 组件大小改变 };
const onComponentSizeChange = (size: string) => { // 初始化全局组件大小
Local.remove('themeConfig'); const initComponentSize = () => {
themeConfig.value.globalComponentSize = size; switch (Local.get('themeConfig').globalComponentSize) {
Local.set('themeConfig', themeConfig.value); case 'large':
initComponentSize(); state.disabledSize = 'large';
window.location.reload(); break;
}; case 'default':
// 语言切换 state.disabledSize = 'default';
const onLanguageChange = (lang: string) => { break;
Local.remove('themeConfig'); case 'small':
themeConfig.value.globalI18n = lang; state.disabledSize = 'small';
Local.set('themeConfig', themeConfig.value); break;
proxy.$i18n.locale = lang; }
initI18n(); };
other.useTitle(); // 页面加载时
}; onMounted(() => {
// 设置 element plus 组件的国际化 if (Local.get('themeConfig')) {
const setI18nConfig = (locale: string) => { initI18n();
proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]); initComponentSize();
}; }
// 初始化言语国际化
const initI18n = () => {
switch (Local.get('themeConfig').globalI18n) {
case 'zh-cn':
state.disabledI18n = 'zh-cn';
setI18nConfig('zh-cn');
break;
case 'en':
state.disabledI18n = 'en';
setI18nConfig('en');
break;
case 'zh-tw':
state.disabledI18n = 'zh-tw';
setI18nConfig('zh-tw');
break;
}
};
// 初始化全局组件大小
const initComponentSize = () => {
switch (Local.get('themeConfig').globalComponentSize) {
case 'large':
state.disabledSize = 'large';
break;
case 'default':
state.disabledSize = 'default';
break;
case 'small':
state.disabledSize = 'small';
break;
}
};
// 页面加载时
onMounted(() => {
if (Local.get('themeConfig')) {
initI18n();
initComponentSize();
}
});
const noticeStoreAct = noticeStore()
const getMessages = computed(() => {
return noticeStoreAct.message;
});
watch(getMessages,(nv,ov)=>{
if (!nv || !nv.id) {
return;
}
showNotice(nv)
},{ immediate: true, deep: true })
const showNotice = (data:any) => {
const eln = ElNotification({
title: '新消息',
message: `您有一条新消息：【${data.title}】，请点击查看详情。`,
type: 'warning',
duration:3600000,
onClick(){
if(route.fullPath=="/system/sysNotice/show?type="+data.type){
router.go(0)
}else{
router.push("/system/sysNotice/show?type="+data.type)
}
eln.close()
}
})
}
return {
userInfos,
onLayoutSetingClick,
onHandleCommandClick,
onScreenfullClick,
onSearchClick,
onComponentSizeChange,
onLanguageChange,
removeCacheClick,
hideNews,
searchRef,
layoutUserFlexNum,
...toRefs(state),
};
},
}); });
const noticeStoreAct = noticeStore()
const getMessages = computed(() => {
return noticeStoreAct.message;
});
watch(getMessages,(nv,ov)=>{
if (!nv || !nv.id) {
return;
}
showNotice(nv)
},{ immediate: true, deep: true })
const showNotice = (data:any) => {
const eln = ElNotification({
title: '新消息',
message: `您有一条新消息：【${data.title}】，请点击查看详情。`,
type: 'warning',
duration:3600000,
onClick(){
if(route.fullPath=="/system/sysNotice/show?type="+data.type){
router.go(0)
}else{
router.push("/system/sysNotice/show?type="+data.type)
}
eln.close()
}
})
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

255
src/layout/navBars/breadcrumb/userNews.vue
View File

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

25
src/layout/navBars/index.vue
View File

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

169
src/layout/navBars/tagsView/contextmenu.vue
View File

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

32
src/layout/navBars/tagsView/tagsView.vue
View File

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

24
src/router/route.ts
View File

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

113
src/views/bigUpload/component/editBigUpload.vue
View File

@ -18,74 +18,61 @@
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {ref, reactive, defineComponent} from 'vue'; import {ref, reactive, defineComponent} from 'vue';
import {getBigFile, editBigFile} from "/@/api/system/bigFile"; import {getBigFile, editBigFile} from "/@/api/system/bigFile";
import {ElMessage} from "element-plus"; 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) name: [
const ruleForm = reactive<any>({id:0, name:"", describe:""}) { required: true, message: "标题不能为空", trigger: "blur" }
const rules = reactive<any>({ ],
name: [
{ required: true, message: "标题不能为空", trigger: "blur" }
],
})
const openDialog = async (id:number) => {
resetForm()
const result = await getBigFile(id).then((res:any) => res.code === 0? res.data || {} : {})
const {name, describe} = result
ruleForm.id = result.id
ruleForm.name = name
ruleForm.describe = describe
isShowDialog.value = true
}
const closeDialog = () => {
isShowDialog.value = false
}
const resetForm = () => {
ruleForm.id = 0
ruleForm.name = ""
ruleForm.describe = ""
}
const onSubmit = async () => {
const formWrap = formRef.value as any
if (!formWrap) return;
formWrap.validate(async (valid: boolean) => {
if (valid) {
const result:any = await editBigFile(ruleForm)
if (result.code === 0) {
ElMessage.success('修改成功');
closeDialog()
emit('success')
} else {
ElMessage.error("修改失败")
}
}
});
}
return {
openDialog,
closeDialog,
isShowDialog,
ruleForm,
rules,
onSubmit,
formRef,
resetForm
}
}
}) })
const openDialog = async (id:number) => {
resetForm()
const result = await getBigFile(id).then((res:any) => res.code === 0? res.data || {} : {})
const {name, describe} = result
ruleForm.id = result.id
ruleForm.name = name
ruleForm.describe = describe
isShowDialog.value = true
}
const closeDialog = () => {
isShowDialog.value = false
}
defineExpose({
openDialog
})
const resetForm = () => {
ruleForm.id = 0
ruleForm.name = ""
ruleForm.describe = ""
}
const onSubmit = async () => {
const formWrap = formRef.value as any
if (!formWrap) return;
formWrap.validate(async (valid: boolean) => {
if (valid) {
const result:any = await editBigFile(ruleForm)
if (result.code === 0) {
ElMessage.success('修改成功');
closeDialog()
emit('success')
} else {
ElMessage.error("修改失败")
}
}
});
}
</script> </script>
<style scoped> <style scoped>

38
src/views/bigUpload/index.vue
View File

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

17
src/views/chart/head.vue
View File

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

933
src/views/home/index.vue
View File

File diff suppressed because one or more lines are too long

252
src/views/login/component/account.vue
View File

@ -80,7 +80,7 @@
</el-form> </el-form>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { import {
toRefs, toRefs,
reactive, reactive,
@ -103,139 +103,125 @@ import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading'; import { NextLoading } from '/@/utils/loading';
import {captcha, login} from "/@/api/login"; import {captcha, login} from "/@/api/login";
import GoCaptchaBtn from "/@/components/goCaptcha/GoCaptchaBtn.vue"; 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') isShowPassword: false,
const verifyStatus = ref(0) ruleForm: {
const state = reactive({ username: 'demo',
isShowPassword: false, password: '123456',
ruleForm: { verifyCode: '',
username: 'demo', verifyKey:''
password: '123456', },
verifyCode: '', formRules:{
verifyKey:'' username: [
}, { required: true, trigger: "blur", message: "用户名不能为空" }
formRules:{ ],
username: [ password: [
{ required: true, trigger: "blur", message: "用户名不能为空" } { required: true, trigger: "blur", message: "密码不能为空" }
], ]
password: [ },
{ required: true, trigger: "blur", message: "密码不能为空" } loading: {
] signIn: false,
}, },
loading: { captchaSrc:'',
signIn: false,
},
captchaSrc:'',
});
onMounted(() => {
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(() => {
return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
if(state.loading.signIn){
return
}
const formWrap = unref(loginForm) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if(valid){
state.loading.signIn = true;
login(state.ruleForm).then(async (res:any)=>{
const userInfo = res.data.userInfo
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
// 存储 token 到浏览器缓存
Session.set('token', res.data.token);
// 存储用户信息到浏览器缓存
Session.set('userInfo', userInfo);
// 设置用户菜单
Session.set('userMenu',res.data.menuList)
// 设置按钮权限
Session.set('permissions',res.data.permissions)
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
Cookies.set('username', state.ruleForm.username);
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
await initFrontEndControlRoutes();
signInSuccess();
} else {
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
await initBackEndControlRoutes();
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
signInSuccess();
}
}).catch(()=>{
state.loading.signIn = false;
state.ruleForm.verifyKey = ''
state.ruleForm.verifyCode = ''
checkCaptchaResult.value = 'default'
// 验证码V1版
getCaptcha();
})
}
})
};
// 登录成功后的跳转
const signInSuccess = () => {
// 初始化登录成功时间问候语
let currentTimeInfo = currentTime.value;
// 登录成功，跳到转首页
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
if (route.query?.redirect) {
router.push({
path: <string>route.query?.redirect,
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
});
} else {
router.push('/');
}
// 登录成功提示
// 关闭 loading
state.loading.signIn = true;
const signInText = t('message.signInText');
ElMessage.success(`${currentTimeInfo}，${signInText}`);
// 添加 loading，防止第一次进入界面时出现短暂空白
NextLoading.start();
};
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),
};
},
}); });
const { isShowPassword,ruleForm,formRules,loading,captchaSrc} = toRefs(state);
onMounted(() => {
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(() => {
return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
if(state.loading.signIn){
return
}
const formWrap = unref(loginForm) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if(valid){
state.loading.signIn = true;
login(state.ruleForm).then(async (res:any)=>{
const userInfo = res.data.userInfo
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
// 存储 token 到浏览器缓存
Session.set('token', res.data.token);
// 存储用户信息到浏览器缓存
Session.set('userInfo', userInfo);
// 设置用户菜单
Session.set('userMenu',res.data.menuList)
// 设置按钮权限
Session.set('permissions',res.data.permissions)
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
Cookies.set('username', state.ruleForm.username);
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
await initFrontEndControlRoutes();
signInSuccess();
} else {
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
await initBackEndControlRoutes();
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
signInSuccess();
}
}).catch(()=>{
state.loading.signIn = false;
state.ruleForm.verifyKey = ''
state.ruleForm.verifyCode = ''
checkCaptchaResult.value = 'default'
// 验证码V1版
getCaptcha();
})
}
})
};
// 登录成功后的跳转
const signInSuccess = () => {
// 初始化登录成功时间问候语
let currentTimeInfo = currentTime.value;
// 登录成功，跳到转首页
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
if (route.query?.redirect) {
router.push({
path: <string>route.query?.redirect,
query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
});
} else {
router.push('/');
}
// 登录成功提示
// 关闭 loading
state.loading.signIn = true;
const signInText = t('message.signInText');
ElMessage.success(`${currentTimeInfo}，${signInText}`);
// 添加 loading，防止第一次进入界面时出现短暂空白
NextLoading.start();
};
const handleVerifyCodeConfirm = (data:{key:string,dots:string})=>{
state.ruleForm.verifyCode = data.dots
state.ruleForm.verifyKey = data.key
}
</script> </script>

17
src/views/login/component/mobile.vue
View File

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

40
src/views/login/component/scan.vue
View File

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

43
src/views/login/index.vue
View File

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

184
src/views/system/config/component/editConfig.vue
View File

@ -34,7 +34,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref, unref } from 'vue'; import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {addConfig, editConfig, getConfig} from "/@/api/system/config"; import {addConfig, editConfig, getConfig} from "/@/api/system/config";
@ -51,102 +51,92 @@ interface DicState {
ruleForm: RuleFormState; ruleForm: RuleFormState;
rules:{} rules:{}
} }
defineOptions({ name: "apiV1SystemConfigEdit"})
export default defineComponent({ const props = defineProps({
name: 'systemEditDicData', sysYesNoOptions:{
props:{ type:Array,
sysYesNoOptions:{ default:()=>[]
type:Array, }
default:()=>[] })
} const emit = defineEmits(['dataList'])
const formRef = ref<HTMLElement | null>(null);
const state = reactive<DicState>({
isShowDialog: false,
ruleForm: {
configId: 0,
configName: '',
configKey: '',
configValue: '',
configType: '0',
remark: '',
}, },
setup(prop,{emit}) { rules: {
const formRef = ref<HTMLElement | null>(null); configName: [
const state = reactive<DicState>({ { required: true, message: "参数名称不能为空", trigger: "blur" }
isShowDialog: false, ],
ruleForm: { configKey: [
configId: 0, { required: true, message: "参数键名不能为空", trigger: "blur" }
configName: '', ],
configKey: '', configValue: [
configValue: '', { required: true, message: "参数键值不能为空", trigger: "blur" }
configType: '0', ]
remark: '', }
},
rules: {
configName: [
{ required: true, message: "参数名称不能为空", trigger: "blur" }
],
configKey: [
{ required: true, message: "参数键名不能为空", trigger: "blur" }
],
configValue: [
{ required: true, message: "参数键值不能为空", trigger: "blur" }
]
}
});
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getConfig(row.configId).then((res:any)=>{
const data:RuleFormState = res.data.data
data.configType = String(data.configType)
state.ruleForm = data
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
const resetForm = ()=>{
state.ruleForm = {
configId: 0,
configName: '',
configKey: '',
configValue: '',
configType: '0',
remark: '',
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.configId!==0){
//修改
editConfig(state.ruleForm).then(()=>{
ElMessage.success('参数修改成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}else{
//添加
addConfig(state.ruleForm).then(()=>{
ElMessage.success('参数添加成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}
}
});
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
formRef,
...toRefs(state),
};
},
}); });
const { isShowDialog,ruleForm,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getConfig(row.configId).then((res:any)=>{
const data:RuleFormState = res.data.data
data.configType = String(data.configType)
state.ruleForm = data
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
defineExpose({ openDialog})
const resetForm = ()=>{
state.ruleForm = {
configId: 0,
configName: '',
configKey: '',
configValue: '',
configType: '0',
remark: '',
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.configId!==0){
//修改
editConfig(state.ruleForm).then(()=>{
ElMessage.success('参数修改成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}else{
//添加
addConfig(state.ruleForm).then(()=>{
ElMessage.success('参数添加成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}
}
});
};
</script> </script>

193
src/views/system/config/index.vue
View File

@ -8,7 +8,6 @@
v-model="tableData.param.configName" v-model="tableData.param.configName"
placeholder="请输入参数名称" placeholder="请输入参数名称"
clearable clearable
size="default"
@keyup.enter.native="dataList" @keyup.enter.native="dataList"
/> />
</el-form-item> </el-form-item>
@ -17,7 +16,6 @@
v-model="tableData.param.configKey" v-model="tableData.param.configKey"
placeholder="请输入参数键名" placeholder="请输入参数键名"
clearable clearable
size="default"
@keyup.enter.native="dataList" @keyup.enter.native="dataList"
/> />
</el-form-item> </el-form-item>
@ -26,7 +24,6 @@
v-model="tableData.param.configType" v-model="tableData.param.configType"
placeholder="系统内置" placeholder="系统内置"
clearable clearable
size="default"
style="width: 240px" style="width: 240px"
> >
<el-option v-for="dict in sys_yes_no" <el-option v-for="dict in sys_yes_no"
@ -38,7 +35,6 @@
<el-form-item label="创建时间" prop="dateRange"> <el-form-item label="创建时间" prop="dateRange">
<el-date-picker <el-date-picker
v-model="tableData.param.dateRange" v-model="tableData.param.dateRange"
size="default"
style="width: 240px" style="width: 240px"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
type="daterange" type="daterange"
@ -103,7 +99,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue'; import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus'; import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
import EditConfig from '/@/views/system/config/component/editConfig.vue'; import EditConfig from '/@/views/system/config/component/editConfig.vue';
@ -135,109 +131,90 @@ 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(); ids:[],
const queryRef = ref(); tableData: {
const {sys_yes_no} = proxy.useDict('sys_yes_no') data: [],
const state = reactive<TableDataState>({ total: 0,
ids:[], loading: false,
tableData: { param: {
data: [], dateRange:[],
total: 0, pageNum: 1,
loading: false, pageSize: 10,
param: { configName:'',
dateRange:[], configKey:'',
pageNum: 1, configType:''
pageSize: 10, },
configName:'',
configKey:'',
configType:''
},
},
});
// 初始化表格数据
const initTableData = () => {
dataList()
};
const dataList=()=>{
getConfigList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.list;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.configName}”，是否继续?`
ids = [row.configId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteConfig(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.configId)
};
// 参数系统内置字典翻译
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),
};
}, },
}); });
const { tableData } = toRefs(state);
// 初始化表格数据
const initTableData = () => {
dataList()
};
const dataList=()=>{
getConfigList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.list;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.configName}”，是否继续?`
ids = [row.configId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteConfig(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.configId)
};
// 参数系统内置字典翻译
const typeFormat=(row:TableDataRow) => {
return proxy.selectDictLabel(unref(sys_yes_no), row.configType);
};
</script> </script>

267
src/views/system/dept/component/editDept.vue
View File

@ -71,7 +71,7 @@
<select-user ref="selectUserRef" @selectUser="confirmUser" :selectedUsers="deptUser"></select-user> <select-user ref="selectUserRef" @selectUser="confirmUser" :selectedUsers="deptUser"></select-user>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue'; import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
import {addDept,editDept, getDeptList} from "/@/api/system/dept"; import {addDept,editDept, getDeptList} from "/@/api/system/dept";
import {getUserByIds} from '/@/api/system/user'; import {getUserByIds} from '/@/api/system/user';
@ -101,150 +101,131 @@ interface DeptSate {
deptData: Array<TableDataRow>; deptData: Array<TableDataRow>;
rules: object; 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([]);
const state = reactive<DeptSate>({
isShowDialog: false,
ruleForm: {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: [],
phone: '',
email: '',
status: 1,
}, },
emits:['deptList'], deptData: [], // 部门数据
setup(prop,{emit}) { rules: {
const {proxy} = getCurrentInstance() as any; deptName:[
const formRef = ref<HTMLElement | null>(null); {required: true, message: "部门名称不能为空", trigger: "blur"},
const selectUserRef = ref(); ]
const deptUser = ref([]); }
const state = reactive<DeptSate>({
isShowDialog: false,
ruleForm: {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: [],
phone: '',
email: '',
status: 1,
},
deptData: [], // 部门数据
rules: {
deptName:[
{required: true, message: "部门名称不能为空", trigger: "blur"},
]
}
});
// 打开弹窗
const openDialog = (row?: RuleFormState|number) => {
resetForm()
getDeptList().then((res:any)=>{
state.deptData = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
});
if(row && typeof row === "object"){
state.ruleForm = row;
let leaders = row.leader??[]
if (leaders.length > 0){
//获取部门负责人信息
getUserByIds({ids:leaders}).then((res:any)=>{
if(res.code === 0){
deptUser.value = res.data.userList;
}
});
}else{
//清空 deptUser, 避免缓存影响
deptUser.value = [];
}
}else if(row && typeof row === 'number'){
state.ruleForm.parentId = row
deptUser.value = [];
}else{
deptUser.value = [];
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.deptId===0){
//添加
addDept(state.ruleForm).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}else{
//修改
editDept(state.ruleForm).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}
}
});
};
const resetForm = ()=>{
state.ruleForm = {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: [],
phone: '',
email: '',
status: 1,
}
};
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[]) => {
let leaderArr = state.ruleForm.leader??[];
if(data.length>0){
data.map((item:any)=>{
// 若存在某个用户 则不添加
if (!leaderArr.includes(item.id)){
deptUser.value.push(item as never)
leaderArr.push(item.id)
}
})
state.ruleForm.leader = leaderArr;
}else{
deptUser.value = []
state.ruleForm.leader = []
}
};
//选择用户
const handleSelectUser = () =>{
selectUserRef.value.openDialog()
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
selectUserRef,
formRef,
deptUser,
confirmUser,
handleClose,
handleSelectUser,
...toRefs(state),
};
},
}); });
const { isShowDialog, ruleForm, deptData,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row?: RuleFormState|number) => {
resetForm()
getDeptList().then((res:any)=>{
state.deptData = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
});
if(row && typeof row === "object"){
state.ruleForm = row;
let leaders = row.leader??[]
if (leaders.length > 0){
//获取部门负责人信息
getUserByIds({ids:leaders}).then((res:any)=>{
if(res.code === 0){
deptUser.value = res.data.userList;
}
});
}else{
//清空 deptUser, 避免缓存影响
deptUser.value = [];
}
}else if(row && typeof row === 'number'){
state.ruleForm.parentId = row
deptUser.value = [];
}else{
deptUser.value = [];
}
state.isShowDialog = true;
};
defineExpose({openDialog})
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.deptId===0){
//添加
addDept(state.ruleForm).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}else{
//修改
editDept(state.ruleForm).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}
}
});
};
const resetForm = ()=>{
state.ruleForm = {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: [],
phone: '',
email: '',
status: 1,
}
};
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[]) => {
let leaderArr = state.ruleForm.leader??[];
if(data.length>0){
data.map((item:any)=>{
// 若存在某个用户 则不添加
if (!leaderArr.includes(item.id)){
deptUser.value.push(item as never)
leaderArr.push(item.id)
}
})
state.ruleForm.leader = leaderArr;
}else{
deptUser.value = []
state.ruleForm.leader = []
}
};
//选择用户
const handleSelectUser = () =>{
selectUserRef.value.openDialog()
};
</script> </script>
<style> <style>
.u-m-r-10{ .u-m-r-10{

117
src/views/system/dept/index.vue
View File

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

167
src/views/system/dict/component/editDic.vue
View File

@ -10,8 +10,8 @@
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="ruleForm.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-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -28,7 +28,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref, unref } from 'vue'; import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
import { getType,addType,editType } from '/@/api/system/dict/type'; import { getType,addType,editType } from '/@/api/system/dict/type';
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
@ -44,91 +44,80 @@ interface DicState {
ruleForm: RuleFormState; ruleForm: RuleFormState;
rules:{} 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); isShowDialog: false,
const state = reactive<DicState>({ ruleForm: {
isShowDialog: false, dictId:0,
ruleForm: { dictName:'',
dictId:0, dictType:'',
dictName:'', status:1,
dictType:'', remark:''
status:1, },
remark:'' rules: {
}, dictName: [
rules: { { required: true, message: "字典名称不能为空", trigger: "blur" }
dictName: [ ],
{ required: true, message: "字典名称不能为空", trigger: "blur" } dictType: [
], { required: true, message: "字典类型不能为空", trigger: "blur" }
dictType: [ ]
{ required: true, message: "字典类型不能为空", trigger: "blur" } }
]
}
});
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getType(row.dictId).then((res:any)=>{
state.ruleForm = res.data.dictType
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
const resetForm = ()=>{
state.ruleForm = {
dictId:0,
dictName:'',
dictType:'',
status:1,
remark:''
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.dictId!==0){
//修改
editType(state.ruleForm).then(()=>{
ElMessage.success('字典类型修改成功');
closeDialog(); // 关闭弹窗
emit('typeList')
})
}else{
//添加
addType(state.ruleForm).then(()=>{
ElMessage.success('字典类型添加成功');
closeDialog(); // 关闭弹窗
emit('typeList')
})
}
}
});
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
formRef,
...toRefs(state),
};
},
}); });
const { isShowDialog,ruleForm,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getType(row.dictId).then((res:any)=>{
state.ruleForm = res.data.dictType
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
defineExpose({ openDialog})
const resetForm = ()=>{
state.ruleForm = {
dictId:0,
dictName:'',
dictType:'',
status:1,
remark:''
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.dictId!==0){
//修改
editType(state.ruleForm).then(()=>{
ElMessage.success('字典类型修改成功');
closeDialog(); // 关闭弹窗
emit('typeList')
})
}else{
//添加
addType(state.ruleForm).then(()=>{
ElMessage.success('字典类型添加成功');
closeDialog(); // 关闭弹窗
emit('typeList')
})
}
}
});
};
</script> </script>

192
src/views/system/dict/component/editDicData.vue
View File

@ -26,8 +26,8 @@
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="ruleForm.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-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
@ -44,7 +44,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref, unref } from 'vue'; import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
import { getData,addData,editData } from '/@/api/system/dict/data'; import { getData,addData,editData } from '/@/api/system/dict/data';
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
@ -63,104 +63,94 @@ interface DicState {
ruleForm: RuleFormState; ruleForm: RuleFormState;
rules:{} rules:{}
} }
defineOptions({ name: "systemEditDicData"})
export default defineComponent({ const prop = defineProps({
name: 'systemEditDicData', dictType:{
props:{ type:String,
dictType:{ default:''
type:String, }
default:()=>'' })
} const emit = defineEmits(['dataList']);
const formRef = ref<HTMLElement | null>(null);
const state = reactive<DicState>({
isShowDialog: false,
ruleForm: {
dictCode: 0,
dictLabel: '',
dictValue: '',
dictSort: 0,
isDefault:0,
status: 1,
remark: '',
dictType:prop.dictType
}, },
setup(prop,{emit}) { rules: {
const formRef = ref<HTMLElement | null>(null); dictLabel: [
const state = reactive<DicState>({ { required: true, message: "数据标签不能为空", trigger: "blur" }
isShowDialog: false, ],
ruleForm: { dictValue: [
dictCode: 0, { required: true, message: "数据键值不能为空", trigger: "blur" }
dictLabel: '', ],
dictValue: '', dictSort: [
dictSort: 0, { required: true, message: "数据顺序不能为空", trigger: "blur" }
isDefault:0, ]
status: 1, }
remark: '',
dictType:prop.dictType
},
rules: {
dictLabel: [
{ required: true, message: "数据标签不能为空", trigger: "blur" }
],
dictValue: [
{ required: true, message: "数据键值不能为空", trigger: "blur" }
],
dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
]
}
});
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getData(row.dictCode).then((res:any)=>{
state.ruleForm = res.data.dict
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
const resetForm = ()=>{
state.ruleForm = {
dictCode: 0,
dictLabel: '',
dictValue: '',
dictSort: 0,
isDefault:0,
status: 1,
remark: '',
dictType:prop.dictType
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.dictCode!==0){
//修改
editData(state.ruleForm).then(()=>{
ElMessage.success('字典数据修改成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}else{
//添加
addData(state.ruleForm).then(()=>{
ElMessage.success('字典数据添加成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}
}
});
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
formRef,
...toRefs(state),
};
},
}); });
const { isShowDialog,ruleForm,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row: RuleFormState|null) => {
resetForm();
if (row){
getData(row.dictCode).then((res:any)=>{
state.ruleForm = res.data.dict
})
state.ruleForm = row;
}
state.isShowDialog = true;
};
defineExpose({ openDialog})
const resetForm = ()=>{
state.ruleForm = {
dictCode: 0,
dictLabel: '',
dictValue: '',
dictSort: 0,
isDefault:0,
status: 1,
remark: '',
dictType:prop.dictType
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.dictCode!==0){
//修改
editData(state.ruleForm).then(()=>{
ElMessage.success('字典数据修改成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}else{
//添加
addData(state.ruleForm).then(()=>{
ElMessage.success('字典数据添加成功');
closeDialog(); // 关闭弹窗
emit('dataList')
})
}
}
});
};
</script> </script>

181
src/views/system/dict/dataList.vue
View File

@ -91,15 +91,13 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus'; import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
import EditDic from '/@/views/system/dict/component/editDicData.vue'; import EditDic from '/@/views/system/dict/component/editDicData.vue';
import {getDataList,deleteData} from "/@/api/system/dict/data"; import {getDataList,deleteData} from "/@/api/system/dict/data";
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
// 定义接口来定义对象的类型 // 定义接口来定义对象的类型
interface TableDataRow { interface TableDataRow {
dictCode: number; dictCode: number;
@ -126,103 +124,86 @@ 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(); ids:[],
const editDicRef = ref(); tableData: {
const queryRef = ref(); data: [],
const state = reactive<TableDataState>({ total: 0,
ids:[], loading: false,
tableData: { param: {
data: [], pageNum: 1,
total: 0, pageSize: 10,
loading: false, dictLabel:'',
param: { dictType:'',
pageNum: 1, status:''
pageSize: 10, },
dictLabel:'',
dictType:'',
status:''
},
},
});
// 初始化表格数据
const initTableData = () => {
dataList()
};
const dataList=()=>{
getDataList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.list;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.dictLabel}”，是否继续?`
ids = [row.dictCode]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteData(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
const dictType = route.params && route.params.dictType;
state.tableData.param.dictType = <string>dictType
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.dictCode)
};
return {
addDicRef,
editDicRef,
queryRef,
onOpenAddDic,
onOpenEditDic,
onRowDel,
dataList,
resetQuery,
handleSelectionChange,
...toRefs(state),
};
}, },
}); });
const { tableData } = toRefs(state);
// 初始化表格数据
const initTableData = () => {
dataList()
};
const dataList=()=>{
getDataList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.list;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.dictLabel}”，是否继续?`
ids = [row.dictCode]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteData(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
const dictType = route.params && route.params.dictType;
state.tableData.param.dictType = <string>dictType
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.dictCode)
};
</script> </script>

178
src/views/system/dict/index.vue
View File

@ -109,7 +109,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus'; import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
import EditDic from '/@/views/system/dict/component/editDic.vue'; import EditDic from '/@/views/system/dict/component/editDic.vue';
@ -141,101 +141,85 @@ 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(); ids:[],
const editDicRef = ref(); tableData: {
const queryRef = ref(); data: [],
const state = reactive<TableDataState>({ total: 0,
ids:[], loading: false,
tableData: { param: {
data: [], pageNum: 1,
total: 0, pageSize: 10,
loading: false, dictName:'',
param: { dictType:'',
pageNum: 1, status:'',
pageSize: 10, dateRange:[],
dictName:'', },
dictType:'', },
status:'',
dateRange:[],
},
},
});
// 初始化表格数据
const initTableData = () => {
typeList()
};
const typeList=()=>{
getTypeList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.dictTypeList;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.dictName}”，是否继续?`
ids = [row.dictId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteType(ids).then(()=>{
ElMessage.success('删除成功');
typeList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
typeList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.dictId)
};
return {
addDicRef,
editDicRef,
queryRef,
onOpenAddDic,
onOpenEditDic,
onRowDel,
typeList,
resetQuery,
handleSelectionChange,
...toRefs(state),
};
},
}); });
const { tableData } = toRefs(state);
// 初始化表格数据
const initTableData = () => {
typeList()
};
const typeList=()=>{
getTypeList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.dictTypeList;
state.tableData.total = res.data.total;
});
};
// 打开新增字典弹窗
const onOpenAddDic = () => {
editDicRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = (row: TableDataRow) => {
editDicRef.value.openDialog(row);
};
// 删除字典
const onRowDel = (row: TableDataRow|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.dictName}”，是否继续?`
ids = [row.dictId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteType(ids).then(()=>{
ElMessage.success('删除成功');
typeList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
typeList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.dictId)
};
</script> </script>

383
src/views/system/menu/component/editMenu.vue
View File

@ -25,9 +25,9 @@
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" > <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="菜单类型" prop="menuType"> <el-form-item label="菜单类型" prop="menuType">
<el-radio-group v-model="ruleForm.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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -98,7 +98,7 @@
<el-radio <el-radio
v-for="dict in visibleOptions" v-for="dict in visibleOptions"
:key="dict.value" :key="dict.value"
:label="dict.value" :value="dict.value"
>{{ dict.label }}</el-radio> >{{ dict.label }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -106,32 +106,32 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" > <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="页面缓存"> <el-form-item label="页面缓存">
<el-radio-group v-model="ruleForm.isKeepAlive"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" > <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否固定"> <el-form-item label="是否固定">
<el-radio-group v-model="ruleForm.isAffix"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" > <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否外链"> <el-form-item label="是否外链">
<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" > <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
<el-form-item label="是否内嵌"> <el-form-item label="是否内嵌">
<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -148,198 +148,183 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue'; import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue'; import IconSelector from '/@/components/iconSelector/index.vue';
import { refreshBackEndControlRoutes } from "/@/router/backEnd"; import { refreshBackEndControlRoutes } from "/@/router/backEnd";
import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu"; import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
import {ElMessage} from "element-plus" import {ElMessage} from "element-plus"
defineOptions({ name: "systemEditMenu"})
const props = defineProps({
export default defineComponent({ visibleOptions:{
name: 'systemEditMenu', type:Array,
components: { IconSelector }, default:()=>[],
props:{
visibleOptions:{
type:Array,
default:()=>[],
},
acType:{
type:String,
default:()=>'add'
}
}, },
setup(props,{emit}) { acType:{
const ruleFormRef = ref<HTMLElement | null>(null); type:String,
const {proxy} = getCurrentInstance() as any; default:()=>'add'
const state = reactive({ }
loading: false, })
isShowDialog: false, const emit = defineEmits(['menuList']);
roles:[], const ruleFormRef = ref<HTMLElement | null>(null);
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式 const {proxy} = getCurrentInstance() as any;
ruleForm: { const state = reactive({
id:undefined, loading: false,
pid: 0, // 上级菜单 isShowDialog: false,
menuType: '0', // 菜单类型 roles:[],
menuName:'', // 菜单名称 // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
name: '', // 接口规则 ruleForm: {
component: '', // 组件路径 id:undefined,
isLink: 0, // 是否外链 pid: 0, // 上级菜单
menuSort: 0, // 菜单排序 menuType: '0', // 菜单类型
path: '', // 路由路径 menuName:'', // 菜单名称
redirect: '', // 路由重定向，有子集 children 时 name: '', // 接口规则
icon: '', // 菜单图标 component: '', // 组件路径
roles: [], // 权限标识，取角色管理 isLink: 0, // 是否外链
isHide: '0', // 是否隐藏 menuSort: 0, // 菜单排序
isKeepAlive: 1, // 是否缓存 path: '', // 路由路径
isAffix: 0, // 是否固定 redirect: '', // 路由重定向，有子集 children 时
linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空` icon: '', // 菜单图标
isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空` roles: [], // 权限标识，取角色管理
}, isHide: '0', // 是否隐藏
// 表单校验 isKeepAlive: 1, // 是否缓存
rules: { isAffix: 0, // 是否固定
parentId: [ linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
{required: true, message: "父菜单不能为空", trigger: "blur"}, isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
], },
name:[ // 表单校验
{required: true, message: "接口规则不能为空", trigger: "blur"}, rules: {
], parentId: [
path:[ {required: true, message: "父菜单不能为空", trigger: "blur"},
{required: true, message: "路由地址不能为空", trigger: "blur"}, ],
], name:[
menuName: [ {required: true, message: "接口规则不能为空", trigger: "blur"},
{required: true, message: "菜单名称不能为空", trigger: "blur"}, ],
], path:[
menuType: [ {required: true, message: "路由地址不能为空", trigger: "blur"},
{required: true, message: "菜单类型不能为空", trigger: "blur"}, ],
], menuName: [
}, {required: true, message: "菜单名称不能为空", trigger: "blur"},
menuData: [], // 上级菜单数据 ],
}); menuType: [
{required: true, message: "菜单类型不能为空", trigger: "blur"},
// 打开弹窗 ],
const openDialog = (row: any) => { },
initForm(); menuData: [], // 上级菜单数据
nextTick(()=>{
//获取角色信息
getMenuParams().then((res:any)=>{
const roles = res.data.roles??[];
state.roles = proxy.handleTree(roles??[], "id","pid","children",true);
const menu = { id: 0, title: '主类目', children: [] };
menu.children = proxy.handleTree(res.data.menus, "id","pid");
state.menuData=new Array(menu) as any;
});
if(row) {
if (props.acType === 'add') {
state.ruleForm.pid = row.id
} else if (props.acType === 'edit') {
getMenuInfo(row.id).then(res => {
const data = res.data.rule;
state.ruleForm = {
id: data.id,
pid: data.pid, // 上级菜单
menuType: '' + data.menuType, // 菜单类型
menuName: data.title, // 菜单名称
name: data.name, // 接口规则
component: data.component, // 组件路径
isLink: data.isLink, // 是否外链
menuSort: data.weigh, // 菜单排序
path: data.path, // 路由路径
redirect: data.redirect, // 路由重定向，有子集 children 时
icon: data.icon, // 菜单图标
roles: res.data.roleIds, // 权限标识，取角色管理
isHide: '' + data.isHide, // 是否隐藏
isKeepAlive: data.isCached, // 是否缓存
isAffix: data.isAffix, // 是否固定
linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
}
})
}
}
state.isShowDialog = true;
state.loading = false;
})
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 是否内嵌下拉改变
const onSelectIframeChange = () => {
if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
else state.ruleForm.isLink = 0;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(ruleFormRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(props.acType==='add'){
//添加
addMenu(state.ruleForm).then(()=>{
ElMessage.success('菜单添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('menuList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateMenu(state.ruleForm).then(()=>{
ElMessage.success('菜单修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('menuList')
}).finally(()=>{
state.loading = false;
})
}
}
})
};
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
const initForm=()=>{
state.ruleForm = {
id:undefined,
pid: 0, // 上级菜单
menuType: '0', // 菜单类型
menuName:'', // 菜单名称
name: '', // 接口规则
component: '', // 组件路径
isLink: 0, // 是否外链
menuSort: 0, // 菜单排序
path: '', // 路由路径
redirect: '', // 路由重定向，有子集 children 时
icon: '', // 菜单图标
roles: [], // 权限标识，取角色管理
isHide: '0', // 是否隐藏
isKeepAlive: 1, // 是否缓存
isAffix: 0, // 是否固定
linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
}
};
return {
ruleFormRef,
openDialog,
closeDialog,
onSelectIframeChange,
onCancel,
onSubmit,
resetMenuSession,
...toRefs(state),
};
},
}); });
const {ruleForm, rules, menuData, loading, isShowDialog, roles} = toRefs(state);
// 打开弹窗
const openDialog = (row: any) => {
initForm();
nextTick(()=>{
//获取角色信息
getMenuParams().then((res:any)=>{
const roles = res.data.roles??[];
state.roles = proxy.handleTree(roles??[], "id","pid","children",true);
const menu = { id: 0, title: '主类目', children: [] };
menu.children = proxy.handleTree(res.data.menus, "id","pid");
state.menuData=new Array(menu) as any;
});
if(row) {
if (props.acType === 'add') {
state.ruleForm.pid = row.id
} else if (props.acType === 'edit') {
getMenuInfo(row.id).then(res => {
const data = res.data.rule;
state.ruleForm = {
id: data.id,
pid: data.pid, // 上级菜单
menuType: '' + data.menuType, // 菜单类型
menuName: data.title, // 菜单名称
name: data.name, // 接口规则
component: data.component, // 组件路径
isLink: data.isLink, // 是否外链
menuSort: data.weigh, // 菜单排序
path: data.path, // 路由路径
redirect: data.redirect, // 路由重定向，有子集 children 时
icon: data.icon, // 菜单图标
roles: res.data.roleIds, // 权限标识，取角色管理
isHide: '' + data.isHide, // 是否隐藏
isKeepAlive: data.isCached, // 是否缓存
isAffix: data.isAffix, // 是否固定
linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
}
})
}
}
state.isShowDialog = true;
state.loading = false;
})
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 是否内嵌下拉改变
const onSelectIframeChange = () => {
if (state.ruleForm.isIframe===1) state.ruleForm.isLink = 1;
else state.ruleForm.isLink = 0;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(ruleFormRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(props.acType==='add'){
//添加
addMenu(state.ruleForm).then(()=>{
ElMessage.success('菜单添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('menuList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateMenu(state.ruleForm).then(()=>{
ElMessage.success('菜单修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('menuList')
}).finally(()=>{
state.loading = false;
})
}
}
})
};
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
const initForm=()=>{
state.ruleForm = {
id:undefined,
pid: 0, // 上级菜单
menuType: '0', // 菜单类型
menuName:'', // 菜单名称
name: '', // 接口规则
component: '', // 组件路径
isLink: 0, // 是否外链
menuSort: 0, // 菜单排序
path: '', // 路由路径
redirect: '', // 路由重定向，有子集 children 时
icon: '', // 菜单图标
roles: [], // 权限标识，取角色管理
isHide: '0', // 是否隐藏
isKeepAlive: 1, // 是否缓存
isAffix: 0, // 是否固定
linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
}
};
defineExpose({ openDialog, resetMenuSession})
</script> </script>

122
src/views/system/menu/index.vue
View File

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

202
src/views/system/monitor/loginLog/index.vue
View File

@ -9,7 +9,6 @@
placeholder="请输入登录地址" placeholder="请输入登录地址"
clearable clearable
style="width: 180px;" style="width: 180px;"
size="default"
@keyup.enter.native="dataList" @keyup.enter.native="dataList"
/> />
</el-form-item> </el-form-item>
@ -20,7 +19,6 @@
placeholder="请输入登录地点" placeholder="请输入登录地点"
clearable clearable
style="width: 180px;" style="width: 180px;"
size="default"
@keyup.enter.native="dataList" @keyup.enter.native="dataList"
/> />
</el-form-item> </el-form-item>
@ -31,7 +29,6 @@
placeholder="请输入用户名称" placeholder="请输入用户名称"
clearable clearable
style="width: 180px;" style="width: 180px;"
size="default"
@keyup.enter.native="dataList" @keyup.enter.native="dataList"
/> />
</el-form-item> </el-form-item>
@ -41,7 +38,6 @@
v-model="tableData.param.status" v-model="tableData.param.status"
placeholder="登录状态" placeholder="登录状态"
clearable clearable
size="default"
style="width: 180px" style="width: 180px"
> >
<el-option <el-option
@ -56,7 +52,6 @@
<el-form-item label="登录时间" prop="dateRange"> <el-form-item label="登录时间" prop="dateRange">
<el-date-picker <el-date-picker
v-model="tableData.param.dateRange" v-model="tableData.param.dateRange"
size="default"
style="width: 240px" style="width: 240px"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
type="daterange" type="daterange"
@ -117,7 +112,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue'; import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue';
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus'; import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog'; import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog';
@ -152,111 +147,96 @@ 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(); ids:[],
const {admin_login_status} = proxy.useDict('admin_login_status') tableData: {
const state = reactive<TableDataState>({ data: [],
ids:[], total: 0,
tableData: { loading: false,
data: [], param: {
total: 0, pageNum: 1,
loading: false, pageSize: 10,
param: { dateRange: [],
pageNum: 1, status: '',
pageSize: 10, ipaddr:'',
dateRange: [], loginLocation:'',
status: '', userName:''
ipaddr:'', },
loginLocation:'',
userName:''
},
},
});
// 初始化表格数据
const initTableData = () => {
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) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
ids = [row.infoId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteLog(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 清空日志
const onRowClear = () => {
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
clearLog().then(()=>{
ElMessage.success('清除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.infoId)
};
// 登录状态字典翻译
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),
};
}, },
}); });
const { tableData } = toRefs(state);
// 初始化表格数据
const initTableData = () => {
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|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除：“${row.loginName}”，是否继续?`
ids = [row.infoId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteLog(ids).then(()=>{
ElMessage.success('删除成功');
dataList();
})
})
.catch(() => {});
};
// 清空日志
const onRowClear = () => {
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
clearLog().then(()=>{
ElMessage.success('清除成功');
dataList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dataList()
};
// 多选框选中数据
const handleSelectionChange = (selection:TableDataRow[])=> {
state.ids = selection.map(item => item.infoId)
};
// 登录状态字典翻译
const statusFormat = (row:TableDataRow) => {
return proxy.selectDictLabel(unref(admin_login_status), row.status);
};
</script> </script>

209
src/views/system/monitor/operLog/component/detail.vue
View File

@ -48,7 +48,7 @@
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue'; import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
import { import {
getSysOperLog getSysOperLog
@ -57,120 +57,107 @@ import {
SysOperLogInfoData, SysOperLogInfoData,
SysOperLogEditState, SysOperLogEditState,
} from "/@/views/system/monitor/operLog/component/model" } from "/@/views/system/monitor/operLog/component/model"
export default defineComponent({ defineOptions({ name: "apiV1SystemSysOperLogDetail"})
name:"apiV1SystemSysOperLogDetail", const props = defineProps({
components:{ requestMethodOptions:{
type:Array,
default:()=>[]
}, },
props:{ })
requestMethodOptions:{ const emit = defineEmits(['getSysDeptItemsDeptName'])
type:Array, const {proxy} = <any>getCurrentInstance()
default:()=>[] const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SysOperLogEditState>({
loading:false,
isShowDialog: false,
formData: {
operId: undefined,
title: undefined,
businessType: undefined,
method: undefined,
requestMethod: undefined,
operatorType: undefined,
operName: undefined,
deptName: undefined,
operUrl: undefined,
operIp: undefined,
operLocation: undefined,
operParam: undefined,
jsonResult: undefined,
status: false ,
errorMsg: undefined,
operTime: undefined,
linkedSysOperLogSysDept: {
deptId:undefined, // 部门id
deptName:undefined, // 部门名称
}, },
}, },
setup(props,{emit}) { // 表单校验
const {proxy} = <any>getCurrentInstance() rules: {
const formRef = ref<HTMLElement | null>(null); operId : [
const menuRef = ref(); { required: true, message: "日志编号不能为空", trigger: "blur" }
const state = reactive<SysOperLogEditState>({ ],
loading:false, operName : [
isShowDialog: false, { required: true, message: "操作人员不能为空", trigger: "blur" }
formData: { ],
operId: undefined, deptName : [
title: undefined, { required: true, message: "部门名称不能为空", trigger: "blur" }
businessType: undefined, ],
method: undefined, status : [
requestMethod: undefined, { required: true, message: "操作状态（0正常 1异常）不能为空", trigger: "blur" }
operatorType: undefined, ],
operName: undefined,
deptName: undefined,
operUrl: undefined,
operIp: undefined,
operLocation: undefined,
operParam: undefined,
jsonResult: undefined,
status: false ,
errorMsg: undefined,
operTime: undefined,
linkedSysOperLogSysDept: {
deptId:undefined, // 部门id
deptName:undefined, // 部门名称
},
},
// 表单校验
rules: {
operId : [
{ required: true, message: "日志编号不能为空", trigger: "blur" }
],
operName : [
{ required: true, message: "操作人员不能为空", trigger: "blur" }
],
deptName : [
{ required: true, message: "部门名称不能为空", trigger: "blur" }
],
status : [
{ required: true, message: "操作状态（0正常 1异常）不能为空", trigger: "blur" }
],
}
});
// 打开弹窗
const openDialog = (row?: SysOperLogInfoData) => {
resetForm();
if(row) {
getSysOperLog(row.operId!).then((res:any)=>{
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
operId: undefined,
title: undefined,
businessType: undefined,
method: undefined,
requestMethod: undefined,
operatorType: undefined,
operName: undefined,
deptName: undefined,
operUrl: undefined,
operIp: undefined,
operLocation: undefined,
operParam: undefined,
jsonResult: undefined,
status: false ,
errorMsg: undefined,
operTime: undefined,
linkedSysOperLogSysDept: {
deptId:undefined, // 部门id
deptName:undefined, // 部门名称
},
}
};
//关联sys_dept表选项
const getSysDeptItemsDeptName = () => {
emit("getSysDeptItemsDeptName")
}
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
getSysDeptItemsDeptName,
...toRefs(state),
};
} }
}) });
const {isShowDialog,formData} = toRefs(state);
// 打开弹窗
const openDialog = (row?: SysOperLogInfoData) => {
resetForm();
if(row) {
getSysOperLog(row.operId!).then((res:any)=>{
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
defineExpose({ openDialog})
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
operId: undefined,
title: undefined,
businessType: undefined,
method: undefined,
requestMethod: undefined,
operatorType: undefined,
operName: undefined,
deptName: undefined,
operUrl: undefined,
operIp: undefined,
operLocation: undefined,
operParam: undefined,
jsonResult: undefined,
status: false ,
errorMsg: undefined,
operTime: undefined,
linkedSysOperLogSysDept: {
deptId:undefined, // 部门id
deptName:undefined, // 部门名称
},
}
};
//关联sys_dept表选项
const getSysDeptItemsDeptName = () => {
emit("getSysDeptItemsDeptName")
}
</script> </script>
<style scoped> <style scoped>
.system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){ .system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){

306
src/views/system/monitor/operLog/index.vue
View File

@ -43,7 +43,6 @@
v-model="tableData.param.operName" v-model="tableData.param.operName"
placeholder="请输入操作人员" placeholder="请输入操作人员"
clearable clearable
size="small"
@keyup.enter.native="sysOperLogList" @keyup.enter.native="sysOperLogList"
/> />
</el-form-item> </el-form-item>
@ -165,7 +164,7 @@
></apiV1SystemSysOperLogDetail> ></apiV1SystemSysOperLogDetail>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {ItemOptions} from "/@/api/items"; import {ItemOptions} from "/@/api/items";
import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
@ -180,175 +179,144 @@ import {
SysOperLogTableDataState, SysOperLogTableDataState,
} from "/@/views/system/monitor/operLog/component/model" } from "/@/views/system/monitor/operLog/component/model"
import apiV1SystemSysOperLogDetail from "/@/views/system/monitor/operLog/component/detail.vue" 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(()=>{
// 非单个禁用 if(showAll.value === false) {
const single = ref(true) //对文字进行处理
// 非多个禁用 return "展开搜索";
const multiple =ref(true) } else {
const word = computed(()=>{ return "收起搜索";
if(showAll.value === false) {
//对文字进行处理
return "展开搜索";
} else {
return "收起搜索";
}
})
// 字典选项数据
const {
sys_oper_log_type,
} = proxy.useDict(
'sys_oper_log_type',
)
// deptNameOptions关联表数据
const deptNameOptions = ref<Array<ItemOptions>>([])
const state = reactive<SysOperLogTableDataState>({
operIds:[],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
title: undefined,
requestMethod: undefined,
operName: undefined,
status: undefined,
dateRange: []
},
},
});
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysOperLogList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysOperLogList()
};
// 获取列表数据
const sysOperLogList = ()=>{
loading.value = true
listSysOperLog(state.tableData.param).then((res:any)=>{
let list = res.data.list??[];
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const toggleSearch = () => {
showAll.value = !showAll.value;
}
// 请求方式字典翻译
const requestMethodFormat = (row:SysOperLogTableColumns) => {
return proxy.selectDictLabel(sys_oper_log_type.value, row.requestMethod);
}
// 多选框选中数据
const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
state.operIds = selection.map(item => item.operId)
single.value = selection.length!=1
multiple.value = !selection.length
}
const handleAdd = ()=>{
editRef.value.openDialog()
}
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) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除数据，是否继续?`
ids = [row.operId]
}else{
ids = state.operIds
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysOperLog(ids).then(()=>{
ElMessage.success('删除成功');
sysOperLogList();
})
})
.catch(() => {});
}
// 清空日志
const onRowClear = () => {
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
clearOperLog().then(()=>{
ElMessage.success('清除成功');
sysOperLogList();
})
})
.catch(() => {});
};
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),
}
} }
}) })
// 字典选项数据
const {
sys_oper_log_type,
} = proxy.useDict(
'sys_oper_log_type',
)
// deptNameOptions关联表数据
const deptNameOptions = ref<Array<ItemOptions>>([])
const state = reactive<SysOperLogTableDataState>({
operIds:[],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
title: undefined,
requestMethod: undefined,
operName: undefined,
status: undefined,
dateRange: []
},
},
});
const { tableData } = toRefs(state);
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysOperLogList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysOperLogList()
};
// 获取列表数据
const sysOperLogList = ()=>{
loading.value = true
listSysOperLog(state.tableData.param).then((res:any)=>{
let list = res.data.list??[];
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const toggleSearch = () => {
showAll.value = !showAll.value;
}
// 请求方式字典翻译
const requestMethodFormat = (row:SysOperLogTableColumns) => {
return proxy.selectDictLabel(sys_oper_log_type.value, row.requestMethod);
}
// 多选框选中数据
const handleSelectionChange = (selection:Array<SysOperLogInfoData>) => {
state.operIds = selection.map(item => item.operId)
single.value = selection.length!=1
multiple.value = !selection.length
}
const handleAdd = ()=>{
editRef.value.openDialog()
}
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|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除数据，是否继续?`
ids = [row.operId]
}else{
ids = state.operIds
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysOperLog(ids).then(()=>{
ElMessage.success('删除成功');
sysOperLogList();
})
})
.catch(() => {});
}
// 清空日志
const onRowClear = () => {
ElMessageBox.confirm('你确定要删除所选数据？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
clearOperLog().then(()=>{
ElMessage.success('清除成功');
sysOperLogList();
})
})
.catch(() => {});
};
const handleView = (row:SysOperLogTableColumns)=>{
detailRef.value.openDialog(toRaw(row));
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {

12
src/views/system/monitor/server/index.vue
View File

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

168
src/views/system/monitor/userOnline/index.vue
View File

@ -4,10 +4,10 @@
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<el-form :model="tableData.param" ref="queryRef" :inline="true"> <el-form :model="tableData.param" ref="queryRef" :inline="true">
<el-form-item label="登录IP" prop="ipaddr"> <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>
<el-form-item label="用户名称" prop="userName"> <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-form-item> <el-form-item>
<el-button size="default" type="primary" class="ml10" @click="getList"> <el-button size="default" type="primary" class="ml10" @click="getList">
@ -57,7 +57,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue'; import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline"; import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";
@ -86,94 +86,80 @@ interface TableDataState {
}; };
}; };
} }
defineOptions({ name: "apiV1SystemOnlineList"})
export default defineComponent({ const queryRef = ref();
name: 'apiV1SystemOnlineList', const state = reactive<TableDataState>({
setup() { ids:[],
const queryRef = ref(); tableData: {
const state = reactive<TableDataState>({ data: [],
ids:[], total: 0,
tableData: { loading: false,
data: [], param: {
total: 0, ipaddr:'',
loading: false, userName:'',
param: { pageNum: 1,
ipaddr:'', pageSize: 10,
userName:'', },
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
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) => {
if (!formEl) return
formEl.resetFields()
getList()
};
// 删除岗位
const onRowDel = (row: TableData) => {
let msg = '你确定要强制退出用户登录？';
let ids:number[] = [] ;
if(row){
msg = `将强制用户下线，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要强制退出登录的用户。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
forceLogout(ids).then(()=>{
ElMessage.success('退出成功');
getList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
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 { tableData} =toRefs(state)
// 初始化表格数据
const initTableData = () => {
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) => {
if (!formEl) return
formEl.resetFields()
getList()
};
// 删除岗位
const onRowDel = (row: TableData|null) => {
let msg = '你确定要强制退出用户登录？';
let ids:number[] = [] ;
if(row){
msg = `将强制用户下线，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要强制退出登录的用户。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
forceLogout(ids).then(()=>{
ElMessage.success('退出成功');
getList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
const handleSelectionChange = (selection:Array<TableData>)=> {
state.ids = selection.map(item => item.id)
};
</script> </script>

210
src/views/system/personal/index.vue
View File

@ -203,7 +203,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue'; import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
import { formatAxis } from '/@/utils/formatTime'; import { formatAxis } from '/@/utils/formatTime';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@ -224,120 +224,106 @@ interface PersonalState {
newsInfoList: any; newsInfoList: any;
recommendList: 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(); token:getToken(),
const { userInfos } = storeToRefs(stores); })
const dataParam = reactive({ const state = reactive<PersonalState>({
token:getToken(), newsInfoList,
}) recommendList,
const state = reactive<PersonalState>({ imageUrl:'',
newsInfoList, deptName:'',
recommendList, roles:[],
imageUrl:'', personalForm: {
deptName:'', nickname: '',
roles:[], userEmail: '',
personalForm: { describe: '',
nickname: '', mobile: '',
userEmail: '', sex: '',
describe: '', remark:'',
mobile: '', avatar:'',
sex: '', lastLoginIp:'',
remark:'', lastLoginTime:''
avatar:'',
lastLoginIp:'',
lastLoginTime:''
},
});
// const handleUpload =
const handleUpload = () => {
// console.log(state.personalForm)
editPersonal(state.personalForm).then((res:any)=>{
const userInfo = res.data.userInfo
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
// 存储 token 到浏览器缓存
Session.set('token', res.data.token);
// 存储用户信息到浏览器缓存
Session.set('userInfo', userInfo);
useUserInfo().setUserInfos();
ElMessage.success('已更新');
});
};
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response,
uploadFile
) => {
if(response.code == 0){
state.imageUrl = response.data.path;
state.personalForm.avatar = response.data.path;
handleUpload();
}
};
/** 重置密码按钮操作 */
const handleEditPass = ()=> {
ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetPwdPersonal({password:value}).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 初始化用户数据
const initUserInfo = () => {
getPersonalInfo().then((res:any)=>{
const user = res.data.user;
state.imageUrl = user.avatar;
state.personalForm = {
nickname:user.userNickname,
userEmail:user.userEmail,
describe: user.describe,
mobile: user.mobile,
sex: String(user.sex),
remark:user.remark,
avatar:user.avatar,
lastLoginIp:user.lastLoginIp,
lastLoginTime:user.lastLoginTime
}
state.deptName = res.data.deptName;
state.roles = res.data.roles;
})
};
// 页面加载时
onMounted(() => {
initUserInfo();
});
return {
proxy,
baseURL,
userInfos,
currentTime,
handleUpload,
handleEditPass,
handleAvatarSuccess,
dataParam,
...toRefs(state),
};
}, },
}); });
const { deptName,roles,imageUrl,personalForm} = toRefs(state);
const handleUpload = () => {
// console.log(state.personalForm)
editPersonal(state.personalForm).then((res:any)=>{
const userInfo = res.data.userInfo
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar)
// 存储 token 到浏览器缓存
Session.set('token', res.data.token);
// 存储用户信息到浏览器缓存
Session.set('userInfo', userInfo);
useUserInfo().setUserInfos();
ElMessage.success('已更新');
});
};
// 当前时间提示语
const currentTime = computed(() => {
return formatAxis(new Date());
});
const handleAvatarSuccess: UploadProps['onSuccess'] = (
response,
uploadFile
) => {
if(response.code == 0){
state.imageUrl = response.data.path;
state.personalForm.avatar = response.data.path;
handleUpload();
}
};
/** 重置密码按钮操作 */
const handleEditPass = ()=> {
ElMessageBox.prompt('请输入"' + state.personalForm.nickname + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetPwdPersonal({password:value}).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 初始化用户数据
const initUserInfo = () => {
getPersonalInfo().then((res:any)=>{
const user = res.data.user;
state.imageUrl = user.avatar;
state.personalForm = {
nickname:user.userNickname,
userEmail:user.userEmail,
describe: user.describe,
mobile: user.mobile,
sex: String(user.sex),
remark:user.remark,
avatar:user.avatar,
lastLoginIp:user.lastLoginIp,
lastLoginTime:user.lastLoginTime
}
state.deptName = res.data.deptName;
state.roles = res.data.roles;
})
};
// 页面加载时
onMounted(() => {
initUserInfo();
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

202
src/views/system/post/component/editPost.vue
View File

@ -31,7 +31,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref } from 'vue'; import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
import {addPost, editPost} from "/@/api/system/post"; import {addPost, editPost} from "/@/api/system/post";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
@ -57,113 +57,101 @@ interface PostState {
}; };
rules: object; 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(); loading:false,
const state = reactive<PostState>({ isShowDialog: false,
loading:false, formData: {
isShowDialog: false, postId:0,
formData: { postCode:'',
postId:0, postName:'',
postCode:'', postSort:0,
postName:'', status:1,
postSort:0, remark:'',
status:1, },
remark:'', // 表单校验
}, rules: {
// 表单校验 postName: [
rules: { { required: true, message: "岗位名称不能为空", trigger: "blur" }
postName: [ ],
{ required: true, message: "岗位名称不能为空", trigger: "blur" } postCode: [
], { required: true, message: "岗位编码不能为空", trigger: "blur" }
postCode: [ ],
{ required: true, message: "岗位编码不能为空", trigger: "blur" } postSort: [
], { required: true, message: "岗位顺序不能为空", trigger: "blur" }
postSort: [ ]
{ required: true, message: "岗位顺序不能为空", trigger: "blur" } },
] menuExpand:false,
}, menuNodeAll:false,
menuExpand:false, menuCheckStrictly:false,
menuNodeAll:false, menuProps: {
menuCheckStrictly:false, children: 'children',
menuProps: { label: 'title',
children: 'children', },
label: 'title',
},
});
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
if(row) {
state.formData = row;
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(state.formData.postId===0){
//添加
addPost(state.formData).then(()=>{
ElMessage.success('岗位添加成功');
closeDialog(); // 关闭弹窗
emit('getPostList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
editPost(state.formData).then(()=>{
ElMessage.success('岗位修改成功');
closeDialog(); // 关闭弹窗
emit('getPostList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.menuCheckStrictly=false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
postId:0,
postCode:'',
postName:'',
postSort:0,
status:1,
remark:'',
}
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
...toRefs(state),
};
},
}); });
const {isShowDialog,formData,loading,rules} = toRefs(state);
// 打开弹窗
const openDialog = (row?: DialogRow) => {
resetForm();
if(row) {
state.formData = row;
}
state.isShowDialog = true;
};
defineExpose({ openDialog})
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(state.formData.postId===0){
//添加
addPost(state.formData).then(()=>{
ElMessage.success('岗位添加成功');
closeDialog(); // 关闭弹窗
emit('getPostList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
editPost(state.formData).then(()=>{
ElMessage.success('岗位修改成功');
closeDialog(); // 关闭弹窗
emit('getPostList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.menuCheckStrictly=false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
postId:0,
postCode:'',
postName:'',
postSort:0,
status:1,
remark:'',
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

177
src/views/system/post/index.vue
View File

@ -70,7 +70,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import EditPost from '/@/views/system/post/component/editPost.vue'; import EditPost from '/@/views/system/post/component/editPost.vue';
@ -100,101 +100,84 @@ interface TableDataState {
}; };
}; };
} }
defineOptions({ name: "apiV1SystemPostList"})
export default defineComponent({ const addPostRef = ref();
name: 'apiV1SystemPostList', const editPostRef = ref();
components: {EditPost}, const state = reactive<TableDataState>({
setup() { ids:[],
const addPostRef = ref(); tableData: {
const editPostRef = ref(); data: [],
const state = reactive<TableDataState>({ total: 0,
ids:[], loading: false,
tableData: { param: {
data: [], postName:'',
total: 0, status:'',
loading: false, postCode:'',
param: { pageNum: 1,
postName:'', pageSize: 10,
status:'', },
postCode:'', },
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
postList()
};
const postList = ()=>{
getPostList(state.tableData.param).then(res=>{
state.tableData.data = res.data.postList??[];
state.tableData.total = res.data.total;
})
};
// 打开新增岗位弹窗
const onOpenAddPost = () => {
editPostRef.value.openDialog();
};
// 打开修改岗位弹窗
const onOpenEditPost = (row: Object) => {
editPostRef.value.openDialog(toRaw(row));
};
// 删除岗位
const onRowDel = (row: any) => {
let msg = '你确定要删除所选岗位？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`
ids = [row.postId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deletePost(ids).then(()=>{
ElMessage.success('删除成功');
postList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
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 { tableData } = toRefs(state);
// 初始化表格数据
const initTableData = () => {
postList()
};
const postList = ()=>{
getPostList(state.tableData.param).then(res=>{
state.tableData.data = res.data.postList??[];
state.tableData.total = res.data.total;
})
};
// 打开新增岗位弹窗
const onOpenAddPost = () => {
editPostRef.value.openDialog();
};
// 打开修改岗位弹窗
const onOpenEditPost = (row: Object) => {
editPostRef.value.openDialog(toRaw(row));
};
// 删除岗位
const onRowDel = (row: any) => {
let msg = '你确定要删除所选岗位？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`
ids = [row.postId]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deletePost(ids).then(()=>{
ElMessage.success('删除成功');
postList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
const handleSelectionChange = (selection:Array<TableData>)=> {
state.ids = selection.map(item => item.postId)
};
</script> </script>

506
src/views/system/role/component/dataScope.vue
View File

@ -33,7 +33,7 @@
<template #header> <template #header>
<el-radio-group v-model="optionsActionValue" @change="setOptionsActionValueHandle"> <el-radio-group v-model="optionsActionValue" @change="setOptionsActionValueHandle">
<template v-for="item in dataScopeOptions" :key="item.value"> <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> </template>
</el-radio-group> </el-radio-group>
</template> </template>
@ -42,7 +42,7 @@
<el-radio-group v-model="menuAuthData[scope.row.id]"> <el-radio-group v-model="menuAuthData[scope.row.id]">
<template v-for="item in dataScopeOptions" :key="item.value"> <template v-for="item in dataScopeOptions" :key="item.value">
<el-radio :value="item.value" @change="setOptionsItemHandle(item.value,scope.row.id)"> <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> <span v-else>{{item.label}}</span>
</el-radio> </el-radio>
</template> </template>
@ -91,281 +91,239 @@
</div> </div>
</template> </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 {dataScope, getRole, roleDeptTreeSelect, roleMenuTreeSelect} from "/@/api/system/role";
import {ElMessage} from "element-plus/es"; 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) children: "children",
const deptOptions = ref<Array<any>>([]) label: "deptName"
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([
{
value: 1,
label: "全部"
},
{
value: 3,
label: "本部门"
},
{
value: 4,
label: "本部门及以下"
},
{
value: 5,
label: "仅本人"
},
{
value: 2,
label: "自定义"
}
])
const menuAuthData = ref([])
const deptAuthData = ref([])
const form = reactive({
roleId:undefined,
roleName:'',
authData:[{
menuId:'0',
scope:'0',
deptIds:[]
}]
})
const menuTableData = ref([])
const menuTableList = ref([])
// 树权限（展开/折叠）
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) => {
deptRef.value.setCheckedNodes(value ? deptOptions.value: []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value:any) => {
deptCheckStrictly.value = value ? true : false;
}
/** 提交按钮（数据权限） */
const submitDataScope = () => {
form.authData = []
//获取选中的菜单
let rows = tableRef.value.getSelectionRows()
rows.map((item:any)=>{
let index = item.id
form.authData.push({
menuId:index,
scope:menuAuthData.value[index],
deptIds:deptAuthData.value[index]??[]
})
})
dataScope(form).then((response:any) => {
if (response.code === 0) {
ElMessage.success("设置成功");
openDataScope.value = false;
emit('getRoleList')
} else {
ElMessage.error("设置失败")
}
});
}
const cancelDataScope = () => {
closeDialog();
};
const submitDept = ()=>{
deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
cancelDept()
}
const submitSonMenuDept = ()=>{
const checkedDeptId = getDeptAllCheckedKeys() as never;
deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
//查询所有子级
const children = proxy.findChildrenByPid(setDeptId.value,menuTableList.value)
children.map((item:any)=>{
deptAuthData.value[item.id] = getDeptAllCheckedKeys() as never;
})
cancelDept()
}
const cancelDept = () => {
deptCheckStrictly.value= false
openSelDept.value = false
};
// 打开弹窗
const openDialog = (row: any) => {
openDataScope.value = true;
roleDeptTreeSelect().then(response => {
deptOptions.value = response.data.depts||[];
});
resetForm();
if(row) {
getRole(row.id).then((res:any)=>{
if(res.data.role){
form.roleName = res.data.role.name;
form.roleId = res.data.role.id;
}
})
getMenuTreeselect(row.id)
}
};
/** 根据角色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) =>{
roleMenuTreeSelect(roleId).then(res=>{
menuTableData.value = proxy.handleTree(res.data.rules??[], "id","pid");
menuTableList.value = proxy.flattenTree(menuTableData.value)
const menuData:any = []
const deptData:any = []
const rows:never[] = []
if(res.data.dataScope){
res.data.dataScope.map((item:any)=>{
menuData[item.menuId] = item.dataScope
deptData[item.menuId] = item.deptIds
})
menuAuthData.value = menuData
deptAuthData.value = deptData
//设置菜单行选中
menuTableList.value.map((item:any)=>{
if(menuAuthData.value[item.id]){
rows.push(item as never)
}
})
nextTick(()=>{
//行选择
rows.map((item:any)=>{
tableRef.value.toggleRowSelection(item,true)
})
})
}
})
}
// 关闭弹窗
const closeDialog = () => {
openDataScope.value = false;
};
// 所有部门节点数据
const getDeptAllCheckedKeys = () => {
// 目前被选中的部门节点
let checkedKeys = deptRef.value.getCheckedKeys();
return checkedKeys;
}
const resetForm = ()=>{
form.roleId=undefined
form.roleName=''
form.authData = []
deptCheckStrictly.value= false
menuAuthData.value = []
deptAuthData.value = []
};
const handleSelectionChange = (val: any[]) => {
}
const setOptionsActionValueHandle = (value:any)=>{
//遍历选择所有菜单
menuTableList.value.map((item:any)=>{
menuAuthData.value[item.id] = value as never
})
}
const setOptionsItemHandle = (value:any,id:any)=>{
const children = proxy.findChildrenByPid(id,menuTableList.value)
//设置行选中
menuTableList.value.some((item:any)=>{
if(item.id == id){
children.unshift(item)
return true
}
return false
})
children.map((item:any)=>{
tableRef.value.toggleRowSelection(item,true)
})
//设置子级
children.map((item:any)=>{
menuAuthData.value[item.id] = value as never
})
}
const openSelDeptHandler = (id:any)=>{
openSelDept.value = true
setDeptId.value = id
getRoleDeptTreeselect(id)
}
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
}
}
}) })
// 数据范围选项
const dataScopeOptions = ref([
{
value: 1,
label: "全部"
},
{
value: 3,
label: "本部门"
},
{
value: 4,
label: "本部门及以下"
},
{
value: 5,
label: "仅本人"
},
{
value: 2,
label: "自定义"
}
])
const menuAuthData = ref([])
const deptAuthData = ref([])
const form = reactive({
roleId:undefined,
roleName:'',
authData:[{
menuId:'0',
scope:'0',
deptIds:[]
}]
})
const menuTableData = ref([])
const menuTableList = ref([])
// 树权限（展开/折叠）
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) => {
deptRef.value.setCheckedNodes(value ? deptOptions.value: []);
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value:any) => {
deptCheckStrictly.value = value ? true : false;
}
/** 提交按钮（数据权限） */
const submitDataScope = () => {
form.authData = []
//获取选中的菜单
let rows = tableRef.value.getSelectionRows()
rows.map((item:any)=>{
let index = item.id
form.authData.push({
menuId:index,
scope:menuAuthData.value[index],
deptIds:deptAuthData.value[index]??[]
})
})
dataScope(form).then((response:any) => {
if (response.code === 0) {
ElMessage.success("设置成功");
openDataScope.value = false;
emit('getRoleList')
} else {
ElMessage.error("设置失败")
}
});
}
const cancelDataScope = () => {
closeDialog();
};
const submitDept = ()=>{
deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
cancelDept()
}
const submitSonMenuDept = ()=>{
const checkedDeptId = getDeptAllCheckedKeys() as never;
deptAuthData.value[setDeptId.value] = getDeptAllCheckedKeys() as never;
//查询所有子级
const children = proxy.findChildrenByPid(setDeptId.value,menuTableList.value)
children.map((item:any)=>{
deptAuthData.value[item.id] = getDeptAllCheckedKeys() as never;
})
cancelDept()
}
const cancelDept = () => {
deptCheckStrictly.value= false
openSelDept.value = false
};
// 打开弹窗
const openDialog = (row: any) => {
openDataScope.value = true;
roleDeptTreeSelect().then(response => {
deptOptions.value = response.data.depts||[];
});
resetForm();
if(row) {
getRole(row.id).then((res:any)=>{
if(res.data.role){
form.roleName = res.data.role.name;
form.roleId = res.data.role.id;
}
})
getMenuTreeselect(row.id)
}
};
defineExpose({ openDialog})
/** 根据角色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) =>{
roleMenuTreeSelect(roleId).then(res=>{
menuTableData.value = proxy.handleTree(res.data.rules??[], "id","pid");
menuTableList.value = proxy.flattenTree(menuTableData.value)
const menuData:any = []
const deptData:any = []
const rows:never[] = []
if(res.data.dataScope){
res.data.dataScope.map((item:any)=>{
menuData[item.menuId] = item.dataScope
deptData[item.menuId] = item.deptIds
})
menuAuthData.value = menuData
deptAuthData.value = deptData
//设置菜单行选中
menuTableList.value.map((item:any)=>{
if(menuAuthData.value[item.id]){
rows.push(item as never)
}
})
nextTick(()=>{
//行选择
rows.map((item:any)=>{
tableRef.value.toggleRowSelection(item,true)
})
})
}
})
}
// 关闭弹窗
const closeDialog = () => {
openDataScope.value = false;
};
// 所有部门节点数据
const getDeptAllCheckedKeys = () => {
// 目前被选中的部门节点
let checkedKeys = deptRef.value.getCheckedKeys();
return checkedKeys;
}
const resetForm = ()=>{
form.roleId=undefined
form.roleName=''
form.authData = []
deptCheckStrictly.value= false
menuAuthData.value = []
deptAuthData.value = []
};
const handleSelectionChange = (val: any[]) => {
}
const setOptionsActionValueHandle = (value:any)=>{
//遍历选择所有菜单
menuTableList.value.map((item:any)=>{
menuAuthData.value[item.id] = value as never
})
}
const setOptionsItemHandle = (value:any,id:any)=>{
const children = proxy.findChildrenByPid(id,menuTableList.value)
//设置行选中
menuTableList.value.some((item:any)=>{
if(item.id == id){
children.unshift(item)
return true
}
return false
})
children.map((item:any)=>{
tableRef.value.toggleRowSelection(item,true)
})
//设置子级
children.map((item:any)=>{
menuAuthData.value[item.id] = value as never
})
}
const openSelDeptHandler = (id:any)=>{
openSelDept.value = true
setDeptId.value = id
getRoleDeptTreeselect(id)
}
const getDeptLen = (id:any)=>{
if(deptAuthData.value[id]){
return (<Array<any>>deptAuthData.value[id]).length
}
return 0
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

359
src/views/system/role/component/editRole.vue
View File

@ -43,22 +43,22 @@
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" > <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
<el-form-item label="有效时间"> <el-form-item label="有效时间">
<el-radio-group v-model="formData.effectiveType"> <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-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="formData.effectiveType===2"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="formData.effectiveType===2">
<el-form-item label="每周"> <el-form-item label="每周">
<el-checkbox-group v-model="formData.weekDay"> <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-checkbox-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -120,7 +120,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue'; import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role"; import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
@ -162,190 +162,175 @@ interface RoleState {
}; };
rules: object; rules: object;
} }
defineOptions({ name: "systemEditRole"})
export default defineComponent({ const props = defineProps({
name: 'systemEditRole', roleData:{
props:{ type:Array,
roleData:{ default:()=>[]
type:Array, }
default:()=>[] })
} const emit = defineEmits(['getRoleList']);
const {proxy} = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<RoleState>({
loading:false,
isShowDialog: false,
formData: {
id:0,
pid:0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds:[],
effectiveType:0,
weekDay:[1,2,3,4,5],
dayRange:[
'2024-02-01 08:00:00',
'2024-02-01 19:00:00',
],
dateRange:[],
}, },
setup(props,{emit}) { // 表单校验
const {proxy} = getCurrentInstance() as any; rules: {
const formRef = ref<HTMLElement | null>(null); name:[
const menuRef = ref(); {required: true, message: "角色名称不能为空", trigger: "blur"},
const state = reactive<RoleState>({ ]
loading:false, },
isShowDialog: false, menuData: [],
formData: { menuExpand:false,
id:0, menuNodeAll:false,
pid:0, menuCheckStrictly:false,
name: '', menuProps: {
status: 1, children: 'children',
listOrder: 0, label: 'title',
remark: '', disabled:'disabled'
menuIds:[], },
effectiveType:0, });
weekDay:[1,2,3,4,5], // 打开弹窗
dayRange:[ const openDialog = (row?: DialogRow) => {
'2024-02-01 08:00:00', resetForm();
'2024-02-01 19:00:00', getMenuData();
], if(row) {
dateRange:[], getRole(row.id).then((res:any)=>{
}, if(res.data.role){
// 表单校验 state.formData = res.data.role;
rules: { if(!state.formData.weekDay){
name:[ state.formData.weekDay = [1,2,3,4,5]
{required: true, message: "角色名称不能为空", trigger: "blur"}, }
] state.formData.menuIds = res.data.menuIds??[]
}, }
menuData: [], })
menuExpand:false, }
menuNodeAll:false, state.isShowDialog = true;
menuCheckStrictly:false, };
menuProps: { defineExpose({ openDialog})
children: 'children', // 关闭弹窗
label: 'title', const closeDialog = () => {
disabled:'disabled' state.isShowDialog = false;
}, };
}); // 取消
// 打开弹窗 const onCancel = () => {
const openDialog = (row?: DialogRow) => { closeDialog();
resetForm(); };
getMenuData(); // 新增
if(row) { const onSubmit = () => {
getRole(row.id).then((res:any)=>{ const formWrap = unref(formRef) as any;
if(res.data.role){ if (!formWrap) return;
state.formData = res.data.role; formWrap.validate((valid: boolean) => {
if(!state.formData.weekDay){ if (valid) {
state.formData.weekDay = [1,2,3,4,5] state.loading = true;
} state.formData.menuIds = getMenuAllCheckedKeys();
state.formData.menuIds = res.data.menuIds??[] if(state.formData.id===0){
} //添加
addRole(state.formData).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
editRole(state.formData).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
}) })
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
state.formData.menuIds = getMenuAllCheckedKeys();
if(state.formData.id===0){
//添加
addRole(state.formData).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
editRole(state.formData).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
resetMenuSession()
emit('getRoleList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
// 获取菜单结构数据
const getMenuData = () => {
getRoleParams().then((res:any)=>{
const menus = res.data.menu??[]
const accessMenus = res.data.accessMenus??[]
menus.map((item:any)=>{
item.disabled = !accessMenus.includes(item.id)
})
state.menuData = proxy.handleTree(menus, "id","pid");
})
};
const resetForm = ()=>{
state.menuCheckStrictly=false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id:0,
pid:0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds:[],
effectiveType:0,
weekDay:[1,2,3,4,5],
dayRange:[
'2024-02-01 08:00:00',
'2024-02-01 19:00:00',
],
dateRange:[]
}
};
/** 树权限（展开/折叠）*/
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 getMenuData = () => {
getRoleParams().then((res:any)=>{
const menus = res.data.menu??[]
const accessMenus = res.data.accessMenus??[]
menus.map((item:any)=>{
item.disabled = !accessMenus.includes(item.id)
})
state.menuData = proxy.handleTree(menus, "id","pid");
})
};
const resetForm = ()=>{
state.menuCheckStrictly=false;
state.menuExpand = false;
state.menuNodeAll = false;
state.formData = {
id:0,
pid:0,
name: '',
status: 1,
listOrder: 0,
remark: '',
menuIds:[],
effectiveType:0,
weekDay:[1,2,3,4,5],
dayRange:[
'2024-02-01 08:00:00',
'2024-02-01 19:00:00',
],
dateRange:[]
}
};
const {formData, menuData,menuExpand,menuNodeAll,menuCheckStrictly,menuProps,rules,loading,isShowDialog} = toRefs(state)
/** 树权限（展开/折叠）*/
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 : []); menuRef.value.setCheckedNodes(value ? state.menuData : []);
} }
/** 树权限（父子联动） */ /** 树权限（父子联动） */
const handleCheckedTreeConnect = (value:any) => { const handleCheckedTreeConnect = (value:any) => {
state.menuCheckStrictly = value ? true : false; state.menuCheckStrictly = value ? true : false;
} }
/** 所有菜单节点数据 */ /** 所有菜单节点数据 */
function getMenuAllCheckedKeys() { function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点 // 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys(); let checkedKeys = menuRef.value.getCheckedKeys();
// 半选中的菜单节点 // 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys(); let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys; return checkedKeys;
} }
// 重置菜单session // 重置菜单session
const resetMenuSession = () => { const resetMenuSession = () => {
refreshBackEndControlRoutes(); refreshBackEndControlRoutes();
}; };
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
handleCheckedTreeExpand,
handleCheckedTreeNodeAll,
handleCheckedTreeConnect,
resetMenuSession,
...toRefs(state),
};
},
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

353
src/views/system/role/index.vue
View File

@ -7,7 +7,7 @@
<el-input v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/> <el-input v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
</el-form-item> </el-form-item>
<el-form-item label="状态"> <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="1" />
<el-option label="禁用" value="0" /> <el-option label="禁用" value="0" />
</el-select> </el-select>
@ -77,7 +77,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
import { ElMessageBox, ElMessage,ElLoading } from 'element-plus'; import { ElMessageBox, ElMessage,ElLoading } from 'element-plus';
import EditRole from '/@/views/system/role/component/editRole.vue'; import EditRole from '/@/views/system/role/component/editRole.vue';
@ -118,197 +118,170 @@ 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>>() isShowDialog: false,
const roleUsers = ref([]) deptData: [],
const setRole = ref(0) userListParam: {
const state = reactive<TableDataState>({ roleId: undefined,
isShowDialog: false, },
deptData: [], selectRow:{},
userListParam: { tableData: {
roleId: undefined, data: [],
}, total: 0,
selectRow:{}, loading: false,
tableData: { param: {
data: [], roleName: '',
total: 0, roleStatus: '',
loading: false, pageNum: 1,
param: { pageSize: 10,
roleName: '', },
roleStatus: '', },
pageNum: 1, });
pageSize: 10, const { tableData,selectRow,deptData,userListParam,isShowDialog} = toRefs(state);
}, // 初始化表格数据
}, const initTableData = () => {
}); roleList()
// 初始化表格数据 };
const initTableData = () => { const roleList = ()=>{
roleList() const data: Array<TableData> = [];
}; getRoleList(state.tableData.param).then(res=>{
const roleList = ()=>{ const list = res.data.list??[]
const data: Array<TableData> = []; list.map((item:TableData)=>{
getRoleList(state.tableData.param).then(res=>{ data.push({
const list = res.data.list??[] id:item.id,
list.map((item:TableData)=>{ pid:item.pid,
data.push({ status: item.status,
id:item.id, listOrder: item.listOrder,
pid:item.pid, name: item.name,
status: item.status, remark: item.remark,
listOrder: item.listOrder, dataScope:item.dataScope,
name: item.name, userCnt:item.userCnt,
remark: item.remark, createdAt: item.createdAt,
dataScope:item.dataScope, });
userCnt:item.userCnt, })
createdAt: item.createdAt, roleListData.value = data
}); state.tableData.data = proxy.handleTree(data??[], "id","pid","children",true);
}) })
roleListData.value = data };
state.tableData.data = proxy.handleTree(data??[], "id","pid","children",true); // 打开角色用户列表
}) const onOpenUserList = (row: TableData) => {
}; state.selectRow = row
// 打开角色用户列表 state.userListParam.roleId = row.id
const onOpenUserList = (row: TableData) => { if (state.deptData.length == 0){
state.selectRow = row getDeptTree().then((res:any)=>{
state.userListParam.roleId = row.id state.deptData = res.data.deps
if (state.deptData.length == 0){ state.isShowDialog = true
getDeptTree().then((res:any)=>{ })
state.deptData = res.data.deps }else{
state.isShowDialog = true state.isShowDialog = true
}) }
}else{ };
state.isShowDialog = true // 打开新增角色弹窗
} const onOpenAddRole = () => {
}; editRoleRef.value.openDialog();
// 打开新增角色弹窗 };
const onOpenAddRole = () => { // 打开修改角色弹窗
editRoleRef.value.openDialog(); const onOpenEditRole = (row: Object|undefined) => {
}; editRoleRef.value.openDialog(toRaw(row));
// 打开修改角色弹窗 };
const onOpenEditRole = (row: Object|undefined) => { //数据权限设置弹窗
editRoleRef.value.openDialog(toRaw(row)); const handleDataScope=(row:any)=>{
}; dataScopeRef.value.openDialog(toRaw(row))
//数据权限设置弹窗 }
const handleDataScope=(row:any)=>{ //用户授权
dataScopeRef.value.openDialog(toRaw(row)) const handleUserScope = ((row:any)=>{
} const ld = ElLoading.service()
//用户授权 setRole.value = row.id
const handleUserScope = ((row:any)=>{ getUsersById(row.id).then((res:any)=>{
const ld = ElLoading.service() ld.close()
setRole.value = row.id roleUsers.value=res.data.userList??[]
getUsersById(row.id).then((res:any)=>{ selectUserRef.value.openDialog()
ld.close() })
roleUsers.value=res.data.userList??[] })
selectUserRef.value.openDialog() // 删除角色
const onRowDel = (row: any) => {
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRole(row.id).then(()=>{
ElMessage.success('删除成功');
proxy.$refs['editRoleRef'].resetMenuSession();
roleList();
}) })
}) })
// 删除角色 .catch(() => {});
const onRowDel = (row: any) => { };
ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', { // 分页改变
confirmButtonText: '确认', const onHandleSizeChange = (val: number) => {
cancelButtonText: '取消', state.tableData.param.pageSize = val;
type: 'warning', };
}) // 分页改变
.then(() => { const onHandleCurrentChange = (val: number) => {
deleteRole(row.id).then(()=>{ state.tableData.param.pageNum = val;
ElMessage.success('删除成功'); };
proxy.$refs['editRoleRef'].resetMenuSession(); const userList = ()=>{
roleList(); userListRef.value.userList();
}) };
}) // 页面加载时
.catch(() => {}); onMounted(() => {
}; initTableData();
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
const userList = ()=>{
userListRef.value.userList();
};
// 页面加载时
onMounted(() => {
initTableData();
});
const handleCommand = (command: string )=>{
let commandArr = command.split('_')
let row = roleListData.value?.filter((item:TableData)=>{
return item.id==parseInt(commandArr[1])
})?.[0]
switch (commandArr[0]){
case 'resource':
onOpenEditRole(row)
break
case 'data':
handleDataScope(row)
break
case 'user':
handleUserScope(row)
break
}
}
const confirmUser = (data:any[]) => {
if(data.length>0){
const ids = roleUsers.value.map((item:any)=>{
return item.id
})
console.log('ids = ',ids)
data.map((item:any)=>{
// 若存在某个用户 则不添加
if (!ids.includes(item.id)){
roleUsers.value.push(item as never)
}
})
}else{
roleUsers.value = []
}
};
const setRoleUser = ()=>{
const ids = roleUsers.value.map((item:any)=>{
return item.id
})
//用户授权提交
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),
};
},
}); });
const handleCommand = (command: string )=>{
let commandArr = command.split('_')
let row = roleListData.value?.filter((item:TableData)=>{
return item.id==parseInt(commandArr[1])
})?.[0]
switch (commandArr[0]){
case 'resource':
onOpenEditRole(row)
break
case 'data':
handleDataScope(row)
break
case 'user':
handleUserScope(row)
break
}
}
const confirmUser = (data:any[]) => {
if(data.length>0){
const ids = roleUsers.value.map((item:any)=>{
return item.id
})
console.log('ids = ',ids)
data.map((item:any)=>{
// 若存在某个用户 则不添加
if (!ids.includes(item.id)){
roleUsers.value.push(item as never)
}
})
}else{
roleUsers.value = []
}
};
const setRoleUser = ()=>{
const ids = roleUsers.value.map((item:any)=>{
return item.id
})
//用户授权提交
setRoleUsers({roleId:setRole.value,userIds:ids}).then((res:any)=>{
roleList()
})
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.auth-action{ .auth-action{

328
src/views/system/sysJob/list/component/detail.vue
View File

@ -76,180 +76,162 @@
</el-drawer> </el-drawer>
</div> </div>
</template> </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, listSysJob,
getSysJob, getSysJob,
delSysJob, delSysJob,
addSysJob, addSysJob,
updateSysJob, updateSysJob,
getUserList, getJobLogs, delSysJobLog, getUserList, getJobLogs, delSysJobLog,
} from "/@/api/system/tools/job/sysJob"; } from "/@/api/system/tools/job/sysJob";
import { import {
SysJobTableColumns, SysJobTableColumns,
SysJobInfoData, SysJobInfoData,
SysJobTableDataState, SysJobTableDataState,
SysJobEditState, SysJobLog, SysJobLogData, 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:{ jobGroupOptions:{
}, type:Array,
props:{ default:()=>[]
jobGroupOptions:{ },
type:Array, misfirePolicyOptions:{
default:()=>[] type:Array,
}, default:()=>[]
misfirePolicyOptions:{ },
type:Array, statusOptions:{
default:()=>[] type:Array,
}, default:()=>[]
statusOptions:{ },
type:Array, })
default:()=>[] const {proxy} = <any>getCurrentInstance()
}, const formRef = ref<HTMLElement | null>(null);
}, const menuRef = ref();
setup(props,{emit}) { // 非多个禁用
const {proxy} = <any>getCurrentInstance() const multiple =ref(true)
const formRef = ref<HTMLElement | null>(null); const logList = reactive<SysJobLog>({
const menuRef = ref(); logIds:[],
// 非多个禁用 data: [],
const multiple =ref(true) loading: false,
const logList = reactive<SysJobLog>({ param: {
logIds:[], pageNum: 1,
data: [], pageSize: 10,
loading: false, targetName: undefined
param: { },
pageNum: 1, total: 0
pageSize: 10, })
targetName: undefined const state = reactive<SysJobEditState>({
}, loading:false,
total: 0 isShowDialog: false,
}) formData: {
const state = reactive<SysJobEditState>({ jobId: undefined,
loading:false, jobName: undefined,
isShowDialog: false, jobParams: undefined,
formData: { jobGroup: undefined,
jobId: undefined, invokeTarget: undefined,
jobName: undefined, cronExpression: undefined,
jobParams: undefined, misfirePolicy: false ,
jobGroup: undefined, concurrent: undefined,
invokeTarget: undefined, status: false ,
cronExpression: undefined, createdBy: undefined,
misfirePolicy: false , updatedBy: undefined,
concurrent: undefined, remark: undefined,
status: false , createdAt: undefined,
createdBy: undefined, updatedAt: undefined,
updatedBy: undefined, createdUser:{userNickname:''},
remark: undefined, updatedUser:{userNickname:''}
createdAt: undefined, },
updatedAt: undefined, // 表单校验
createdUser:{userNickname:''}, rules: {}
updatedUser:{userNickname:''} });
}, const { isShowDialog,formData} = toRefs(state)
// 表单校验 // 打开弹窗
rules: {} const openDialog = (row?: SysJobInfoData) => {
}); resetForm();
// 打开弹窗 if(row) {
const openDialog = (row?: SysJobInfoData) => { getSysJob(row.jobId!).then((res:any)=>{
resetForm(); state.formData = res.data;
if(row) { })
getSysJob(row.jobId!).then((res:any)=>{ logList.loading=true
state.formData = res.data; getLogList(row.invokeTarget!);
}) }
logList.loading=true state.isShowDialog = true;
getLogList(row.invokeTarget!); };
} defineExpose({openDialog})
state.isShowDialog = true; const getLogList = (invokeTarget:string)=>{
}; logList.param.targetName=invokeTarget
const getLogList = (invokeTarget:string)=>{ getJobLogs(logList.param).then((res:any)=>{
logList.param.targetName=invokeTarget logList.data = res.data.list||[];
getJobLogs(logList.param).then((res:any)=>{ logList.total=res.data.total;
logList.data = res.data.list||[]; logList.loading=false;
logList.total=res.data.total;
logList.loading=false;
})
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
createdUser:{userNickname:''},
updatedUser:{userNickname:''}
}
};
// 多选框选中数据
const handleSelectionChange = (selection:Array<SysJobLogData>) => {
logList.logIds = selection.map(item => item.id)
multiple.value = !selection.length
};
const handleDelete = (row: SysJobLogData) => {
let msg = '你确定要删除所选数据？';
let logId:number[] = [] ;
let targetName:string='';
if(row){
msg = `此操作将永久删除数据，是否继续?`
logId = [row.id]
targetName = row.targetName
}else{
logId = logList.logIds
targetName=state.formData.invokeTarget!
}
if(logId.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysJobLog(logId).then(()=>{
ElMessage.success('删除成功');
getLogList(targetName);
})
})
.catch(() => {});
}
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
logList,
getLogList,
handleSelectionChange,
multiple,
handleDelete,
...toRefs(state),
};
}
}) })
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
createdUser:{userNickname:''},
updatedUser:{userNickname:''}
}
};
// 多选框选中数据
const handleSelectionChange = (selection:Array<SysJobLogData>) => {
logList.logIds = selection.map(item => item.id)
multiple.value = !selection.length
};
const handleDelete = (row: SysJobLogData) => {
let msg = '你确定要删除所选数据？';
let logId:number[] = [] ;
let targetName:string='';
if(row){
msg = `此操作将永久删除数据，是否继续?`
logId = [row.id]
targetName = row.targetName
}else{
logId = logList.logIds
targetName=state.formData.invokeTarget!
}
if(logId.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysJobLog(logId).then(()=>{
ElMessage.success('删除成功');
getLogList(targetName);
})
})
.catch(() => {});
}
</script> </script>
<style scoped> <style scoped>
.system-sysJob-detail :deep(.el-form-item--large .el-form-item__label){ .system-sysJob-detail :deep(.el-form-item--large .el-form-item__label){

267
src/views/system/sysJob/list/component/edit.vue
View File

@ -56,7 +56,7 @@
<el-radio <el-radio
v-for="dict in misfirePolicyOptions" v-for="dict in misfirePolicyOptions"
:key="dict.value" :key="dict.value"
:label="dict.value" :value="dict.value"
>{{dict.label }}</el-radio> >{{dict.label }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -65,7 +65,7 @@
<el-radio <el-radio
v-for="dict in statusOptions" v-for="dict in statusOptions"
:key="dict.value" :key="dict.value"
:label="dict.value" :value="dict.value"
>{{dict.label }}</el-radio> >{{dict.label }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -82,7 +82,7 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue'; import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import { import {
@ -99,144 +99,135 @@ import {
SysJobTableDataState, SysJobTableDataState,
SysJobEditState, SysJobEditState,
} from "/@/views/system/sysJob/list/component/model" } from "/@/views/system/sysJob/list/component/model"
export default defineComponent({ defineOptions({ name: "apiV1SystemSysJobEdit"})
name:"apiV1SystemSysJobEdit", const props = defineProps({
components:{ jobGroupOptions:{
type:Array,
default:()=>[]
}, },
props:{ misfirePolicyOptions:{
jobGroupOptions:{ type:Array,
type:Array, default:()=>[]
default:()=>[] },
}, statusOptions:{
misfirePolicyOptions:{ type:Array,
type:Array, default:()=>[]
default:()=>[]
},
statusOptions:{
type:Array,
default:()=>[]
},
}, },
setup(props,{emit}) {
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SysJobEditState>({
loading:false,
isShowDialog: false,
formData: {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
},
// 表单校验
rules: {
cronExpression: [
{ required: true, message: "cron执行表达式不能为空", trigger: "blur" }
],
jobName : [
{ required: true, message: "任务名称不能为空", trigger: "blur" }
],
invokeTarget : [
{ required: true, message: "任务方法不能为空", trigger: "blur" }
],
status : [
{ required: true, message: "状态不能为空", trigger: "blur" }
],
}
});
// 打开弹窗
const openDialog = (row?: SysJobInfoData) => {
resetForm();
if(row) {
getSysJob(row.jobId!).then((res:any)=>{
const data = res.data;
data.jobGroup = ''+data.jobGroup
data.misfirePolicy = ''+data.misfirePolicy
data.status = ''+data.status
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(!state.formData.jobId || state.formData.jobId===0){
//添加
addSysJob(state.formData).then(()=>{
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('sysJobList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateSysJob(state.formData).then(()=>{
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('sysJobList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.formData = {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
}
};
return {
proxy,
openDialog,
closeDialog,
onCancel,
onSubmit,
menuRef,
formRef,
...toRefs(state),
};
}
}) })
const emit = defineEmits(['sysJobList'])
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SysJobEditState>({
loading:false,
isShowDialog: false,
formData: {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
createdUser:{userNickname:''},
updatedUser:{userNickname:''}
},
// 表单校验
rules: {
cronExpression: [
{ required: true, message: "cron执行表达式不能为空", trigger: "blur" }
],
jobName : [
{ required: true, message: "任务名称不能为空", trigger: "blur" }
],
invokeTarget : [
{ required: true, message: "任务方法不能为空", trigger: "blur" }
],
status : [
{ required: true, message: "状态不能为空", trigger: "blur" }
],
}
});
const {isShowDialog,formData,rules} = toRefs(state);
// 打开弹窗
const openDialog = (row?: SysJobInfoData) => {
resetForm();
if(row) {
getSysJob(row.jobId!).then((res:any)=>{
const data = res.data;
data.jobGroup = ''+data.jobGroup
data.misfirePolicy = ''+data.misfirePolicy
data.status = ''+data.status
state.formData = data;
})
}
state.isShowDialog = true;
};
defineExpose({openDialog})
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(!state.formData.jobId || state.formData.jobId===0){
//添加
addSysJob(state.formData).then(()=>{
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('sysJobList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateSysJob(state.formData).then(()=>{
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('sysJobList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.formData = {
jobId: undefined,
jobName: undefined,
jobParams: undefined,
jobGroup: undefined,
invokeTarget: undefined,
cronExpression: undefined,
misfirePolicy: false ,
concurrent: undefined,
status: false ,
createdBy: undefined,
updatedBy: undefined,
remark: undefined,
createdAt: undefined,
updatedAt: undefined,
createdUser:{userNickname:''},
updatedUser:{userNickname:''}
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.cronExpression-rule{ .cronExpression-rule{

357
src/views/system/sysJob/list/index.vue
View File

@ -127,7 +127,7 @@
></apiV1SystemSysJobDetail> ></apiV1SystemSysJobDetail>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { ItemOptions } from '/@/api/items'; import { ItemOptions } from '/@/api/items';
import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue'; import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'; import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
@ -135,202 +135,167 @@ import { listSysJob, getSysJob, delSysJob, addSysJob, updateSysJob, getUserList,
import { SysJobTableColumns, SysJobInfoData, SysJobTableDataState } from '/@/views/system/sysJob/list/component/model'; import { SysJobTableColumns, SysJobInfoData, SysJobTableDataState } from '/@/views/system/sysJob/list/component/model';
import apiV1SystemSysJobEdit from '/@/views/system/sysJob/list/component/edit.vue'; import apiV1SystemSysJobEdit from '/@/views/system/sysJob/list/component/edit.vue';
import apiV1SystemSysJobDetail from '/@/views/system/sysJob/list/component/detail.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); if (showAll.value === false) {
// 非单个禁用 //对文字进行处理
const single = ref(true); return '展开搜索';
// 非多个禁用 } else {
const multiple = ref(true); return '收起搜索';
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 state = reactive<SysJobTableDataState>({
jobIds: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
jobName: undefined,
jobGroup: undefined,
status: undefined,
},
},
});
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysJobList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
sysJobList();
};
// 获取列表数据
const sysJobList = () => {
loading.value = true;
listSysJob(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false;
});
};
const toggleSearch = () => {
showAll.value = !showAll.value;
};
// 任务组名字典翻译
const jobGroupFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
};
// 计划执行策略字典翻译
const misfirePolicyFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_policy.value, row.misfirePolicy);
};
// 状态字典翻译
const statusFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_status.value, row.status);
};
// 多选框选中数据
const handleSelectionChange = (selection: Array<SysJobInfoData>) => {
state.jobIds = selection.map((item) => item.jobId);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
const handleAdd = () => {
editRef.value.openDialog();
};
const handleUpdate = (row: SysJobTableColumns) => {
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 jobId = row.jobId || 0;
ElMessageBox.confirm('是否确认立即执行一次该任务?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
return runJob(jobId);
})
.then(() => {
ElMessage.success('执行成功');
})
.catch(function () {});
};
const handleDelete = (row: SysJobTableColumns) => {
let msg = '你确定要删除所选数据？';
let jobId: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`;
jobId = [row.jobId];
} else {
jobId = state.jobIds;
}
if (jobId.length === 0) {
ElMessage.error('请选择要删除的数据。');
return;
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysJob(jobId).then(() => {
ElMessage.success('删除成功');
sysJobList();
});
})
.catch(() => {});
};
const handleView = (row: SysJobTableColumns) => {
detailRef.value.openDialog(toRaw(row));
};
// 任务状态修改
const handleStatusChange = (row: SysJobTableColumns) => {
let text = row.status === 0 ? '启用' : '停用';
ElMessageBox.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
if (row.status === 0) {
return startJob(row.jobId);
} else {
return stopJob(row.jobId);
}
})
.then(() => {
ElMessage.success(text + '成功');
})
.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),
};
},
}); });
// 字典选项数据
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>({
jobIds: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
jobName: undefined,
jobGroup: undefined,
status: undefined,
},
},
});
const { tableData } = toRefs(state);
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysJobList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
sysJobList();
};
// 获取列表数据
const sysJobList = () => {
loading.value = true;
listSysJob(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false;
});
};
const toggleSearch = () => {
showAll.value = !showAll.value;
};
// 任务组名字典翻译
const jobGroupFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
};
// 计划执行策略字典翻译
const misfirePolicyFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_policy.value, row.misfirePolicy);
};
// 状态字典翻译
const statusFormat = (row: SysJobTableColumns) => {
return proxy.selectDictLabel(sys_job_status.value, row.status);
};
// 多选框选中数据
const handleSelectionChange = (selection: Array<SysJobInfoData>) => {
state.jobIds = selection.map((item) => item.jobId);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
const handleAdd = () => {
editRef.value.openDialog();
};
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 jobId = row.jobId || 0;
ElMessageBox.confirm('是否确认立即执行一次该任务?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
return runJob(jobId);
})
.then(() => {
ElMessage.success('执行成功');
})
.catch(function () {});
};
const handleDelete = (row: SysJobTableColumns|null) => {
let msg = '你确定要删除所选数据？';
let jobId: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`;
jobId = [row.jobId];
} else {
jobId = state.jobIds;
}
if (jobId.length === 0) {
ElMessage.error('请选择要删除的数据。');
return;
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysJob(jobId).then(() => {
ElMessage.success('删除成功');
sysJobList();
});
})
.catch(() => {});
};
const handleView = (row: SysJobTableColumns) => {
detailRef.value.openDialog(toRaw(row));
};
// 任务状态修改
const handleStatusChange = (row: SysJobTableColumns) => {
let text = row.status === 0 ? '启用' : '停用';
ElMessageBox.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(function () {
if (row.status === 0) {
return startJob(row.jobId);
} else {
return stopJob(row.jobId);
}
})
.then(() => {
ElMessage.success(text + '成功');
})
.catch(function () {
row.status = row.status === 0 ? 1 : 0;
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {

342
src/views/system/sysNotice/list/component/NoticeMessageEdit.vue
View File

@ -82,7 +82,7 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {reactive, onMounted, toRefs, defineComponent, ref, unref, getCurrentInstance} from 'vue'; import {reactive, onMounted, toRefs, defineComponent, ref, unref, getCurrentInstance} from 'vue';
import { ElMessage} from 'element-plus'; import { ElMessage} from 'element-plus';
import { import {
@ -95,194 +95,174 @@ import {
SysNoticeInfoData, SysNoticeInfoData,
SysNoticeEditState SysNoticeEditState
} from "/@/views/system/sysNotice/list/component/model" } from "/@/views/system/sysNotice/list/component/model"
defineOptions({ name: "NoticeMessageEdit"})
export default defineComponent({ const props = defineProps({
name: "NoticeMessageEdit", tagOptions: {
components: { type: Array,
GfUeditor, default: () => []
}, },
props: { })
tagOptions: { const emit = defineEmits(["sysNoticeList"]);
type: Array, const {proxy} = <any>getCurrentInstance()
default: () => [] const formRef = ref<HTMLElement | null>(null);
}, const menuRef = ref();
const state = reactive<SysNoticeEditState>({
loading: false,
isShowDialog: false,
title: "",
userListOptions: [],
formData: {
id: undefined,
receiver: undefined,
title: undefined,
type: undefined,
tag: undefined,
content: undefined,
remark: undefined,
sort: undefined,
status: 0,
createdBy: undefined,
updatedBy: undefined,
createdAt: undefined,
updatedAt: undefined,
deletedAt: undefined,
}, },
setup(props, {emit}) {
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SysNoticeEditState>({
loading: false,
isShowDialog: false,
title: "",
userListOptions: [],
formData: {
id: undefined,
receiver: undefined,
title: undefined,
type: undefined,
tag: undefined,
content: undefined,
remark: undefined,
sort: undefined,
status: 0,
createdBy: undefined,
updatedBy: undefined,
createdAt: undefined,
updatedAt: undefined,
deletedAt: undefined,
},
// 表单校验 // 表单校验
rules: { rules: {
id: [ id: [
{required: true, message: "ID不能为空", trigger: "blur"} {required: true, message: "ID不能为空", trigger: "blur"}
], ],
title: [ title: [
{required: true, message: "标题不能为空", trigger: "blur"} {required: true, message: "标题不能为空", trigger: "blur"}
], ],
type: [ type: [
{required: true, message: "类型不能为空", trigger: "blur"} {required: true, message: "类型不能为空", trigger: "blur"}
], ],
content: [ content: [
{required: true, message: "内容不能为空", trigger: "blur"} {required: true, message: "内容不能为空", trigger: "blur"}
], ],
status: [ status: [
{required: true, message: "状态不能为空", trigger: "blur"} {required: true, message: "状态不能为空", trigger: "blur"}
], ],
}
});
const { isShowDialog,formData,loading,userListOptions,rules,title} = toRefs(state)
onMounted(() => {
remoteUserMethod("");
});
// 打开弹窗
const openDialog = (row?: SysNoticeInfoData) => {
resetForm();
if (row) {
getSysNotice(row.id!).then((res: any) => {
const data = res.data;
data.type = parseInt(data.type)
if(data.type===2&&data.receiverUser){
const userListOptions = [...state.userListOptions,...data.receiverUser]
let uniqueSet = new Set(userListOptions.map(item => item.id));
state.userListOptions = userListOptions.filter((value, index, self) => {
return uniqueSet.has(value.id) && uniqueSet.delete(value.id)
});
} }
}); data.tag = '' + data.tag
onMounted(() => { data.status = parseInt(data.status)
remoteUserMethod(""); state.formData = data;
}); })
// 打开弹窗 }
const openDialog = (row?: SysNoticeInfoData) => { state.isShowDialog = true;
resetForm(); };
if (row) { const remoteUserMethod = (query: string) => {
getSysNotice(row.id!).then((res: any) => { //console.log("remoteMethod", query)
const data = res.data; state.userListOptions = []
data.type = parseInt(data.type) getUserList(query).then((res: any) => {
if(data.type===2&&data.receiverUser){ /*console.log(res)*/
const userListOptions = [...state.userListOptions,...data.receiverUser] // let list:object[]
let uniqueSet = new Set(userListOptions.map(item => item.id)); //list=res.data
state.userListOptions = userListOptions.filter((value, index, self) => { state.userListOptions = res.data.userList
return uniqueSet.has(value.id) && uniqueSet.delete(value.id) })
}); /* if (query) {
} loading.value = true
data.tag = '' + data.tag setTimeout(() => {
data.status = parseInt(data.status) loading.value = false
state.formData = data; options.value = list.value.filter((item) => {
return item.label.toLowerCase().includes(query.toLowerCase())
})
}, 200)
} else {
options.value = []
}*/
}
//设置类型
const setType = (type: number) => {
state.formData.type = type
if (type == 1) {
state.title = "通知"
} else if (type == 2) {
state.title = "私信"
}
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if (!state.formData.id || state.formData.id === 0) {
//添加
addSysNotice(state.formData).then(() => {
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('sysNoticeList')
}).finally(() => {
state.loading = false;
})
} else {
//修改
updateSysNotice(state.formData).then(() => {
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('sysNoticeList')
}).finally(() => {
state.loading = false;
}) })
} }
state.isShowDialog = true;
};
const remoteUserMethod = (query: string) => {
//console.log("remoteMethod", query)
state.userListOptions = []
getUserList(query).then((res: any) => {
/*console.log(res)*/
// let list:object[]
//list=res.data
state.userListOptions = res.data.userList
})
/* if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
options.value = list.value.filter((item) => {
return item.label.toLowerCase().includes(query.toLowerCase())
})
}, 200)
} else {
options.value = []
}*/
} }
//设置类型 });
const setType = (type: number) => { };
state.formData.type = type const resetForm = () => {
if (type == 1) { state.formData = {
state.title = "通知" receiver: undefined,
} else if (type == 2) { type: undefined,
state.title = "私信" id: undefined,
} title: undefined,
}; tag: undefined,
content: undefined,
// 关闭弹窗 remark: undefined,
const closeDialog = () => { sort: 0,
state.isShowDialog = false; status: 1,
}; createdBy: undefined,
// 取消 updatedBy: undefined,
const onCancel = () => { createdAt: undefined,
closeDialog(); updatedAt: undefined,
}; deletedAt: undefined
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if (!state.formData.id || state.formData.id === 0) {
//添加
addSysNotice(state.formData).then(() => {
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('sysNoticeList')
}).finally(() => {
state.loading = false;
})
} else {
//修改
updateSysNotice(state.formData).then(() => {
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('sysNoticeList')
}).finally(() => {
state.loading = false;
})
}
}
});
};
const resetForm = () => {
state.formData = {
receiver: undefined,
type: undefined,
id: undefined,
title: undefined,
tag: undefined,
content: undefined,
remark: undefined,
sort: 0,
status: 1,
createdBy: undefined,
updatedBy: undefined,
createdAt: undefined,
updatedAt: undefined,
deletedAt: undefined
}
};
//富文本编辑器内容
const setContentEditContent = (data: string) => {
state.formData.content = data
}
return {
proxy,
openDialog,
setType,
closeDialog,
onCancel,
onSubmit,
remoteUserMethod,
menuRef,
formRef,
//富文本编辑器内容
setContentEditContent,
...toRefs(state),
};
} }
}) };
//富文本编辑器内容
const setContentEditContent = (data: string) => {
state.formData.content = data
}
defineExpose({openDialog,setType})
</script> </script>
<style scoped> <style scoped>
.kv-label { .kv-label {

282
src/views/system/sysNotice/list/index.vue
View File

@ -16,7 +16,7 @@
</el-col> </el-col>
<el-col :span="5" class="colBlock"> <el-col :span="5" class="colBlock">
<el-form-item label="状态" prop="status"> <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="1"/>
<el-option label="停用" :value="0"/> <el-option label="停用" :value="0"/>
</el-select> </el-select>
@ -24,7 +24,7 @@
</el-col> </el-col>
<el-col :span="5" class="colBlock"> <el-col :span="5" class="colBlock">
<el-form-item label="类型" prop="type"> <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="1"/>
<el-option label="公告" value="2"/> <el-option label="公告" value="2"/>
</el-select> </el-select>
@ -32,7 +32,7 @@
</el-col> </el-col>
<el-col :span="5" class="colBlock"> <el-col :span="5" class="colBlock">
<el-form-item label="标签" prop="tag"> <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 <el-option
v-for="dict in notice_tag" v-for="dict in notice_tag"
:key="dict.value" :key="dict.value"
@ -193,172 +193,146 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import { import {
listSysNotice, listSysNotice,
delSysNotice, delSysNotice,
} from "/src/api/system/notice/sysNotice"; } from "/@/api/system/notice/sysNotice";
import { import {
SysNoticeTableColumns, SysNoticeTableColumns,
SysNoticeInfoData, SysNoticeInfoData,
SysNoticeTableDataState, SysNoticeTableDataState,
} from "/@/views/system/sysNotice/list/component/model" } from "/@/views/system/sysNotice/list/component/model"
import NoticeMessageEdit from "/@/views/system/sysNotice/list/component/NoticeMessageEdit.vue" 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) { if (showAll.value === false) {
//对文字进行处理 //对文字进行处理
return "展开搜索"; return "展开搜索";
} else { } else {
return "收起搜索"; return "收起搜索";
}
})
// 字典选项数据
const {
notice_tag,
} = proxy.useDict(
'notice_tag',
)
const state = reactive<SysNoticeTableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
id: undefined,
title: undefined,
type: undefined,
tag: undefined,
status: undefined,
createdAt: undefined,
dateRange: []
},
},
});
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysNoticeList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysNoticeList()
};
// 获取列表数据
const sysNoticeList = () => {
loading.value = true
listSysNotice(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
list.map((item: any) => {
item.createdBy = item.createdUser?.userNickname
})
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const toggleSearch = () => {
showAll.value = !showAll.value;
}
// 标签字典翻译
const tagFormat = (row: SysNoticeTableColumns) => {
return proxy.selectDictLabel(notice_tag.value, row.tag);
}
// 多选框选中数据
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) => {
editRef.value.openDialog()
editRef.value.setType(type)
}
const handleUpdate = (row: SysNoticeTableColumns) => {
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) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`
id = [row.id]
} else {
id = state.ids
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysNotice(id).then(() => {
ElMessage.success('删除成功');
sysNoticeList();
})
})
.catch(() => {
});
}
return {
proxy,
editRef,
showAll,
loading,
single,
multiple,
word,
queryRef,
resetQuery,
sysNoticeList,
toggleSearch,
tagFormat,
notice_tag,
handleSelectionChange,
handleAdd,
handleUpdate,
handleDelete,
...toRefs(state),
}
} }
}) })
// 字典选项数据
const {
notice_tag,
} = proxy.useDict(
'notice_tag',
)
const state = reactive<SysNoticeTableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
id: undefined,
title: undefined,
type: undefined,
tag: undefined,
status: undefined,
createdAt: undefined,
dateRange: []
},
},
});
const { tableData} = toRefs(state)
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysNoticeList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysNoticeList()
};
// 获取列表数据
const sysNoticeList = () => {
loading.value = true
listSysNotice(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
list.map((item: any) => {
item.createdBy = item.createdUser?.userNickname
})
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const toggleSearch = () => {
showAll.value = !showAll.value;
}
// 标签字典翻译
const tagFormat = (row: SysNoticeTableColumns) => {
return proxy.selectDictLabel(notice_tag.value, row.tag);
}
// 多选框选中数据
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) => {
editRef.value.openDialog()
editRef.value.setType(type)
}
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|null) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`
id = [row.id]
} else {
id = state.ids
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysNotice(id).then(() => {
ElMessage.success('删除成功');
sysNoticeList();
})
})
.catch(() => {
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.colBlock { .colBlock {

217
src/views/system/sysNotice/show/index.vue
View File

@ -90,7 +90,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {useRoute} from "vue-router"; import {useRoute} from "vue-router";
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
@ -102,122 +102,107 @@ import {
SysNoticeTableDataState, SysNoticeTableDataState,
} from "/@/views/system/sysNotice/list/component/model" } from "/@/views/system/sysNotice/list/component/model"
import {readNotice} from "/@/api/system/notice/sysNoticeRead"; 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(); ids: [],
const {proxy} = <any>getCurrentInstance() tableData: {
const loading = ref(false) data: [],
const state = reactive<SysNoticeTableDataState>({ total: 0,
ids: [], loading: false,
tableData: { param: {
data: [], pageNum: 1,
total: 0, pageSize: 10,
loading: false, id: undefined,
param: { title: undefined,
pageNum: 1, type: 1,
pageSize: 10, tag: undefined,
id: undefined, status: undefined,
title: undefined, createdAt: undefined,
type: 1, dateRange: []
tag: undefined, },
status: undefined, },
createdAt: undefined, });
dateRange: [] const { tableData}= toRefs(state)
}, // 页面加载时
}, onMounted(() => {
}); if (route.query.type){
// 页面加载时 state.tableData.param.type = parseInt(route.query.type as string)
onMounted(() => {
if (route.query.type){
state.tableData.param.type = parseInt(route.query.type as string)
}
initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysNoticeList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysNoticeList()
};
// 获取列表数据
const sysNoticeList = () => {
loading.value = true
listShowNotice(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
list.map((item: any) => {
item.createdBy = item.createdUser?.userNickname
})
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const handleTabsClick = (e: any) => {
//console.log(e.props.name)
state.tableData.param.type = e.props.name
sysNoticeList()
}
const handleDelete = (row: SysNoticeTableColumns) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`
id = [row.id]
} else {
id = state.ids
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysNotice(id).then(() => {
ElMessage.success('删除成功');
sysNoticeList();
})
})
.catch(() => {
});
}
// eslint-disable-next-line no-undef
const handleRead = (item: any) => {
// console.log("handleRead", item)
let query = {
noticeId: item.id
}
readNotice(query).then(() => {
sysNoticeList()
ElMessage.success("已读");
})
}
return {
proxy,
loading,
resetQuery,
sysNoticeList,
handleTabsClick,
handleDelete,
handleRead,
...toRefs(state),
}
} }
}) initTableData();
});
// 初始化表格数据
const initTableData = () => {
sysNoticeList()
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
sysNoticeList()
};
// 获取列表数据
const sysNoticeList = () => {
loading.value = true
listShowNotice(state.tableData.param).then((res: any) => {
let list = res.data.list ?? [];
list.map((item: any) => {
item.createdBy = item.createdUser?.userNickname
})
state.tableData.data = list;
state.tableData.total = res.data.total;
loading.value = false
})
};
const handleTabsClick = (e: any) => {
//console.log(e.props.name)
state.tableData.param.type = e.props.name
sysNoticeList()
}
const handleDelete = (row: SysNoticeTableColumns) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`
id = [row.id]
} else {
id = state.ids
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delSysNotice(id).then(() => {
ElMessage.success('删除成功');
sysNoticeList();
})
})
.catch(() => {
});
}
// eslint-disable-next-line no-undef
const handleRead = (item: any) => {
// console.log("handleRead", item)
let query = {
noticeId: item.id
}
readNotice(query).then(() => {
sysNoticeList()
ElMessage.success("已读");
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el_icon { .el_icon {

121
src/views/system/tools/gen/component/basicInfo.vue
View File

@ -104,77 +104,64 @@
</div> </div>
</template> </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 { FormInstance, FormRules } from 'element-plus';
import type { TableDataInfo } from '/@/views/system/tools/gen/component/model'; import type { TableDataInfo } from '/@/views/system/tools/gen/component/model';
import { ElMessage } from 'element-plus'; 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>(); {key:"api",name:"覆盖api"},
const overwriteOptions = ref([ {key:"controller",name:"覆盖controller"},
{key:"api",name:"覆盖api"}, {key:"dao",name:"覆盖dao"},
{key:"controller",name:"覆盖controller"}, {key:"dao_internal",name:"覆盖dao_internal"},
{key:"dao",name:"覆盖dao"}, {key:"logic",name:"覆盖logic"},
{key:"dao_internal",name:"覆盖dao_internal"}, {key:"model",name:"覆盖model"},
{key:"logic",name:"覆盖logic"}, {key:"model_do",name:"覆盖model_do"},
{key:"model",name:"覆盖model"}, {key:"model_entity",name:"覆盖model_entity"},
{key:"model_do",name:"覆盖model_do"}, {key:"router",name:"覆盖router"},
{key:"model_entity",name:"覆盖model_entity"}, {key:"router_func",name:"覆盖router_func"},
{key:"router",name:"覆盖router"}, {key:"service",name:"覆盖service"},
{key:"router_func",name:"覆盖router_func"}, {key:"sql",name:"覆盖菜单sql"},
{key:"service",name:"覆盖service"}, {key:"tsApi",name:"覆盖tsApi"},
{key:"sql",name:"覆盖菜单sql"}, {key:"tsModel",name:"覆盖tsModel"},
{key:"tsApi",name:"覆盖tsApi"}, {key:"vue",name:"覆盖vue-list"},
{key:"tsModel",name:"覆盖tsModel"}, {key:"vueDetail",name:"覆盖vue-detail"},
{key:"vue",name:"覆盖vue-list"}, {key:"vueEdit",name:"覆盖vue-edit"},
{key:"vueDetail",name:"覆盖vue-detail"}, ])
{key:"vueEdit",name:"覆盖vue-edit"}, const info = inject<TableDataInfo>('tableData') as TableDataInfo;
]) const nextTip = (): boolean => {
const info = inject<TableDataInfo>('tableData') as TableDataInfo; //表单验证
const nextTip = (): boolean => { let tag = false;
//表单验证 const formWrap = unref(basicInfoFormRef) as any;
let tag = false; if (!formWrap) return false;
const formWrap = unref(basicInfoFormRef) as any; formWrap.validate((valid: boolean) => {
if (!formWrap) return false; if (valid) {
formWrap.validate((valid: boolean) => { emit('goNext');
if (valid) { tag = true;
emit('goNext'); } else {
tag = true; ElMessage.error('请将表单填写完整');
} else {
ElMessage.error('请将表单填写完整');
}
});
return tag;
};
const close = ()=>{
emit('close')
} }
const overwriteChange = (value:boolean)=>{ });
info.value.overwriteInfo.map((item:any)=>{ return tag;
item.value = value };
}) const close = ()=>{
} emit('close')
const rules = reactive<FormRules>({ }
tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }], const overwriteChange = (value:boolean)=>{
tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }], info.value.overwriteInfo.map((item:any)=>{
className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }], item.value = value
functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }], })
sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }], }
sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }], const rules = reactive<FormRules>({
}); tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
return { tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
basicInfoFormRef, className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
info, functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
rules, sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }],
overwriteOptions, sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }],
nextTip,
overwriteChange,
close
};
},
}); });
</script> </script>

266
src/views/system/tools/gen/component/edit.vue
View File

@ -23,9 +23,9 @@
<el-col :span="4"></el-col> <el-col :span="4"></el-col>
</el-row> </el-row>
</div> </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"> <div class="tools-footer" v-show="active === 3">
<el-button size="default" @click="close">关 闭</el-button> <el-button size="default" @click="close">关 闭</el-button>
<el-button type="primary" @click="onSubmit" size="default">保 存</el-button> <el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
@ -34,8 +34,8 @@
</div> </div>
</template> </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 { useRoute } from 'vue-router';
import toolsBasicInfoForm from '/@/views/system/tools/gen/component/basicInfo.vue'; import toolsBasicInfoForm from '/@/views/system/tools/gen/component/basicInfo.vue';
import { TableColumns, TableDataInfo } from '/@/views/system/tools/gen/component/model'; import { TableColumns, TableDataInfo } from '/@/views/system/tools/gen/component/model';
@ -43,146 +43,130 @@ import { ElMessage } from 'element-plus/es';
import {getGenTable, saveEdit} from '/@/api/system/tools/gen'; import {getGenTable, saveEdit} from '/@/api/system/tools/gen';
import genInfoForm from '/@/views/system/tools/gen/component/genInfoForm.vue'; import genInfoForm from '/@/views/system/tools/gen/component/genInfoForm.vue';
import genTableColumns from '/@/views/system/tools/gen/component/tableColumns.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) { if (args > active.value) {
switch (args) { switch (args) {
case 2: case 2:
//验证基本信息表单 //验证基本信息表单
if (toolsBasicInfoForm.value.nextTip()) { if (toolsBasicInfoFormRef.value.nextTip()) {
active.value = args; active.value = args;
} }
break; break;
case 3: case 3:
//验证生成信息表单 //验证生成信息表单
if (active.value==1){ if (active.value==1){
//验证基本信息表单 //验证基本信息表单
if (toolsBasicInfoForm.value.nextTip()) { if (toolsBasicInfoFormRef.value.nextTip()) {
active.value = args; active.value = args;
}
}else{
//验证生成信息表单
if (genInfoForm.value.nextTip()) {
active.value = args;
}
}
break;
}
} else {
active.value = args;
}
};
const defaultOverwriteInfo = [
{key:"api",value:false},
{key:"controller",value:false},
{key:"dao",value:false},
{key:"dao_internal",value:false},
{key:"logic",value:false},
{key:"model",value:false},
{key:"model_do",value:false},
{key:"model_entity",value:false},
{key:"router",value:false},
{key:"router_func",value:false},
{key:"service",value:false},
{key:"sql",value:false},
{key:"tsApi",value:false},
{key:"tsModel",value:false},
{key:"vue",value:false},
{key:"vueDetail",value:false},
{key:"vueEdit",value:false},
]
// 表详细信息
const info = ref(<TableDataInfo>{overwriteInfo:defaultOverwriteInfo});
provide('tableData', info);
const mergeArraysByKey = (arrays:Array<Array<object>>, key:string) :Array<any> => {
const merged:any={}
// 遍历所有数组，后面的数组会覆盖前面的数组
arrays.forEach(array => {
array.forEach((obj:any) => {
// 使用key的值作为键，将对象存储在merged对象中
merged[obj[key]] = obj;
});
});
// 将merged对象转换为数组
return Object.values(merged);
}
onBeforeMount(() => {
const tableId = route.query?.tableId;
if (tableId) {
// 获取表详细信息
getGenTable(tableId).then((res) => {
let columnsTmp:TableColumns[]= [];
columnsTmp = res.data.list.filter((item: TableColumns) => {
return !['updated_at', 'deleted_at'].includes(item.columnName);
});
const data: TableDataInfo = res.data.info as TableDataInfo;
data.columns = columnsTmp;
data.overwriteInfo = data.overwriteInfo?mergeArraysByKey([defaultOverwriteInfo,data.overwriteInfo],'key'):defaultOverwriteInfo
info.value = data;
});
} else {
ElMessage.error('参数错误');
}
});
// 表单组件验证
const formRulesValidate = (pageRef: string, sonRef: string) => {
return new Promise((resolve,reject) => {
proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
if (valid) {
resolve(valid)
}else{
reject('请将表单填写完整')
} }
}); }else{
}); //验证生成信息表单
}; if (genInfoFormRef.value.nextTip()) {
const onSubmit = () => { active.value = args;
Promise.all([ }
formRulesValidate('toolsBasicInfoForm', 'basicInfoFormRef'), }
formRulesValidate('genInfoForm', 'genInfoFormRef'), break;
]).then(() => {
saveEdit(info.value).then(()=>{
ElMessage.success('保存成功');
close();
})
}).catch(e=>{
ElMessage.error(e.toString());
});
};
const goNext = () => {
if (active.value > 2) {
active.value = 1;
} else {
active.value++;
}
};
//取消返回
const close = ()=>{
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
} }
return { } else {
toolsBasicInfoForm, active.value = args;
genInfoForm, }
tableColumns, };
active, const defaultOverwriteInfo = [
changeSteps, {key:"api",value:false},
info, {key:"controller",value:false},
onSubmit, {key:"dao",value:false},
goNext, {key:"dao_internal",value:false},
close {key:"logic",value:false},
}; {key:"model",value:false},
}, {key:"model_do",value:false},
{key:"model_entity",value:false},
{key:"router",value:false},
{key:"router_func",value:false},
{key:"service",value:false},
{key:"sql",value:false},
{key:"tsApi",value:false},
{key:"tsModel",value:false},
{key:"vue",value:false},
{key:"vueDetail",value:false},
{key:"vueEdit",value:false},
]
// 表详细信息
const info = ref(<TableDataInfo>{overwriteInfo:defaultOverwriteInfo});
provide('tableData', info);
const mergeArraysByKey = (arrays:Array<Array<object>>, key:string) :Array<any> => {
const merged:any={}
// 遍历所有数组，后面的数组会覆盖前面的数组
arrays.forEach(array => {
array.forEach((obj:any) => {
// 使用key的值作为键，将对象存储在merged对象中
merged[obj[key]] = obj;
});
});
// 将merged对象转换为数组
return Object.values(merged);
}
onBeforeMount(() => {
const tableId = route.query?.tableId;
if (tableId) {
// 获取表详细信息
getGenTable(tableId).then((res) => {
let columnsTmp:TableColumns[]= [];
columnsTmp = res.data.list.filter((item: TableColumns) => {
return !['updated_at', 'deleted_at'].includes(item.columnName);
});
const data: TableDataInfo = res.data.info as TableDataInfo;
data.columns = columnsTmp;
data.overwriteInfo = data.overwriteInfo?mergeArraysByKey([defaultOverwriteInfo,data.overwriteInfo],'key'):defaultOverwriteInfo
info.value = data;
});
} else {
ElMessage.error('参数错误');
}
}); });
// 表单组件验证
const formRulesValidate = (pageRef: string, sonRef: string) => {
return new Promise((resolve,reject) => {
proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
if (valid) {
resolve(valid)
}else{
reject('请将表单填写完整')
}
});
});
};
const onSubmit = () => {
Promise.all([
formRulesValidate('toolsBasicInfoFormRef', 'basicInfoFormRef'),
formRulesValidate('genInfoFormRef', 'genInfoFormRef'),
]).then(() => {
saveEdit(info.value).then(()=>{
ElMessage.success('保存成功');
close();
})
}).catch(e=>{
ElMessage.error(e.toString());
});
};
const goNext = () => {
if (active.value > 2) {
active.value = 1;
} else {
active.value++;
}
};
//取消返回
const close = ()=>{
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
}
</script> </script>
<style scoped> <style scoped>

93
src/views/system/tools/gen/component/genInfoForm.vue
View File

@ -150,64 +150,53 @@
</el-card> </el-card>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent, inject, reactive, ref, unref} from 'vue'; import {defineComponent, inject, reactive, ref, unref} from 'vue';
import type { FormInstance, FormRules } from 'element-plus'; import type { FormInstance, FormRules } from 'element-plus';
import { TableDataInfo } from '/@/views/system/tools/gen/component/model'; import { TableDataInfo } from '/@/views/system/tools/gen/component/model';
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import {Ref, UnwrapRef} from "@vue/reactivity"; 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>>; tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
const rules = reactive<FormRules>({ packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }], moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }], businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }], functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
});
const nextTip = ()=>{
//表单验证
let tag = false;
const formWrap = unref(genInfoFormRef) as any;
if (!formWrap) return false;
formWrap.validate((valid: boolean) => {
if (valid) {
emit('goNext');
tag = true;
} else {
ElMessage.error('请将表单填写完整');
}
});
return tag;
}
const close = ()=>{
emit('close')
}
const getLastSubstring = (str:string):string => {
let lastIndex = str.lastIndexOf('/');
if (lastIndex !== -1) {
return str.substring(lastIndex + 1);
} else {
return str;
}
}
const setModuleName = (value:string)=>{
info.value.moduleName = getLastSubstring(value)
}
return {
genInfoFormRef,
info,
rules,
setModuleName,
nextTip,
close
};
},
}); });
const nextTip = ()=>{
//表单验证
let tag = false;
const formWrap = unref(genInfoFormRef) as any;
if (!formWrap) return false;
formWrap.validate((valid: boolean) => {
if (valid) {
emit('goNext');
tag = true;
} else {
ElMessage.error('请将表单填写完整');
}
});
return tag;
}
const close = ()=>{
emit('close')
}
const getLastSubstring = (str:string):string => {
let lastIndex = str.lastIndexOf('/');
if (lastIndex !== -1) {
return str.substring(lastIndex + 1);
} else {
return str;
}
}
const setModuleName = (value:string)=>{
info.value.moduleName = getLastSubstring(value)
}
defineExpose({nextTip})
</script> </script>
<style scoped> <style scoped>

130
src/views/system/tools/gen/component/importTable.vue
View File

@ -48,85 +48,69 @@
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue"; import {defineComponent, reactive, ref, toRefs} from "vue";
import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model" import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model"
import {getImportTableList, importTable} from "/@/api/system/tools/gen"; import {getImportTableList, importTable} from "/@/api/system/tools/gen";
import {ElMessage} from "element-plus/es"; 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[] = [] tableData:{
const state = reactive<ImportTableDataState>({ data:[],
tableData:{ total:0,
data:[], loading:true,
total:0, param:{
loading:true, pageNum: 1,
param:{ pageSize: 10,
pageNum: 1, tableName: '',
pageSize: 10, tableComment: ''
tableName: '', },
tableComment: ''
},
}
})
const getList = ()=>{
getImportTableList(state.tableData.param).then(res=>{
state.tableData.data = res.data.list??[]
state.tableData.total = res.data.total
})
}
const handleQuery = ()=>{
state.tableData.param.pageNum = 1
getList()
}
const resetQuery=()=>{
queryFormRef.value.resetFields()
getList()
}
const clickRow=(row:TableData)=>{
tableRef.value.toggleRowSelection(row);
}
const handleSelectionChange=(selection:Array<any>)=>{
tables = selection.map(item => item.tableName);
}
const handleImportTable=()=>{
if(tables.length==0){
ElMessage.error("请选择要导入的表格");
return
}
importTable(tables).then((res:any)=>{
if (res.code === 0) {
ElMessage.success('导入成功');
visible.value = false;
emit("ok");
}
})
}
const openDialog = ()=>{
getList()
visible.value = true
}
return {
queryFormRef,
tableRef,
visible,
getList,
handleQuery,
resetQuery,
clickRow,
handleSelectionChange,
handleImportTable,
openDialog,
...toRefs(state),
};
} }
}) })
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 = ()=>{
state.tableData.param.pageNum = 1
getList()
}
const resetQuery=()=>{
queryFormRef.value.resetFields()
getList()
}
const clickRow=(row:TableData)=>{
tableRef.value.toggleRowSelection(row);
}
const handleSelectionChange=(selection:Array<any>)=>{
tables = selection.map(item => item.tableName);
}
const handleImportTable=()=>{
if(tables.length==0){
ElMessage.error("请选择要导入的表格");
return
}
importTable(tables).then((res:any)=>{
if (res.code === 0) {
ElMessage.success('导入成功');
visible.value = false;
emit("ok");
}
})
}
const openDialog = ()=>{
getList()
visible.value = true
}
</script> </script>
<style scoped> <style scoped>

80
src/views/system/tools/gen/component/preview.vue
View File

@ -25,56 +25,48 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted} from "vue"; import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted} from "vue";
import {previewState} from "/@/views/system/tools/gen/component/model"; import {previewState} from "/@/views/system/tools/gen/component/model";
import {showPreview} from "/@/api/system/tools/gen"; import {showPreview} from "/@/api/system/tools/gen";
import MyCodeMirror from "/@/components/myCodeMirror/index.vue"; import MyCodeMirror from "/@/components/myCodeMirror/index.vue";
import { ElLoading } from 'element-plus' 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) flush: true,
// 预览参数 fullscreen: false,
const preview:previewState = reactive({ open: false,
flush: true, title: "代码预览",
fullscreen: false, data: {},
open: false, activeName: "api"
title: "代码预览",
data: {},
activeName: "api"
})
const getWindowInfo = () => {
height.value = document.getElementsByTagName('body')[0].clientHeight-130;
};
const showView = (tableId:number)=>{
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
showPreview(tableId).then((res:any)=>{
preview.data = res.data.data??{}
preview.open = true
loading.close()
}).catch(()=>{
loading.close()
})
}
onMounted(()=>{
height.value = document.getElementsByTagName('body')[0].clientHeight-130;
})
onBeforeMount(()=>{
window.addEventListener('resize', getWindowInfo);
})
return {
showView,
height,
...toRefs(preview)
}
},
}) })
const { data, activeName, fullscreen, open, title}=toRefs(preview)
const getWindowInfo = () => {
height.value = document.getElementsByTagName('body')[0].clientHeight-130;
};
const showView = (tableId:number)=>{
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
showPreview(tableId).then((res:any)=>{
preview.data = res.data.data??{}
preview.open = true
loading.close()
}).catch(()=>{
loading.close()
})
}
onMounted(()=>{
height.value = document.getElementsByTagName('body')[0].clientHeight-130;
})
onBeforeMount(()=>{
window.addEventListener('resize', getWindowInfo);
})
defineExpose({showView})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

134
src/views/system/tools/gen/component/relationTable.vue
View File

@ -66,86 +66,72 @@
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue"; import {defineComponent, reactive, ref, toRefs} from "vue";
import {ImportTableDataState, TableColumns, TableData} from "/@/views/system/tools/gen/component/model" import {ImportTableDataState, TableColumns, TableData} from "/@/views/system/tools/gen/component/model"
import {getRelationTable, importTable} from "/@/api/system/tools/gen"; import {getRelationTable, importTable} from "/@/api/system/tools/gen";
import {ElMessage} from "element-plus/es"; 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>() tableData:{
const state = reactive<ImportTableDataState>({ data:[],
tableData:{ total:0,
data:[], loading:true,
total:0, param:{
loading:true, pageNum: 1,
param:{ pageSize: 10,
pageNum: 1, tableName: '',
pageSize: 10, tableComment: ''
tableName: '', },
tableComment: ''
},
}
})
const getList = ()=>{
getRelationTable(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.data??[]
state.tableData.total = res.data.total
})
}
const handleQuery = ()=>{
state.tableData.param.pageNum = 1
getList()
}
const resetQuery=()=>{
queryFormRef.value.resetFields()
getList()
}
const clickRow=(row:TableColumns)=>{
tableRef.value.toggleRowSelection(row);
}
const handleImportTable=(row:TableColumns)=>{
if(!row.linkLabelId){
ElMessage.error("请选择关联表key")
return
}
if(!row.linkLabelName){
ElMessage.error("请选择关联表value")
return
}
emit("ok",columnId.value,{
linkTableName:row.tableName,
linkLabelId:row.linkLabelId,
linkLabelName:row.linkLabelName
});
visible.value = false;
}
const openDialog = (cid:number)=>{
columnId.value = cid
getList()
visible.value = true
}
return {
queryFormRef,
tableRef,
visible,
getList,
handleQuery,
resetQuery,
clickRow,
handleImportTable,
openDialog,
...toRefs(state),
};
} }
}) })
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 = ()=>{
state.tableData.param.pageNum = 1
getList()
}
const resetQuery=()=>{
queryFormRef.value.resetFields()
getList()
}
const clickRow=(row:TableColumns)=>{
tableRef.value.toggleRowSelection(row);
}
const handleImportTable=(row:TableColumns)=>{
if(!row.linkLabelId){
ElMessage.error("请选择关联表key")
return
}
if(!row.linkLabelName){
ElMessage.error("请选择关联表value")
return
}
emit("ok",columnId.value,{
linkTableName:row.tableName,
linkLabelId:row.linkLabelId,
linkLabelName:row.linkLabelName
});
visible.value = false;
}
const openDialog = (cid:number)=>{
columnId.value = cid
getList()
visible.value = true
}
defineExpose({openDialog})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

99
src/views/system/tools/gen/component/tableColumns.vue
View File

@ -158,16 +158,11 @@
<textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea> <textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="详情占列" width="70"> <el-table-column label="详情占列" width="100">
<template #default="scope"> <template #default="scope">
<textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea> <textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
</template> </template>
</el-table-column> </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"> <el-table-column label="字典类型" width="160">
<template #default="scope"> <template #default="scope">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择"> <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
@ -202,67 +197,51 @@
</div> </div>
</template> </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 type { FormInstance } from 'element-plus';
import {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model'; import {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model';
import {optionselect} from "/@/api/system/dict/type"; import {optionselect} from "/@/api/system/dict/type";
import RelationTable from "/@/views/system/tools/gen/component/relationTable.vue"; import RelationTable from "/@/views/system/tools/gen/component/relationTable.vue";
import importTable from "/@/views/system/tools/gen/component/importTable.vue";
import _ from "lodash"; 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[]>[]) optionselect().then((res:any)=>{
onBeforeMount(()=>{ dictOptions.value = res.data.dictType??[]
//获取字典选项 })
optionselect().then((res:any)=>{ })
dictOptions.value = res.data.dictType??[] const handleChangeConfig = (row:TableColumns)=>{
}) relationTableRef.value.openDialog(row.columnId)
}) }
const handleChangeConfig = (row:TableColumns)=>{ const setRelationTable = (cid:number,data:any)=>{
relationTableRef.value.openDialog(row.columnId) info.value.columns.map((item:TableColumns,index :number)=>{
if(item.columnId===cid){
let d = _.cloneDeep(item)
d.linkTableName = data.linkTableName
d.linkLabelId = data.linkLabelId
d.linkLabelName = data.linkLabelName
info.value.columns[index] = d
} }
const setRelationTable = (cid:number,data:any)=>{ })
info.value.columns.map((item:TableColumns,index :number)=>{ }
if(item.columnId===cid){ const handleRemoveRelation = (row:TableColumns)=>{
let d = _.cloneDeep(item) info.value.columns.map((item:TableColumns,index :number)=>{
d.linkTableName = data.linkTableName if(item.columnId===row.columnId){
d.linkLabelId = data.linkLabelId let d = _.cloneDeep(item)
d.linkLabelName = data.linkLabelName d.linkTableName = ""
info.value.columns[index] = d d.linkLabelId = ""
} d.linkLabelName = ""
}) info.value.columns[index] = d
} }
const handleRemoveRelation = (row:TableColumns)=>{ })
info.value.columns.map((item:TableColumns,index :number)=>{ }
if(item.columnId===row.columnId){
let d = _.cloneDeep(item)
d.linkTableName = ""
d.linkLabelId = ""
d.linkLabelName = ""
info.value.columns[index] = d
}
})
}
return {
relationTableRef,
tableColumnsRef,
info,
tableHeight,
dictOptions,
handleChangeConfig,
setRelationTable,
handleRemoveRelation
};
},
});
</script> </script>
<style scoped> <style scoped>

307
src/views/system/tools/gen/index.vue
View File

@ -100,7 +100,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus'; import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import {getTableList, deleteTables, batchGenCode, syncTable} from "/@/api/system/tools/gen"; import {getTableList, deleteTables, batchGenCode, syncTable} from "/@/api/system/tools/gen";
@ -109,169 +109,146 @@ import importTable from "/@/views/system/tools/gen/component/importTable.vue";
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import genCodePreview from '/@/views/system/tools/gen/component/preview.vue' import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
import {refreshBackEndControlRoutes} from "/@/router/backEnd"; 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() ids:[],
const genCodePreviewRef = ref() // 非单个禁用
const state = reactive<TableDataState>({ single: true,
ids:[], // 非多个禁用
// 非单个禁用 multiple: true,
single: true, tableNames:[],
// 非多个禁用 tableData: {
multiple: true, data: [],
tableNames:[], total: 0,
tableData: { loading: false,
data: [], param: {
total: 0, tableName:'',
loading: false, tableComment:'',
param: { pageNum: 1,
tableName:'', pageSize: 10,
tableComment:'', dateRange: []
pageNum: 1, },
pageSize: 10, },
dateRange: []
},
},
});
// 初始化表格数据
const initTableData = () => {
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) => {
if (!formEl) return
formEl.resetFields()
tableList()
};
// 删除导入的表
const onRowDel = (row: TableData) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除：“${row.tableName}”，是否继续?`
ids = [row.tableId]
}else{
msg = `此操作将永久删除：“${state.tableNames.join(',')}”，是否继续?`
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteTables(ids).then(()=>{
ElMessage.success('删除成功');
tableList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
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)=>{
let msg = '你确定要生成？';
let ids:number[] = [] ;
if(row){
msg = `此操作将生成业务表：“${row.tableName}”相关代码，是否继续?`
ids = [row.tableId]
}else{
msg = `此操作将生成业务表：“${state.tableNames.join(',')}”相关代码，是否继续?`
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要生成的业务表数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
batchGenCode(ids).then(()=>{
ElMessage.success('生成成功');
resetMenuSession()
tableList();
})
})
.catch(() => {});
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
//打开导入页面
const openImportTable=()=>{
importRef.value.openDialog()
}
const handlePreview = (row:TableData)=>{
genCodePreviewRef.value.showView(row.tableId);
}
const handleEditTable=(row:TableData)=>{
const tableId = row?.tableId || state.ids[0];
router.push({ path: "/system/tools/gen/edit", query: { tableId: tableId } });
}
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),
};
},
}); });
const {single,multiple, tableData}=toRefs(state)
// 初始化表格数据
const initTableData = () => {
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) => {
if (!formEl) return
formEl.resetFields()
tableList()
};
// 删除导入的表
const onRowDel = (row: TableData|null) => {
let msg = '你确定要删除所选数据？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除：“${row.tableName}”，是否继续?`
ids = [row.tableId]
}else{
msg = `此操作将永久删除：“${state.tableNames.join(',')}”，是否继续?`
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteTables(ids).then(()=>{
ElMessage.success('删除成功');
tableList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
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|null)=>{
let msg = '你确定要生成？';
let ids:number[] = [] ;
if(row){
msg = `此操作将生成业务表：“${row.tableName}”相关代码，是否继续?`
ids = [row.tableId]
}else{
msg = `此操作将生成业务表：“${state.tableNames.join(',')}”相关代码，是否继续?`
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要生成的业务表数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
batchGenCode(ids).then(()=>{
ElMessage.success('生成成功');
resetMenuSession()
tableList();
})
})
.catch(() => {});
}
// 重置菜单session
const resetMenuSession = () => {
refreshBackEndControlRoutes();
};
//打开导入页面
const openImportTable=()=>{
importRef.value.openDialog()
}
const handlePreview = (row:TableData)=>{
genCodePreviewRef.value.showView(row.tableId);
}
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 tableId = row?.tableId || state.ids[0];
syncTable(tableId).then((res:any)=>{
if (res.code === 0) {
ElMessage.success('同步成功');
}
})
})
</script> </script>

328
src/views/system/user/component/editUser.vue
View File

@ -94,10 +94,10 @@
<el-form-item label="用户类型"> <el-form-item label="用户类型">
<el-radio-group v-model="ruleForm.isAdmin"> <el-radio-group v-model="ruleForm.isAdmin">
<el-radio <el-radio
:label="1" :value="1"
>后台管理员</el-radio> >后台管理员</el-radio>
<el-radio <el-radio
:label="0" :value="0"
>前台用户</el-radio> >前台用户</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -119,180 +119,168 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {reactive, toRefs, onMounted, defineComponent, ref, unref, getCurrentInstance} from 'vue'; import {reactive, toRefs, onMounted, defineComponent, ref, unref, getCurrentInstance} from 'vue';
import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user"; import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
defineOptions({ name: "systemEditUser"})
export default defineComponent({ const props = defineProps({
name: 'systemEditUser', deptData:{
props:{ type:Array,
deptData:{ default:()=>[]
type:Array,
default:()=>[]
},
genderData:{
type:Array,
default:()=>[]
}
}, },
setup(prop,{emit}) { genderData:{
const {proxy} = getCurrentInstance() as any; type:Array,
const roleList = ref([]); default:()=>[]
const postList = ref([]); }
const formRef = ref<HTMLElement | null>(null); })
const state = reactive({ const emit = defineEmits(['getUserList']);
isShowDialog: false, const {proxy} = getCurrentInstance() as any;
ruleForm: { const roleList = ref([]);
userId: 0, const postList = ref([]);
deptId: 0, const formRef = ref<HTMLElement | null>(null);
userName: '', const state = reactive({
nickName: '', isShowDialog: false,
password: '', ruleForm: {
mobile:'', userId: 0,
email: '', deptId: 0,
sex: '', userName: '',
status: 1, nickName: '',
remark: '', password: '',
postIds: [], mobile:'',
roleIds: [], email: '',
isAdmin:0, sex: '',
}, status: 1,
//表单校验 remark: '',
rules: { postIds: [],
userName: [ roleIds: [],
{ required: true, message: "用户名称不能为空", trigger: "blur" } isAdmin:0,
], },
nickName: [ //表单校验
{ required: true, message: "用户昵称不能为空", trigger: "blur" } rules: {
], userName: [
deptId: [ { required: true, message: "用户名称不能为空", trigger: "blur" }
{ required: true, message: "归属部门不能为空", trigger: "blur" } ],
], nickName: [
password: [ { required: true, message: "用户昵称不能为空", trigger: "blur" }
{ required: true, message: "用户密码不能为空", trigger: "blur" } ],
], deptId: [
email: [ { required: true, message: "归属部门不能为空", trigger: "blur" }
{ ],
type: "email", password: [
message: "'请输入正确的邮箱地址", { required: true, message: "用户密码不能为空", trigger: "blur" }
trigger: ["blur", "change"] ],
} email: [
], {
mobile: [ type: "email",
{ required: true, message: "手机号码不能为空", trigger: "blur" }, message: "'请输入正确的邮箱地址",
{ trigger: ["blur", "change"]
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
} }
}); ],
// 打开弹窗 mobile: [
const openDialog = (row?:any) => { { required: true, message: "手机号码不能为空", trigger: "blur" },
resetForm() {
if(row) { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
getEditUser(row.id).then((res:any)=>{ message: "请输入正确的手机号码",
const user = res.data.user; trigger: "blur"
state.ruleForm = {
userId: user.id,
deptId: user.deptId,
userName: user.userName,
nickName: user.userNickname,
password: '-',
mobile:user.mobile,
email: user.userEmail,
sex: String(user.sex),
status: user.userStatus,
remark: user.remark,
postIds: res.data.checkedPosts??[],
roleIds: res.data.checkedRoleIds??[],
isAdmin:user.isAdmin,
};
})
} }
state.isShowDialog = true; ]
}; }
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.userId===0){
//添加
addUser(state.ruleForm).then(()=>{
ElMessage.success('用户添加成功');
closeDialog(); // 关闭弹窗
emit('getUserList')
});
}else{
//修改
editUser(state.ruleForm).then(()=>{
ElMessage.success('用户修改成功');
closeDialog(); // 关闭弹窗
emit('getUserList')
});
}
}
});
};
// 初始化部门数据
const initTableData = () => {
//获取角色岗位选项
getParams().then((res:any)=>{
const roles = res.data.roleList??[];
const roleAccess = res.data.roleAccess??[];
roles.map((item:any)=>{
if(!roleAccess.includes(item.id)){
item.disabled = true
}
})
roleList.value = proxy.handleTree(roles??[], "id","pid","children",true);
postList.value = res.data.posts??[];
});
};
// 页面加载时
onMounted(() => {
initTableData();
});
const resetForm = ()=>{
state.ruleForm = {
userId: 0,
deptId: 0,
userName: '',
nickName: '',
password: '',
mobile:'',
email: '',
sex: '',
status: 1,
remark: '',
postIds: [],
roleIds: [],
isAdmin:0,
}
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
roleList,
postList,
formRef,
...toRefs(state),
};
},
}); });
const { ruleForm, isShowDialog, rules}=toRefs(state)
// 打开弹窗
const openDialog = (row?:any) => {
resetForm()
if(row) {
getEditUser(row.id).then((res:any)=>{
const user = res.data.user;
state.ruleForm = {
userId: user.id,
deptId: user.deptId,
userName: user.userName,
nickName: user.userNickname,
password: '-',
mobile:user.mobile,
email: user.userEmail,
sex: String(user.sex),
status: user.userStatus,
remark: user.remark,
postIds: res.data.checkedPosts??[],
roleIds: res.data.checkedRoleIds??[],
isAdmin:user.isAdmin,
};
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.userId===0){
//添加
addUser(state.ruleForm).then(()=>{
ElMessage.success('用户添加成功');
closeDialog(); // 关闭弹窗
emit('getUserList')
});
}else{
//修改
editUser(state.ruleForm).then(()=>{
ElMessage.success('用户修改成功');
closeDialog(); // 关闭弹窗
emit('getUserList')
});
}
}
});
};
// 初始化部门数据
const initTableData = () => {
//获取角色岗位选项
getParams().then((res:any)=>{
const roles = res.data.roleList??[];
const roleAccess = res.data.roleAccess??[];
roles.map((item:any)=>{
if(!roleAccess.includes(item.id)){
item.disabled = true
}
})
roleList.value = proxy.handleTree(roles??[], "id","pid","children",true);
postList.value = res.data.posts??[];
});
};
// 页面加载时
onMounted(() => {
initTableData();
});
const resetForm = ()=>{
state.ruleForm = {
userId: 0,
deptId: 0,
userName: '',
nickName: '',
password: '',
mobile:'',
email: '',
sex: '',
status: 1,
remark: '',
postIds: [],
roleIds: [],
isAdmin:0,
}
};
defineExpose({openDialog})
</script> </script>

270
src/views/system/user/component/userList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="system-user-list-container"> <div class="system-user-list-container">
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange"> <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" /> <el-table-column type="index" label="序号" width="60" />
@ -40,12 +40,12 @@
v-model:page="tableData.param.pageNum" v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize" v-model:limit="tableData.param.pageSize"
@pagination="userList" @pagination="userList"
/> />
<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/> <EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus'; import {ElMessageBox, ElMessage} from 'element-plus';
import EditUser from '/@/views/system/user/component/editUser.vue'; import EditUser from '/@/views/system/user/component/editUser.vue';
@ -71,146 +71,130 @@ interface TableParam {
keyWords:string; keyWords:string;
dateRange: string[]; dateRange: string[];
} }
export default defineComponent({ defineOptions({ name: "systemUserList"})
name: 'systemUserList', const props = defineProps({
props:{ deptData:{
deptData:{ type:Array,
type:Array, default:()=>[]
default:()=>[] },
}, param:{
param:{ type:Object,
type:Object, default:()=>{}
default:()=>{} },
}, genderData:{
genderData:{ type:Array,
type:Array, default:()=>[]
default:()=>[] }
} })
const {proxy} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const editUserRef = ref();
const state = reactive<TableDataState>({
ids:[],
deptProps:{
id:"deptId",
children: "children",
label: "deptName"
},
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
roleId:undefined,
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
}, },
components: { EditUser },
setup() {
const {proxy,props} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const editUserRef = ref();
const state = reactive<TableDataState>({
ids:[],
deptProps:{
id:"deptId",
children: "children",
label: "deptName"
},
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
roleId:undefined,
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
},
});
// 初始化表格数据
const initTableData = () => {
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 = () => {
editUserRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEditUser = (row:any) => {
editUserRef.value.openDialog(row);
};
// 删除用户
const onRowDel = (row:any) => {
let msg = '你确定要删除所选用户？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteUser(ids).then(()=>{
ElMessage.success('删除成功');
userList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
const handleSelectionChange = (selection:any[])=> {
state.ids = selection.map(item => item.id)
};
/** 重置密码按钮操作 */
const handleResetPwd = (row:any)=> {
ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetUserPwd(row.id, value).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 用户状态修改
const handleStatusChange = (row:any)=> {
let text = row.userStatus === 1 ? "启用" : "停用";
ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeUserStatus(row.id, row.userStatus);
}).then(() => {
ElMessage.success(text + "成功");
}).catch(function() {
row.userStatus =row.userStatus === 0 ?1 : 0;
});
};
return {
editUserRef,
onOpenAddUser,
onOpenEditUser,
onRowDel,
sys_user_sex,
userList,
handleSelectionChange,
handleResetPwd,
handleStatusChange,
...toRefs(state),
};
},
}); });
const { tableData} = toRefs(state);
// 初始化表格数据
const initTableData = () => {
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 = () => {
editUserRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEditUser = (row:any) => {
editUserRef.value.openDialog(row);
};
// 删除用户
const onRowDel = (row:any) => {
let msg = '你确定要删除所选用户？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteUser(ids).then(()=>{
ElMessage.success('删除成功');
userList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
const handleSelectionChange = (selection:any[])=> {
state.ids = selection.map(item => item.id)
};
/** 重置密码按钮操作 */
const handleResetPwd = (row:any)=> {
ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetUserPwd(row.id, value).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 用户状态修改
const handleStatusChange = (row:any)=> {
let text = row.userStatus === 1 ? "启用" : "停用";
ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeUserStatus(row.id, row.userStatus);
}).then(() => {
ElMessage.success(text + "成功");
}).catch(function() {
row.userStatus =row.userStatus === 0 ?1 : 0;
});
};
</script> </script>

178
src/views/system/user/index.vue
View File

@ -5,7 +5,7 @@
<el-card shadow="hover"> <el-card shadow="hover">
<el-aside> <el-aside>
<el-scrollbar> <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 <el-tree
ref="treeRef" ref="treeRef"
class="filter-tree" class="filter-tree"
@ -82,7 +82,7 @@
</el-icon> </el-icon>
新增用户 新增用户
</el-button> </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> <el-icon>
<ele-Delete /> <ele-Delete />
</el-icon> </el-icon>
@ -99,7 +99,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue'; import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
import {ElTree,FormInstance} from 'element-plus'; import {ElTree,FormInstance} from 'element-plus';
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
@ -118,108 +118,88 @@ interface QueryParam {
dateRange: string[]; 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(''); ids:[],
const treeRef = ref<InstanceType<typeof ElTree>>(); deptProps:{
const search = Search id:"deptId",
const state = reactive<QueryParam>({ children: "children",
ids:[], label: "deptName"
deptProps:{ },
id:"deptId", deptData:[
children: "children", {
label: "deptName" label: '集团总部',
}, children: [
deptData:[
{ {
label: '集团总部', label: '曲靖分部',
children: [ children: [
{ {
label: '曲靖分部', label: '总经办',
children: [ },
{ {
label: '总经办', label: '市场部',
}, },
{ {
label: '市场部', label: '研发部',
},
{
label: '研发部',
},
],
}, },
], ],
}, },
], ],
param: { },
deptId:'', ],
mobile:'', param: {
status:'', deptId:'',
keyWords:'', mobile:'',
dateRange:[] status:'',
}, keyWords:'',
}); dateRange:[]
// 初始化表格数据 },
const initTableData = () => {
getDeptTree().then((res:any)=>{
state.deptData = res.data.deps
})
};
const userList = ()=>{
userListRef.value.userList();
};
// 打开新增用户弹窗
const onOpenAddUser = () => {
userListRef.value.onOpenAddUser();
};
// 删除用户
const onRowDel = () => {
userListRef.value.onRowDel(null);
};
// 页面加载时
onMounted(() => {
initTableData();
});
watch(filterText, (val) => {
treeRef.value!.filter(val)
});
const deptFilterNode = (value: string, data:any) => {
if (!value) return true;
return data.deptName.includes(value)
};
// 节点单击事件
const handleNodeClick = (data:any) => {
state.param.deptId = data.deptId;
userList();
};
/** 重置按钮操作 */
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),
};
},
}); });
const { deptData,deptProps,param}=toRefs(state)
// 初始化表格数据
const initTableData = () => {
getDeptTree().then((res:any)=>{
state.deptData = res.data.deps
})
};
const userList = ()=>{
userListRef.value.userList();
};
// 打开新增用户弹窗
const onOpenAddUser = () => {
userListRef.value.onOpenAddUser();
};
// 删除用户
const onRowDel = () => {
userListRef.value.onRowDel(null);
};
// 页面加载时
onMounted(() => {
initTableData();
});
watch(filterText, (val) => {
treeRef.value!.filter(val)
});
const deptFilterNode = (value: string, data:any) => {
if (!value) return true;
return data.deptName.includes(value)
};
// 节点单击事件
const handleNodeClick = (data:any) => {
state.param.deptId = data.deptId;
userList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
userList()
};
</script> </script>

19
src/views/visualizing/demo2.vue
View File

@ -792,7 +792,7 @@ export default defineComponent({
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; 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%; background-size: 100% 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -822,15 +822,6 @@ export default defineComponent({
background-size: 200% 100%; background-size: 200% 100%;
animation: masked-animation 4s infinite linear; 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))); -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 { &::after {
content: ''; content: '';
width: 50%; width: 50%;
@ -1341,4 +1332,12 @@ export default defineComponent({
} }
} }
} }
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style> </style>

3
vite.config.ts
View File

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