xps-web-v5/src/views/repository/repo/index.vue

<script lang="ts" setup name="DBTypeIndex">
import { ElMessage, ElMessageBox } from 'element-plus'
import RepoComponent from './components/Repo.vue'
import { deleteRepoById, getRepoListById } from '@/api/repo/repoApi'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore()
const router = useRouter()
const tabbar = useTabbar()

const state = reactive({
  loading: false,
  // 表格是否自适应高度
  tableAutoHeight: false,
  // 搜索
  search: {
    keywords: '',
  },
  // 列表数据
  repoDBList: [],
  repoFileList: [],
  repoCacheList: [],
})

const repoRef = ref()

const getRepoList = async (repoTypeId: number) => {
  state.loading = true
  const { data } = await getRepoListById(repoTypeId)
  if (repoTypeId === 1) {
    state.repoDBList = data
  }
  else if (repoTypeId === 2) {
    state.repoFileList = data
  }
  else {
    state.repoCacheList = data
  }
  state.loading = false
}

const getRepoData = async () => {
  await getRepoList(1)
  await getRepoList(2)
  await getRepoList(3)
}

onMounted(() => {
  getRepoData()
})

function onRepoAdd(repoTypeId: number) {
  repoRef.value.showAddModel(repoTypeId)
}

function onRepoEdit(row: any) {
  const { repoTypeId, repoId } = row
  repoRef.value.showEditModel(repoTypeId, repoId)
}

function onRepoDel(row: any) {
  const { repoId, repoTypeId, repoTitle } = row
  ElMessageBox.confirm(`确认删除「${repoTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteRepoById(repoTypeId, repoId)
    ElMessage.success(msg)
    await getRepoList(repoTypeId)
  }).catch(() => {})
}

// 编辑对象
const onRepoDetails = (row: { repoTypeId: number; repoId: number }) => {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.open({
      name: 'repoDBDetails',
      params: {
        repoTypeId: row.repoTypeId,
        repoId: row.repoId,
      },
    })
  }
  else {
    router.push({
      name: 'repoDBDetails',
      params: {
        repoTypeId: row.repoTypeId,
        repoId: row.repoId,
      },
    })
  }
}
</script>

<template>
  <div class="absolute-container">
    <page-header title="数据仓库">
      <template #content>
        <div>
          用于管理各种类型的数据仓库
        </div>
      </template>
    </page-header>

    <el-row :gutter="20" style="margin: -10px 10px;">
      <el-col :md="16">
        <page-main style="margin: 10px 0;">
          <tool-bar>
            <template #left>
              <h3>数据库</h3>
            </template>
            <template #right>
              <el-button type="success" plain @click="onRepoAdd(1)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>
            </template>
          </tool-bar>

          <el-table v-loading="state.loading" class="list-table" :data="state.repoDBList" :border="false" :stripe="false" :show-header="false" height="100%">
            <el-table-column type="index" width="50" fixed="left" />

            <el-table-column prop="repoTitle" label="名称" header-align="center" align="center" width="150">
              <template #default="scope">
                <el-icon size="16px" style="margin-right: 5px;">
                  <svg-icon name="ep:coin" />
                </el-icon>
                <span>{{ scope.row.repoTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="repoCatTitle" label="类型" header-align="center" align="center" width="150">
              <template #default="scope">
                <el-tag type="success">
                  {{ scope.row.repoCatTitle }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="repoDesc" label="说明" header-align="left" align="left">
              <template #default="scope">
                <span>{{ scope.row.repoDesc }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="220" header-align="center" align="right" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" plain @click="onRepoDetails(scope.row)">
                  详情
                </el-button>
                <el-button type="warning" size="small" plain @click="onRepoEdit(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onRepoDel(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </page-main>
      </el-col>

      <el-col :md="8">
        <page-main style="margin: 10px 0;">
          <tool-bar>
            <template #left>
              <h3>文件服务器</h3>
            </template>
            <template #right>
              <el-button type="success" plain @click="onRepoAdd(2)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>
            </template>
          </tool-bar>

          <el-table v-loading="state.loading" class="list-table" :data="state.repoFileList" :border="false" :stripe="false" :show-header="false" height="100%">
            <el-table-column type="index" label="序号" width="50" header-align="center" align="center" />

            <el-table-column prop="repoTitle" label="名称" header-align="center" align="center" width="100">
              <template #default="scope">
                <el-icon size="16px" style="margin-right: 5px;">
                  <svg-icon name="ep:files" />
                </el-icon>
                <span>{{ scope.row.repoTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="repoTitle" label="名称" header-align="center" align="center">
              <template #default="scope">
                <el-tag type="warning">
                  {{ scope.row.repoCatTitle }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center" fixed="right">
              <template #default="scope">
                <el-button type="warning" size="small" plain @click="onRepoEdit(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onRepoDel(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </page-main>

        <page-main style="margin: 10px 0;">
          <tool-bar>
            <template #left>
              <h3>高速缓存</h3>
            </template>
            <template #right>
              <el-button type="success" plain @click="onRepoAdd(3)">
                <template #icon>
                  <el-icon>
                    <svg-icon name="i-ep:plus" />
                  </el-icon>
                </template>
              </el-button>
            </template>
          </tool-bar>
          <el-table v-loading="state.loading" class="list-table" :data="state.repoCacheList" :border="false" :stripe="false" :show-header="false" height="100%">
            <el-table-column type="index" label="序号" width="50" header-align="center" align="center" />

            <el-table-column prop="repoTitle" label="名称" header-align="center" align="center" width="100">
              <template #default="scope">
                <span>{{ scope.row.repoTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="repoTitle" label="名称" header-align="center" align="center">
              <template #default="scope">
                <span>{{ scope.row.repoCatTitle }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center" fixed="right">
              <template #default="scope">
                <el-button type="warning" size="small" plain @click="onRepoEdit(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onRepoDel(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </page-main>
      </el-col>
    </el-row>
    <RepoComponent ref="repoRef" @success="getRepoData" />
  </div>
</template>

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

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .tool-bar {
      h3{
        color: #757d87;
      }
    }

    .search-container {
      margin-bottom: 0;
    }
  }
}
</style>