Skip to content

W
web-monitor
Commit e613cdee authored by dupengyu's avatar dupengyu
Browse files
Options

统计 轮询 用户 角色 权限 菜单 等页面

parent 5fb2b96a
Hide whitespace changes
Inline Side-by-side
Showing with 3923 additions and 212 deletions
src/api/job.js
View file @ e613cdee
import request from '@/utils/request'
// 运行报表
/* 运行报表 */
export function chartInfo(params) {
return request({
url: '/device/chartInfo',
......@@ -7,7 +9,7 @@ export function chartInfo(params) {
params
})
}
// 任务管理
/* 任务管理 */
export function jobinfoList(data) {
return request({
url: '/device/jobinfo/pageList',
......@@ -15,7 +17,50 @@ export function jobinfoList(data) {
data
})
}
// 调度日志
// 执行一次
export function triggerJobinfo(data) {
return request({
url: '/device/jobinfo/trigger',
method: 'post',
data
})
}
// 查询节点
export function loadByIdJobinfo(data) {
return request({
url: '/device/jobgroup/loadById',
method: 'post',
data
})
}
// 下次执行时间
export function nextTriggerTime(data) {
return request({
url: '/device/jobinfo/nextTriggerTime',
method: 'post',
data
})
}
// 启动
export function start(data) {
return request({
url: '/device/jobinfo/start',
method: 'post',
data
})
}
// 停止
export function stop(data) {
return request({
url: '/device/jobinfo/stop',
method: 'post',
data
})
}
/* 调度日志 */
export function joblogList(data) {
return request({
url: '/device/joblog/pageList',
......@@ -24,7 +69,7 @@ export function joblogList(data) {
})
}
// 执行器管理
/* 执行器管理 */
export function jobgroupList(data) {
return request({
url: '/device/jobgroup/pageList',
......@@ -32,4 +77,27 @@ export function jobgroupList(data) {
data
})
}
// 新增执行器
export function addJobgroup(data) {
return request({
url: '/device/jobgroup/save',
method: 'post',
data
})
}
// 编辑执行器
export function updateJobgroup(data) {
return request({
url: '/device/jobgroup/update',
method: 'post',
data
})
}
// 删除执行器
export function removeJobgroup(data) {
return request({
url: '/device/jobgroup/remove',
method: 'post',
data
})
}
\ No newline at end of file
src/api/udp.js
View file @ e613cdee
import request from '@/utils/request'
// 时间同步
export function timeSync(params) {
return request({
url: '/device/udp/timeSync',
......@@ -7,4 +7,19 @@ export function timeSync(params) {
params
})
}
// 设备查询参数
export function selectParam(params) {
return request({
url: '/device/udp/selectParam',
method: 'post',
params
})
}
// 设备设置参数
export function setParam(params) {
return request({
url: '/device/udp/setParam',
method: 'post',
params
})
}
\ No newline at end of file
src/permission.js
View file @ e613cdee
......@@ -10,7 +10,7 @@ NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login']
router.beforeEach(async(to, from, next) => {
router.beforeEach(async (to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
......
src/utils/request.js
View file @ e613cdee
......@@ -54,7 +54,13 @@ service.interceptors.request.use(
let errorShowing = false
service.interceptors.response.use(
response => {
const res = response.data.data ? response.data.data : response.data
let res = response.data.data ? response.data.data : response.data
if (response.data.recordsTotal) {
res = {
recordsTotal: response.data.recordsTotal,
data: res
}
}
let config = response.config
endLoading(config.el)
let resFinal = res.rsp || res || {}
......
src/views/alarm/api.js
View file @ e613cdee
......@@ -12,9 +12,17 @@ const path = {
alarmConfirmStatusStatistics: 'api/sysMonitorAlarmStatistics/alarmConfirmStatusStatistics',
alarmLevelStatistics: '/api/sysMonitorAlarmStatistics/alarmLevelStatistics',
alarmLevelCountStatistics: '/api/sysMonitorAlarmStatistics/alarmLevelCountStatistics',
selectPage: '/api/sysMonitorAlarmStatistics/selectPage'
selectPage: '/api/sysMonitorAlarmStatistics/selectPage',
export: '/api/sysMonitorAlarmStatistics/export',
}
const blobConf = { responseType: 'blob' }
function requestBlob(url, params, config = {}) {
return request.post(url, params, {
...config,
...blobConf
})
}
export function cableTimeList() {
return request.post(path.cableTimeList, ...arguments);
}
......@@ -49,5 +57,6 @@ export function alarmLevelCountStatistics() {
export function selectPage() {
return request.post(path.selectPage, ...arguments);
}
export function exportExcel() {
return requestBlob(path.export, ...arguments)
}
\ No newline at end of file
src/views/alarm/cableTime/index.vue
View file @ e613cdee
......@@ -35,7 +35,7 @@
align="center"
/>
<el-table-column
prop="alarmName"
prop="alarmTarget"
label="告警对象"
width="180"
align="center"
......@@ -45,7 +45,11 @@
label="告警类型"
width="150"
align="center"
/>
>
<template slot-scope="scope">
<div>{{ alarmType[scope.row.alarmType] }}</div>
</template>
</el-table-column>
<el-table-column
prop="alarmLevelName"
label="告警级别"
......@@ -67,11 +71,23 @@
</template>
</el-table-column>
<el-table-column
prop="siteName"
prop="alarmLevel"
label="告警触发值"
width="150"
align="center"
/>
>
<template slot-scope="scope">
<div>
{{
scope.row.alarmLevel == 0
? "1.5"
: scope.row.alarmLevel == 1
? "1.8"
: "2.0"
}}
</div>
</template>
</el-table-column>
<el-table-column
prop="lateUploadTime"
label="告警发生时间"
......@@ -207,11 +223,12 @@ import search from "./components/search.vue";
import download from "@/utils/download";
import { successAlert, warningAlert } from "@/utils/alert";
import { levelStyle } from "@/const/index";
import { alarmLeval, alarmType } from "@/const";
export default {
components: { search },
data() {
return {
alarmType,
confirmStatus: 0,
dialogInfo: [],
centerDialogVisible: false,
......@@ -261,7 +278,7 @@ export default {
});
},
async handleEliminate(id) {
let res = await eliminate({id:id});
let res = await eliminate({ id: id });
if (res.code === 200) {
successAlert("取消告警成功");
this.getTableData();
......
src/views/alarm/statistics/index.vue
View file @ e613cdee
......@@ -18,7 +18,7 @@
class="ml10"
type="primary"
icon="el-icon-refresh-right"
@click="getInit"
@click="handleExportExcel"
>导出</el-button
>
<el-button
......@@ -211,7 +211,9 @@ import {
alarmLevelStatistics,
alarmLevelCountStatistics,
selectPage,
exportExcel,
} from "../api";
import download from "@/utils/download";
export default {
data() {
return {
......@@ -240,6 +242,11 @@ export default {
this.handleInIt();
},
methods: {
handleExportExcel() {
exportExcel({}).then((res) => {
download(res, "vnd.ms-excel", `告警信息统计.xls`);
});
},
handleInIt() {
this.handlealArmConfirmStatusStatistics();
this.handlealArmLevelStatistics();
......
src/views/alarm/statistics/printToPdf.js
View file @ e613cdee
......@@ -21,7 +21,6 @@ function performPrint(targetId) {
// 将不希望展示的元素隐藏掉
// 克隆目标元素及其子元素
const clonedElement = targetElement.cloneNode(true);
// clonedElement.style.width = '200mm'
// 在打印之前隐藏所有元素
function hideAllElements() {
......
src/views/jobgroup/jobinfo/index.vue
View file @ e613cdee
<template>
<div>
<div>任务管理</div>
<div class="search"></div>
<div class="nav-title">任务管理</div>
<div class="search">
<el-form
class="search-form"
:model="form"
ref="form"
:inline="true"
size="mini"
>
<el-form-item label="执行器：">
<el-select v-model="form.jobGroup" placeholder="请选择">
<el-option
v-for="item in groupList"
:key="item.id"
:label="item.title"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="form.triggerStatus" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="任务描述：">
<el-input
v-model="form.jobDesc"
placeholder="请输入任务描述"
></el-input>
</el-form-item>
<el-form-item label="JobHandler：">
<el-input
v-model="form.executorHandler"
placeholder="请输入JobHandler"
></el-input>
</el-form-item>
<el-form-item label="负责人：">
<el-input v-model="form.author" placeholder="请输入负责人"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toSearch">查询</el-button>
<el-button type="primary" @click="handleEdit()">新增</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column label="任务ID" align="center" />
<el-table-column prop="siteName" label="任务描述" align="center" />
<el-table-column prop="alarmName" label="调度类型" align="center" />
<el-table-column prop="alarmType" label="运行模式" align="center" />
<el-table-column prop="alarmLevelName" label="负责人" align="center" />
<el-table-column prop="alarmLevelName" label="状态" align="center" />
<el-table-column prop="id" label="任务ID" align="center" />
<el-table-column prop="jobDesc" label="任务描述" align="center" />
<el-table-column prop="scheduleConf" label="调度类型" align="center" />
<el-table-column prop="alarmType" label="运行模式" align="center">
<template slot-scope="scope">
{{ scope.row.glueType }}:{{ scope.row.executorHandler }}
</template>
</el-table-column>
<el-table-column prop="author" label="负责人" align="center" />
<el-table-column prop="triggerStatus" label="状态" align="center">
<template slot-scope="scope">
<el-tag
:type="scope.row.triggerStatus === 1 ? 'success' : 'warning'"
>{{ scope.row.triggerStatus === 1 ? "运行中" : "已停止" }}</el-tag
>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" @click="eliminate(scope.row)"
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{ name: 'a', data: scope.row }"
>执行一次</el-dropdown-item
>
<el-dropdown-item>查询日志</el-dropdown-item>
<el-dropdown-item :command="{ name: 'c', data: scope.row }"
>注册节点</el-dropdown-item
>
<el-dropdown-item :command="{ name: 'd', data: scope.row }"
>下次执行时间</el-dropdown-item
>
<el-dropdown-item
divided
v-if="scope.row.triggerStatus == 0"
:command="{ name: 'e', data: scope.row }"
>启动</el-dropdown-item
>
<el-dropdown-item
divided
v-if="scope.row.triggerStatus == 1"
:command="{ name: 'e', data: scope.row }"
>停止</el-dropdown-item
>
<el-dropdown-item>编辑</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
<el-dropdown-item>复制</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button type="text" @click="eliminate(scope.row)"
>操作</el-button
>
> -->
</template>
</el-table-column>
</el-table>
<Pagination
:limit="params.size"
:page="params.current"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
<el-dialog
title="执行一次"
:visible.sync="aDialogVisible"
width="600px"
@close="handleClose"
center
>
<el-form :model="manageFrom" ref="form" size="mini">
<el-form-item label="任务参数：">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入任务参数"
v-model="manageFrom.executorParam"
>
</el-input>
</el-form-item>
<el-form-item label="机器地址：">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入本次执行的机器地址，为空则从执行器获取"
v-model="manageFrom.addressList"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleTriggerJobinfo"
>确定</el-button
>
<el-button @click="handleClose()">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog
title="注册节点"
:visible.sync="cDialogVisible"
width="600px"
@close="handleClose"
center
>
<div
style="margin: 8px"
v-for="(item, index) in showData && showData.registryList"
:key="index"
>
{{ index + 1 }}. {{ item }}
</div>
</el-dialog>
<el-dialog
title="注册节点"
:visible.sync="dDialogVisible"
width="600px"
@close="handleClose"
center
>
<div
style="margin: 8px; text-align: center"
v-for="(item, index) in showData && showData.timeList"
:key="index"
>
{{ item }}
</div>
</el-dialog>
</div>
</template>
<script>
import { jobinfoList } from "@/api/job.js";
import {
jobinfoList,
triggerJobinfo,
loadByIdJobinfo,
jobgroupList,
nextTriggerTime,
start,
stop,
} from "@/api/job.js";
import { successAlert, warningAlert } from "@/utils/alert";
export default {
data() {
return {
manageFrom: {},
tableData: [],
groupList: [],
showData: {
timeList: [],
},
aDialogVisible: false,
cDialogVisible: false,
dDialogVisible: false,
form: {
jobGroup: "",
triggerStatus: -1,
jobDesc: "",
executorHandler: "",
author: "",
},
params: {
current: 1,
size: 10,
},
total: 0,
options: [
{
id: -1,
label: "全部",
},
{
id: 1,
label: "启动",
},
{
id: 0,
label: "停止",
},
],
};
},
mounted() {},
methods: {},
mounted() {
this.handleJobGroupList();
},
methods: {
async handleStop() {
let data = {
id: this.manageFrom.id,
};
const queryParams = new URLSearchParams(data).toString();
let res = await stop(queryParams);
if (res.code == 200) {
successAlert("操作成功");
this.handleJobinfoList();
}
},
async handleStart() {
let data = {
id: this.manageFrom.id,
};
const queryParams = new URLSearchParams(data).toString();
let res = await start(queryParams);
if (res.code == 200) {
successAlert("操作成功");
this.handleJobinfoList();
}
},
async handleNextTriggerTime() {
let data = {
scheduleType: this.manageFrom.scheduleType,
scheduleConf: this.manageFrom.scheduleConf,
};
const queryParams = new URLSearchParams(data).toString();
let res = await nextTriggerTime(queryParams);
this.showData.timeList = res.content;
this.dDialogVisible = true;
},
// 查询节点
async handleLoadByIdJobinfo() {
let data = {
id: this.manageFrom.jobGroup,
};
const queryParams = new URLSearchParams(data).toString();
let res = await loadByIdJobinfo(queryParams);
this.showData = res.content;
this.cDialogVisible = true;
},
handleClose() {
this.manageFrom = {};
this.aDialogVisible = false;
this.cDialogVisible = false;
},
// 执行一次
async handleTriggerJobinfo() {
let data = {
id: this.manageFrom.id,
executorParam: this.manageFrom.executorParam,
addressList: this.manageFrom.addressList,
};
const queryParams = new URLSearchParams(data).toString();
let res = await triggerJobinfo(queryParams);
if (res.code == 200) {
successAlert("操作成功");
this.handleClose();
}
},
handleCommand(e) {
this.manageFrom = e.data;
// jobgroup/loadById
// /jobinfo/nextTriggerTime
switch (e.name) {
case "a":
this.aDialogVisible = true;
break;
case "c":
this.handleLoadByIdJobinfo();
break;
case "d":
this.handleNextTriggerTime();
break;
case "e":
if (e.data.triggerStatus == 0) {
this.handleStart();
}else{
this.handleStop();
}
break;
// loadByIdJobinfo;
default:
break;
}
console.log(e);
},
handlePageChange(pageData) {
this.params.size = pageData.size;
this.params.current = pageData.page;
this.handleJobinfoList();
},
async handleJobinfoList() {
let data = {
jobGroup: this.form.jobGroup,
triggerStatus: this.form.triggerStatus,
jobDesc: this.form.jobDesc,
executorHandler: this.form.executorHandler,
author: this.form.author,
start: (this.params.current - 1) * this.params.size,
length: this.params.size,
};
const queryParams = new URLSearchParams(data).toString();
let res = await jobinfoList(queryParams);
this.tableData = res.data;
this.total = res.recordsTotal;
},
toSearch() {
this.handleJobinfoList();
},
handleEdit(e) {},
async handleJobGroupList() {
let data = {
start: 0,
length: 999,
};
const queryParams = new URLSearchParams(data).toString();
const res = await jobgroupList(queryParams);
this.groupList = res.data;
this.form.jobGroup = res.data[0].id;
this.handleJobinfoList();
},
},
};
</script>
<style lang="scss" scoped>
.nav-title {
color: #02a7f0;
font-size: 20px;
position: relative;
padding-left: 16px;
font-weight: bold;
line-height: 28px;
}
.nav-title::before {
content: "";
position: absolute;
left: 0px;
top: 1px;
width: 5px;
height: 100%;
background-color: #02a7f0;
border-radius: 4px;
}
.search {
margin: 16px 0;
.search-form {
padding: 10px;
background-color: #eaf1fe;
margin-bottom: 20px;
border-radius: 8px;
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
.el-dropdown-menu {
background: #fff;
}
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
\ No newline at end of file
src/views/jobgroup/joblog/index.vue
View file @ e613cdee
......@@ -8,26 +8,44 @@
style="width: 100%"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column label="任务ID" align="center" />
<el-table-column prop="siteName" label="调度时间" align="center" />
<el-table-column prop="alarmName" label="调度结果" align="center" />
<el-table-column prop="alarmType" label="调度备注" align="center" />
<el-table-column prop="alarmType" label="执行时间" align="center" />
<el-table-column prop="alarmType" label="执行结果" align="center" />
<el-table-column
prop="alarmLevelName"
label="执行备注"
align="center"
/>
<el-table-column label="操作" align="center" width="100">
<el-table-column prop="jobId" label="任务ID" align="center" />
<el-table-column prop="triggerTime" label="调度时间" align="center" />
<el-table-column prop="triggerCode" label="调度结果" align="center">
<template slot-scope="scope">
<el-button type="text" @click="eliminate(scope.row)"
>操作</el-button
<el-tag
:type="scope.row.triggerCode === 200 ? 'success' : 'danger'"
>{{ scope.row.triggerCode === 200 ? "成功" : "失败" }}</el-tag
>
</template>
</el-table-column>
<el-table-column prop="triggerMsg" label="调度备注" align="center">
<template slot-scope="scope">
<el-button type="text" @click="handleView(scope.row.triggerMsg)"
>查看</el-button
>
<!-- <div v-html="scope.row.triggerMsg"></div> -->
</template>
</el-table-column>
<el-table-column prop="handleTime" label="执行时间" align="center" />
<el-table-column prop="handleCode" label="执行结果" align="center">
<template slot-scope="scope">
<el-tag
:type="scope.row.handleCode === 200 ? 'success' : 'danger'"
>{{ scope.row.handleCode === 200 ? "成功" : "失败" }}</el-tag
>
</template>
</el-table-column>
<el-table-column prop="handleMsg" label="执行备注" align="center" />
</el-table>
</div>
<el-dialog
title="告警详情"
:visible.sync="centerDialogVisible"
width="600px"
center
>
<div v-html="dialogInfo"></div>
</el-dialog>
</div>
</template>
......@@ -37,12 +55,18 @@ export default {
data() {
return {
tableData: [],
dialogInfo: "",
centerDialogVisible: false,
};
},
mounted() {
this.handleJoblogList();
},
methods: {
handleView(e) {
this.dialogInfo = e;
this.centerDialogVisible = true;
},
async handleJoblogList() {
let data = {
jobGroup: 0,
......@@ -55,7 +79,7 @@ export default {
const queryParams = new URLSearchParams(data).toString();
const res = await joblogList(queryParams);
console.log(res);
this.tableData = res;
this.tableData = res.data;
},
},
};
......
src/views/jobgroup/jobmanage/index.vue
View file @ e613cdee
<template>
<div>
<div>执行器管理</div>
<div class="search"></div>
<div class="nav-title">执行器管理</div>
<div class="search">
<el-form
class="search-form"
:model="form"
ref="form"
:inline="true"
size="mini"
>
<el-form-item label="APPName：">
<el-input
v-model="form.appname"
placeholder="请输入APPName"
></el-input>
</el-form-item>
<el-form-item label="名称：">
<el-input v-model="form.title" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toSearch">查询</el-button>
<el-button type="primary" @click="handleEdit()">新增</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table
:data="tableData"
......@@ -10,44 +32,223 @@
>
<el-table-column label="AppName" prop="appname" align="center" />
<el-table-column prop="title" label="名称" align="center" />
<el-table-column prop="addressType" label="注册方式" align="center" />
<el-table-column prop="addressType" label="注册方式" align="center">
<template slot-scope="scope">
{{ scope.row.addressType === 0 ? "自动录入" : "手动录入" }}
</template>
</el-table-column>
<el-table-column
prop="registryList"
label="OnLine 机器地址"
align="center"
/>
<el-table-column label="操作" align="center" width="100">
<el-table-column label="操作" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" @click="eliminate(scope.row)"
>操作</el-button
<el-button type="text" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
type="text"
style="color: red"
@click="handleDle(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<Pagination
:limit="params.size"
:page="params.current"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
<el-dialog
:title="manageFrom && manageFrom.id ? '编辑执行器' : '新增执行器'"
:visible.sync="centerDialogVisible"
width="600px"
@close="handleClose"
center
>
<el-form :model="manageFrom" ref="form" size="mini">
<el-form-item label="APPName：">
<el-input
v-model="manageFrom.appname"
placeholder="请输入APPName"
></el-input>
</el-form-item>
<el-form-item label="名称：">
<el-input
v-model="manageFrom.title"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="注册方式：">
<el-radio-group v-model="manageFrom.addressType">
<el-radio-button label="1">手动录入</el-radio-button>
<el-radio-button label="0">自动录入</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="机器地址：">
<el-input
:disabled="manageFrom.addressType == 0"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入执行器地址列表，多地址逗号分隔"
v-model="manageFrom.addressList"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAddJobgroup">确定</el-button>
<el-button @click="handleClose()">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { jobgroupList } from "@/api/job.js";
import {
jobgroupList,
addJobgroup,
updateJobgroup,
removeJobgroup,
} from "@/api/job.js";
import { successAlert, warningAlert } from "@/utils/alert";
export default {
data() {
return {
form: {
title: "",
appname: "",
},
tableData: [],
params: {
current: 1,
size: 10,
},
total: 0,
centerDialogVisible: false,
manageFrom: {
appname: "",
title: "",
addressList: "",
addressType: "1",
},
};
},
mounted() {
this.handleJobGroupList();
},
methods: {
async handleRemoveJobgroup(row) {
const queryParams = new URLSearchParams({ id: row.id }).toString();
let res = await removeJobgroup(queryParams);
if (res.code == 200) {
this.handleJobGroupList();
successAlert("删除成功");
}
},
handleClose() {
this.manageFrom = {
appname: "",
title: "",
addressList: "",
addressType: "1",
};
this.centerDialogVisible = false;
},
handleEdit(e) {
if (e && e.id) {
this.manageFrom = e;
}
this.centerDialogVisible = true;
},
async handleAddJobgroup() {
let res;
delete this.manageFrom.updateTime;
delete this.manageFrom.registryList;
const queryParams = new URLSearchParams(this.manageFrom).toString();
if (!this.manageFrom.id) {
res = await addJobgroup(queryParams);
} else {
res = await updateJobgroup(queryParams);
}
if (res.code == 200) {
successAlert("操作成功");
this.handleClose();
this.handleJobGroupList();
}
console.log(res);
},
handlePageChange(pageData) {
this.params.size = pageData.size;
this.params.current = pageData.page;
this.handleJobGroupList();
},
handleDle(row) {
this.$confirm("继续操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.handleRemoveJobgroup(row);
})
.catch(() => {});
},
toSearch() {
this.handleJobGroupList();
},
async handleJobGroupList() {
const res = await jobgroupList();
let data = {
start: (this.params.current - 1) * this.params.size,
length: this.params.size,
title: this.form.title,
appname: this.form.appname,
};
const queryParams = new URLSearchParams(data).toString();
const res = await jobgroupList(queryParams);
console.log(res);
this.tableData = res;
this.tableData = res.data;
this.total = res.recordsTotal;
},
},
};
</script>
<style lang="scss" scoped>
.nav-title {
color: #02a7f0;
font-size: 20px;
position: relative;
padding-left: 16px;
font-weight: bold;
line-height: 28px;
}
.nav-title::before {
content: "";
position: absolute;
left: 0px;
top: 1px;
width: 5px;
height: 100%;
background-color: #02a7f0;
border-radius: 4px;
}
.search {
margin: 16px 0;
.search-form {
padding: 10px;
background-color: #eaf1fe;
margin-bottom: 20px;
border-radius: 8px;
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
}
</style>
\ No newline at end of file
src/views/setting/add/comp/autoAdd.vue
View file @ e613cdee
<template>
<div>
<el-table
ref="multipleTable"
class="statistics-table"
:data="tableData"
tooltip-effect="dark"
style="width: 100%; height: auto"
:row-class-name="tableRowClassName"
:row-style="{ height: '50px' }"
:header-cell-style="{
background: '#eaf1fe',
color: '#000',
fontWeight: 700,
height: '50px',
}"
<el-form
ref="monitorForm"
:model="monitorForm"
:rules="rules"
label-width="200px"
class="form"
>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-form-item label="检测设备：" prop="wayId">
<el-input v-model="rowData.equipName" disabled placeholder="检测设备" />
</el-form-item>
<el-form-item label="测量周期" prop="measurementCycle">
<el-input
v-model="monitorForm.measurementCycle"
placeholder="请输入测量周期"
/>
</el-form-item>
<el-form-item
label="漏缆一般告警门限"
prop="leakyCableGeneralAlarmThreshold"
>
<el-input
v-model="monitorForm.leakyCableGeneralAlarmThreshold"
placeholder="请输入漏缆一般告警门限"
/>
</el-form-item>
<el-form-item
label="漏缆重要告警门限"
prop="leakyCableImportantAlarmThreshold"
>
<el-input
v-model="monitorForm.leakyCableImportantAlarmThreshold"
placeholder="请输入漏缆重要告警门限"
/>
</el-form-item>
<el-form-item
label="漏缆紧急告警门限"
prop="leakyCableEmergencyAlarmThreshold"
>
<el-input
v-model="monitorForm.leakyCableEmergencyAlarmThreshold"
placeholder="请输入漏缆紧急告警门限"
/>
</el-form-item>
<el-form-item label="选择设备" prop="devicePortType">
<el-select v-model="monitorForm.device" placeholder="请选择设备">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备端口类型" prop="devicePortType">
<el-select v-model="monitorForm.devicePortType" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label="设备1上行方向起始位置"
prop="uplinkLeakyCable1StartPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
monitorForm.device === '1'
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable1StartPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-table-column prop="equipCode" label="设备编号" align="center" />
<el-table-column
prop="equipName"
label="设备名称"
show-overflow-tooltip
align="center"
/>
<el-table-column prop="ip" label="设备IP" align="center" />
<el-table-column prop="railWayName" label="设备型号" align="center" />
<el-table-column prop="siteName" label="设备位置" align="center" />
<el-table-column
prop="action"
label="操作"
show-overflow-tooltip
align="center"
<el-form-item
label="设备1上行方向终止位置"
prop="uplinkLeakyCable1EndPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
monitorForm.device === '1'
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable1EndPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备1下行方向起始位置"
prop="downlinkLeakyCable1StartPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
monitorForm.device === '1'
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable1StartPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备1下行方向终止位置"
prop="downlinkLeakyCable1EndPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
monitorForm.device === '1'
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable1EndPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备2上行方向起始位置"
prop="uplinkLeakyCable2StartPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
monitorForm.device === '2'
"
>
<template slot-scope="{ row }">
<el-link type="primary" :underline="false" @click="handleView(row)"
>添加</el-link
>
</template>
</el-table-column>
</el-table>
<el-input
v-model="monitorForm.uplinkLeakyCable2StartPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备2上行方向终止位置"
prop="uplinkLeakyCable2EndPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '2') &&
monitorForm.device === '2'
"
>
<el-input
v-model="monitorForm.uplinkLeakyCable2EndPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备2下行方向起始位置"
prop="downlinkLeakyCable2StartPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
monitorForm.device === '2'
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable2StartPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item
label="设备2下行方向终止位置"
prop="downlinkLeakyCable2EndPosition"
v-if="
(monitorForm.devicePortType == '1' ||
monitorForm.devicePortType == '3') &&
monitorForm.device === '2'
"
>
<el-input
v-model="monitorForm.downlinkLeakyCable2EndPosition"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item label="设备输出功率" prop="deviceOutputPower">
<el-input
v-model="monitorForm.deviceOutputPower"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item label="设备的起始频率" prop="deviceStartFrequency">
<el-input
v-model="monitorForm.deviceStartFrequency"
placeholder="请输入设备身份编号"
/>
</el-form-item>
<el-form-item label="设备的终止频率" prop="deviceEndFrequency">
<el-input
v-model="monitorForm.deviceEndFrequency"
placeholder="请输入设备的终止频率"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSub">确定</el-button>
<el-button @click="handleClose()">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
......@@ -47,27 +207,37 @@
export default {
data() {
return {
tableData: [
{
equipCode: "123456",
equipName: "123456",
ip: "123456",
railWayName: "123456",
siteName: "123456",
},
{
equipCode: "123456",
equipName: "123456",
ip: "123456",
railWayName: "123456",
},
monitorForm: {
device: "1",
devicePortType: "1",
},
options: [
{ value: "1", label: "设备1" },
{ value: "2", label: "设备2" },
],
typeList: [
{ value: "1", label: "上下行" },
{ value: "2", label: "上行" },
{ value: "3", label: "下行" },
],
rules:{
}
};
},
props: {
rowData: {
type: Object,
default: () => {},
},
},
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? "" : "single-row";
handleSub(){
this.$emit("update", this.monitorForm);
},
handleClose(){
this.$emit("update", false);
}
},
};
</script>
......
src/views/setting/add/comp/monitorEquip.vue
View file @ e613cdee
......@@ -240,7 +240,6 @@ export default {
this.$refs.monitorForm.validate((valid) => {
if (valid) {
this.monitorForm.parentId = this.monitorForm.fsuId;
monitorEquipsave(this.monitorForm).then((res) => {
if (res.code == 200) {
successAlert("添加成功");
......
src/views/setting/add/index.vue
View file @ e613cdee
......@@ -26,7 +26,7 @@
<monitorEquip />
</div>
</el-tab-pane>
<el-tab-pane label="漏缆" name="4">
<!-- <el-tab-pane label="漏缆" name="4">
<div v-if="activeName === '4'" class="content">
<div class="content-title">添加漏缆</div>
<leakyCable />
......@@ -37,7 +37,7 @@
<div class="content-title">添加天馈线</div>
<antennaFeeder />
</div>
</el-tab-pane>
</el-tab-pane> -->
</el-tabs>
</div>
</div>
......
src/views/setting/auto/index.vue
View file @ e613cdee
......@@ -6,34 +6,11 @@
style="width: 100%"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column type="index" label="序号" width="100" align="center" />
<el-table-column
prop="equipCode"
label="设备编号"
align="center"
/>
<el-table-column
prop="addResult"
label="操作回执"
align="center"
/>
<el-table-column
prop="addLog"
label="操作日志"
align="center"
/>
<el-table-column
prop="addTime"
label="添加时间"
align="center"
/>
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" @click="confirmAlarm(scope.row)"
>详情</el-button
>
</template>
</el-table-column>
<el-table-column type="index" label="序号" align="center" />
<el-table-column prop="equipCode" label="设备编号" align="center" />
<el-table-column prop="addResult" label="操作回执" align="center" />
<el-table-column prop="addLog" label="操作日志" align="center" />
<el-table-column prop="addTime" label="添加时间" align="center" />
</el-table>
<Pagination
:limit="params.size"
......
src/views/setting/parameter/index.vue
View file @ e613cdee
......@@ -5,7 +5,7 @@
class="ml10"
type="primary"
icon="el-icon-refresh-right"
@click="getInit"
@click="handleInit"
>刷新</el-button
>
<el-button
......@@ -20,12 +20,11 @@
class="search-form"
ref="form"
:model="form"
label-width="110px"
:inline="true"
size="mini"
>
<el-form-item label="类型">
<el-select v-model="type" placeholder="请选择类型" clearable>
<el-select v-model="type" placeholder="请选择类型">
<el-option
v-for="item in typeList"
:key="item"
......@@ -42,8 +41,9 @@
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd hh:mm:ss"
value-format="yyyy-MM-dd"
>
<!-- hh:mm:ss -->
</el-date-picker>
</el-form-item>
<el-form-item>
......@@ -63,80 +63,38 @@
>
<el-table-column type="index" label="序号" width="100" align="center" />
<el-table-column
prop="siteName"
label="监测点位置名称"
width="180"
align="center"
/>
<el-table-column
prop="alarmTarget"
label="漏缆链路编号"
width="180"
prop="upWave"
label="上行漏缆故障点驻波比"
align="center"
/>
<el-table-column
prop="siteName"
label="驻波比（VSWR）"
width="150"
prop="downWave"
label="下行漏缆故障点驻波比"
align="center"
/>
<el-table-column
prop="回波损耗"
label="告警级别"
width="150"
prop="upDistance"
label="上行漏缆故障点距离"
align="center"
/>
<el-table-column prop="alarmInfo" label="超出阈值的次数" align="center">
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.alarmInfo"
:key="index"
:class="levelStyle[item.level]"
>
<span>距离：{{ item.distance }}</span
>&nbsp;&nbsp;
<span>驻波比：{{ item.value }}</span>
</div>
<div>漏缆百米损耗： {{ scope.row.lossValue }}</div>
</template>
</el-table-column>
<el-table-column
prop="siteName"
label="天馈接口编号"
width="150"
align="center"
/>
<el-table-column
prop="siteName"
label="天馈驻波比（VSWR）"
align="center"
width="200"
/>
<el-table-column
prop="statusTimeChange"
label="回波损耗"
align="center"
width="200"
/>
<el-table-column
prop="confirmPerson"
label="超出阈值的次数"
width="100"
prop="downDistance"
label="下行漏缆故障点距离"
align="center"
/>
<el-table-column
prop="reportTime"
label="采集时间"
label="上报时间"
width="180"
align="center"
/>
<el-table-column label="操作" align="center" width="100">
<!-- <el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" @click="handleView(scope.row)"
>详情</el-button
>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
<Pagination
:limit="params.size"
......@@ -226,19 +184,24 @@ export default {
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// ${hours}:${minutes}:${seconds}
return `${year}-${month}-${day}`;
},
async handleWaveStatistics() {
let data = {
startDate: "",
endDate: "",
};
if (!this.dateRange.length) {
if (this.dateRange && this.dateRange.length <= 0) {
data.startDate = this.formatDate(
new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
);
data.endDate = this.formatDate(new Date());
} else {
data.startDate = this.dateRange[0];
data.endDate = this.dateRange[1];
}
console.log(data);
let res = await waveStatistics(data);
let xData = res.map((item) => {
return item.alarmDate;
......@@ -262,11 +225,14 @@ export default {
startDate: "",
endDate: "",
};
if (!this.dateRange.length) {
if (this.dateRange && this.dateRange.length <= 0) {
data.startDate = this.formatDate(
new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
);
data.endDate = this.formatDate(new Date());
} else {
data.startDate = this.dateRange[0];
data.endDate = this.dateRange[1];
}
let res = await distanceStatistics(data);
let xData = res.map((item) => {
......@@ -287,6 +253,20 @@ export default {
});
},
async handleSamplingList() {
let data = {
startDate: "",
endDate: "",
...this.params,
};
if (this.dateRange && this.dateRange.length <= 0) {
data.startDate = this.formatDate(
new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
);
data.endDate = this.formatDate(new Date());
} else {
data.startDate = this.dateRange[0];
data.endDate = this.dateRange[1];
}
let res = await samplingList(this.params);
this.tableData = res.records;
this.total = res.total;
......
src/views/setting/statistics/comp/monitorTable.vue
View file @ e613cdee
......@@ -181,13 +181,14 @@
width="40%"
:close-on-click-modal="false"
>
<autoAdd />
<autoAdd :rowData="rowData" @update="handleUpdate" />
</el-dialog>
</div>
</template>
<script>
import monitor from "../../add/comp/monitorEquip.vue";
import autoAdd from "../../add/comp/autoAdd.vue";
import { selectParam, setParam } from "@/api/udp";
import {
monitorEquiplist,
monitorEquipbatchDelete,
......@@ -221,6 +222,7 @@ export default {
curInfo: {},
open: false,
openSetting: false,
rowData: {},
};
},
created() {
......@@ -237,7 +239,27 @@ export default {
this.getAllWay();
},
methods: {
handleSetting() {
async handleUpdate(e) {
if (e == false) {
this.openSetting = false;
return;
}
console.log(e);
let data = {};
return;
let res = await setParam().then((res) => {
if (res.code == 200) {
successAlert("保存成功");
this.openSetting = false;
}
});
},
async handleSelectParam(row) {
let res = selectParam({ equipId: row.id });
},
handleSetting(row) {
this.rowData = row;
this.handleSelectParam(row);
this.openSetting = true;
},
handleAutomatic() {
......
src/views/setting/statistics/index.vue
View file @ e613cdee
......@@ -61,14 +61,14 @@ export default {
label: "监测设备",
key: "3",
},
{
label: "漏缆",
key: "4",
},
{
label: "天馈线",
key: "5",
}
// {
// label: "漏缆",
// key: "4",
// },
// {
// label: "天馈线",
// key: "5",
// }
],
tableData2: [],
tableData: [],
......
src/views/system/menu/index.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="菜单名称" prop="menuName">
<el-input
v-model="queryParams.menuName"
placeholder="请输入菜单名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:menu:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="menuList"
row-key="menuId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
<el-table-column prop="icon" label="图标" align="center" width="100">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="status" label="状态" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:menu:add']"
>新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:menu:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改菜单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="上级菜单" prop="parentId">
<treeselect
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="菜单类型" prop="menuType">
<el-radio-group v-model="form.menuType">
<el-radio label="M">目录</el-radio>
<el-radio label="C">菜单</el-radio>
<el-radio label="F">按钮</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.menuType != 'F'">
<el-form-item label="菜单图标" prop="icon">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<svg-icon
v-if="form.icon"
slot="prefix"
:icon-class="form.icon"
style="width: 25px;"
/>
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="isFrame">
<span slot="label">
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
是否外链
</span>
<el-radio-group v-model="form.isFrame">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="path">
<span slot="label">
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由地址
</span>
<el-input v-model="form.path" placeholder="请输入路由地址" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="component">
<span slot="label">
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
组件路径
</span>
<el-input v-model="form.component" placeholder="请输入组件路径" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'M'">
<el-form-item prop="perms">
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
</span>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="query">
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
<span slot="label">
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
路由参数
</span>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="isCache">
<span slot="label">
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
是否缓存
</span>
<el-radio-group v-model="form.isCache">
<el-radio label="0">缓存</el-radio>
<el-radio label="1">不缓存</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="visible">
<span slot="label">
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
显示状态
</span>
<el-radio-group v-model="form.visible">
<el-radio
v-for="dict in dict.type.sys_show_hide"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="status">
<span slot="label">
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
菜单状态
</span>
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
name: "Menu",
dicts: ['sys_show_hide', 'sys_normal_disable'],
components: { Treeselect, IconSelect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 菜单表格树数据
menuList: [],
// 菜单树选项
menuOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部折叠
isExpandAll: false,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
menuName: undefined,
visible: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
menuName: [
{ required: true, message: "菜单名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
],
path: [
{ required: true, message: "路由地址不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
// 选择图标
selected(name) {
this.form.icon = name;
},
/** 查询菜单列表 */
getList() {
this.loading = true;
listMenu(this.queryParams).then(response => {
this.menuList = this.handleTree(response.data, "menuId");
this.loading = false;
});
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.menuId,
label: node.menuName,
children: node.children
};
},
/** 查询菜单下拉树结构 */
getTreeselect() {
listMenu().then(response => {
this.menuOptions = [];
const menu = { menuId: 0, menuName: '主类目', children: [] };
menu.children = this.handleTree(response.data, "menuId");
this.menuOptions.push(menu);
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
menuId: undefined,
parentId: 0,
menuName: undefined,
icon: undefined,
menuType: "M",
orderNum: undefined,
isFrame: "1",
isCache: "0",
visible: "0",
status: "0"
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.getTreeselect();
if (row != null && row.menuId) {
this.form.parentId = row.menuId;
} else {
this.form.parentId = 0;
}
this.open = true;
this.title = "添加菜单";
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
getMenu(row.menuId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改菜单";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.menuId != undefined) {
updateMenu(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMenu(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
return delMenu(row.menuId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>
src/views/system/role/authUser.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="openSelectUser"
v-hasPermi="['system:role:add']"
>添加用户</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-circle-close"
size="mini"
:disabled="multiple"
@click="cancelAuthUserAll"
v-hasPermi="['system:role:remove']"
>批量取消授权</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-close"
size="mini"
@click="handleClose"
>关闭</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-circle-close"
@click="cancelAuthUser(scope.row)"
v-hasPermi="['system:role:remove']"
>取消授权</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
</div>
</template>
<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
import selectUser from "./selectUser";
export default {
name: "AuthUser",
dicts: ['sys_normal_disable'],
components: { selectUser },
data() {
return {
// 遮罩层
loading: true,
// 选中用户组
userIds: [],
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
phonenumber: undefined
}
};
},
created() {
const roleId = this.$route.params && this.$route.params.roleId;
if (roleId) {
this.queryParams.roleId = roleId;
this.getList();
}
},
methods: {
/** 查询授权用户列表 */
getList() {
this.loading = true;
allocatedUserList(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
// 返回按钮
handleClose() {
const obj = { path: "/system/role" };
this.$tab.closeOpenPage(obj);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId)
this.multiple = !selection.length
},
/** 打开授权用户表弹窗 */
openSelectUser() {
this.$refs.select.show();
},
/** 取消授权按钮操作 */
cancelAuthUser(row) {
const roleId = this.queryParams.roleId;
this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function() {
return authUserCancel({ userId: row.userId, roleId: roleId });
}).then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
},
/** 批量取消授权按钮操作 */
cancelAuthUserAll(row) {
const roleId = this.queryParams.roleId;
const userIds = this.userIds.join(",");
this.$modal.confirm('是否取消选中用户授权数据项？').then(function() {
return authUserCancelAll({ roleId: roleId, userIds: userIds });
}).then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
}
}
};
</script>
\ No newline at end of file
src/views/system/role/index.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="queryParams.roleName"
placeholder="请输入角色名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="权限字符" prop="roleKey">
<el-input
v-model="queryParams.roleKey"
placeholder="请输入权限字符"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="角色状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:role:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:role:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:role:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']"
>删除</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item prop="roleKey">
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
</span>
<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree
class="tree-border"
:data="menuOptions"
show-checkbox
ref="menu"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true" />
</el-form-item>
<el-form-item label="权限字符">
<el-input v-model="form.roleKey" :disabled="true" />
</el-form-item>
<el-form-item label="权限范围">
<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
<el-option
v-for="item in dataScopeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope == 2">
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
<el-tree
class="tree-border"
:data="deptOptions"
show-checkbox
default-expand-all
ref="dept"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中，请稍候"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitDataScope">确 定</el-button>
<el-button @click="cancelDataScope">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
export default {
name: "Role",
dicts: ['sys_normal_disable'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 角色表格数据
roleList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
// 日期范围
dateRange: [],
// 数据范围选项
dataScopeOptions: [
{
value: "1",
label: "全部数据权限"
},
{
value: "2",
label: "自定数据权限"
},
{
value: "3",
label: "本部门数据权限"
},
{
value: "4",
label: "本部门及以下数据权限"
},
{
value: "5",
label: "仅本人数据权限"
}
],
// 菜单列表
menuOptions: [],
// 部门列表
deptOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
roleName: undefined,
roleKey: undefined,
status: undefined
},
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
},
// 表单校验
rules: {
roleName: [
{ required: true, message: "角色名称不能为空", trigger: "blur" }
],
roleKey: [
{ required: true, message: "权限字符不能为空", trigger: "blur" }
],
roleSort: [
{ required: true, message: "角色顺序不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询角色列表 */
getList() {
this.loading = true;
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.roleList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
this.menuOptions = response.data;
});
},
// 所有菜单节点数据
getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = this.$refs.menu.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
},
// 所有部门节点数据
getDeptAllCheckedKeys() {
// 目前被选中的部门节点
let checkedKeys = this.$refs.dept.getCheckedKeys();
// 半选中的部门节点
let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
},
/** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then(response => {
this.menuOptions = response.menus;
return response;
});
},
/** 根据角色ID查询部门树结构 */
getDeptTree(roleId) {
return deptTreeSelect(roleId).then(response => {
this.deptOptions = response.depts;
return response;
});
},
// 角色状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
return changeRoleStatus(row.roleId, row.status);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 取消按钮（数据权限）
cancelDataScope() {
this.openDataScope = false;
this.reset();
},
// 表单重置
reset() {
if (this.$refs.menu != undefined) {
this.$refs.menu.setCheckedKeys([]);
}
this.menuExpand = false,
this.menuNodeAll = false,
this.deptExpand = true,
this.deptNodeAll = false,
this.form = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: "0",
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
this.single = selection.length!=1
this.multiple = !selection.length
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleDataScope":
this.handleDataScope(row);
break;
case "handleAuthUser":
this.handleAuthUser(row);
break;
default:
break;
}
},
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type == 'menu') {
let treeList = this.menuOptions;
for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
}
} else if (type == 'dept') {
let treeList = this.deptOptions;
for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
}
}
},
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) {
if (type == 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
} else if (type == 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
}
},
// 树权限（父子联动）
handleCheckedTreeConnect(value, type) {
if (type == 'menu') {
this.form.menuCheckStrictly = value ? true: false;
} else if (type == 'dept') {
this.form.deptCheckStrictly = value ? true: false;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getMenuTreeselect();
this.open = true;
this.title = "添加角色";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const roleId = row.roleId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId);
getRole(roleId).then(response => {
this.form = response.data;
this.open = true;
this.$nextTick(() => {
roleMenu.then(res => {
let checkedKeys = res.checkedKeys
checkedKeys.forEach((v) => {
this.$nextTick(()=>{
this.$refs.menu.setChecked(v, true ,false);
})
})
});
});
this.title = "修改角色";
});
},
/** 选择角色权限范围触发 */
dataScopeSelectChange(value) {
if(value !== '2') {
this.$refs.dept.setCheckedKeys([]);
}
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.reset();
const deptTreeSelect = this.getDeptTree(row.roleId);
getRole(row.roleId).then(response => {
this.form = response.data;
this.openDataScope = true;
this.$nextTick(() => {
deptTreeSelect.then(res => {
this.$refs.dept.setCheckedKeys(res.checkedKeys);
});
});
this.title = "分配数据权限";
});
},
/** 分配用户操作 */
handleAuthUser: function(row) {
const roleId = row.roleId;
this.$router.push("/system/role-auth/user/" + roleId);
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.roleId != undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys();
updateRole(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.menuIds = this.getMenuAllCheckedKeys();
addRole(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 提交按钮（数据权限） */
submitDataScope: function() {
if (this.form.roleId != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys();
dataScope(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.openDataScope = false;
this.getList();
});
}
},
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.roleId || this.ids;
this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
return delRole(roleIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/role/export', {
...this.queryParams
}, `role_${new Date().getTime()}.xlsx`)
}
}
};
</script>
\ No newline at end of file
src/views/system/role/selectUser.vue 0 → 100644
View file @ e613cdee
<template>
<!-- 授权用户 -->
<el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row>
<el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectUser">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
export default {
dicts: ['sys_normal_disable'],
props: {
// 角色编号
roleId: {
type: [Number, String]
}
},
data() {
return {
// 遮罩层
visible: false,
// 选中数组值
userIds: [],
// 总条数
total: 0,
// 未授权用户数据
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
roleId: undefined,
userName: undefined,
phonenumber: undefined
}
};
},
methods: {
// 显示弹框
show() {
this.queryParams.roleId = this.roleId;
this.getList();
this.visible = true;
},
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId);
},
// 查询表数据
getList() {
unallocatedUserList(this.queryParams).then(res => {
this.userList = res.rows;
this.total = res.total;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 选择授权用户操作 */
handleSelectUser() {
const roleId = this.queryParams.roleId;
const userIds = this.userIds.join(",");
if (userIds == "") {
this.$modal.msgError("请选择要分配的用户");
return;
}
authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {
this.$modal.msgSuccess(res.msg);
if (res.code === 200) {
this.visible = false;
this.$emit("ok");
}
});
}
}
};
</script>
src/views/system/user/authRole.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";
export default {
name: "AuthRole",
data() {
return {
// 遮罩层
loading: true,
// 分页信息
total: 0,
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
// 角色信息
roles: [],
// 用户信息
form: {}
};
},
created() {
const userId = this.$route.params && this.$route.params.userId;
if (userId) {
this.loading = true;
getAuthRole(userId).then((response) => {
this.form = response.user;
this.roles = response.roles;
this.total = this.roles.length;
this.$nextTick(() => {
this.roles.forEach((row) => {
if (row.flag) {
this.$refs.table.toggleRowSelection(row);
}
});
});
this.loading = false;
});
}
},
methods: {
/** 单击选中行数据 */
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.roleIds = selection.map((item) => item.roleId);
},
// 保存选中的数据编号
getRowKey(row) {
return row.roleId;
},
/** 提交按钮 */
submitForm() {
const userId = this.form.userId;
const roleIds = this.roleIds.join(",");
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
this.$modal.msgSuccess("授权成功");
this.close();
});
},
/** 关闭按钮 */
close() {
const obj = { path: "/system/user" };
this.$tab.closeOpenPage(obj);
},
},
};
</script>
\ No newline at end of file
src/views/system/user/index.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<el-row :gutter="24">
<!--部门数据-->
<!-- <el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col> -->
<!--用户数据-->
<el-col :span="24" :xs="24">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handleImport"
v-hasPermi="['system:user:import']"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="userList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column
label="用户编号"
align="center"
key="userId"
prop="userId"
v-if="columns[0].visible"
/>
<el-table-column
label="用户名称"
align="center"
key="userName"
prop="userName"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="用户昵称"
align="center"
key="nickName"
prop="nickName"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="部门"
align="center"
key="deptName"
prop="dept.deptName"
v-if="columns[3].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="phonenumber"
prop="phonenumber"
v-if="columns[4].visible"
width="120"
/>
<el-table-column
label="状态"
align="center"
key="status"
v-if="columns[5].visible"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
>
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleResetPwd"
icon="el-icon-key"
v-hasPermi="['system:user:resetPwd']"
>重置密码</el-dropdown-item
>
<el-dropdown-item
command="handleAuthRole"
icon="el-icon-circle-check"
v-hasPermi="['system:user:edit']"
>分配角色</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户昵称" prop="nickName">
<el-input
v-model="form.nickName"
placeholder="请输入用户昵称"
maxlength="30"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="归属部门" prop="deptId">
<treeselect
v-model="form.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择归属部门"
/>
</el-form-item>
</el-col> -->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="form.phonenumber"
placeholder="请输入手机号码"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户名称"
prop="userName"
>
<el-input
v-model="form.userName"
placeholder="请输入用户名称"
maxlength="30"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="form.userId == undefined"
label="用户密码"
prop="password"
>
<el-input
v-model="form.password"
placeholder="请输入用户密码"
type="password"
maxlength="20"
show-password
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="dict in dict.type.sys_user_sex"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select
v-model="form.postIds"
multiple
placeholder="请选择岗位"
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色">
<el-select
v-model="form.roleIds"
multiple
placeholder="请选择角色"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="党组织">
<el-select
v-model="form.orgId"
class="picker-width"
collapse-tags
placeholder="请选择所属党组织"
>
<el-option
v-for="item in organizeList"
:key="item.id"
:label="item.orgName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户导入对话框 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listUser,
getUser,
delUser,
addUser,
updateUser,
resetUserPwd,
changeUserStatus,
deptTreeSelect,
} from "@/api/system/user";
import * as API_cmsParty from "@/api/cmsParty";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "User",
dicts: ["sys_normal_disable", "sys_user_sex"],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户表格数据
userList: null,
// 弹出层标题
title: "",
// 部门树选项
// deptOptions: undefined,
// 是否显示弹出层
open: false,
// 部门名称
deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label",
},
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/systemImportData",
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined,
},
// 列信息
columns: [
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
],
// 表单校验
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "用户名称长度必须介于 2 和 20 之间",
trigger: "blur",
},
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{
min: 5,
max: 20,
message: "用户密码长度必须介于 5 和 20 之间",
trigger: "blur",
},
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
},
};
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.getList();
this.getDeptTree();
this.getConfigKey("sys.user.initPassword").then((response) => {
this.initPassword = response.msg;
});
this.handleQueryOrganizationList();
},
methods: {
// 获取党组织列表
handleQueryOrganizationList() {
this.loading = true;
API_cmsParty.organizationList({})
.then((res) => {
if (res.code == 200) {
this.organizeList = res.data;
}
})
.finally(() => {
this.loading = false;
});
},
/** 查询用户列表 */
getList() {
this.loading = true;
this.queryParams.userType = "sys_user";
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
/** 查询部门下拉树结构 */
// getDeptTree() {
// deptTreeSelect().then((response) => {
// this.deptOptions = response.data;
// });
// },
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal
.confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
.then(function () {
return changeUserStatus(row.userId, row.status);
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
userId: undefined,
deptId: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.deptId = undefined;
this.$refs.tree.setCurrentKey(null);
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.userId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handleResetPwd":
this.handleResetPwd(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
break;
default:
break;
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
getUser().then((response) => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.title = "添加用户";
this.form.password = this.initPassword;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const userId = row.userId || this.ids;
getUser(userId).then((response) => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改用户";
this.form.password = "";
});
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
})
.then(({ value }) => {
resetUserPwd(row.userId, value).then((response) => {
this.$modal.msgSuccess("修改成功，新密码是：" + value);
});
})
.catch(() => {});
},
/** 分配角色操作 */
handleAuthRole: function (row) {
const userId = row.userId;
this.$router.push("/system/user-auth/role/" + userId);
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addUser(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.$router.push("/system/user-auth/role/" + userId);
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids;
this.$modal
.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
.then(function () {
return delUser(userIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/user/export",
{
...this.queryParams,
},
`user_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/downloadTemplateSystemUser",
{},
`user_template_${new Date().getTime()}.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
},
};
</script>
\ No newline at end of file
src/views/system/user/profile/index.vue 0 → 100644
View file @ e613cdee
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人信息</span>
</div>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<svg-icon icon-class="user" />用户名称
<div class="pull-right">{{ user.userName }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="phone" />手机号码
<div class="pull-right">{{ user.phonenumber }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="email" />用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色
<div class="pull-right">{{ roleGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="date" />创建日期
<div class="pull-right">{{ user.createTime }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span>基本资料</span>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
export default {
name: "Profile",
components: { userAvatar, userInfo, resetPwd },
data() {
return {
user: {},
roleGroup: {},
postGroup: {},
activeTab: "userinfo"
};
},
created() {
this.getUser();
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
}
}
};
</script>
src/views/system/user/profile/resetPwd.vue 0 → 100644
View file @ e613cdee
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserPwd } from "@/api/system/user";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
// 表单校验
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" }
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
src/views/system/user/profile/userAvatar.vue 0 → 100644
View file @ e613cdee
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/>
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png", // 默认生成截图为PNG格式
filename: 'avatar' // 文件名称
},
previews: {},
resizeHandler: null
};
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
this.options.filename = file.name;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("avatarfile", data, this.options.filename);
uploadAvatar(formData).then(response => {
this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.$modal.msgSuccess("修改成功");
this.visible = false;
});
});
},
// 实时预览
realTime(data) {
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = store.getters.avatar
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>
src/views/system/user/profile/userInfo.vue 0 → 100644
View file @ e613cdee
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" maxlength="30" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<el-button type="danger" size="mini" @click="close">关闭</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
form: {},
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
watch: {
user: {
handler(user) {
if (user) {
this.form = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex };
}
},
immediate: true
}
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.user.phonenumber = this.form.phonenumber;
this.user.email = this.form.email;
});
}
});
},
close() {
this.$tab.closePage();
}
}
};
</script>
vue.config.js
View file @ e613cdee
......@@ -9,7 +9,7 @@ function resolve(dir) {
const name = defaultSettings.title || '漏缆故障定位监测系统' // page title
const port = process.env.port || process.env.npm_config_port || 8886 // dev port
const href = 'http://101.126.159.207'
// const href = 'http://192.168.0.121'
// const href = 'http://192.168.0.118'
const rewriteDefaultConfig = {
changeOrigin: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment