vue3 重构：增加操作栏、搜索栏

src/views/infra/config/index.vue

@@ -52,6 +52,37 @@
       </el-form-item>
     </el-form>
 
+    <!-- 操作栏 -->
+    <!-- TODO 间隔貌似有点问题 -->
+    <el-row :gutter="10" class="mb8">
+      <!-- TODO 芋艿，图标不对 -->
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          @click="handleAdd"
+          v-hasPermi="['infra:config:create']"
+        >
+          新增
+        </el-button>
+      </el-col>
+      <!-- TODO 芋艿，图标不对 -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:config:export']"
+        >
+          导出
+        </el-button>
+      </el-col>
+      <!-- TODO 芋艿：右侧导航 -->
+      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
+    </el-row>
+
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="参数主键" align="center" prop="id" />
@@ -59,18 +90,55 @@
       <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
       <el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
       <el-table-column label="参数键值" align="center" prop="value" />
+      <el-table-column label="是否可见" align="center" prop="visible">
+        <template #default="scope">
+          <!-- TODO 芋艿：这里 false 会不展示，实现略有问题 -->
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
+        </template>
+      </el-table-column>
       <el-table-column label="系统内置" align="center" prop="type">
-        <template v-slot="scope">
+        <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <!-- TODO 芋艿：时间写的有点复杂 -->
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
+          <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+        </template>
+      </el-table-column>
+      <!-- TODO 芋艿：icon 有问题，会换行 -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['infra:config:update']"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['infra:config:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </content-wrap>
 </template>
 <script setup lang="ts" name="Config">
 import * as ConfigApi from '@/api/infra/config'
 import { DICT_TYPE } from '@/utils/dict'
+import dayjs from 'dayjs'
 
 const showSearch = ref(true) // 搜索框的是否展示
 const loading = ref(true) // 列表的加载中