1. 修复 DictTag 对 boolean 的 false 处理不展示

2. vue 重构：增加配置管理的 form 表单

src/components/DictTag/src/DictTag.vue

@@ -34,7 +34,7 @@ export default defineComponent({
         return null
       }
       // 解决自定义字典标签值为零时标签不渲染的问题
-      if (!props.value && props.value !== 0) {
+      if (props.value === undefined) {
         return null
       }
       getDictObj(props.type, props.value.toString())

src/utils/dict.ts

@@ -55,7 +55,7 @@ export const getBoolDictOptions = (dictType: string) => {
   dictOptions.forEach((dict: DictDataType) => {
     dictOption.push({
       ...dict,
-      value: dict.value + '' === 'true' ? true : false
+      value: dict.value + '' === 'true'
     })
   })
   return dictOption

src/views/infra/config/form.vue

@@ -0,0 +1,122 @@
+<template>
+  <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="参数分类" prop="category">
+        <el-input v-model="form.category" placeholder="请输入参数分类" />
+      </el-form-item>
+      <el-form-item label="参数名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入参数名称" />
+      </el-form-item>
+      <el-form-item label="参数键名" prop="key">
+        <el-input v-model="form.key" placeholder="请输入参数键名" />
+      </el-form-item>
+      <el-form-item label="参数键值" prop="value">
+        <el-input v-model="form.value" placeholder="请输入参数键值" />
+      </el-form-item>
+      <el-form-item label="是否可见" prop="visible">
+        <!-- TODO 芋艿：改成组件 -->
+        <el-radio-group v-model="form.visible">
+          <el-radio :key="true" :label="true">是</el-radio>
+          <el-radio :key="false" :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="modelLoading = false">取 消</el-button>
+      </div>
+    </template>
+  </XModal>
+</template>
+<script setup lang="ts">
+// import type { FormExpose } from '@/components/Form'
+import * as PostApi from '@/api/system/post'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const modelLoading = ref(false) // 弹窗的 Loading 加载
+const actionType = ref('') // 操作类型：create - 新增；update - 修改
+const actionLoading = ref(false) // 操作按钮的 Loading 加载
+const formRef = ref() // 表单的 Ref
+const form = reactive({
+  id: undefined,
+  category: undefined,
+  name: undefined,
+  key: undefined,
+  value: undefined,
+  visible: true,
+  remark: undefined
+})
+const rules = reactive({
+  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+})
+// const formRef = ref<FormExpose>() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelLoading.value = true
+  modelTitle.value = t('action.' + type)
+  actionType.value = type
+  // 设置数据
+  resetForm()
+  if (id) {
+    // const res = await PostApi.getPostApi(id)
+    // if (type === 'update') {
+    //   unref(formRef)?.setValues(res)
+    // } else if (type === 'detail') {
+    //   detailData.value = res
+    // }
+  }
+  modelLoading.value = false
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+  // 提交请求
+  actionLoading.value = true
+  try {
+    const data = unref(formRef)?.formModel as PostApi.PostVO
+    if (actionType.value === 'create') {
+      await PostApi.createPostApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PostApi.updatePostApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    emit('success')
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  form.id = undefined
+  form.category = undefined
+  form.name = undefined
+  form.key = undefined
+  form.value = undefined
+  form.visible = true
+  form.remark = undefined
+  formRef.value.resetFields()
+}
+</script>

src/views/infra/config/index.vue

@@ -26,12 +26,16 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <!--      <el-form-item label="系统内置" prop="type">-->
-      <!--        <el-select v-model="queryParams.type" placeholder="系统内置" clearable>-->
-      <!--          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CONFIG_TYPE)" :key="parseInt(dict.value)"-->
-      <!--                     :label="dict.label" :value="parseInt(dict.value)"/>-->
-      <!--        </el-select>-->
-      <!--      </el-form-item>-->
+      <el-form-item label="系统内置" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
+        </el-select>
+      </el-form-item>
       <!-- TODO：时间无法设置 -->
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
@@ -92,7 +96,6 @@
       <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>
@@ -116,7 +119,7 @@
             link
             type="primary"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            @click="openModal('update', scope.row.id)"
             v-hasPermi="['infra:config:update']"
           >
             修改
@@ -134,10 +137,15 @@
       </el-table-column>
     </el-table>
   </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <!-- TODO 芋艿：可以改成 form 么？ -->
+  <config-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Config">
 import * as ConfigApi from '@/api/infra/config'
-import { DICT_TYPE } from '@/utils/dict'
+import ConfigForm from './form.vue'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import dayjs from 'dayjs'
 
 const showSearch = ref(true) // 搜索框的是否展示
@@ -178,6 +186,12 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
+}
+
 // ========== 初始化 ==========
 onMounted(() => {
   getList()

src/views/infra/config/index2.vue

@@ -1,162 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #toolbar_buttons>
-        <!-- 操作：新增 -->
-        <XButton
-            type="primary"
-            preIcon="ep:zoom-in"
-            :title="t('action.add')"
-            v-hasPermi="['infra:config:create']"
-            @click="handleCreate()"
-        />
-        <!-- 操作：导出 -->
-        <XButton
-            type="warning"
-            preIcon="ep:download"
-            :title="t('action.export')"
-            v-hasPermi="['infra:config:export']"
-            @click="exportList('配置.xls')"
-        />
-      </template>
-      <template #visible_default="{ row }">
-        <span>{{ row.visible ? '是' : '否' }} </span>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：修改 -->
-        <XTextButton
-            preIcon="ep:edit"
-            :title="t('action.edit')"
-            v-hasPermi="['infra:config:update']"
-            @click="handleUpdate(row.id)"
-        />
-        <!-- 操作：详情 -->
-        <XTextButton
-            preIcon="ep:view"
-            :title="t('action.detail')"
-            v-hasPermi="['infra:config:query']"
-            @click="handleDetail(row.id)"
-        />
-        <!-- 操作：删除 -->
-        <XTextButton
-            preIcon="ep:delete"
-            :title="t('action.del')"
-            v-hasPermi="['infra:config:delete']"
-            @click="deleteData(row.id)"
-        />
-      </template>
-    </XTable>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(添加 / 修改) -->
-    <Form
-        v-if="['create', 'update'].includes(actionType)"
-        :schema="allSchemas.formSchema"
-        :rules="rules"
-        ref="formRef"
-    />
-    <!-- 对话框(详情) -->
-    <Descriptions
-        v-if="actionType === 'detail'"
-        :schema="allSchemas.detailSchema"
-        :data="detailData"
-    >
-      <template #visible="{ row }">
-        <span>{{ row.visible ? '是' : '否' }} </span>
-      </template>
-    </Descriptions>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <!-- 按钮：保存 -->
-      <XButton
-          v-if="['create', 'update'].includes(actionType)"
-          type="primary"
-          :title="t('action.save')"
-          :loading="actionLoading"
-          @click="submitForm()"
-      />
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
-    </template>
-  </XModal>
-</template>
-<script setup lang="ts" name="Config">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import * as ConfigApi from '@/api/infra/config'
-import { rules, allSchemas } from './config.data'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
-  allSchemas: allSchemas,
-  getListApi: ConfigApi.getConfigPage,
-  deleteApi: ConfigApi.deleteConfigApi,
-  exportListApi: ConfigApi.exportConfigApi
-})
-
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
-  actionType.value = type
-  dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
-  setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
-  // 设置数据
-  const res = await ConfigApi.getConfigApi(rowId)
-  unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await ConfigApi.getConfigApi(rowId)
-  detailData.value = res
-}
-
-// 提交按钮
-const submitForm = async () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      actionLoading.value = true
-      // 提交请求
-      try {
-        const data = unref(formRef)?.formModel as ConfigApi.ConfigVO
-        if (actionType.value === 'create') {
-          await ConfigApi.createConfigApi(data)
-          message.success(t('common.createSuccess'))
-        } else {
-          await ConfigApi.updateConfigApi(data)
-          message.success(t('common.updateSuccess'))
-        }
-        dialogVisible.value = false
-      } finally {
-        actionLoading.value = false
-        // 刷新列表
-        await reload()
-      }
-    }
-  })
-}
-</script>