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