first commit
This commit is contained in:
“FiboAI”
56
h5-enginex-manager/src/components/page/403.vue
Executable file
56
h5-enginex-manager/src/components/page/403.vue
Executable file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-code">4<span>0</span>3</div>
|
||||
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack(){
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.error-page{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.error-code{
|
||||
line-height: 1;
|
||||
font-size: 250px;
|
||||
font-weight: bolder;
|
||||
color: #f02d2d;
|
||||
}
|
||||
.error-code span{
|
||||
color: #00a854;
|
||||
}
|
||||
.error-desc{
|
||||
font-size: 30px;
|
||||
color: #777;
|
||||
}
|
||||
.error-handle{
|
||||
margin-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.error-btn{
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
56
h5-enginex-manager/src/components/page/404.vue
Executable file
56
h5-enginex-manager/src/components/page/404.vue
Executable file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-code">4<span>0</span>4</div>
|
||||
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack(){
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.error-page{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.error-code{
|
||||
line-height: 1;
|
||||
font-size: 250px;
|
||||
font-weight: bolder;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
.error-code span{
|
||||
color: #00a854;
|
||||
}
|
||||
.error-desc{
|
||||
font-size: 30px;
|
||||
color: #777;
|
||||
}
|
||||
.error-handle{
|
||||
margin-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.error-btn{
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
420
h5-enginex-manager/src/components/page/Dashboard.vue
Executable file
420
h5-enginex-manager/src/components/page/Dashboard.vue
Executable file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="mgb20" style="height:252px;">
|
||||
<div class="user-info">
|
||||
<img src="../../assets/img/img.jpg" class="user-avator" alt />
|
||||
<div class="user-info-cont">
|
||||
<div class="user-info-name">{{name}}</div>
|
||||
<div>{{role}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info-list">
|
||||
上次登录时间：
|
||||
<span>{{lastLoginTime | formatDate}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" style="height:252px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>引擎详情</span>
|
||||
</div>
|
||||
<span v-if="engineRatio1">{{engineRatio1.engineName}}
|
||||
<el-progress :percentage="engineRatio1.useRatio" color="#42b983"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio2">{{engineRatio2.engineName}}
|
||||
<el-progress :percentage="engineRatio2.useRatio" color="#f1e05a"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio3">{{engineRatio3.engineName}}
|
||||
<el-progress :percentage="engineRatio3.useRatio"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio4">{{engineRatio4.engineName}}
|
||||
<el-progress :percentage="engineRatio4.useRatio" color="#f56c6c"></el-progress>
|
||||
</span>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-1">
|
||||
<i class="el-icon-lx-people grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineNum}}</div>
|
||||
<div>引擎</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-2">
|
||||
<i class="el-icon-lx-notice grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineNodeNum}}</div>
|
||||
<div>决策节点</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-3">
|
||||
<i class="el-icon-lx-goods grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineResultNum}}</div>
|
||||
<div>决策结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="hover" style="height:403px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>活动日志</span>
|
||||
</div>
|
||||
<el-table :show-header="false" :data="todoList" style="width:100%;">
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<div class="todo-item">{{scope.row.opUserName}} {{scope.row.ip}} 在{{scope.row.startTime | formatDate}}
|
||||
{{scope.row.opName}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<charts sid="dashboardLeft" height='250px' width='100%' :option="options"></charts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<charts sid="dashboardRight" height='250px' width='100%' :option="options2"></charts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import charts from '@/components/common/charts.vue'
|
||||
import bus from '../common/bus';
|
||||
import {
|
||||
getIndexInfo
|
||||
} from '../../api/index';
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
// Schart,
|
||||
charts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: localStorage.getItem('ms_username'),
|
||||
lastLoginTime: null,
|
||||
engineNum: null,
|
||||
engineNodeNum: null,
|
||||
engineResultNum: null,
|
||||
engineRatio1: {},
|
||||
engineRatio2: {},
|
||||
engineRatio3: {},
|
||||
engineRatio4: {},
|
||||
|
||||
todoList: [],
|
||||
options: {
|
||||
title: {
|
||||
text: '最近几天引擎使用情况',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '10% '
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: []
|
||||
|
||||
},
|
||||
options2: {
|
||||
title: {
|
||||
text: '最近几个月引擎使用趋势图',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '10% '
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: []
|
||||
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
role() {
|
||||
return this.name === 'admin' ? '超级管理员' : '普通用户';
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.handleListener();
|
||||
// this.changeDate();
|
||||
// },
|
||||
// activated() {
|
||||
// this.handleListener();
|
||||
// },
|
||||
// deactivated() {
|
||||
// window.removeEventListener('resize', this.renderChart);
|
||||
// bus.$off('collapse', this.handleBus);
|
||||
// },
|
||||
|
||||
created() {
|
||||
// this.getIndexInfos();
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeDate() {
|
||||
const now = new Date().getTime();
|
||||
this.data.forEach((item, index) => {
|
||||
const date = new Date(now - (6 - index) * 86400000);
|
||||
item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
});
|
||||
},
|
||||
|
||||
async getIndexInfos() {
|
||||
const result = await getIndexInfo();
|
||||
const data = result.data;
|
||||
|
||||
|
||||
// 引擎基本信息
|
||||
this.engineNum = data.engineBaseInfo.engineNum;
|
||||
this.engineNodeNum = data.engineBaseInfo.engineNodeNum;
|
||||
this.engineResultNum = data.engineBaseInfo.engineResultNum;
|
||||
|
||||
// 引擎使用占比
|
||||
this.engineRatio1 = data.engineUseRatio[0];
|
||||
this.engineRatio2 = data.engineUseRatio[1];
|
||||
this.engineRatio3 = data.engineUseRatio[2];
|
||||
this.engineRatio4 = data.engineUseRatio[3];
|
||||
|
||||
// 最近几天引擎使用情况
|
||||
|
||||
|
||||
|
||||
var labelOption = {
|
||||
show: true,
|
||||
position: 'insideBottomRight',
|
||||
distance: 10,
|
||||
align: 'left',
|
||||
verticalAlign: 'middle',
|
||||
rotate: 90,
|
||||
// formatter: '{c} {name|{a}}',
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.options.xAxis[0].data = data.recentDayMap.labels;
|
||||
let arr = data.recentDayMap.datasets.map(value => {
|
||||
return {
|
||||
name: value.label,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: value.data
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
this.options.series = arr.filter((value,index)=>{
|
||||
return index<5
|
||||
})
|
||||
|
||||
// 最近几个月引擎使用情况
|
||||
this.options2.xAxis[0].data = data.recentMonthMap.labels;
|
||||
this.options2.series = data.recentMonthMap.datasets.map(value => {
|
||||
return {
|
||||
name: value.label,
|
||||
type: 'line',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: value.data
|
||||
}
|
||||
})
|
||||
|
||||
// 上次登录时间
|
||||
this.lastLoginTime = data.lastLoginTime;
|
||||
|
||||
// 活动日志
|
||||
this.todoList = data.logList;
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
formatDate: function(value) {
|
||||
let date = new Date(value);
|
||||
let y = date.getFullYear();
|
||||
let MM = date.getMonth() + 1;
|
||||
MM = MM < 10 ? ('0' + MM) : MM;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
let h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
let m = date.getMinutes();
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
let s = date.getSeconds();
|
||||
s = s < 10 ? ('0' + s) : s;
|
||||
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid-cont-right {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.grid-num {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.grid-con-icon {
|
||||
font-size: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grid-con-1 .grid-con-icon {
|
||||
background: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-1 .grid-num {
|
||||
color: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-2 .grid-con-icon {
|
||||
background: rgb(100, 213, 114);
|
||||
}
|
||||
|
||||
.grid-con-2 .grid-num {
|
||||
color: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-3 .grid-con-icon {
|
||||
background: rgb(242, 94, 67);
|
||||
}
|
||||
|
||||
.grid-con-3 .grid-num {
|
||||
color: rgb(242, 94, 67);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info-cont {
|
||||
padding-left: 50px;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.user-info-cont div:first-child {
|
||||
font-size: 30px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.user-info-list {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.user-info-list span {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.todo-item-del {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.schart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
706
h5-enginex-manager/src/components/page/DataSource.vue
Executable file
706
h5-enginex-manager/src/components/page/DataSource.vue
Executable file
@@ -0,0 +1,706 @@
|
||||
<template>
|
||||
<div style="height: 90%; ">
|
||||
<!-- 创建和搜索 -->
|
||||
<div class="datasou_top" style="height: 10%;">
|
||||
<el-row style="margin-bottom: 30px;margin-top: 20px;">
|
||||
<el-col :span="15">
|
||||
<el-button style="margin-right:20px;" type="primary" @click="createEngine">创建数据源</el-button>
|
||||
<el-select v-model="sourceType" placeholder="请选择数据源类型" @change="changeSource">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="datasou_cont" style="height: 80%;" v-if="data">
|
||||
<div class="datasou_table">
|
||||
<el-row>
|
||||
|
||||
|
||||
<el-table border :data="data.data.data" style="width: 100%" v-loading="loading">
|
||||
|
||||
<el-table-column label="序号" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{((pageNo-1)*10+scope.$index+1)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="name" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType == 'Spark'" prop="sparkHome" label="park-home" align="center"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType == 'Spark'" prop="appName" label="app-name" align="center"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType == 'Spark'" prop="masterUrl" label="master" align="center"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="sourceType == 'Hive'" prop="url" label="url" align="center"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="sourceType != 'Hive'&&sourceType!='Spark'" prop="host" label="host"
|
||||
align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType != 'Hive'&&sourceType!='Spark'" prop="port" label="port"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType !='Hive'&&sourceType!='Spark'" prop="dbName" label="db-name"
|
||||
align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="sourceType!='Spark'" prop="userName"
|
||||
label="user-name" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="updataTime" label="最后更新时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span style="white-space: nowrap;">{{
|
||||
new Date(scope.row.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(scope.row.updateTime).toTimeString().substr(0, 8)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button icon="el-icon-search" circle size="mini"
|
||||
@click="dialogShow(scope.$index)"></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" circle size="mini"
|
||||
@click="modificationShow(scope.row.id)"></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini"
|
||||
@click="deletelistsor(scope.row.id)"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div style="float: right;margin-right: 120px;margin-top: 40px;">
|
||||
<el-pagination :current-page="pageNo" @current-change="currpage" background layout="prev, pager, next"
|
||||
:total="data.data.pager.total" v-if="data!==null">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="数据库详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
|
||||
class="DataSource_look">
|
||||
<div v-if="tempDialogData!==null">
|
||||
<div class="textLayout">
|
||||
<p>连接名称：</p>
|
||||
<p v-if="tempDialogData.name">{{tempDialogData.name}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="tempDialogData.type == 'Spark'">
|
||||
<p>spark-home：</p>
|
||||
<p v-if="tempDialogData.sparkHome">{{tempDialogData.sparkHome}}</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="tempDialogData.type == 'Spark'">
|
||||
<p>app-name：</p>
|
||||
<p v-if="tempDialogData.appName">{{tempDialogData.appName}}</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="tempDialogData.type == 'Spark'">
|
||||
<p>master：</p>
|
||||
<p v-if="tempDialogData.masterUrl">{{tempDialogData.masterUrl}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="tempDialogData.type == 'Hive'">
|
||||
<p>地址：</p>
|
||||
<p v-if="tempDialogData.url">{{tempDialogData.url}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="tempDialogData.type != 'Hive'&&tempDialogData.type!='Spark'">
|
||||
<p>主机地址：</p>
|
||||
<p v-if="tempDialogData.host">{{tempDialogData.host}}</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="tempDialogData.type != 'Hive'&&tempDialogData.type!='Spark'">
|
||||
<p>端口：</p>
|
||||
<p v-if="tempDialogData.port">{{tempDialogData.port}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="tempDialogData.type !='Hive'&&tempDialogData.type!='Spark'">
|
||||
<p>数据库名称：</p>
|
||||
<p v-if="tempDialogData.dbName">{{tempDialogData.dbName}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="tempDialogData.type!='Spark'">
|
||||
<p>用户名：</p>
|
||||
<p v-if="tempDialogData.userName">{{tempDialogData.userName}}</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout">
|
||||
<p>创建时间：</p>
|
||||
<p v-if="tempDialogData.createTime">
|
||||
{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout">
|
||||
<p>创建人：</p>
|
||||
<p v-if="tempDialogData.creator">{{tempDialogData.creatorName}}</p>
|
||||
</div>
|
||||
<div class="textLayout">
|
||||
<p>修改时间：</p>
|
||||
<p v-if="tempDialogData.updateTime">
|
||||
{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout">
|
||||
<p>修改人：</p>
|
||||
<p v-if="tempDialogData.modifier">{{tempDialogData.modifierName}}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="textLayout">
|
||||
<p>数据库类型：</p>
|
||||
<p v-if="tempDialogData.type">{{tempDialogData.type}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
数据错误 请重新尝试
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="dialogVisible = false;tempDialogData=null">确 定</el-button>
|
||||
</span>
|
||||
|
||||
</el-dialog>
|
||||
<el-dialog :title="modificationId===null?'创建'+sourceType+'数据源':'修改'+sourceType+'数据源'"
|
||||
:visible.sync="modificationVisible" width="35%" :before-close="handleClose">
|
||||
<div>
|
||||
<div class="textLayout">
|
||||
<p>name：</p>
|
||||
<p>
|
||||
<el-input placeholder="名称" v-model="modificationData.name" clearable maxlength="20">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="sourceType == 'Spark'">
|
||||
<p>spark-home：</p>
|
||||
<p>
|
||||
<el-input placeholder="如：/opt/soft/spark-2.4.6-bin-hadoop2.7"
|
||||
v-model="modificationData.sparkHome" clearable>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="sourceType == 'Spark'">
|
||||
<p>app-name：</p>
|
||||
<p>
|
||||
<el-input placeholder="如：sparkTest" v-model="modificationData.appName" clearable>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="sourceType == 'Spark'">
|
||||
<p>master：</p>
|
||||
<p>
|
||||
<el-input placeholder="如：local[4]" v-model="modificationData.masterUrl" clearable>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="textLayout" v-if="sourceType != 'Hive'&&sourceType!='Spark'">
|
||||
<p>host：</p>
|
||||
<p>
|
||||
<el-input placeholder="如:192.168.1.1" v-model="modificationData.host" clearable maxlength="20">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="sourceType == 'Hive'">
|
||||
<p>url：</p>
|
||||
<p>
|
||||
<el-input placeholder="请输入地址" v-model="modificationData.url" clearable maxlength="50">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="textLayout" v-if="sourceType != 'Hive'&&sourceType!='Spark'">
|
||||
<p>port：</p>
|
||||
<p>
|
||||
<el-input :placeholder="sourceType=='Redis'?'如：6379':'如：3306'" v-model="modificationData.port"
|
||||
clearable maxlength="20">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="sourceType !='Hive'&&sourceType!='Spark'">
|
||||
<p>db：</p>
|
||||
<p v-if="sourceType =='MySQL'||sourceType =='Oracle'||sourceType =='Sqlserver'">
|
||||
<el-input placeholder="请输入数据库名称" v-model="modificationData.dbName" clearable maxlength="50">
|
||||
</el-input>
|
||||
</p>
|
||||
<p v-if="sourceType =='Redis'">
|
||||
<el-input placeholder="0~15" type="number" v-model="modificationData.dbName" clearable>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="sourceType!='Spark'">
|
||||
<p>user-name：</p>
|
||||
<p>
|
||||
<el-input placeholder="请输入用户名" v-model="modificationData.userName" clearable maxlength="50">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="textLayout" v-if="sourceType!='Spark'">
|
||||
<p>password：</p>
|
||||
<p>
|
||||
<el-input placeholder="请输入密码" v-model="modificationData.password" clearable maxlength="50"
|
||||
auto-complete="new-password" show-password>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="modificationSure">确 定</el-button>
|
||||
</span>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDataSourcelist
|
||||
} from '../../api/index';
|
||||
import {
|
||||
setDataSource
|
||||
} from '../../api/index';
|
||||
import {
|
||||
deleteDataSource,
|
||||
updataDataSource
|
||||
} from '../../api/index';
|
||||
export default {
|
||||
name: 'datasource',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
searchString: "",
|
||||
data: null,
|
||||
currentPage: null,
|
||||
dialogVisible: false,
|
||||
tempDialogData: null,
|
||||
pageNo: 1,
|
||||
modificationId: null,
|
||||
modificationVisible: false,
|
||||
modificationData: {
|
||||
name: "",
|
||||
host: "",
|
||||
url: "",
|
||||
port: "",
|
||||
dbName: "",
|
||||
userName: "",
|
||||
password: "",
|
||||
sparkHome: "",
|
||||
appName: "",
|
||||
masterUrl: ""
|
||||
},
|
||||
options: [{
|
||||
value: 'MySQL',
|
||||
label: 'MySQL'
|
||||
}, {
|
||||
value: 'Redis',
|
||||
label: 'Redis'
|
||||
}, {
|
||||
value: 'Hive',
|
||||
label: 'Hive'
|
||||
}, {
|
||||
value: 'Spark',
|
||||
label: 'Spark'
|
||||
}, {
|
||||
value: 'Oracle',
|
||||
label: 'Oracle'
|
||||
}, {
|
||||
value: 'Sqlserver',
|
||||
label: 'Sqlserver'
|
||||
}],
|
||||
sourceType: 'MySQL'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
let params = {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
typeList: [this.sourceType]
|
||||
}
|
||||
this.getDataSourcelists(params)
|
||||
},
|
||||
changeSource(e) {
|
||||
this.initData();
|
||||
},
|
||||
// 关闭弹窗所有弹窗 且清除临时数据
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.modificationVisible = false
|
||||
|
||||
this.tempDialogData = null
|
||||
this.modificationData = {
|
||||
host: "",
|
||||
userName: "",
|
||||
dbName: "",
|
||||
name: "",
|
||||
password: "",
|
||||
port: "",
|
||||
}
|
||||
|
||||
this.modificationId = null
|
||||
},
|
||||
// 查看 弹窗显示
|
||||
dialogShow(index) {
|
||||
this.tempDialogData = this.data.data.data[index]
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 修改 弹窗显示
|
||||
modificationShow(id) {
|
||||
this.modificationId = id
|
||||
this.data.data.data.forEach(value => {
|
||||
if (value.id === id) {
|
||||
this.modificationData = {
|
||||
...value
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.modificationVisible = true
|
||||
},
|
||||
checkMySql() {
|
||||
if (this.modificationData.name.indexOf(' ') !== -1 || String(this.modificationData.host).indexOf(' ') !== -
|
||||
1 ||
|
||||
this.modificationData.userName.indexOf(' ') !== -1 || this.modificationData.password.indexOf(' ') !== -
|
||||
1 || this.modificationData
|
||||
.port.indexOf(' ') !== -1 || this.modificationData.dbName.indexOf(' ') !== -1) {
|
||||
this.$message.error('不允许出现空格！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.modificationData.name.length < 4 || this.modificationData.host.length < 4 || this
|
||||
.modificationData.userName
|
||||
.length < 4 || this.modificationData.password.length < 4 || this.modificationData.port.length <
|
||||
4 || this.modificationData
|
||||
.dbName.length < 4) {
|
||||
this.$message.error('均为必填项且长度不小于4！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.isChinese(this.modificationData.host) || this.isChinese(this.modificationData.userName) ||
|
||||
this.isChinese(this.modificationData.port)) {
|
||||
this.$message.error('主机地址，端口，用户名 不允许出现中文')
|
||||
return
|
||||
}
|
||||
|
||||
let params = {}
|
||||
params.name = this.modificationData.name
|
||||
params.host = this.modificationData.host
|
||||
params.userName = this.modificationData.userName
|
||||
params.password = this.modificationData.password
|
||||
params.port = this.modificationData.port
|
||||
params.dbName = this.modificationData.dbName
|
||||
return params;
|
||||
}
|
||||
}
|
||||
},
|
||||
checkRedis() {
|
||||
if (this.modificationData.name.indexOf(' ') !== -1 || String(this.modificationData.host).indexOf(' ') !== -
|
||||
1 ||
|
||||
this.modificationData.password.indexOf(' ') !== -1 || this.modificationData
|
||||
.port.indexOf(' ') !== -1 || this.modificationData.dbName.indexOf(' ') !== -1) {
|
||||
this.$message.error('不允许出现空格！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.modificationData.name.length < 4 || this.modificationData.host.length < 4 || this
|
||||
.modificationData.password.length < 4 || this.modificationData.port.length < 4) {
|
||||
this.$message.error('均为必填项且长度不小于4！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.isChinese(this.modificationData.host) || this.isChinese(this.modificationData.port)) {
|
||||
this.$message.error('主机地址，端口 不允许出现中文')
|
||||
return
|
||||
}
|
||||
if (this.modificationData.dbName < 0 || this.modificationData.dbName > 15) {
|
||||
this.$message.error('db超出有效范围！')
|
||||
return
|
||||
}
|
||||
console.log(this.modificationData.dbName);
|
||||
let params = {}
|
||||
params.name = this.modificationData.name
|
||||
params.host = this.modificationData.host
|
||||
params.userName = this.modificationData.userName
|
||||
params.password = this.modificationData.password
|
||||
params.port = this.modificationData.port
|
||||
params.dbName = this.modificationData.dbName ? this.modificationData.dbName : 0;
|
||||
return params;
|
||||
}
|
||||
}
|
||||
},
|
||||
checkHive() {
|
||||
|
||||
if (this.modificationData.name.indexOf(' ') !== -1 || this.modificationData.userName.indexOf(' ') !== -1 ||
|
||||
this.modificationData.password.indexOf(' ') !== -1 || this.modificationData
|
||||
.url.indexOf(' ') !== -1) {
|
||||
this.$message.error('不允许出现空格！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.modificationData.name.length < 4 || this.modificationData.url.length < 4 || this
|
||||
.modificationData.password.length < 4 || this.modificationData.userName.length < 4) {
|
||||
this.$message.error('均为必填项且长度不小于4！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.isChinese(this.modificationData.url) || this.isChinese(this.modificationData.userName)) {
|
||||
this.$message.error('连接地址，用户名 不允许出现中文')
|
||||
return false
|
||||
}
|
||||
|
||||
let params = {}
|
||||
params.name = this.modificationData.name
|
||||
params.url = this.modificationData.url
|
||||
params.userName = this.modificationData.userName
|
||||
params.password = this.modificationData.password
|
||||
return params;
|
||||
}
|
||||
}
|
||||
},
|
||||
checkSpark() {
|
||||
if (this.modificationData.name.indexOf(' ') !== -1 || this.modificationData.sparkHome.indexOf(' ') !== -
|
||||
1 ||
|
||||
this.modificationData.appName.indexOf(' ') !== -1 || this.modificationData.masterUrl.indexOf(' ') !== -
|
||||
1) {
|
||||
this.$message.error('不允许出现空格！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.modificationData.name.length < 4 || this.modificationData.sparkHome.length < 4 || this
|
||||
.modificationData.appName.length < 4 || this.modificationData.masterUrl.length < 4) {
|
||||
this.$message.error('均为必填项且长度不小于4！')
|
||||
return false;
|
||||
} else {
|
||||
if (this.isChinese(this.modificationData.sparkHome) || this.isChinese(this.modificationData
|
||||
.appName) || this.isChinese(this.modificationData.masterUrl)) {
|
||||
this.$message.error('spark-home，app-name，master 不允许出现中文')
|
||||
return false
|
||||
}
|
||||
|
||||
let params = {}
|
||||
params.name = this.modificationData.name
|
||||
params.sparkHome = this.modificationData.sparkHome
|
||||
params.appName = this.modificationData.appName
|
||||
params.masterUrl = this.modificationData.masterUrl
|
||||
return params;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 确定修改或者添加
|
||||
modificationSure() {
|
||||
let params = null;
|
||||
switch (this.sourceType) {
|
||||
case 'MySQL':
|
||||
params = this.checkMySql();
|
||||
break;
|
||||
case 'Redis':
|
||||
params = this.checkRedis();
|
||||
break;
|
||||
case 'Hive':
|
||||
params = this.checkHive();
|
||||
break;
|
||||
case 'Spark':
|
||||
params = this.checkSpark();
|
||||
break;
|
||||
case 'Oracle':
|
||||
params = this.checkMySql();
|
||||
break;
|
||||
case 'Sqlserver':
|
||||
params = this.checkMySql();
|
||||
break;
|
||||
default:
|
||||
|
||||
break;
|
||||
}
|
||||
if (params) {
|
||||
params.type = this.sourceType;
|
||||
if (this.modificationId !== null) {
|
||||
params.id = this.modificationData.id
|
||||
this.updataDataSource(params).then(res => {
|
||||
if (res.status === "1") {
|
||||
this.data.data.data.forEach((value, index) => {
|
||||
if (value.id === this.modificationData.id) {
|
||||
console.log(value.id, this.modificationData.id)
|
||||
this.$set(this.data.data.data, index, {
|
||||
...this.modificationData
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
params.id = ""
|
||||
this.setDataSources(params).then(res => {
|
||||
if (res.status === "1") {
|
||||
// 创建成功方法
|
||||
this.initData();
|
||||
// this.pageNo = 1
|
||||
// this.getDataSourcelists({
|
||||
// pageNo: this.pageNo,
|
||||
// pageSize: 10
|
||||
// })
|
||||
this.$message({
|
||||
message: '创建成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// }
|
||||
// console.log(this.modificationData.name.indexOf(' '))
|
||||
},
|
||||
// 新增数据源
|
||||
async setDataSources(params) {
|
||||
this.loading = true
|
||||
const data = await setDataSource(params)
|
||||
this.loading = false
|
||||
return data
|
||||
},
|
||||
// 修改数据源信息
|
||||
async updataDataSource(params) {
|
||||
this.loading = true
|
||||
const data = await updataDataSource(params)
|
||||
this.loading = false;
|
||||
return data
|
||||
},
|
||||
createEngine() {
|
||||
this.modificationVisible = true
|
||||
},
|
||||
searchEngine() {},
|
||||
async getDataSourcelists(params) {
|
||||
this.loading = true
|
||||
const data = await getDataSourcelist(params)
|
||||
if (data.status === "1") {
|
||||
this.data = data
|
||||
this.pageSize = data.data.pager.pages
|
||||
} else {
|
||||
this.$message.error('访问出错了-_-');
|
||||
}
|
||||
this.loading = false
|
||||
},
|
||||
deletelistsor(id) {
|
||||
|
||||
this.$confirm('确定删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.deletelists(id)
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
deletelists(id) {
|
||||
this.deletelist(id).then(res => {
|
||||
if (res.status === "1") {
|
||||
this.initData();
|
||||
// this.getDataSourcelists({
|
||||
// pageNo: this.pageNo,
|
||||
// pageSize: 10
|
||||
// })
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
async deletelist(id) {
|
||||
this.loading = true
|
||||
return await deleteDataSource(id)
|
||||
this.loading = false
|
||||
},
|
||||
currpage(num) {
|
||||
this.pageNo = num
|
||||
this.getDataSourcelists({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
typeList:[this.sourceType]
|
||||
})
|
||||
console.log(this.pageNo)
|
||||
},
|
||||
isChinese(temp) {
|
||||
// var re = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
|
||||
// if (re.test(temp)) {
|
||||
// console.log(temp)
|
||||
// return false
|
||||
// };
|
||||
// return true;
|
||||
if (escape(temp).indexOf("%u") < 0) {
|
||||
return false
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #409EFF !important;
|
||||
}
|
||||
|
||||
.textLayout {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
padding-left: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.textLayout>p {
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.textLayout>p:nth-of-type(1) {
|
||||
width: 42%;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.DataSource_look .textLayout>p:nth-of-type(2) {
|
||||
border-radius: 5px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
</style>
|
||||
119
h5-enginex-manager/src/components/page/Datamanage.vue
Executable file
119
h5-enginex-manager/src/components/page/Datamanage.vue
Executable file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="指标管理" :getData="getDataFun"></cont>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cont from '@/components/common/cont.vue'
|
||||
import {
|
||||
getfieldList,addfieldList,getfieldListTree,updatafieldList,getfieldsave,getfieldInfo,updatafield,fieldusing,fielddownTemplate,fieldupdata
|
||||
} from '@/api/index.js'
|
||||
|
||||
export default {
|
||||
name:'datamanage',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
type:1,
|
||||
row: [ {
|
||||
label: '序号',
|
||||
row: 'id'
|
||||
}, {
|
||||
label: '字段名称',
|
||||
row: 'fieldEn'
|
||||
}, {
|
||||
label: '字段中文名',
|
||||
row: 'fieldCn'
|
||||
}, {
|
||||
label: '字段类型',
|
||||
row: 'valueType',
|
||||
type: 'type'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type: 'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'nickName'
|
||||
},{
|
||||
label: '创建时间',
|
||||
row: 'created',
|
||||
type: 'Time'
|
||||
} ],
|
||||
redact: "dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getfieldListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) {
|
||||
e.fType = 1
|
||||
return await getfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) {
|
||||
return await addfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
|
||||
return await updatafieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) {
|
||||
|
||||
return await getfieldsave(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getInfo(e) {
|
||||
|
||||
console.log(e)
|
||||
return await getfieldInfo(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e) {
|
||||
|
||||
return await updatafield(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e) {
|
||||
|
||||
return await fieldusing(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e) {
|
||||
|
||||
return await fielddownTemplate(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldsubmit(e) {
|
||||
|
||||
return await fieldupdata(e).then(res => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
36
h5-enginex-manager/src/components/page/DragDialog.vue
Executable file
36
h5-enginex-manager/src/components/page/DragDialog.vue
Executable file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>拖拽弹框</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<p>通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。</p>
|
||||
<br>
|
||||
<el-button type="primary" @click="visible = true;">点我弹框</el-button>
|
||||
</div>
|
||||
<el-dialog v-dialogDrag title="拖拽弹框" center :visible.sync="visible" width="30%">
|
||||
我是一个可以拖拽的对话框！
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="visible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
174
h5-enginex-manager/src/components/page/DragList.vue
Executable file
174
h5-enginex-manager/src/components/page/DragList.vue
Executable file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>拖拽排序</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件。
|
||||
访问地址：<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
|
||||
</div>
|
||||
<div class="drag-box">
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">todo</div>
|
||||
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="todo" class="item-ul">
|
||||
<div v-for="item in todo" class="drag-list" :key="item.id">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">doing</div>
|
||||
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="doing" class="item-ul">
|
||||
<div v-for="item in doing" class="drag-list" :key="item.id">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="drag-box-item">
|
||||
<div class="item-title">done</div>
|
||||
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
|
||||
<transition-group tag="div" id="done" class="item-ul">
|
||||
<div v-for="item in done" class="drag-list" :key="item.id">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
name: 'draglist',
|
||||
data() {
|
||||
return {
|
||||
dragOptions:{
|
||||
animation: 120,
|
||||
scroll: true,
|
||||
group: 'sortlist',
|
||||
ghostClass: 'ghost-style'
|
||||
},
|
||||
todo: [
|
||||
{
|
||||
id: 1,
|
||||
content: '开发图表组件'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '开发拖拽组件'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: '开发权限测试组件'
|
||||
}
|
||||
],
|
||||
doing: [
|
||||
{
|
||||
id: 1,
|
||||
content: '开发登录注册页面'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '开发头部组件'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: '开发表格相关组件'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: '开发表单相关组件'
|
||||
}
|
||||
],
|
||||
done:[
|
||||
{
|
||||
id: 1,
|
||||
content: '初始化项目，生成工程目录，完成相关配置'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '开发项目整体框架'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
draggable
|
||||
},
|
||||
methods: {
|
||||
removeHandle(event){
|
||||
console.log(event);
|
||||
this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drag-box{
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
.drag-box-item {
|
||||
flex: 1;
|
||||
max-width: 330px;
|
||||
min-width: 300px;
|
||||
background-color: #eff1f5;
|
||||
margin-right: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px #e1e4e8 solid;
|
||||
}
|
||||
.item-title{
|
||||
padding: 8px 8px 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #24292e;
|
||||
font-weight: 600;
|
||||
}
|
||||
.item-ul{
|
||||
padding: 0 8px 8px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.item-ul::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
.drag-list {
|
||||
border: 1px #e1e4e8 solid;
|
||||
padding: 10px;
|
||||
margin: 5px 0 10px;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: border .3s ease-in;
|
||||
transition: border .3s ease-in;
|
||||
}
|
||||
.drag-list:hover {
|
||||
border: 1px solid #20a0ff;
|
||||
}
|
||||
.drag-title {
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.ghost-style{
|
||||
display: block;
|
||||
color: transparent;
|
||||
border-style: dashed
|
||||
}
|
||||
</style>
|
||||
47
h5-enginex-manager/src/components/page/I18n.vue
Executable file
47
h5-enginex-manager/src/components/page/I18n.vue
Executable file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span>{{$t('i18n.tips')}}</span>
|
||||
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button>
|
||||
<div class="list">
|
||||
<h2>{{$t('i18n.title1')}}</h2>
|
||||
<p>{{$t('i18n.p1')}}</p>
|
||||
<p>{{$t('i18n.p2')}}</p>
|
||||
<p>{{$t('i18n.p3')}}</p>
|
||||
</div>
|
||||
<h2>{{$t('i18n.title2')}}</h2>
|
||||
<div>
|
||||
<i18n path="i18n.info" tag="p">
|
||||
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a>
|
||||
</i18n>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list{
|
||||
padding: 30px 0;
|
||||
}
|
||||
.list p{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a{
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
225
h5-enginex-manager/src/components/page/Icon.vue
Executable file
225
h5-enginex-manager/src/components/page/Icon.vue
Executable file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2>使用方法</h2>
|
||||
<p style="line-height: 50px;">
|
||||
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
|
||||
<span><i class="el-icon-lx-redpacket_fill"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
|
||||
<span><i class="el-icon-lx-weibo"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
|
||||
<span><i class="el-icon-lx-emojifill"></i></span>
|
||||
</p>
|
||||
<br>
|
||||
<h2>图标</h2>
|
||||
<div class="search-box">
|
||||
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="icon-li" v-for="(item,index) in list" :key="index">
|
||||
<div class="icon-li-content">
|
||||
<i :class="`el-icon-lx-${item}`"></i>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
keyword: '',
|
||||
iconList: [
|
||||
'attentionforbid',
|
||||
'attentionforbidfill',
|
||||
'attention',
|
||||
'attentionfill',
|
||||
'tag',
|
||||
'tagfill',
|
||||
'people',
|
||||
'peoplefill',
|
||||
'notice',
|
||||
'noticefill',
|
||||
'mobile',
|
||||
'mobilefill',
|
||||
'voice',
|
||||
'voicefill',
|
||||
'unlock',
|
||||
'lock',
|
||||
'home',
|
||||
'homefill',
|
||||
'delete',
|
||||
'deletefill',
|
||||
'notification',
|
||||
'notificationfill',
|
||||
'notificationforbidfill',
|
||||
'like',
|
||||
'likefill',
|
||||
'comment',
|
||||
'commentfill',
|
||||
'camera',
|
||||
'camerafill',
|
||||
'warn',
|
||||
'warnfill',
|
||||
'time',
|
||||
'timefill',
|
||||
'location',
|
||||
'locationfill',
|
||||
'favor',
|
||||
'favorfill',
|
||||
'skin',
|
||||
'skinfill',
|
||||
'news',
|
||||
'newsfill',
|
||||
'record',
|
||||
'recordfill',
|
||||
'emoji',
|
||||
'emojifill',
|
||||
'message',
|
||||
'messagefill',
|
||||
'goods',
|
||||
'goodsfill',
|
||||
'crown',
|
||||
'crownfill',
|
||||
'move',
|
||||
'add',
|
||||
'hot',
|
||||
'hotfill',
|
||||
'service',
|
||||
'servicefill',
|
||||
'present',
|
||||
'presentfill',
|
||||
'pic',
|
||||
'picfill',
|
||||
'rank',
|
||||
'rankfill',
|
||||
'male',
|
||||
'female',
|
||||
'down',
|
||||
'top',
|
||||
'recharge',
|
||||
'rechargefill',
|
||||
'forward',
|
||||
'forwardfill',
|
||||
'info',
|
||||
'infofill',
|
||||
'redpacket',
|
||||
'redpacket_fill',
|
||||
'roundadd',
|
||||
'roundaddfill',
|
||||
'friendadd',
|
||||
'friendaddfill',
|
||||
'cart',
|
||||
'cartfill',
|
||||
'more',
|
||||
'moreandroid',
|
||||
'back',
|
||||
'right',
|
||||
'shop',
|
||||
'shopfill',
|
||||
'question',
|
||||
'questionfill',
|
||||
'roundclose',
|
||||
'roundclosefill',
|
||||
'roundcheck',
|
||||
'roundcheckfill',
|
||||
'global',
|
||||
'mail',
|
||||
'punch',
|
||||
'exit',
|
||||
'upload',
|
||||
'read',
|
||||
'file',
|
||||
'link',
|
||||
'full',
|
||||
'group',
|
||||
'friend',
|
||||
'profile',
|
||||
'addressbook',
|
||||
'calendar',
|
||||
'text',
|
||||
'copy',
|
||||
'share',
|
||||
'wifi',
|
||||
'vipcard',
|
||||
'weibo',
|
||||
'remind',
|
||||
'refresh',
|
||||
'filter',
|
||||
'settings',
|
||||
'scan',
|
||||
'qrcode',
|
||||
'cascades',
|
||||
'apps',
|
||||
'sort',
|
||||
'searchlist',
|
||||
'search',
|
||||
'edit'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list(){
|
||||
return this.iconList.filter((item) => {
|
||||
return item.indexOf(this.keyword) !== -1;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-p{
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box{
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.search{
|
||||
width: 300px;
|
||||
}
|
||||
ul,li{
|
||||
list-style: none;
|
||||
}
|
||||
.icon-li{
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.icon-li-content{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-li-content i{
|
||||
font-size: 36px;
|
||||
color: #606266;
|
||||
}
|
||||
.icon-li-content span{
|
||||
margin-top: 10px;
|
||||
color: #787878;
|
||||
}
|
||||
</style>
|
||||
149
h5-enginex-manager/src/components/page/Knowledge.vue
Executable file
149
h5-enginex-manager/src/components/page/Knowledge.vue
Executable file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="复杂规则集" :getData="getDataFun" ></cont>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import bus from '@/components/common/rule/bus.js'
|
||||
import cont from '@/components/common/rule/ruleCont.vue'
|
||||
import {
|
||||
getRulesList, // 获取列表
|
||||
addListRules, //新增文件夹
|
||||
getRulesListTree, // 获取列表树
|
||||
updataListRules, // 删除更新列表树
|
||||
getrulesave,
|
||||
getRuleInfo,
|
||||
getRuleUpdata,
|
||||
Rulesusing, // 删启停
|
||||
fielddownTemplate,
|
||||
ruleupdata,
|
||||
updateRuleParent, //更新文件夹
|
||||
addRuleVersion,
|
||||
updateRuleVersionStatus,
|
||||
copyRuleVersion,
|
||||
updateRuleVersion,
|
||||
getRuleVersionInfo //获取具体规则
|
||||
} from '@/api/index.js'
|
||||
|
||||
export default {
|
||||
name:'Knowledge',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
type:2,
|
||||
treeType:'5',
|
||||
row: [{
|
||||
label: '规则代码',
|
||||
row: 'code',
|
||||
}, {
|
||||
label: '规则名称',
|
||||
row: 'name'
|
||||
}, {
|
||||
label: '规则描述',
|
||||
row: 'description'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type: 'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'authorName'
|
||||
}, {
|
||||
label: '创建时间',
|
||||
row: 'created',
|
||||
type: 'Time'
|
||||
}],
|
||||
redact: "dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getRulesListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) { // 获取列表
|
||||
e.ruleInfo.difficulty=2
|
||||
return await getRulesList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) { //新增文件夹
|
||||
return await addListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
return await updataListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) {
|
||||
return await getrulesave(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getVersion(e) { //获取单个规则详细信息
|
||||
return await getRuleInfo(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e) {
|
||||
return await getRuleUpdata(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e) {
|
||||
return await Rulesusing(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e) {
|
||||
return await fielddownTemplate(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updateParent(e) {
|
||||
return await updateRuleParent(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getInfo(e) { //获取单个规则详细信息
|
||||
return await getRuleVersionInfo(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addVersion(e) { //添加新版本
|
||||
return await addRuleVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async delectVersion(e) { //删除版本
|
||||
return await updateRuleVersionStatus(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async copyVersion(e) { //复制新版本
|
||||
return await copyRuleVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updateVersion(e) { //更新版本
|
||||
return await updateRuleVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
134
h5-enginex-manager/src/components/page/Login.vue
Executable file
134
h5-enginex-manager/src/components/page/Login.vue
Executable file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="login-wrap">
|
||||
<div class="ms-login">
|
||||
<div class="ms-title">决策引擎系统</div>
|
||||
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="param.username" placeholder="username">
|
||||
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
v-model="param.password"
|
||||
@keyup.enter.native="submitForm()"
|
||||
>
|
||||
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="login-btn">
|
||||
<el-button type="primary" @click="submitForm()">登录</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogin } from '../../api/index';
|
||||
export default {
|
||||
created() {
|
||||
// if(this.$route.query.type=="token"){
|
||||
// this.$message.error('登陆授权码已过期')
|
||||
// this.$route.query.type=""
|
||||
// }
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
param: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
rules: {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.login.validate(valid => {
|
||||
if (valid) {
|
||||
// 调用登录接口
|
||||
this.getLogins();
|
||||
|
||||
} else {
|
||||
this.$message.error('请输入账号和密码');
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async getLogins() {
|
||||
// var formdata = new FormData();
|
||||
// formdata.append('account', this.param.username);
|
||||
// formdata.append('password', this.param.password);
|
||||
var params ={
|
||||
account:this.param.username,
|
||||
password:this.param.password
|
||||
}
|
||||
|
||||
const data = await getLogin(params);
|
||||
console.log('登录接口返回的数据',data);
|
||||
const code = data.code;
|
||||
|
||||
if(data.status==="1"){
|
||||
this.$message.success('登录成功，即将跳转');
|
||||
localStorage.setItem('ms_username', this.param.username);
|
||||
localStorage.setItem('token', data.data.token);
|
||||
this.$router.push('/');
|
||||
this.mixinReGetStorage()
|
||||
}
|
||||
else{
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../../assets/img/login-bg.jpg);
|
||||
background-size: 100%;
|
||||
}
|
||||
.ms-title {
|
||||
width: 100%;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.ms-login {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 350px;
|
||||
margin: -190px 0 0 -175px;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ms-content {
|
||||
padding: 30px 30px;
|
||||
}
|
||||
.login-btn {
|
||||
text-align: center;
|
||||
}
|
||||
.login-btn button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-tips {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
67
h5-enginex-manager/src/components/page/Markdown.vue
Executable file
67
h5-enginex-manager/src/components/page/Markdown.vue
Executable file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>markdown编辑器</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
mavonEditor：基于Vue的markdown编辑器。
|
||||
访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
|
||||
</div>
|
||||
<mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
|
||||
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mavonEditor } from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
export default {
|
||||
name: 'markdown',
|
||||
data: function(){
|
||||
return {
|
||||
content:'',
|
||||
html:'',
|
||||
configs: {
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
mavonEditor
|
||||
},
|
||||
methods: {
|
||||
// 将图片上传到服务器，返回地址替换到md中
|
||||
$imgAdd(pos, $file){
|
||||
var formdata = new FormData();
|
||||
formdata.append('file', $file);
|
||||
// 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
|
||||
this.$axios({
|
||||
url: '/common/upload',
|
||||
method: 'post',
|
||||
data: formdata,
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
}).then((url) => {
|
||||
this.$refs.md.$img2Url(pos, url);
|
||||
})
|
||||
},
|
||||
change(value, render){
|
||||
// render 为 markdown 解析后的结果
|
||||
this.html = render;
|
||||
},
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
console.log(this.html);
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.editor-btn{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
38
h5-enginex-manager/src/components/page/Permission.vue
Executable file
38
h5-enginex-manager/src/components/page/Permission.vue
Executable file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限测试</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>管理员权限页面</h1>
|
||||
<p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p>
|
||||
<p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
p{
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.logout{
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
124
h5-enginex-manager/src/components/page/SQLManage.vue
Executable file
124
h5-enginex-manager/src/components/page/SQLManage.vue
Executable file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="数据源指标" :getData="getDataFun"></cont>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cont from '@/components/common/cont.vue'
|
||||
import {
|
||||
getfieldList,addfieldList,getfieldListTree,updatafieldList,getfieldsave,getfieldInfo,updatafield,fieldusing,fielddownTemplate,fieldupdata
|
||||
} from '@/api/index.js'
|
||||
|
||||
export default {
|
||||
name:'SQLManage',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
type:2,
|
||||
row: [ {
|
||||
label: '创建时间',
|
||||
row: 'created',
|
||||
type:'Time'
|
||||
}, {
|
||||
label: '序号',
|
||||
row: 'id'
|
||||
}, {
|
||||
label: '字段名称',
|
||||
row: 'fieldEn'
|
||||
}, {
|
||||
label: '字段中文名',
|
||||
row: 'fieldCn'
|
||||
}, {
|
||||
label: '数据源类型',
|
||||
row: 'valueType',
|
||||
type:'type'
|
||||
}, {
|
||||
label: '字段类型',
|
||||
row: 'valueType',
|
||||
type:'type'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type:'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'nickName'
|
||||
},],
|
||||
redact:"dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getfieldListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) {
|
||||
e.fType = 2
|
||||
return await getfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) {
|
||||
|
||||
return await addfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
|
||||
return await updatafieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) {
|
||||
|
||||
return await getfieldsave(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getInfo(e){
|
||||
|
||||
return await getfieldInfo(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e){
|
||||
|
||||
return await updatafield(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e){
|
||||
|
||||
return await fieldusing(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e){
|
||||
|
||||
return await fielddownTemplate(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldsubmit(e){
|
||||
|
||||
return await fieldupdata(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
129
h5-enginex-manager/src/components/page/Tabs.vue
Executable file
129
h5-enginex-manager/src/components/page/Tabs.vue
Executable file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-tabs v-model="message">
|
||||
<el-tab-pane :label="`未读消息(${unread.length})`" name="first">
|
||||
<el-table :data="unread" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<span class="message-title">{{scope.row.title}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="180"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="primary">全部标为已读</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="`已读消息(${read.length})`" name="second">
|
||||
<template v-if="message === 'second'">
|
||||
<el-table :data="read" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<span class="message-title">{{scope.row.title}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="150"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="danger">删除全部</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="`回收站(${recycle.length})`" name="third">
|
||||
<template v-if="message === 'third'">
|
||||
<el-table :data="recycle" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<span class="message-title">{{scope.row.title}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="150"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleRestore(scope.$index)">还原</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="danger">清空回收站</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabs',
|
||||
data() {
|
||||
return {
|
||||
message: 'first',
|
||||
showHeader: false,
|
||||
unread: [{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护',
|
||||
},{
|
||||
date: '2018-04-19 21:00:00',
|
||||
title: '今晚12点整发大红包，先到先得',
|
||||
}],
|
||||
read: [{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
|
||||
}],
|
||||
recycle: [{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRead(index) {
|
||||
const item = this.unread.splice(index, 1);
|
||||
console.log(item);
|
||||
this.read = item.concat(this.read);
|
||||
},
|
||||
handleDel(index) {
|
||||
const item = this.read.splice(index, 1);
|
||||
this.recycle = item.concat(this.recycle);
|
||||
},
|
||||
handleRestore(index) {
|
||||
const item = this.recycle.splice(index, 1);
|
||||
this.read = item.concat(this.read);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unreadNum(){
|
||||
return this.unread.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.message-title{
|
||||
cursor: pointer;
|
||||
}
|
||||
.handle-row{
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
141
h5-enginex-manager/src/components/page/Upload.vue
Executable file
141
h5-enginex-manager/src/components/page/Upload.vue
Executable file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element UI自带上传组件。
|
||||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="http://jsonplaceholder.typicode.com/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
|
||||
访问地址：<a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
|
||||
</div>
|
||||
<div class="crop-demo">
|
||||
<img :src="cropImg" class="pre-img">
|
||||
<div class="crop-demo-btn">选择图片
|
||||
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
|
||||
<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelCrop">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
export default {
|
||||
name: 'upload',
|
||||
data: function(){
|
||||
return {
|
||||
defaultSrc: require('../../assets/img/img.jpg'),
|
||||
fileList: [],
|
||||
imgSrc: '',
|
||||
cropImg: '',
|
||||
dialogVisible: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCropper
|
||||
},
|
||||
methods:{
|
||||
setImage(e){
|
||||
const file = e.target.files[0];
|
||||
if (!file.type.includes('image/')) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.dialogVisible = true;
|
||||
this.imgSrc = event.target.result;
|
||||
this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
cropImage () {
|
||||
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
|
||||
},
|
||||
cancelCrop(){
|
||||
this.dialogVisible = false;
|
||||
this.cropImg = this.defaultSrc;
|
||||
},
|
||||
imageuploaded(res) {
|
||||
console.log(res)
|
||||
},
|
||||
handleError(){
|
||||
this.$notify.error({
|
||||
title: '上传失败',
|
||||
message: '图片上传接口上传失败，可更改为自己的服务器接口'
|
||||
});
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.cropImg = this.defaultSrc;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-title{
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.pre-img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.crop-demo{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.crop-demo-btn{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
margin-left: 30px;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.crop-input{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
53
h5-enginex-manager/src/components/page/VueEditor.vue
Executable file
53
h5-enginex-manager/src/components/page/VueEditor.vue
Executable file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>编辑器</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
|
||||
访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
|
||||
</div>
|
||||
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
|
||||
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'quill/dist/quill.core.css';
|
||||
import 'quill/dist/quill.snow.css';
|
||||
import 'quill/dist/quill.bubble.css';
|
||||
import { quillEditor } from 'vue-quill-editor';
|
||||
export default {
|
||||
name: 'editor',
|
||||
data: function(){
|
||||
return {
|
||||
content: '',
|
||||
editorOption: {
|
||||
placeholder: 'Hello World'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
quillEditor
|
||||
},
|
||||
methods: {
|
||||
onEditorChange({ editor, html, text }) {
|
||||
this.content = html;
|
||||
},
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
this.$message.success('提交成功！');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.editor-btn{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
6
h5-enginex-manager/src/components/page/bus.js
Executable file
6
h5-enginex-manager/src/components/page/bus.js
Executable file
@@ -0,0 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
// 使用 Event Bus
|
||||
const bus = new Vue();
|
||||
|
||||
export default bus;
|
||||
127
h5-enginex-manager/src/components/page/easyRule.vue
Executable file
127
h5-enginex-manager/src/components/page/easyRule.vue
Executable file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="基础规则集" :getData="getDataFun"></cont>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import bus from '@/components/common/rule/bus.js'
|
||||
import cont from '@/components/common/rule/ruleCont.vue'
|
||||
import {
|
||||
getRulesList, // 获取列表
|
||||
addListRules, //新增文件夹
|
||||
getRulesListTree, // 获取列表树
|
||||
updataListRules, // 删除更新列表树
|
||||
getrulesave,
|
||||
getRuleInfo,
|
||||
getRuleUpdata,
|
||||
Rulesusing, // 删启停
|
||||
fielddownTemplate,
|
||||
getEasyRulesave,
|
||||
getEasyRuleUpdata,
|
||||
getEasyRuleInfo,
|
||||
ruleupdata,
|
||||
updateRuleParent //更新文件夹
|
||||
} from '@/api/index.js'
|
||||
|
||||
export default {
|
||||
name:'easyRule',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
type:1,
|
||||
treeType:'0',
|
||||
row: [{
|
||||
label: '规则代码',
|
||||
row: 'code',
|
||||
}, {
|
||||
label: '规则名称',
|
||||
row: 'name'
|
||||
}, {
|
||||
label: '规则描述',
|
||||
row: 'description'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type: 'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'authorName'
|
||||
}, {
|
||||
label: '创建时间',
|
||||
row: 'created',
|
||||
type: 'Time'
|
||||
}],
|
||||
redact: "dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getRulesListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) { // 获取列表
|
||||
e.ruleInfo.difficulty=1
|
||||
return await getRulesList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) { //新增文件夹
|
||||
return await addListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
return await updataListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) {
|
||||
return await getEasyRulesave(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
async getInfo(e) { //获取单个规则详细信息
|
||||
return await getEasyRuleInfo({id:e}).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e) {
|
||||
return await getEasyRuleUpdata(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e) {
|
||||
return await Rulesusing(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e) {
|
||||
return await fielddownTemplate(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldsubmit(e) {
|
||||
return await ruleupdata(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updateParent(e) {
|
||||
return await updateRuleParent(e).then(res => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
191
h5-enginex-manager/src/components/page/engineSummary.vue
Executable file
191
h5-enginex-manager/src/components/page/engineSummary.vue
Executable file
@@ -0,0 +1,191 @@
|
||||
<style >
|
||||
.engSu{
|
||||
display: flex;
|
||||
border: 1px solid #ccc;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
justify-content: space-around;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.engSu_cont{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border: 1px dashed #ccc;
|
||||
height: 50px;
|
||||
margin-left: 20px;
|
||||
border-radius: 5px;
|
||||
transition: all 1s;
|
||||
/* border: 1px solid #ddd; */
|
||||
}
|
||||
.engSu_cont>div:nth-of-type(1){
|
||||
background-color: #2db46c;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
.engSu_day{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.engSu_day>div{
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.engSu_day>div>p:nth-of-type(1){
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.engSu_name{
|
||||
border: 1px solid #ddd;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
/* background-color: #000000; */
|
||||
}
|
||||
.engSu_top{
|
||||
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
.engSuFor{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.engSuForHome{
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div :style="{width:'100%',height:klist.length*120+'px'}" class="engSuForHome">
|
||||
<div v-for="(value,index) in klist" :key="value.id" class="engSuFor" :style="{top:index*120+'px'}">
|
||||
<div class="engSu">
|
||||
<div class="engSu_name">
|
||||
{{value.name}}
|
||||
</div>
|
||||
<div class="engSu_cont">
|
||||
<div>
|
||||
调用次数
|
||||
</div>
|
||||
<div class="engSu_day">
|
||||
<div>
|
||||
<p>昨日</p>
|
||||
<p>{{value.call.yesterday}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日</p>
|
||||
<p>{{value.call.today}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日预计</p>
|
||||
<p>{{value.call.todayPredict}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="engSu_cont">
|
||||
<div>
|
||||
决策结果
|
||||
</div>
|
||||
<div class="engSu_day">
|
||||
<div>
|
||||
<p>昨日</p>
|
||||
<p>{{value.call.yesterday}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日</p>
|
||||
<p>{{value.call.today}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日预计</p>
|
||||
<p>{{value.call.todayPredict}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="engSu_cont">
|
||||
<div>
|
||||
命中规则
|
||||
</div>
|
||||
<div class="engSu_day">
|
||||
<div>
|
||||
<p>昨日</p>
|
||||
<p>{{value.call.yesterday}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日</p>
|
||||
<p>{{value.call.today}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>今日预计</p>
|
||||
<p>{{value.call.todayPredict}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="engSu_top" :style="{backgroundColor:value.top?'#349d00':'#dcdcdc'}" @click="switchTop(value)">
|
||||
<i class="el-icon-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getengineSummaryList} from '../../api/index'
|
||||
export default{
|
||||
name:'engineSummary',
|
||||
data(){
|
||||
return {
|
||||
topKlist:[],
|
||||
klist:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getengineSummaryList().then(res=>{
|
||||
if(res.status=="1"){
|
||||
this.klist = res.data.klist
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods:{
|
||||
switchTop(item){
|
||||
this.klist.forEach((value,index)=>{
|
||||
if(value == item){
|
||||
this.klist.splice(index,1)
|
||||
}
|
||||
})
|
||||
item.top=!item.top
|
||||
if(item.top){
|
||||
this.klist.unshift(item)
|
||||
}else{
|
||||
this.klist.push(item)
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
151
h5-enginex-manager/src/components/page/listOperation.vue
Executable file
151
h5-enginex-manager/src/components/page/listOperation.vue
Executable file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="集合操作" :getData="getDataFun"></cont>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cont from '@/components/common/listOperation/listOperation.vue'
|
||||
import {
|
||||
getListOperationList, // 获取列表
|
||||
addListRules, //新增文件夹
|
||||
getRulesListTree, // 获取列表树
|
||||
updataListRules, // 删除更新列表树
|
||||
getrulesave,
|
||||
getListOperation,
|
||||
getRuleUpdata,
|
||||
updateListOperationStatus, // 删启停
|
||||
fielddownTemplate,
|
||||
updateListOperation, //更新内容
|
||||
addListOperation,// 添加
|
||||
updateListOperationFolder, // 移动文件夹
|
||||
getDecisionTreeVersionInfo,
|
||||
addlistOperationVersion, // 添加版本
|
||||
copyListOperationVersion, // 复制版本
|
||||
updatelistOperationVersion, // 重命名版本
|
||||
updatelistOperationStatusVersion //删除版本
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
name:'decisionTree',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
treeType:'8',
|
||||
row: [{
|
||||
label: '集合代码',
|
||||
row: 'code',
|
||||
}, {
|
||||
label: '集合名称',
|
||||
row: 'name'
|
||||
}, {
|
||||
label: '集合描述',
|
||||
row: 'description'
|
||||
}, {
|
||||
label: '类型',
|
||||
row: 'opType',
|
||||
fn: (res)=>res==1?'集合规则':'集合处理'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type: 'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'createUserName'
|
||||
}, {
|
||||
label: '创建时间',
|
||||
row: 'createTime',
|
||||
type: 'Time'
|
||||
}],
|
||||
redact: "dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getRulesListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) { // 获取列表
|
||||
return await getListOperationList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) { //新增文件夹
|
||||
return await addListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
return await updataListRules(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) { // 添加
|
||||
return await addListOperation(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getVersion(e) { //获取单个规则详细信息
|
||||
return await getListOperation(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getInfo(e) { //获取单个规则详细信息
|
||||
return await getDecisionTreeVersionInfo(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e) { //更新内容
|
||||
return await updateListOperation(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e) {
|
||||
return await updateListOperationStatus(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e) {
|
||||
return await fielddownTemplate(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updateParent(e) { // 移动文件夹
|
||||
return await updateListOperationFolder(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addVersion(e) { //添加新版本
|
||||
return await addlistOperationVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async delectVersion(e) { //删除版本
|
||||
return await updatelistOperationStatusVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async copyVersion(e) { //复制新版本
|
||||
return await copyListOperationVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updateVersion(e) { //更新版本
|
||||
return await updatelistOperationVersion(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
117
h5-enginex-manager/src/components/page/portManage.vue
Executable file
117
h5-enginex-manager/src/components/page/portManage.vue
Executable file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<cont title="接口指标" :getData="getDataFun"></cont>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cont from '@/components/common/cont.vue'
|
||||
import {
|
||||
getfieldList,addfieldList,getfieldListTree,updatafieldList,getfieldsave,getfieldInfo,updatafield,fieldusing,fielddownTemplate,fieldupdata
|
||||
} from '@/api/index.js'
|
||||
|
||||
export default {
|
||||
name:'portManage',
|
||||
components: {
|
||||
cont
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getDataFun: {
|
||||
type:4,
|
||||
row: [ {
|
||||
label: '创建时间',
|
||||
row: 'created',
|
||||
type:'Time'
|
||||
}, {
|
||||
label: '序号',
|
||||
row: 'id'
|
||||
}, {
|
||||
label: '字段名称',
|
||||
row: 'fieldEn'
|
||||
}, {
|
||||
label: '字段中文名',
|
||||
row: 'fieldCn'
|
||||
}, {
|
||||
label: '字段类型',
|
||||
row: 'valueType',
|
||||
type:'type'
|
||||
}, {
|
||||
label: '状态',
|
||||
row: 'status',
|
||||
type:'State'
|
||||
}, {
|
||||
label: '创建人',
|
||||
row: 'nickName'
|
||||
},],
|
||||
redact:"dataManageRedact",
|
||||
async getTree(e){
|
||||
return await getfieldListTree(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getlist(e) {
|
||||
e.fType = 4
|
||||
return await getfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async addlist(e) {
|
||||
|
||||
return await addfieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatalist(e) {
|
||||
|
||||
return await updatafieldList(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async setsave(e) {
|
||||
|
||||
return await getfieldsave(e).then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
async getInfo(e){
|
||||
|
||||
return await getfieldInfo(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async updatafield(e){
|
||||
|
||||
return await updatafield(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldusing(e){
|
||||
|
||||
return await fieldusing(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async down(e){
|
||||
|
||||
return await fielddownTemplate(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
},
|
||||
async fieldsubmit(e){
|
||||
|
||||
return await fieldupdata(e).then(res=>{
|
||||
return res
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
666
h5-enginex-manager/src/components/page/portSource.vue
Executable file
666
h5-enginex-manager/src/components/page/portSource.vue
Executable file
@@ -0,0 +1,666 @@
|
||||
<template>
|
||||
<div style="height: 90%; " class="portS">
|
||||
<!-- 创建和搜索 -->
|
||||
<div class="datasou_top" style="height: 10%;">
|
||||
<el-row style="margin-bottom: 30px;margin-top: 20px;">
|
||||
<el-col :span="15">
|
||||
<el-button type="primary" @click="createEngine">创建接口</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="datasou_cont" style="height: 80%;" v-if="data">
|
||||
<div class="datasou_table">
|
||||
<el-row>
|
||||
|
||||
|
||||
<el-table border :data="data.data.klist" style="width: 100%" :cell-style="{padding: '10px'}"
|
||||
v-loading="loading">
|
||||
|
||||
<el-table-column prop="id" label="ID" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="连接名称" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="连接地址" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="请求方法" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="requestBody" label="请求体类型" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="调用量" align="center" show-overflow-tooltip>
|
||||
{{1}}
|
||||
</el-table-column>
|
||||
<el-table-column prop="creatorName" label="创建人" align="center" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updataTime" label="最后更新时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span style="white-space: nowrap;">{{
|
||||
new Date(scope.row.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(scope.row.updateTime).toTimeString().substr(0, 8)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<div style="display: flex;">
|
||||
<el-button icon="el-icon-search" circle size="mini"
|
||||
@click="dialogShow(scope.$index)"></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" circle size="mini"
|
||||
@click="modificationShow(scope.row.id)"></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini"
|
||||
@click="deletelistsor(scope.row.id)"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div style="float: right;margin-right: 120px;margin-top: 40px;">
|
||||
<el-pagination :current-page="pageNo" @current-change="currpage" background layout="prev, pager, next"
|
||||
:total="data.data.pageInfo.total" v-if="data!==null">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="接口详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
|
||||
class="DataSource_look">
|
||||
<div v-if="tempDialogData!==null">
|
||||
<div class="port_textLayout">
|
||||
<p>连接名称：</p>
|
||||
<p v-if="tempDialogData.name">{{tempDialogData.name}}</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>连接地址：</p>
|
||||
<p v-if="tempDialogData.url">{{tempDialogData.url}}</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>请求方式：</p>
|
||||
<p v-if="tempDialogData.method">{{tempDialogData.method}}</p>
|
||||
</div>
|
||||
<div class="port_textLayout" >
|
||||
<p>请求头：</p>
|
||||
<div v-if="tempDialogData.requestHeaders" >
|
||||
<p
|
||||
v-for="value in typeof tempDialogData.requestHeaders == 'string'?JSON.parse(tempDialogData.requestHeaders):tempDialogData.requestHeaders">
|
||||
{{value.key}}:{{value.value}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port_textLayout" style="margin-top: 20px;">
|
||||
<p>请求体：</p>
|
||||
<el-input type="textarea" rows="8" placeholder="格式:{page:1} 变量格式:name:{name}"
|
||||
v-model="tempDialogData.requestBody" disabled style="width: 400px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>响应体：</p>
|
||||
<el-input type="textarea" rows="8" v-model="tempDialogData.responseBody" disabled
|
||||
style="width: 400px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>创建时间：</p>
|
||||
<p v-if="tempDialogData.createTime">
|
||||
{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>创建人：</p>
|
||||
<p v-if="tempDialogData.creatorName">{{tempDialogData.creatorName}}</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>修改时间：</p>
|
||||
<p v-if="tempDialogData.updateTime">
|
||||
{{new Date(tempDialogData.updateTime).toLocaleDateString().replace(/\//g, "-") + " " + new Date(tempDialogData.updateTime).toTimeString().substr(0, 8)}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>修改人：</p>
|
||||
<p v-if="tempDialogData.modifierName">{{tempDialogData.modifierName}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
数据错误 请重新尝试
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false;tempDialogData=null">确 定</el-button>
|
||||
</span>
|
||||
|
||||
</el-dialog>
|
||||
<el-dialog :title="modificationId===null?'创建接口':'修改接口'" :visible.sync="modificationVisible" width="40%"
|
||||
class="portS_dialog" :before-close="handleClose">
|
||||
<div v-loading="dialogLoading">
|
||||
<div class="port_textLayout">
|
||||
<p><span style="color: red;">*</span>接口名称：</p>
|
||||
<p>
|
||||
<el-input placeholder="请输入连接名称" v-model="modificationData.name" clearable maxlength="20">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="port_textLayout">
|
||||
<p><span style="color: red;">*</span>请求地址：</p>
|
||||
<p>
|
||||
<el-input placeholder="如:192.168.1.1" v-model="modificationData.url" clearable maxlength="100">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p><span style="color: red;">*</span>请求方法：</p>
|
||||
<p>
|
||||
<el-select v-model="modificationData.method" placeholder="请选择请求方法">
|
||||
<el-option label="Get" value="GET"></el-option>
|
||||
<el-option label="Post" value="POST"></el-option>
|
||||
</el-select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="port_textLayout">
|
||||
<p>请求头参数：</p>
|
||||
<div>
|
||||
<p style="display: flex;align-items: center;margin-top: 5px;">
|
||||
<el-input placeholder="key" v-model="modificationData.requestHeaders[0].key" disabled
|
||||
clearable size="mini"></el-input>
|
||||
<span>:</span>
|
||||
<el-select v-model="modificationData.requestHeaders[0].value" size="mini"
|
||||
placeholder="请选择请求方法">
|
||||
<el-option label="/json" value="application/json"></el-option>
|
||||
<el-option label="/x-www-form-urlencoded" value="application/x-www-form-urlencoded">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<i class="el-icon-circle-plus-outline" style="color: #409EFF;font-size: 20px;"
|
||||
@click="addheader(0)"></i>
|
||||
<i class="el-icon-circle-close" style="color: #ddd;font-size: 20px;"></i>
|
||||
</p>
|
||||
|
||||
<p v-for="(value,index) in modificationData.requestHeaders"
|
||||
style="display: flex;align-items: center;margin-top: 5px;" v-if="index!=0">
|
||||
<el-input placeholder="key" v-model="value.key" clearable size="mini"></el-input>
|
||||
<span>:</span>
|
||||
<el-input placeholder="value" v-model="value.value" clearable size="mini"></el-input>
|
||||
<i class="el-icon-circle-plus-outline" style="color: #409EFF;font-size: 20px;"
|
||||
@click="addheader(index)"></i>
|
||||
<i class="el-icon-circle-close" style="color: #F56C6C;font-size: 20px;"
|
||||
@click="delectheader(index)"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>请求体：</p>
|
||||
<p>
|
||||
<el-input type="textarea" rows="12" placeholder="格式:{page:1} 变量格式:name:{name}"
|
||||
v-model="modificationData.requestBody" style="width: 400px;">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>测试请求：</p>
|
||||
<p>
|
||||
<el-button plain @click="getHttpResponses">请求测试</el-button>
|
||||
<el-button plain @click="lookBig">大屏查看请求响应体</el-button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="port_textLayout">
|
||||
<p>响应体：</p>
|
||||
<p>
|
||||
<el-input type="textarea" placeholder="点击请求测试获取此值" v-model="modificationData.responseBody"
|
||||
style="width: 400px;">
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" :disabled="dialogLoading?'disabled':false">取 消</el-button>
|
||||
<el-button type="primary" :disabled="dialogLoading?'disabled':false" @click="modificationSure">确 定
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dialog width="70%" title="数据" :visible.sync="dialogVisibleBigData" append-to-body :close-on-click-modal="false">
|
||||
<span>
|
||||
ps:在此处也可以修改数据
|
||||
</span>
|
||||
<div style="display: flex;justify-content: space-between;width: 100%;">
|
||||
|
||||
<div style="width: 50%;">
|
||||
<p>请求体：</p>
|
||||
<p>
|
||||
<el-input type="textarea" rows="26" placeholder="格式:{page:1} 变量格式:name:{name}"
|
||||
v-model="modificationData.requestBody" >
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<p>响应体：</p>
|
||||
<p>
|
||||
<el-input type="textarea" rows="26" placeholder="点击请求测试获取此值" v-model="modificationData.responseBody"
|
||||
>
|
||||
</el-input>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<el-button type="primary" @click="dialogVisibleBigData=false">确 定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getInterfaceList,
|
||||
addInterface,
|
||||
updateInterface,
|
||||
deleteInterface,
|
||||
getHttpResponse
|
||||
} from '../../api/index';
|
||||
export default {
|
||||
name: "portSource",
|
||||
data() {
|
||||
return {
|
||||
dialogLoading: false,
|
||||
loading: false,
|
||||
searchString: "",
|
||||
data: null,
|
||||
currentPage: null,
|
||||
dialogVisible: false,
|
||||
tempDialogData: null,
|
||||
pageNo: 1,
|
||||
modificationId: null,
|
||||
modificationVisible: false,
|
||||
modificationData: {
|
||||
name: "",
|
||||
url: '',
|
||||
method: '',
|
||||
requestBody: '',
|
||||
requestHeaders: [{
|
||||
key: 'Content-Type',
|
||||
value: 'application/json'
|
||||
}],
|
||||
responseBody: '',
|
||||
},
|
||||
dialogVisibleBigData: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let params = {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
"interfaceInfo": {}
|
||||
}
|
||||
this.getInterfaceLists(params)
|
||||
},
|
||||
methods: {
|
||||
lookBig() {
|
||||
this.dialogVisibleBigData = true
|
||||
},
|
||||
random() {
|
||||
return Math.floor(Math.random() * 5000)
|
||||
},
|
||||
addheader(index) {
|
||||
this.modificationData.requestHeaders.splice(index + 1, 0, {
|
||||
key: '',
|
||||
value: ''
|
||||
})
|
||||
},
|
||||
delectheader(index) {
|
||||
this.modificationData.requestHeaders.splice(index, 1)
|
||||
},
|
||||
// 测试连接
|
||||
getHttpResponses() {
|
||||
|
||||
let subobj = {}
|
||||
this.modificationData.requestHeaders.forEach(value => {
|
||||
subobj[value.key] = value.value
|
||||
})
|
||||
|
||||
let Params = {
|
||||
url: this.modificationData.url,
|
||||
method: this.modificationData.method,
|
||||
requestHeaders: JSON.stringify(subobj),
|
||||
requestBody: this.modificationData.requestBody
|
||||
}
|
||||
this.dialogLoading = true
|
||||
getHttpResponse(Params).then(res => {
|
||||
if (res.status == "1") {
|
||||
this.modificationData.responseBody = JSON.stringify(JSON.parse(res.data), null, 4)
|
||||
}
|
||||
this.dialogLoading = false
|
||||
})
|
||||
},
|
||||
// 关闭弹窗所有弹窗 且清除临时数据
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.modificationVisible = false
|
||||
|
||||
this.tempDialogData = null
|
||||
this.modificationData = {
|
||||
name: "",
|
||||
url: '',
|
||||
method: '',
|
||||
requestBody: '',
|
||||
requestHeaders: [{
|
||||
key: 'Content-Type',
|
||||
value: 'application/json'
|
||||
}],
|
||||
responseBody: '',
|
||||
}
|
||||
|
||||
this.modificationId = null
|
||||
},
|
||||
// 查看 弹窗显示
|
||||
dialogShow(index) {
|
||||
this.tempDialogData = this.data.data.klist[index]
|
||||
console.log(this.tempDialogData)
|
||||
// this.tempDialogData.requestHeaders = JSON.parse(this.tempDialogData.requestHeaders)
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 修改 弹窗显示
|
||||
modificationShow(id) {
|
||||
this.modificationId = id
|
||||
this.data.data.klist.forEach(value => {
|
||||
if (value.id === id) {
|
||||
this.modificationData = {
|
||||
...value
|
||||
}
|
||||
if (value.requestHeaders) {
|
||||
if (typeof this.modificationData.requestHeaders == "string") {
|
||||
this.modificationData.requestHeaders = JSON.parse(value.requestHeaders)
|
||||
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
this.modificationData.requestHeaders = [{
|
||||
key: 'Content-Type',
|
||||
value: 'application/json'
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
this.modificationVisible = true
|
||||
},
|
||||
// 确定修改或者添加
|
||||
modificationSure() {
|
||||
if (this.modificationData.name.indexOf(' ') !== -1 || this.modificationData.url.indexOf(' ') !== -1 || this
|
||||
.modificationData
|
||||
.method == "") {
|
||||
this.$message.error('必填项不允许出现空格！')
|
||||
} else {
|
||||
if (this.modificationData.name.length < 4 || this.modificationData.url.length < 4) {
|
||||
this.$message.error('请检查必填项且长度不小于4！')
|
||||
} else {
|
||||
let is = false
|
||||
this.modificationData.requestHeaders.forEach(value => {
|
||||
if (value.key.trim() == "" || value.value.trim() == "") {
|
||||
is = true
|
||||
}
|
||||
})
|
||||
|
||||
if (is) {
|
||||
this.$message.error('请填入请求头');
|
||||
return
|
||||
}
|
||||
// this.modificationData.responseBody
|
||||
if (!this.isJSON(this.modificationData.responseBody)) {
|
||||
this.$message.error('请检查 响应体 是否为JSON格式');
|
||||
return
|
||||
}
|
||||
let params = {}
|
||||
|
||||
params.name = this.modificationData.name
|
||||
params.url = this.modificationData.url
|
||||
params.method = this.modificationData.method
|
||||
params.requestBody = this.modificationData.requestBody
|
||||
params.responseBody = this.modificationData.responseBody
|
||||
|
||||
let subobj = {}
|
||||
this.modificationData.requestHeaders.forEach(value => {
|
||||
subobj[value.key] = value.value
|
||||
})
|
||||
|
||||
params.requestHeaders = String(JSON.stringify(subobj))
|
||||
console.log(params.requestHeaders)
|
||||
if (this.modificationId !== null) {
|
||||
params.id = this.modificationData.id
|
||||
console.log(1)
|
||||
updateInterface(params).then(res => {
|
||||
if (res.status == "1") {
|
||||
this.data.data.klist.forEach((value, index) => {
|
||||
if (value.id === this.modificationData.id) {
|
||||
this.$set(this.data.data.klist, index, {
|
||||
...this.modificationData
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
});
|
||||
console.log(2)
|
||||
this.handleClose()
|
||||
console.log(3)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
params.id = ""
|
||||
this.setDataSources(params).then(res => {
|
||||
if (res.status === "1") {
|
||||
// 创建成功方法
|
||||
this.pageNo = 1
|
||||
this.getInterfaceLists({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
"interfaceInfo": {}
|
||||
})
|
||||
this.$message({
|
||||
message: '创建成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// console.log(this.modificationData.name.indexOf(' '))
|
||||
},
|
||||
async setDataSources(params) {
|
||||
this.loading = true
|
||||
const data = await addInterface(params)
|
||||
this.loading = false
|
||||
return data
|
||||
},
|
||||
createEngine() {
|
||||
this.modificationVisible = true
|
||||
},
|
||||
searchEngine() {},
|
||||
async getInterfaceLists(params) {
|
||||
this.loading = true
|
||||
const data = await getInterfaceList(params)
|
||||
if (data.status === "1") {
|
||||
this.data = data
|
||||
data.data.klist = data.data.klist.map(value => {
|
||||
value.requestBody = this.isJSON(value.requestBody) ? JSON.stringify(JSON.parse(value
|
||||
.requestBody), null, 4) : ''
|
||||
value.responseBody = this.isJSON(value.responseBody) ? JSON.stringify(JSON.parse(value
|
||||
.responseBody), null, 4) : ''
|
||||
|
||||
if (!Array.isArray(JSON.parse(value.requestHeaders))) { //讲 key:value 格式 更改为老格式
|
||||
value.requestHeaders = JSON.stringify(this.format(JSON.parse(value
|
||||
.requestHeaders)))
|
||||
|
||||
|
||||
}
|
||||
|
||||
return value
|
||||
})
|
||||
this.page = data.data.pageInfo
|
||||
} else {
|
||||
this.$message.error('访问出错了-_-');
|
||||
}
|
||||
this.loading = false
|
||||
},
|
||||
format(obj) {
|
||||
return Object.keys(obj).map(value => {
|
||||
return {
|
||||
key: value,
|
||||
value: obj[value]
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
deletelistsor(id) {
|
||||
|
||||
this.$confirm('确定删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.deletelists({
|
||||
id: id
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
deletelists(id) {
|
||||
this.deletelist(id).then(res => {
|
||||
if (res.status === "1") {
|
||||
this.getInterfaceLists({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
"interfaceInfo": {}
|
||||
})
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
async deletelist(id) {
|
||||
this.loading = true
|
||||
return await deleteInterface(id)
|
||||
this.loading = false
|
||||
},
|
||||
currpage(num) {
|
||||
this.pageNo = num
|
||||
this.getInterfaceLists({
|
||||
pageNo: this.pageNo,
|
||||
pageSize: 10,
|
||||
"interfaceInfo": {}
|
||||
})
|
||||
console.log(this.pageNo)
|
||||
},
|
||||
isChinese(temp) {
|
||||
// var re = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
|
||||
// if (re.test(temp)) {
|
||||
// console.log(temp)
|
||||
// return false
|
||||
// };
|
||||
// return true;
|
||||
if (escape(temp).indexOf("%u") < 0) {
|
||||
return false
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
},
|
||||
isJSON(str) {
|
||||
if (typeof str == 'string') {
|
||||
try {
|
||||
var obj = JSON.parse(str);
|
||||
if (typeof obj == 'object' && obj) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log('error：' + str + '!!!' + e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-pagination.is-background .btn-next,
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #409EFF !important;
|
||||
}
|
||||
|
||||
.portS_dialog .port_textLayout {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
padding-left: 0px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.port_textLayout>p {
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.portS_dialog .port_textLayout>p:nth-of-type(1) {
|
||||
width: 32%;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.portS .DataSource_look .port_textLayout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.DataSource_look .port_textLayout>p:nth-of-type(2) {
|
||||
border-radius: 5px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.portS_dialog .port_textLayout {
|
||||
height: unset !important;
|
||||
}
|
||||
</style>
|
||||
13
h5-enginex-manager/src/components/page/redirect/index.vue
Executable file
13
h5-enginex-manager/src/components/page/redirect/index.vue
Executable file
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
const { params, query } = this.$route
|
||||
console.log(params);
|
||||
const { path } = params
|
||||
this.$router.replace({ path: '/' + path, query })
|
||||
},
|
||||
render: function(h) {
|
||||
return h() // avoid warning message
|
||||
}
|
||||
}
|
||||
</script>
|
||||
BIN
h5-enginex-manager/src/components/page/start.png
Executable file
BIN
h5-enginex-manager/src/components/page/start.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
166
h5-enginex-manager/src/components/page/systemManagement/logManagement.vue
Executable file
166
h5-enginex-manager/src/components/page/systemManagement/logManagement.vue
Executable file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<div >
|
||||
当前时间：
|
||||
<el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd" @change="getlist">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div >
|
||||
<el-input placeholder="搜索" v-model="searchVal" class="input-with-select">
|
||||
<el-button slot="append" icon="el-icon-search" @click="getlist"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border :data="dataList" style="width: 100%">
|
||||
|
||||
<el-table-column prop="id" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="organName" label="公司名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="opName" label="操作名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="opUserName" label="操作人员名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="ip" label="IP" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="startTime" label="开始时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.startTime|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="endTime" label="结束时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.endTime|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="查看" placement="left">
|
||||
<el-button icon="el-icon-view" circle size="mini" @click="lockData(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看 -->
|
||||
<el-dialog title="日志详情" :visible.sync="dialogVisible" width="30%" center>
|
||||
<div class="log-info-wrapper">
|
||||
<p><strong>操作名称：</strong>{{currentItem.opName}}</p>
|
||||
<p><strong>操作人员名称：</strong>{{currentItem.opUserName}}</p>
|
||||
<p><strong>IP：</strong>{{currentItem.ip}}</p>
|
||||
<p><strong>请求路径：</strong>{{currentItem.requestPath}}</p>
|
||||
<p><strong>请求参数：</strong>{{currentItem.requestParam}}</p>
|
||||
<p><strong>响应参数：</strong>{{currentItem.responseParam}}</p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getLogList
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
//过滤
|
||||
name:'logManagement',
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
dateValue: [formatDate(new Date, 'yyyy-MM-dd'), formatDate(new Date, 'yyyy-MM-dd')],
|
||||
searchVal: "",
|
||||
dialogVisible: false,
|
||||
currentItem: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
lockData(e) {
|
||||
this.currentItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getLogList({
|
||||
searchKey: this.searchVal,
|
||||
startDate: this.dateValue[0],
|
||||
endDate: this.dateValue[1],
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.logList;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content-wrapper .el-date-editor .el-range-separator {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.log-info-wrapper p {
|
||||
line-height: 2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div >
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger">删除</el-button>
|
||||
<el-button @click="using(1)" type="success">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="id" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="公司名称" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="code" label="公司代号" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'停用':'启用'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="token" label="TOKEN" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="organEdit(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加编辑 -->
|
||||
<el-dialog title="配置账号" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changeOrganForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="名称" prop="name" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="代号" prop="code" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.code" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="changeOrgan('changeOrganForm')">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getOrganList,
|
||||
updateStatusOrgan,
|
||||
saveOrgan,
|
||||
updateOrgan
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
name:'organizationManagement',
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: "",
|
||||
code: ""
|
||||
},
|
||||
currItem: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.currItem = {};
|
||||
this.dialogFormVisible = false;
|
||||
this.form = {
|
||||
name: "",
|
||||
code: ""
|
||||
}
|
||||
this.$refs["changeOrganForm"].resetFields();
|
||||
},
|
||||
changeOrgan(myForm) {
|
||||
let form = this.form;
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.currItem) == '{}') {
|
||||
this.save(form);
|
||||
} else {
|
||||
form.id = this.currItem.id;
|
||||
this.update(form);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
organEdit(e) {
|
||||
this.currItem = e;
|
||||
this.form = {
|
||||
name: e.name,
|
||||
code: e.code
|
||||
}
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
async update(form) {
|
||||
const data = await updateOrgan(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
async save(form) {
|
||||
const data = await saveOrgan(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.id);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getOrganList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listData = data.data.listOrgan;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listData
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await updateStatusOrgan({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
185
h5-enginex-manager/src/components/page/systemManagement/resourceManagement.vue
Executable file
185
h5-enginex-manager/src/components/page/systemManagement/resourceManagement.vue
Executable file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<div >
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger">删除</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="code" width="200" label="资源编号">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="url" label="路径" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="icon" label="图标" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sort" label="排序" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="birth" label="创建时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.birth|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="editDiaglo(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<add-resource-dialog :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem"></add-resource-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getRsourceMenuList,
|
||||
resourceUpdateStatus
|
||||
} from '@/api/index.js'
|
||||
import AddResourceDialog from '../../models/addResourceDialog.vue'
|
||||
export default {
|
||||
name:'resourceManagement',
|
||||
components: {
|
||||
AddResourceDialog
|
||||
},
|
||||
//过滤
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
dialogFormVisible: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
this.getlist();
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 权限分配
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.id);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getRsourceMenuList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.listMenu;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await resourceUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
287
h5-enginex-manager/src/components/page/systemManagement/roleManagement.vue
Executable file
287
h5-enginex-manager/src/components/page/systemManagement/roleManagement.vue
Executable file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div>
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger" :disabled="multipleSelection.length>0?false:'disabled'">删除</el-button>
|
||||
<el-button @click="using(1)" type="success" :disabled="multipleSelection.length>0?false:'disabled'">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning" :disabled="multipleSelection.length>0?false:'disabled'">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="id" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleName" label="角色名" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'禁用':'启用'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="roleEdit(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="权限分配" placement="left">
|
||||
<el-button icon="el-icon-edit-outline" circle size="mini" @click="editDiaglo(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 权限分配 -->
|
||||
<authority-assignment-dialog :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem"
|
||||
:listOrganArr="listOrganArr"></authority-assignment-dialog>
|
||||
<!-- 添加编辑角色 -->
|
||||
<el-dialog title="角色配置" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changeRoleForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="角色名" prop="roleName" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.roleName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属公司" prop="organId" :rules="[
|
||||
{ required: true, message: '请选择公司', trigger: 'change'}
|
||||
]">
|
||||
<el-select v-model="form.organId" placeholder="请选择所属公司" :disabled="listOrganArr.length<2?true:false">
|
||||
<el-option v-for="item in listOrganArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="changeRole('changeRoleForm')">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getRoleList,
|
||||
roleUpdateStatus,
|
||||
getAllValidOrgan,
|
||||
saveRole,
|
||||
updateRole
|
||||
} from '@/api/index.js'
|
||||
import AuthorityAssignmentDialog from '../../models/authorityAssignmentDialog.vue'
|
||||
export default {
|
||||
name:'roleManagement',
|
||||
components: {
|
||||
AuthorityAssignmentDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
listOrganArr: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
roleName: "",
|
||||
organId: ""
|
||||
},
|
||||
currItem: {},
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
this.organList();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.currItem = {};
|
||||
this.dialogFormVisible = false;
|
||||
this.form = {
|
||||
roleName: "",
|
||||
organId: ""
|
||||
}
|
||||
this.$refs["changeRoleForm"].resetFields();
|
||||
},
|
||||
changeRole(myForm) {
|
||||
let form = this.form;
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.currItem) == '{}') {
|
||||
this.saveRole(form);
|
||||
} else {
|
||||
form.id = this.currItem.id;
|
||||
this.updateRole(form);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
roleEdit(e) {
|
||||
this.disabled = true;
|
||||
this.currItem = e;
|
||||
console.log(e);
|
||||
this.form = {
|
||||
roleName: e.roleName,
|
||||
organId: e.organId
|
||||
}
|
||||
this.dialogFormVisible = true;
|
||||
if (this.listOrganArr.length == 1) {
|
||||
this.form.organId = this.listOrganArr[0].id
|
||||
}
|
||||
},
|
||||
async updateRole(form) {
|
||||
const data = await updateRole(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
async saveRole(form) {
|
||||
const data = await saveRole(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.disabled = false;
|
||||
this.dataItem = {};
|
||||
this.dialogFormVisible = true;
|
||||
if (this.listOrganArr.length == 1) {
|
||||
this.form.organId = this.listOrganArr[0].id
|
||||
}
|
||||
},
|
||||
// 权限分配
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.id);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getRoleList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.listRole;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await roleUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
},
|
||||
async organList() {
|
||||
const data = await getAllValidOrgan({})
|
||||
if (data.status != "0") {
|
||||
this.listOrganArr = data.data
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
312
h5-enginex-manager/src/components/page/systemManagement/userManagement.vue
Executable file
312
h5-enginex-manager/src/components/page/systemManagement/userManagement.vue
Executable file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div>
|
||||
<el-button @click="add" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger" :disabled="multipleSelection.length>0?false:'disabled'">删除</el-button>
|
||||
<el-button @click="using(1)" type="success" :disabled="multipleSelection.length>0?false:'disabled'">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning" :disabled="multipleSelection.length>0?false:'disabled'">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="account" width="" label="账号">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sysRole.roleName" label="角色" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column
|
||||
prop="queryField"
|
||||
label="查询主键"
|
||||
width="200">
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column prop="employeeId" label="员工编号">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sysOrgan.id" width="" label="组织ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sysOrgan.name" width="" label="组织名称">
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.status==1?'启用':scope.row.status==0?'停用':'删除'}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'停用':scope.row.status==1?'启用':'删除'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="birth" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.birth|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="editDiaglo(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="left">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.id)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="修改密码" placement="right">
|
||||
<el-button icon="el-icon-edit-outline" circle size="mini" @click="showDialogChangePassword(scope.row.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
<!-- :page-size="pager.size" -->
|
||||
<!-- :total="pager.total" -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加/编辑 -->
|
||||
<!-- <add-block-white :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem"></add-block-white> -->
|
||||
<add-user-dialog :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem" :listOrganArr="listOrganArr"></add-user-dialog>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changePasswordForm">
|
||||
<el-form-item label="新密码" label-width="100px" prop="password" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.password" autocomplete="off" type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeChangePasswordForm()">取 消</el-button>
|
||||
<el-button type="primary" @click="changePassword('changePasswordForm')">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getUserList,
|
||||
userUpdateStatus,
|
||||
getAllValidOrgan,
|
||||
updateUserPassword
|
||||
} from '@/api/index.js'
|
||||
import AddUserDialog from '../../models/addUserDialog.vue'
|
||||
export default {
|
||||
name:'userManagement',
|
||||
components: {
|
||||
AddUserDialog
|
||||
},
|
||||
//过滤
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
listOrganArr: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
password: ""
|
||||
},
|
||||
currId: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
this.organList();
|
||||
},
|
||||
methods: {
|
||||
closeChangePasswordForm() {
|
||||
this.currId = "";
|
||||
this.dialogFormVisible = false;
|
||||
this.$refs["changePasswordForm"].resetFields();
|
||||
},
|
||||
changePassword(myForm) {
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm("确认修改", '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateUserPassword(this.currId, this.form.password);
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
showDialogChangePassword(id) {
|
||||
this.currId = id;
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
async updateUserPassword(id, password) {
|
||||
const data = await updateUserPassword({
|
||||
id: id,
|
||||
password: password
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.closeChangePasswordForm();
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
this.getlist();
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dialogVisible = true;
|
||||
// let e = "";
|
||||
// this.$router.push({path:'/blackWhiteManage/addBlackWihite/$'})
|
||||
},
|
||||
// 编辑
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
// this.$router.push({path:`/blackWhiteManage/addBlackWihite/${e.id}`})
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids);
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.id);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist(e) {
|
||||
const data = await getUserList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
const listUser = data.data.listUser;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await userUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
},
|
||||
async organList() {
|
||||
const data = await getAllValidOrgan({})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.listOrganArr = data.data
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user