yaowang
/
vordm-admin
10
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

3
package.json
View File

@ -13,10 +13,10 @@
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.3.4",
"echarts": "^5.4.2",
"leaflet": "^1.9.3",
"element-plus": "^2.3.1",
"js-cookie": "^3.0.1",
"js-md5": "^0.7.3",
"leaflet": "^1.9.3",
"mitt": "^3.0.0",
"nprogress": "^0.2.0",
"pinia": "^2.0.33",
@ -27,7 +27,6 @@
"vue": "^3.2.47",
"vue-clipboard3": "^2.0.0",
"vue-demi": "^0.13.11",
"qs": "^6.11.1",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6"
},

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

@ -1,27 +1,42 @@
<template>
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user pr15"
:style="{ flex: layoutUserFlexNum }">
<el-dropdown :show-timeout="70"
:hide-timeout="50"
trigger="click"
@command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont icon-ziti" title="组件大小"></i>
<i class="iconfont icon-ziti"
title="组件大小"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
<el-dropdown-item command="large"
:disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
<el-dropdown-item command="default"
:disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
<el-dropdown-item command="small"
:disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
<div class="layout-navbars-breadcrumb-user-icon"
@click="onSearchClick">
<el-icon title="菜单搜索">
<ele-Search />
</el-icon>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="icon-skin iconfont" title="布局配置"></i>
<div class="layout-navbars-breadcrumb-user-icon"
@click="onLayoutSetingClick">
<i class="icon-skin iconfont"
title="布局配置"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon">
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
<el-popover placement="bottom"
trigger="click"
transition="el-zoom-in-top"
:width="300"
:persistent="false">
<template #reference>
<el-badge :is-dot="true">
<el-icon title="消息">
@ -34,17 +49,19 @@
</template>
</el-popover>
</div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i
class="iconfont"
<div class="layout-navbars-breadcrumb-user-icon mr10"
@click="onScreenfullClick">
<i class="iconfont"
:title="state.isScreenfull ? '关全屏' : '开全屏'"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
></i>
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<el-dropdown :show-timeout="70"
:hide-timeout="50"
@command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
{{ userInfos.userName === '' ? 'common' : userInfos.userName }}
<img :src="userInfos.photo"
class="layout-navbars-breadcrumb-user-link-photo mr5" />
{{ userInfos.userName === '' ? 'chief' : userInfos.userName }}
<el-icon class="el-icon--right">
<ele-ArrowDown />
</el-icon>
@ -55,7 +72,8 @@
<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-item divided
command="logOut">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -151,7 +169,7 @@ const onHandleCommandClick = (path) => {
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch(() => {});
.catch(() => { });
} else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin');
} else {
@ -180,19 +198,19 @@ onMounted(() => {
initI18nOrSize('globalComponentSize', 'disabledSize');
}
//刷新token
state.setIntervalId =setInterval(() => {
state.setIntervalId = setInterval(() => {
const dateTime = Session.get('token-time');
const rt = Session.get('refresh-token');
const now = new Date().getTime();
if((now - dateTime) / 1000 > website.value.tokenTime){
if ((now - dateTime) / 1000 > website.value.tokenTime) {
// 刷新token
refreshToken(rt, website.value.tenantId).then(res=>{
refreshToken(rt, website.value.tenantId).then(res => {
Session.set('token', res.access_token);
Session.set('token-time', new Date().getTime());
Session.set('refresh-token', res.refresh_token);
})
}
},10000);
}, 10000);
});
</script>

12
src/router/backEnd.js
View File

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

20
src/router/route.js
View File

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

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

@ -3,19 +3,40 @@
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
<el-select 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-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 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 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">
@ -24,21 +45,27 @@
<!-- <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"
type="primary"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10">
<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-button size="default"
type="warning"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
@ -81,7 +108,8 @@
>
</el-pagination> -->
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -176,8 +204,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
@ -209,7 +237,7 @@ const onRowDel = (row) => {
getTableData();
ElMessage.success('删除成功');
})
.catch(() => {});
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val) => {

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

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

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

@ -1,11 +1,11 @@
<template>
<div class="container">
<div class="rsSelect">
<el-tabs v-model="state.activeName"
@tab-click="handleClick">
<el-tab-pane label="Search condition"
name="first">
<div class="rsSelect">
<el-card class="box-card">
<span>Select time range</span>
<div class="block">
@ -34,27 +34,34 @@
view-class="view-box"
:native="false">
<div class="coordinateContainer"
v-for="(coordinate, i) in state.coordinateList">{{
// coordinate
'Lat:' + coordinate.lat.toFixed("3") + ',&nbsp;&nbsp;&nbsp;&nbsp;Lng:' + coordinate.lng.toFixed("3")
}}
&nbsp;&nbsp;&nbsp;&nbsp;
<el-button class="el-icon-edit"
size="small"></el-button>
<el-button class="el-icon-close"
size="small"></el-button>
v-for="(coordinate,i) in state.coordinateList">
<span style="font-size:14px;float: left;width: 70%;">{{
'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
}}</span>
<span style="width:20%;margin-left: 80%;">
<el-button class="el-icon"
@click="editCoordinate"
size="small">
<ele-Edit />
</el-button>
<el-button class="el-icon"
@click="state.coordinateList.splice(i, 1);"
size="small">
<ele-Delete />
</el-button>
</span>
</div>
</el-scrollbar>
<el-button @click="addCoordinate">Add coordinates</el-button>
<el-button @click="clearCoordinate">Clear coordinates</el-button>
<el-button class="coordinateBtn"
@click="addCoordinate">Add coordinates</el-button>
<el-button class="coordinateBtn"
@click="clearCoordinate">Clear coordinates</el-button>
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select satellite type</span>
<el-scrollbar wrap-class="sensor_list"
view-class="view-box"
:native="false">
<el-tree-select class="satelliteSelect"
v-model="state.satelliteSelected"
:data="sensor"
@ -62,16 +69,192 @@
:render-after-expand="false"
show-checkbox
placeholder="Select satellite type" />
</el-scrollbar>
</el-card>
<el-button @click="startCrawl">Start Crawl</el-button>
<el-button>Cancel</el-button>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select VoRDM ID</span>
<el-select class="idSelect"
v-model="state.selectID"
clearable
placeholder="Select VoRDM ID">
<el-option v-for="item in idOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</el-card>
<el-button class="lowerBtn"
@click="startCrawl">Start Crawl</el-button>
<el-button class="lowerBtn"
@click="ClearCondition">Cancel</el-button>
</div>
<Map id="map"></Map>
</el-tab-pane>
</el-tabs>
<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>
<Map id="map"></Map>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Administrator"
label="Administrator"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster type"
label="Disaster type"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster keyword"
label="Disaster keyword"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Affected country"
label="Affected country"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Longitude"
label="Longitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude"
label="Latitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseTime"
label="Response time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus"
label="Response status"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
>删除</el-button
>
</template>
</el-table-column> -->
</el-table>
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total">
</el-pagination>
</el-tab-pane>
</el-tabs>
</div>
</template>
@ -79,17 +262,7 @@
import { ref, reactive } from 'vue';
import Map from "/@/components/Map.vue";
const state = reactive({
activeName: 'first',
startTime: '',
endTime: '',
addCoord: false,
satelliteSelected: [],
coordinateList: [],
})
// 卫星类型
const sensor = ref([
{
value: 'landsat',
@ -207,6 +380,101 @@ const sensor = ref([
}
])
// VoRDM ID
const idOptions = [
{
value: '2023001001',
label: '2023001001',
},
{
value: '2023001002',
label: '2023001002',
},
{
value: '2023001003',
label: '2023001003',
},
{
value: '2023001004',
label: '2023001004',
},
{
value: '2023001005',
label: '2023001005',
},
]
//选择灾害类型下拉框
const options_disastertype = [
{
value: 'Earthquake',
label: 'Earthquake',
},
{
value: 'Hurricane',
label: 'Hurricane',
},
{
value: 'Flood',
label: 'Flood',
},
{
value: 'Volcano',
label: 'Volcano',
},
{
value: 'Drought',
label: 'Drought',
},
{
value: 'Landslide',
label: 'Landslide',
},
];
//选择爬虫类型下拉框
const options_crawlertype = [
{
value: 'Bing',
label: 'Bing',
},
{
value: 'Twitter',
label: 'Twitter',
},
{
value: 'Baidu',
label: 'Baidu',
},
{
value: 'Weibo',
label: 'Weibo',
},
];
const state = reactive({
activeName: 'first',
startTime: '',
endTime: '',
addCoord: false,
satelliteSelected: [],
coordinateList: [],
selectID: '',
tableData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
value_disastertype: '',
value_disastertime: '',
value_crawlertype: '',
})
const shortcuts = [
{
text: '1 month ago',
@ -238,12 +506,12 @@ const shortcuts = [
const addCoordinate = () => {
state.addCoord = !state.addCoord;
state.coordinateList = [
// '43.538', '111.530', '36.195', '120.761'
{
Lat: '43.538'
,
Lng: '111.530'
}, {
},
{
Lat: '36.195'
,
Lng: '120.761'
@ -256,7 +524,12 @@ const clearCoordinate = () => {
state.startTime = '';
state.endTime = '';
}
// 编辑坐标点
const editCoordinate = () => {
}
// 开始爬虫
const startCrawl = () => {
console.log("start time:", state.startTime)
console.log("end time:", state.endTime)
@ -264,38 +537,41 @@ const startCrawl = () => {
console.log("satelliteSelected:", state.satelliteSelected)
}
// 清空搜索条件
const ClearCondition = () => {
state.startTime = ''
state.endTime = ''
state.addCoord = false
state.satelliteSelected = []
state.coordinateList = []
state.selectID = ''
}
</script>
<style scoped lang="scss">
.container {
padding: 2% 1%;
padding: 1% 1%;
.rsSelect {
float: left;
border: 1px solid blue;
border: 1px solid #040728;
width: 30%;
height: 53rem;
height: 52rem;
span {
display: block;
margin-bottom: 3%;
font-size: 18px;
}
.satelliteSelect {
width: 75%;
margin: 10px 0 10px 10px;
}
.el-tree {
margin: 10px 0 0 0;
color: black;
border-radius: 4px;
}
.el-tree-node__label {
font-size: 12px;
.satelliteSelect,
.idSelect {
width: 90%;
margin: 2% 3% 0 3%;
}
.block {
margin: 2% 0;
margin-top: 2%;
.demonstration {
font-size: 14px;
float: left;
height: 20px;
line-height: 40px;
@ -304,14 +580,18 @@ const startCrawl = () => {
}
}
.coordinateContainer {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 3%;
}
.coordinateBtn {
margin-left: 3%;
}
.lowerBtn {
margin: 3% 0 3% 3%;
}
}
#map {
width: 70%;
height: 53rem;
height: 52rem;
float: left;
}
}

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

@ -3,19 +3,40 @@
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
<el-select 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-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 v-model="value_disasterevent"
size="default"
placeholder="Select disaster event"
class="ml10">
<el-option v-for="item in options_disasterevent"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
<!-- 选择数据类型下拉框 -->
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="value_datatype"
size="default"
placeholder="Select data type"
class="ml10">
<el-option v-for="item in options_datatype"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
<!-- 选择是否可视化下拉框 -->
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
@ -24,14 +45,18 @@
<!-- <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"
type="primary"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10">
<el-button size="default"
type="success"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
@ -75,7 +100,8 @@
>
</el-pagination> -->
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -161,8 +187,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
@ -194,7 +220,7 @@ const onRowDel = (row) => {
getTableData();
ElMessage.success('删除成功');
})
.catch(() => {});
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val) => {

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

@ -3,19 +3,40 @@
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<!-- 选择灾害类型下拉框 -->
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
<el-select 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-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 v-model="value_disasterevent"
size="default"
placeholder="Select disaster event"
class="ml10">
<el-option v-for="item in options_disasterevent"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
<!-- 选择数据类型下拉框 -->
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
<el-select v-model="value_datatype"
size="default"
placeholder="Select data type"
class="ml10">
<el-option v-for="item in options_datatype"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
<!-- 选择是否可视化下拉框 -->
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
@ -24,14 +45,18 @@
<!-- <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"
type="primary"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
Search
</el-button>
<el-button size="default" type="success" class="ml10">
<el-button size="default"
type="success"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
@ -75,7 +100,8 @@
>
</el-pagination> -->
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -177,8 +203,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
@ -210,7 +236,7 @@ const onRowDel = (row) => {
getTableData();
ElMessage.success('删除成功');
})
.catch(() => {});
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val) => {

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

@ -1,17 +1,39 @@
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="ID" width="50" />
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
<el-table-column prop="Contact details" label="Contact details" show-overflow-tooltip></el-table-column>
<el-table-column prop="vordmId" label="VoRDM ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
<el-table-column prop="applicationTime" label="Application time" show-overflow-tooltip></el-table-column>
<el-table-column prop="Remark" label="Remark" show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Contact details"
label="Contact details"
show-overflow-tooltip></el-table-column>
<el-table-column prop="vordmId"
label="VoRDM ID"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterType"
label="Disaster type"
show-overflow-tooltip></el-table-column>
<el-table-column prop="applicationTime"
label="Application time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Remark"
label="Remark"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@ -32,8 +54,7 @@
</template>
</el-table-column> -->
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -42,11 +63,11 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -86,8 +107,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,

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

@ -1,18 +1,42 @@
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="ID" width="50" />
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
<el-table-column prop="professionalTitle" label="Professional title" show-overflow-tooltip></el-table-column>
<el-table-column prop="researchField" label="Research field" show-overflow-tooltip></el-table-column>
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
<el-table-column prop="dataDetails" label="Data details" show-overflow-tooltip></el-table-column>
<el-table-column prop="dataFormat" label="Data Format" show-overflow-tooltip></el-table-column>
<el-table-column prop="dataSize" label="Data size" show-overflow-tooltip></el-table-column>
<el-table-column prop="uploadTime" label="Upload time" show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="professionalTitle"
label="Professional title"
show-overflow-tooltip></el-table-column>
<el-table-column prop="researchField"
label="Research field"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataDetails"
label="Data details"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataFormat"
label="Data Format"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataSize"
label="Data size"
show-overflow-tooltip></el-table-column>
<el-table-column prop="uploadTime"
label="Upload time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@ -33,8 +57,7 @@
</template>
</el-table-column> -->
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -43,11 +66,11 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -87,8 +110,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,

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

@ -1,21 +1,51 @@
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 20px">
<el-tab-pane label="Not reviewed" name="first">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="ID" width="50" />
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
<el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column>
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
<el-tabs v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
style="margin-left: 20px">
<el-tab-pane label="Not reviewed"
name="first">
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterType"
label="Disaster type"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterKeyword"
label="Disaster keyword"
show-overflow-tooltip></el-table-column>
<el-table-column prop="affectedCountry"
label="Affected country"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Longitude"
label="Longitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude"
label="Latitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseTime"
label="Response time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus"
label="Response status"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@ -36,8 +66,7 @@
</template>
</el-table-column> -->
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -46,26 +75,56 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</el-tab-pane>
<el-tab-pane label="Reviewed" name="second">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="ID" width="50" />
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
<el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column>
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster type" label="Disaster type" show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster keyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
<el-table-column prop="Affected country" label="Affected country" show-overflow-tooltip></el-table-column>
<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
<el-tab-pane label="Reviewed"
name="second">
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Administrator"
label="Administrator"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster type"
label="Disaster type"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Disaster keyword"
label="Disaster keyword"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Affected country"
label="Affected country"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Longitude"
label="Longitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude"
label="Latitude"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseTime"
label="Response time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<el-table-column prop="responseStatus"
label="Response status"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@ -86,8 +145,7 @@
</template>
</el-table-column> -->
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -96,13 +154,13 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</el-tab-pane>
</el-tabs>
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -142,8 +200,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,

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

@ -1,62 +1,133 @@
<template>
<div class="system-dic-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-dialog :title="state.dialog.title"
v-model="state.dialog.isShowDialog"
width="769px">
<el-alert title="半成品，交互过于复杂，请自行扩展！"
type="warning"
:closable="false"
class="mb20"> </el-alert>
<el-form ref="dicDialogFormRef"
:model="state.ruleForm"
size="default"
label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="字典名称">
<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
<el-input v-model="state.ruleForm.dicName"
placeholder="请输入字典名称"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="字段名">
<el-input v-model="state.ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
<el-input v-model="state.ruleForm.fieldName"
placeholder="请输入字段名，拼接 ruleForm.list"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24"
:sm="24"
:md="24"
:lg="24"
:xl="24"
class="mb20">
<el-form-item label="字典状态">
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
<el-switch v-model="state.ruleForm.status"
inline-prompt
active-text="启"
inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="24"
:md="24"
:lg="24"
:xl="24"
class="mb20">
<el-row :gutter="35"
v-for="(v, k) in state.ruleForm.list"
:key="k">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item :prop="`list[${k}].label`">
<template #label>
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
<el-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-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-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-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-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-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>
<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>
@ -98,9 +169,9 @@ const openDialog = (type, row) => {
} else {
row.list = [
{ 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: '主要管理员' },
];
}
state.ruleForm = row;

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

@ -1,18 +1,26 @@
<template>
<div class="system-menu-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px">
<el-dialog :title="state.dialog.title"
v-model="state.dialog.isShowDialog"
width="769px">
<el-form ref="menuDialogFormRef"
:model="state.ruleForm"
size="default"
label-width="80px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24"
:sm="24"
:md="24"
:lg="24"
:xl="24"
class="mb20">
<el-form-item label="上级菜单">
<el-cascader
:options="state.menuData"
<el-cascader :options="state.menuData"
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
placeholder="请选择上级菜单"
clearable
class="w100"
v-model="state.ruleForm.menuSuperior"
>
v-model="state.ruleForm.menuSuperior">
<template #default="{ node, data }">
<span>{{ data.title }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@ -20,7 +28,12 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24"
:sm="24"
:md="24"
:lg="24"
:xl="24"
class="mb20">
<el-form-item label="菜单类型">
<el-radio-group v-model="state.ruleForm.menuType">
<el-radio label="menu">菜单</el-radio>
@ -28,71 +41,146 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="菜单名称">
<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
<el-input v-model="state.ruleForm.meta.title"
placeholder="格式：message.router.xxx"
clearable></el-input>
</el-form-item>
</el-col>
<template v-if="state.ruleForm.menuType === 'menu'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="路由名称">
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
<el-input v-model="state.ruleForm.name"
placeholder="路由中的 name 值"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="路由路径">
<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
<el-input v-model="state.ruleForm.path"
placeholder="路由中的 path 值"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="重定向">
<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
<el-input v-model="state.ruleForm.redirect"
placeholder="请输入路由重定向"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="菜单图标">
<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon" />
<IconSelector placeholder="请输入菜单图标"
v-model="state.ruleForm.meta.icon" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="组件路径">
<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
<el-input v-model="state.ruleForm.componentAlias"
placeholder="组件路径"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="链接地址">
<el-input
v-model="state.ruleForm.meta.isLink"
<el-input v-model="state.ruleForm.meta.isLink"
placeholder="外链/内嵌时链接地址（http:xxx.com）"
clearable
:disabled="!state.ruleForm.isLink"
>
:disabled="!state.ruleForm.isLink">
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="权限标识">
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
<el-option label="admin" value="admin"></el-option>
<el-option label="common" value="common"></el-option>
<el-select v-model="state.ruleForm.meta.roles"
multiple
placeholder="取角色管理"
clearable
class="w100">
<el-option label="admin"
value="admin"></el-option>
<el-option label="chief"
value="chief"></el-option>
</el-select>
</el-form-item>
</el-col>
</template>
<template v-if="state.ruleForm.menuType === 'btn'">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-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-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-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-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-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>
@ -100,7 +188,12 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<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>
@ -108,7 +201,12 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<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>
@ -116,17 +214,29 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<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-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-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-group v-model="state.ruleForm.meta.isIframe"
@change="onSelectIframeChange">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
@ -137,8 +247,11 @@
</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>
<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>

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

@ -2,44 +2,76 @@
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10">
<el-input v-model="state.tableData.param.search"
size="default"
placeholder="请输入角色名称"
style="max-width: 180px"> </el-input>
<el-button size="default"
type="primary"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
<el-button size="default"
type="success"
class="ml10"
@click="onOpenAddRole('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增角色
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleSign" label="角色标识" show-overflow-tooltip></el-table-column>
<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="序号"
width="60" />
<el-table-column prop="roleName"
label="角色名称"
show-overflow-tooltip></el-table-column>
<el-table-column prop="roleSign"
label="角色标识"
show-overflow-tooltip></el-table-column>
<el-table-column prop="sort"
label="排序"
show-overflow-tooltip></el-table-column>
<el-table-column prop="status"
label="角色状态"
show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
<el-tag type="success"
v-if="scope.row.status">启用</el-tag>
<el-tag type="info"
v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<el-table-column prop="describe"
label="角色描述"
show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime"
label="创建时间"
show-overflow-tooltip></el-table-column>
<el-table-column label="操作"
width="100">
<template #default="scope">
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
<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"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -48,11 +80,11 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -83,8 +115,8 @@ const getTableData = () => {
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
@ -116,7 +148,7 @@ const onRowDel = (row) => {
getTableData();
ElMessage.success('删除成功');
})
.catch(() => {});
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val) => {

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

@ -1,36 +1,68 @@
<template>
<div class="system-user-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-dialog :title="state.dialog.title"
v-model="state.dialog.isShowDialog"
width="769px">
<el-form ref="userDialogFormRef"
:model="state.ruleForm"
size="default"
label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="账户名称">
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
<el-input v-model="state.ruleForm.userName"
placeholder="请输入账户名称"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="用户昵称">
<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
<el-input v-model="state.ruleForm.userNickname"
placeholder="请输入用户昵称"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="关联角色">
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
<el-option label="超级管理员" value="admin"></el-option>
<el-option label="普通用户" value="common"></el-option>
<el-select v-model="state.ruleForm.roleSign"
placeholder="请选择"
clearable
class="w100">
<el-option label="超级管理员"
value="admin"></el-option>
<el-option label="主要管理员"
value="chief"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="部门">
<el-cascader
:options="state.deptData"
<el-cascader :options="state.deptData"
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
placeholder="请选择部门"
clearable
class="w100"
v-model="state.ruleForm.department"
>
v-model="state.ruleForm.department">
<template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@ -38,50 +70,109 @@
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="手机号">
<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
<el-input v-model="state.ruleForm.phone"
placeholder="请输入手机号"
clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-col :xs="24"
:sm="12"
:md="12"
:lg="12"
:xl="12"
class="mb20">
<el-form-item label="邮箱">
<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
<el-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-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 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-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-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-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-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-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-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-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-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>
<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>

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

@ -1,48 +1,86 @@
<template>
<div class="system-user-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<el-card shadow="hover"
class="layout-padding-auto">
<div class="system-user-search mb15">
<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10">
<el-input size="default"
placeholder="请输入用户名称"
style="max-width: 180px"> </el-input>
<el-button size="default"
type="primary"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
<el-button size="default"
type="success"
class="ml10"
@click="onOpenAddUser('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增用户
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="序号"
width="60" />
<el-table-column prop="userName"
label="账户名称"
show-overflow-tooltip></el-table-column>
<el-table-column prop="userNickname"
label="用户昵称"
show-overflow-tooltip></el-table-column>
<el-table-column prop="roleSign"
label="关联角色"
show-overflow-tooltip></el-table-column>
<el-table-column prop="department"
label="部门"
show-overflow-tooltip></el-table-column>
<el-table-column prop="phone"
label="手机号"
show-overflow-tooltip></el-table-column>
<el-table-column prop="email"
label="邮箱"
show-overflow-tooltip></el-table-column>
<el-table-column prop="status"
label="用户状态"
show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
<el-tag type="success"
v-if="scope.row.status">启用</el-tag>
<el-tag type="info"
v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<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>
<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"
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
@ -51,11 +89,11 @@
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
:total="state.tableData.total">
</el-pagination>
</el-card>
<UserDialog ref="userDialogRef" @refresh="getTableData()" />
<UserDialog ref="userDialogRef"
@refresh="getTableData()" />
</div>
</template>
@ -87,8 +125,8 @@ const getTableData = () => {
for (let i = 0; i < 2; i++) {
data.push({
userName: i === 0 ? 'admin' : 'test',
userNickname: i === 0 ? '我是管理员' : '我是普通用户',
roleSign: i === 0 ? 'admin' : 'common',
userNickname: i === 0 ? '我是管理员' : '我是主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
phone: '12345678910',
email: 'vueNextAdmin@123.com',
@ -125,7 +163,7 @@ const onRowDel = (row) => {
getTableData();
ElMessage.success('删除成功');
})
.catch(() => {});
.catch(() => { });
};
// 分页改变
const onHandleSizeChange = (val) => {