FranklinWH-Toolbox/src/views/sites-analysis/ModalData.vue

<template>
  <div class="p-2">
    <NForm :model="form" :rules="rules" label-placement="left" style="width: 100%" ref="formRef" label-width="88px"
      size="small">
      <NFormItem label="SN" path="sn">
        <NInput v-model:value="form.sn" :allow-input="handleAllowInput" />
      </NFormItem>
      <NFormItem label="描述" path="description">
        <NInput type="textarea" v-model:value="form.description" />
      </NFormItem>
      <NFormItem label="时间" path="timePeriod">
        <NDatePicker v-model:formatted-value="form.timePeriod" value-format="yyyy-MM-dd" type="daterange" clearable />
      </NFormItem>

      <NCollapse :trigger-areas="['arrow']" class="p-4">
        <NCollapseItem :disable="!form.options.enableTimeline" title="时间线数据">
          <template #header-extra>
            <NSwitch v-model:value="form.options.enableTimeline" size="small" />
          </template>
        </NCollapseItem>
        <NCollapseItem :disable="!form.options.enableRuntime" title="运行时数据">
          <template #header-extra>
            <NSwitch v-model:value="form.options.enableRuntime" size="small" />
          </template>
        </NCollapseItem>
      </NCollapse>
    </NForm>
    <div class="flex justify-end gap-x-4">
      <NButton secondary @click="emits('cancel')">
        取消
      </NButton>
      <NButton secondary type="warning" @click="reset">
        重置
      </NButton>
      <NButton type="success" @click="handleSubmitClick">
        确定
      </NButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue'
import { NForm, NFormItem, NInput, NButton, NCollapseItem, NSwitch, NDatePicker } from 'naive-ui'
import type { FormRules } from 'naive-ui'

import { useResettableReactive } from '@/composable/useResettable'

import type { AnalysisConfig } from '@/service/sitesAnalysis/interface'
import { getManageConfig } from '@/service/sitesAnalysis'

interface AnalysisConfigForm extends AnalysisConfig { }

const { id } = defineProps<{
  id?: string
}>()

const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')

const emits = defineEmits<{
  (e: 'submit', value: AnalysisConfig): void
  (e: 'cancel'): void
}>()

const [form, setUserForm, reset, updateInitialState] = useResettableReactive<AnalysisConfigForm>({
  id: '',
  sn: '',
  description: '',
  timePeriod: null,

  options: {
    enableTimeline: true,
    enableRuntime: true
  }
})

const handleAllowInput = (value: string) => {
  // 如果输入不匹配 URL 允许的字符，去掉不合法字符
  const res = /\W/.test(value)
  return !res
};

const rules: FormRules = {
  sn: { required: true, message: '请输入站点SN', trigger: ['input'] },
  timePeriod: [
    // { required: true, message: '请选择时间范围', trigger: ['change', 'blur'] },
    {
      validator: (rule, value: [string, string] | null) => {
        // ✅ 先判断是否有值
        if (!value || !value[0] || !value[1]) {
          return Promise.reject('请选择时间范围')
        }
        // ✅ 再判断时间先后
        const [start, end] = value
        if (!start || !end) return false
        // 将字符串转成 Date 再比较
        const startTime = new Date(start.replace(/\./g, '-')).getTime()
        const endTime = new Date(end.replace(/\./g, '-')).getTime()
        if (endTime < startTime) {
          return Promise.reject('结束时间必须晚于开始时间')
        }
        return Promise.resolve()
      },
      trigger: ['change', 'blur']
    }
  ],
}

const handleSubmitClick = () => {
  formRef.value?.validate().then((valid) => {
    if (valid) {
      emits('submit', form)
    }
  })
}

onMounted(async () => {
  if (id !== undefined) {
    // 请求表单数据
    const cfg = await getManageConfig(id)

    // 填入表单数据
    setUserForm({ ...cfg })
    // 设置表单数据重置状态
    updateInitialState({ ...cfg })
  }
})
</script>