fix 更新相关依赖版本，后台管理页面及代码生成页面改为setup语法糖
This commit is contained in:
yxh
parent
b071104e17
commit
66b84ec199
1997
package-lock.json
generated
1997
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
59
package.json
59
package.json
@ -4,66 +4,67 @@
|
||||
"description": "vue3 vite next admin template",
|
||||
"author": "lyt_20201208",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --force",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-javascript": "^6.1.1",
|
||||
"@codemirror/theme-one-dark": "^6.1.0",
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.3.5",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.6.8",
|
||||
"codemirror": "^6.0.1",
|
||||
"countup.js": "^2.6.0",
|
||||
"cropperjs": "^1.5.13",
|
||||
"echarts": "^5.4.2",
|
||||
"countup.js": "^2.8.0",
|
||||
"cropperjs": "^1.6.0",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-wordcloud": "^2.1.0",
|
||||
"element-plus": "^2.6.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsplumb": "^2.15.6",
|
||||
"lodash": "^4.17.21",
|
||||
"mitt": "^3.0.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.34",
|
||||
"pinia": "^2.1.7",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.11.1",
|
||||
"qs": "^6.12.0",
|
||||
"screenfull": "^6.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"sortablejs": "^1.15.2",
|
||||
"spark-md5": "^3.0.2",
|
||||
"splitpanes": "^3.1.5",
|
||||
"vue": "^3.2.47",
|
||||
"vue": "^3.4.21",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-demi": "^0.14.7",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue-i18n": "^9.10.2",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue-simple-uploader": "^1.0.0-beta.5",
|
||||
"vue-ueditor-wrap": "^3.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.15.11",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.15.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
||||
"@typescript-eslint/parser": "^5.58.0",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"@types/node": "^20.11.28",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||
"@typescript-eslint/parser": "^7.2.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/compiler-sfc": "^3.4.21",
|
||||
"dotenv": "^16.0.1",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"prettier": "^2.8.7",
|
||||
"sass": "^1.61.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"prettier": "^3.2.5",
|
||||
"sass": "^1.72.0",
|
||||
"sass-loader": "^13.0.2",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.2.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^5.1.6",
|
||||
"vite-plugin-cdn-import": "^0.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
|
||||
"vue-eslint-parser": "^9.1.1"
|
||||
"vue-eslint-parser": "^9.4.1"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import pinia from '/@/stores/index';
|
||||
@ -18,146 +18,135 @@ import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import Logo from '/@/layout/logo/index.vue';
|
||||
import Vertical from '/@/layout/navMenu/vertical.vue';
|
||||
defineOptions({ name: "layoutAside"})
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutAside',
|
||||
components: { Logo, Vertical },
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
menuList: [],
|
||||
clientWidth: 0,
|
||||
});
|
||||
// 设置菜单展开/收起时的宽度
|
||||
const setCollapseStyle = computed(() => {
|
||||
const { layout, isCollapse, menuBar } = themeConfig.value;
|
||||
const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
|
||||
const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
|
||||
// 判断是否是手机端
|
||||
if (state.clientWidth <= 1000) {
|
||||
if (isCollapse) {
|
||||
document.body.setAttribute('class', 'el-popup-parent--hidden');
|
||||
const asideEle = document.querySelector('.layout-container') as HTMLElement;
|
||||
const modeDivs = document.createElement('div');
|
||||
modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
|
||||
asideEle.appendChild(modeDivs);
|
||||
modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
|
||||
} else {
|
||||
// 关闭弹窗
|
||||
closeLayoutAsideMobileMode();
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
|
||||
}
|
||||
} else {
|
||||
if (layout === 'columns') {
|
||||
// 分栏布局，菜单收起时宽度给 1px
|
||||
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
|
||||
else return [asideBrColor, 'layout-aside-pc-220'];
|
||||
} else {
|
||||
// 其它布局给 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');
|
||||
setTimeout(() => {
|
||||
el?.parentNode?.removeChild(el);
|
||||
}, 300);
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
||||
document.body.setAttribute('class', '');
|
||||
};
|
||||
// 设置显示/隐藏 logo
|
||||
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 filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
// 设置菜单导航是否固定（移动端）
|
||||
const initMenuFixed = (clientWidth: number) => {
|
||||
state.clientWidth = clientWidth;
|
||||
};
|
||||
// 鼠标移入、移出
|
||||
const onAsideEnterLeave = (bool: Boolean) => {
|
||||
let { layout } = themeConfig.value;
|
||||
if (layout !== 'columns') return false;
|
||||
if (!bool) proxy.mittBus.emit('restoreDefault');
|
||||
stores.setColumnsMenuHover(bool);
|
||||
};
|
||||
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||
watch(themeConfig.value, (val) => {
|
||||
if (val.isShowLogoChange !== val.isShowLogo) {
|
||||
if (!proxy.$refs.layoutAsideScrollbarRef) return false;
|
||||
proxy.$refs.layoutAsideScrollbarRef.update();
|
||||
}
|
||||
});
|
||||
// 监听vuex值的变化，动态赋值给菜单中
|
||||
watch(
|
||||
pinia.state,
|
||||
(val) => {
|
||||
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
|
||||
if (layout === 'classic' && isClassicSplitMenu) return false;
|
||||
setFilterRoutes();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initMenuFixed(document.body.clientWidth);
|
||||
setFilterRoutes();
|
||||
// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
|
||||
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
|
||||
proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
|
||||
state.menuList = res.children;
|
||||
});
|
||||
proxy.mittBus.on('setSendClassicChildren', (res: any) => {
|
||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
if (layout === 'classic' && isClassicSplitMenu) {
|
||||
state.menuList = [];
|
||||
state.menuList = res.children;
|
||||
}
|
||||
});
|
||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
initMenuFixed(res.clientWidth);
|
||||
closeLayoutAsideMobileMode();
|
||||
});
|
||||
});
|
||||
return {
|
||||
setCollapseStyle,
|
||||
setShowLogo,
|
||||
isTagsViewCurrenFull,
|
||||
onAsideEnterLeave,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
menuList: [],
|
||||
clientWidth: 0,
|
||||
});
|
||||
const { menuList } = toRefs(state);
|
||||
// 设置菜单展开/收起时的宽度
|
||||
const setCollapseStyle = computed(() => {
|
||||
const { layout, isCollapse, menuBar } = themeConfig.value;
|
||||
const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
|
||||
const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
|
||||
// 判断是否是手机端
|
||||
if (state.clientWidth <= 1000) {
|
||||
if (isCollapse) {
|
||||
document.body.setAttribute('class', 'el-popup-parent--hidden');
|
||||
const asideEle = document.querySelector('.layout-container') as HTMLElement;
|
||||
const modeDivs = document.createElement('div');
|
||||
modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
|
||||
asideEle.appendChild(modeDivs);
|
||||
modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
|
||||
} else {
|
||||
// 关闭弹窗
|
||||
closeLayoutAsideMobileMode();
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
|
||||
}
|
||||
} else {
|
||||
if (layout === 'columns') {
|
||||
// 分栏布局，菜单收起时宽度给 1px
|
||||
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
|
||||
else return [asideBrColor, 'layout-aside-pc-220'];
|
||||
} else {
|
||||
// 其它布局给 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');
|
||||
setTimeout(() => {
|
||||
el?.parentNode?.removeChild(el);
|
||||
}, 300);
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
||||
document.body.setAttribute('class', '');
|
||||
};
|
||||
// 设置显示/隐藏 logo
|
||||
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 filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
// 设置菜单导航是否固定（移动端）
|
||||
const initMenuFixed = (clientWidth: number) => {
|
||||
state.clientWidth = clientWidth;
|
||||
};
|
||||
// 鼠标移入、移出
|
||||
const onAsideEnterLeave = (bool: Boolean) => {
|
||||
let { layout } = themeConfig.value;
|
||||
if (layout !== 'columns') return false;
|
||||
if (!bool) proxy.mittBus.emit('restoreDefault');
|
||||
stores.setColumnsMenuHover(bool);
|
||||
};
|
||||
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||
watch(themeConfig.value, (val) => {
|
||||
if (val.isShowLogoChange !== val.isShowLogo) {
|
||||
if (!proxy.$refs.layoutAsideScrollbarRef) return false;
|
||||
proxy.$refs.layoutAsideScrollbarRef.update();
|
||||
}
|
||||
});
|
||||
// 监听vuex值的变化，动态赋值给菜单中
|
||||
watch(
|
||||
pinia.state,
|
||||
(val) => {
|
||||
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
|
||||
if (layout === 'classic' && isClassicSplitMenu) return false;
|
||||
setFilterRoutes();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
initMenuFixed(document.body.clientWidth);
|
||||
setFilterRoutes();
|
||||
// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
|
||||
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
|
||||
proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
|
||||
state.menuList = res.children;
|
||||
});
|
||||
proxy.mittBus.on('setSendClassicChildren', (res: any) => {
|
||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
if (layout === 'classic' && isClassicSplitMenu) {
|
||||
state.menuList = [];
|
||||
state.menuList = res.children;
|
||||
}
|
||||
});
|
||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
initMenuFixed(res.clientWidth);
|
||||
closeLayoutAsideMobileMode();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, ref, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
|
||||
import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@ -62,167 +62,153 @@ interface ColumnsAsideState {
|
||||
difference: number;
|
||||
routeSplit: string[];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutColumnsAside',
|
||||
setup() {
|
||||
const columnsAsideOffsetTopRefs: any = ref([]);
|
||||
const columnsAsideActiveRef = ref();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const state = reactive<ColumnsAsideState>({
|
||||
columnsAsideList: [],
|
||||
liIndex: 0,
|
||||
liOldIndex: null,
|
||||
liHoverIndex: null,
|
||||
liOldPath: null,
|
||||
difference: 0,
|
||||
routeSplit: [],
|
||||
});
|
||||
// 设置菜单高亮位置移动
|
||||
const setColumnsAsideMove = (k: number) => {
|
||||
state.liIndex = k;
|
||||
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
||||
};
|
||||
// 菜单高亮点击事件
|
||||
const onColumnsAsideMenuClick = (v: Object, k: number) => {
|
||||
setColumnsAsideMove(k);
|
||||
let { path, redirect } = v as any;
|
||||
if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
};
|
||||
// 鼠标移入时，显示当前的子级菜单
|
||||
const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
||||
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
|
||||
let { path } = v;
|
||||
state.liOldPath = path;
|
||||
state.liOldIndex = k;
|
||||
state.liHoverIndex = k;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
||||
stores.setColumnsMenuHover(false);
|
||||
stores.setColumnsNavHover(true);
|
||||
};
|
||||
// 鼠标移走时，显示原来的子级菜单
|
||||
const onColumnsAsideMenuMouseleave = async () => {
|
||||
await stores.setColumnsNavHover(false);
|
||||
// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
|
||||
setTimeout(() => {
|
||||
if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
|
||||
}, 100);
|
||||
};
|
||||
// 设置高亮动态位置
|
||||
const onColumnsAsideDown = (k: number) => {
|
||||
nextTick(() => {
|
||||
setColumnsAsideMove(k);
|
||||
});
|
||||
};
|
||||
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
||||
const setFilterRoutes = () => {
|
||||
state.columnsAsideList = filterRoutesFun(routesList.value);
|
||||
const resData: any = setSendChildren(route.path);
|
||||
if (Object.keys(resData).length <= 0) return false;
|
||||
onColumnsAsideDown(resData.item[0].k);
|
||||
proxy.mittBus.emit('setSendColumnsChildren', resData);
|
||||
};
|
||||
// 传送当前子级数据到菜单中
|
||||
const setSendChildren = (path: string) => {
|
||||
let currentData: any = {};
|
||||
state.columnsAsideList.some((v:any,k:number)=>{
|
||||
if(v.children){
|
||||
v.children.some((sv:any)=>{
|
||||
if(sv.path===path){
|
||||
v['k'] = k;
|
||||
currentData['item'] = [{ ...v }];
|
||||
currentData['children'] = [{ ...v }];
|
||||
if (v.children) currentData['children'] = v.children;
|
||||
return true
|
||||
}
|
||||
})
|
||||
defineOptions({ name: "layoutColumnsAside"})
|
||||
const columnsAsideOffsetTopRefs: any = ref([]);
|
||||
const columnsAsideActiveRef = ref();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const state = reactive<ColumnsAsideState>({
|
||||
columnsAsideList: [],
|
||||
liIndex: 0,
|
||||
liOldIndex: null,
|
||||
liHoverIndex: null,
|
||||
liOldPath: null,
|
||||
difference: 0,
|
||||
routeSplit: [],
|
||||
});
|
||||
const { columnsAsideList, liIndex, liHoverIndex} = toRefs(state);
|
||||
// 设置菜单高亮位置移动
|
||||
const setColumnsAsideMove = (k: number) => {
|
||||
state.liIndex = k;
|
||||
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
||||
};
|
||||
// 菜单高亮点击事件
|
||||
const onColumnsAsideMenuClick = (v: Object, k: number) => {
|
||||
setColumnsAsideMove(k);
|
||||
let { path, redirect } = v as any;
|
||||
if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
};
|
||||
// 鼠标移入时，显示当前的子级菜单
|
||||
const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
||||
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
|
||||
let { path } = v;
|
||||
state.liOldPath = path;
|
||||
state.liOldIndex = k;
|
||||
state.liHoverIndex = k;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
||||
stores.setColumnsMenuHover(false);
|
||||
stores.setColumnsNavHover(true);
|
||||
};
|
||||
// 鼠标移走时，显示原来的子级菜单
|
||||
const onColumnsAsideMenuMouseleave = async () => {
|
||||
await stores.setColumnsNavHover(false);
|
||||
// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
|
||||
setTimeout(() => {
|
||||
if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
|
||||
}, 100);
|
||||
};
|
||||
// 设置高亮动态位置
|
||||
const onColumnsAsideDown = (k: number) => {
|
||||
nextTick(() => {
|
||||
setColumnsAsideMove(k);
|
||||
});
|
||||
};
|
||||
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
||||
const setFilterRoutes = () => {
|
||||
state.columnsAsideList = filterRoutesFun(routesList.value);
|
||||
const resData: any = setSendChildren(route.path);
|
||||
if (Object.keys(resData).length <= 0) return false;
|
||||
onColumnsAsideDown(resData.item[0].k);
|
||||
proxy.mittBus.emit('setSendColumnsChildren', resData);
|
||||
};
|
||||
// 传送当前子级数据到菜单中
|
||||
const setSendChildren = (path: string) => {
|
||||
let currentData: any = {};
|
||||
state.columnsAsideList.some((v:any,k:number)=>{
|
||||
if(v.children){
|
||||
v.children.some((sv:any)=>{
|
||||
if(sv.path===path){
|
||||
v['k'] = k;
|
||||
currentData['item'] = [{ ...v }];
|
||||
currentData['children'] = [{ ...v }];
|
||||
if (v.children) currentData['children'] = v.children;
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
return currentData;
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
|
||||
const setColumnsMenuHighlight = (path: string) => {
|
||||
const currentSplitRoute = state.columnsAsideList.some((v:any)=>{
|
||||
if(v.children){
|
||||
v.children.some((sv:any)=>{
|
||||
if(sv.path===path){
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
return false
|
||||
})
|
||||
return currentData;
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
item = Object.assign({}, item);
|
||||
if (item.children) item.children = filterRoutesFun(item.children);
|
||||
return item;
|
||||
});
|
||||
};
|
||||
// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
|
||||
const setColumnsMenuHighlight = (path: string) => {
|
||||
const currentSplitRoute = state.columnsAsideList.some((v:any)=>{
|
||||
if(v.children){
|
||||
v.children.some((sv:any)=>{
|
||||
if(sv.path===path){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (!currentSplitRoute) return false;
|
||||
// 延迟拿值，防止取不到
|
||||
setTimeout(() => {
|
||||
onColumnsAsideDown((<any>currentSplitRoute).k);
|
||||
}, 0);
|
||||
};
|
||||
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
|
||||
watch(
|
||||
pinia.state,
|
||||
(val) => {
|
||||
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
||||
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
||||
state.liHoverIndex = null;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
||||
} else {
|
||||
state.liHoverIndex = state.liOldIndex;
|
||||
if (!state.liOldPath) return false;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
setFilterRoutes();
|
||||
// 销毁变量，防止鼠标再次移入时，保留了上次的记录
|
||||
proxy.mittBus.on('restoreDefault', () => {
|
||||
state.liOldIndex = null;
|
||||
state.liOldPath = null;
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('restoreDefault', () => {});
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
setColumnsMenuHighlight(to.path);
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
|
||||
});
|
||||
return {
|
||||
themeConfig,
|
||||
columnsAsideOffsetTopRefs,
|
||||
columnsAsideActiveRef,
|
||||
onColumnsAsideDown,
|
||||
onColumnsAsideMenuClick,
|
||||
onColumnsAsideMenuMouseenter,
|
||||
onColumnsAsideMenuMouseleave,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (!currentSplitRoute) return false;
|
||||
// 延迟拿值，防止取不到
|
||||
setTimeout(() => {
|
||||
onColumnsAsideDown((<any>currentSplitRoute).k);
|
||||
}, 0);
|
||||
};
|
||||
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
|
||||
watch(
|
||||
pinia.state,
|
||||
(val) => {
|
||||
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
||||
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
||||
state.liHoverIndex = null;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
||||
} else {
|
||||
state.liHoverIndex = state.liOldIndex;
|
||||
if (!state.liOldPath) return false;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
setFilterRoutes();
|
||||
// 销毁变量，防止鼠标再次移入时，保留了上次的记录
|
||||
proxy.mittBus.on('restoreDefault', () => {
|
||||
state.liOldIndex = null;
|
||||
state.liOldPath = null;
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('restoreDefault', () => {});
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
setColumnsMenuHighlight(to.path);
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,31 +4,21 @@
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import NavBarsIndex from '/@/layout/navBars/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutHeader',
|
||||
components: { NavBarsIndex },
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置 header 的高度
|
||||
const setHeaderHeight = computed(() => {
|
||||
let { isTagsview, layout } = themeConfig.value;
|
||||
if (isTagsview && layout !== 'classic') return '84px';
|
||||
else return '50px';
|
||||
});
|
||||
return {
|
||||
setHeaderHeight,
|
||||
isTagsViewCurrenFull,
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutHeader"})
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
// 设置 header 的高度
|
||||
const setHeaderHeight = computed(() => {
|
||||
let { isTagsview, layout } = themeConfig.value;
|
||||
if (isTagsview && layout !== 'classic') return '84px';
|
||||
else return '50px';
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
@ -33,69 +33,59 @@ interface MainState {
|
||||
headerHeight: string | number;
|
||||
currentRouteMeta: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutMain',
|
||||
components: { LayoutParentView, Footer },
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutMain"})
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const state = reactive<MainState>({
|
||||
headerHeight: '',
|
||||
currentRouteMeta: {},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -7,29 +7,19 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import { onBeforeRouteUpdate } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutFooter',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isDelayFooter: true,
|
||||
});
|
||||
// 路由改变时，等主界面动画加载完毕再显示 footer
|
||||
onBeforeRouteUpdate(() => {
|
||||
setTimeout(() => {
|
||||
state.isDelayFooter = false;
|
||||
setTimeout(() => {
|
||||
state.isDelayFooter = true;
|
||||
}, 800);
|
||||
}, 0);
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import {onBeforeRouteUpdate} from 'vue-router';
|
||||
defineOptions({ name: "layoutFooter"})
|
||||
const isDelayFooter = ref(true)
|
||||
// 路由改变时，等主界面动画加载完毕再显示 footer
|
||||
onBeforeRouteUpdate(() => {
|
||||
setTimeout(() => {
|
||||
isDelayFooter.value = false;
|
||||
setTimeout(() => {
|
||||
isDelayFooter.value = true;
|
||||
}, 800);
|
||||
}, 0);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
import { Local } from '/@/utils/storage';
|
||||
@ -84,134 +84,123 @@ interface LockScreenState {
|
||||
isShowLockScreenIntervalTime: number;
|
||||
lockScreenPassword: string;
|
||||
}
|
||||
defineOptions({ name: "layoutLockScreen"})
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutLockScreen',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const layoutLockScreenInputRef = ref();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<LockScreenState>({
|
||||
transparency: 1,
|
||||
downClientY: 0,
|
||||
moveDifference: 0,
|
||||
isShowLoockLogin: false,
|
||||
isFlags: false,
|
||||
querySelectorEl: '',
|
||||
time: {
|
||||
hm: '',
|
||||
s: '',
|
||||
mdq: '',
|
||||
},
|
||||
setIntervalTime: 0,
|
||||
isShowLockScreen: false,
|
||||
isShowLockScreenIntervalTime: 0,
|
||||
lockScreenPassword: '',
|
||||
});
|
||||
// 鼠标按下
|
||||
const onDown = (down: any) => {
|
||||
state.isFlags = true;
|
||||
state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
|
||||
};
|
||||
// 鼠标移动
|
||||
const onMove = (move: any) => {
|
||||
if (state.isFlags) {
|
||||
const el = <HTMLElement>state.querySelectorEl;
|
||||
const opacitys = (state.transparency -= 1 / 200);
|
||||
if (move.touches) {
|
||||
state.moveDifference = move.touches[0].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 < -400) {
|
||||
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
|
||||
state.moveDifference = -el.clientHeight;
|
||||
setTimeout(() => {
|
||||
el && el.parentNode?.removeChild(el);
|
||||
}, 300);
|
||||
}
|
||||
if (state.moveDifference === -el.clientHeight) {
|
||||
state.isShowLoockLogin = true;
|
||||
layoutLockScreenInputRef.value.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
// 鼠标松开
|
||||
const onEnd = () => {
|
||||
state.isFlags = false;
|
||||
state.transparency = 1;
|
||||
if (state.moveDifference >= -400) {
|
||||
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
|
||||
}
|
||||
};
|
||||
// 获取要拖拽的初始元素
|
||||
const initGetElement = () => {
|
||||
nextTick(() => {
|
||||
state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
|
||||
});
|
||||
};
|
||||
// 时间初始化
|
||||
const initTime = () => {
|
||||
state.time.hm = formatDate(new Date(), 'HH:MM');
|
||||
state.time.s = formatDate(new Date(), 'SS');
|
||||
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
|
||||
};
|
||||
// 时间初始化定时器
|
||||
const initSetTime = () => {
|
||||
initTime();
|
||||
state.setIntervalTime = window.setInterval(() => {
|
||||
initTime();
|
||||
}, 1000);
|
||||
};
|
||||
// 锁屏时间定时器
|
||||
const initLockScreen = () => {
|
||||
if (themeConfig.value.isLockScreen) {
|
||||
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
||||
if (themeConfig.value.lockScreenTime <= 1) {
|
||||
state.isShowLockScreen = true;
|
||||
setLocalThemeConfig();
|
||||
return false;
|
||||
}
|
||||
themeConfig.value.lockScreenTime--;
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(state.isShowLockScreenIntervalTime);
|
||||
}
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
themeConfig.value.isDrawer = false;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
// 密码输入点击事件
|
||||
const onLockScreenSubmit = () => {
|
||||
themeConfig.value.isLockScreen = false;
|
||||
themeConfig.value.lockScreenTime = 30;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetElement();
|
||||
initSetTime();
|
||||
initLockScreen();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(state.setIntervalTime);
|
||||
window.clearInterval(state.isShowLockScreenIntervalTime);
|
||||
});
|
||||
return {
|
||||
layoutLockScreenInputRef,
|
||||
onDown,
|
||||
onMove,
|
||||
onEnd,
|
||||
onLockScreenSubmit,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const layoutLockScreenInputRef = ref();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<LockScreenState>({
|
||||
transparency: 1,
|
||||
downClientY: 0,
|
||||
moveDifference: 0,
|
||||
isShowLoockLogin: false,
|
||||
isFlags: false,
|
||||
querySelectorEl: '',
|
||||
time: {
|
||||
hm: '',
|
||||
s: '',
|
||||
mdq: '',
|
||||
},
|
||||
setIntervalTime: 0,
|
||||
isShowLockScreen: false,
|
||||
isShowLockScreenIntervalTime: 0,
|
||||
lockScreenPassword: '',
|
||||
});
|
||||
const { isShowLockScreen, lockScreenPassword,isShowLoockLogin,time} = toRefs(state);
|
||||
// 鼠标按下
|
||||
const onDown = (down: any) => {
|
||||
state.isFlags = true;
|
||||
state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
|
||||
};
|
||||
// 鼠标移动
|
||||
const onMove = (move: any) => {
|
||||
if (state.isFlags) {
|
||||
const el = <HTMLElement>state.querySelectorEl;
|
||||
const opacitys = (state.transparency -= 1 / 200);
|
||||
if (move.touches) {
|
||||
state.moveDifference = move.touches[0].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 < -400) {
|
||||
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
|
||||
state.moveDifference = -el.clientHeight;
|
||||
setTimeout(() => {
|
||||
el && el.parentNode?.removeChild(el);
|
||||
}, 300);
|
||||
}
|
||||
if (state.moveDifference === -el.clientHeight) {
|
||||
state.isShowLoockLogin = true;
|
||||
layoutLockScreenInputRef.value.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
// 鼠标松开
|
||||
const onEnd = () => {
|
||||
state.isFlags = false;
|
||||
state.transparency = 1;
|
||||
if (state.moveDifference >= -400) {
|
||||
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
|
||||
}
|
||||
};
|
||||
// 获取要拖拽的初始元素
|
||||
const initGetElement = () => {
|
||||
nextTick(() => {
|
||||
state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
|
||||
});
|
||||
};
|
||||
// 时间初始化
|
||||
const initTime = () => {
|
||||
state.time.hm = formatDate(new Date(), 'HH:MM');
|
||||
state.time.s = formatDate(new Date(), 'SS');
|
||||
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
|
||||
};
|
||||
// 时间初始化定时器
|
||||
const initSetTime = () => {
|
||||
initTime();
|
||||
state.setIntervalTime = window.setInterval(() => {
|
||||
initTime();
|
||||
}, 1000);
|
||||
};
|
||||
// 锁屏时间定时器
|
||||
const initLockScreen = () => {
|
||||
if (themeConfig.value.isLockScreen) {
|
||||
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
||||
if (themeConfig.value.lockScreenTime <= 1) {
|
||||
state.isShowLockScreen = true;
|
||||
setLocalThemeConfig();
|
||||
return false;
|
||||
}
|
||||
themeConfig.value.lockScreenTime--;
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(state.isShowLockScreenIntervalTime);
|
||||
}
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
themeConfig.value.isDrawer = false;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
// 密码输入点击事件
|
||||
const onLockScreenSubmit = () => {
|
||||
themeConfig.value.isLockScreen = false;
|
||||
themeConfig.value.lockScreenTime = 30;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetElement();
|
||||
initSetTime();
|
||||
initLockScreen();
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(state.setIntervalTime);
|
||||
window.clearInterval(state.isShowLockScreenIntervalTime);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -8,36 +8,25 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
|
||||
import logoMini from '/@/assets/logo-mini.svg';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutLogo',
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
// 设置 logo 的显示。classic 经典布局默认显示 logo
|
||||
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,
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutLogo"})
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
// 设置 logo 的显示。classic 经典布局默认显示 logo
|
||||
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;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
@ -20,16 +20,7 @@ import Aside from '/@/layout/component/aside.vue';
|
||||
import Header from '/@/layout/component/header.vue';
|
||||
import Main from '/@/layout/component/main.vue';
|
||||
import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutClassic',
|
||||
components: { Aside, Header, Main, TagsView },
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
return {
|
||||
themeConfig,
|
||||
};
|
||||
},
|
||||
});
|
||||
defineOptions({ name: "layoutClassic"})
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
</script>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
@ -23,19 +23,11 @@ import Aside from '/@/layout/component/aside.vue';
|
||||
import Header from '/@/layout/component/header.vue';
|
||||
import Main from '/@/layout/component/main.vue';
|
||||
import ColumnsAside from '/@/layout/component/columnsAside.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutColumns',
|
||||
components: { Aside, Header, Main, ColumnsAside },
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const isFixedHeader = computed(() => {
|
||||
return themeConfig.value.isFixedHeader;
|
||||
});
|
||||
return {
|
||||
isFixedHeader,
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutColumns"})
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const isFixedHeader = computed(() => {
|
||||
return themeConfig.value.isFixedHeader;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {computed, getCurrentInstance, watch, defineComponent, ref} from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@ -20,29 +20,19 @@ import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import layoutAside from '/@/layout/component/aside.vue';
|
||||
import layoutHeader from '/@/layout/component/header.vue';
|
||||
import layoutMain from '/@/layout/component/main.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutDefaults',
|
||||
components: { layoutAside, layoutHeader, layoutMain },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const layoutDefaultsScrollbarRef = ref()
|
||||
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,
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutDefaults"})
|
||||
const route = useRoute();
|
||||
const layoutDefaultsScrollbarRef = ref()
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const isFixedHeader = computed(() => {
|
||||
return themeConfig.value.isFixedHeader;
|
||||
});
|
||||
// 监听路由的变化
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
layoutDefaultsScrollbarRef.value.wrapRef.scrollTop = 0;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -6,12 +6,8 @@
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import Header from '/@/layout/component/header.vue';
|
||||
import Main from '/@/layout/component/main.vue';
|
||||
|
||||
export default {
|
||||
name: 'layoutTransverse',
|
||||
components: { Header, Main },
|
||||
};
|
||||
defineOptions({ name: "layoutTransverse"})
|
||||
</script>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||
import { Local } from '/@/utils/storage';
|
||||
@ -31,7 +31,6 @@ import other from '/@/utils/other';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useRoutesList } from '/@/stores/routesList';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface BreadcrumbState {
|
||||
breadcrumbList: Array<any>;
|
||||
@ -40,85 +39,75 @@ interface BreadcrumbState {
|
||||
routeSplitIndex: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutBreadcrumb',
|
||||
setup() {
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const state = reactive<BreadcrumbState>({
|
||||
breadcrumbList: [],
|
||||
routeSplit: [],
|
||||
routeSplitFirst: '',
|
||||
routeSplitIndex: 1,
|
||||
});
|
||||
// 动态设置经典、横向布局不显示
|
||||
const isShowBreadcrumb = computed(() => {
|
||||
initRouteSplit(route.path);
|
||||
const { layout, isBreadcrumb } = themeConfig.value;
|
||||
if (layout === 'classic' || layout === 'transverse') return false;
|
||||
else return isBreadcrumb ? true : false;
|
||||
});
|
||||
// 面包屑点击时
|
||||
const onBreadcrumbClick = (v: any) => {
|
||||
const { redirect, path } = v;
|
||||
if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
};
|
||||
// 展开/收起左侧菜单点击
|
||||
const onThemeConfigChange = () => {
|
||||
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
Local.remove('themeConfig');
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
// 处理面包屑数据
|
||||
const getBreadcrumbList = (arr: Array<string>) => {
|
||||
arr.forEach((item: any) => {
|
||||
state.routeSplit.forEach((v: any, k: number, arrs: any) => {
|
||||
if (state.routeSplitFirst === item.path) {
|
||||
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
|
||||
state.breadcrumbList.push(item);
|
||||
state.routeSplitIndex++;
|
||||
if (item.children) getBreadcrumbList(item.children);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 当前路由字符串切割成数组，并删除第一项空内容
|
||||
const initRouteSplit = (path: string) => {
|
||||
if (!themeConfig.value.isBreadcrumb) return false;
|
||||
state.breadcrumbList = [routesList.value[0]];
|
||||
state.routeSplit = path.split('/');
|
||||
state.routeSplit.shift();
|
||||
state.routeSplitFirst = `/${state.routeSplit[0]}`;
|
||||
state.routeSplitIndex = 1;
|
||||
getBreadcrumbList(routesList.value);
|
||||
if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
|
||||
if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initRouteSplit(route.path);
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
initRouteSplit(to.path);
|
||||
});
|
||||
return {
|
||||
onThemeConfigChange,
|
||||
isShowBreadcrumb,
|
||||
themeConfig,
|
||||
onBreadcrumbClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutBreadcrumb"})
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const state = reactive<BreadcrumbState>({
|
||||
breadcrumbList: [],
|
||||
routeSplit: [],
|
||||
routeSplitFirst: '',
|
||||
routeSplitIndex: 1,
|
||||
});
|
||||
const {breadcrumbList}= toRefs(state);
|
||||
// 动态设置经典、横向布局不显示
|
||||
const isShowBreadcrumb = computed(() => {
|
||||
initRouteSplit(route.path);
|
||||
const { layout, isBreadcrumb } = themeConfig.value;
|
||||
if (layout === 'classic' || layout === 'transverse') return false;
|
||||
else return isBreadcrumb ? true : false;
|
||||
});
|
||||
// 面包屑点击时
|
||||
const onBreadcrumbClick = (v: any) => {
|
||||
const { redirect, path } = v;
|
||||
if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
};
|
||||
// 展开/收起左侧菜单点击
|
||||
const onThemeConfigChange = () => {
|
||||
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
Local.remove('themeConfig');
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
};
|
||||
// 处理面包屑数据
|
||||
const getBreadcrumbList = (arr: Array<string>) => {
|
||||
arr.forEach((item: any) => {
|
||||
state.routeSplit.forEach((v: any, k: number, arrs: any) => {
|
||||
if (state.routeSplitFirst === item.path) {
|
||||
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
|
||||
state.breadcrumbList.push(item);
|
||||
state.routeSplitIndex++;
|
||||
if (item.children) getBreadcrumbList(item.children);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 当前路由字符串切割成数组，并删除第一项空内容
|
||||
const initRouteSplit = (path: string) => {
|
||||
if (!themeConfig.value.isBreadcrumb) return false;
|
||||
state.breadcrumbList = [routesList.value[0]];
|
||||
state.routeSplit = path.split('/');
|
||||
state.routeSplit.shift();
|
||||
state.routeSplitFirst = `/${state.routeSplit[0]}`;
|
||||
state.routeSplitIndex = 1;
|
||||
getBreadcrumbList(routesList.value);
|
||||
if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
|
||||
if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initRouteSplit(route.path);
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
initRouteSplit(to.path);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,26 +6,17 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia';
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@ -22,89 +22,79 @@ import Horizontal from '/@/layout/navMenu/horizontal.vue';
|
||||
interface IndexState {
|
||||
menuList: object[];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutBreadcrumbIndex',
|
||||
components: { Breadcrumb, User, Logo, Horizontal },
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const route = useRoute();
|
||||
const state = reactive<IndexState>({
|
||||
menuList: [],
|
||||
});
|
||||
// 设置 logo 显示/隐藏
|
||||
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 setFilterRoutes = () => {
|
||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
if (layout === 'classic' && isClassicSplitMenu) {
|
||||
state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
|
||||
const resData = setSendClassicChildren(route.path);
|
||||
proxy.mittBus.emit('setSendClassicChildren', resData);
|
||||
} else {
|
||||
state.menuList = filterRoutesFun(routesList.value);
|
||||
}
|
||||
};
|
||||
// 设置了分割菜单时，删除底下 children
|
||||
const delClassicChildren = (arr: Array<object>) => {
|
||||
arr.map((v: any) => {
|
||||
if (v.children) delete v.children;
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
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 = {};
|
||||
filterRoutesFun(routesList.value).map((v, k) => {
|
||||
if (v.path === `/${currentPathSplit[1]}`) {
|
||||
v['k'] = k;
|
||||
currentData['item'] = [{ ...v }];
|
||||
currentData['children'] = [{ ...v }];
|
||||
if (v.children) currentData['children'] = v.children;
|
||||
}
|
||||
});
|
||||
return currentData;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
setFilterRoutes();
|
||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
|
||||
});
|
||||
return {
|
||||
setIsShowLogo,
|
||||
isLayoutTransverse,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutBreadcrumbIndex"})
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const stores = useRoutesList();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const route = useRoute();
|
||||
const state = reactive<IndexState>({
|
||||
menuList: [],
|
||||
});
|
||||
const { menuList } = toRefs(state);
|
||||
// 设置 logo 显示/隐藏
|
||||
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 setFilterRoutes = () => {
|
||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
if (layout === 'classic' && isClassicSplitMenu) {
|
||||
state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
|
||||
const resData = setSendClassicChildren(route.path);
|
||||
proxy.mittBus.emit('setSendClassicChildren', resData);
|
||||
} else {
|
||||
state.menuList = filterRoutesFun(routesList.value);
|
||||
}
|
||||
};
|
||||
// 设置了分割菜单时，删除底下 children
|
||||
const delClassicChildren = (arr: Array<object>) => {
|
||||
arr.map((v: any) => {
|
||||
if (v.children) delete v.children;
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<string>) => {
|
||||
return arr
|
||||
.filter((item: any) => !item.meta.isHide)
|
||||
.map((item: any) => {
|
||||
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 = {};
|
||||
filterRoutesFun(routesList.value).map((v, k) => {
|
||||
if (v.path === `/${currentPathSplit[1]}`) {
|
||||
v['k'] = k;
|
||||
currentData['item'] = [{ ...v }];
|
||||
currentData['children'] = [{ ...v }];
|
||||
if (v.children) currentData['children'] = v.children;
|
||||
}
|
||||
});
|
||||
return currentData;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
setFilterRoutes();
|
||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||
setFilterRoutes();
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@ -44,80 +44,68 @@ interface Restaurant {
|
||||
title: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutBreadcrumbSearch',
|
||||
setup() {
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
|
||||
const layoutMenuAutocompleteRef = ref();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const state = reactive<SearchState>({
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutBreadcrumbSearch"})
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
|
||||
const layoutMenuAutocompleteRef = ref();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const state = reactive<SearchState>({
|
||||
isShowSearch: false,
|
||||
menuQuery: '',
|
||||
tagsViewList: [],
|
||||
});
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -407,8 +407,18 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
defineComponent,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
ref
|
||||
} from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
@ -418,260 +428,227 @@ import { Local } from '/@/utils/storage';
|
||||
import Watermark from '/@/utils/wartermark';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
import other from '/@/utils/other';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutBreadcrumbSeting',
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive({
|
||||
isMobile: false,
|
||||
});
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return themeConfig.value;
|
||||
});
|
||||
// 1、全局主题
|
||||
const onColorPickerChange = () => {
|
||||
if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
|
||||
// 颜色加深
|
||||
document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
|
||||
document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
|
||||
// 颜色变浅
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
|
||||
}
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 2、菜单 / 顶栏
|
||||
const onBgColorPickerChange = (bg: string) => {
|
||||
document.documentElement.style.setProperty(`--next-bg-${bg}`, (<any>getThemeConfig.value)[bg]);
|
||||
if (bg === 'menuBar') {
|
||||
document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, <any>getLightColor(getThemeConfig.value.menuBar, 0.05));
|
||||
}
|
||||
onTopBarGradualChange();
|
||||
onMenuBarGradualChange();
|
||||
onColumnsMenuBarGradualChange();
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||
const onTopBarGradualChange = () => {
|
||||
setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||
const onMenuBarGradualChange = () => {
|
||||
setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||
const onColumnsMenuBarGradualChange = () => {
|
||||
setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 背景渐变函数
|
||||
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
||||
setTimeout(() => {
|
||||
let els = document.querySelector(el);
|
||||
if (!els) return false;
|
||||
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;`);
|
||||
else els.setAttribute('style', ``);
|
||||
setLocalThemeConfig();
|
||||
}, 200);
|
||||
};
|
||||
// 3、界面设置 --> 菜单水平折叠
|
||||
const onThemeConfigChange = () => {
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 固定 Header
|
||||
const onIsFixedHeaderChange = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 经典布局分割菜单
|
||||
const onClassicSplitMenuChange = () => {
|
||||
getThemeConfig.value.isBreadcrumb = false;
|
||||
setLocalThemeConfig();
|
||||
proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
|
||||
};
|
||||
// 4、界面显示 --> 侧边栏 Logo
|
||||
const onIsShowLogoChange = () => {
|
||||
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 面包屑 Breadcrumb
|
||||
const onIsBreadcrumbChange = () => {
|
||||
if (getThemeConfig.value.layout === 'classic') {
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
}
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 开启 TagsView 拖拽
|
||||
const onSortableTagsViewChange = () => {
|
||||
proxy.mittBus.emit('openOrCloseSortable');
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 开启 TagsView 共用
|
||||
const onShareTagsViewChange = () => {
|
||||
proxy.mittBus.emit('openShareTagsView');
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 灰色模式/色弱模式
|
||||
const onAddFilterChange = (attr: string) => {
|
||||
if (attr === 'grayscale') {
|
||||
if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
|
||||
} else {
|
||||
if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
|
||||
}
|
||||
const cssAttr =
|
||||
attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
|
||||
const appEle: any = document.body;
|
||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 深色模式
|
||||
const onAddDarkChange = () => {
|
||||
const body = document.documentElement as HTMLElement;
|
||||
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||
else body.setAttribute('data-theme', '');
|
||||
};
|
||||
// 4、界面显示 --> 开启水印
|
||||
const onWartermarkChange = () => {
|
||||
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 水印文案
|
||||
const onWartermarkTextInput = (val: any) => {
|
||||
getThemeConfig.value.wartermarkText = verifyAndSpace(val);
|
||||
if (getThemeConfig.value.wartermarkText === '') return false;
|
||||
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 5、布局切换
|
||||
const onSetLayout = (layout: string) => {
|
||||
Local.set('oldLayout', layout);
|
||||
if (getThemeConfig.value.layout === layout) return false;
|
||||
if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
|
||||
getThemeConfig.value.layout = layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initLayoutChangeFun();
|
||||
};
|
||||
// 设置布局切换函数
|
||||
const initLayoutChangeFun = () => {
|
||||
onBgColorPickerChange('menuBar');
|
||||
onBgColorPickerChange('menuBarColor');
|
||||
onBgColorPickerChange('topBar');
|
||||
onBgColorPickerChange('topBarColor');
|
||||
onBgColorPickerChange('columnsMenuBar');
|
||||
onBgColorPickerChange('columnsMenuBarColor');
|
||||
};
|
||||
// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
|
||||
const onDrawerClose = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = false;
|
||||
getThemeConfig.value.isShowLogoChange = false;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 布局配置弹窗打开
|
||||
const openDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = true;
|
||||
};
|
||||
// 触发 store 布局配置更新
|
||||
const setDispatchThemeConfig = () => {
|
||||
setLocalThemeConfig();
|
||||
setLocalThemeConfigStyle();
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
Local.remove('themeConfig');
|
||||
Local.set('themeConfig', getThemeConfig.value);
|
||||
};
|
||||
// 存储布局配置全局主题样式（html根标签）
|
||||
const setLocalThemeConfigStyle = () => {
|
||||
Local.set('themeConfigStyle', document.documentElement.style.cssText);
|
||||
};
|
||||
// 一键复制配置
|
||||
const onCopyConfigClick = () => {
|
||||
let copyThemeConfig = Local.get('themeConfig');
|
||||
copyThemeConfig.isDrawer = false;
|
||||
copyText(JSON.stringify(copyThemeConfig)).then(() => {
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
});
|
||||
};
|
||||
// 一键恢复默认
|
||||
const onResetConfigClick = () => {
|
||||
Local.clear();
|
||||
window.location.reload();
|
||||
};
|
||||
// 初始化菜单样式等
|
||||
const initSetStyle = () => {
|
||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||
onTopBarGradualChange();
|
||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||
onMenuBarGradualChange();
|
||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||
onColumnsMenuBarGradualChange();
|
||||
};
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
|
||||
if (!Local.get('frequency')) initLayoutChangeFun();
|
||||
Local.set('frequency', 1);
|
||||
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
getThemeConfig.value.layout = res.layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initLayoutChangeFun();
|
||||
state.isMobile = other.isMobile();
|
||||
});
|
||||
setTimeout(() => {
|
||||
// 默认样式
|
||||
onColorPickerChange();
|
||||
// 灰色模式
|
||||
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
||||
// 色弱模式
|
||||
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
||||
// 深色模式
|
||||
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
||||
// 开启水印
|
||||
onWartermarkChange();
|
||||
// 语言国际化
|
||||
if (Local.get('themeConfig')) proxy.$i18n.locale = Local.get('themeConfig').globalI18n;
|
||||
// 初始化菜单样式等
|
||||
initSetStyle();
|
||||
}, 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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutBreadcrumbSeting"})
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { copyText } = commonFunction();
|
||||
const isMobile = ref(false);
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return themeConfig.value;
|
||||
});
|
||||
// 1、全局主题
|
||||
const onColorPickerChange = () => {
|
||||
if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
|
||||
// 颜色加深
|
||||
document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
|
||||
document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
|
||||
// 颜色变浅
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
|
||||
}
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 2、菜单 / 顶栏
|
||||
const onBgColorPickerChange = (bg: string) => {
|
||||
document.documentElement.style.setProperty(`--next-bg-${bg}`, (<any>getThemeConfig.value)[bg]);
|
||||
if (bg === 'menuBar') {
|
||||
document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, <any>getLightColor(getThemeConfig.value.menuBar, 0.05));
|
||||
}
|
||||
onTopBarGradualChange();
|
||||
onMenuBarGradualChange();
|
||||
onColumnsMenuBarGradualChange();
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||
const onTopBarGradualChange = () => {
|
||||
setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||
const onMenuBarGradualChange = () => {
|
||||
setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||
const onColumnsMenuBarGradualChange = () => {
|
||||
setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
|
||||
};
|
||||
// 2、菜单 / 顶栏 --> 背景渐变函数
|
||||
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
||||
setTimeout(() => {
|
||||
let els = document.querySelector(el);
|
||||
if (!els) return false;
|
||||
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;`);
|
||||
else els.setAttribute('style', ``);
|
||||
setLocalThemeConfig();
|
||||
}, 200);
|
||||
};
|
||||
// 3、界面设置 --> 菜单水平折叠
|
||||
const onThemeConfigChange = () => {
|
||||
setDispatchThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 固定 Header
|
||||
const onIsFixedHeaderChange = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 3、界面设置 --> 经典布局分割菜单
|
||||
const onClassicSplitMenuChange = () => {
|
||||
getThemeConfig.value.isBreadcrumb = false;
|
||||
setLocalThemeConfig();
|
||||
proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
|
||||
};
|
||||
// 4、界面显示 --> 侧边栏 Logo
|
||||
const onIsShowLogoChange = () => {
|
||||
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 面包屑 Breadcrumb
|
||||
const onIsBreadcrumbChange = () => {
|
||||
if (getThemeConfig.value.layout === 'classic') {
|
||||
getThemeConfig.value.isClassicSplitMenu = false;
|
||||
}
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 开启 TagsView 拖拽
|
||||
const onSortableTagsViewChange = () => {
|
||||
proxy.mittBus.emit('openOrCloseSortable');
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 开启 TagsView 共用
|
||||
const onShareTagsViewChange = () => {
|
||||
proxy.mittBus.emit('openShareTagsView');
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 灰色模式/色弱模式
|
||||
const onAddFilterChange = (attr: string) => {
|
||||
if (attr === 'grayscale') {
|
||||
if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
|
||||
} else {
|
||||
if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
|
||||
}
|
||||
const cssAttr =
|
||||
attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
|
||||
const appEle: any = document.body;
|
||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 深色模式
|
||||
const onAddDarkChange = () => {
|
||||
const body = document.documentElement as HTMLElement;
|
||||
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||
else body.setAttribute('data-theme', '');
|
||||
};
|
||||
// 4、界面显示 --> 开启水印
|
||||
const onWartermarkChange = () => {
|
||||
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 水印文案
|
||||
const onWartermarkTextInput = (val: any) => {
|
||||
getThemeConfig.value.wartermarkText = verifyAndSpace(val);
|
||||
if (getThemeConfig.value.wartermarkText === '') return false;
|
||||
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 5、布局切换
|
||||
const onSetLayout = (layout: string) => {
|
||||
Local.set('oldLayout', layout);
|
||||
if (getThemeConfig.value.layout === layout) return false;
|
||||
if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
|
||||
getThemeConfig.value.layout = layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initLayoutChangeFun();
|
||||
};
|
||||
// 设置布局切换函数
|
||||
const initLayoutChangeFun = () => {
|
||||
onBgColorPickerChange('menuBar');
|
||||
onBgColorPickerChange('menuBarColor');
|
||||
onBgColorPickerChange('topBar');
|
||||
onBgColorPickerChange('topBarColor');
|
||||
onBgColorPickerChange('columnsMenuBar');
|
||||
onBgColorPickerChange('columnsMenuBarColor');
|
||||
};
|
||||
// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
|
||||
const onDrawerClose = () => {
|
||||
getThemeConfig.value.isFixedHeaderChange = false;
|
||||
getThemeConfig.value.isShowLogoChange = false;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 布局配置弹窗打开
|
||||
const openDrawer = () => {
|
||||
getThemeConfig.value.isDrawer = true;
|
||||
};
|
||||
// 触发 store 布局配置更新
|
||||
const setDispatchThemeConfig = () => {
|
||||
setLocalThemeConfig();
|
||||
setLocalThemeConfigStyle();
|
||||
};
|
||||
// 存储布局配置
|
||||
const setLocalThemeConfig = () => {
|
||||
Local.remove('themeConfig');
|
||||
Local.set('themeConfig', getThemeConfig.value);
|
||||
};
|
||||
// 存储布局配置全局主题样式（html根标签）
|
||||
const setLocalThemeConfigStyle = () => {
|
||||
Local.set('themeConfigStyle', document.documentElement.style.cssText);
|
||||
};
|
||||
// 一键复制配置
|
||||
const onCopyConfigClick = () => {
|
||||
let copyThemeConfig = Local.get('themeConfig');
|
||||
copyThemeConfig.isDrawer = false;
|
||||
copyText(JSON.stringify(copyThemeConfig)).then(() => {
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
});
|
||||
};
|
||||
// 一键恢复默认
|
||||
const onResetConfigClick = () => {
|
||||
Local.clear();
|
||||
window.location.reload();
|
||||
};
|
||||
// 初始化菜单样式等
|
||||
const initSetStyle = () => {
|
||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||
onTopBarGradualChange();
|
||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||
onMenuBarGradualChange();
|
||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||
onColumnsMenuBarGradualChange();
|
||||
};
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
|
||||
if (!Local.get('frequency')) initLayoutChangeFun();
|
||||
Local.set('frequency', 1);
|
||||
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
getThemeConfig.value.layout = res.layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initLayoutChangeFun();
|
||||
isMobile.value = other.isMobile();
|
||||
});
|
||||
setTimeout(() => {
|
||||
// 默认样式
|
||||
onColorPickerChange();
|
||||
// 灰色模式
|
||||
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
||||
// 色弱模式
|
||||
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
||||
// 深色模式
|
||||
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
||||
// 开启水印
|
||||
onWartermarkChange();
|
||||
// 语言国际化
|
||||
if (Local.get('themeConfig')) proxy.$i18n.locale = Local.get('themeConfig').globalI18n;
|
||||
// 初始化菜单样式等
|
||||
initSetStyle();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('layoutMobileResize', () => {});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent, watch} from 'vue';
|
||||
import { useRoute,useRouter } from 'vue-router';
|
||||
import {ElMessageBox, ElMessage, ElNotification} from 'element-plus';
|
||||
@ -96,213 +96,194 @@ import {logout} from "/@/api/login";
|
||||
import {removeCache} from "/@/api/system/cache";
|
||||
import {noticeStore} from "/@/stores/noticeStore";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutBreadcrumbUser',
|
||||
components: { UserNews, Search },
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const stores = useUserInfo();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const searchRef = ref();
|
||||
const newPopoverRef=ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
disabledI18n: 'zh-cn',
|
||||
disabledSize: 'large',
|
||||
});
|
||||
// 设置分割样式
|
||||
const layoutUserFlexNum = computed(() => {
|
||||
let num: string | number = '';
|
||||
const { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
const layoutArr: string[] = ['defaults', 'columns'];
|
||||
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
|
||||
else num = '';
|
||||
return num;
|
||||
});
|
||||
// 全屏点击时
|
||||
const onScreenfullClick = () => {
|
||||
if (!screenfull.isEnabled) {
|
||||
ElMessage.warning('暂不不支持全屏');
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle();
|
||||
screenfull.on('change', () => {
|
||||
if (screenfull.isFullscreen) state.isScreenfull = true;
|
||||
else state.isScreenfull = false;
|
||||
});
|
||||
};
|
||||
// 布局配置 icon 点击时
|
||||
const onLayoutSetingClick = () => {
|
||||
proxy.mittBus.emit('openSetingsDrawer');
|
||||
};
|
||||
//清除缓存
|
||||
const removeCacheClick = ()=>{
|
||||
//清除浏览器缓存
|
||||
Session.remove('userMenu');
|
||||
//清除后端缓存
|
||||
removeCache().then(()=>{
|
||||
ElMessage.success('缓存清除成功');
|
||||
defineOptions({ name: "layoutBreadcrumbUser"})
|
||||
const { t } = useI18n();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const stores = useUserInfo();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const searchRef = ref();
|
||||
const newPopoverRef=ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
disabledI18n: 'zh-cn',
|
||||
disabledSize: 'large',
|
||||
});
|
||||
const {isScreenfull, disabledI18n, disabledSize} = toRefs(state)
|
||||
// 设置分割样式
|
||||
const layoutUserFlexNum = computed(() => {
|
||||
let num: string | number = '';
|
||||
const { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
const layoutArr: string[] = ['defaults', 'columns'];
|
||||
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
|
||||
else num = '';
|
||||
return num;
|
||||
});
|
||||
// 全屏点击时
|
||||
const onScreenfullClick = () => {
|
||||
if (!screenfull.isEnabled) {
|
||||
ElMessage.warning('暂不不支持全屏');
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle();
|
||||
screenfull.on('change', () => {
|
||||
if (screenfull.isFullscreen) state.isScreenfull = true;
|
||||
else state.isScreenfull = false;
|
||||
});
|
||||
};
|
||||
// 布局配置 icon 点击时
|
||||
const onLayoutSetingClick = () => {
|
||||
proxy.mittBus.emit('openSetingsDrawer');
|
||||
};
|
||||
//清除缓存
|
||||
const removeCacheClick = ()=>{
|
||||
//清除浏览器缓存
|
||||
Session.remove('userMenu');
|
||||
//清除后端缓存
|
||||
removeCache().then(()=>{
|
||||
ElMessage.success('缓存清除成功');
|
||||
window.location.reload();
|
||||
})
|
||||
};
|
||||
// 下拉菜单点击时
|
||||
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();
|
||||
})
|
||||
};
|
||||
// 下拉菜单点击时
|
||||
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();
|
||||
})
|
||||
.catch(() => {});
|
||||
} else if (path === 'wareHouse') {
|
||||
window.open('https://gitee.com/tiger1103/gfast');
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
};
|
||||
// 菜单搜索点击
|
||||
const onSearchClick = () => {
|
||||
searchRef.value.openSearch();
|
||||
};
|
||||
const hideNews=()=>{
|
||||
debugger
|
||||
newPopoverRef.value.hide()
|
||||
}
|
||||
// 组件大小改变
|
||||
const onComponentSizeChange = (size: string) => {
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalComponentSize = size;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
initComponentSize();
|
||||
window.location.reload();
|
||||
};
|
||||
// 语言切换
|
||||
const onLanguageChange = (lang: string) => {
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalI18n = lang;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
proxy.$i18n.locale = lang;
|
||||
initI18n();
|
||||
other.useTitle();
|
||||
};
|
||||
// 设置 element plus 组件的国际化
|
||||
const setI18nConfig = (locale: string) => {
|
||||
proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]);
|
||||
};
|
||||
// 初始化言语国际化
|
||||
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),
|
||||
};
|
||||
},
|
||||
.catch(() => {});
|
||||
} else if (path === 'wareHouse') {
|
||||
window.open('https://gitee.com/tiger1103/gfast');
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
};
|
||||
// 菜单搜索点击
|
||||
const onSearchClick = () => {
|
||||
searchRef.value.openSearch();
|
||||
};
|
||||
const hideNews=()=>{
|
||||
debugger
|
||||
newPopoverRef.value.hide()
|
||||
}
|
||||
// 组件大小改变
|
||||
const onComponentSizeChange = (size: string) => {
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalComponentSize = size;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
initComponentSize();
|
||||
window.location.reload();
|
||||
};
|
||||
// 语言切换
|
||||
const onLanguageChange = (lang: string) => {
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalI18n = lang;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
proxy.$i18n.locale = lang;
|
||||
initI18n();
|
||||
other.useTitle();
|
||||
};
|
||||
// 设置 element plus 组件的国际化
|
||||
const setI18nConfig = (locale: string) => {
|
||||
proxy.mittBus.emit('getI18nConfig',proxy.i18n.global.messages.value[locale]);
|
||||
};
|
||||
// 初始化言语国际化
|
||||
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()
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -88,159 +88,144 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {reactive, toRefs, defineComponent, computed, watch} from 'vue';
|
||||
<script setup lang="ts">
|
||||
import {reactive, toRefs, onMounted} from 'vue';
|
||||
import {
|
||||
listShowNotice,
|
||||
unReadCount,
|
||||
} from "/@/api/system/notice/sysNotice";
|
||||
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {readNotice} from "/@/api/system/notice/sysNoticeRead";
|
||||
import {SysNoticeInfoData} from "/@/views/system/sysNotice/list/component/model";
|
||||
import {useRouter} from "vue-router";
|
||||
export default defineComponent({
|
||||
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: "通知"
|
||||
});
|
||||
defineOptions({ name: "layoutBreadcrumbUserNews"})
|
||||
|
||||
/** 改变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
|
||||
}
|
||||
})
|
||||
onMounted(()=>{
|
||||
getUnReadCount()
|
||||
getData(1)
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
type1Num: 0,
|
||||
type2Num: 0,
|
||||
// notifyList: [],
|
||||
noticeList: [],
|
||||
count: {
|
||||
notify: 0,
|
||||
notice: 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,
|
||||
pageSize: 5,
|
||||
type: barName,
|
||||
}
|
||||
listSysNotice(notifyParam).then((res: any) => {
|
||||
console.log("listSysNotice",res)
|
||||
state.notifyList = res.data.list || []
|
||||
})*/
|
||||
let noticeParam = {
|
||||
})
|
||||
}
|
||||
//获取数据
|
||||
const getData = (barName: number | undefined) => {
|
||||
/* let notifyParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
type: barName,
|
||||
}
|
||||
listShowNotice(noticeParam).then((res: any) => {
|
||||
state.noticeList = res.data.list || []
|
||||
listSysNotice(notifyParam).then((res: any) => {
|
||||
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('清空成功');
|
||||
})*/
|
||||
})
|
||||
};
|
||||
const readAllItem = () => {
|
||||
.catch(() => {
|
||||
});
|
||||
|
||||
}
|
||||
// 全部已读点击
|
||||
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',
|
||||
};
|
||||
const hendleAllread = (type: string) => {
|
||||
|
||||
ElMessageBox.confirm("是否将全部" + type + "标记为已读!", '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {/*
|
||||
delSysNotice(id).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
})*/
|
||||
})
|
||||
.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 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")
|
||||
};
|
||||
.catch(() => {
|
||||
});
|
||||
};
|
||||
const hendleShowMore = () => {
|
||||
// console.log(emit)
|
||||
router.push("/system/sysNotice/show")
|
||||
};
|
||||
|
||||
|
||||
const handleRead = (item: SysNoticeInfoData) => {
|
||||
// console.log("handleRead", item)
|
||||
let query = {
|
||||
noticeId: item.id
|
||||
}
|
||||
readNotice(query).then(() => {
|
||||
// console.log(res)
|
||||
getData(item.type)
|
||||
ElMessage.success("已读");
|
||||
})
|
||||
}
|
||||
return {
|
||||
getData,
|
||||
readAllItem,
|
||||
onAllReadClick,
|
||||
onGoToGiteeClick,
|
||||
hendleClear,
|
||||
hendleAllread,
|
||||
hendleShowMore,
|
||||
getUnReadCount,
|
||||
handleRead,
|
||||
...toRefs(state),
|
||||
handleTabChange
|
||||
};
|
||||
},
|
||||
});
|
||||
const handleRead = (item: SysNoticeInfoData) => {
|
||||
// console.log("handleRead", item)
|
||||
let query = {
|
||||
noticeId: item.id
|
||||
}
|
||||
readNotice(query).then(() => {
|
||||
// console.log(res)
|
||||
getData(item.type)
|
||||
ElMessage.success("已读");
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -5,28 +5,19 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import BreadcrumbIndex from '/@/layout/navBars/breadcrumb/index.vue';
|
||||
import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutNavBars',
|
||||
components: { BreadcrumbIndex, TagsView },
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
// 是否显示 tagsView
|
||||
const setShowTagsView = computed(() => {
|
||||
let { layout, isTagsview } = themeConfig.value;
|
||||
return layout !== 'classic' && isTagsview;
|
||||
});
|
||||
return {
|
||||
setShowTagsView,
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutNavBars"})
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
// 是否显示 tagsView
|
||||
const setShowTagsView = computed(() => {
|
||||
let { layout, isTagsview } = themeConfig.value;
|
||||
return layout !== 'classic' && isTagsview;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -29,97 +29,88 @@
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutTagsViewContextmenu',
|
||||
props: {
|
||||
dropdown: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "layoutTagsViewContextmenu"})
|
||||
const props = defineProps({
|
||||
dropdown: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<SvgIcon
|
||||
name="ele-RefreshRight"
|
||||
class="ml5 layout-navbars-tagsview-ul-li-refresh"
|
||||
@click.stop="refreshCurrentTagsView($route.fullPath)"
|
||||
@click.stop="refreshCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
|
||||
/>
|
||||
<SvgIcon
|
||||
name="ele-Close"
|
||||
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
toRefs,
|
||||
reactive,
|
||||
@ -101,11 +101,7 @@ interface CurrentContextmenu {
|
||||
path: string;
|
||||
contextMenuClickId: string | number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layoutTagsView',
|
||||
components: { Contextmenu },
|
||||
setup() {
|
||||
defineOptions({ name: "layoutTagsView"})
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const tagsRefs = ref<any[]>([]);
|
||||
const scrollbarRef = ref();
|
||||
@ -128,6 +124,7 @@ export default defineComponent({
|
||||
tagsViewList: [],
|
||||
tagsViewRoutesList: [],
|
||||
});
|
||||
const { tagsViewList, dropdown} = toRefs(state)
|
||||
// 动态设置 tagsView 风格样式
|
||||
const setTagsStyle = computed(() => {
|
||||
return themeConfig.value.tagsStyle;
|
||||
@ -367,7 +364,7 @@ export default defineComponent({
|
||||
// 刷新当前
|
||||
if (meta.isDynamic) await router.push({ name, params });
|
||||
else await router.push({ path, query });
|
||||
refreshCurrentTagsView(route.fullPath);
|
||||
refreshCurrentTagsView(getThemeConfig.value.isShareTagsView ? path : url);
|
||||
break;
|
||||
case 1:
|
||||
// 关闭当前
|
||||
@ -580,25 +577,6 @@ export default defineComponent({
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
return {
|
||||
isActive,
|
||||
onContextmenu,
|
||||
onTagsClick,
|
||||
tagsRefs,
|
||||
contextmenuRef,
|
||||
scrollbarRef,
|
||||
tagsUlRef,
|
||||
onHandleScroll,
|
||||
getThemeConfig,
|
||||
setTagsStyle,
|
||||
setTagsViewNameI18n,
|
||||
refreshCurrentTagsView,
|
||||
closeCurrentTagsView,
|
||||
onCurrentContextmenuClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -65,7 +65,6 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
path: '/bigUpload',
|
||||
name: 'bigUpload',
|
||||
component: () => import('/@/layout/routerView/parent.vue'),
|
||||
redirect: '/bigUpload',
|
||||
meta:{
|
||||
title: '大文件上传',
|
||||
isLink: '',
|
||||
@ -78,8 +77,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
children:[
|
||||
{
|
||||
path: '/bigUpload',
|
||||
name: 'bigUpload',
|
||||
path: '/bigUpload/list',
|
||||
name: 'bigUploadList',
|
||||
component: () => import('/@/views/bigUpload/index.vue'),
|
||||
meta: {
|
||||
title: '大文件上传',
|
||||
@ -574,6 +573,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
|
||||
icon: 'ele-Sunny',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: '/demo/pages/iocnfont',
|
||||
name: 'pagesIocnfont',
|
||||
@ -589,6 +589,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
|
||||
icon: 'ele-Present',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: '/demo/pages/element',
|
||||
name: 'pagesElement',
|
||||
@ -813,22 +814,7 @@ export const demoRoutes:Array<RouteRecordRaw> = [
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-diannao',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/demo/pages/workflow',
|
||||
name: 'pagesWorkflow',
|
||||
component: () => import('/@/views/pages/workflow/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesWorkflow',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'ele-Connection',
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -18,74 +18,61 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {ref, reactive, defineComponent} from 'vue';
|
||||
import {getBigFile, editBigFile} from "/@/api/system/bigFile";
|
||||
|
||||
import {ElMessage} from "element-plus";
|
||||
export default defineComponent({
|
||||
name: "editBigUpload",
|
||||
props:{},
|
||||
emits: ["success"],
|
||||
setup(prop, {emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const isShowDialog = ref<boolean>(false)
|
||||
const ruleForm = reactive<any>({id:0, name:"", describe:""})
|
||||
const rules = reactive<any>({
|
||||
name: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
})
|
||||
const openDialog = async (id:number) => {
|
||||
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
|
||||
}
|
||||
}
|
||||
defineOptions({ name: "editBigUpload"})
|
||||
const emit = defineEmits(["success"])
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const isShowDialog = ref<boolean>(false)
|
||||
const ruleForm = reactive<any>({id:0, name:"", describe:""})
|
||||
const rules = reactive<any>({
|
||||
name: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
})
|
||||
const openDialog = async (id:number) => {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
|
||||
import { onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
|
||||
import getTableData from '/@/views/bigUpload/tableData'
|
||||
@ -81,14 +81,7 @@ import {addBigFile, deleteBigFile} from "/@/api/system/bigFile";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import EditBigUpload from '/@/views/bigUpload/component/editBigUpload.vue'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: "bigUpload",
|
||||
components:{
|
||||
EditBigUpload
|
||||
},
|
||||
setup() {
|
||||
|
||||
defineOptions({ name: "bigUpload"})
|
||||
const {
|
||||
total,
|
||||
queryParams,
|
||||
@ -98,20 +91,13 @@ export default defineComponent({
|
||||
getBigFileList,
|
||||
resetBigFileList
|
||||
} = getTableData()
|
||||
|
||||
|
||||
const editBigUploadRef = ref();
|
||||
|
||||
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
|
||||
const selected = ref<number[]>([])
|
||||
|
||||
// 文件上传
|
||||
const uploadHandle = function () {
|
||||
proxy.mittBus.emit("bigUploader.uploadFile")
|
||||
}
|
||||
|
||||
onMounted(()=> {
|
||||
proxy.mittBus.on("bigUploader.uploadFileSuccess", (res:any) => {
|
||||
//console.log(res)
|
||||
@ -182,26 +168,6 @@ export default defineComponent({
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
total,
|
||||
queryParams,
|
||||
tableData,
|
||||
queryRef,
|
||||
resetQuery,
|
||||
getBigFileList,
|
||||
resetBigFileList,
|
||||
uploadHandle,
|
||||
handleSelectionChange,
|
||||
byteText,
|
||||
edit,
|
||||
del,
|
||||
delMult,
|
||||
editBigUploadRef
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -80,15 +80,6 @@ export default defineComponent({
|
||||
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
|
||||
position: relative;
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 250px;
|
||||
@ -104,4 +95,12 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -80,7 +80,7 @@
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
toRefs,
|
||||
reactive,
|
||||
@ -103,139 +103,125 @@ import { formatAxis } from '/@/utils/formatTime';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import {captcha, login} from "/@/api/login";
|
||||
import GoCaptchaBtn from "/@/components/goCaptcha/GoCaptchaBtn.vue";
|
||||
export default defineComponent({
|
||||
name: 'loginAccount',
|
||||
components: {GoCaptchaBtn},
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loginForm = ref(null)
|
||||
const checkCaptchaResult = ref('default')
|
||||
const verifyStatus = ref(0)
|
||||
const state = reactive({
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
username: 'demo',
|
||||
password: '123456',
|
||||
verifyCode: '',
|
||||
verifyKey:''
|
||||
},
|
||||
formRules:{
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
]
|
||||
},
|
||||
loading: {
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "loginAccount"})
|
||||
const { t } = useI18n();
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loginForm = ref(null)
|
||||
const checkCaptchaResult = ref('default')
|
||||
const verifyStatus = ref(0)
|
||||
const state = reactive({
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
username: 'demo',
|
||||
password: '123456',
|
||||
verifyCode: '',
|
||||
verifyKey:''
|
||||
},
|
||||
formRules:{
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
]
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
captchaSrc:'',
|
||||
});
|
||||
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>
|
||||
|
||||
|
||||
|
||||
@ -29,8 +29,8 @@
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface LoginMobileState {
|
||||
@ -39,20 +39,11 @@ interface LoginMobileState {
|
||||
}
|
||||
|
||||
// 定义对象与类型
|
||||
const ruleForm: LoginMobileState = {
|
||||
const ruleForm = ref<LoginMobileState>({
|
||||
userName: '',
|
||||
code: '',
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginMobile',
|
||||
setup() {
|
||||
const state = reactive({ ruleForm });
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
defineOptions({ name: "loginMobile"})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -5,31 +5,25 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref, defineComponent, onMounted } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginScan',
|
||||
setup() {
|
||||
const qrcodeRef = ref<HTMLElement | null>(null);
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
(qrcodeRef.value as HTMLElement).innerHTML = '';
|
||||
new QRCode(qrcodeRef.value, {
|
||||
text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
|
||||
width: 260,
|
||||
height: 260,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
return { qrcodeRef };
|
||||
},
|
||||
defineOptions({ name: "loginScan"})
|
||||
const qrcodeRef = ref<HTMLElement | null>(null);
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
(qrcodeRef.value as HTMLElement).innerHTML = '';
|
||||
new QRCode(qrcodeRef.value, {
|
||||
text: `https://qm.qq.com/cgi-bin/qm/qr?k=CDO9yYdygFMKdQihlUXj4-Y0RDEhPTsh&authKey=vw/uQT5H4L/Kb0zT1gj7dd0PVtUDm9RdWqz4cztJb/QmPaSdyS/yeRHhjZaUj43v&noverify=0`,
|
||||
width: 260,
|
||||
height: 260,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
@ -54,32 +54,21 @@ interface LoginState {
|
||||
tabsActiveName: string;
|
||||
isScan: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'loginIndex',
|
||||
components: { Account, Mobile, Scan },
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<LoginState>({
|
||||
tabsActiveName: 'account',
|
||||
isScan: false,
|
||||
});
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return themeConfig.value;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
NextLoading.done();
|
||||
});
|
||||
return {
|
||||
logoMini,
|
||||
loginIconTwo,
|
||||
getThemeConfig,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "loginIndex"})
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive<LoginState>({
|
||||
tabsActiveName: 'account',
|
||||
isScan: false,
|
||||
});
|
||||
const { tabsActiveName,isScan } = toRefs(state);
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return themeConfig.value;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
NextLoading.done();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import {ElMessage} from "element-plus";
|
||||
import {addConfig, editConfig, getConfig} from "/@/api/system/config";
|
||||
@ -51,102 +51,92 @@ interface DicState {
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDicData',
|
||||
props:{
|
||||
sysYesNoOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
defineOptions({ name: "apiV1SystemConfigEdit"})
|
||||
const props = defineProps({
|
||||
sysYesNoOptions:{
|
||||
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}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
configId: 0,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
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),
|
||||
};
|
||||
},
|
||||
rules: {
|
||||
configName: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" }
|
||||
],
|
||||
configKey: [
|
||||
{ required: true, message: "参数键名不能为空", trigger: "blur" }
|
||||
],
|
||||
configValue: [
|
||||
{ required: true, message: "参数键值不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
v-model="tableData.param.configName"
|
||||
placeholder="请输入参数名称"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -17,7 +16,6 @@
|
||||
v-model="tableData.param.configKey"
|
||||
placeholder="请输入参数键名"
|
||||
clearable
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -26,7 +24,6 @@
|
||||
v-model="tableData.param.configType"
|
||||
placeholder="系统内置"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="dict in sys_yes_no"
|
||||
@ -38,7 +35,6 @@
|
||||
<el-form-item label="创建时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
@ -103,7 +99,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs,reactive,onMounted,ref,defineComponent,unref,getCurrentInstance} from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditConfig from '/@/views/system/config/component/editConfig.vue';
|
||||
@ -135,109 +131,90 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemDictDataList',
|
||||
components: { EditConfig },
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const {sys_yes_no} = proxy.useDict('sys_yes_no')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
dateRange:[],
|
||||
pageNum: 1,
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "apiV1SystemConfigList"})
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const {sys_yes_no} = proxy.useDict('sys_yes_no')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
dateRange:[],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
configName:'',
|
||||
configKey:'',
|
||||
configType:''
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<select-user ref="selectUserRef" @selectUser="confirmUser" :selectedUsers="deptUser"></select-user>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
|
||||
import {addDept,editDept, getDeptList} from "/@/api/system/dept";
|
||||
import {getUserByIds} from '/@/api/system/user';
|
||||
@ -101,150 +101,131 @@ interface DeptSate {
|
||||
deptData: Array<TableDataRow>;
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDept',
|
||||
components:{
|
||||
selectUser,
|
||||
defineOptions({ name: "systemEditDept"})
|
||||
const emit = defineEmits(['deptList'])
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const selectUserRef = ref();
|
||||
const deptUser = ref([]);
|
||||
const state = reactive<DeptSate>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
deptId:0,
|
||||
parentId: 0, // 上级部门
|
||||
deptName: '', // 部门名称
|
||||
orderNum:0,
|
||||
leader: [],
|
||||
phone: '',
|
||||
email: '',
|
||||
status: 1,
|
||||
},
|
||||
emits:['deptList'],
|
||||
setup(prop,{emit}) {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const selectUserRef = ref();
|
||||
const deptUser = ref([]);
|
||||
const state = reactive<DeptSate>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
deptId:0,
|
||||
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),
|
||||
};
|
||||
},
|
||||
deptData: [], // 部门数据
|
||||
rules: {
|
||||
deptName:[
|
||||
{required: true, message: "部门名称不能为空", trigger: "blur"},
|
||||
]
|
||||
}
|
||||
});
|
||||
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>
|
||||
<style>
|
||||
.u-m-r-10{
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditDept from '/@/views/system/dept/component/editDept.vue';
|
||||
@ -86,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({
|
||||
name: 'systemDept',
|
||||
components: { EditDept },
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const editDeptRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
tableData: {
|
||||
data: [],
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptName:'',
|
||||
status:''
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
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) => {
|
||||
|
||||
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),
|
||||
};
|
||||
},
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="ruleForm.status">
|
||||
<el-radio :label="1" >启用</el-radio>
|
||||
<el-radio :label="0" >禁用</el-radio>
|
||||
<el-radio :value="1" >启用</el-radio>
|
||||
<el-radio :value="0" >禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import { getType,addType,editType } from '/@/api/system/dict/type';
|
||||
import {ElMessage} from "element-plus";
|
||||
@ -44,91 +44,80 @@ interface DicState {
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDic',
|
||||
setup(prop,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
dictId:0,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:1,
|
||||
remark:''
|
||||
},
|
||||
rules: {
|
||||
dictName: [
|
||||
{ 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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "systemEditDic"})
|
||||
const emit = defineEmits(['typeList']);
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive<DicState>({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
dictId:0,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:1,
|
||||
remark:''
|
||||
},
|
||||
rules: {
|
||||
dictName: [
|
||||
{ required: true, message: "字典名称不能为空", trigger: "blur" }
|
||||
],
|
||||
dictType: [
|
||||
{ required: true, message: "字典类型不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
@ -26,8 +26,8 @@
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="ruleForm.status">
|
||||
<el-radio :label="1" >启用</el-radio>
|
||||
<el-radio :label="0" >禁用</el-radio>
|
||||
<el-radio :value="1" >启用</el-radio>
|
||||
<el-radio :value="0" >禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
|
||||
import { getData,addData,editData } from '/@/api/system/dict/data';
|
||||
import {ElMessage} from "element-plus";
|
||||
@ -63,104 +63,94 @@ interface DicState {
|
||||
ruleForm: RuleFormState;
|
||||
rules:{}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditDicData',
|
||||
props:{
|
||||
dictType:{
|
||||
type:String,
|
||||
default:()=>''
|
||||
}
|
||||
defineOptions({ name: "systemEditDicData"})
|
||||
const prop = defineProps({
|
||||
dictType:{
|
||||
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}) {
|
||||
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
|
||||
},
|
||||
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),
|
||||
};
|
||||
},
|
||||
rules: {
|
||||
dictLabel: [
|
||||
{ required: true, message: "数据标签不能为空", trigger: "blur" }
|
||||
],
|
||||
dictValue: [
|
||||
{ required: true, message: "数据键值不能为空", trigger: "blur" }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
@ -91,15 +91,13 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditDic from '/@/views/system/dict/component/editDicData.vue';
|
||||
import {getDataList,deleteData} from "/@/api/system/dict/data";
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableDataRow {
|
||||
dictCode: number;
|
||||
@ -126,103 +124,86 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemDictDataList',
|
||||
components: { EditDic },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "apiV1SystemDictDataList"})
|
||||
const route = useRoute();
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dictLabel:'',
|
||||
dictType:'',
|
||||
status:''
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -109,7 +109,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import EditDic from '/@/views/system/dict/component/editDic.vue';
|
||||
@ -141,101 +141,85 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemDic',
|
||||
components: { EditDic },
|
||||
setup() {
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "systemDic"})
|
||||
const addDicRef = ref();
|
||||
const editDicRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dictName:'',
|
||||
dictType:'',
|
||||
status:'',
|
||||
dateRange:[],
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -25,9 +25,9 @@
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-radio-group v-model="ruleForm.menuType">
|
||||
<el-radio label="0">目录</el-radio>
|
||||
<el-radio label="1">菜单</el-radio>
|
||||
<el-radio label="2">按钮</el-radio>
|
||||
<el-radio value="0">目录</el-radio>
|
||||
<el-radio value="1">菜单</el-radio>
|
||||
<el-radio value="2">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -98,7 +98,7 @@
|
||||
<el-radio
|
||||
v-for="dict in visibleOptions"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
:value="dict.value"
|
||||
>{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
@ -106,32 +106,32 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
|
||||
<el-form-item label="页面缓存">
|
||||
<el-radio-group v-model="ruleForm.isKeepAlive">
|
||||
<el-radio :label="1">缓存</el-radio>
|
||||
<el-radio :label="0">不缓存</el-radio>
|
||||
<el-radio :value="1">缓存</el-radio>
|
||||
<el-radio :value="0">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
|
||||
<el-form-item label="是否固定">
|
||||
<el-radio-group v-model="ruleForm.isAffix">
|
||||
<el-radio :label="1">固定</el-radio>
|
||||
<el-radio :label="0">不固定</el-radio>
|
||||
<el-radio :value="1">固定</el-radio>
|
||||
<el-radio :value="0">不固定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="ruleForm.isLink" :disabled="ruleForm.isIframe===1">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
|
||||
<el-form-item label="是否内嵌">
|
||||
<el-radio-group v-model="ruleForm.isIframe" @change="onSelectIframeChange">
|
||||
<el-radio :label="1">是</el-radio>
|
||||
<el-radio :label="0">否</el-radio>
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -148,198 +148,183 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,nextTick } from 'vue';
|
||||
import IconSelector from '/@/components/iconSelector/index.vue';
|
||||
import { refreshBackEndControlRoutes } from "/@/router/backEnd";
|
||||
import {getMenuParams, addMenu, getMenuInfo, updateMenu} from "/@/api/system/menu";
|
||||
import {ElMessage} from "element-plus"
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditMenu',
|
||||
components: { IconSelector },
|
||||
props:{
|
||||
visibleOptions:{
|
||||
type:Array,
|
||||
default:()=>[],
|
||||
},
|
||||
acType:{
|
||||
type:String,
|
||||
default:()=>'add'
|
||||
}
|
||||
defineOptions({ name: "systemEditMenu"})
|
||||
const props = defineProps({
|
||||
visibleOptions:{
|
||||
type:Array,
|
||||
default:()=>[],
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const ruleFormRef = ref<HTMLElement | null>(null);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
isShowDialog: false,
|
||||
roles:[],
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
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、链接地址不为空`
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{required: true, message: "父菜单不能为空", trigger: "blur"},
|
||||
],
|
||||
name:[
|
||||
{required: true, message: "接口规则不能为空", trigger: "blur"},
|
||||
],
|
||||
path:[
|
||||
{required: true, message: "路由地址不能为空", trigger: "blur"},
|
||||
],
|
||||
menuName: [
|
||||
{required: true, message: "菜单名称不能为空", trigger: "blur"},
|
||||
],
|
||||
menuType: [
|
||||
{required: true, message: "菜单类型不能为空", trigger: "blur"},
|
||||
],
|
||||
},
|
||||
menuData: [], // 上级菜单数据
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
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、链接地址不为空`
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleFormRef,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onSelectIframeChange,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
acType:{
|
||||
type:String,
|
||||
default:()=>'add'
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['menuList']);
|
||||
const ruleFormRef = ref<HTMLElement | null>(null);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
isShowDialog: false,
|
||||
roles:[],
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
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、链接地址不为空`
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{required: true, message: "父菜单不能为空", trigger: "blur"},
|
||||
],
|
||||
name:[
|
||||
{required: true, message: "接口规则不能为空", trigger: "blur"},
|
||||
],
|
||||
path:[
|
||||
{required: true, message: "路由地址不能为空", trigger: "blur"},
|
||||
],
|
||||
menuName: [
|
||||
{required: true, message: "菜单名称不能为空", trigger: "blur"},
|
||||
],
|
||||
menuType: [
|
||||
{required: true, message: "菜单类型不能为空", trigger: "blur"},
|
||||
],
|
||||
},
|
||||
menuData: [], // 上级菜单数据
|
||||
});
|
||||
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>
|
||||
|
||||
@ -80,78 +80,62 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {ref, toRefs, reactive, onBeforeMount, defineComponent, getCurrentInstance, unref} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
|
||||
import {delMenu, getMenuList} from "/@/api/system/menu";
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemAuthMenuList',
|
||||
components: { EditMenu },
|
||||
setup() {
|
||||
const editMenuRef = ref();
|
||||
const state = reactive({
|
||||
queryParams:{
|
||||
title:"",
|
||||
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
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "apiV1SystemAuthMenuList"})
|
||||
const editMenuRef = ref();
|
||||
const state = reactive({
|
||||
queryParams:{
|
||||
title:"",
|
||||
component:""
|
||||
},
|
||||
menuTableData:[],
|
||||
});
|
||||
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>
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
placeholder="请输入登录地址"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -20,7 +19,6 @@
|
||||
placeholder="请输入登录地点"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -31,7 +29,6 @@
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 180px;"
|
||||
size="default"
|
||||
@keyup.enter.native="dataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -41,7 +38,6 @@
|
||||
v-model="tableData.param.status"
|
||||
placeholder="登录状态"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option
|
||||
@ -56,7 +52,6 @@
|
||||
<el-form-item label="登录时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="tableData.param.dateRange"
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
type="daterange"
|
||||
@ -117,7 +112,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent,getCurrentInstance,unref } from 'vue';
|
||||
import { ElMessageBox, ElMessage,FormInstance} from 'element-plus';
|
||||
import { logList,deleteLog,clearLog } from '/@/api/system/monitor/loginLog';
|
||||
@ -152,111 +147,96 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemLoginLogList',
|
||||
setup() {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const {admin_login_status} = proxy.useDict('admin_login_status')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "apiV1SystemLoginLogList"})
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const queryRef = ref();
|
||||
const {admin_login_status} = proxy.useDict('admin_login_status')
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [],
|
||||
status: '',
|
||||
ipaddr:'',
|
||||
loginLocation:'',
|
||||
userName:''
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
|
||||
import {
|
||||
getSysOperLog
|
||||
@ -57,120 +57,107 @@ import {
|
||||
SysOperLogInfoData,
|
||||
SysOperLogEditState,
|
||||
} from "/@/views/system/monitor/operLog/component/model"
|
||||
export default defineComponent({
|
||||
name:"apiV1SystemSysOperLogDetail",
|
||||
components:{
|
||||
defineOptions({ name: "apiV1SystemSysOperLogDetail"})
|
||||
const props = defineProps({
|
||||
requestMethodOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
props:{
|
||||
requestMethodOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
})
|
||||
const emit = defineEmits(['getSysDeptItemsDeptName'])
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
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()
|
||||
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, // 部门名称
|
||||
},
|
||||
},
|
||||
// 表单校验
|
||||
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),
|
||||
};
|
||||
// 表单校验
|
||||
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 {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>
|
||||
<style scoped>
|
||||
.system-sysOperLog-detail :deep(.el-form-item--large .el-form-item__label){
|
||||
|
||||
@ -43,7 +43,6 @@
|
||||
v-model="tableData.param.operName"
|
||||
placeholder="请输入操作人员"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="sysOperLogList"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -165,7 +164,7 @@
|
||||
></apiV1SystemSysOperLogDetail>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {ItemOptions} from "/@/api/items";
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, computed,getCurrentInstance,toRaw} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
@ -180,175 +179,144 @@ import {
|
||||
SysOperLogTableDataState,
|
||||
} from "/@/views/system/monitor/operLog/component/model"
|
||||
import apiV1SystemSysOperLogDetail from "/@/views/system/monitor/operLog/component/detail.vue"
|
||||
export default defineComponent({
|
||||
name: "apiV1SystemSysOperLogList",
|
||||
components:{
|
||||
apiV1SystemSysOperLogDetail
|
||||
},
|
||||
setup() {
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const queryRef = ref()
|
||||
const editRef = ref();
|
||||
const detailRef = ref();
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false)
|
||||
// 非单个禁用
|
||||
const single = ref(true)
|
||||
// 非多个禁用
|
||||
const multiple =ref(true)
|
||||
const word = computed(()=>{
|
||||
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),
|
||||
}
|
||||
defineOptions({ name: "apiV1SystemSysOperLogList"})
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const queryRef = ref()
|
||||
const editRef = ref();
|
||||
const detailRef = ref();
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false)
|
||||
// 非单个禁用
|
||||
const single = ref(true)
|
||||
// 非多个禁用
|
||||
const multiple =ref(true)
|
||||
const word = computed(()=>{
|
||||
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: []
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.colBlock {
|
||||
|
||||
@ -318,10 +318,8 @@
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
},
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
||||
},
|
||||
// data: [
|
||||
@ -369,10 +367,8 @@
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
},
|
||||
fontSize: 36,
|
||||
color: 'red',
|
||||
offsetCenter: ['0', '80%'], //表盘数据(30%)位置
|
||||
},
|
||||
// data: [
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :model="tableData.param" ref="queryRef" :inline="true">
|
||||
<el-form-item label="登录IP" prop="ipaddr">
|
||||
<el-input size="default" v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
|
||||
<el-input v-model="tableData.param.ipaddr" placeholder="请输入登录IP" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input size="default" v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
|
||||
<el-input v-model="tableData.param.userName" placeholder="请输入登录名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getList">
|
||||
@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, defineComponent, ref} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
import { forceLogout, listSysUserOnline} from "/@/api/system/monitor/userOnline";
|
||||
@ -86,94 +86,80 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemOnlineList',
|
||||
setup() {
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
ipaddr:'',
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "apiV1SystemOnlineList"})
|
||||
const queryRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
ipaddr:'',
|
||||
userName:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -203,7 +203,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent,getCurrentInstance,onMounted } from 'vue';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { storeToRefs } from 'pinia';
|
||||
@ -224,120 +224,106 @@ interface PersonalState {
|
||||
newsInfoList: any;
|
||||
recommendList: any;
|
||||
}
|
||||
defineOptions({ name: "personals"})
|
||||
|
||||
export default defineComponent({
|
||||
name: 'personals',
|
||||
setup() {
|
||||
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const dataParam = reactive({
|
||||
token:getToken(),
|
||||
})
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
imageUrl:'',
|
||||
deptName:'',
|
||||
roles:[],
|
||||
personalForm: {
|
||||
nickname: '',
|
||||
userEmail: '',
|
||||
describe: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
remark:'',
|
||||
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 baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const dataParam = reactive({
|
||||
token:getToken(),
|
||||
})
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
imageUrl:'',
|
||||
deptName:'',
|
||||
roles:[],
|
||||
personalForm: {
|
||||
nickname: '',
|
||||
userEmail: '',
|
||||
describe: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
remark:'',
|
||||
avatar:'',
|
||||
lastLoginIp:'',
|
||||
lastLoginTime:''
|
||||
},
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
|
||||
import {addPost, editPost} from "/@/api/system/post";
|
||||
import {ElMessage} from "element-plus";
|
||||
@ -57,113 +57,101 @@ interface PostState {
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditPost',
|
||||
setup(props,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<PostState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
postName: [
|
||||
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
|
||||
],
|
||||
postSort: [
|
||||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "systemEditPost"})
|
||||
const emit = defineEmits(['getPostList']);
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<PostState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
postName: [
|
||||
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
|
||||
],
|
||||
postSort: [
|
||||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditPost from '/@/views/system/post/component/editPost.vue';
|
||||
@ -100,101 +100,84 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemPostList',
|
||||
components: {EditPost},
|
||||
setup() {
|
||||
const addPostRef = ref();
|
||||
const editPostRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
postName:'',
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "apiV1SystemPostList"})
|
||||
const addPostRef = ref();
|
||||
const editPostRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
postName:'',
|
||||
status:'',
|
||||
postCode:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<template #header>
|
||||
<el-radio-group v-model="optionsActionValue" @change="setOptionsActionValueHandle">
|
||||
<template v-for="item in dataScopeOptions" :key="item.value">
|
||||
<el-radio v-if="item.value!='2'" :value="item.value" >{{item.label}}</el-radio>
|
||||
<el-radio v-if="item.value.toString()!='2'" :value="item.value" >{{item.label}}</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
@ -42,7 +42,7 @@
|
||||
<el-radio-group v-model="menuAuthData[scope.row.id]">
|
||||
<template v-for="item in dataScopeOptions" :key="item.value">
|
||||
<el-radio :value="item.value" @change="setOptionsItemHandle(item.value,scope.row.id)">
|
||||
<el-badge v-if="item.value=='2' && menuAuthData[scope.row.id]=='2'" type="success" :value="getDeptLen(scope.row.id)" :max="99" class="item" :show-zero="false">{{item.label}}</el-badge>
|
||||
<el-badge v-if="item.value.toString()=='2' && menuAuthData[scope.row.id]=='2'" type="success" :value="getDeptLen(scope.row.id)" :max="99" class="item" :show-zero="false">{{item.label}}</el-badge>
|
||||
<span v-else>{{item.label}}</span>
|
||||
</el-radio>
|
||||
</template>
|
||||
@ -91,281 +91,239 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, getCurrentInstance, nextTick, reactive, ref} from "vue";
|
||||
<script setup lang="ts">
|
||||
import {getCurrentInstance, nextTick, reactive, ref} from "vue";
|
||||
import {dataScope, getRole, roleDeptTreeSelect, roleMenuTreeSelect} from "/@/api/system/role";
|
||||
import {ElMessage} from "element-plus/es";
|
||||
import {findChildrenByPid, flattenTree} from "/@/utils/gfast";
|
||||
import * as events from "events";
|
||||
|
||||
export default defineComponent({
|
||||
name: "dataScope",
|
||||
computed: {
|
||||
events() {
|
||||
return events
|
||||
}
|
||||
},
|
||||
setup(props,{emit}){
|
||||
const tableRef = ref()
|
||||
const openSelDept = ref(false);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const openDataScope = ref(false)
|
||||
const deptExpand = ref(true)
|
||||
const deptNodeAll = ref(false)
|
||||
const deptOptions = ref<Array<any>>([])
|
||||
const menuOptions = ref([])
|
||||
const deptRef = ref();
|
||||
const formRef = ref();
|
||||
const deptCheckStrictly = ref(false)
|
||||
const optionsActionValue = ref("0")
|
||||
const setDeptId = ref(0)
|
||||
const deptProps = ref({
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
})
|
||||
// 数据范围选项
|
||||
const dataScopeOptions = ref([
|
||||
{
|
||||
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
|
||||
}
|
||||
}
|
||||
defineOptions({ name: "dataScope"})
|
||||
const emit = defineEmits(["getRoleList"])
|
||||
const tableRef = ref()
|
||||
const openSelDept = ref(false);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const openDataScope = ref(false)
|
||||
const deptExpand = ref(true)
|
||||
const deptNodeAll = ref(false)
|
||||
const deptOptions = ref<Array<any>>([])
|
||||
const menuOptions = ref([])
|
||||
const deptRef = ref();
|
||||
const formRef = ref();
|
||||
const deptCheckStrictly = ref(false)
|
||||
const optionsActionValue = ref("0")
|
||||
const setDeptId = ref(0)
|
||||
const deptProps = ref({
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
})
|
||||
// 数据范围选项
|
||||
const dataScopeOptions = ref([
|
||||
{
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -43,22 +43,22 @@
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
|
||||
<el-form-item label="有效时间">
|
||||
<el-radio-group v-model="formData.effectiveType">
|
||||
<el-radio :label="0">不设置</el-radio>
|
||||
<el-radio :label="1">按起止日期</el-radio>
|
||||
<el-radio :label="2">按时间段</el-radio>
|
||||
<el-radio :value="0">不设置</el-radio>
|
||||
<el-radio :value="1">按起止日期</el-radio>
|
||||
<el-radio :value="2">按时间段</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="formData.effectiveType===2">
|
||||
<el-form-item label="每周">
|
||||
<el-checkbox-group v-model="formData.weekDay">
|
||||
<el-checkbox :label="1" >周一</el-checkbox>
|
||||
<el-checkbox :label="2" >周二</el-checkbox>
|
||||
<el-checkbox :label="3" >周三</el-checkbox>
|
||||
<el-checkbox :label="4" >周四</el-checkbox>
|
||||
<el-checkbox :label="5" >周五</el-checkbox>
|
||||
<el-checkbox :label="6" >周六</el-checkbox>
|
||||
<el-checkbox :label="0" >周日</el-checkbox>
|
||||
<el-checkbox :value="1" >周一</el-checkbox>
|
||||
<el-checkbox :value="2" >周二</el-checkbox>
|
||||
<el-checkbox :value="3" >周三</el-checkbox>
|
||||
<el-checkbox :value="4" >周四</el-checkbox>
|
||||
<el-checkbox :value="5" >周五</el-checkbox>
|
||||
<el-checkbox :value="6" >周六</el-checkbox>
|
||||
<el-checkbox :value="0" >周日</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -120,7 +120,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
|
||||
import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
|
||||
import {ElMessage} from "element-plus";
|
||||
@ -162,190 +162,175 @@ interface RoleState {
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditRole',
|
||||
props:{
|
||||
roleData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
defineOptions({ name: "systemEditRole"})
|
||||
const props = defineProps({
|
||||
roleData:{
|
||||
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;
|
||||
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:[],
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name:[
|
||||
{required: true, message: "角色名称不能为空", trigger: "blur"},
|
||||
]
|
||||
},
|
||||
menuData: [],
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
disabled:'disabled'
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
getMenuData();
|
||||
if(row) {
|
||||
getRole(row.id).then((res:any)=>{
|
||||
if(res.data.role){
|
||||
state.formData = res.data.role;
|
||||
if(!state.formData.weekDay){
|
||||
state.formData.weekDay = [1,2,3,4,5]
|
||||
}
|
||||
state.formData.menuIds = res.data.menuIds??[]
|
||||
}
|
||||
// 表单校验
|
||||
rules: {
|
||||
name:[
|
||||
{required: true, message: "角色名称不能为空", trigger: "blur"},
|
||||
]
|
||||
},
|
||||
menuData: [],
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
disabled:'disabled'
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
getMenuData();
|
||||
if(row) {
|
||||
getRole(row.id).then((res:any)=>{
|
||||
if(res.data.role){
|
||||
state.formData = res.data.role;
|
||||
if(!state.formData.weekDay){
|
||||
state.formData.weekDay = [1,2,3,4,5]
|
||||
}
|
||||
state.formData.menuIds = res.data.menuIds??[]
|
||||
}
|
||||
})
|
||||
}
|
||||
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;
|
||||
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;
|
||||
})
|
||||
}
|
||||
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) => {
|
||||
menuRef.value.setCheckedNodes(value ? state.menuData : []);
|
||||
}
|
||||
/** 树权限（全选/全不选） */
|
||||
const handleCheckedTreeNodeAll = (value:any) => {
|
||||
menuRef.value.setCheckedNodes(value ? state.menuData : []);
|
||||
}
|
||||
|
||||
/** 树权限（父子联动） */
|
||||
const handleCheckedTreeConnect = (value:any) => {
|
||||
state.menuCheckStrictly = value ? true : false;
|
||||
}
|
||||
/** 树权限（父子联动） */
|
||||
const handleCheckedTreeConnect = (value:any) => {
|
||||
state.menuCheckStrictly = value ? true : false;
|
||||
}
|
||||
|
||||
/** 所有菜单节点数据 */
|
||||
function getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = menuRef.value.getCheckedKeys();
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
}
|
||||
/** 所有菜单节点数据 */
|
||||
function getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = menuRef.value.getCheckedKeys();
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
}
|
||||
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
handleCheckedTreeExpand,
|
||||
handleCheckedTreeNodeAll,
|
||||
handleCheckedTreeConnect,
|
||||
resetMenuSession,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
// 重置菜单session
|
||||
const resetMenuSession = () => {
|
||||
refreshBackEndControlRoutes();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<el-input v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable style="width:120px;">
|
||||
<el-select placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable style="width: 120px;">
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
@ -77,7 +77,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
|
||||
import { ElMessageBox, ElMessage,ElLoading } from 'element-plus';
|
||||
import EditRole from '/@/views/system/role/component/editRole.vue';
|
||||
@ -118,197 +118,170 @@ interface TableDataState {
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemRoleList',
|
||||
components: {selectUser, EditRole,DataScope,UserList},
|
||||
setup() {
|
||||
const selectUserRef = ref()
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const {sys_user_sex} = proxy.useDict('sys_user_sex')
|
||||
const addRoleRef = ref();
|
||||
const userListRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef =ref();
|
||||
const roleListData = ref<Array<TableData>>()
|
||||
const roleUsers = ref([])
|
||||
const setRole = ref(0)
|
||||
const state = reactive<TableDataState>({
|
||||
isShowDialog: false,
|
||||
deptData: [],
|
||||
userListParam: {
|
||||
roleId: undefined,
|
||||
},
|
||||
selectRow:{},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = ()=>{
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.tableData.param).then(res=>{
|
||||
const list = res.data.list??[]
|
||||
list.map((item:TableData)=>{
|
||||
data.push({
|
||||
id:item.id,
|
||||
pid:item.pid,
|
||||
status: item.status,
|
||||
listOrder: item.listOrder,
|
||||
name: item.name,
|
||||
remark: item.remark,
|
||||
dataScope:item.dataScope,
|
||||
userCnt:item.userCnt,
|
||||
createdAt: item.createdAt,
|
||||
});
|
||||
})
|
||||
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
|
||||
if (state.deptData.length == 0){
|
||||
getDeptTree().then((res:any)=>{
|
||||
state.deptData = res.data.deps
|
||||
state.isShowDialog = true
|
||||
})
|
||||
}else{
|
||||
state.isShowDialog = true
|
||||
}
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object|undefined) => {
|
||||
editRoleRef.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
|
||||
getUsersById(row.id).then((res:any)=>{
|
||||
ld.close()
|
||||
roleUsers.value=res.data.userList??[]
|
||||
selectUserRef.value.openDialog()
|
||||
defineOptions({ name: "apiV1SystemRoleList"})
|
||||
const selectUserRef = ref()
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const {sys_user_sex} = proxy.useDict('sys_user_sex')
|
||||
const addRoleRef = ref();
|
||||
const userListRef = ref();
|
||||
const editRoleRef = ref();
|
||||
const dataScopeRef =ref();
|
||||
const roleListData = ref<Array<TableData>>()
|
||||
const roleUsers = ref([])
|
||||
const setRole = ref(0)
|
||||
const state = reactive<TableDataState>({
|
||||
isShowDialog: false,
|
||||
deptData: [],
|
||||
userListParam: {
|
||||
roleId: undefined,
|
||||
},
|
||||
selectRow:{},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
roleName: '',
|
||||
roleStatus: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
const { tableData,selectRow,deptData,userListParam,isShowDialog} = toRefs(state);
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
roleList()
|
||||
};
|
||||
const roleList = ()=>{
|
||||
const data: Array<TableData> = [];
|
||||
getRoleList(state.tableData.param).then(res=>{
|
||||
const list = res.data.list??[]
|
||||
list.map((item:TableData)=>{
|
||||
data.push({
|
||||
id:item.id,
|
||||
pid:item.pid,
|
||||
status: item.status,
|
||||
listOrder: item.listOrder,
|
||||
name: item.name,
|
||||
remark: item.remark,
|
||||
dataScope:item.dataScope,
|
||||
userCnt:item.userCnt,
|
||||
createdAt: item.createdAt,
|
||||
});
|
||||
})
|
||||
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
|
||||
if (state.deptData.length == 0){
|
||||
getDeptTree().then((res:any)=>{
|
||||
state.deptData = res.data.deps
|
||||
state.isShowDialog = true
|
||||
})
|
||||
}else{
|
||||
state.isShowDialog = true
|
||||
}
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = () => {
|
||||
editRoleRef.value.openDialog();
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (row: Object|undefined) => {
|
||||
editRoleRef.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
|
||||
getUsersById(row.id).then((res:any)=>{
|
||||
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();
|
||||
})
|
||||
})
|
||||
// 删除角色
|
||||
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 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),
|
||||
};
|
||||
},
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
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()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.auth-action{
|
||||
|
||||
@ -76,180 +76,162 @@
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
|
||||
import {
|
||||
listSysJob,
|
||||
getSysJob,
|
||||
delSysJob,
|
||||
addSysJob,
|
||||
updateSysJob,
|
||||
getUserList, getJobLogs, delSysJobLog,
|
||||
} from "/@/api/system/tools/job/sysJob";
|
||||
import {
|
||||
SysJobTableColumns,
|
||||
SysJobInfoData,
|
||||
SysJobTableDataState,
|
||||
SysJobEditState, SysJobLog, SysJobLogData,
|
||||
} from "/@/views/system/sysJob/list/component/model"
|
||||
export default defineComponent({
|
||||
name:"apiV1SystemSysJobDetail",
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
jobGroupOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
misfirePolicyOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
statusOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
// 非多个禁用
|
||||
const multiple =ref(true)
|
||||
const logList = reactive<SysJobLog>({
|
||||
logIds:[],
|
||||
data: [],
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
targetName: undefined
|
||||
},
|
||||
total: 0
|
||||
})
|
||||
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: {}
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: SysJobInfoData) => {
|
||||
resetForm();
|
||||
if(row) {
|
||||
getSysJob(row.jobId!).then((res:any)=>{
|
||||
state.formData = res.data;
|
||||
})
|
||||
logList.loading=true
|
||||
getLogList(row.invokeTarget!);
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
const getLogList = (invokeTarget:string)=>{
|
||||
logList.param.targetName=invokeTarget
|
||||
getJobLogs(logList.param).then((res:any)=>{
|
||||
logList.data = res.data.list||[];
|
||||
logList.total=res.data.total;
|
||||
logList.loading=false;
|
||||
})
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
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),
|
||||
};
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
|
||||
import {
|
||||
listSysJob,
|
||||
getSysJob,
|
||||
delSysJob,
|
||||
addSysJob,
|
||||
updateSysJob,
|
||||
getUserList, getJobLogs, delSysJobLog,
|
||||
} from "/@/api/system/tools/job/sysJob";
|
||||
import {
|
||||
SysJobTableColumns,
|
||||
SysJobInfoData,
|
||||
SysJobTableDataState,
|
||||
SysJobEditState, SysJobLog, SysJobLogData,
|
||||
} from "/@/views/system/sysJob/list/component/model"
|
||||
defineOptions({ name: "apiV1SystemSysJobDetail"})
|
||||
const props = defineProps({
|
||||
jobGroupOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
misfirePolicyOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
statusOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
})
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
// 非多个禁用
|
||||
const multiple =ref(true)
|
||||
const logList = reactive<SysJobLog>({
|
||||
logIds:[],
|
||||
data: [],
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
targetName: undefined
|
||||
},
|
||||
total: 0
|
||||
})
|
||||
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: {}
|
||||
});
|
||||
const { isShowDialog,formData} = toRefs(state)
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: SysJobInfoData) => {
|
||||
resetForm();
|
||||
if(row) {
|
||||
getSysJob(row.jobId!).then((res:any)=>{
|
||||
state.formData = res.data;
|
||||
})
|
||||
logList.loading=true
|
||||
getLogList(row.invokeTarget!);
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
defineExpose({openDialog})
|
||||
const getLogList = (invokeTarget:string)=>{
|
||||
logList.param.targetName=invokeTarget
|
||||
getJobLogs(logList.param).then((res:any)=>{
|
||||
logList.data = res.data.list||[];
|
||||
logList.total=res.data.total;
|
||||
logList.loading=false;
|
||||
})
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
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>
|
||||
<style scoped>
|
||||
.system-sysJob-detail :deep(.el-form-item--large .el-form-item__label){
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<el-radio
|
||||
v-for="dict in misfirePolicyOptions"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
:value="dict.value"
|
||||
>{{dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
@ -65,7 +65,7 @@
|
||||
<el-radio
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
:value="dict.value"
|
||||
>{{dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
@ -82,7 +82,7 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance } from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
|
||||
import {
|
||||
@ -99,144 +99,135 @@ import {
|
||||
SysJobTableDataState,
|
||||
SysJobEditState,
|
||||
} from "/@/views/system/sysJob/list/component/model"
|
||||
export default defineComponent({
|
||||
name:"apiV1SystemSysJobEdit",
|
||||
components:{
|
||||
defineOptions({ name: "apiV1SystemSysJobEdit"})
|
||||
const props = defineProps({
|
||||
jobGroupOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
props:{
|
||||
jobGroupOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
misfirePolicyOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
statusOptions:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
misfirePolicyOptions:{
|
||||
type:Array,
|
||||
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>
|
||||
<style scoped lang="scss">
|
||||
.cronExpression-rule{
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
></apiV1SystemSysJobDetail>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ItemOptions } from '/@/api/items';
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue';
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
||||
@ -135,202 +135,167 @@ import { listSysJob, getSysJob, delSysJob, addSysJob, updateSysJob, getUserList,
|
||||
import { SysJobTableColumns, SysJobInfoData, SysJobTableDataState } from '/@/views/system/sysJob/list/component/model';
|
||||
import apiV1SystemSysJobEdit from '/@/views/system/sysJob/list/component/edit.vue';
|
||||
import apiV1SystemSysJobDetail from '/@/views/system/sysJob/list/component/detail.vue';
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemSysJobList',
|
||||
components: {
|
||||
apiV1SystemSysJobEdit,
|
||||
apiV1SystemSysJobDetail,
|
||||
},
|
||||
setup() {
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const loading = ref(false);
|
||||
const queryRef = ref();
|
||||
const editRef = ref();
|
||||
const detailRef = ref();
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false);
|
||||
// 非单个禁用
|
||||
const single = ref(true);
|
||||
// 非多个禁用
|
||||
const multiple = ref(true);
|
||||
const word = computed(() => {
|
||||
if (showAll.value === false) {
|
||||
//对文字进行处理
|
||||
return '展开搜索';
|
||||
} else {
|
||||
return '收起搜索';
|
||||
}
|
||||
});
|
||||
// 字典选项数据
|
||||
const { sys_job_group, sys_job_policy, sys_job_status } = proxy.useDict('sys_job_group', 'sys_job_policy', 'sys_job_status');
|
||||
const 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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "apiV1SystemSysJobList"})
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
const loading = ref(false);
|
||||
const queryRef = ref();
|
||||
const editRef = ref();
|
||||
const detailRef = ref();
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false);
|
||||
// 非单个禁用
|
||||
const single = ref(true);
|
||||
// 非多个禁用
|
||||
const multiple = ref(true);
|
||||
const word = computed(() => {
|
||||
if (showAll.value === false) {
|
||||
//对文字进行处理
|
||||
return '展开搜索';
|
||||
} else {
|
||||
return '收起搜索';
|
||||
}
|
||||
});
|
||||
// 字典选项数据
|
||||
const { sys_job_group, sys_job_policy, sys_job_status } = proxy.useDict('sys_job_group', 'sys_job_policy', 'sys_job_status');
|
||||
const 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>
|
||||
<style lang="scss" scoped>
|
||||
.colBlock {
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {reactive, onMounted, toRefs, defineComponent, ref, unref, getCurrentInstance} from 'vue';
|
||||
import { ElMessage} from 'element-plus';
|
||||
import {
|
||||
@ -95,194 +95,174 @@ import {
|
||||
SysNoticeInfoData,
|
||||
SysNoticeEditState
|
||||
} from "/@/views/system/sysNotice/list/component/model"
|
||||
|
||||
export default defineComponent({
|
||||
name: "NoticeMessageEdit",
|
||||
components: {
|
||||
GfUeditor,
|
||||
defineOptions({ name: "NoticeMessageEdit"})
|
||||
const props = defineProps({
|
||||
tagOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
props: {
|
||||
tagOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(["sysNoticeList"]);
|
||||
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,
|
||||
},
|
||||
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: {
|
||||
id: [
|
||||
{required: true, message: "ID不能为空", trigger: "blur"}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: "标题不能为空", trigger: "blur"}
|
||||
],
|
||||
type: [
|
||||
{required: true, message: "类型不能为空", trigger: "blur"}
|
||||
],
|
||||
content: [
|
||||
{required: true, message: "内容不能为空", trigger: "blur"}
|
||||
],
|
||||
status: [
|
||||
{required: true, message: "状态不能为空", trigger: "blur"}
|
||||
],
|
||||
// 表单校验
|
||||
rules: {
|
||||
id: [
|
||||
{required: true, message: "ID不能为空", trigger: "blur"}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: "标题不能为空", trigger: "blur"}
|
||||
],
|
||||
type: [
|
||||
{required: true, message: "类型不能为空", trigger: "blur"}
|
||||
],
|
||||
content: [
|
||||
{required: true, message: "内容不能为空", trigger: "blur"}
|
||||
],
|
||||
status: [
|
||||
{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)
|
||||
});
|
||||
}
|
||||
});
|
||||
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
|
||||
data.status = parseInt(data.status)
|
||||
state.formData = data;
|
||||
data.tag = '' + data.tag
|
||||
data.status = parseInt(data.status)
|
||||
state.formData = data;
|
||||
})
|
||||
}
|
||||
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
|
||||
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
|
||||
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;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
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 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
|
||||
}
|
||||
defineExpose({openDialog,setType})
|
||||
</script>
|
||||
<style scoped>
|
||||
.kv-label {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</el-col>
|
||||
<el-col :span="5" class="colBlock">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px;">
|
||||
<el-select v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 160px">
|
||||
<el-option label="正常" :value="1"/>
|
||||
<el-option label="停用" :value="0"/>
|
||||
</el-select>
|
||||
@ -24,7 +24,7 @@
|
||||
</el-col>
|
||||
<el-col :span="5" class="colBlock">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 160px;">
|
||||
<el-select v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 160px">
|
||||
<el-option label="通知" value="1"/>
|
||||
<el-option label="公告" value="2"/>
|
||||
</el-select>
|
||||
@ -32,7 +32,7 @@
|
||||
</el-col>
|
||||
<el-col :span="5" class="colBlock">
|
||||
<el-form-item label="标签" prop="tag">
|
||||
<el-select v-model="tableData.param.tag" placeholder="请选择标签" clearable style="width: 160px;">
|
||||
<el-select v-model="tableData.param.tag" placeholder="请选择标签" clearable style="width: 160px">
|
||||
<el-option
|
||||
v-for="dict in notice_tag"
|
||||
:key="dict.value"
|
||||
@ -193,172 +193,146 @@
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
import {
|
||||
listSysNotice,
|
||||
delSysNotice,
|
||||
} from "/src/api/system/notice/sysNotice";
|
||||
} from "/@/api/system/notice/sysNotice";
|
||||
import {
|
||||
SysNoticeTableColumns,
|
||||
SysNoticeInfoData,
|
||||
SysNoticeTableDataState,
|
||||
} from "/@/views/system/sysNotice/list/component/model"
|
||||
import NoticeMessageEdit from "/@/views/system/sysNotice/list/component/NoticeMessageEdit.vue"
|
||||
export default defineComponent({
|
||||
name: "apiV1SystemSysNoticeList",
|
||||
components: {
|
||||
NoticeMessageEdit
|
||||
},
|
||||
setup() {
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const queryRef = ref()
|
||||
const editRef = ref();
|
||||
defineOptions({ name: "apiV1SystemSysNoticeList"})
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const queryRef = ref()
|
||||
const editRef = ref();
|
||||
|
||||
// 是否显示所有搜索选项
|
||||
const showAll = ref(false)
|
||||
// 非单个禁用
|
||||
const single = ref(true)
|
||||
// 非多个禁用
|
||||
const multiple = ref(true)
|
||||
const word = computed(() => {
|
||||
if (showAll.value === false) {
|
||||
//对文字进行处理
|
||||
return "展开搜索";
|
||||
} else {
|
||||
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 showAll = ref(false)
|
||||
// 非单个禁用
|
||||
const single = ref(true)
|
||||
// 非多个禁用
|
||||
const multiple = ref(true)
|
||||
const word = computed(() => {
|
||||
if (showAll.value === false) {
|
||||
//对文字进行处理
|
||||
return "展开搜索";
|
||||
} else {
|
||||
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: []
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.colBlock {
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {useRoute} from "vue-router";
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
@ -102,122 +102,107 @@ import {
|
||||
SysNoticeTableDataState,
|
||||
} from "/@/views/system/sysNotice/list/component/model"
|
||||
import {readNotice} from "/@/api/system/notice/sysNoticeRead";
|
||||
|
||||
export default defineComponent({
|
||||
name: "",
|
||||
components: {},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const state = reactive<SysNoticeTableDataState>({
|
||||
ids: [],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
type: 1,
|
||||
tag: undefined,
|
||||
status: undefined,
|
||||
createdAt: undefined,
|
||||
dateRange: []
|
||||
},
|
||||
},
|
||||
});
|
||||
// 页面加载时
|
||||
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),
|
||||
}
|
||||
defineOptions({ name: "apiV1SystemSysNoticeShow"})
|
||||
const route = useRoute();
|
||||
const {proxy} = <any>getCurrentInstance()
|
||||
const loading = ref(false)
|
||||
const state = reactive<SysNoticeTableDataState>({
|
||||
ids: [],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
title: undefined,
|
||||
type: 1,
|
||||
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)
|
||||
}
|
||||
})
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.el_icon {
|
||||
|
||||
@ -104,77 +104,64 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, reactive, ref, unref } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { inject, reactive, ref, unref } from 'vue';
|
||||
import type { FormInstance, FormRules } from 'element-plus';
|
||||
import type { TableDataInfo } from '/@/views/system/tools/gen/component/model';
|
||||
import { ElMessage } from 'element-plus';
|
||||
export default defineComponent({
|
||||
name: 'toolsBasicInfoForm',
|
||||
emits: ['goNext','close'],
|
||||
setup(props, { emit }) {
|
||||
const basicInfoFormRef = ref<FormInstance>();
|
||||
const overwriteOptions = ref([
|
||||
{key:"api",name:"覆盖api"},
|
||||
{key:"controller",name:"覆盖controller"},
|
||||
{key:"dao",name:"覆盖dao"},
|
||||
{key:"dao_internal",name:"覆盖dao_internal"},
|
||||
{key:"logic",name:"覆盖logic"},
|
||||
{key:"model",name:"覆盖model"},
|
||||
{key:"model_do",name:"覆盖model_do"},
|
||||
{key:"model_entity",name:"覆盖model_entity"},
|
||||
{key:"router",name:"覆盖router"},
|
||||
{key:"router_func",name:"覆盖router_func"},
|
||||
{key:"service",name:"覆盖service"},
|
||||
{key:"sql",name:"覆盖菜单sql"},
|
||||
{key:"tsApi",name:"覆盖tsApi"},
|
||||
{key:"tsModel",name:"覆盖tsModel"},
|
||||
{key:"vue",name:"覆盖vue-list"},
|
||||
{key:"vueDetail",name:"覆盖vue-detail"},
|
||||
{key:"vueEdit",name:"覆盖vue-edit"},
|
||||
])
|
||||
const info = inject<TableDataInfo>('tableData') as TableDataInfo;
|
||||
const nextTip = (): boolean => {
|
||||
//表单验证
|
||||
let tag = false;
|
||||
const formWrap = unref(basicInfoFormRef) 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')
|
||||
defineOptions({ name: "toolsBasicInfoForm"})
|
||||
const emit = defineEmits(['goNext','close']);
|
||||
const basicInfoFormRef = ref<FormInstance>();
|
||||
const overwriteOptions = ref([
|
||||
{key:"api",name:"覆盖api"},
|
||||
{key:"controller",name:"覆盖controller"},
|
||||
{key:"dao",name:"覆盖dao"},
|
||||
{key:"dao_internal",name:"覆盖dao_internal"},
|
||||
{key:"logic",name:"覆盖logic"},
|
||||
{key:"model",name:"覆盖model"},
|
||||
{key:"model_do",name:"覆盖model_do"},
|
||||
{key:"model_entity",name:"覆盖model_entity"},
|
||||
{key:"router",name:"覆盖router"},
|
||||
{key:"router_func",name:"覆盖router_func"},
|
||||
{key:"service",name:"覆盖service"},
|
||||
{key:"sql",name:"覆盖菜单sql"},
|
||||
{key:"tsApi",name:"覆盖tsApi"},
|
||||
{key:"tsModel",name:"覆盖tsModel"},
|
||||
{key:"vue",name:"覆盖vue-list"},
|
||||
{key:"vueDetail",name:"覆盖vue-detail"},
|
||||
{key:"vueEdit",name:"覆盖vue-edit"},
|
||||
])
|
||||
const info = inject<TableDataInfo>('tableData') as TableDataInfo;
|
||||
const nextTip = (): boolean => {
|
||||
//表单验证
|
||||
let tag = false;
|
||||
const formWrap = unref(basicInfoFormRef) as any;
|
||||
if (!formWrap) return false;
|
||||
formWrap.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
emit('goNext');
|
||||
tag = true;
|
||||
} else {
|
||||
ElMessage.error('请将表单填写完整');
|
||||
}
|
||||
const overwriteChange = (value:boolean)=>{
|
||||
info.value.overwriteInfo.map((item:any)=>{
|
||||
item.value = value
|
||||
})
|
||||
}
|
||||
const rules = reactive<FormRules>({
|
||||
tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
|
||||
tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
|
||||
functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
|
||||
sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }],
|
||||
sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }],
|
||||
});
|
||||
return {
|
||||
basicInfoFormRef,
|
||||
info,
|
||||
rules,
|
||||
overwriteOptions,
|
||||
nextTip,
|
||||
overwriteChange,
|
||||
close
|
||||
};
|
||||
},
|
||||
});
|
||||
return tag;
|
||||
};
|
||||
const close = ()=>{
|
||||
emit('close')
|
||||
}
|
||||
const overwriteChange = (value:boolean)=>{
|
||||
info.value.overwriteInfo.map((item:any)=>{
|
||||
item.value = value
|
||||
})
|
||||
}
|
||||
const rules = reactive<FormRules>({
|
||||
tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
|
||||
tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
|
||||
functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
|
||||
sortColumn: [{ required: true, message: '请选择排序字段', trigger: 'blur' }],
|
||||
sortType: [{ required: true, message: '请选择排序类型', trigger: 'blur' }],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<el-col :span="4"></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<tools-basic-info-form ref="toolsBasicInfoForm" v-show="active === 1" @goNext="goNext" @close="close"></tools-basic-info-form>
|
||||
<gen-info-form ref="genInfoForm" v-show="active === 2" @goNext="goNext" @close="close"></gen-info-form>
|
||||
<gen-table-columns ref="tableColumns" v-show="active === 3"></gen-table-columns>
|
||||
<toolsBasicInfoForm ref="toolsBasicInfoFormRef" v-show="active === 1" @goNext="goNext" @close="close"></toolsBasicInfoForm>
|
||||
<genInfoForm ref="genInfoFormRef" v-show="active === 2" @goNext="goNext" @close="close"></genInfoForm>
|
||||
<genTableColumns ref="tableColumnsRef" v-show="active === 3"></genTableColumns>
|
||||
<div class="tools-footer" v-show="active === 3">
|
||||
<el-button size="default" @click="close">关 闭</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">保 存</el-button>
|
||||
@ -34,8 +34,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, ref, provide, getCurrentInstance} from 'vue';
|
||||
<script setup lang="ts">
|
||||
import {onBeforeMount, ref, provide, getCurrentInstance} from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import toolsBasicInfoForm from '/@/views/system/tools/gen/component/basicInfo.vue';
|
||||
import { TableColumns, TableDataInfo } from '/@/views/system/tools/gen/component/model';
|
||||
@ -43,146 +43,130 @@ import { ElMessage } from 'element-plus/es';
|
||||
import {getGenTable, saveEdit} from '/@/api/system/tools/gen';
|
||||
import genInfoForm from '/@/views/system/tools/gen/component/genInfoForm.vue';
|
||||
import genTableColumns from '/@/views/system/tools/gen/component/tableColumns.vue';
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemToolsGenColumnList',
|
||||
components: { toolsBasicInfoForm, genInfoForm,genTableColumns },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const route = useRoute();
|
||||
const toolsBasicInfoForm = ref();
|
||||
const genInfoForm = ref();
|
||||
const tableColumns = ref()
|
||||
const active = ref(1);
|
||||
defineOptions({ name: "apiV1SystemToolsGenColumnEdit"})
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const route = useRoute();
|
||||
const toolsBasicInfoFormRef = ref();
|
||||
const genInfoFormRef = ref();
|
||||
const tableColumnsRef = ref()
|
||||
const active = ref(1);
|
||||
|
||||
const changeSteps = (args: number) => {
|
||||
if (args > active.value) {
|
||||
switch (args) {
|
||||
case 2:
|
||||
//验证基本信息表单
|
||||
if (toolsBasicInfoForm.value.nextTip()) {
|
||||
active.value = args;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
//验证生成信息表单
|
||||
if (active.value==1){
|
||||
//验证基本信息表单
|
||||
if (toolsBasicInfoForm.value.nextTip()) {
|
||||
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('请将表单填写完整')
|
||||
const changeSteps = (args: number) => {
|
||||
if (args > active.value) {
|
||||
switch (args) {
|
||||
case 2:
|
||||
//验证基本信息表单
|
||||
if (toolsBasicInfoFormRef.value.nextTip()) {
|
||||
active.value = args;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
//验证生成信息表单
|
||||
if (active.value==1){
|
||||
//验证基本信息表单
|
||||
if (toolsBasicInfoFormRef.value.nextTip()) {
|
||||
active.value = args;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const onSubmit = () => {
|
||||
Promise.all([
|
||||
formRulesValidate('toolsBasicInfoForm', 'basicInfoFormRef'),
|
||||
formRulesValidate('genInfoForm', '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 }));
|
||||
}else{
|
||||
//验证生成信息表单
|
||||
if (genInfoFormRef.value.nextTip()) {
|
||||
active.value = args;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
return {
|
||||
toolsBasicInfoForm,
|
||||
genInfoForm,
|
||||
tableColumns,
|
||||
active,
|
||||
changeSteps,
|
||||
info,
|
||||
onSubmit,
|
||||
goNext,
|
||||
close
|
||||
};
|
||||
},
|
||||
} 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('请将表单填写完整')
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -150,64 +150,53 @@
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {defineComponent, inject, reactive, ref, unref} from 'vue';
|
||||
import type { FormInstance, FormRules } from 'element-plus';
|
||||
import { TableDataInfo } from '/@/views/system/tools/gen/component/model';
|
||||
import {ElMessage} from "element-plus";
|
||||
import {Ref, UnwrapRef} from "@vue/reactivity";
|
||||
export default defineComponent({
|
||||
name: 'genInfoForm',
|
||||
emits:['goNext','close'],
|
||||
setup(props,{emit}) {
|
||||
const genInfoFormRef = ref<FormInstance>();
|
||||
const info = inject<Ref<UnwrapRef<TableDataInfo>>>('tableData') as Ref<UnwrapRef<TableDataInfo>>;
|
||||
const rules = reactive<FormRules>({
|
||||
tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
|
||||
packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
|
||||
moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
|
||||
businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
|
||||
functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
|
||||
});
|
||||
const nextTip = ()=>{
|
||||
//表单验证
|
||||
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
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "genInfoForm"})
|
||||
const emit = defineEmits(['goNext','close']);
|
||||
const genInfoFormRef = ref<FormInstance>();
|
||||
const info = inject<Ref<UnwrapRef<TableDataInfo>>>('tableData') as Ref<UnwrapRef<TableDataInfo>>;
|
||||
const rules = reactive<FormRules>({
|
||||
tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
|
||||
packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
|
||||
moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
|
||||
businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
|
||||
functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
|
||||
});
|
||||
const nextTip = ()=>{
|
||||
//表单验证
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -48,85 +48,69 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {defineComponent, reactive, ref, toRefs} from "vue";
|
||||
import {ImportTableDataState,TableData} from "/@/views/system/tools/gen/component/model"
|
||||
import {getImportTableList, importTable} from "/@/api/system/tools/gen";
|
||||
import {ElMessage} from "element-plus/es";
|
||||
export default defineComponent({
|
||||
name: "importTable",
|
||||
emits:['ok'],
|
||||
setup(prop,{emit}) {
|
||||
const queryFormRef = ref()
|
||||
const tableRef = ref()
|
||||
const visible = ref(false)
|
||||
// 选中数组值
|
||||
let tables:string[] = []
|
||||
const state = reactive<ImportTableDataState>({
|
||||
tableData:{
|
||||
data:[],
|
||||
total:0,
|
||||
loading:true,
|
||||
param:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "importTable"})
|
||||
const emit = defineEmits(['ok'])
|
||||
const queryFormRef = ref()
|
||||
const tableRef = ref()
|
||||
const visible = ref(false)
|
||||
// 选中数组值
|
||||
let tables:string[] = []
|
||||
const state = reactive<ImportTableDataState>({
|
||||
tableData:{
|
||||
data:[],
|
||||
total:0,
|
||||
loading:true,
|
||||
param:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: '',
|
||||
tableComment: ''
|
||||
},
|
||||
}
|
||||
})
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -25,56 +25,48 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted} from "vue";
|
||||
import {previewState} from "/@/views/system/tools/gen/component/model";
|
||||
import {showPreview} from "/@/api/system/tools/gen";
|
||||
import MyCodeMirror from "/@/components/myCodeMirror/index.vue";
|
||||
import { ElLoading } from 'element-plus'
|
||||
export default defineComponent({
|
||||
name: "genCodePreview",
|
||||
components: {MyCodeMirror},
|
||||
setup(){
|
||||
const height = ref(400)
|
||||
// 预览参数
|
||||
const preview:previewState = reactive({
|
||||
flush: true,
|
||||
fullscreen: false,
|
||||
open: false,
|
||||
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)
|
||||
}
|
||||
},
|
||||
defineOptions({ name: "genCodePreview"})
|
||||
const height = ref(400)
|
||||
// 预览参数
|
||||
const preview:previewState = reactive({
|
||||
flush: true,
|
||||
fullscreen: false,
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
data: {},
|
||||
activeName: "api"
|
||||
})
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -66,86 +66,72 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {defineComponent, reactive, ref, toRefs} from "vue";
|
||||
import {ImportTableDataState, TableColumns, TableData} from "/@/views/system/tools/gen/component/model"
|
||||
import {getRelationTable, importTable} from "/@/api/system/tools/gen";
|
||||
import {ElMessage} from "element-plus/es";
|
||||
export default defineComponent({
|
||||
name: "relationTable",
|
||||
emits:['ok'],
|
||||
setup(prop,{emit}) {
|
||||
const queryFormRef = ref()
|
||||
const tableRef = ref()
|
||||
const visible = ref(false)
|
||||
const columnId = ref<number>()
|
||||
const state = reactive<ImportTableDataState>({
|
||||
tableData:{
|
||||
data:[],
|
||||
total:0,
|
||||
loading:true,
|
||||
param:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
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),
|
||||
};
|
||||
defineOptions({ name: "relationTable"})
|
||||
const emit = defineEmits(['ok'])
|
||||
const queryFormRef = ref()
|
||||
const tableRef = ref()
|
||||
const visible = ref(false)
|
||||
const columnId = ref<number>()
|
||||
const state = reactive<ImportTableDataState>({
|
||||
tableData:{
|
||||
data:[],
|
||||
total:0,
|
||||
loading:true,
|
||||
param:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: '',
|
||||
tableComment: ''
|
||||
},
|
||||
}
|
||||
})
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -158,16 +158,11 @@
|
||||
<textarea class="el-textarea__inner" v-model.lazy="scope.row.minWidth" ></textarea>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情占列" width="70">
|
||||
<el-table-column label="详情占列" width="100">
|
||||
<template #default="scope">
|
||||
<textarea class="el-textarea__inner" v-model.lazy="scope.row.colSpan" ></textarea>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情起新行" width="50">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-value="1" v-model="scope.row.isRowStart"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型" width="160">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||||
@ -202,67 +197,51 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, inject, nextTick, onBeforeMount, ref} from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { inject, onBeforeMount, ref} from 'vue';
|
||||
import type { FormInstance } from 'element-plus';
|
||||
import {DictOpt, TableColumns, TableDataInfo} from '/@/views/system/tools/gen/component/model';
|
||||
import {optionselect} from "/@/api/system/dict/type";
|
||||
import RelationTable from "/@/views/system/tools/gen/component/relationTable.vue";
|
||||
import importTable from "/@/views/system/tools/gen/component/importTable.vue";
|
||||
import _ from "lodash";
|
||||
export default defineComponent({
|
||||
name: 'genTableColumns',
|
||||
components: {importTable, RelationTable},
|
||||
setup() {
|
||||
const relationTableRef = ref();
|
||||
const tableColumnsRef = ref<FormInstance>();
|
||||
const info = inject<TableDataInfo>('tableData') as TableDataInfo;
|
||||
// 表格的高度
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
|
||||
const dictOptions = ref(<DictOpt[]>[])
|
||||
onBeforeMount(()=>{
|
||||
//获取字典选项
|
||||
optionselect().then((res:any)=>{
|
||||
dictOptions.value = res.data.dictType??[]
|
||||
})
|
||||
})
|
||||
const handleChangeConfig = (row:TableColumns)=>{
|
||||
relationTableRef.value.openDialog(row.columnId)
|
||||
defineOptions({ name: "genTableColumns"})
|
||||
const relationTableRef = ref();
|
||||
const tableColumnsRef = ref<FormInstance>();
|
||||
const info = inject<any>('tableData');
|
||||
// 表格的高度
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 300 + 'px');
|
||||
const dictOptions = ref(<DictOpt[]>[])
|
||||
onBeforeMount(()=>{
|
||||
//获取字典选项
|
||||
optionselect().then((res:any)=>{
|
||||
dictOptions.value = res.data.dictType??[]
|
||||
})
|
||||
})
|
||||
const handleChangeConfig = (row:TableColumns)=>{
|
||||
relationTableRef.value.openDialog(row.columnId)
|
||||
}
|
||||
const setRelationTable = (cid:number,data:any)=>{
|
||||
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){
|
||||
let d = _.cloneDeep(item)
|
||||
d.linkTableName = data.linkTableName
|
||||
d.linkLabelId = data.linkLabelId
|
||||
d.linkLabelName = data.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
|
||||
}
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
|
||||
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||||
import {getTableList, deleteTables, batchGenCode, syncTable} from "/@/api/system/tools/gen";
|
||||
@ -109,169 +109,146 @@ import importTable from "/@/views/system/tools/gen/component/importTable.vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
|
||||
import {refreshBackEndControlRoutes} from "/@/router/backEnd";
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemToolsGenTableList',
|
||||
components: {importTable,genCodePreview},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const addPostRef = ref()
|
||||
const editPostRef = ref()
|
||||
const queryRef = ref()
|
||||
const importRef = ref()
|
||||
const genCodePreviewRef = ref()
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
tableNames:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
tableName:'',
|
||||
tableComment:'',
|
||||
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),
|
||||
};
|
||||
},
|
||||
defineOptions({ name: "apiV1SystemToolsGenTableList"})
|
||||
const router = useRouter()
|
||||
const addPostRef = ref()
|
||||
const editPostRef = ref()
|
||||
const queryRef = ref()
|
||||
const importRef = ref()
|
||||
const genCodePreviewRef = ref()
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
tableNames:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
tableName:'',
|
||||
tableComment:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: []
|
||||
},
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -94,10 +94,10 @@
|
||||
<el-form-item label="用户类型">
|
||||
<el-radio-group v-model="ruleForm.isAdmin">
|
||||
<el-radio
|
||||
:label="1"
|
||||
:value="1"
|
||||
>后台管理员</el-radio>
|
||||
<el-radio
|
||||
:label="0"
|
||||
:value="0"
|
||||
>前台用户</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
@ -119,180 +119,168 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {reactive, toRefs, onMounted, defineComponent, ref, unref, getCurrentInstance} from 'vue';
|
||||
import {getParams, addUser, editUser, getEditUser} from "/@/api/system/user";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditUser',
|
||||
props:{
|
||||
deptData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
genderData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
defineOptions({ name: "systemEditUser"})
|
||||
const props = defineProps({
|
||||
deptData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
setup(prop,{emit}) {
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const roleList = ref([]);
|
||||
const postList = ref([]);
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
userId: 0,
|
||||
deptId: 0,
|
||||
userName: '',
|
||||
nickName: '',
|
||||
password: '',
|
||||
mobile:'',
|
||||
email: '',
|
||||
sex: '',
|
||||
status: 1,
|
||||
remark: '',
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
isAdmin:0,
|
||||
},
|
||||
//表单校验
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "用户名称不能为空", trigger: "blur" }
|
||||
],
|
||||
nickName: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "归属部门不能为空", trigger: "blur" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" }
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
genderData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['getUserList']);
|
||||
const {proxy} = getCurrentInstance() as any;
|
||||
const roleList = ref([]);
|
||||
const postList = ref([]);
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
ruleForm: {
|
||||
userId: 0,
|
||||
deptId: 0,
|
||||
userName: '',
|
||||
nickName: '',
|
||||
password: '',
|
||||
mobile:'',
|
||||
email: '',
|
||||
sex: '',
|
||||
status: 1,
|
||||
remark: '',
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
isAdmin:0,
|
||||
},
|
||||
//表单校验
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: "用户名称不能为空", trigger: "blur" }
|
||||
],
|
||||
nickName: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "归属部门不能为空", trigger: "blur" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" }
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
});
|
||||
// 打开弹窗
|
||||
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,
|
||||
};
|
||||
})
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
@ -40,12 +40,12 @@
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="userList"
|
||||
/>
|
||||
/>
|
||||
<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
|
||||
import {ElMessageBox, ElMessage} from 'element-plus';
|
||||
import EditUser from '/@/views/system/user/component/editUser.vue';
|
||||
@ -71,146 +71,130 @@ interface TableParam {
|
||||
keyWords:string;
|
||||
dateRange: string[];
|
||||
}
|
||||
export default defineComponent({
|
||||
name: 'systemUserList',
|
||||
props:{
|
||||
deptData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
param:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
genderData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
defineOptions({ name: "systemUserList"})
|
||||
const props = defineProps({
|
||||
deptData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
param:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
genderData:{
|
||||
type:Array,
|
||||
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>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-card shadow="hover">
|
||||
<el-aside>
|
||||
<el-scrollbar>
|
||||
<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable size="default" style="width: 80%;"/>
|
||||
<el-input :prefix-icon="search" v-model="filterText" placeholder="请输入部门名称" clearable style="width: 80%;"/>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
class="filter-tree"
|
||||
@ -82,7 +82,7 @@
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel()">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
@ -99,7 +99,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
|
||||
import {ElTree,FormInstance} from 'element-plus';
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
@ -118,108 +118,88 @@ interface QueryParam {
|
||||
dateRange: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemUser',
|
||||
components: { UserList },
|
||||
setup() {
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const {sys_user_sex} = proxy.useDict('sys_user_sex')
|
||||
const userListRef = ref();
|
||||
const queryRef = ref();
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
const search = Search
|
||||
const state = reactive<QueryParam>({
|
||||
ids:[],
|
||||
deptProps:{
|
||||
id:"deptId",
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
},
|
||||
deptData:[
|
||||
defineOptions({ name: "systemUser"})
|
||||
const {proxy} = <any>getCurrentInstance();
|
||||
const {sys_user_sex} = proxy.useDict('sys_user_sex')
|
||||
const userListRef = ref();
|
||||
const queryRef = ref();
|
||||
const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
const search = Search
|
||||
const state = reactive<QueryParam>({
|
||||
ids:[],
|
||||
deptProps:{
|
||||
id:"deptId",
|
||||
children: "children",
|
||||
label: "deptName"
|
||||
},
|
||||
deptData:[
|
||||
{
|
||||
label: '集团总部',
|
||||
children: [
|
||||
{
|
||||
label: '集团总部',
|
||||
label: '曲靖分部',
|
||||
children: [
|
||||
{
|
||||
label: '曲靖分部',
|
||||
children: [
|
||||
{
|
||||
label: '总经办',
|
||||
},
|
||||
{
|
||||
label: '市场部',
|
||||
},
|
||||
{
|
||||
label: '研发部',
|
||||
},
|
||||
],
|
||||
label: '总经办',
|
||||
},
|
||||
{
|
||||
label: '市场部',
|
||||
},
|
||||
{
|
||||
label: '研发部',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
param: {
|
||||
deptId:'',
|
||||
mobile:'',
|
||||
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),
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
param: {
|
||||
deptId:'',
|
||||
mobile:'',
|
||||
status:'',
|
||||
keyWords:'',
|
||||
dateRange:[]
|
||||
},
|
||||
});
|
||||
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>
|
||||
|
||||
@ -792,7 +792,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: url(https://img-blog.csdnimg.cn/6267533849444025811bf0840f9366e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_20,color_FFFFFF,t_70,g_se,x_16);
|
||||
background: url(/@/assets/board2.jpg);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -822,15 +822,6 @@ export default defineComponent({
|
||||
background-size: 200% 100%;
|
||||
animation: masked-animation 4s infinite linear;
|
||||
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 50%;
|
||||
@ -1341,4 +1332,12 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes masked-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
import { defineConfig, loadEnv, ConfigEnv } from 'vite';
|
||||
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
|
||||
import viteCompression from 'vite-plugin-compression';
|
||||
import { buildConfig } from './src/utils/build';
|
||||
|
||||
@ -17,7 +16,7 @@ const alias: Record<string, string> = {
|
||||
const viteConfig = defineConfig((mode: ConfigEnv) => {
|
||||
const env = loadEnv(mode.mode, process.cwd());
|
||||
return {
|
||||
plugins: [vue(), vueSetupExtend(), viteCompression({disable:true})],
|
||||
plugins: [vue(), viteCompression({disable:true})],
|
||||
root: process.cwd(),
|
||||
resolve: { alias },
|
||||
base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user