代码优化
This commit is contained in:
dqjdda
@@ -3,69 +3,47 @@
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<!-- 搜索 -->
|
||||
<el-input
|
||||
v-model="query.value"
|
||||
clearable
|
||||
placeholder="输入搜索内容"
|
||||
style="width: 200px"
|
||||
class="filter-item"
|
||||
@keyup.enter.native="toQuery"
|
||||
/>
|
||||
<el-select
|
||||
v-model="query.type"
|
||||
clearable
|
||||
placeholder="类型"
|
||||
class="filter-item"
|
||||
style="width: 130px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in queryTypeOptions"
|
||||
:key="item.key"
|
||||
:label="item.display_name"
|
||||
:value="item.key"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="query.blurry" clearable placeholder="模糊搜索" style="width: 200px" class="filter-item" @keyup.enter.native="toQuery" />
|
||||
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<el-button
|
||||
v-permission="['admin','database:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-search"
|
||||
@click="toQuery"
|
||||
>搜索</el-button>
|
||||
<!-- 新增 -->
|
||||
<div style="display: inline-block;margin: 0px 2px">
|
||||
<el-button
|
||||
v-permission="['admin','database:add']"
|
||||
class="filter-item"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="add"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showAddFormDialog"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
<!--表单组件-->
|
||||
<eForm ref="form" :is-add="isAdd" />
|
||||
<el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="530px">
|
||||
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
|
||||
<el-form-item label="数据库名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="连接地址" prop="jdbcUrl">
|
||||
<el-input v-model="form.jdbcUrl" style="width: 370px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="form.userName" style="width: 370px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="pwd">
|
||||
<el-input v-model="form.pwd" type="password" style="width: 370px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table v-loading="loading" :data="data" size="small" style="width: 100%">
|
||||
<!--<el-table-column prop="id" label="id" />-->
|
||||
<el-table-column prop="name" label="数据库名称" />
|
||||
<el-table-column prop="jdbcUrl" label="数据库连接地址" />
|
||||
<el-table-column prop="jdbcUrl" label="连接地址" />
|
||||
<el-table-column prop="userName" label="用户名" />
|
||||
<el-table-column
|
||||
v-if="checkPermission(['admin','database:edit','database:del'])"
|
||||
label="操作"
|
||||
width="150px"
|
||||
align="center"
|
||||
>
|
||||
<el-table-column v-if="checkPermission(['admin','database:edit','database:del'])" label="操作" width="150px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-permission="['admin','database:edit']"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="edit(scope.row)"
|
||||
/>
|
||||
<el-button v-permission="['admin','database:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
|
||||
<el-popover
|
||||
:ref="scope.row.id"
|
||||
v-permission="['admin','database:del']"
|
||||
@@ -75,12 +53,7 @@
|
||||
<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="subDelete(scope.row.id)"
|
||||
>确定</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>
|
||||
@@ -100,20 +73,29 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkPermission from '@/utils/permission'
|
||||
import initData from '@/mixins/initData'
|
||||
import { del } from '@/api/database'
|
||||
import eForm from './form'
|
||||
import crud from '@/mixins/crud'
|
||||
import crudDataBase from '@/api//mnt/database'
|
||||
export default {
|
||||
components: { eForm },
|
||||
mixins: [initData],
|
||||
mixins: [crud],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
queryTypeOptions: [
|
||||
{ key: 'name', display_name: '数据库名称' },
|
||||
{ key: 'jdbcUrl', display_name: '数据库连接地址' }
|
||||
]
|
||||
title: '数据库',
|
||||
crudMethod: { ...crudDataBase },
|
||||
form: { id: null, name: null, jdbcUrl: null, userName: null, pwd: null },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入数据库名称', trigger: 'blur' }
|
||||
],
|
||||
jdbcUrl: [
|
||||
{ required: true, message: '请输入数据库连接地址', trigger: 'blur' }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: '请输入数据库密码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -122,54 +104,9 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
checkPermission,
|
||||
beforeInit() {
|
||||
this.url = 'api/database'
|
||||
const sort = 'id,desc'
|
||||
this.params = { page: this.page, size: this.size, sort: sort }
|
||||
const query = this.query
|
||||
const type = query.type
|
||||
const value = query.value
|
||||
if (type && value) {
|
||||
this.params[type] = value
|
||||
}
|
||||
return true
|
||||
},
|
||||
subDelete(id) {
|
||||
this.delLoading = true
|
||||
del(id)
|
||||
.then(res => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.init()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
},
|
||||
add() {
|
||||
this.isAdd = true
|
||||
this.$refs.form.dialog = true
|
||||
},
|
||||
edit(data) {
|
||||
this.isAdd = false
|
||||
const _this = this.$refs.form
|
||||
_this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
jdbcUrl: data.jdbcUrl,
|
||||
userName: data.userName,
|
||||
pwd: data.pwd
|
||||
}
|
||||
_this.dialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user