1. 优化 Dialog 组件，增加 scroll 标识滚动

2. 优化配置管理的 :default-time 设置

1. 优化 Dialog 组件，增加 scroll 标识滚动
2. 优化配置管理的 :default-time 设置
74846a11 · YunaiV · 0ea6b1b7 · 74846a11 · 74846a11 · 74846a11
Commit 74846a11 authored Mar 09, 2023 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 30 additions and 29 deletions

src/components/Dialog/src/Dialog.vue
+8 -3

src/views/infra/config/form.vue
+13 -11

src/views/infra/config/index.vue
+9 -15

No files found.
--- 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>

--- a/src/views/infra/config/form.vue
+++ b/src/views/infra/config/form.vue
 <template>
-  <!-- TODO 芋艿：Dialog 貌似高度不太对劲 已解决：textarea导致 设置一个最大高就行了 -->
+  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading">
-  <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="请输入参数分类" />
@@ -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)
+    modelLoading.value = true
-    Object.assign(formData, data)
+    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']
+  const formRef = proxy.$refs['formRef']
-  console.log(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 = ''

--- 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 么？ 已解决 -->
+  <config-form ref="modalRef" @success="getList" />
-  <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()
 })