bj-maritime-dcds-web/src/components/DataStatisticsDialog.vue

<script setup lang="ts" name="modal">
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';

// 定义props
interface Props {
  isVisible: boolean,
}
type Emit = {
  (e: 'update:isVisible', isVisible: boolean): any
  (e: 'confirmed', data: string): any,
  (e: 'cancel'): any,
}
interface FormRule {
  month?: number;
}
const emit = defineEmits<Emit>();
const props = defineProps<Props>();
const formData = reactive<FormRule>({});
const formRef = ref<FormInstance>();
const rules = {
  month: [
    { required: true, message: '请选择日期', trigger: 'blur' },
  ]
};
// 点击确定
const onConfirm = async() => {
  if (!formRef) return;
  await formRef.value?.validate();
  try{
    emit('confirmed', formData.month);
    onCloseDialog()
  } finally {
    // TODO
  }
}

const onCloseDialog = () => {
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
  emit('update:isVisible', false);
  emit('cancel')
};

const disabledFutureMonths = (date: Date) => {
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth();
  
  const selectYear = date.getFullYear();
  const selectMonth = date.getMonth();
  
  return selectYear > currentYear || 
        (selectYear === currentYear && selectMonth > currentMonth);
};
</script>

<template>
  <div class="modal">
    <el-dialog
      :model-value="props.isVisible"
      title="数据统计"
      width="30%"
      center
      :close-on-click-modal="false"
      @close="onCloseDialog()"
    >
      <el-form
        ref="formRef"
        :rules="rules"
        :model="formData"
        size="large"
        label-width="100px"
      >
        <el-form-item label="数据周期" prop="month">
          <el-date-picker
            v-model="formData.month"
            type="month"
            placeholder="请选择月份"
            value-format="YYYY-MM"
            :disabled-date="disabledFutureMonths"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onConfirm()">确认</el-button>
          <el-button @click="onCloseDialog()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped lang="scss">

</style>