zqq:遥感影像爬取和检索
This commit is contained in:
qqGroup0
parent
02954e6dee
commit
0cdd7cded1
143
package.json
143
package.json
|
|
@ -1,74 +1,73 @@
|
|||
{
|
||||
"name": "vordm",
|
||||
"version": "2.4.32",
|
||||
"description": "vue3 vite next admin template js setup",
|
||||
"author": "lyt_20201208",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite --force",
|
||||
"build": "vite build",
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.3.4",
|
||||
"echarts": "^5.4.2",
|
||||
"leaflet": "^1.9.3",
|
||||
"element-plus": "^2.3.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"js-md5": "^0.7.3",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.33",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.11.1",
|
||||
"screenfull": "^6.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-demi": "^0.13.11",
|
||||
"qs": "^6.11.1",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"prettier": "^2.8.7",
|
||||
"sass": "^1.60.0",
|
||||
"vite": "^4.2.1",
|
||||
"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.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">= 7.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue3",
|
||||
"vuejs/vue-next",
|
||||
"vuejs/vue-next-template",
|
||||
"vuejs/vue-next-template-js",
|
||||
"element-ui",
|
||||
"element-plus",
|
||||
"vue-next-admin",
|
||||
"next-admin"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
|
||||
}
|
||||
"name": "vordm",
|
||||
"version": "2.4.32",
|
||||
"description": "vue3 vite next admin template js setup",
|
||||
"author": "lyt_20201208",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite --force",
|
||||
"build": "vite build",
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.3.4",
|
||||
"echarts": "^5.4.2",
|
||||
"element-plus": "^2.3.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"js-md5": "^0.7.3",
|
||||
"leaflet": "^1.9.3",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.33",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.11.1",
|
||||
"screenfull": "^6.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vue/compiler-sfc": "^3.2.47",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"prettier": "^2.8.7",
|
||||
"sass": "^1.60.0",
|
||||
"vite": "^4.2.1",
|
||||
"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.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
"npm": ">= 7.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue3",
|
||||
"vuejs/vue-next",
|
||||
"vuejs/vue-next-template",
|
||||
"vuejs/vue-next-template-js",
|
||||
"element-ui",
|
||||
"element-plus",
|
||||
"vue-next-admin",
|
||||
"next-admin"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,84 @@
|
|||
<template>
|
||||
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
|
||||
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<i class="iconfont icon-ziti" title="组件大小"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
|
||||
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
|
||||
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
||||
<el-icon title="菜单搜索">
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
||||
<i class="icon-skin iconfont" title="布局配置"></i>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
|
||||
<template #reference>
|
||||
<el-badge :is-dot="true">
|
||||
<el-icon title="消息">
|
||||
<ele-Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #default>
|
||||
<UserNews />
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
|
||||
<i
|
||||
class="iconfont"
|
||||
:title="state.isScreenfull ? '关全屏' : '开全屏'"
|
||||
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
|
||||
></i>
|
||||
</div>
|
||||
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
||||
<span class="layout-navbars-breadcrumb-user-link">
|
||||
<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
|
||||
{{ userInfos.userName === '' ? 'common' : userInfos.userName }}
|
||||
<el-icon class="el-icon--right">
|
||||
<ele-ArrowDown />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="/home">首页</el-dropdown-item>
|
||||
<el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item>
|
||||
<el-dropdown-item command="/404">404</el-dropdown-item>
|
||||
<el-dropdown-item command="/401">401</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<Search ref="searchRef" />
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user pr15"
|
||||
:style="{ flex: layoutUserFlexNum }">
|
||||
<el-dropdown :show-timeout="70"
|
||||
:hide-timeout="50"
|
||||
trigger="click"
|
||||
@command="onComponentSizeChange">
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<i class="iconfont icon-ziti"
|
||||
title="组件大小"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="large"
|
||||
:disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
|
||||
<el-dropdown-item command="default"
|
||||
:disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
|
||||
<el-dropdown-item command="small"
|
||||
:disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="layout-navbars-breadcrumb-user-icon"
|
||||
@click="onSearchClick">
|
||||
<el-icon title="菜单搜索">
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon"
|
||||
@click="onLayoutSetingClick">
|
||||
<i class="icon-skin iconfont"
|
||||
title="布局配置"></i>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<el-popover placement="bottom"
|
||||
trigger="click"
|
||||
transition="el-zoom-in-top"
|
||||
:width="300"
|
||||
:persistent="false">
|
||||
<template #reference>
|
||||
<el-badge :is-dot="true">
|
||||
<el-icon title="消息">
|
||||
<ele-Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #default>
|
||||
<UserNews />
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon mr10"
|
||||
@click="onScreenfullClick">
|
||||
<i class="iconfont"
|
||||
:title="state.isScreenfull ? '关全屏' : '开全屏'"
|
||||
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
||||
</div>
|
||||
<el-dropdown :show-timeout="70"
|
||||
:hide-timeout="50"
|
||||
@command="onHandleCommandClick">
|
||||
<span class="layout-navbars-breadcrumb-user-link">
|
||||
<img :src="userInfos.photo"
|
||||
class="layout-navbars-breadcrumb-user-link-photo mr5" />
|
||||
{{ userInfos.userName === '' ? 'chief' : userInfos.userName }}
|
||||
<el-icon class="el-icon--right">
|
||||
<ele-ArrowDown />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="/home">首页</el-dropdown-item>
|
||||
<el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item>
|
||||
<el-dropdown-item command="/404">404</el-dropdown-item>
|
||||
<el-dropdown-item command="/401">401</el-dropdown-item>
|
||||
<el-dropdown-item divided
|
||||
command="logOut">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<Search ref="searchRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="layoutBreadcrumbUser">
|
||||
|
|
@ -87,112 +105,112 @@ const { themeConfig, website } = storeToRefs(storesThemeConfig);
|
|||
|
||||
const searchRef = ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
disabledSize: 'large',
|
||||
setIntervalId: null
|
||||
isScreenfull: false,
|
||||
disabledSize: 'large',
|
||||
setIntervalId: null
|
||||
});
|
||||
|
||||
// 设置分割样式
|
||||
const layoutUserFlexNum = computed(() => {
|
||||
let num = '';
|
||||
const { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
const layoutArr = ['defaults', 'columns'];
|
||||
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
|
||||
else num = '';
|
||||
return num;
|
||||
let num = '';
|
||||
const { layout, isClassicSplitMenu } = themeConfig.value;
|
||||
const layoutArr = ['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;
|
||||
});
|
||||
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 = () => {
|
||||
mittBus.emit('openSetingsDrawer');
|
||||
mittBus.emit('openSetingsDrawer');
|
||||
};
|
||||
// 下拉菜单点击时
|
||||
const onHandleCommandClick = (path) => {
|
||||
if (path === 'logOut') {
|
||||
ElMessageBox({
|
||||
closeOnClickModal: false,
|
||||
closeOnPressEscape: false,
|
||||
title: '提示',
|
||||
message: '此操作将退出登录, 是否继续?',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
buttonSize: 'default',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '退出中';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 700);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(async () => {
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
clearInterval(state.setIntervalId);
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(() => {});
|
||||
} else if (path === 'wareHouse') {
|
||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
if (path === 'logOut') {
|
||||
ElMessageBox({
|
||||
closeOnClickModal: false,
|
||||
closeOnPressEscape: false,
|
||||
title: '提示',
|
||||
message: '此操作将退出登录, 是否继续?',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
buttonSize: 'default',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '退出中';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 700);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(async () => {
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
clearInterval(state.setIntervalId);
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(() => { });
|
||||
} else if (path === 'wareHouse') {
|
||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
};
|
||||
// 菜单搜索点击
|
||||
const onSearchClick = () => {
|
||||
searchRef.value.openSearch();
|
||||
searchRef.value.openSearch();
|
||||
};
|
||||
// 组件大小改变
|
||||
const onComponentSizeChange = (size) => {
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalComponentSize = size;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||
window.location.reload();
|
||||
Local.remove('themeConfig');
|
||||
themeConfig.value.globalComponentSize = size;
|
||||
Local.set('themeConfig', themeConfig.value);
|
||||
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||
window.location.reload();
|
||||
};
|
||||
// 初始化组件大小/i18n
|
||||
const initI18nOrSize = (value, attr) => {
|
||||
state[attr] = Local.get('themeConfig')[value];
|
||||
state[attr] = Local.get('themeConfig')[value];
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
if (Local.get('themeConfig')) {
|
||||
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||
}
|
||||
//刷新token
|
||||
state.setIntervalId =setInterval(() => {
|
||||
const dateTime = Session.get('token-time');
|
||||
const rt = Session.get('refresh-token');
|
||||
const now = new Date().getTime();
|
||||
if((now - dateTime) / 1000 > website.value.tokenTime){
|
||||
// 刷新token
|
||||
refreshToken(rt, website.value.tenantId).then(res=>{
|
||||
Session.set('token', res.access_token);
|
||||
Session.set('token-time', new Date().getTime());
|
||||
Session.set('refresh-token', res.refresh_token);
|
||||
})
|
||||
}
|
||||
},10000);
|
||||
if (Local.get('themeConfig')) {
|
||||
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||
}
|
||||
//刷新token
|
||||
state.setIntervalId = setInterval(() => {
|
||||
const dateTime = Session.get('token-time');
|
||||
const rt = Session.get('refresh-token');
|
||||
const now = new Date().getTime();
|
||||
if ((now - dateTime) / 1000 > website.value.tokenTime) {
|
||||
// 刷新token
|
||||
refreshToken(rt, website.value.tenantId).then(res => {
|
||||
Session.set('token', res.access_token);
|
||||
Session.set('token-time', new Date().getTime());
|
||||
Session.set('refresh-token', res.refresh_token);
|
||||
})
|
||||
}
|
||||
}, 10000);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export function getBackEndControlRoutes() {
|
|||
const stores = useUserInfo(pinia);
|
||||
// 获取用户信息
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
// 获取用户角色
|
||||
// 获取用户角色
|
||||
//TODO 需要修改真正的数据 并调用menuToRoutes，将返回的菜单封装成需要的路由列表
|
||||
const auth = userInfos.value.roles[0];
|
||||
// 管理员 admin
|
||||
|
|
@ -127,23 +127,23 @@ export function getBackEndControlRoutes() {
|
|||
export function menuToRoutes(menus) {
|
||||
let routes = [];
|
||||
menus.forEach((menu) => {
|
||||
let route={};
|
||||
let route = {};
|
||||
//判断是否有子节点
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
route.children = menuToRoutes(menu.children)
|
||||
route.children = menuToRoutes(menu.children);
|
||||
}
|
||||
route.ttid = menu.id;
|
||||
route.path = menu.path;
|
||||
route.name = menu.code;
|
||||
route.component = menu.path + "/index";
|
||||
route.component = menu.path + '/index';
|
||||
route.meta = {
|
||||
title: menu.name,
|
||||
icon: menu.source,
|
||||
isHide: menu.isHidden === 1 || menu.isHidden === '1',
|
||||
routes: ['admin','common'],
|
||||
routes: ['admin', 'chief'],
|
||||
isKeepAlive: false,
|
||||
isAffix: menu.path.indexOf('/home')>-1,
|
||||
}
|
||||
isAffix: menu.path.indexOf('/home') > -1,
|
||||
};
|
||||
routes.push(route);
|
||||
});
|
||||
return routes;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
* isKeepAlive： 是否缓存组件状态
|
||||
* isAffix： 是否固定在 tagsView 栏上
|
||||
* isIframe： 是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
|
||||
* roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
|
||||
* roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 主要管理员：chief
|
||||
* icon： 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
|
||||
* }
|
||||
*/
|
||||
|
|
@ -40,7 +40,7 @@ export const dynamicRoutes = [
|
|||
isAffix: true,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'iconfont icon-shouye',
|
||||
// icon: 'iconfont icon-shouye',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -56,7 +56,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-xitongshezhi',
|
||||
// icon: 'iconfont icon-xitongshezhi',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -71,7 +71,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
// icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -86,7 +86,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'ele-ColdDrink',
|
||||
// icon: 'ele-ColdDrink',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -101,7 +101,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'iconfont icon-icon-',
|
||||
// icon: 'iconfont icon-icon-',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -119,7 +119,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'iconfont icon-xitongshezhi',
|
||||
// icon: 'iconfont icon-xitongshezhi',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -134,7 +134,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
// icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -149,7 +149,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'ele-ColdDrink',
|
||||
// icon: 'ele-ColdDrink',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -164,7 +164,7 @@ export const dynamicRoutes = [
|
|||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'chief'],
|
||||
icon: 'ele-ColdDrink',
|
||||
// icon: 'ele-ColdDrink',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,66 +1,93 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype"
|
||||
size="default"
|
||||
placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
class="ml10"
|
||||
size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent"
|
||||
size="default"
|
||||
placeholder="Select disaster event"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_disasterevent"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择爬虫类型下拉框 -->
|
||||
<el-select v-model="value_crawlertype" size="default" placeholder="Select crawler type" class="ml10">
|
||||
<el-option v-for="item in options_crawlertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择爬虫状态下拉框 -->
|
||||
<!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
|
||||
<!-- 选择爬虫类型下拉框 -->
|
||||
<el-select v-model="value_crawlertype"
|
||||
size="default"
|
||||
placeholder="Select crawler type"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_crawlertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择爬虫状态下拉框 -->
|
||||
<!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
|
||||
<el-option v-for="item in options_crawlerstatus" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="success" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Start crawling
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Start crawling
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="warning" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Stop crawling
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="warning"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Stop crawling
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
|
|
@ -80,9 +107,10 @@
|
|||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
|
|
@ -98,50 +126,50 @@ const value_crawlertype = ref('');
|
|||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择爬虫类型下拉框
|
||||
|
||||
const options_crawlertype = [
|
||||
{
|
||||
value: 'Bing',
|
||||
label: 'Bing',
|
||||
},
|
||||
{
|
||||
value: 'Twitter',
|
||||
label: 'Twitter',
|
||||
},
|
||||
{
|
||||
value: 'Baidu',
|
||||
label: 'Baidu',
|
||||
},
|
||||
{
|
||||
value: 'Weibo',
|
||||
label: 'Weibo',
|
||||
},
|
||||
{
|
||||
value: 'Bing',
|
||||
label: 'Bing',
|
||||
},
|
||||
{
|
||||
value: 'Twitter',
|
||||
label: 'Twitter',
|
||||
},
|
||||
{
|
||||
value: 'Baidu',
|
||||
label: 'Baidu',
|
||||
},
|
||||
{
|
||||
value: 'Weibo',
|
||||
label: 'Weibo',
|
||||
},
|
||||
];
|
||||
|
||||
//选择爬虫状态下拉框
|
||||
|
|
@ -159,71 +187,71 @@ const options_crawlertype = [
|
|||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,8 +203,8 @@ const getTableData = () => {
|
|||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="rsSelect">
|
||||
<el-tabs v-model="state.activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="Search condition"
|
||||
name="first">
|
||||
<el-tabs v-model="state.activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="Search condition"
|
||||
name="first">
|
||||
|
||||
<div class="rsSelect">
|
||||
<el-card class="box-card">
|
||||
<span>Select time range</span>
|
||||
<div class="block">
|
||||
|
|
@ -34,44 +34,227 @@
|
|||
view-class="view-box"
|
||||
:native="false">
|
||||
<div class="coordinateContainer"
|
||||
v-for="(coordinate, i) in state.coordinateList">{{
|
||||
// coordinate
|
||||
'Lat:' + coordinate.lat.toFixed("3") + ', Lng:' + coordinate.lng.toFixed("3")
|
||||
}}
|
||||
|
||||
<el-button class="el-icon-edit"
|
||||
size="small"></el-button>
|
||||
<el-button class="el-icon-close"
|
||||
size="small"></el-button>
|
||||
v-for="(coordinate,i) in state.coordinateList">
|
||||
<span style="font-size:14px;float: left;width: 70%;">{{
|
||||
'Lat: ' + parseFloat(coordinate.Lat).toFixed(4) + ',  Lng: ' + parseFloat(coordinate.Lng).toFixed(4)
|
||||
}}</span>
|
||||
<span style="width:20%;margin-left: 80%;">
|
||||
<el-button class="el-icon"
|
||||
@click="editCoordinate"
|
||||
size="small">
|
||||
<ele-Edit />
|
||||
</el-button>
|
||||
<el-button class="el-icon"
|
||||
@click="state.coordinateList.splice(i, 1);"
|
||||
size="small">
|
||||
<ele-Delete />
|
||||
</el-button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button @click="addCoordinate">Add coordinates</el-button>
|
||||
<el-button @click="clearCoordinate">Clear coordinates</el-button>
|
||||
<el-button class="coordinateBtn"
|
||||
@click="addCoordinate">Add coordinates</el-button>
|
||||
<el-button class="coordinateBtn"
|
||||
@click="clearCoordinate">Clear coordinates</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select satellite type</span>
|
||||
<el-scrollbar wrap-class="sensor_list"
|
||||
view-class="view-box"
|
||||
:native="false">
|
||||
<el-tree-select class="satelliteSelect"
|
||||
v-model="state.satelliteSelected"
|
||||
:data="sensor"
|
||||
multiple
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
</el-scrollbar>
|
||||
<el-tree-select class="satelliteSelect"
|
||||
v-model="state.satelliteSelected"
|
||||
:data="sensor"
|
||||
multiple
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
</el-card>
|
||||
|
||||
<el-button @click="startCrawl">Start Crawl</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select VoRDM ID</span>
|
||||
<el-select class="idSelect"
|
||||
v-model="state.selectID"
|
||||
clearable
|
||||
placeholder="Select VoRDM ID">
|
||||
<el-option v-for="item in idOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-card>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<Map id="map"></Map>
|
||||
<el-button class="lowerBtn"
|
||||
@click="startCrawl">Start Crawl</el-button>
|
||||
<el-button class="lowerBtn"
|
||||
@click="ClearCondition">Cancel</el-button>
|
||||
</div>
|
||||
|
||||
<Map id="map"></Map>
|
||||
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="Retrieval condition"
|
||||
name="second">
|
||||
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype"
|
||||
size="default"
|
||||
placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
class="ml10"
|
||||
size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent"
|
||||
size="default"
|
||||
placeholder="Select disaster event"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_disasterevent"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择爬虫类型下拉框 -->
|
||||
<el-select v-model="value_crawlertype"
|
||||
size="default"
|
||||
placeholder="Select crawler type"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_crawlertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择爬虫状态下拉框 -->
|
||||
<!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
|
||||
<el-option v-for="item in options_crawlerstatus" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Start crawling
|
||||
</el-button>
|
||||
|
||||
<el-button size="default"
|
||||
type="warning"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Stop crawling
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="userName"
|
||||
label="User name"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Administrator"
|
||||
label="Administrator"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email"
|
||||
label="Email"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster type"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster keyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Affected country"
|
||||
label="Affected country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Longitude"
|
||||
label="Longitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude"
|
||||
label="Latitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseTime"
|
||||
label="Response time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseStatus"
|
||||
label="Response status"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -79,17 +262,7 @@
|
|||
import { ref, reactive } from 'vue';
|
||||
import Map from "/@/components/Map.vue";
|
||||
|
||||
|
||||
const state = reactive({
|
||||
activeName: 'first',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
addCoord: false,
|
||||
satelliteSelected: [],
|
||||
coordinateList: [],
|
||||
|
||||
})
|
||||
|
||||
// 卫星类型
|
||||
const sensor = ref([
|
||||
{
|
||||
value: 'landsat',
|
||||
|
|
@ -207,6 +380,101 @@ const sensor = ref([
|
|||
}
|
||||
])
|
||||
|
||||
// VoRDM ID
|
||||
const idOptions = [
|
||||
{
|
||||
value: '2023001001',
|
||||
label: '2023001001',
|
||||
},
|
||||
{
|
||||
value: '2023001002',
|
||||
label: '2023001002',
|
||||
},
|
||||
{
|
||||
value: '2023001003',
|
||||
label: '2023001003',
|
||||
},
|
||||
{
|
||||
value: '2023001004',
|
||||
label: '2023001004',
|
||||
},
|
||||
{
|
||||
value: '2023001005',
|
||||
label: '2023001005',
|
||||
},
|
||||
]
|
||||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
|
||||
//选择爬虫类型下拉框
|
||||
const options_crawlertype = [
|
||||
{
|
||||
value: 'Bing',
|
||||
label: 'Bing',
|
||||
},
|
||||
{
|
||||
value: 'Twitter',
|
||||
label: 'Twitter',
|
||||
},
|
||||
{
|
||||
value: 'Baidu',
|
||||
label: 'Baidu',
|
||||
},
|
||||
{
|
||||
value: 'Weibo',
|
||||
label: 'Weibo',
|
||||
},
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
activeName: 'first',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
addCoord: false,
|
||||
satelliteSelected: [],
|
||||
coordinateList: [],
|
||||
selectID: '',
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
value_disastertype: '',
|
||||
value_disastertime: '',
|
||||
value_crawlertype: '',
|
||||
})
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '1 month ago',
|
||||
|
|
@ -238,12 +506,12 @@ const shortcuts = [
|
|||
const addCoordinate = () => {
|
||||
state.addCoord = !state.addCoord;
|
||||
state.coordinateList = [
|
||||
// '43.538', '111.530', '36.195', '120.761'
|
||||
{
|
||||
Lat: '43.538'
|
||||
,
|
||||
Lng: '111.530'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
Lat: '36.195'
|
||||
,
|
||||
Lng: '120.761'
|
||||
|
|
@ -256,7 +524,12 @@ const clearCoordinate = () => {
|
|||
state.startTime = '';
|
||||
state.endTime = '';
|
||||
}
|
||||
// 编辑坐标点
|
||||
const editCoordinate = () => {
|
||||
|
||||
}
|
||||
|
||||
// 开始爬虫
|
||||
const startCrawl = () => {
|
||||
console.log("start time:", state.startTime)
|
||||
console.log("end time:", state.endTime)
|
||||
|
|
@ -264,38 +537,41 @@ const startCrawl = () => {
|
|||
console.log("satelliteSelected:", state.satelliteSelected)
|
||||
}
|
||||
|
||||
// 清空搜索条件
|
||||
const ClearCondition = () => {
|
||||
state.startTime = ''
|
||||
state.endTime = ''
|
||||
state.addCoord = false
|
||||
state.satelliteSelected = []
|
||||
state.coordinateList = []
|
||||
state.selectID = ''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 2% 1%;
|
||||
padding: 1% 1%;
|
||||
.rsSelect {
|
||||
float: left;
|
||||
border: 1px solid blue;
|
||||
border: 1px solid #040728;
|
||||
width: 30%;
|
||||
height: 53rem;
|
||||
height: 52rem;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 3%;
|
||||
font-size: 18px;
|
||||
}
|
||||
.satelliteSelect {
|
||||
width: 75%;
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
margin: 10px 0 0 0;
|
||||
color: black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
font-size: 12px;
|
||||
.satelliteSelect,
|
||||
.idSelect {
|
||||
width: 90%;
|
||||
margin: 2% 3% 0 3%;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 2% 0;
|
||||
margin-top: 2%;
|
||||
.demonstration {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
height: 20px;
|
||||
line-height: 40px;
|
||||
|
|
@ -304,14 +580,18 @@ const startCrawl = () => {
|
|||
}
|
||||
}
|
||||
.coordinateContainer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
margin: 3%;
|
||||
}
|
||||
.coordinateBtn {
|
||||
margin-left: 3%;
|
||||
}
|
||||
.lowerBtn {
|
||||
margin: 3% 0 3% 3%;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
width: 70%;
|
||||
height: 53rem;
|
||||
height: 52rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,84 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype"
|
||||
size="default"
|
||||
placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
class="ml10"
|
||||
size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent"
|
||||
size="default"
|
||||
placeholder="Select disaster event"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_disasterevent"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
|
||||
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype"
|
||||
size="default"
|
||||
placeholder="Select data type"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_datatype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<el-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="success" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
|
|
@ -61,7 +86,7 @@
|
|||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
<!-- <el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
|
|
@ -74,9 +99,10 @@
|
|||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
|
|
@ -92,41 +118,41 @@ const value_crawlerstatus = ref('');
|
|||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择数据类型下拉框
|
||||
const options_datatype = [
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
];
|
||||
|
||||
//选择是否可视化下拉框
|
||||
|
|
@ -144,71 +170,71 @@ const options_datatype = [
|
|||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,59 +1,84 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype"
|
||||
size="default"
|
||||
placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
class="ml10"
|
||||
size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent"
|
||||
size="default"
|
||||
placeholder="Select disaster event"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_disasterevent"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
|
||||
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype"
|
||||
size="default"
|
||||
placeholder="Select data type"
|
||||
class="ml10">
|
||||
<el-option v-for="item in options_datatype"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<el-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="success" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
|
|
@ -61,7 +86,7 @@
|
|||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
<!-- <el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
|
|
@ -74,9 +99,10 @@
|
|||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
|
|
@ -92,139 +118,139 @@ const value_crawlerstatus = ref('');
|
|||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择数据类型下拉框
|
||||
const options_datatype = [
|
||||
{
|
||||
value: 'Basic data',
|
||||
label: 'Basic data',
|
||||
},
|
||||
{
|
||||
value: 'News picture',
|
||||
label: 'News picture',
|
||||
},
|
||||
{
|
||||
value: 'Disaster report',
|
||||
label: 'Disaster report',
|
||||
},
|
||||
{
|
||||
value: 'Disaster mapping',
|
||||
label: 'Disaster mapping',
|
||||
},
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
{
|
||||
value: 'Basic data',
|
||||
label: 'Basic data',
|
||||
},
|
||||
{
|
||||
value: 'News picture',
|
||||
label: 'News picture',
|
||||
},
|
||||
{
|
||||
value: 'Disaster report',
|
||||
label: 'Disaster report',
|
||||
},
|
||||
{
|
||||
value: 'Disaster mapping',
|
||||
label: 'Disaster mapping',
|
||||
},
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
];
|
||||
|
||||
//选择是否可视化下拉框
|
||||
const options_visualization = [
|
||||
{
|
||||
value: 'Yes',
|
||||
label: 'Yes',
|
||||
},
|
||||
{
|
||||
value: 'No',
|
||||
label: 'No',
|
||||
},
|
||||
{
|
||||
value: 'Yes',
|
||||
label: 'Yes',
|
||||
},
|
||||
{
|
||||
value: 'No',
|
||||
label: 'No',
|
||||
},
|
||||
];
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,43 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Contact details" label="Contact details" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="vordmId" label="VoRDM ID" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="applicationTime" label="Application time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Remark" label="Remark" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="userName"
|
||||
label="User name"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email"
|
||||
label="Email"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Contact details"
|
||||
label="Contact details"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="vordmId"
|
||||
label="VoRDM ID"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="applicationTime"
|
||||
label="Application time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Remark"
|
||||
label="Remark"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
|
|
@ -31,23 +53,22 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
|
|
@ -86,8 +107,8 @@ const getTableData = () => {
|
|||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
|
|
|
|||
|
|
@ -1,22 +1,46 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="professionalTitle" label="Professional title" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="researchField" label="Research field" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataDetails" label="Data details" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataFormat" label="Data Format" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataSize" label="Data size" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="uploadTime" label="Upload time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="userName"
|
||||
label="User name"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="professionalTitle"
|
||||
label="Professional title"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="researchField"
|
||||
label="Research field"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email"
|
||||
label="Email"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataDetails"
|
||||
label="Data details"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataFormat"
|
||||
label="Data Format"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataSize"
|
||||
label="Data size"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="uploadTime"
|
||||
label="Upload time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
|
|
@ -32,23 +56,22 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
|
|
@ -87,8 +110,8 @@ const getTableData = () => {
|
|||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,55 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 20px">
|
||||
<el-tab-pane label="Not reviewed" name="first">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-tabs v-model="activeName"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
style="margin-left: 20px">
|
||||
<el-tab-pane label="Not reviewed"
|
||||
name="first">
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="userName"
|
||||
label="User name"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterKeyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="affectedCountry"
|
||||
label="Affected country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Longitude"
|
||||
label="Longitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude"
|
||||
label="Latitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseTime"
|
||||
label="Response time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseStatus"
|
||||
label="Response status"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
|
|
@ -35,41 +65,70 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Reviewed" name="second">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster type" label="Disaster type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster keyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Affected country" label="Affected country" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Reviewed"
|
||||
name="second">
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="userName"
|
||||
label="User name"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Administrator"
|
||||
label="Administrator"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email"
|
||||
label="Email"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster type"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Disaster keyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Affected country"
|
||||
label="Affected country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Longitude"
|
||||
label="Longitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude"
|
||||
label="Latitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseTime"
|
||||
label="Response time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="responseStatus"
|
||||
label="Response status"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
|
|
@ -85,25 +144,24 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
|
|
@ -142,8 +200,8 @@ const getTableData = () => {
|
|||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
|
|
|
|||
|
|
@ -1,66 +1,137 @@
|
|||
<template>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
|
||||
<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="字典名称">
|
||||
<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="字段名">
|
||||
<el-input v-model="state.ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="字典状态">
|
||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item :prop="`list[${k}].label`">
|
||||
<template #label>
|
||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
||||
<el-icon>
|
||||
<ele-Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">字段</span>
|
||||
</template>
|
||||
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="属性" :prop="`list[${k}].value`">
|
||||
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="字典描述">
|
||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog :title="state.dialog.title"
|
||||
v-model="state.dialog.isShowDialog"
|
||||
width="769px">
|
||||
<el-alert title="半成品，交互过于复杂，请自行扩展！"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
class="mb20"> </el-alert>
|
||||
<el-form ref="dicDialogFormRef"
|
||||
:model="state.ruleForm"
|
||||
size="default"
|
||||
label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="字典名称">
|
||||
<el-input v-model="state.ruleForm.dicName"
|
||||
placeholder="请输入字典名称"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="字段名">
|
||||
<el-input v-model="state.ruleForm.fieldName"
|
||||
placeholder="请输入字段名，拼接 ruleForm.list"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-form-item label="字典状态">
|
||||
<el-switch v-model="state.ruleForm.status"
|
||||
inline-prompt
|
||||
active-text="启"
|
||||
inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-row :gutter="35"
|
||||
v-for="(v, k) in state.ruleForm.list"
|
||||
:key="k">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item :prop="`list[${k}].label`">
|
||||
<template #label>
|
||||
<el-button type="primary"
|
||||
circle
|
||||
size="small"
|
||||
@click="onAddRow"
|
||||
v-if="k === 0">
|
||||
<el-icon>
|
||||
<ele-Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger"
|
||||
circle
|
||||
size="small"
|
||||
@click="onDelRow(k)"
|
||||
v-else>
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">字段</span>
|
||||
</template>
|
||||
<el-input v-model="v.label"
|
||||
style="width: 100%"
|
||||
placeholder="请输入字段名"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="属性"
|
||||
:prop="`list[${k}].value`">
|
||||
<el-input v-model="v.value"
|
||||
style="width: 100%"
|
||||
placeholder="请输入属性值"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-form-item label="字典描述">
|
||||
<el-input v-model="state.ruleForm.describe"
|
||||
type="textarea"
|
||||
placeholder="请输入字典描述"
|
||||
maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel"
|
||||
size="default">取 消</el-button>
|
||||
<el-button type="primary"
|
||||
@click="onSubmit"
|
||||
size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemDicDialog">
|
||||
|
|
@ -72,79 +143,79 @@ const emit = defineEmits(['refresh']);
|
|||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
dicName: '', // 字典名称
|
||||
fieldName: '', // 字段名
|
||||
status: true, // 字典状态
|
||||
list: [], // 子集字段 + 属性值
|
||||
describe: '', // 字典描述
|
||||
},
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
ruleForm: {
|
||||
dicName: '', // 字典名称
|
||||
fieldName: '', // 字段名
|
||||
status: true, // 字典状态
|
||||
list: [], // 子集字段 + 属性值
|
||||
describe: '', // 字典描述
|
||||
},
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type, row) => {
|
||||
if (type === 'edit') {
|
||||
if (row.fieldName === 'SYS_UERINFO') {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'sex', value: '1' },
|
||||
{ id: Math.random(), label: 'sex', value: '0' },
|
||||
];
|
||||
} else {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'role', value: 'admin' },
|
||||
{ id: Math.random(), label: 'role', value: 'common' },
|
||||
{ id: Math.random(), label: 'roleName', value: '超级管理员' },
|
||||
{ id: Math.random(), label: 'roleName', value: '普通用户' },
|
||||
];
|
||||
}
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改字典';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增字典';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// dicDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
if (type === 'edit') {
|
||||
if (row.fieldName === 'SYS_UERINFO') {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'sex', value: '1' },
|
||||
{ id: Math.random(), label: 'sex', value: '0' },
|
||||
];
|
||||
} else {
|
||||
row.list = [
|
||||
{ id: Math.random(), label: 'role', value: 'admin' },
|
||||
{ id: Math.random(), label: 'role', value: 'chief' },
|
||||
{ id: Math.random(), label: 'roleName', value: '超级管理员' },
|
||||
{ id: Math.random(), label: 'roleName', value: '主要管理员' },
|
||||
];
|
||||
}
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改字典';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增字典';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// dicDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
state.dialog.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
};
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.ruleForm.list.push({
|
||||
id: Math.random(),
|
||||
label: '',
|
||||
value: '',
|
||||
});
|
||||
state.ruleForm.list.push({
|
||||
id: Math.random(),
|
||||
label: '',
|
||||
value: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k) => {
|
||||
state.ruleForm.list.splice(k, 1);
|
||||
state.ruleForm.list.splice(k, 1);
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,148 +1,261 @@
|
|||
<template>
|
||||
<div class="system-menu-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader
|
||||
:options="state.menuData"
|
||||
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
|
||||
placeholder="请选择上级菜单"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="state.ruleForm.menuSuperior"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.title }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio label="menu">菜单</el-radio>
|
||||
<el-radio label="btn">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="路由名称">
|
||||
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="路由路径">
|
||||
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="重定向">
|
||||
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单图标">
|
||||
<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="组件路径">
|
||||
<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="链接地址">
|
||||
<el-input
|
||||
v-model="state.ruleForm.meta.isLink"
|
||||
placeholder="外链/内嵌时链接地址（http:xxx.com）"
|
||||
clearable
|
||||
:disabled="!state.ruleForm.isLink"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="权限标识">
|
||||
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
|
||||
<el-option label="admin" value="admin"></el-option>
|
||||
<el-option label="common" value="common"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="state.ruleForm.menuType === 'btn'">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="权限标识">
|
||||
<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="菜单排序">
|
||||
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否隐藏">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isHide">
|
||||
<el-radio :label="true">隐藏</el-radio>
|
||||
<el-radio :label="false">不隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="页面缓存">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
|
||||
<el-radio :label="true">缓存</el-radio>
|
||||
<el-radio :label="false">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否固定">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isAffix">
|
||||
<el-radio :label="true">固定</el-radio>
|
||||
<el-radio :label="false">不固定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="是否内嵌">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isIframe" @change="onSelectIframeChange">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="system-menu-dialog-container">
|
||||
<el-dialog :title="state.dialog.title"
|
||||
v-model="state.dialog.isShowDialog"
|
||||
width="769px">
|
||||
<el-form ref="menuDialogFormRef"
|
||||
:model="state.ruleForm"
|
||||
size="default"
|
||||
label-width="80px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader :options="state.menuData"
|
||||
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
|
||||
placeholder="请选择上级菜单"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="state.ruleForm.menuSuperior">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.title }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio label="menu">菜单</el-radio>
|
||||
<el-radio label="btn">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input v-model="state.ruleForm.meta.title"
|
||||
placeholder="格式：message.router.xxx"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="路由名称">
|
||||
<el-input v-model="state.ruleForm.name"
|
||||
placeholder="路由中的 name 值"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="路由路径">
|
||||
<el-input v-model="state.ruleForm.path"
|
||||
placeholder="路由中的 path 值"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="重定向">
|
||||
<el-input v-model="state.ruleForm.redirect"
|
||||
placeholder="请输入路由重定向"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="菜单图标">
|
||||
<IconSelector placeholder="请输入菜单图标"
|
||||
v-model="state.ruleForm.meta.icon" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="组件路径">
|
||||
<el-input v-model="state.ruleForm.componentAlias"
|
||||
placeholder="组件路径"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="链接地址">
|
||||
<el-input v-model="state.ruleForm.meta.isLink"
|
||||
placeholder="外链/内嵌时链接地址（http:xxx.com）"
|
||||
clearable
|
||||
:disabled="!state.ruleForm.isLink">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="权限标识">
|
||||
<el-select v-model="state.ruleForm.meta.roles"
|
||||
multiple
|
||||
placeholder="取角色管理"
|
||||
clearable
|
||||
class="w100">
|
||||
<el-option label="admin"
|
||||
value="admin"></el-option>
|
||||
<el-option label="chief"
|
||||
value="chief"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="state.ruleForm.menuType === 'btn'">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="权限标识">
|
||||
<el-input v-model="state.ruleForm.btnPower"
|
||||
placeholder="请输入权限标识"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="菜单排序">
|
||||
<el-input-number v-model="state.ruleForm.menuSort"
|
||||
controls-position="right"
|
||||
placeholder="请输入排序"
|
||||
class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="是否隐藏">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isHide">
|
||||
<el-radio :label="true">隐藏</el-radio>
|
||||
<el-radio :label="false">不隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="页面缓存">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
|
||||
<el-radio :label="true">缓存</el-radio>
|
||||
<el-radio :label="false">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="是否固定">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isAffix">
|
||||
<el-radio :label="true">固定</el-radio>
|
||||
<el-radio :label="false">不固定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="state.ruleForm.isLink"
|
||||
:disabled="state.ruleForm.meta.isIframe">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="是否内嵌">
|
||||
<el-radio-group v-model="state.ruleForm.meta.isIframe"
|
||||
@change="onSelectIframeChange">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel"
|
||||
size="default">取 消</el-button>
|
||||
<el-button type="primary"
|
||||
@click="onSubmit"
|
||||
size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemMenuDialog">
|
||||
|
|
@ -162,95 +275,95 @@ const menuDialogFormRef = ref();
|
|||
const stores = useRoutesList();
|
||||
const { routesList } = storeToRefs(stores);
|
||||
const state = reactive({
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
ruleForm: {
|
||||
menuSuperior: [], // 上级菜单
|
||||
menuType: 'menu', // 菜单类型
|
||||
name: '', // 路由名称
|
||||
component: '', // 组件路径
|
||||
componentAlias: '', // 组件路径别名
|
||||
isLink: false, // 是否外链
|
||||
menuSort: 0, // 菜单排序
|
||||
path: '', // 路由路径
|
||||
redirect: '', // 路由重定向，有子集 children 时
|
||||
meta: {
|
||||
title: '', // 菜单名称
|
||||
icon: '', // 菜单图标
|
||||
isHide: false, // 是否隐藏
|
||||
isKeepAlive: true, // 是否缓存
|
||||
isAffix: false, // 是否固定
|
||||
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
|
||||
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
|
||||
roles: '', // 权限标识，取角色管理
|
||||
},
|
||||
btnPower: '', // 菜单类型为按钮时，权限标识
|
||||
},
|
||||
menuData: [], // 上级菜单数据
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
||||
ruleForm: {
|
||||
menuSuperior: [], // 上级菜单
|
||||
menuType: 'menu', // 菜单类型
|
||||
name: '', // 路由名称
|
||||
component: '', // 组件路径
|
||||
componentAlias: '', // 组件路径别名
|
||||
isLink: false, // 是否外链
|
||||
menuSort: 0, // 菜单排序
|
||||
path: '', // 路由路径
|
||||
redirect: '', // 路由重定向，有子集 children 时
|
||||
meta: {
|
||||
title: '', // 菜单名称
|
||||
icon: '', // 菜单图标
|
||||
isHide: false, // 是否隐藏
|
||||
isKeepAlive: true, // 是否缓存
|
||||
isAffix: false, // 是否固定
|
||||
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
|
||||
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
|
||||
roles: '', // 权限标识，取角色管理
|
||||
},
|
||||
btnPower: '', // 菜单类型为按钮时，权限标识
|
||||
},
|
||||
menuData: [], // 上级菜单数据
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 获取 pinia 中的路由
|
||||
const getMenuData = (routes) => {
|
||||
const arr = [];
|
||||
routes.map((val) => {
|
||||
val['title'] = val.meta?.title;
|
||||
arr.push({ ...val });
|
||||
if (val.children) getMenuData(val.children);
|
||||
});
|
||||
return arr;
|
||||
const arr = [];
|
||||
routes.map((val) => {
|
||||
val['title'] = val.meta?.title;
|
||||
arr.push({ ...val });
|
||||
if (val.children) getMenuData(val.children);
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (type, row) => {
|
||||
if (type === 'edit') {
|
||||
// 模拟数据，实际请走接口
|
||||
row.menuType = 'menu';
|
||||
row.menuSort = Math.floor(Math.random() * 100);
|
||||
state.ruleForm = JSON.parse(JSON.stringify(row));
|
||||
state.dialog.title = '修改菜单';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增菜单';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// menuDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.type = type;
|
||||
state.dialog.isShowDialog = true;
|
||||
if (type === 'edit') {
|
||||
// 模拟数据，实际请走接口
|
||||
row.menuType = 'menu';
|
||||
row.menuSort = Math.floor(Math.random() * 100);
|
||||
state.ruleForm = JSON.parse(JSON.stringify(row));
|
||||
state.dialog.title = '修改菜单';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增菜单';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// menuDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.type = type;
|
||||
state.dialog.isShowDialog = true;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
state.dialog.isShowDialog = false;
|
||||
};
|
||||
// 是否内嵌下拉改变
|
||||
const onSelectIframeChange = () => {
|
||||
if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
|
||||
else state.ruleForm.isLink = false;
|
||||
if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
|
||||
else state.ruleForm.isLink = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.menuData = getMenuData(routesList.value);
|
||||
state.menuData = getMenuData(routesList.value);
|
||||
});
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,91 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="roleSign" label="角色标识" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input v-model="state.tableData.param.search"
|
||||
size="default"
|
||||
placeholder="请输入角色名称"
|
||||
style="max-width: 180px"> </el-input>
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="序号"
|
||||
width="60" />
|
||||
<el-table-column prop="roleName"
|
||||
label="角色名称"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="roleSign"
|
||||
label="角色标识"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sort"
|
||||
label="排序"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status"
|
||||
label="角色状态"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info"
|
||||
v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe"
|
||||
label="角色描述"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime"
|
||||
label="创建时间"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作"
|
||||
width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="onOpenEditRole('edit', scope.row)">修改</el-button>
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
|
|
@ -66,71 +98,71 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
|
|||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,91 +1,182 @@
|
|||
<template>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户名称">
|
||||
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="关联角色">
|
||||
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
|
||||
<el-option label="超级管理员" value="admin"></el-option>
|
||||
<el-option label="普通用户" value="common"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="部门">
|
||||
<el-cascader
|
||||
:options="state.deptData"
|
||||
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="state.ruleForm.department"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户密码">
|
||||
<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="账户过期">
|
||||
<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="用户状态">
|
||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :title="state.dialog.title"
|
||||
v-model="state.dialog.isShowDialog"
|
||||
width="769px">
|
||||
<el-form ref="userDialogFormRef"
|
||||
:model="state.ruleForm"
|
||||
size="default"
|
||||
label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="账户名称">
|
||||
<el-input v-model="state.ruleForm.userName"
|
||||
placeholder="请输入账户名称"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input v-model="state.ruleForm.userNickname"
|
||||
placeholder="请输入用户昵称"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="关联角色">
|
||||
<el-select v-model="state.ruleForm.roleSign"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="w100">
|
||||
<el-option label="超级管理员"
|
||||
value="admin"></el-option>
|
||||
<el-option label="主要管理员"
|
||||
value="chief"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="部门">
|
||||
<el-cascader :options="state.deptData"
|
||||
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
class="w100"
|
||||
v-model="state.ruleForm.department">
|
||||
<template #default="{ node, data }">
|
||||
<span>{{ data.deptName }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="state.ruleForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="state.ruleForm.email"
|
||||
placeholder="请输入"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.ruleForm.sex"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="w100">
|
||||
<el-option label="男"
|
||||
value="男"></el-option>
|
||||
<el-option label="女"
|
||||
value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="账户密码">
|
||||
<el-input v-model="state.ruleForm.password"
|
||||
placeholder="请输入"
|
||||
type="password"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="账户过期">
|
||||
<el-date-picker v-model="state.ruleForm.overdueTime"
|
||||
type="date"
|
||||
placeholder="请选择"
|
||||
class="w100"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb20">
|
||||
<el-form-item label="用户状态">
|
||||
<el-switch v-model="state.ruleForm.status"
|
||||
inline-prompt
|
||||
active-text="启"
|
||||
inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
class="mb20">
|
||||
<el-form-item label="用户描述">
|
||||
<el-input v-model="state.ruleForm.describe"
|
||||
type="textarea"
|
||||
placeholder="请输入用户描述"
|
||||
maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel"
|
||||
size="default">取 消</el-button>
|
||||
<el-button type="primary"
|
||||
@click="onSubmit"
|
||||
size="default">{{ state.dialog.submitTxt }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemUserDialog">
|
||||
|
|
@ -97,91 +188,91 @@ const emit = defineEmits(['refresh']);
|
|||
// 定义变量内容
|
||||
const userDialogFormRef = ref();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
userName: '', // 账户名称
|
||||
userNickname: '', // 用户昵称
|
||||
roleSign: '', // 关联角色
|
||||
department: [], // 部门
|
||||
phone: '', // 手机号
|
||||
email: '', // 邮箱
|
||||
sex: '', // 性别
|
||||
password: '', // 账户密码
|
||||
overdueTime: '', // 账户过期
|
||||
status: true, // 用户状态
|
||||
describe: '', // 用户描述
|
||||
},
|
||||
deptData: [], // 部门数据
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
ruleForm: {
|
||||
userName: '', // 账户名称
|
||||
userNickname: '', // 用户昵称
|
||||
roleSign: '', // 关联角色
|
||||
department: [], // 部门
|
||||
phone: '', // 手机号
|
||||
email: '', // 邮箱
|
||||
sex: '', // 性别
|
||||
password: '', // 账户密码
|
||||
overdueTime: '', // 账户过期
|
||||
status: true, // 用户状态
|
||||
describe: '', // 用户描述
|
||||
},
|
||||
deptData: [], // 部门数据
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
title: '',
|
||||
submitTxt: '',
|
||||
},
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type, row) => {
|
||||
if (type === 'edit') {
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改用户';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增用户';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// userDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
getMenuData();
|
||||
if (type === 'edit') {
|
||||
state.ruleForm = row;
|
||||
state.dialog.title = '修改用户';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
} else {
|
||||
state.dialog.title = '新增用户';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// userDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
getMenuData();
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
state.dialog.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
};
|
||||
// 初始化部门数据
|
||||
const getMenuData = () => {
|
||||
state.deptData.push({
|
||||
deptName: 'vueNextAdmin',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '顶级部门',
|
||||
id: Math.random(),
|
||||
children: [
|
||||
{
|
||||
deptName: 'IT外包服务',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '总部',
|
||||
id: Math.random(),
|
||||
},
|
||||
{
|
||||
deptName: '资本控股',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '分部',
|
||||
id: Math.random(),
|
||||
},
|
||||
],
|
||||
});
|
||||
state.deptData.push({
|
||||
deptName: 'vueNextAdmin',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '顶级部门',
|
||||
id: Math.random(),
|
||||
children: [
|
||||
{
|
||||
deptName: 'IT外包服务',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '总部',
|
||||
id: Math.random(),
|
||||
},
|
||||
{
|
||||
deptName: '资本控股',
|
||||
createTime: new Date().toLocaleString(),
|
||||
status: true,
|
||||
sort: Math.random(),
|
||||
describe: '分部',
|
||||
id: Math.random(),
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,100 @@
|
|||
<template>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<UserDialog ref="userDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
<div class="system-user-container layout-padding">
|
||||
<el-card shadow="hover"
|
||||
class="layout-padding-auto">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input size="default"
|
||||
placeholder="请输入用户名称"
|
||||
style="max-width: 180px"> </el-input>
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="onOpenAddUser('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="序号"
|
||||
width="60" />
|
||||
<el-table-column prop="userName"
|
||||
label="账户名称"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="userNickname"
|
||||
label="用户昵称"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="roleSign"
|
||||
label="关联角色"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="department"
|
||||
label="部门"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="phone"
|
||||
label="手机号"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="email"
|
||||
label="邮箱"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="status"
|
||||
label="用户状态"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info"
|
||||
v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe"
|
||||
label="用户描述"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime"
|
||||
label="创建时间"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作"
|
||||
width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.userName === 'admin'"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="onOpenEditUser('edit', scope.row)">修改</el-button>
|
||||
<el-button :disabled="scope.row.userName === 'admin'"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<UserDialog ref="userDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemUser">
|
||||
|
|
@ -69,77 +107,77 @@ const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialo
|
|||
// 定义变量内容
|
||||
const userDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
userName: i === 0 ? 'admin' : 'test',
|
||||
userNickname: i === 0 ? '我是管理员' : '我是普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
|
||||
phone: '12345678910',
|
||||
email: 'vueNextAdmin@123.com',
|
||||
sex: '女',
|
||||
password: '123456',
|
||||
overdueTime: new Date(),
|
||||
status: true,
|
||||
describe: i === 0 ? '不可删除' : '测试用户',
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
userName: i === 0 ? 'admin' : 'test',
|
||||
userNickname: i === 0 ? '我是管理员' : '我是主要管理员',
|
||||
roleSign: i === 0 ? 'admin' : 'chief',
|
||||
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
|
||||
phone: '12345678910',
|
||||
email: 'vueNextAdmin@123.com',
|
||||
sex: '女',
|
||||
password: '123456',
|
||||
overdueTime: new Date(),
|
||||
status: true,
|
||||
describe: i === 0 ? '不可删除' : '测试用户',
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增用户弹窗
|
||||
const onOpenAddUser = (type) => {
|
||||
userDialogRef.value.openDialog(type);
|
||||
userDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改用户弹窗
|
||||
const onOpenEditUser = (type, row) => {
|
||||
userDialogRef.value.openDialog(type, row);
|
||||
userDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除用户
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue