潘志宝
2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826
提交 | 用户 | 时间
cfaf8b 1 <template>
2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="名称" prop="name">
12         <el-input
13           v-model="queryParams.name"
14           placeholder="请输入名称"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item>
21         <el-button @click="handleQuery">
22           <Icon icon="ep:search" class="mr-5px"/>
23           搜索
24         </el-button>
25         <el-button @click="resetQuery">
26           <Icon icon="ep:refresh" class="mr-5px"/>
27           重置
28         </el-button>
29         <el-button
30           type="primary"
31           plain
32           @click="openForm('create')"
33           v-hasPermi="['data:channel-http:create']"
34         >
35           <Icon icon="ep:plus" class="mr-5px"/>
36           新增
37         </el-button>
38       </el-form-item>
39     </el-form>
40   </ContentWrap>
41
42   <!-- 列表 -->
43   <ContentWrap>
44     <el-table v-loading="loading" :data="list">
45       <el-table-column label="认证地址" header-align="center" align="left" min-width="300" prop="loginUrl"/>
46       <el-table-column label="ClientId" align="center" prop="clientId"/>
47       <el-table-column label="ClientSecret" align="center" prop="clientSecret"/>
48       <el-table-column label="用户名" align="center" prop="username"/>
49       <el-table-column label="密码" align="center" prop="password"/>
50       <el-table-column label="刷新频率" align="center" prop="refreshFreq"/>
51       <el-table-column label="操作" align="center" min-width="110" fixed="right">
52         <template #default="scope">
53           <el-button
54             link
55             type="primary"
56             @click="openForm('update', scope.row.id)"
57             v-hasPermi="['data:channel-http:update']"
58           >
59             编辑
60           </el-button>
61           <el-button
62             link
63             type="danger"
64             @click="handleDelete(scope.row.id)"
65             v-hasPermi="['data:channel-http:delete']"
66           >
67             删除
68           </el-button>
69         </template>
70       </el-table-column>
71     </el-table>
72     <!-- 分页 -->
73     <Pagination
74       :total="total"
75       v-model:page="queryParams.pageNo"
76       v-model:limit="queryParams.pageSize"
77       @pagination="getList"
78     />
79   </ContentWrap>
80
81   <!-- 表单弹窗:添加/修改 -->
82   <TokenForm ref="formRef" @success="getList"/>
83
84 </template>
85 <script lang="ts" setup>
86 import * as HttpToken from '@/api/data/channel/http/token'
87 import TokenForm from './TokenForm.vue'
88
89 defineOptions({name: 'HttpToken'})
90
91 const message = useMessage() // 消息弹窗
92 const {t} = useI18n() // 国际化
93
94 const loading = ref(true) // 列表的加载中
95 const total = ref(0) // 列表的总页数
96 const list = ref([]) // 列表的数据
97 const queryParams = reactive({
98   pageNo: 1,
99   pageSize: 10,
100   loginUrl: undefined
101 })
102 const queryFormRef = ref() // 搜索的表单
103 const exportLoading = ref(false) // 导出的加载中
104
105 /** 查询列表 */
106 const getList = async () => {
107   loading.value = true
108   try {
109     const page = await HttpToken.getHttpTokenPage(queryParams)
110     list.value = page.list
111     total.value = page.total
112   } finally {
113     loading.value = false
114   }
115 }
116
117 /** 搜索按钮操作 */
118 const handleQuery = () => {
119   queryParams.pageNo = 1
120   getList()
121 }
122
123 /** 重置按钮操作 */
124 const resetQuery = () => {
125   queryFormRef.value.resetFields()
126   handleQuery()
127 }
128
129 /** 添加/修改操作 */
130 const formRef = ref()
131 const openForm = (type: string, id?: number) => {
132   formRef.value.open(type, id)
133 }
134
135 /** 删除按钮操作 */
136 const handleDelete = async (id: number) => {
137   try {
138     // 删除的二次确认
139     await message.delConfirm()
140     // 发起删除
141     await HttpToken.deleteHttpToken(id)
142     message.success(t('common.delSuccess'))
143     // 刷新列表
144     await getList()
145   } catch {
146   }
147 }
148
149 /** 初始化 **/
150 onMounted(async () => {
151   await getList()
152 })
153 </script>