|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-card shadow="never" class="mb16 filter-card">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" size="small">
|
|
|
+ <el-form-item label="配置名称" prop="configName">
|
|
|
+ <el-input v-model="queryParams.configName" placeholder="配置名称" clearable @keyup.enter.native="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="全部" clearable style="width:120px">
|
|
|
+ <el-option label="启用" :value="1" />
|
|
|
+ <el-option label="禁用" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['admin:dbConfig:add']">新增配置</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table border v-loading="loading" :data="configList" size="small" style="width:100%">
|
|
|
+ <el-table-column label="ID" prop="id" width="60" align="center" />
|
|
|
+ <el-table-column label="配置名称" prop="configName" min-width="120" />
|
|
|
+ <el-table-column label="数据库IP" prop="dbIp" width="140" align="center" />
|
|
|
+ <el-table-column label="端口" prop="dbPort" width="80" align="center" />
|
|
|
+ <el-table-column label="账号" prop="dbAccount" width="120" align="center" />
|
|
|
+ <el-table-column label="密码" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>******</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最大库数" prop="maxDbCount" width="90" align="center" />
|
|
|
+ <el-table-column label="已用库数" prop="currentDbCount" width="90" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :style="{color: scope.row.currentDbCount >= scope.row.maxDbCount ? '#f5222d' : '#52c41a'}">{{ scope.row.currentDbCount || 0 }} / {{ scope.row.maxDbCount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status == 1" type="success" size="mini">启用</el-tag>
|
|
|
+ <el-tag v-else type="danger" size="mini">禁用</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" prop="remark" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column label="操作" align="center" width="150" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="text" style="color:#f5222d" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
+
|
|
|
+ <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="560px" append-to-body destroy-on-close>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
|
|
|
+ <el-form-item label="配置名称" prop="configName">
|
|
|
+ <el-input v-model="form.configName" placeholder="如:主数据库服务器A" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库IP" prop="dbIp">
|
|
|
+ <el-input v-model="form.dbIp" placeholder="如:192.168.1.100" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库端口" prop="dbPort">
|
|
|
+ <el-input v-model="form.dbPort" placeholder="如:3306" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库账号" prop="dbAccount">
|
|
|
+ <el-input v-model="form.dbAccount" placeholder="如:root" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库密码" prop="dbPwd">
|
|
|
+ <el-input v-model="form.dbPwd" type="password" show-password placeholder="请输入数据库密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最大库数" prop="maxDbCount">
|
|
|
+ <el-input-number v-model="form.maxDbCount" :min="1" :max="9999" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
+ <el-radio :label="0">禁用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listDbConfig, getDbConfig, addDbConfig, updateDbConfig, delDbConfig } from '@/api/admin/dbConfig'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AdminDbConfig',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ showSearch: true,
|
|
|
+ total: 0,
|
|
|
+ configList: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ configName: null,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogTitle: '',
|
|
|
+ submitLoading: false,
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ configName: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
|
|
|
+ dbIp: [{ required: true, message: '请输入数据库IP', trigger: 'blur' }],
|
|
|
+ dbPort: [{ required: true, message: '请输入数据库端口', trigger: 'blur' }],
|
|
|
+ dbAccount: [{ required: true, message: '请输入数据库账号', trigger: 'blur' }],
|
|
|
+ dbPwd: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }],
|
|
|
+ maxDbCount: [{ required: true, message: '请输入最大库数', trigger: 'blur' }],
|
|
|
+ status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ listDbConfig(this.queryParams).then(response => {
|
|
|
+ this.configList = response.rows
|
|
|
+ this.total = response.total
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ resetFormFields() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ configName: '',
|
|
|
+ dbIp: '',
|
|
|
+ dbPort: '3306',
|
|
|
+ dbAccount: '',
|
|
|
+ dbPwd: '',
|
|
|
+ maxDbCount: 50,
|
|
|
+ currentDbCount: 0,
|
|
|
+ status: 1,
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.resetFormFields()
|
|
|
+ this.dialogTitle = '新增DB配置'
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.form) this.$refs.form.clearValidate()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ getDbConfig(row.id).then(response => {
|
|
|
+ this.form = { ...response.data }
|
|
|
+ if (!this.form.dbPwd) {
|
|
|
+ this.form.dbPwd = ''
|
|
|
+ }
|
|
|
+ this.dialogTitle = '编辑DB配置'
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.form) this.$refs.form.clearValidate()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs['form'].validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+ this.submitLoading = true
|
|
|
+ if (this.form.id) {
|
|
|
+ updateDbConfig(this.form).then(() => {
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getList()
|
|
|
+ }).finally(() => {
|
|
|
+ this.submitLoading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addDbConfig(this.form).then(() => {
|
|
|
+ this.$message.success('新增成功')
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getList()
|
|
|
+ }).finally(() => {
|
|
|
+ this.submitLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确定删除配置 [' + row.configName + '] 吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ delDbConfig(row.id).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mb8 { margin-bottom: 8px; }
|
|
|
+.mb16 { margin-bottom: 16px; }
|
|
|
+.filter-card { padding-bottom: 0; }
|
|
|
+</style>
|