磁盘监控增加表单验证

src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import type { FormInst, FormRules } from 'naive-ui'
 import { NColorPicker, NForm, NFormItem, NSelect } from 'naive-ui'
 import type { DiskExtendParam } from '../../typings'
 import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
 import GenericProgress from '../../components/GenericProgress/index.vue'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 import { getDiskMountpoints } from '@/api/system/systemMonitor'
 import { defautSwatchesBackground } from '@/utils/defaultData'
+import { t } from '@/locales'
 
 interface Emit {
   (e: 'update:diskExtendParam', visible: DiskExtendParam): void
@@ -16,6 +18,14 @@ const props = defineProps<{
   diskExtendParam: DiskExtendParam
 }>()
 const emit = defineEmits<Emit>()
+const formRef = ref<FormInst | null>(null)
+const rules: FormRules = {
+  path: {
+    required: true,
+    message: t('form.required'),
+    trigger: 'blur',
+  },
+}
 
 const mountPointList = ref<{
   label: string
@@ -52,6 +62,26 @@ async function getMountPointList() {
 onMounted(() => {
   getMountPointList()
 })
+
+defineExpose({
+  async verification(): Promise<boolean> {
+    try {
+      const errors = await formRef.value?.validate()
+
+      if (!errors) {
+        return Promise.resolve(true)
+      }
+      else {
+        console.log(errors)
+        return Promise.resolve(false)
+      }
+    }
+    catch (error) {
+      console.error('An error occurred during validation:', error)
+      return Promise.resolve(false)
+    }
+  },
+})
 </script>
 
 <template>
@@ -102,8 +132,8 @@ onMounted(() => {
       </div>
     </div>
 
-    <NForm ref="formRef" v-model="extendParam">
-      <NFormItem :label="$t('deskModule.systemMonitor.diskMountPoint')">
+    <NForm ref="formRef" v-model="extendParam" :model="extendParam" :rules="rules">
+      <NFormItem :label="$t('deskModule.systemMonitor.diskMountPoint')" path="path">
         <NSelect v-model:value="extendParam.path" size="small" :options="mountPointList" />
       </NFormItem>
       <NFormItem :label="$t('deskModule.systemMonitor.progressColor')">

src/components/deskModule/SystemMonitor/Edit/index.vue

@@ -17,6 +17,7 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emit>()
+const DiskEditorRef = ref<InstanceType<typeof DiskEditor>>()
 
 // 默认通用的进度扩展参数
 const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
@@ -78,14 +79,21 @@ function handleResetExtendParam() {
 
 // 保存提交
 async function handleSubmit() {
+  let verificationRes = true
   currentMonitorData.value.monitorType = active.value as MonitorType
-  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory)
+  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
     currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
-
-  else if (currentMonitorData.value.monitorType === MonitorType.disk)
+  }
+  else if (currentMonitorData.value.monitorType === MonitorType.disk) {
     currentMonitorData.value.extendParam = currentDiskExtendParam
+    const res = await DiskEditorRef.value?.verification()
+    if (res !== undefined)
+      verificationRes = res
+  }
 
   // console.log('保存', currentMonitorData.value.extendParam)
+  if (!verificationRes)
+    return
 
   if (props.index !== null) {
     const res = await saveByIndex(props.index, currentMonitorData.value)
@@ -125,7 +133,7 @@ async function handleSubmit() {
         <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
       </NTabPane>
       <NTabPane :name="MonitorType.disk" :tab="$t('deskModule.systemMonitor.diskState')">
-        <DiskEditor v-model:disk-extend-param="currentDiskExtendParam" />
+        <DiskEditor ref="DiskEditorRef" v-model:disk-extend-param="currentDiskExtendParam" />
       </NTabPane>
     </NTabs>
     <NButton @click="handleResetExtendParam">