xps-web-v5/src/views/database/data/components/table_data.vue

<script lang="ts" setup name="table_data">
import { getTableDataByList, getTableFieldsByList } from '@/api/database/dbApi'

interface TreeNode {
  label: string
  isLeaf: boolean
  children?: TreeNode[]
}

const state = reactive({
  layoutMode: 'table',
  sqlStatement: '',
  treeData: [] as TreeNode[],
  dataList: [],
  curPage: 1,
})

const getTableFields = async (tableName = '') => {
  const res = await getTableFieldsByList(tableName)
  state.dataList = res.data
}
function handleTreeNodeClick(data: any) {
  if (data.isLeaf) {
    getTableFields(data.label)
  }
}

const init = async () => {
  const { data } = await getTableDataByList()
  const children: TreeNode[] = []
  data.forEach((item: any) => {
    children.push({
      isLeaf: true,
      label: item,
    })
  })
  state.treeData = [
    {
      label: '数据库表',
      isLeaf: false,
      children,
    },
  ]
  if (data && data.length > 0) {
    const res = await getTableFieldsByList(data[0])
    state.dataList = res.data
  }
}
onMounted(() => {
  init()
})
defineExpose({
  init,
})
</script>

<template>
  <div class="page-main">
    <LayoutContainer left-side-width="300px" hide-left-side-toggle>
      <template #leftSide>
        <el-scrollbar class="tree">
          <div v-if="state.layoutMode !== 'sql'">
            <el-tree :data="state.treeData" default-expand-all highlight-current @node-click="handleTreeNodeClick">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div class="label" :title="node.label">
                    <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
                      <svg-icon name="ep:tickets" />
                    </el-icon>
                    <div class="text">
                      {{ data.label }}
                    </div>
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </el-scrollbar>
      </template>

      <div class="container">
        <el-table ref="table" class="list-table" :data="state.dataList" border stripe highlight-current-row>
          <el-table-column prop="comment" label="comment" />
          <el-table-column prop="defaultValue" label="defaultValue" />
          <el-table-column prop="extra" label="extra" />
          <el-table-column prop="fieldName" label="fieldName" />
          <el-table-column prop="accident_cat_id" label="accident_cat_id" />
          <el-table-column prop="fieldType" label="fieldType" />
          <el-table-column prop="key" label="key" />
          <el-table-column prop="nullable" label="nullable" />
          <el-table-column label="操作" width="200" align="center">
            <template #default>
              <el-button type="danger" size="small" plain>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="state.curPage" :total="100" layout="total, sizes, ->, prev, pager, next, jumper" style="padding:10px 0" />
      </div>
    </layoutcontainer>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-main {
  :deep(.left-side) {
    display: flex;
    flex-direction: column;
    height: 100%;

    .tree {
      flex: 1;
      overflow-y: auto;

      .el-tree {
        .el-tree-node__content {
          height: 26px;
        }

        .el-tree-node__expand-icon.is-leaf{
          padding: 0;
        }

        .is-current > .el-tree-node__content {
          background-color: var(--el-color-primary-light-9);
        }

        .custom-tree-node {
          flex: 1;
          position: relative;
          width: 0;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .label {
            display: inline-flex;
            align-items: center;
            width: calc(100% - 10px);
            color: var(--el-text-color-primary);

            .text {
              @include text-overflow;
            }
          }

          &:hover {
            .actions {
              display: block;
            }
          }

          .actions {
            display: none;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);

            .el-button {
              padding: 5px 8px;
            }
          }
        }
      }
    }
  }

  .rightSide{
    padding: 0 10px;
    flex: 1;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background-color: var(--g-app-bg);

    .toolBar{
      text-align: right;

      .el-icon {
        color: #606266;
        margin: 0 20px;
        font-size: 1.5em;
        vertical-align: middle;
      }
    }
  }
}
</style>