From 74846a11bdd39b96aace087bf4f25574fa0a6088 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 9 Mar 2023 19:36:57 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E4=BC=98=E5=8C=96=20Dialog=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0=20scroll=20=E6=A0=87?=
 =?UTF-8?q?=E8=AF=86=E6=BB=9A=E5=8A=A8=202.=20=E4=BC=98=E5=8C=96=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=AE=A1=E7=90=86=E7=9A=84=20:default-time=20?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/src/Dialog.vue | 11 ++++++++---
 src/views/infra/config/form.vue      | 24 +++++++++++++-----------
 src/views/infra/config/index.vue     | 24 +++++++++---------------
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 98336fdf..82caa225 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -8,8 +8,9 @@ const props = defineProps({
   modelValue: propTypes.bool.def(false),
   title: propTypes.string.def('Dialog'),
   fullscreen: propTypes.bool.def(true),
-  maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
-  width: propTypes.oneOfType([String, Number]).def('40%')
+  width: propTypes.oneOfType([String, Number]).def('40%'),
+  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
+  maxHeight: propTypes.oneOfType([String, Number]).def('300px')
 })
 
 const getBindValue = computed(() => {
@@ -35,6 +36,7 @@ const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : pr
 watch(
   () => isFullscreen.value,
   async (val: boolean) => {
+    // 计算最大高度
     await nextTick()
     if (val) {
       const windowHeight = document.documentElement.offsetHeight
@@ -80,9 +82,12 @@ const dialogStyle = computed(() => {
       </div>
     </template>
 
-    <ElScrollbar :style="dialogStyle">
+    <!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
+    <ElScrollbar :style="dialogStyle" v-if="scroll">
       <slot></slot>
     </ElScrollbar>
+    <!-- 情况一：如果 scroll 为 false，说明关闭滚动条滚动条 -->
+    <slot v-else></slot>
 
     <template v-if="slots.footer" #footer>
       <slot name="footer"></slot>
diff --git a/src/views/infra/config/form.vue b/src/views/infra/config/form.vue
index b7c1ba83..1cea4c80 100644
--- a/src/views/infra/config/form.vue
+++ b/src/views/infra/config/form.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- TODO 芋艿：Dialog 貌似高度不太对劲 已解决：textarea导致 设置一个最大高就行了 -->
-  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading" :max-height="'310px'">
+  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading">
     <el-form ref="ruleFormRef" :model="formData" :rules="formRules" label-width="80px">
       <el-form-item label="参数分类" prop="category">
         <el-input v-model="formData.category" placeholder="请输入参数分类" />
@@ -48,7 +47,7 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formLoading = ref(false) // 操作按钮的 Loading 加载
 // let formRef = ref() // 表单的 Ref
 const formData = reactive({
-  id: 0,
+  id: undefined,
   category: '',
   name: '',
   key: '',
@@ -70,24 +69,27 @@ const { proxy } = getCurrentInstance() as any
 /** 打开弹窗 */
 const openModal = async (type: string, id?: number) => {
   modelVisible.value = true
-  modelLoading.value = true
   modelTitle.value = t('action.' + type)
   formType.value = type
-  // 设置数据
   resetForm()
+  // 修改时，设置数据
   if (id) {
-    const data = await ConfigApi.getConfig(id)
-    Object.assign(formData, data)
+    modelLoading.value = true
+    try {
+      const data = await ConfigApi.getConfig(id)
+      // TODO 规范纠结点：因为用 reactive，所以需要使用 Object；可以替换的方案，1）把 reactive 改成 ref；
+      Object.assign(formData, data)
+    } finally {
+      modelLoading.value = false
+    }
   }
-  modelLoading.value = false
 }
 defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
 
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  const formRef = proxy.$refs['ruleFormRef']
-  console.log(formRef, '======')
+  const formRef = proxy.$refs['formRef']
   // 校验表单
   if (!formRef) return
   const valid = await formRef.validate()
@@ -112,7 +114,7 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  formData.id = 0
+  formData.id = undefined
   formData.category = ''
   formData.name = ''
   formData.key = ''
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index 148539fd..132135c9 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -36,17 +36,16 @@
           />
         </el-select>
       </el-form-item>
-      <!-- TODO：时间无法设置 已解决 -->
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
-          v-model="createTime"
+          v-model="queryParams.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="defaultTime"
+          :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
         />
       </el-form-item>
       <el-form-item>
@@ -139,14 +138,13 @@
   </content-wrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <!-- TODO 芋艿：可以改成 form 么？ 已解决 -->
-  <Form ref="modalRef" @success="getList" />
+  <config-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="Config">
 import * as ConfigApi from '@/api/infra/config'
-import Form from './form.vue'
+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 { Delete, Edit, Search, Download, Plus, Refresh } from '@element-plus/icons-vue'
 import dayjs from 'dayjs'
 const showSearch = ref(true) // 搜索框的是否展示
 const loading = ref(true) // 列表的加载中
@@ -157,13 +155,9 @@ const queryParams = reactive({
   pageSize: 10,
   name: undefined,
   key: undefined,
-  type: undefined
+  type: undefined,
+  createTime: []
 })
-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() // 搜索的表单
 
 /** 搜索按钮操作 */
@@ -196,7 +190,7 @@ const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
 
-// ========== 初始化 ==========
+/** 初始化 **/
 onMounted(() => {
   getList()
 })