index.vue

<template>
  <el-row class="page-container dict">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane
        :label="item.name"
        :name="'index' + index"
        v-for="(item, index) in dbList"
        :key="item.id"
        >{{
      }}</el-tab-pane>
    </el-tabs>
    <el-container class="page-main" :gutter="20">
      <el-aside width="220px" class="left-content">
        <el-col :span="24" class="left-title">
          <span>数据库表</span>
          <span class="left-add" @click="handleAdd()" title="新增"
            ><i class="el-icon-circle-plus-outline"></i
          ></span>
        </el-col>
        <el-col :span="24" class="left-search">
          <el-input
            v-model.trim="searchVal"
            clearable
            :placeholder="placeholder"
          >
          </el-input>
        </el-col>
        <el-col
          class="dict-list"
          ref="dict"
          style="height: calc(100vh - 280px)"
        >
          <el-col
            v-for="(item, index) in tableData"
            :key="item.id"
            class="dict-item"
          >
            <span
              @click="handClick(index, item)"
              :class="{ active: index == isActive }"
              style="cursor: pointer; word-break: break-word"
            >
              {{ item.name }} <br />{{ item.code }}
            </span>
            <span class="item-del">
              <!-- <i class="el-icon-edit-outline" @click="handleAdd(item)"></i> -->
            </span>
          </el-col>
        </el-col>
      </el-aside>
      <el-main>
        <FieldList
          :table-code="tableCode"
          :tableId="tableId"
          :dbId="dbId"
        ></FieldList>
      </el-main>
    </el-container>

    <dialog-form
      ref="dialog"
      :width="'450px'"
      :title="formEdit.id ? '编辑' : '新增'"
      :form-data="formData"
      :form-edit="formEdit"
      @handleConfirm="handleConfirm"
    />
  </el-row>
</template>

<script>
import { getDbList, getTableList, addDbTable } from "@/api/database"
import FieldList from "./FieldList.vue"
export default {
  name: "FieldConfig",
  components: { FieldList },
  data() {
    return {
      dbId: null,
      activeName: "index0",
      dbList: [],
      tableList: [],
      tableCode: null,
      isActive: -1,
      tableId: "",
      searchVal: "",
      placeholder: "请输入关键字",
      listLoading: false,
      formEdit: {},
      formData: [
        {
          type: "input",
          label: "表名称",
          prop: "name",
          rules: [{ required: true, message: "表名称必填" }],
        },
        {
          type: "input",
          label: "表code",
          rules: [{ required: true, message: "表code必填" }],
          prop: "code",
          slot: "prepend",
          unit: "",
        },
        {
          type: "input",
          label: "说明",
          prop: "note",
        },
      ],
    }
  },
  computed: {
    tableData() {
      const list = this.tableList.filter(
        (_) => !this.searchVal || _.name.includes(this.searchVal)
      )
      this.isActive = this.getListIdx(list, this.tableId)
      return list
    },
    filterTableData() {
      return this.tabData.filter(
        (_) => !this.cacheForm.name || _.name.includes(this.cacheForm.name)
      )
    },
  },
  methods: {
    handleAdd(row = {}) {
      if (!this.dbId) {
        this.$message.error("未选择数据库")
        return
      }
      const db = this.dbList.find((_) => _.id === this.dbId)
      this.formData[1].unit = db.prefix + "_"
      this.formEdit = { ...row }
      this.$refs.dialog.open()
    },

    handleConfirm(form) {
      addDbTable({ ...form, dbId: this.dbId })
        .then((res) => {
          this.$message.success(res.msg)
          this.getTableList()
          this.$refs.dialog.close()
        })
        .finally(() => {
          this.$refs.dialog.loading = false
        })
    },
    handleTabClick({ index }) {
      this.dbId = this.dbList[index].id
      this.tableCode = null
      this.tableId = null
      this.getTableList()
    },
    getTableList() {
      if (!this.dbId) return
      getTableList(this.dbId).then((res) => {
        this.tableList = res.data
      })
    },

    // 点击左侧列表
    handClick(index, { code, name, id }) {
      this.name = name
      this.isActive = index
      this.tableCode = code
      this.tableId = id
    },

    getDbList() {
      getDbList().then((res) => {
        this.dbList = res.data
        if (this.dbList[0]) {
          this.dbId = this.dbList[0].id
          this.getTableList()
        }
      })
    },
    getListIdx(list, id) {
      let listIdx = -1
      for (var i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          listIdx = i
          break
        }
      }
      return listIdx
    },
  },
  mounted() {
    this.getDbList()
  },
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

.page-main {
  align-items: flex-start;
}
</style>