ylrz_saas_his_scrm_adminUI/src/views/admin/dbConfig/index.vue

<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>