index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <ContentWrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form class="-mb-15px" :inline="true">
  5. <el-form-item>
  6. <el-button
  7. type="primary"
  8. plain
  9. @click="openForm('create')"
  10. v-hasPermi="['infra:data-source-config:create']"
  11. >
  12. <Icon icon="ep:plus" class="mr-5px" /> 新增
  13. </el-button>
  14. </el-form-item>
  15. </el-form>
  16. </ContentWrap>
  17. <!-- 列表 -->
  18. <ContentWrap>
  19. <el-table v-loading="loading" :data="list">
  20. <el-table-column label="主键编号" align="center" prop="id" />
  21. <el-table-column label="数据源名称" align="center" prop="name" />
  22. <el-table-column label="数据源连接" align="center" prop="url" :show-overflow-tooltip="true" />
  23. <el-table-column label="用户名" align="center" prop="username" />
  24. <el-table-column
  25. label="创建时间"
  26. align="center"
  27. prop="createTime"
  28. width="180"
  29. :formatter="dateFormatter"
  30. />
  31. <el-table-column label="操作" align="center">
  32. <template #default="scope">
  33. <el-button
  34. link
  35. type="primary"
  36. @click="openForm('update', scope.row.id)"
  37. v-hasPermi="['infra:data-source-config:update']"
  38. :disabled="scope.row.id === 0"
  39. >
  40. 编辑
  41. </el-button>
  42. <el-button
  43. link
  44. type="danger"
  45. @click="handleDelete(scope.row.id)"
  46. v-hasPermi="['infra:data-source-config:delete']"
  47. :disabled="scope.row.id === 0"
  48. >
  49. 删除
  50. </el-button>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. </ContentWrap>
  55. <!-- 表单弹窗:添加/修改 -->
  56. <DataSourceConfigForm ref="formRef" @success="getList" />
  57. </template>
  58. <script lang="ts" setup>
  59. import { dateFormatter } from '@/utils/formatTime'
  60. import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
  61. import DataSourceConfigForm from './DataSourceConfigForm.vue'
  62. defineOptions({ name: 'InfraDataSourceConfig' })
  63. const message = useMessage() // 消息弹窗
  64. const { t } = useI18n() // 国际化
  65. const loading = ref(true) // 列表的加载中
  66. const list = ref([]) // 列表的数据
  67. /** 查询列表 */
  68. const getList = async () => {
  69. loading.value = true
  70. try {
  71. list.value = await DataSourceConfigApi.getDataSourceConfigList()
  72. } finally {
  73. loading.value = false
  74. }
  75. }
  76. /** 添加/修改操作 */
  77. const formRef = ref()
  78. const openForm = (type: string, id?: number) => {
  79. formRef.value.open(type, id)
  80. }
  81. /** 删除按钮操作 */
  82. const handleDelete = async (id: number) => {
  83. try {
  84. // 删除的二次确认
  85. await message.delConfirm()
  86. // 发起删除
  87. await DataSourceConfigApi.deleteDataSourceConfig(id)
  88. message.success(t('common.delSuccess'))
  89. // 刷新列表
  90. await getList()
  91. } catch {}
  92. }
  93. /** 初始化 **/
  94. onMounted(() => {
  95. getList()
  96. })
  97. </script>