Skip to content

F
front-backend
Commit 47d83846 by Elune
Options

代码优化

parent 2a763ea2
Showing with 383 additions and 555 deletions
src/components/Crud/crud.js
...@@ -149,7 +149,6 @@ function CRUD(options) { ...@@ -149,7 +149,6 @@ function CRUD(options) {
if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) { if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return return
} }
crud.resetForm()
crud.status.add = CRUD.STATUS.PREPARED crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form) callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form) callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
......
src/views/login.vue
<template> <template>
<div class="login" style="background-image:url(https://api.isoyu.com/bing_images.php)"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title"> <h3 class="title">
EL-ADMIN 后台管理系统 EL-ADMIN 后台管理系统
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode"> <img :src="codeUrl" alt="验证码" @click="getCode">
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;"> <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
...@@ -147,6 +147,7 @@ export default { ...@@ -147,6 +147,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image:url(https://api.isoyu.com/bing_images.php);
background-size: cover; background-size: cover;
} }
.title { .title {
......
src/views/mnt/app/index.vue
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.name" clearable placeholder="输入名称搜索" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.name" clearable placeholder="输入名称搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <el-date-picker
v-model="query.createTime" v-model="query.createTime"
:default-time="['00:00:00','23:59:59']" :default-time="['00:00:00','23:59:59']"
...@@ -15,17 +16,11 @@ ...@@ -15,17 +16,11 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
/> />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
<!-- 新增 --> </div>
<el-button <crudOperation :permission="permission">
v-permission="['admin','app:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增</el-button>
<el-button <el-button
slot="left"
v-permission="['admin','app:add']" v-permission="['admin','app:add']"
:disabled="!currentRow" :disabled="!currentRow"
class="filter-item" class="filter-item"
...@@ -33,10 +28,11 @@ ...@@ -33,10 +28,11 @@
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
@click="copy" @click="copy"
>复制新增</el-button> >复制</el-button>
</crudOperation>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="800px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
<el-form-item label="应用名称" prop="name"> <el-form-item label="应用名称" prop="name">
<el-input v-model="form.name" style="width: 670px" placeholder="部署后的文件或者目录名称，用于备份" /> <el-input v-model="form.name" style="width: 670px" placeholder="部署后的文件或者目录名称，用于备份" />
...@@ -61,72 +57,58 @@ ...@@ -61,72 +57,58 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button> <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%" @current-change="handleCurrentChange"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
<el-table-column prop="name" label="应用名称" /> <el-table-column type="selection" width="55" />
<el-table-column prop="port" label="端口号" /> <el-table-column v-if="columns.visible('name')" prop="name" label="应用名称" />
<el-table-column prop="uploadPath" label="上传目录" /> <el-table-column v-if="columns.visible('port')" prop="port" label="端口号" />
<el-table-column prop="deployPath" label="部署目录" /> <el-table-column v-if="columns.visible('uploadPath')" prop="uploadPath" label="上传目录" />
<el-table-column prop="backupPath" label="备份目录" /> <el-table-column v-if="columns.visible('deployPath')" prop="deployPath" label="部署目录" />
<el-table-column prop="createTime" label="创建日期"> <el-table-column v-if="columns.visible('backupPath')" prop="backupPath" label="备份目录" />
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkPermission(['admin','app:edit','app:del'])" label="操作" width="150px" align="center"> <el-table-column v-permission="['admin','app:edit','app:del']" label="操作" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-permission="['admin','app:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" /> <udOperation
<el-popover :data="scope.row"
:ref="scope.row.id" :permission="permission"
v-permission="['admin','app:del']" />
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudApp from '@/api/mnt/app' import crudApp from '@/api/mnt/app'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }})
const defaultForm = { id: null, name: null, port: 8080, uploadPath: '/opt/upload', deployPath: '/opt/app', backupPath: '/opt/backup', startScript: null, deployScript: null }
export default { export default {
mixins: [crud], name: 'App',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() { data() {
return { return {
title: '应用',
crudMethod: { ...crudApp },
currentRow: null, currentRow: null,
form: { permission: {
id: null, add: ['admin', 'app:add'],
name: null, edit: ['admin', 'app:edit'],
port: 8080, del: ['admin', 'app:del']
uploadPath: '/opt/upload',
deployPath: '/opt/app',
backupPath: '/opt/backup',
startScript: null,
deployScript: null
}, },
rules: { rules: {
name: [ name: [
...@@ -153,23 +135,17 @@ export default { ...@@ -153,23 +135,17 @@ export default {
} }
} }
}, },
created() {
this.$nextTick(() => {
this.init()
})
},
methods: { methods: {
beforeInit() {
this.url = 'api/app'
return true
},
copy() { copy() {
this.isAdd = true for (const key in this.currentRow) {
this.dialog = true this.form[key] = this.currentRow[key]
this.form = this.currentRow }
this.form.id = null
this.form.createTime = null
this.crud.toAdd()
}, },
handleCurrentChange(row) { handleCurrentChange(row) {
this.currentRow = row this.currentRow = JSON.parse(JSON.stringify(row))
} }
} }
} }
......
src/views/mnt/database/index.vue
...@@ -2,20 +2,14 @@ ...@@ -2,20 +2,14 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable placeholder="模糊搜索" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.blurry" clearable placeholder="模糊搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
<!-- 新增 --> </div>
<el-button <crudOperation :permission="permission">
v-permission="['admin','database:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增
</el-button>
<el-button <el-button
slot="right"
v-permission="['admin','database:add']" v-permission="['admin','database:add']"
class="filter-item" class="filter-item"
size="mini" size="mini"
...@@ -24,10 +18,11 @@ ...@@ -24,10 +18,11 @@
@click="execute" @click="execute"
>执行脚本 >执行脚本
</el-button> </el-button>
</crudOperation>
</div> </div>
<!--表单组件--> <!--表单组件-->
<eForm ref="execute" :database-info="currentRow" /> <eForm ref="execute" :database-info="currentRow" />
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="530px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="530px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
<el-form-item label="数据库名称" prop="name"> <el-form-item label="数据库名称" prop="name">
<el-input v-model="form.name" style="width: 370px" /> <el-input v-model="form.name" style="width: 370px" />
...@@ -44,62 +39,57 @@ ...@@ -44,62 +39,57 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button> <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" highlight-current-row stripe style="width: 100%" @current-change="handleCurrentChange"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row stripe style="width: 100%" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
<el-table-column prop="name" label="数据库名称" width="180" /> <el-table-column type="selection" width="55" />
<el-table-column prop="jdbcUrl" label="连接地址" /> <el-table-column v-if="columns.visible('name')" prop="name" label="数据库名称" />
<el-table-column prop="userName" label="用户名" width="100" /> <el-table-column v-if="columns.visible('jdbcUrl')" prop="jdbcUrl" label="连接地址" />
<el-table-column v-if="checkPermission(['admin','database:edit','database:del'])" label="操作" width="150px" align="center"> <el-table-column v-if="columns.visible('userName')" prop="userName" label="用户名" />
<el-table-column v-permission="['admin','database:edit','database:del']" label="操作" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-permission="['admin','database:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" /> <udOperation
<el-popover :data="scope.row"
:ref="scope.row.id" :permission="permission"
v-permission="['admin','database:del']" />
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudDatabase from '@/api/mnt/database' import crudDatabase from '@/api/mnt/database'
import { testDbConnect } from '@/api/mnt/connect' import { testDbConnect } from '@/api/mnt/connect'
import eForm from './execute' import eForm from './execute'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }})
const defaultForm = { id: null, name: null, jdbcUrl: null, userName: null, pwd: null }
export default { export default {
components: { eForm }, name: 'DataBase',
mixins: [crud], components: { eForm, pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() { data() {
return { return {
title: '数据库',
crudMethod: { ...crudDatabase },
currentRow: {}, currentRow: {},
selectIndex: '', selectIndex: '',
databaseInfo: '', databaseInfo: '',
form: { id: null, name: null, jdbcUrl: null, userName: null, pwd: null }, loading: false,
permission: {
add: ['admin', 'database:add'],
edit: ['admin', 'database:edit'],
del: ['admin', 'database:del']
},
rules: { rules: {
name: [ name: [
{ required: true, message: '请输入数据库名称', trigger: 'blur' } { required: true, message: '请输入数据库名称', trigger: 'blur' }
...@@ -116,27 +106,14 @@ export default { ...@@ -116,27 +106,14 @@ export default {
} }
} }
}, },
created() {
this.$nextTick(() => {
this.init()
})
},
methods: { methods: {
beforeInit() {
this.url = 'api/database'
return true
},
testConnectDatabase() { testConnectDatabase() {
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true
testDbConnect(this.form).then((res) => { testDbConnect(this.form).then((res) => {
this.loading = false this.loading = false
this.$notify({ crud.notify(res ? '连接成功' : '连接失败', res ? 'success' : 'error')
title: res ? '连接成功' : '连接失败',
type: res ? 'success' : 'error',
duration: 2500
})
}).catch(() => { }).catch(() => {
this.loading = false this.loading = false
}) })
......
src/views/mnt/deploy/index.vue
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.appName" clearable placeholder="输入应用名称查询" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.appName" clearable placeholder="输入应用名称查询" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <el-date-picker
v-model="query.createTime" v-model="query.createTime"
:default-time="['00:00:00','23:59:59']" :default-time="['00:00:00','23:59:59']"
...@@ -15,19 +16,13 @@ ...@@ -15,19 +16,13 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
/> />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
<!-- 新增 --> </div>
<el-button <crudOperation :permission="permission">
v-permission="['admin','deploy:add']" <template slot="right">
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增
</el-button>
<el-button <el-button
v-permission="['admin','deploy:add']" v-permission="['admin','deploy:add']"
:disabled="!selectIndex"
class="filter-item" class="filter-item"
size="mini" size="mini"
type="primary" type="primary"
...@@ -37,6 +32,7 @@ ...@@ -37,6 +32,7 @@
</el-button> </el-button>
<el-button <el-button
v-permission="['admin','deploy:add']" v-permission="['admin','deploy:add']"
:disabled="!selectIndex"
class="filter-item" class="filter-item"
size="mini" size="mini"
type="primary" type="primary"
...@@ -46,6 +42,7 @@ ...@@ -46,6 +42,7 @@
</el-button> </el-button>
<el-button <el-button
v-permission="['admin','deploy:add']" v-permission="['admin','deploy:add']"
:disabled="!selectIndex"
class="filter-item" class="filter-item"
size="mini" size="mini"
type="success" type="success"
...@@ -55,6 +52,7 @@ ...@@ -55,6 +52,7 @@
</el-button> </el-button>
<el-button <el-button
v-permission="['admin','deploy:add']" v-permission="['admin','deploy:add']"
:disabled="!selectIndex"
class="filter-item" class="filter-item"
size="mini" size="mini"
type="danger" type="danger"
...@@ -64,6 +62,7 @@ ...@@ -64,6 +62,7 @@
</el-button> </el-button>
<el-button <el-button
v-permission="['admin','deploy:add']" v-permission="['admin','deploy:add']"
:disabled="!selectIndex"
class="filter-item" class="filter-item"
size="mini" size="mini"
type="warning" type="warning"
...@@ -71,9 +70,11 @@ ...@@ -71,9 +70,11 @@
@click="deploy" @click="deploy"
>一键部署 >一键部署
</el-button> </el-button>
</template>
</crudOperation>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="500px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="应用" prop="app.id"> <el-form-item label="应用" prop="app.id">
<el-select v-model.number="form.app.id" placeholder="请选择" style="width: 370px"> <el-select v-model.number="form.app.id" placeholder="请选择" style="width: 370px">
...@@ -87,78 +88,60 @@ ...@@ -87,78 +88,60 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button> <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--统还原组件--> <!--统还原组件-->
<fForm ref="sysRestore" :key="times" :app-name="appName" /> <fForm ref="sysRestore" :key="times" :app-name="appName" />
<dForm ref="deploy" /> <dForm ref="deploy" />
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" highlight-current-row stripe style="width: 100%" @current-change="handleCurrentChange"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row stripe style="width: 100%" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
<el-table-column prop="app.name" label="应用名称" /> <el-table-column type="selection" width="55" />
<el-table-column prop="servers" label="服务器列表" /> <el-table-column v-if="columns.visible('app.name')" prop="app.name" label="应用名称" />
<el-table-column prop="createTime" label="创建日期"> <el-table-column v-if="columns.visible('servers')" prop="servers" label="服务器列表" />
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkPermission(['admin','deploy:edit','deploy:del'])" label="操作" width="150px" align="center"> <el-table-column v-permission="['admin','deploy:edit','deploy:del']" label="操作" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-permission="['admin','deploy:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" /> <udOperation
<el-popover :data="scope.row"
:ref="scope.row.id" :permission="permission"
v-permission="['admin','deploy:del']" />
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right;margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudDeploy from '@/api/mnt/deploy' import crudDeploy from '@/api/mnt/deploy'
import dForm from './deploy' import dForm from './deploy'
import fForm from './sysRestore' import fForm from './sysRestore'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }})
const defaultForm = { id: null, app: { id: null }, deploys: [] }
export default { export default {
components: { dForm, fForm }, components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation },
mixins: [crud], mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() { data() {
return { return {
title: '部署', currentRow: {}, selectIndex: '', appName: '', urlHistory: '',
crudMethod: { ...crudDeploy }, times: 0, appId: '', deployId: '', apps: [], servers: [],
currentRow: {}, permission: {
selectIndex: '', add: ['admin', 'deploy:add'],
appName: '', edit: ['admin', 'deploy:edit'],
urlHistory: '', del: ['admin', 'deploy:del']
times: 0,
appId: '',
deployId: '',
apps: [],
servers: [],
form: {
id: null,
app: { id: null },
deploys: []
}, },
rules: { rules: {
'app.id': [ 'app.id': [
...@@ -170,32 +153,22 @@ export default { ...@@ -170,32 +153,22 @@ export default {
} }
} }
}, },
created() {
this.$nextTick(() => {
this.init()
})
},
methods: { methods: {
beforeInit() { [CRUD.HOOK.beforeRefresh]() {
this.url = 'api/deploy'
this.selectIndex = '' this.selectIndex = ''
return true return true
}, },
// 打开新增弹窗前做的操作 // 新增编辑前做的操作
beforeShowAddForm() { [CRUD.HOOK.beforeToCU](crud, form) {
this.initSelect()
},
// 打开编辑弹窗前做的操作
beforeShowEditForm(data) {
this.initSelect() this.initSelect()
const deploys = [] const deploys = []
data.deploys.forEach(function(deploy, index) { form.deploys.forEach(function(deploy, index) {
deploys.push(deploy.id) deploys.push(deploy.id)
}) })
this.form.deploys = deploys this.form.deploys = deploys
}, },
// 提交前 // 提交前
beforeSubmitMethod() { [CRUD.HOOK.beforeSubmit]() {
const deploys = [] const deploys = []
this.form.deploys.forEach(function(data, index) { this.form.deploys.forEach(function(data, index) {
const deploy = { id: data } const deploy = { id: data }
...@@ -205,19 +178,11 @@ export default { ...@@ -205,19 +178,11 @@ export default {
return true return true
}, },
deploy() { deploy() {
if (!this.selectIndex) {
this.$message.error('请先选择服务')
} else {
this.$refs.deploy.dialog = true this.$refs.deploy.dialog = true
this.$refs.deploy.deployInfo = this.currentRow this.$refs.deploy.deployInfo = this.currentRow
}
}, },
sysRestore() { sysRestore() {
if (!this.selectIndex) {
this.$message.error('请先选择服务')
} else {
this.$refs.sysRestore.dialog = true this.$refs.sysRestore.dialog = true
}
}, },
handleCurrentChange(row) { handleCurrentChange(row) {
this.currentRow = row this.currentRow = row
...@@ -228,46 +193,34 @@ export default { ...@@ -228,46 +193,34 @@ export default {
this.deployId = !row ? null : row.id this.deployId = !row ? null : row.id
}, },
startServer() { startServer() {
if (!this.selectIndex) { crudDeploy.startServer(JSON.stringify(this.currentRow))
this.$message.error('请先选择服务')
} else {
this.crudMethod.startServer(JSON.stringify(this.currentRow))
.then(res => { .then(res => {
}) })
.catch(err => { .catch(err => {
console.log('error:' + err.response.data.message) console.log('error:' + err.response.data.message)
}) })
}
}, },
stopServer() { stopServer() {
if (!this.selectIndex) { crudDeploy.stopServer(JSON.stringify(this.currentRow))
this.$message.error('请先选择服务')
} else {
this.crudMethod.stopServer(JSON.stringify(this.currentRow))
.then(res => { .then(res => {
}) })
.catch(err => { .catch(err => {
console.log('error:' + err.response.data.message) console.log('error:' + err.response.data.message)
}) })
}
}, },
serverStatus() { serverStatus() {
if (!this.selectIndex) { crudDeploy.serverStatus(JSON.stringify(this.currentRow))
this.$message.error('请先选择服务')
} else {
this.crudMethod.serverStatus(JSON.stringify(this.currentRow))
.then(res => { .then(res => {
}) })
.catch(err => { .catch(err => {
console.log('error:' + err.response.data.message) console.log('error:' + err.response.data.message)
}) })
}
}, },
initSelect() { initSelect() {
this.crudMethod.getApps().then(res => { crudDeploy.getApps().then(res => {
this.apps = res.content this.apps = res.content
}) })
this.crudMethod.getServers().then(res => { crudDeploy.getServers().then(res => {
this.servers = res.content this.servers = res.content
}) })
} }
......
src/views/mnt/deploy/sysRestore.vue
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
size="small" size="small"
class="date-item" class="date-item"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="部署开始日期" start-placeholder="开始日期"
end-placeholder="部署结束日期" end-placeholder="结束日期"
/> />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
</div> </div>
......
src/views/mnt/deployHistory/index.vue
...@@ -2,17 +2,21 @@ ...@@ -2,17 +2,21 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable placeholder="输入搜索内容" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.blurry" clearable placeholder="输入搜索内容" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission" />
</div> </div>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%" @selection-change="crud.selectionChangeHandler">
<el-table-column prop="appName" label="应用名称" /> <el-table-column type="selection" width="55" />
<el-table-column prop="ip" label="部署IP" /> <el-table-column v-if="columns.visible('appName')" prop="appName" label="应用名称" />
<el-table-column prop="deployDate" label="部署时间" /> <el-table-column v-if="columns.visible('ip')" prop="ip" label="部署IP" />
<el-table-column prop="deployUser" label="部署人员" /> <el-table-column v-if="columns.visible('deployDate')" prop="deployDate" label="部署时间" />
<el-table-column v-if="checkPermission(['admin','deployHistory:del'])" label="操作" width="100px" align="center"> <el-table-column v-if="columns.visible('deployUser')" prop="deployUser" label="部署人员" />
<el-table-column v-permission="['admin','deployHistory:del']" label="操作" width="100px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover <el-popover
:ref="scope.row.id" :ref="scope.row.id"
...@@ -31,38 +35,51 @@ ...@@ -31,38 +35,51 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import { del } from '@/api/mnt/deployHistory' import { del } from '@/api/mnt/deployHistory'
import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }})
export default { export default {
mixins: [crud], name: 'DeployHistory',
components: { pagination, crudOperation, rrOperation },
mixins: [presenter(defaultCrud), header()],
data() { data() {
return { return {
title: '部署历史', delLoading: false,
crudMethod: { del } permission: {
del: ['admin', 'deployHistory:del']
}
} }
}, },
created() { created() {
this.$nextTick(() => { this.crud.optShow = {
this.init() add: false,
}) edit: false,
del: true,
download: true
}
}, },
methods: { methods: {
beforeInit() { delMethod(id) {
this.url = 'api/deployHistory' this.delLoading = true
return true del(id).then(() => {
this.delLoading = false
this.$refs[id].doClose()
this.crud.dleChangePage(1)
this.crud.delSuccessNotify()
this.crud.toQuery()
}).catch(() => {
this.delLoading = false
this.$refs[id].doClose()
})
} }
} }
} }
......
src/views/mnt/server/index.vue
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.id" clearable placeholder="输入名称或IP搜索" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.id" clearable placeholder="输入名称或IP搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <el-date-picker
v-model="query.createTime" v-model="query.createTime"
:default-time="['00:00:00','23:59:59']" :default-time="['00:00:00','23:59:59']"
...@@ -15,20 +16,12 @@ ...@@ -15,20 +16,12 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
/> />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
<!-- 新增 --> </div>
<el-button <crudOperation :permission="permission" />
v-permission="['admin','serverDeploy:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增
</el-button>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="470px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="470px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="55px"> <el-form ref="form" :model="form" :rules="rules" size="small" label-width="55px">
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 370px" /> <el-input v-model="form.name" style="width: 370px" />
...@@ -48,66 +41,63 @@ ...@@ -48,66 +41,63 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button> <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%" @selection-change="crud.selectionChangeHandler">
<el-table-column prop="name" label="名称" /> <el-table-column type="selection" width="55" />
<el-table-column prop="ip" label="IP" /> <el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
<el-table-column prop="port" label="端口" /> <el-table-column v-if="columns.visible('ip')" prop="ip" label="IP" />
<el-table-column prop="account" label="账号" /> <el-table-column v-if="columns.visible('port')" prop="port" label="端口" />
<el-table-column prop="createTime" label="创建日期"> <el-table-column v-if="columns.visible('account')" prop="account" label="账号" />
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkPermission(['admin','serverDeploy:edit','serverDeploy:del'])" label="操作" width="150px" align="center"> <el-table-column v-permission="['admin','serverDeploy:edit','serverDeploy:del']" label="操作" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-permission="['admin','serverDeploy:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" /> <udOperation
<el-popover :data="scope.row"
:ref="scope.row.id" :permission="permission"
v-permission="['admin','serverDeploy:del']" />
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudServer from '@/api/mnt/serverDeploy' import crudServer from '@/api/mnt/serverDeploy'
import { testServerConnect } from '@/api/mnt/connect' import { testServerConnect } from '@/api/mnt/connect'
import { validateIP } from '@/utils/validate' import { validateIP } from '@/utils/validate'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }})
const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
export default { export default {
mixins: [crud], name: 'Server',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() { data() {
return { return {
title: '服务器',
crudMethod: { ...crudServer },
accountList: [], accountList: [],
accountMap: {}, accountMap: {},
form: { id: null, name: null, ip: null, port: 22, account: 'root', password: null }, loading: false,
permission: {
add: ['admin', 'serverDeploy:add'],
edit: ['admin', 'serverDeploy:edit'],
del: ['admin', 'serverDeploy:del']
},
rules: { rules: {
name: [ name: [
{ required: true, message: '请输入名称', trigger: 'blur' } { required: true, message: '请输入名称', trigger: 'blur' }
...@@ -128,16 +118,7 @@ export default { ...@@ -128,16 +118,7 @@ export default {
} }
} }
}, },
created() {
this.$nextTick(() => {
this.init()
})
},
methods: { methods: {
async beforeInit() {
this.url = 'api/serverDeploy'
return true
},
testConnectServer() { testConnectServer() {
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
......
src/views/monitor/log/errorLog.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<Search :query="query" /> <div class="head-container">
<Search />
<crudOperation>
<el-button
slot="left"
class="filter-item"
type="danger"
icon="el-icon-delete"
size="mini"
:loading="crud.delAllLoading"
@click="confirmDelAll()"
>
清空
</el-button> v-if="columns.visible('username')"
</crudOperation>
</div>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%;"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand"> <el-form label-position="left" inline class="demo-table-expand">
...@@ -15,17 +30,17 @@ ...@@ -15,17 +30,17 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="username" label="用户名" /> <el-table-column v-if="columns.visible('username')" prop="username" label="用户名" />
<el-table-column prop="requestIp" label="IP" /> <el-table-column v-if="columns.visible('requestIp')" prop="requestIp" label="IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" /> <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="description" label="描述" /> <el-table-column v-if="columns.visible('description')" prop="description" label="描述" />
<el-table-column prop="browser" label="浏览器" /> <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" />
<el-table-column prop="createTime" label="创建日期"> <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="异常详情" width="100px"> <el-table-column label="异常详情" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button> <el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button>
</template> </template>
...@@ -35,42 +50,37 @@ ...@@ -35,42 +50,37 @@
<pre v-highlightjs="errorInfo"><code class="java" /></pre> <pre v-highlightjs="errorInfo"><code class="java" /></pre>
</el-dialog> </el-dialog>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import { getErrDetail, delAllError } from '@/api/monitor/log' import { getErrDetail, delAllError } from '@/api/monitor/log'
import Search from './search' import Search from './search'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '异常日志', url: 'api/logs/error' })
export default { export default {
name: 'ErrorLog', name: 'ErrorLog',
components: { Search }, components: { Search, crudOperation, pagination },
mixins: [crud], mixins: [presenter(defaultCrud)],
data() { data() {
return { return {
errorInfo: '', dialog: false errorInfo: '', dialog: false
} }
}, },
created() { created() {
this.$nextTick(() => { this.crud.optShow = {
this.init() add: false,
}) edit: false,
del: false,
download: true
}
}, },
methods: { methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/logs/error'
this.params['logType'] = 'ERROR'
return true
},
// 获取异常详情 // 获取异常详情
info(id) { info(id) {
this.dialog = true this.dialog = true
...@@ -79,30 +89,23 @@ export default { ...@@ -79,30 +89,23 @@ export default {
}) })
}, },
confirmDelAll() { confirmDelAll() {
this.delAllLoading = true this.$confirm(`确认清空所有异常日志吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.crud.delAllLoading = true
delAllError().then(res => { delAllError().then(res => {
this.delAllLoading = false this.crud.delAllLoading = false
this.$children.forEach(children => { this.crud.dleChangePage(1)
if (children.$refs.del_all) { this.crud.delSuccessNotify()
children.$refs.del_all.doClose() this.crud.toQuery()
}
})
this.dleChangePage()
this.init()
this.$notify({
title: '删除成功',
type: 'success',
duration: 2500
})
}).catch(err => { }).catch(err => {
this.delAllLoading = false this.crud.delAllLoading = false
this.$children.forEach(children => {
if (children.$refs.del_all) {
children.$refs.del_all.doClose()
}
})
console.log(err.response.data.message) console.log(err.response.data.message)
}) })
}).catch(() => {
})
} }
} }
} }
......
src/views/monitor/log/index.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<Search :query="query" /> <div class="head-container">
<Search />
<crudOperation>
<el-button
slot="left"
class="filter-item"
type="danger"
icon="el-icon-delete"
size="mini"
:loading="crud.delAllLoading"
@click="confirmDelAll()"
>
清空
</el-button>
</crudOperation>
</div>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%;"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand"> <el-form label-position="left" inline class="demo-table-expand">
...@@ -15,81 +30,69 @@ ...@@ -15,81 +30,69 @@
</el-form> </el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="username" label="用户名" /> <el-table-column v-if="columns.visible('username')" prop="username" label="用户名" />
<el-table-column prop="requestIp" label="IP" /> <el-table-column v-if="columns.visible('requestIp')" prop="requestIp" label="IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" /> <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="description" label="描述" /> <el-table-column v-if="columns.visible('description')" prop="description" label="描述" />
<el-table-column prop="browser" label="浏览器" /> <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" />
<el-table-column prop="time" label="请求耗时" align="center"> <el-table-column v-if="columns.visible('time')" prop="time" label="请求耗时" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag> <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag> <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag> <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建日期" width="180px"> <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期" width="180px">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import Search from './search' import Search from './search'
import { delAllInfo } from '@/api/monitor/log' import { delAllInfo } from '@/api/monitor/log'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '日志', url: 'api/logs' })
export default { export default {
name: 'Log', name: 'Log',
components: { Search }, components: { Search, crudOperation, pagination },
mixins: [crud], mixins: [presenter(defaultCrud)],
created() { created() {
this.$nextTick(() => { this.crud.optShow = {
this.init() add: false,
}) edit: false,
del: false,
download: true
}
}, },
// 获取数据前设置好接口地址
methods: { methods: {
beforeInit() {
this.url = 'api/logs'
this.params['logType'] = 'INFO'
return true
},
confirmDelAll() { confirmDelAll() {
this.delAllLoading = true this.$confirm(`确认清空所有操作日志吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.crud.delAllLoading = true
delAllInfo().then(res => { delAllInfo().then(res => {
this.delAllLoading = false this.crud.delAllLoading = false
this.$children.forEach(children => { this.crud.dleChangePage(1)
if (children.$refs.del_all) { this.crud.delSuccessNotify()
children.$refs.del_all.doClose() this.crud.toQuery()
}
})
this.dleChangePage()
this.init()
this.$notify({
title: '删除成功',
type: 'success',
duration: 2500
})
}).catch(err => { }).catch(err => {
this.delAllLoading = false this.crud.delAllLoading = false
this.$children.forEach(children => {
if (children.$refs.del_all) {
children.$refs.del_all.doClose()
}
})
console.log(err.response.data.message) console.log(err.response.data.message)
}) })
}).catch(() => {
})
} }
} }
} }
......
src/views/monitor/log/search.vue
<template> <template>
<div class="head-container"> <div v-if="crud.props.searchToggle">
<el-input <el-input
v-model="query.blurry" v-model="query.blurry"
clearable clearable
...@@ -19,53 +19,17 @@ ...@@ -19,53 +19,17 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
/> />
<el-button <rrOperation
class="filter-item" :crud="crud"
size="mini" />
type="success"
icon="el-icon-search"
@click="$parent.toQuery"
>搜索</el-button>
<!-- 导出 -->
<el-button
:loading="$parent.downloadLoading"
size="mini"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="$parent.downloadMethod"
>导出</el-button>
<el-button
slot="reference"
v-popover:del_all
:loading="$parent.delAllLoading"
type="danger"
size="mini"
class="filter-item"
icon="el-icon-delete"
>清空</el-button>
<el-popover ref="del_all" placement="top" width="200" trigger="click">
<p>确定删除所有数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs['del_all'].doClose()">取消</el-button>
<el-button
:loading="$parent.delAllLoading"
type="primary"
size="mini"
@click="$parent.confirmDelAll"
>确定</el-button>
</div>
</el-popover>
</div> </div>
</template> </template>
<script> <script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
export default { export default {
props: { components: { rrOperation },
query: { mixins: [header()]
type: Object,
required: true
}
}
} }
</script> </script>
src/views/monitor/online/index.vue
...@@ -77,6 +77,7 @@ export default { ...@@ -77,6 +77,7 @@ export default {
} }
}, },
created() { created() {
this.crud.msg.del = '强退成功！'
this.crud.optShow = { this.crud.optShow = {
add: false, add: false,
edit: false, edit: false,
...@@ -96,8 +97,8 @@ export default { ...@@ -96,8 +97,8 @@ export default {
del(key).then(() => { del(key).then(() => {
this.delLoading = false this.delLoading = false
this.$refs[index].doClose() this.$refs[index].doClose()
this.dleChangePage() this.crud.dleChangePage(1)
this.notify('踢出成功', 'success') this.crud.delSuccessNotify()
this.crud.toQuery() this.crud.toQuery()
}).catch(() => { }).catch(() => {
this.delLoading = false this.delLoading = false
......
src/views/monitor/server/index.vue
...@@ -2,31 +2,15 @@ ...@@ -2,31 +2,15 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者服务地址" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者服务地址" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <rrOperation :crud="crud" />
<!-- 新增 --> </div>
<el-button <crudOperation :permission="permission" />
v-permission="['admin','server:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增
</el-button>
<!-- 刷新 -->
<el-button
size="mini"
class="filter-item"
type="warning"
icon="el-icon-refresh"
@click="toQuery"
>刷新
</el-button>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 370px;" /> <el-input v-model="form.name" style="width: 370px;" />
...@@ -42,13 +26,14 @@ ...@@ -42,13 +26,14 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button> <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%;"> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column label="状态" width="50px"> <el-table-column type="selection" width="55" />
<el-table-column v-if="columns.visible('state')" prop="state" label="状态" width="50px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
:type="scope.row.state === '1' ? 'success' : 'info'" :type="scope.row.state === '1' ? 'success' : 'info'"
...@@ -59,12 +44,12 @@ ...@@ -59,12 +44,12 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称" /> <el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
<el-table-column prop="address" label="地址" /> <el-table-column v-if="columns.visible('address')" prop="address" label="地址" />
<el-table-column prop="port" label="端口" width="80px" align="center" /> <el-table-column v-if="columns.visible('port')" prop="port" label="端口" width="80px" align="center" />
<el-table-column :formatter="formatCpuRate" prop="cpuRate" label="CPU使用率" width="100px" align="center" /> <el-table-column v-if="columns.visible('cpuRate')" :formatter="formatCpuRate" prop="cpuRate" label="CPU使用率" width="100px" align="center" />
<el-table-column prop="cpuCore" label="CPU内核数" width="100px" align="center" /> <el-table-column v-if="columns.visible('cpuCore')" prop="cpuCore" label="CPU内核数" width="100px" align="center" />
<el-table-column label="物理内存" align="center"> <el-table-column v-if="columns.visible('memTotal')" prop="memTotal" label="物理内存" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-row> <el-row>
<el-col :span="24">{{ formatMem(scope.row) }}</el-col> <el-col :span="24">{{ formatMem(scope.row) }}</el-col>
...@@ -76,7 +61,7 @@ ...@@ -76,7 +61,7 @@
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :formatter="formatDisk" label="磁盘使用情况" align="center"> <el-table-column v-if="columns.visible('diskTotal')" prop="diskTotal" :formatter="formatDisk" label="磁盘使用情况" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-row> <el-row>
<el-col :span="24">{{ formatDisk(scope.row) }}</el-col> <el-col :span="24">{{ formatDisk(scope.row) }}</el-col>
...@@ -88,7 +73,7 @@ ...@@ -88,7 +73,7 @@
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="交换空间" align="center"> <el-table-column v-if="columns.visible('swapTotal')" prop="swapTotal" label="交换空间" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-row> <el-row>
<el-col :span="24">{{ formatSwap(scope.row) }}</el-col> <el-col :span="24">{{ formatSwap(scope.row) }}</el-col>
...@@ -100,62 +85,41 @@ ...@@ -100,62 +85,41 @@
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkPermission(['admin','server:edit','server:del'])" label="操作" width="150px" align="center"> <el-table-column v-permission="['admin','server:edit','server:del']" label="操作" width="150px" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-permission="['admin','server:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" /> <udOperation
<el-popover :data="scope.row"
:ref="scope.row.id" :permission="permission"
v-permission="['admin','server:del']" />
placement="top" </template> v-if="columns.visible('name')"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<el-pagination <pagination />
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudServer from '@/api/monitor/server' import crudServer from '@/api/monitor/server'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '监控', url: 'api/server', sort: 'sort,asc', crudMethod: { ...crudServer }})
const defaultForm = { id: null, name: null, ip: null, port: 8777, state: null, cpuRate: null, cpuCore: null, memTotal: null, memUsed: null, diskTotal: null, diskUsed: null, swapTotal: null, swapUsed: null, sort: 999 }
export default { export default {
name: 'ServerMonitor', name: 'ServerMonitor',
mixins: [crud], components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() { data() {
return { return {
title: '监控', permission: {
crudMethod: { ...crudServer }, add: ['admin', 'server:add'],
form: { edit: ['admin', 'server:edit'],
id: null, del: ['admin', 'server:del']
name: null,
ip: null,
port: 8777,
state: null,
cpuRate: null,
cpuCore: null,
memTotal: null,
memUsed: null,
diskTotal: null,
diskUsed: null,
swapTotal: null,
swapUsed: null,
sort: 999
}, },
rules: { rules: {
name: [ name: [
...@@ -170,18 +134,7 @@ export default { ...@@ -170,18 +134,7 @@ export default {
} }
} }
}, },
created() {
this.$nextTick(() => {
this.init()
})
},
methods: { methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/server'
this.sort = 'sort,asc'
return true
},
formatCpuRate(row, column) { formatCpuRate(row, column) {
const value = row.cpuRate const value = row.cpuRate
if (!value) { if (!value) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment