解决TODO

Author: zhoujian888

src/views/infra/config/form.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- TODO 芋艿：Dialog 貌似高度不太对劲 -->
-  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+  <!-- TODO 芋艿：Dialog 貌似高度不太对劲 已解决：textarea导致 设置一个最大高就行了 -->
+  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading" :max-height="'310px'">
+    <el-form ref="ruleFormRef" :model="formData" :rules="formRules" label-width="80px">
       <el-form-item label="参数分类" prop="category">
         <el-input v-model="formData.category" placeholder="请输入参数分类" />
       </el-form-item>
@@ -28,14 +28,15 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="modelVisible = false">取 消</el-button>
+        <el-button @click="colseForm(ruleFormRef)">取 消</el-button>
       </div>
     </template>
   </Dialog>
 </template>
 <script setup lang="ts">
 import * as ConfigApi from '@/api/infra/config'
 // import type { FormExpose } from '@/components/Form'
+import type { FormInstance } from 'element-plus'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // const { proxy } = getCurrentInstance()
@@ -62,7 +63,7 @@ const formRules = reactive({
   value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
 })
-// const formRef = ref<FormExpose>() // 表单 Ref
+const ruleFormRef = ref<FormInstance>() // 表单 Ref
 
 const { proxy } = getCurrentInstance() as any
 
@@ -85,7 +86,7 @@ defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  const formRef = proxy.$refs['formRef']
+  const formRef = proxy.$refs['ruleFormRef']
   console.log(formRef, '======')
   // 校验表单
   if (!formRef) return
@@ -118,7 +119,17 @@ const resetForm = () => {
   formData.value = ''
   formData.visible = true
   formData.remark = ''
-  // proxy.$refs['formRef'].resetFields()
-  // formRef.value.resetFields() // TODO 芋艿：为什么拿不到 formRef 呢？
+  // proxy.$refs['ruleFormRef'].resetFields()
+  // setTimeout(() => {
+  // console.log(ruleFormRef.value, 'formRef.value')
+  // formRef.value.resetFields() // TODO 芋艿：为什么拿不到 formRef 呢？ 表单还没加载出来
+  // ruleFormRef.value?.resetFields()
+  // }, 100)
+}
+/** 取消添加 */
+const colseForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  modelVisible.value = false
 }
 </script>

src/views/infra/config/index.vue

@@ -36,46 +36,46 @@
           />
         </el-select>
       </el-form-item>
-      <!-- TODO：时间无法设置 -->
+      <!-- TODO：时间无法设置 已解决 -->
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
-          v-model="queryParams.createTime"
+          v-model="createTime"
           style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-DD HH:mm:ss"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
+          :default-time="defaultTime"
         />
       </el-form-item>
       <el-form-item>
-        <!-- TODO 按钮图标不对 -->
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <!-- TODO 按钮图标不对 已解决 -->
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 操作栏 -->
-    <!-- TODO 间隔貌似有点问题 -->
+    <!-- TODO 间隔貌似有点问题 没发现 -->
     <el-row :gutter="10" class="mb8">
-      <!-- TODO 芋艿，图标不对 -->
+      <!-- TODO 芋艿，图标不对 已解决 -->
       <el-col :span="1.5">
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
+          :icon="Plus"
           @click="openModal('create')"
           v-hasPermi="['infra:config:create']"
         >
           新增
         </el-button>
       </el-col>
-      <!-- TODO 芋艿，图标不对 -->
+      <!-- TODO 芋艿，图标不对 已解决 -->
       <el-col :span="1.5">
         <el-button
           type="warning"
-          icon="el-icon-download"
+          :icon="Download"
           @click="handleExport"
           :loading="exportLoading"
           v-hasPermi="['infra:config:export']"
@@ -84,7 +84,7 @@
         </el-button>
       </el-col>
       <!-- TODO 芋艿：右侧导航 -->
-      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
     </el-row>
 
     <!-- 列表 -->
@@ -112,13 +112,13 @@
           <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
         </template>
       </el-table-column>
-      <!-- TODO 芋艿：icon 有问题，会换行 -->
+      <!-- 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"
+            :icon="Edit"
             @click="openModal('update', scope.row.id)"
             v-hasPermi="['infra:config:update']"
           >
@@ -127,7 +127,7 @@
           <el-button
             link
             type="primary"
-            icon="el-icon-delete"
+            :icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['infra:config:delete']"
           >
@@ -139,15 +139,15 @@
   </content-wrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <!-- TODO 芋艿：可以改成 form 么？ -->
-  <config-form ref="modalRef" @success="getList" />
+  <!-- TODO 芋艿：可以改成 form 么？ 已解决 -->
+  <Form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Config">
 import * as ConfigApi from '@/api/infra/config'
-import ConfigForm from './form.vue'
+import Form 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 showSearch = ref(true) // 搜索框的是否展示
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -157,9 +157,13 @@ const queryParams = reactive({
   pageSize: 10,
   name: undefined,
   key: undefined,
-  type: undefined,
-  createTime: []
+  type: undefined
 })
+const createTime = ref('')
+const defaultTime = ref<[Date, Date]>([
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59)
+])
 const queryFormRef = ref() // 搜索的表单
 
 /** 搜索按钮操作 */