重构：完善配置管理的删除功能

Author: YunaiV

src/api/infra/config/index.ts

@@ -30,7 +30,7 @@ export const getConfig = (id: number) => {
 }
 
 // 根据参数键名查询参数值
-export const getConfigKeyApi = (configKey: string) => {
+export const getConfigKey = (configKey: string) => {
   return request.get({ url: '/infra/config/get-value-by-key?key=' + configKey })
 }
 
@@ -45,7 +45,7 @@ export const updateConfig = (data: ConfigVO) => {
 }
 
 // 删除参数
-export const deleteConfigApi = (id: number) => {
+export const deleteConfig = (id: number) => {
   return request.delete({ url: '/infra/config/delete?id=' + id })
 }
 

src/views/infra/config/form.vue

@@ -45,7 +45,7 @@ const message = useMessage() // 消息弹窗
 
 const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的 Loading 加载：1）修改时的数据加载；2）提交的按钮禁用
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = reactive({
   id: undefined,

src/views/infra/config/index.vue

@@ -59,7 +59,6 @@
     <!-- 操作栏 -->
     <!-- TODO 间隔貌似有点问题 没发现 -->
     <el-row :gutter="10" class="mb8">
-      <!-- TODO 芋艿，图标不对 已解决 -->
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -72,13 +71,17 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="warning"
+          type="success"
+          plain
           @click="handleExport"
           :loading="exportLoading"
           v-hasPermi="['infra:config:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
+        <el-button text @click="showSearch = !showSearch">
+          <Icon :icon="showSearch ? 'ep:arrow-up' : 'ep:arrow-down'" />
+        </el-button>
       </el-col>
       <!-- TODO 芋艿：右侧导航 -->
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
@@ -123,7 +126,7 @@
           <el-button
             link
             type="primary"
-            @click="handleDelete(scope.row)"
+            @click="handleDelete(scope.row.id)"
             v-hasPermi="['infra:config:delete']"
           >
             <Icon icon="ep:delete" /> 删除
@@ -137,11 +140,13 @@
   <config-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Config">
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import * as ConfigApi from '@/api/infra/config'
 import ConfigForm from './form.vue'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-// import { Delete, Edit, Search, Download, Plus, Refresh } from '@element-plus/icons-vue'
 import dayjs from 'dayjs'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
 const showSearch = ref(true) // 搜索框的是否展示
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -155,6 +160,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -186,6 +192,19 @@ const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
 
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ConfigApi.deleteConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()