yaowang
/
vordm-admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zqq:遥感影像爬取和检索

This commit is contained in:
qqGroup0 2023-03-30 22:44:57 +08:00
parent 02954e6dee
commit 0cdd7cded1
17 changed files with 2335 additions and 1511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
package.json
View File

@ -1,74 +1,73 @@
{ {
"name": "vordm", "name": "vordm",
"version": "2.4.32", "version": "2.4.32",
"description": "vue3 vite next admin template js setup", "description": "vue3 vite next admin template js setup",
"author": "lyt_20201208", "author": "lyt_20201208",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "vite --force", "dev": "vite --force",
"build": "vite build", "build": "vite build",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.1.0", "@element-plus/icons-vue": "^2.1.0",
"axios": "^1.3.4", "axios": "^1.3.4",
"echarts": "^5.4.2", "echarts": "^5.4.2",
"leaflet": "^1.9.3", "element-plus": "^2.3.1",
"element-plus": "^2.3.1", "js-cookie": "^3.0.1",
"js-cookie": "^3.0.1", "js-md5": "^0.7.3",
"js-md5": "^0.7.3", "leaflet": "^1.9.3",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.0.33", "pinia": "^2.0.33",
"qrcodejs2-fixes": "^0.0.2", "qrcodejs2-fixes": "^0.0.2",
"qs": "^6.11.1", "qs": "^6.11.1",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"vue": "^3.2.47", "vue": "^3.2.47",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-demi": "^0.13.11", "vue-demi": "^0.13.11",
"qs": "^6.11.1", "vue-i18n": "^9.2.2",
"vue-i18n": "^9.2.2", "vue-router": "^4.1.6"
"vue-router": "^4.1.6" },
}, "devDependencies": {
"devDependencies": { "@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue": "^4.1.0", "@vue/compiler-sfc": "^3.2.47",
"@vue/compiler-sfc": "^3.2.47", "eslint": "^8.36.0",
"eslint": "^8.36.0", "eslint-plugin-vue": "^9.10.0",
"eslint-plugin-vue": "^9.10.0", "prettier": "^2.8.7",
"prettier": "^2.8.7", "sass": "^1.60.0",
"sass": "^1.60.0", "vite": "^4.2.1",
"vite": "^4.2.1", "vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-cdn-import": "^0.3.5", "vite-plugin-compression": "^0.5.1",
"vite-plugin-compression": "^0.5.1", "vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vite-plugin-vue-setup-extend-plus": "^0.1.0", "vue-eslint-parser": "^9.1.0"
"vue-eslint-parser": "^9.1.0" },
}, "browserslist": [
"browserslist": [ "> 1%",
"> 1%", "last 2 versions",
"last 2 versions", "not dead"
"not dead" ],
], "bugs": {
"bugs": { "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
"url": "https://gitee.com/lyt-top/vue-next-admin/issues" },
}, "engines": {
"engines": { "node": ">=16.0.0",
"node": ">=16.0.0", "npm": ">= 7.0.0"
"npm": ">= 7.0.0" },
}, "keywords": [
"keywords": [ "vue",
"vue", "vue3",
"vue3", "vuejs/vue-next",
"vuejs/vue-next", "vuejs/vue-next-template",
"vuejs/vue-next-template", "vuejs/vue-next-template-js",
"vuejs/vue-next-template-js", "element-ui",
"element-ui", "element-plus",
"element-plus", "vue-next-admin",
"vue-next-admin", "next-admin"
"next-admin" ],
], "repository": {
"repository": { "type": "git",
"type": "git", "url": "https://gitee.com/lyt-top/vue-next-admin.git"
"url": "https://gitee.com/lyt-top/vue-next-admin.git" }
}
} }

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

@ -1,66 +1,84 @@
<template> <template>
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }"> <div class="layout-navbars-breadcrumb-user pr15"
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange"> :style="{ flex: layoutUserFlexNum }">
<div class="layout-navbars-breadcrumb-user-icon"> <el-dropdown :show-timeout="70"
<i class="iconfont icon-ziti" title="组件大小"></i> :hide-timeout="50"
</div> trigger="click"
<template #dropdown> @command="onComponentSizeChange">
<el-dropdown-menu> <div class="layout-navbars-breadcrumb-user-icon">
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item> <i class="iconfont icon-ziti"
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">默认</el-dropdown-item> title="组件大小"></i>
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item> </div>
</el-dropdown-menu> <template #dropdown>
</template> <el-dropdown-menu>
</el-dropdown> <el-dropdown-item command="large"
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick"> :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
<el-icon title="菜单搜索"> <el-dropdown-item command="default"
<ele-Search /> :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
</el-icon> <el-dropdown-item command="small"
</div> :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick"> </el-dropdown-menu>
<i class="icon-skin iconfont" title="布局配置"></i> </template>
</div> </el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon"> <div class="layout-navbars-breadcrumb-user-icon"
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false"> @click="onSearchClick">
<template #reference> <el-icon title="菜单搜索">
<el-badge :is-dot="true"> <ele-Search />
<el-icon title="消息"> </el-icon>
<ele-Bell /> </div>
</el-icon> <div class="layout-navbars-breadcrumb-user-icon"
</el-badge> @click="onLayoutSetingClick">
</template> <i class="icon-skin iconfont"
<template #default> title="布局配置"></i>
<UserNews /> </div>
</template> <div class="layout-navbars-breadcrumb-user-icon">
</el-popover> <el-popover placement="bottom"
</div> trigger="click"
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"> transition="el-zoom-in-top"
<i :width="300"
class="iconfont" :persistent="false">
:title="state.isScreenfull ? '关全屏' : '开全屏'" <template #reference>
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'" <el-badge :is-dot="true">
></i> <el-icon title="消息">
</div> <ele-Bell />
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> </el-icon>
<span class="layout-navbars-breadcrumb-user-link"> </el-badge>
<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" /> </template>
{{ userInfos.userName === '' ? 'common' : userInfos.userName }} <template #default>
<el-icon class="el-icon--right"> <UserNews />
<ele-ArrowDown /> </template>
</el-icon> </el-popover>
</span> </div>
<template #dropdown> <div class="layout-navbars-breadcrumb-user-icon mr10"
<el-dropdown-menu> @click="onScreenfullClick">
<el-dropdown-item command="/home">首页</el-dropdown-item> <i class="iconfont"
<el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item> :title="state.isScreenfull ? '关全屏' : '开全屏'"
<el-dropdown-item command="/404">404</el-dropdown-item> :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
<el-dropdown-item command="/401">401</el-dropdown-item> </div>
<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item> <el-dropdown :show-timeout="70"
</el-dropdown-menu> :hide-timeout="50"
</template> @command="onHandleCommandClick">
</el-dropdown> <span class="layout-navbars-breadcrumb-user-link">
<Search ref="searchRef" /> <img :src="userInfos.photo"
</div> 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> </template>
<script setup name="layoutBreadcrumbUser"> <script setup name="layoutBreadcrumbUser">
@ -87,112 +105,112 @@ const { themeConfig, website } = storeToRefs(storesThemeConfig);
const searchRef = ref(); const searchRef = ref();
const state = reactive({ const state = reactive({
isScreenfull: false, isScreenfull: false,
disabledSize: 'large', disabledSize: 'large',
setIntervalId: null setIntervalId: null
}); });
// 设置分割样式 // 设置分割样式
const layoutUserFlexNum = computed(() => { const layoutUserFlexNum = computed(() => {
let num = ''; let num = '';
const { layout, isClassicSplitMenu } = themeConfig.value; const { layout, isClassicSplitMenu } = themeConfig.value;
const layoutArr = ['defaults', 'columns']; const layoutArr = ['defaults', 'columns'];
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1'; if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
else num = ''; else num = '';
return num; return num;
}); });
// 全屏点击时 // 全屏点击时
const onScreenfullClick = () => { const onScreenfullClick = () => {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
ElMessage.warning('暂不不支持全屏'); ElMessage.warning('暂不不支持全屏');
return false; return false;
} }
screenfull.toggle(); screenfull.toggle();
screenfull.on('change', () => { screenfull.on('change', () => {
if (screenfull.isFullscreen) state.isScreenfull = true; if (screenfull.isFullscreen) state.isScreenfull = true;
else state.isScreenfull = false; else state.isScreenfull = false;
}); });
}; };
// 布局配置 icon 点击时 // 布局配置 icon 点击时
const onLayoutSetingClick = () => { const onLayoutSetingClick = () => {
mittBus.emit('openSetingsDrawer'); mittBus.emit('openSetingsDrawer');
}; };
// 下拉菜单点击时 // 下拉菜单点击时
const onHandleCommandClick = (path) => { const onHandleCommandClick = (path) => {
if (path === 'logOut') { if (path === 'logOut') {
ElMessageBox({ ElMessageBox({
closeOnClickModal: false, closeOnClickModal: false,
closeOnPressEscape: false, closeOnPressEscape: false,
title: '提示', title: '提示',
message: '此操作将退出登录, 是否继续?', message: '此操作将退出登录, 是否继续?',
showCancelButton: true, showCancelButton: true,
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
buttonSize: 'default', buttonSize: 'default',
beforeClose: (action, instance, done) => { beforeClose: (action, instance, done) => {
if (action === 'confirm') { if (action === 'confirm') {
instance.confirmButtonLoading = true; instance.confirmButtonLoading = true;
instance.confirmButtonText = '退出中'; instance.confirmButtonText = '退出中';
setTimeout(() => { setTimeout(() => {
done(); done();
setTimeout(() => { setTimeout(() => {
instance.confirmButtonLoading = false; instance.confirmButtonLoading = false;
}, 300); }, 300);
}, 700); }, 700);
} else { } else {
done(); done();
} }
}, },
}) })
.then(async () => { .then(async () => {
// 清除缓存/token等 // 清除缓存/token等
Session.clear(); Session.clear();
clearInterval(state.setIntervalId); clearInterval(state.setIntervalId);
// 使用 reload 时，不需要调用 resetRoute() 重置路由 // 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload(); window.location.reload();
}) })
.catch(() => {}); .catch(() => { });
} else if (path === 'wareHouse') { } else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin'); window.open('https://gitee.com/lyt-top/vue-next-admin');
} else { } else {
router.push(path); router.push(path);
} }
}; };
// 菜单搜索点击 // 菜单搜索点击
const onSearchClick = () => { const onSearchClick = () => {
searchRef.value.openSearch(); searchRef.value.openSearch();
}; };
// 组件大小改变 // 组件大小改变
const onComponentSizeChange = (size) => { const onComponentSizeChange = (size) => {
Local.remove('themeConfig'); Local.remove('themeConfig');
themeConfig.value.globalComponentSize = size; themeConfig.value.globalComponentSize = size;
Local.set('themeConfig', themeConfig.value); Local.set('themeConfig', themeConfig.value);
initI18nOrSize('globalComponentSize', 'disabledSize'); initI18nOrSize('globalComponentSize', 'disabledSize');
window.location.reload(); window.location.reload();
}; };
// 初始化组件大小/i18n // 初始化组件大小/i18n
const initI18nOrSize = (value, attr) => { const initI18nOrSize = (value, attr) => {
state[attr] = Local.get('themeConfig')[value]; state[attr] = Local.get('themeConfig')[value];
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
if (Local.get('themeConfig')) { if (Local.get('themeConfig')) {
initI18nOrSize('globalComponentSize', 'disabledSize'); initI18nOrSize('globalComponentSize', 'disabledSize');
} }
//刷新token //刷新token
state.setIntervalId =setInterval(() => { state.setIntervalId = setInterval(() => {
const dateTime = Session.get('token-time'); const dateTime = Session.get('token-time');
const rt = Session.get('refresh-token'); const rt = Session.get('refresh-token');
const now = new Date().getTime(); const now = new Date().getTime();
if((now - dateTime) / 1000 > website.value.tokenTime){ if ((now - dateTime) / 1000 > website.value.tokenTime) {
// 刷新token // 刷新token
refreshToken(rt, website.value.tenantId).then(res=>{ refreshToken(rt, website.value.tenantId).then(res => {
Session.set('token', res.access_token); Session.set('token', res.access_token);
Session.set('token-time', new Date().getTime()); Session.set('token-time', new Date().getTime());
Session.set('refresh-token', res.refresh_token); Session.set('refresh-token', res.refresh_token);
}) })
} }
},10000); }, 10000);
}); });
</script> </script>

12
src/router/backEnd.js
View File

@ -127,23 +127,23 @@ export function getBackEndControlRoutes() {
export function menuToRoutes(menus) { export function menuToRoutes(menus) {
let routes = []; let routes = [];
menus.forEach((menu) => { menus.forEach((menu) => {
let route={}; let route = {};
//判断是否有子节点 //判断是否有子节点
if (menu.children && menu.children.length > 0) { if (menu.children && menu.children.length > 0) {
route.children = menuToRoutes(menu.children) route.children = menuToRoutes(menu.children);
} }
route.ttid = menu.id; route.ttid = menu.id;
route.path = menu.path; route.path = menu.path;
route.name = menu.code; route.name = menu.code;
route.component = menu.path + "/index"; route.component = menu.path + '/index';
route.meta = { route.meta = {
title: menu.name, title: menu.name,
icon: menu.source, icon: menu.source,
isHide: menu.isHidden === 1 || menu.isHidden === '1', isHide: menu.isHidden === 1 || menu.isHidden === '1',
routes: ['admin','common'], routes: ['admin', 'chief'],
isKeepAlive: false, isKeepAlive: false,
isAffix: menu.path.indexOf('/home')>-1, isAffix: menu.path.indexOf('/home') > -1,
} };
routes.push(route); routes.push(route);
}); });
return routes; return routes;

20
src/router/route.js
View File

@ -7,7 +7,7 @@
* isKeepAlive： 是否缓存组件状态 * isKeepAlive： 是否缓存组件状态
* isAffix： 是否固定在 tagsView 栏上 * isAffix： 是否固定在 tagsView 栏上
* isIframe： 是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空` * isIframe： 是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
* roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common * roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 主要管理员：chief
* icon： 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx` * icon： 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
* } * }
*/ */
@ -40,7 +40,7 @@ export const dynamicRoutes = [
isAffix: true, isAffix: true,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'iconfont icon-shouye', // icon: 'iconfont icon-shouye',
}, },
}, },
{ {
@ -56,7 +56,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin'],
icon: 'iconfont icon-xitongshezhi', // icon: 'iconfont icon-xitongshezhi',
}, },
children: [ children: [
{ {
@ -71,7 +71,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin'],
icon: 'iconfont icon-caidan', // icon: 'iconfont icon-caidan',
}, },
}, },
{ {
@ -86,7 +86,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin'], roles: ['admin'],
icon: 'ele-ColdDrink', // icon: 'ele-ColdDrink',
}, },
}, },
{ {
@ -101,7 +101,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'iconfont icon-icon-', // icon: 'iconfont icon-icon-',
}, },
}, },
], ],
@ -119,7 +119,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'iconfont icon-xitongshezhi', // icon: 'iconfont icon-xitongshezhi',
}, },
children: [ children: [
{ {
@ -134,7 +134,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'iconfont icon-caidan', // icon: 'iconfont icon-caidan',
}, },
}, },
{ {
@ -149,7 +149,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'ele-ColdDrink', // icon: 'ele-ColdDrink',
}, },
}, },
{ {
@ -164,7 +164,7 @@ export const dynamicRoutes = [
isAffix: false, isAffix: false,
isIframe: false, isIframe: false,
roles: ['admin', 'chief'], roles: ['admin', 'chief'],
icon: 'ele-ColdDrink', // icon: 'ele-ColdDrink',
}, },
}, },
], ],

288
src/views/dataService/multimediaData/index.vue
View File

@ -1,66 +1,93 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 --> <!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type"> <el-select v-model="value_disastertype"
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select disaster type">
<!-- 选择灾害时间下拉框 --> <el-option v-for="item in options_disastertype"
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" /> :key="item.value"
<!-- 选择灾害事件下拉框 --> :label="item.label"
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10"> :value="item.value" />
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" /> </el-select>
</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-select v-model="value_crawlertype"
<el-option v-for="item in options_crawlertype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select crawler type"
<!-- 选择爬虫状态下拉框 --> class="ml10">
<!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" 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-option v-for="item in options_crawlerstatus" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </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-button size="default"
<el-icon> type="primary"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Search <ele-Search />
</el-button> </el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10"> <el-button size="default"
<el-icon> type="success"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Start crawling <ele-Search />
</el-button> </el-icon>
Start crawling
</el-button>
<el-button size="default" type="warning" class="ml10"> <el-button size="default"
<el-icon> type="warning"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Stop crawling <ele-Search />
</el-button> </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> <el-icon>
<ele-FolderAdd /> <ele-FolderAdd />
</el-icon> </el-icon>
新增角色 新增角色
</el-button> --> </el-button> -->
</div> </div>
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <!-- <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 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="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="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="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 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"> <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="onOpenEditRole('edit', scope.row)">Start</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button> <el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
@ -80,9 +107,10 @@
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> --> </el-pagination> -->
</div> </div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
</div>
</template> </template>
<script setup name="systemRole"> <script setup name="systemRole">
@ -98,50 +126,50 @@ const value_crawlertype = ref('');
//选择灾害类型下拉框 //选择灾害类型下拉框
const options_disastertype = [ const options_disastertype = [
{ {
value: 'Earthquake', value: 'Earthquake',
label: 'Earthquake', label: 'Earthquake',
}, },
{ {
value: 'Hurricane', value: 'Hurricane',
label: 'Hurricane', label: 'Hurricane',
}, },
{ {
value: 'Flood', value: 'Flood',
label: 'Flood', label: 'Flood',
}, },
{ {
value: 'Volcano', value: 'Volcano',
label: 'Volcano', label: 'Volcano',
}, },
{ {
value: 'Drought', value: 'Drought',
label: 'Drought', label: 'Drought',
}, },
{ {
value: 'Landslide', value: 'Landslide',
label: 'Landslide', label: 'Landslide',
}, },
]; ];
//选择爬虫类型下拉框 //选择爬虫类型下拉框
const options_crawlertype = [ const options_crawlertype = [
{ {
value: 'Bing', value: 'Bing',
label: 'Bing', label: 'Bing',
}, },
{ {
value: 'Twitter', value: 'Twitter',
label: 'Twitter', label: 'Twitter',
}, },
{ {
value: 'Baidu', value: 'Baidu',
label: 'Baidu', label: 'Baidu',
}, },
{ {
value: 'Weibo', value: 'Weibo',
label: 'Weibo', label: 'Weibo',
}, },
]; ];
//选择爬虫状态下拉框 //选择爬虫状态下拉框
@ -159,71 +187,71 @@ const options_crawlertype = [
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
search: '', search: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; const data = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
}); });
} }
state.tableData.data = data; state.tableData.data = data;
state.tableData.total = state.tableData.data.length; state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// 打开新增角色弹窗 // 打开新增角色弹窗
const onOpenAddRole = (type) => { const onOpenAddRole = (type) => {
roleDialogRef.value.openDialog(type); roleDialogRef.value.openDialog(type);
}; };
// 打开修改角色弹窗 // 打开修改角色弹窗
const onOpenEditRole = (type, row) => { const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row); roleDialogRef.value.openDialog(type, row);
}; };
// 删除角色 // 删除角色
const onRowDel = (row) => { const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => { });
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>

4
src/views/dataService/otherData/index.vue
View File

@ -203,8 +203,8 @@ const getTableData = () => {
const data = []; const data = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,

414
src/views/dataService/remoteSensingData/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="container"> <div class="container">
<div class="rsSelect"> <el-tabs v-model="state.activeName"
<el-tabs v-model="state.activeName" @tab-click="handleClick">
@tab-click="handleClick"> <el-tab-pane label="Search condition"
<el-tab-pane label="Search condition" name="first">
name="first">
<div class="rsSelect">
<el-card class="box-card"> <el-card class="box-card">
<span>Select time range</span> <span>Select time range</span>
<div class="block"> <div class="block">
@ -34,44 +34,227 @@
view-class="view-box" view-class="view-box"
:native="false"> :native="false">
<div class="coordinateContainer" <div class="coordinateContainer"
v-for="(coordinate, i) in state.coordinateList">{{ v-for="(coordinate,i) in state.coordinateList">
// coordinate <span style="font-size:14px;float: left;width: 70%;">{{
'Lat:' + coordinate.lat.toFixed("3") + ',&nbsp;&nbsp;&nbsp;&nbsp;Lng:' + coordinate.lng.toFixed("3") 'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
}} }}</span>
&nbsp;&nbsp;&nbsp;&nbsp; <span style="width:20%;margin-left: 80%;">
<el-button class="el-icon-edit" <el-button class="el-icon"
size="small"></el-button> @click="editCoordinate"
<el-button class="el-icon-close" size="small">
size="small"></el-button> <ele-Edit />
</el-button>
<el-button class="el-icon"
@click="state.coordinateList.splice(i, 1);"
size="small">
<ele-Delete />
</el-button>
</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
<el-button @click="addCoordinate">Add coordinates</el-button> <el-button class="coordinateBtn"
<el-button @click="clearCoordinate">Clear coordinates</el-button> @click="addCoordinate">Add coordinates</el-button>
<el-button class="coordinateBtn"
@click="clearCoordinate">Clear coordinates</el-button>
</el-card> </el-card>
<el-card class="box-card" <el-card class="box-card"
style="margin-top: 3%;"> style="margin-top: 3%;">
<span>Select satellite type</span> <span>Select satellite type</span>
<el-scrollbar wrap-class="sensor_list" <el-tree-select class="satelliteSelect"
view-class="view-box" v-model="state.satelliteSelected"
:native="false"> :data="sensor"
<el-tree-select class="satelliteSelect" multiple
v-model="state.satelliteSelected" :render-after-expand="false"
:data="sensor" show-checkbox
multiple placeholder="Select satellite type" />
:render-after-expand="false"
show-checkbox
placeholder="Select satellite type" />
</el-scrollbar>
</el-card> </el-card>
<el-button @click="startCrawl">Start Crawl</el-button> <el-card class="box-card"
<el-button>Cancel</el-button> 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-button class="lowerBtn"
</el-tabs> @click="startCrawl">Start Crawl</el-button>
</div> <el-button class="lowerBtn"
<Map id="map"></Map> @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> </div>
</template> </template>
@ -79,17 +262,7 @@
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import Map from "/@/components/Map.vue"; import Map from "/@/components/Map.vue";
// 卫星类型
const state = reactive({
activeName: 'first',
startTime: '',
endTime: '',
addCoord: false,
satelliteSelected: [],
coordinateList: [],
})
const sensor = ref([ const sensor = ref([
{ {
value: 'landsat', 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 = [ const shortcuts = [
{ {
text: '1 month ago', text: '1 month ago',
@ -238,12 +506,12 @@ const shortcuts = [
const addCoordinate = () => { const addCoordinate = () => {
state.addCoord = !state.addCoord; state.addCoord = !state.addCoord;
state.coordinateList = [ state.coordinateList = [
// '43.538', '111.530', '36.195', '120.761'
{ {
Lat: '43.538' Lat: '43.538'
, ,
Lng: '111.530' Lng: '111.530'
}, { },
{
Lat: '36.195' Lat: '36.195'
, ,
Lng: '120.761' Lng: '120.761'
@ -256,7 +524,12 @@ const clearCoordinate = () => {
state.startTime = ''; state.startTime = '';
state.endTime = ''; state.endTime = '';
} }
// 编辑坐标点
const editCoordinate = () => {
}
// 开始爬虫
const startCrawl = () => { const startCrawl = () => {
console.log("start time:", state.startTime) console.log("start time:", state.startTime)
console.log("end time:", state.endTime) console.log("end time:", state.endTime)
@ -264,38 +537,41 @@ const startCrawl = () => {
console.log("satelliteSelected:", state.satelliteSelected) console.log("satelliteSelected:", state.satelliteSelected)
} }
// 清空搜索条件
const ClearCondition = () => {
state.startTime = ''
state.endTime = ''
state.addCoord = false
state.satelliteSelected = []
state.coordinateList = []
state.selectID = ''
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
padding: 2% 1%; padding: 1% 1%;
.rsSelect { .rsSelect {
float: left; float: left;
border: 1px solid blue; border: 1px solid #040728;
width: 30%; width: 30%;
height: 53rem; height: 52rem;
span { span {
display: block; display: block;
margin-bottom: 3%; margin-bottom: 3%;
font-size: 18px;
} }
.satelliteSelect { .satelliteSelect,
width: 75%; .idSelect {
margin: 10px 0 10px 10px; width: 90%;
} margin: 2% 3% 0 3%;
.el-tree {
margin: 10px 0 0 0;
color: black;
border-radius: 4px;
}
.el-tree-node__label {
font-size: 12px;
} }
.block { .block {
margin: 2% 0; margin-top: 2%;
.demonstration { .demonstration {
font-size: 14px;
float: left; float: left;
height: 20px; height: 20px;
line-height: 40px; line-height: 40px;
@ -304,14 +580,18 @@ const startCrawl = () => {
} }
} }
.coordinateContainer { .coordinateContainer {
width: 200px; margin: 3%;
height: 200px; }
border: 1px solid red; .coordinateBtn {
margin-left: 3%;
}
.lowerBtn {
margin: 3% 0 3% 3%;
} }
} }
#map { #map {
width: 70%; width: 70%;
height: 53rem; height: 52rem;
float: left; float: left;
} }
} }

260
src/views/dataUploadAndRetrieval/dataRetrieval/index.vue
View File

@ -1,59 +1,84 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 --> <!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type"> <el-select v-model="value_disastertype"
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select disaster type">
<!-- 选择灾害时间下拉框 --> <el-option v-for="item in options_disastertype"
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" /> :key="item.value"
<!-- 选择灾害事件下拉框 --> :label="item.label"
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10"> :value="item.value" />
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" /> </el-select>
</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-select v-model="value_datatype"
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select data type"
<!-- 选择是否可视化下拉框 --> class="ml10">
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" 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-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </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-button size="default"
<el-icon> type="primary"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Search <ele-Search />
</el-button> </el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10"> <el-button size="default"
<el-icon> type="success"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Upload <ele-Search />
</el-button> </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> <el-icon>
<ele-FolderAdd /> <ele-FolderAdd />
</el-icon> </el-icon>
新增角色 新增角色
</el-button> --> </el-button> -->
</div> </div>
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <!-- <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 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="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="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="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 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"> <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="onOpenEditRole('edit', scope.row)">Start</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</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-column>
</el-table> --> </el-table> -->
<!-- <el-pagination <!-- <el-pagination
@size-change="onHandleSizeChange" @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
class="mt15" class="mt15"
@ -74,9 +99,10 @@
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> --> </el-pagination> -->
</div> </div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
</div>
</template> </template>
<script setup name="systemRole"> <script setup name="systemRole">
@ -92,41 +118,41 @@ const value_crawlerstatus = ref('');
//选择灾害类型下拉框 //选择灾害类型下拉框
const options_disastertype = [ const options_disastertype = [
{ {
value: 'Earthquake', value: 'Earthquake',
label: 'Earthquake', label: 'Earthquake',
}, },
{ {
value: 'Hurricane', value: 'Hurricane',
label: 'Hurricane', label: 'Hurricane',
}, },
{ {
value: 'Flood', value: 'Flood',
label: 'Flood', label: 'Flood',
}, },
{ {
value: 'Volcano', value: 'Volcano',
label: 'Volcano', label: 'Volcano',
}, },
{ {
value: 'Drought', value: 'Drought',
label: 'Drought', label: 'Drought',
}, },
{ {
value: 'Landslide', value: 'Landslide',
label: 'Landslide', label: 'Landslide',
}, },
]; ];
//选择数据类型下拉框 //选择数据类型下拉框
const options_datatype = [ const options_datatype = [
{ {
value: 'Word cloud', value: 'Word cloud',
label: 'Word cloud', label: 'Word cloud',
}, },
{ {
value: 'Hotspot area', value: 'Hotspot area',
label: 'Hotspot area', label: 'Hotspot area',
}, },
]; ];
//选择是否可视化下拉框 //选择是否可视化下拉框
@ -144,71 +170,71 @@ const options_datatype = [
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
search: '', search: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; const data = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
}); });
} }
state.tableData.data = data; state.tableData.data = data;
state.tableData.total = state.tableData.data.length; state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// 打开新增角色弹窗 // 打开新增角色弹窗
const onOpenAddRole = (type) => { const onOpenAddRole = (type) => {
roleDialogRef.value.openDialog(type); roleDialogRef.value.openDialog(type);
}; };
// 打开修改角色弹窗 // 打开修改角色弹窗
const onOpenEditRole = (type, row) => { const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row); roleDialogRef.value.openDialog(type, row);
}; };
// 删除角色 // 删除角色
const onRowDel = (row) => { const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => { });
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>

308
src/views/dataUploadAndRetrieval/dataUpload/index.vue
View File

@ -1,59 +1,84 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 --> <!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type"> <el-select v-model="value_disastertype"
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select disaster type">
<!-- 选择灾害时间下拉框 --> <el-option v-for="item in options_disastertype"
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" /> :key="item.value"
<!-- 选择灾害事件下拉框 --> :label="item.label"
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10"> :value="item.value" />
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" /> </el-select>
</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-select v-model="value_datatype"
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" /> size="default"
</el-select> placeholder="Select data type"
<!-- 选择是否可视化下拉框 --> class="ml10">
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" 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-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </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-button size="default"
<el-icon> type="primary"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Search <ele-Search />
</el-button> </el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10"> <el-button size="default"
<el-icon> type="success"
<ele-Search /> class="ml10">
</el-icon> <el-icon>
Upload <ele-Search />
</el-button> </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> <el-icon>
<ele-FolderAdd /> <ele-FolderAdd />
</el-icon> </el-icon>
新增角色 新增角色
</el-button> --> </el-button> -->
</div> </div>
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <!-- <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 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="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="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="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 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"> <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="onOpenEditRole('edit', scope.row)">Start</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</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-column>
</el-table> --> </el-table> -->
<!-- <el-pagination <!-- <el-pagination
@size-change="onHandleSizeChange" @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
class="mt15" class="mt15"
@ -74,9 +99,10 @@
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> --> </el-pagination> -->
</div> </div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
</div>
</template> </template>
<script setup name="systemRole"> <script setup name="systemRole">
@ -92,139 +118,139 @@ const value_crawlerstatus = ref('');
//选择灾害类型下拉框 //选择灾害类型下拉框
const options_disastertype = [ const options_disastertype = [
{ {
value: 'Earthquake', value: 'Earthquake',
label: 'Earthquake', label: 'Earthquake',
}, },
{ {
value: 'Hurricane', value: 'Hurricane',
label: 'Hurricane', label: 'Hurricane',
}, },
{ {
value: 'Flood', value: 'Flood',
label: 'Flood', label: 'Flood',
}, },
{ {
value: 'Volcano', value: 'Volcano',
label: 'Volcano', label: 'Volcano',
}, },
{ {
value: 'Drought', value: 'Drought',
label: 'Drought', label: 'Drought',
}, },
{ {
value: 'Landslide', value: 'Landslide',
label: 'Landslide', label: 'Landslide',
}, },
]; ];
//选择数据类型下拉框 //选择数据类型下拉框
const options_datatype = [ const options_datatype = [
{ {
value: 'Basic data', value: 'Basic data',
label: 'Basic data', label: 'Basic data',
}, },
{ {
value: 'News picture', value: 'News picture',
label: 'News picture', label: 'News picture',
}, },
{ {
value: 'Disaster report', value: 'Disaster report',
label: 'Disaster report', label: 'Disaster report',
}, },
{ {
value: 'Disaster mapping', value: 'Disaster mapping',
label: 'Disaster mapping', label: 'Disaster mapping',
}, },
{ {
value: 'Word cloud', value: 'Word cloud',
label: 'Word cloud', label: 'Word cloud',
}, },
{ {
value: 'Hotspot area', value: 'Hotspot area',
label: 'Hotspot area', label: 'Hotspot area',
}, },
]; ];
//选择是否可视化下拉框 //选择是否可视化下拉框
const options_visualization = [ const options_visualization = [
{ {
value: 'Yes', value: 'Yes',
label: 'Yes', label: 'Yes',
}, },
{ {
value: 'No', value: 'No',
label: 'No', label: 'No',
}, },
]; ];
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
search: '', search: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; const data = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
}); });
} }
state.tableData.data = data; state.tableData.data = data;
state.tableData.total = state.tableData.data.length; state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// 打开新增角色弹窗 // 打开新增角色弹窗
const onOpenAddRole = (type) => { const onOpenAddRole = (type) => {
roleDialogRef.value.openDialog(type); roleDialogRef.value.openDialog(type);
}; };
// 打开修改角色弹窗 // 打开修改角色弹窗
const onOpenEditRole = (type, row) => { const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row); roleDialogRef.value.openDialog(type, row);
}; };
// 删除角色 // 删除角色
const onRowDel = (row) => { const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => { });
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>

89
src/views/responseManagement/administrator/index.vue
View File

@ -1,21 +1,43 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <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 :data="state.tableData.data"
<el-table-column type="index" label="ID" width="50" /> v-loading="state.tableData.loading"
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column> style="width: 100%">
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column> <el-table-column type="index"
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column> label="ID"
<el-table-column prop="Contact details" label="Contact details" show-overflow-tooltip></el-table-column> width="50" />
<el-table-column prop="vordmId" label="VoRDM ID" show-overflow-tooltip></el-table-column> <el-table-column prop="userName"
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column> label="User name"
<el-table-column prop="applicationTime" label="Application time" show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="Remark" label="Remark" show-overflow-tooltip></el-table-column> <el-table-column prop="Email"
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> 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="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"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
@ -31,23 +53,22 @@
> >
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination <el-pagination @size-change="onHandleSizeChange"
@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
@current-change="onHandleCurrentChange" class="mt15"
class="mt15" :pager-count="5"
:pager-count="5" :page-sizes="[10, 20, 30]"
:page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
v-model:current-page="state.tableData.param.pageNum" background
background v-model:page-size="state.tableData.param.pageSize"
v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
:total="state.tableData.total" </el-pagination>
> </div>
</el-pagination> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> </div>
</div>
</template> </template>
<script lang="ts" setup name="systemRole"> <script lang="ts" setup name="systemRole">
@ -86,8 +107,8 @@ const getTableData = () => {
const data = []; const data = [];
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,

93
src/views/responseManagement/dataUpload/index.vue
View File

@ -1,22 +1,46 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <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 :data="state.tableData.data"
<el-table-column type="index" label="ID" width="50" /> v-loading="state.tableData.loading"
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column> style="width: 100%">
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column> <el-table-column type="index"
<el-table-column prop="professionalTitle" label="Professional title" show-overflow-tooltip></el-table-column> label="ID"
<el-table-column prop="researchField" label="Research field" show-overflow-tooltip></el-table-column> width="50" />
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column> <el-table-column prop="userName"
<el-table-column prop="dataDetails" label="Data details" show-overflow-tooltip></el-table-column> label="User name"
<el-table-column prop="dataFormat" label="Data Format" show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="dataSize" label="Data size" show-overflow-tooltip></el-table-column> <el-table-column prop="Organization"
<el-table-column prop="uploadTime" label="Upload time" show-overflow-tooltip></el-table-column> label="Organization"
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> 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="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"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
@ -32,23 +56,22 @@
> >
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination <el-pagination @size-change="onHandleSizeChange"
@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
@current-change="onHandleCurrentChange" class="mt15"
class="mt15" :pager-count="5"
:pager-count="5" :page-sizes="[10, 20, 30]"
:page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
v-model:current-page="state.tableData.param.pageNum" background
background v-model:page-size="state.tableData.param.pageSize"
v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
:total="state.tableData.total" </el-pagination>
> </div>
</el-pagination> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> </div>
</div>
</template> </template>
<script lang="ts" setup name="systemRole"> <script lang="ts" setup name="systemRole">
@ -87,8 +110,8 @@ const getTableData = () => {
const data = []; const data = [];
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,

204
src/views/responseManagement/userResponse/index.vue
View File

@ -1,25 +1,55 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <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-tabs v-model="activeName"
<el-tab-pane label="Not reviewed" name="first"> class="demo-tabs"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> @tab-click="handleClick"
<el-table-column type="index" label="ID" width="50" /> style="margin-left: 20px">
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column> <el-tab-pane label="Not reviewed"
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column> name="first">
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column> <el-table :data="state.tableData.data"
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column> v-loading="state.tableData.loading"
<el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column> style="width: 100%">
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column> <el-table-column type="index"
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> label="ID"
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column> width="50" />
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> <el-table-column prop="userName"
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> label="User name"
<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column> 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="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"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
@ -35,41 +65,70 @@
> >
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination <el-pagination @size-change="onHandleSizeChange"
@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
@current-change="onHandleCurrentChange" class="mt15"
class="mt15" :pager-count="5"
:pager-count="5" :page-sizes="[10, 20, 30]"
:page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
v-model:current-page="state.tableData.param.pageNum" background
background v-model:page-size="state.tableData.param.pageSize"
v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
:total="state.tableData.total" </el-pagination>
> </el-tab-pane>
</el-pagination> <el-tab-pane label="Reviewed"
</el-tab-pane> name="second">
<el-tab-pane label="Reviewed" name="second"> <el-table :data="state.tableData.data"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> v-loading="state.tableData.loading"
<el-table-column type="index" label="ID" width="50" /> style="width: 100%">
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column> <el-table-column type="index"
<el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column> label="ID"
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column> width="50" />
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column> <el-table-column prop="userName"
<el-table-column prop="Disaster type" label="Disaster type" show-overflow-tooltip></el-table-column> label="User name"
<el-table-column prop="Disaster keyword" label="Disaster keyword" show-overflow-tooltip></el-table-column> 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="Administrator"
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column> label="Administrator"
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column> <el-table-column prop="Email"
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> label="Email"
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus" label="Response status" 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="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"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
@ -85,25 +144,24 @@
> >
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination <el-pagination @size-change="onHandleSizeChange"
@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
@current-change="onHandleCurrentChange" class="mt15"
class="mt15" :pager-count="5"
:pager-count="5" :page-sizes="[10, 20, 30]"
:page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
v-model:current-page="state.tableData.param.pageNum" background
background v-model:page-size="state.tableData.param.pageSize"
v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
:total="state.tableData.total" </el-pagination>
> </el-tab-pane>
</el-pagination> </el-tabs>
</el-tab-pane> </div>
</el-tabs> <RoleDialog ref="roleDialogRef"
</div> @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> </div>
</div>
</template> </template>
<script lang="ts" setup name="systemRole"> <script lang="ts" setup name="systemRole">
@ -142,8 +200,8 @@ const getTableData = () => {
const data = []; const data = [];
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,

297
src/views/system/dic/dialog.vue
View File

@ -1,66 +1,137 @@
<template> <template>
<div class="system-dic-dialog-container"> <div class="system-dic-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"> <el-dialog :title="state.dialog.title"
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert> v-model="state.dialog.isShowDialog"
<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px"> width="769px">
<el-row :gutter="35"> <el-alert title="半成品，交互过于复杂，请自行扩展！"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> type="warning"
<el-form-item label="字典名称"> :closable="false"
<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input> class="mb20"> </el-alert>
</el-form-item> <el-form ref="dicDialogFormRef"
</el-col> :model="state.ruleForm"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> size="default"
<el-form-item label="字段名"> label-width="90px">
<el-input v-model="state.ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input> <el-row :gutter="35">
</el-form-item> <el-col :xs="24"
</el-col> :sm="12"
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> :md="12"
<el-form-item label="字典状态"> :lg="12"
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch> :xl="12"
</el-form-item> class="mb20">
</el-col> <el-form-item label="字典名称">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-input v-model="state.ruleForm.dicName"
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k"> placeholder="请输入字典名称"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> clearable></el-input>
<el-form-item :prop="`list[${k}].label`"> </el-form-item>
<template #label> </el-col>
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0"> <el-col :xs="24"
<el-icon> :sm="12"
<ele-Plus /> :md="12"
</el-icon> :lg="12"
</el-button> :xl="12"
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else> class="mb20">
<el-icon> <el-form-item label="字段名">
<ele-Delete /> <el-input v-model="state.ruleForm.fieldName"
</el-icon> placeholder="请输入字段名，拼接 ruleForm.list"
</el-button> clearable></el-input>
<span class="ml10">字段</span> </el-form-item>
</template> </el-col>
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input> <el-col :xs="24"
</el-form-item> :sm="24"
</el-col> :md="24"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :lg="24"
<el-form-item label="属性" :prop="`list[${k}].value`"> :xl="24"
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input> class="mb20">
</el-form-item> <el-form-item label="字典状态">
</el-col> <el-switch v-model="state.ruleForm.status"
</el-row> inline-prompt
</el-col> active-text="启"
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> inactive-text="禁"></el-switch>
<el-form-item label="字典描述"> </el-form-item>
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input> </el-col>
</el-form-item> <el-col :xs="24"
</el-col> :sm="24"
</el-row> :md="24"
</el-form> :lg="24"
<template #footer> :xl="24"
<span class="dialog-footer"> class="mb20">
<el-button @click="onCancel" size="default">取 消</el-button> <el-row :gutter="35"
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button> v-for="(v, k) in state.ruleForm.list"
</span> :key="k">
</template> <el-col :xs="24"
</el-dialog> :sm="12"
</div> :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> </template>
<script setup name="systemDicDialog"> <script setup name="systemDicDialog">
@ -72,79 +143,79 @@ const emit = defineEmits(['refresh']);
// 定义变量内容 // 定义变量内容
const dicDialogFormRef = ref(); const dicDialogFormRef = ref();
const state = reactive({ const state = reactive({
ruleForm: { ruleForm: {
dicName: '', // 字典名称 dicName: '', // 字典名称
fieldName: '', // 字段名 fieldName: '', // 字段名
status: true, // 字典状态 status: true, // 字典状态
list: [], // 子集字段 + 属性值 list: [], // 子集字段 + 属性值
describe: '', // 字典描述 describe: '', // 字典描述
}, },
dialog: { dialog: {
isShowDialog: false, isShowDialog: false,
type: '', type: '',
title: '', title: '',
submitTxt: '', submitTxt: '',
}, },
}); });
// 打开弹窗 // 打开弹窗
const openDialog = (type, row) => { const openDialog = (type, row) => {
if (type === 'edit') { if (type === 'edit') {
if (row.fieldName === 'SYS_UERINFO') { if (row.fieldName === 'SYS_UERINFO') {
row.list = [ row.list = [
{ id: Math.random(), label: 'sex', value: '1' }, { id: Math.random(), label: 'sex', value: '1' },
{ id: Math.random(), label: 'sex', value: '0' }, { id: Math.random(), label: 'sex', value: '0' },
]; ];
} else { } else {
row.list = [ row.list = [
{ id: Math.random(), label: 'role', value: 'admin' }, { id: Math.random(), label: 'role', value: 'admin' },
{ id: Math.random(), label: 'role', value: 'common' }, { id: Math.random(), label: 'role', value: 'chief' },
{ id: Math.random(), label: 'roleName', value: '超级管理员' }, { id: Math.random(), label: 'roleName', value: '超级管理员' },
{ id: Math.random(), label: 'roleName', value: '普通用户' }, { id: Math.random(), label: 'roleName', value: '主要管理员' },
]; ];
} }
state.ruleForm = row; state.ruleForm = row;
state.dialog.title = '修改字典'; state.dialog.title = '修改字典';
state.dialog.submitTxt = '修 改'; state.dialog.submitTxt = '修 改';
} else { } else {
state.dialog.title = '新增字典'; state.dialog.title = '新增字典';
state.dialog.submitTxt = '新 增'; state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用 // 清空表单，此项需加表单验证才能使用
// nextTick(() => { // nextTick(() => {
// dicDialogFormRef.value.resetFields(); // dicDialogFormRef.value.resetFields();
// }); // });
} }
state.dialog.isShowDialog = true; state.dialog.isShowDialog = true;
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.dialog.isShowDialog = false; state.dialog.isShowDialog = false;
}; };
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
closeDialog(); closeDialog();
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
closeDialog(); closeDialog();
emit('refresh'); emit('refresh');
// if (state.dialog.type === 'add') { } // if (state.dialog.type === 'add') { }
}; };
// 新增行 // 新增行
const onAddRow = () => { const onAddRow = () => {
state.ruleForm.list.push({ state.ruleForm.list.push({
id: Math.random(), id: Math.random(),
label: '', label: '',
value: '', value: '',
}); });
}; };
// 删除行 // 删除行
const onDelRow = (k) => { const onDelRow = (k) => {
state.ruleForm.list.splice(k, 1); state.ruleForm.list.splice(k, 1);
}; };
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); });
</script> </script>

529
src/views/system/menu/dialog.vue
View File

@ -1,148 +1,261 @@
<template> <template>
<div class="system-menu-dialog-container"> <div class="system-menu-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"> <el-dialog :title="state.dialog.title"
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px"> v-model="state.dialog.isShowDialog"
<el-row :gutter="35"> width="769px">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-form ref="menuDialogFormRef"
<el-form-item label="上级菜单"> :model="state.ruleForm"
<el-cascader size="default"
:options="state.menuData" label-width="80px">
:props="{ checkStrictly: true, value: 'path', label: 'title' }" <el-row :gutter="35">
placeholder="请选择上级菜单" <el-col :xs="24"
clearable :sm="24"
class="w100" :md="24"
v-model="state.ruleForm.menuSuperior" :lg="24"
> :xl="24"
<template #default="{ node, data }"> class="mb20">
<span>{{ data.title }}</span> <el-form-item label="上级菜单">
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> <el-cascader :options="state.menuData"
</template> :props="{ checkStrictly: true, value: 'path', label: 'title' }"
</el-cascader> placeholder="请选择上级菜单"
</el-form-item> clearable
</el-col> class="w100"
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> v-model="state.ruleForm.menuSuperior">
<el-form-item label="菜单类型"> <template #default="{ node, data }">
<el-radio-group v-model="state.ruleForm.menuType"> <span>{{ data.title }}</span>
<el-radio label="menu">菜单</el-radio> <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
<el-radio label="btn">按钮</el-radio> </template>
</el-radio-group> </el-cascader>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24"
<el-form-item label="菜单名称"> :sm="24"
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input> :md="24"
</el-form-item> :lg="24"
</el-col> :xl="24"
<template v-if="state.ruleForm.menuType === 'menu'"> class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="菜单类型">
<el-form-item label="路由名称"> <el-radio-group v-model="state.ruleForm.menuType">
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input> <el-radio label="menu">菜单</el-radio>
</el-form-item> <el-radio label="btn">按钮</el-radio>
</el-col> </el-radio-group>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </el-form-item>
<el-form-item label="路由路径"> </el-col>
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input> <el-col :xs="24"
</el-form-item> :sm="12"
</el-col> :md="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :lg="12"
<el-form-item label="重定向"> :xl="12"
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input> class="mb20">
</el-form-item> <el-form-item label="菜单名称">
</el-col> <el-input v-model="state.ruleForm.meta.title"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> placeholder="格式：message.router.xxx"
<el-form-item label="菜单图标"> clearable></el-input>
<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon" /> </el-form-item>
</el-form-item> </el-col>
</el-col> <template v-if="state.ruleForm.menuType === 'menu'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24"
<el-form-item label="组件路径"> :sm="12"
<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input> :md="12"
</el-form-item> :lg="12"
</el-col> :xl="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> class="mb20">
<el-form-item label="链接地址"> <el-form-item label="路由名称">
<el-input <el-input v-model="state.ruleForm.name"
v-model="state.ruleForm.meta.isLink" placeholder="路由中的 name 值"
placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable></el-input>
clearable </el-form-item>
:disabled="!state.ruleForm.isLink" </el-col>
> <el-col :xs="24"
</el-input> :sm="12"
</el-form-item> :md="12"
</el-col> :lg="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :xl="12"
<el-form-item label="权限标识"> class="mb20">
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100"> <el-form-item label="路由路径">
<el-option label="admin" value="admin"></el-option> <el-input v-model="state.ruleForm.path"
<el-option label="common" value="common"></el-option> placeholder="路由中的 path 值"
</el-select> clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</template> <el-col :xs="24"
<template v-if="state.ruleForm.menuType === 'btn'"> :sm="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :md="12"
<el-form-item label="权限标识"> :lg="12"
<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input> :xl="12"
</el-form-item> class="mb20">
</el-col> <el-form-item label="重定向">
</template> <el-input v-model="state.ruleForm.redirect"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> placeholder="请输入路由重定向"
<el-form-item label="菜单排序"> clearable></el-input>
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" /> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :xs="24"
<template v-if="state.ruleForm.menuType === 'menu'"> :sm="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :md="12"
<el-form-item label="是否隐藏"> :lg="12"
<el-radio-group v-model="state.ruleForm.meta.isHide"> :xl="12"
<el-radio :label="true">隐藏</el-radio> class="mb20">
<el-radio :label="false">不隐藏</el-radio> <el-form-item label="菜单图标">
</el-radio-group> <IconSelector placeholder="请输入菜单图标"
</el-form-item> v-model="state.ruleForm.meta.icon" />
</el-col> </el-form-item>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </el-col>
<el-form-item label="页面缓存"> <el-col :xs="24"
<el-radio-group v-model="state.ruleForm.meta.isKeepAlive"> :sm="12"
<el-radio :label="true">缓存</el-radio> :md="12"
<el-radio :label="false">不缓存</el-radio> :lg="12"
</el-radio-group> :xl="12"
</el-form-item> class="mb20">
</el-col> <el-form-item label="组件路径">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-input v-model="state.ruleForm.componentAlias"
<el-form-item label="是否固定"> placeholder="组件路径"
<el-radio-group v-model="state.ruleForm.meta.isAffix"> clearable></el-input>
<el-radio :label="true">固定</el-radio> </el-form-item>
<el-radio :label="false">不固定</el-radio> </el-col>
</el-radio-group> <el-col :xs="24"
</el-form-item> :sm="12"
</el-col> :md="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :lg="12"
<el-form-item label="是否外链"> :xl="12"
<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe"> class="mb20">
<el-radio :label="true">是</el-radio> <el-form-item label="链接地址">
<el-radio :label="false">否</el-radio> <el-input v-model="state.ruleForm.meta.isLink"
</el-radio-group> placeholder="外链/内嵌时链接地址（http:xxx.com）"
</el-form-item> clearable
</el-col> :disabled="!state.ruleForm.isLink">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </el-input>
<el-form-item label="是否内嵌"> </el-form-item>
<el-radio-group v-model="state.ruleForm.meta.isIframe" @change="onSelectIframeChange"> </el-col>
<el-radio :label="true">是</el-radio> <el-col :xs="24"
<el-radio :label="false">否</el-radio> :sm="12"
</el-radio-group> :md="12"
</el-form-item> :lg="12"
</el-col> :xl="12"
</template> class="mb20">
</el-row> <el-form-item label="权限标识">
</el-form> <el-select v-model="state.ruleForm.meta.roles"
<template #footer> multiple
<span class="dialog-footer"> placeholder="取角色管理"
<el-button @click="onCancel" size="default">取 消</el-button> clearable
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button> class="w100">
</span> <el-option label="admin"
</template> value="admin"></el-option>
</el-dialog> <el-option label="chief"
</div> 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> </template>
<script setup name="systemMenuDialog"> <script setup name="systemMenuDialog">
@ -162,95 +275,95 @@ const menuDialogFormRef = ref();
const stores = useRoutesList(); const stores = useRoutesList();
const { routesList } = storeToRefs(stores); const { routesList } = storeToRefs(stores);
const state = reactive({ const state = reactive({
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式 // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
ruleForm: { ruleForm: {
menuSuperior: [], // 上级菜单 menuSuperior: [], // 上级菜单
menuType: 'menu', // 菜单类型 menuType: 'menu', // 菜单类型
name: '', // 路由名称 name: '', // 路由名称
component: '', // 组件路径 component: '', // 组件路径
componentAlias: '', // 组件路径别名 componentAlias: '', // 组件路径别名
isLink: false, // 是否外链 isLink: false, // 是否外链
menuSort: 0, // 菜单排序 menuSort: 0, // 菜单排序
path: '', // 路由路径 path: '', // 路由路径
redirect: '', // 路由重定向，有子集 children 时 redirect: '', // 路由重定向，有子集 children 时
meta: { meta: {
title: '', // 菜单名称 title: '', // 菜单名称
icon: '', // 菜单图标 icon: '', // 菜单图标
isHide: false, // 是否隐藏 isHide: false, // 是否隐藏
isKeepAlive: true, // 是否缓存 isKeepAlive: true, // 是否缓存
isAffix: false, // 是否固定 isAffix: false, // 是否固定
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空` isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空` isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
roles: '', // 权限标识，取角色管理 roles: '', // 权限标识，取角色管理
}, },
btnPower: '', // 菜单类型为按钮时，权限标识 btnPower: '', // 菜单类型为按钮时，权限标识
}, },
menuData: [], // 上级菜单数据 menuData: [], // 上级菜单数据
dialog: { dialog: {
isShowDialog: false, isShowDialog: false,
type: '', type: '',
title: '', title: '',
submitTxt: '', submitTxt: '',
}, },
}); });
// 获取 pinia 中的路由 // 获取 pinia 中的路由
const getMenuData = (routes) => { const getMenuData = (routes) => {
const arr = []; const arr = [];
routes.map((val) => { routes.map((val) => {
val['title'] = val.meta?.title; val['title'] = val.meta?.title;
arr.push({ ...val }); arr.push({ ...val });
if (val.children) getMenuData(val.children); if (val.children) getMenuData(val.children);
}); });
return arr; return arr;
}; };
// 打开弹窗 // 打开弹窗
const openDialog = (type, row) => { const openDialog = (type, row) => {
if (type === 'edit') { if (type === 'edit') {
// 模拟数据，实际请走接口 // 模拟数据，实际请走接口
row.menuType = 'menu'; row.menuType = 'menu';
row.menuSort = Math.floor(Math.random() * 100); row.menuSort = Math.floor(Math.random() * 100);
state.ruleForm = JSON.parse(JSON.stringify(row)); state.ruleForm = JSON.parse(JSON.stringify(row));
state.dialog.title = '修改菜单'; state.dialog.title = '修改菜单';
state.dialog.submitTxt = '修 改'; state.dialog.submitTxt = '修 改';
} else { } else {
state.dialog.title = '新增菜单'; state.dialog.title = '新增菜单';
state.dialog.submitTxt = '新 增'; state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用 // 清空表单，此项需加表单验证才能使用
// nextTick(() => { // nextTick(() => {
// menuDialogFormRef.value.resetFields(); // menuDialogFormRef.value.resetFields();
// }); // });
} }
state.dialog.type = type; state.dialog.type = type;
state.dialog.isShowDialog = true; state.dialog.isShowDialog = true;
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.dialog.isShowDialog = false; state.dialog.isShowDialog = false;
}; };
// 是否内嵌下拉改变 // 是否内嵌下拉改变
const onSelectIframeChange = () => { const onSelectIframeChange = () => {
if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true; if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
else state.ruleForm.isLink = false; else state.ruleForm.isLink = false;
}; };
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
closeDialog(); closeDialog();
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
closeDialog(); // 关闭弹窗 closeDialog(); // 关闭弹窗
emit('refresh'); emit('refresh');
// if (state.dialog.type === 'add') { } // if (state.dialog.type === 'add') { }
// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试 // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
state.menuData = getMenuData(routesList.value); state.menuData = getMenuData(routesList.value);
}); });
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); });
</script> </script>

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

@ -1,59 +1,91 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15"> <div class="system-user-search mb15">
<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"
<el-button size="default" type="primary" class="ml10"> size="default"
<el-icon> placeholder="请输入角色名称"
<ele-Search /> style="max-width: 180px"> </el-input>
</el-icon> <el-button size="default"
查询 type="primary"
</el-button> class="ml10">
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')"> <el-icon>
<el-icon> <ele-Search />
<ele-FolderAdd /> </el-icon>
</el-icon> 查询
新增角色 </el-button>
</el-button> <el-button size="default"
</div> type="success"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> class="ml10"
<el-table-column type="index" label="序号" width="60" /> @click="onOpenAddRole('add')">
<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column> <el-icon>
<el-table-column prop="roleSign" label="角色标识" show-overflow-tooltip></el-table-column> <ele-FolderAdd />
<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column> </el-icon>
<el-table-column prop="status" label="角色状态" show-overflow-tooltip> 新增角色
<template #default="scope"> </el-button>
<el-tag type="success" v-if="scope.row.status">启用</el-tag> </div>
<el-tag type="info" v-else>禁用</el-tag> <el-table :data="state.tableData.data"
</template> v-loading="state.tableData.loading"
</el-table-column> style="width: 100%">
<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column> <el-table-column type="index"
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> label="序号"
<el-table-column label="操作" width="100"> width="60" />
<template #default="scope"> <el-table-column prop="roleName"
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)" label="角色名称"
>修改</el-button show-overflow-tooltip></el-table-column>
> <el-table-column prop="roleSign"
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button> label="角色标识"
</template> show-overflow-tooltip></el-table-column>
</el-table-column> <el-table-column prop="sort"
</el-table> label="排序"
<el-pagination show-overflow-tooltip></el-table-column>
@size-change="onHandleSizeChange" <el-table-column prop="status"
@current-change="onHandleCurrentChange" label="角色状态"
class="mt15" show-overflow-tooltip>
:pager-count="5" <template #default="scope">
:page-sizes="[10, 20, 30]" <el-tag type="success"
v-model:current-page="state.tableData.param.pageNum" v-if="scope.row.status">启用</el-tag>
background <el-tag type="info"
v-model:page-size="state.tableData.param.pageSize" v-else>禁用</el-tag>
layout="total, sizes, prev, pager, next, jumper" </template>
:total="state.tableData.total" </el-table-column>
> <el-table-column prop="describe"
</el-pagination> label="角色描述"
</div> show-overflow-tooltip></el-table-column>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" /> <el-table-column prop="createTime"
</div> 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> </template>
<script setup name="systemRole"> <script setup name="systemRole">
@ -66,71 +98,71 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
search: '', search: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; const data = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
data.push({ data.push({
roleName: i === 0 ? '超级管理员' : '普通用户', roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`, describe: `测试角色${i + 1}`,
sort: i, sort: i,
status: true, status: true,
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
}); });
} }
state.tableData.data = data; state.tableData.data = data;
state.tableData.total = state.tableData.data.length; state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// 打开新增角色弹窗 // 打开新增角色弹窗
const onOpenAddRole = (type) => { const onOpenAddRole = (type) => {
roleDialogRef.value.openDialog(type); roleDialogRef.value.openDialog(type);
}; };
// 打开修改角色弹窗 // 打开修改角色弹窗
const onOpenEditRole = (type, row) => { const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row); roleDialogRef.value.openDialog(type, row);
}; };
// 删除角色 // 删除角色
const onRowDel = (row) => { const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => { });
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>

397
src/views/system/user/dialog.vue
View File

@ -1,91 +1,182 @@
<template> <template>
<div class="system-user-dialog-container"> <div class="system-user-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"> <el-dialog :title="state.dialog.title"
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px"> v-model="state.dialog.isShowDialog"
<el-row :gutter="35"> width="769px">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form ref="userDialogFormRef"
<el-form-item label="账户名称"> :model="state.ruleForm"
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input> size="default"
</el-form-item> label-width="90px">
</el-col> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24"
<el-form-item label="用户昵称"> :sm="12"
<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input> :md="12"
</el-form-item> :lg="12"
</el-col> :xl="12"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> class="mb20">
<el-form-item label="关联角色"> <el-form-item label="账户名称">
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100"> <el-input v-model="state.ruleForm.userName"
<el-option label="超级管理员" value="admin"></el-option> placeholder="请输入账户名称"
<el-option label="普通用户" value="common"></el-option> clearable></el-input>
</el-select> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :xs="24"
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> :sm="12"
<el-form-item label="部门"> :md="12"
<el-cascader :lg="12"
:options="state.deptData" :xl="12"
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }" class="mb20">
placeholder="请选择部门" <el-form-item label="用户昵称">
clearable <el-input v-model="state.ruleForm.userNickname"
class="w100" placeholder="请输入用户昵称"
v-model="state.ruleForm.department" clearable></el-input>
> </el-form-item>
<template #default="{ node, data }"> </el-col>
<span>{{ data.deptName }}</span> <el-col :xs="24"
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> :sm="12"
</template> :md="12"
</el-cascader> :lg="12"
</el-form-item> :xl="12"
</el-col> class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="关联角色">
<el-form-item label="手机号"> <el-select v-model="state.ruleForm.roleSign"
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input> placeholder="请选择"
</el-form-item> clearable
</el-col> class="w100">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-option label="超级管理员"
<el-form-item label="邮箱"> value="admin"></el-option>
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input> <el-option label="主要管理员"
</el-form-item> value="chief"></el-option>
</el-col> </el-select>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </el-form-item>
<el-form-item label="性别"> </el-col>
<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100"> <el-col :xs="24"
<el-option label="男" value="男"></el-option> :sm="12"
<el-option label="女" value="女"></el-option> :md="12"
</el-select> :lg="12"
</el-form-item> :xl="12"
</el-col> class="mb20">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="部门">
<el-form-item label="账户密码"> <el-cascader :options="state.deptData"
<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input> :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
</el-form-item> placeholder="请选择部门"
</el-col> clearable
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> class="w100"
<el-form-item label="账户过期"> v-model="state.ruleForm.department">
<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker> <template #default="{ node, data }">
</el-form-item> <span>{{ data.deptName }}</span>
</el-col> <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </template>
<el-form-item label="用户状态"> </el-cascader>
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :xs="24"
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> :sm="12"
<el-form-item label="用户描述"> :md="12"
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input> :lg="12"
</el-form-item> :xl="12"
</el-col> class="mb20">
</el-row> <el-form-item label="手机号">
</el-form> <el-input v-model="state.ruleForm.phone"
<template #footer> placeholder="请输入手机号"
<span class="dialog-footer"> clearable></el-input>
<el-button @click="onCancel" size="default">取 消</el-button> </el-form-item>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button> </el-col>
</span> <el-col :xs="24"
</template> :sm="12"
</el-dialog> :md="12"
</div> :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> </template>
<script setup name="systemUserDialog"> <script setup name="systemUserDialog">
@ -97,91 +188,91 @@ const emit = defineEmits(['refresh']);
// 定义变量内容 // 定义变量内容
const userDialogFormRef = ref(); const userDialogFormRef = ref();
const state = reactive({ const state = reactive({
ruleForm: { ruleForm: {
userName: '', // 账户名称 userName: '', // 账户名称
userNickname: '', // 用户昵称 userNickname: '', // 用户昵称
roleSign: '', // 关联角色 roleSign: '', // 关联角色
department: [], // 部门 department: [], // 部门
phone: '', // 手机号 phone: '', // 手机号
email: '', // 邮箱 email: '', // 邮箱
sex: '', // 性别 sex: '', // 性别
password: '', // 账户密码 password: '', // 账户密码
overdueTime: '', // 账户过期 overdueTime: '', // 账户过期
status: true, // 用户状态 status: true, // 用户状态
describe: '', // 用户描述 describe: '', // 用户描述
}, },
deptData: [], // 部门数据 deptData: [], // 部门数据
dialog: { dialog: {
isShowDialog: false, isShowDialog: false,
type: '', type: '',
title: '', title: '',
submitTxt: '', submitTxt: '',
}, },
}); });
// 打开弹窗 // 打开弹窗
const openDialog = (type, row) => { const openDialog = (type, row) => {
if (type === 'edit') { if (type === 'edit') {
state.ruleForm = row; state.ruleForm = row;
state.dialog.title = '修改用户'; state.dialog.title = '修改用户';
state.dialog.submitTxt = '修 改'; state.dialog.submitTxt = '修 改';
} else { } else {
state.dialog.title = '新增用户'; state.dialog.title = '新增用户';
state.dialog.submitTxt = '新 增'; state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用 // 清空表单，此项需加表单验证才能使用
// nextTick(() => { // nextTick(() => {
// userDialogFormRef.value.resetFields(); // userDialogFormRef.value.resetFields();
// }); // });
} }
state.dialog.isShowDialog = true; state.dialog.isShowDialog = true;
getMenuData(); getMenuData();
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.dialog.isShowDialog = false; state.dialog.isShowDialog = false;
}; };
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
closeDialog(); closeDialog();
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
closeDialog(); closeDialog();
emit('refresh'); emit('refresh');
// if (state.dialog.type === 'add') { } // if (state.dialog.type === 'add') { }
}; };
// 初始化部门数据 // 初始化部门数据
const getMenuData = () => { const getMenuData = () => {
state.deptData.push({ state.deptData.push({
deptName: 'vueNextAdmin', deptName: 'vueNextAdmin',
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
status: true, status: true,
sort: Math.random(), sort: Math.random(),
describe: '顶级部门', describe: '顶级部门',
id: Math.random(), id: Math.random(),
children: [ children: [
{ {
deptName: 'IT外包服务', deptName: 'IT外包服务',
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
status: true, status: true,
sort: Math.random(), sort: Math.random(),
describe: '总部', describe: '总部',
id: Math.random(), id: Math.random(),
}, },
{ {
deptName: '资本控股', deptName: '资本控股',
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
status: true, status: true,
sort: Math.random(), sort: Math.random(),
describe: '分部', describe: '分部',
id: Math.random(), id: Math.random(),
}, },
], ],
}); });
}; };
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); });
</script> </script>

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

@ -1,62 +1,100 @@
<template> <template>
<div class="system-user-container layout-padding"> <div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto"> <el-card shadow="hover"
<div class="system-user-search mb15"> class="layout-padding-auto">
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input> <div class="system-user-search mb15">
<el-button size="default" type="primary" class="ml10"> <el-input size="default"
<el-icon> placeholder="请输入用户名称"
<ele-Search /> style="max-width: 180px"> </el-input>
</el-icon> <el-button size="default"
查询 type="primary"
</el-button> class="ml10">
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')"> <el-icon>
<el-icon> <ele-Search />
<ele-FolderAdd /> </el-icon>
</el-icon> 查询
新增用户 </el-button>
</el-button> <el-button size="default"
</div> type="success"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> class="ml10"
<el-table-column type="index" label="序号" width="60" /> @click="onOpenAddUser('add')">
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column> <el-icon>
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column> <ele-FolderAdd />
<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column> </el-icon>
<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-button>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column> </div>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip> <el-table :data="state.tableData.data"
<template #default="scope"> v-loading="state.tableData.loading"
<el-tag type="success" v-if="scope.row.status">启用</el-tag> style="width: 100%">
<el-tag type="info" v-else>禁用</el-tag> <el-table-column type="index"
</template> label="序号"
</el-table-column> width="60" />
<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column> <el-table-column prop="userName"
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> label="账户名称"
<el-table-column label="操作" width="100"> show-overflow-tooltip></el-table-column>
<template #default="scope"> <el-table-column prop="userNickname"
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)" label="用户昵称"
>修改</el-button show-overflow-tooltip></el-table-column>
> <el-table-column prop="roleSign"
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button> label="关联角色"
</template> show-overflow-tooltip></el-table-column>
</el-table-column> <el-table-column prop="department"
</el-table> label="部门"
<el-pagination show-overflow-tooltip></el-table-column>
@size-change="onHandleSizeChange" <el-table-column prop="phone"
@current-change="onHandleCurrentChange" label="手机号"
class="mt15" show-overflow-tooltip></el-table-column>
:pager-count="5" <el-table-column prop="email"
:page-sizes="[10, 20, 30]" label="邮箱"
v-model:current-page="state.tableData.param.pageNum" show-overflow-tooltip></el-table-column>
background <el-table-column prop="status"
v-model:page-size="state.tableData.param.pageSize" label="用户状态"
layout="total, sizes, prev, pager, next, jumper" show-overflow-tooltip>
:total="state.tableData.total" <template #default="scope">
> <el-tag type="success"
</el-pagination> v-if="scope.row.status">启用</el-tag>
</el-card> <el-tag type="info"
<UserDialog ref="userDialogRef" @refresh="getTableData()" /> v-else>禁用</el-tag>
</div> </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> </template>
<script setup name="systemUser"> <script setup name="systemUser">
@ -69,77 +107,77 @@ const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialo
// 定义变量内容 // 定义变量内容
const userDialogRef = ref(); const userDialogRef = ref();
const state = reactive({ const state = reactive({
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
loading: false, loading: false,
param: { param: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
}, },
}); });
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; const data = [];
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
data.push({ data.push({
userName: i === 0 ? 'admin' : 'test', userName: i === 0 ? 'admin' : 'test',
userNickname: i === 0 ? '我是管理员' : '我是普通用户', userNickname: i === 0 ? '我是管理员' : '我是主要管理员',
roleSign: i === 0 ? 'admin' : 'common', roleSign: i === 0 ? 'admin' : 'chief',
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'], department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
phone: '12345678910', phone: '12345678910',
email: 'vueNextAdmin@123.com', email: 'vueNextAdmin@123.com',
sex: '女', sex: '女',
password: '123456', password: '123456',
overdueTime: new Date(), overdueTime: new Date(),
status: true, status: true,
describe: i === 0 ? '不可删除' : '测试用户', describe: i === 0 ? '不可删除' : '测试用户',
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
}); });
} }
state.tableData.data = data; state.tableData.data = data;
state.tableData.total = state.tableData.data.length; state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// 打开新增用户弹窗 // 打开新增用户弹窗
const onOpenAddUser = (type) => { const onOpenAddUser = (type) => {
userDialogRef.value.openDialog(type); userDialogRef.value.openDialog(type);
}; };
// 打开修改用户弹窗 // 打开修改用户弹窗
const onOpenEditUser = (type, row) => { const onOpenEditUser = (type, row) => {
userDialogRef.value.openDialog(type, row); userDialogRef.value.openDialog(type, row);
}; };
// 删除用户 // 删除用户
const onRowDel = (row) => { const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', { ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => { });
}; };
// 分页改变 // 分页改变
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
}; };
// 分页改变 // 分页改变
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
getTableData(); getTableData();
}); });
</script> </script>