diff --git a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue index 78dafea..3d9bd81 100644 --- a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue +++ b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue @@ -1,5 +1,6 @@ <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' @@ -7,6 +8,7 @@ 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')"> diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue index 6cf2bd4..2012996 100644 --- a/src/components/deskModule/SystemMonitor/Edit/index.vue +++ b/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">