AttendanceConfigModal.vue 4.01 KB

<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit">
      <BasicForm @register="registerForm" />
    </BasicModal>
  </template>
  <script lang="ts">
    import { defineComponent, ref, computed } from 'vue';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { defHttp } from '/@/utils/http/axios';
    import { useMessage } from '/@/hooks/web/useMessage';
    
    const Api = {
      ATTENDANCE_CONFIG_ADD: '/order/erp/system_setting/add',
    };
    
    // 生成年份选项
    const generateYearOptions = () => {
      const currentYear = new Date().getFullYear();
      const years = [];
      
      for (let i = -2; i <= 5; i++) {
        const year = currentYear + i;
        years.push({
          label: `${year}年`,
          value: year.toString(),
        });
      }
      
      return years;
    };
    
    // 考勤类型选项
    const attendanceTypeOptions = [
      { label: '9小时双休', value: 61 },
      { label: '9小时大小周双休(生产科)', value: 62 },
      { label: '8小时双休', value: 63 },
      { label: '8.5小时大小周', value: 64 },
    ];
    
    export default defineComponent({
      name: 'AttendanceConfigModal',
      components: { BasicModal, BasicForm },
      emits: ['success', 'register'],
      setup(_, { emit }) {
        const { createMessage } = useMessage();
        const formParams = ref({});
        const isUpdate = ref(false);
        
        const title = computed(() => '新增考勤配置');
        
        // 表单配置
        const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
          labelWidth: 100,
          schemas: [
            {
              field: 'settingValue',
              label: '年份',
              component: 'Select',
              required: true,
              componentProps: {
                options: generateYearOptions(),
                placeholder: '请选择年份',
                disabled: true,
              },
            },
            {
              field: 'settingType',
              label: '考勤类型',
              component: 'Select',
              required: true,
              componentProps: {
                options: attendanceTypeOptions,
                placeholder: '请选择考勤类型',
              },
            },
          ],
          showActionButtonGroup: false,
          actionColOptions: {
            span: 24,
          },
        });
        
        // 注册弹窗
        const [registerModal, { closeModal }] = useModalInner(async (data) => {
          resetFields();
          
          // 如果有默认年份,设置默认值
          const currentYear = new Date().getFullYear().toString();
          await setFieldsValue({ settingValue: currentYear });
          
          if (data) {
            // 可以设置默认年份
            if (data.year) {
              await setFieldsValue({ settingValue: data.year });
            }
          }
        });
        
        // 提交表单
        async function handleSubmit() {
          try {
            const values = await validate();
            
            const params = {
              settingType: values.settingType,
              settingValue: values.settingValue,
              settingCode:'monthlyAttendance',
              settingName:'每月考勤',
              relationCode:'month'
            };
            
            await defHttp.post({
              url: Api.ATTENDANCE_CONFIG_ADD,
              params,
            }, {
              successMsg: '添加考勤配置成功',
            });
            
            closeModal();
            emit('success');
          } catch (error) {
            console.error('提交表单错误:', error);
            createMessage.error('提交失败');
          }
        }
        
        return {
          registerModal,
          registerForm,
          title,
          handleSubmit,
        };
      },
    });
  </script>