canrd-outside / order-erp-front · Files

<template>
  <BasicDrawer
    v-cloakv-bind="$attrs"
    @register="register"
    title="新增邮件发送"
    width="35%"
    showFooter
    @ok="handleSubmit"
    ref="formRef"
    okText="保存"
    :destroyOnClose="true"
    :isDetail="true"
    :showDetailBack="false"
    :mask="false"
    class="z-20"
  >
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { defineComponent, ref, computed, unref, toRaw } from 'vue';
  import { useOrderInfo } from '/@/hooks/component/order';
  import { useOrderStoreWithOut } from '/@/store/modules/order';

  const orderStore = useOrderStoreWithOut();
  const { customerCode: customerCodeOptions } = useOrderInfo(orderStore);
  const emit = defineEmits(['success2']);
  const configInfos: ConfigInfo[] = [
    {
      fieldName: '确认样品确认状态',
      fieldValue: 'configSample',
      event: 'CONFIRM_SAMPLE_EVENT',
      emails: [],
    },
    {
      fieldName: '其他要求样品发送日期',
      fieldValue: 'otherSample',
      event: 'OTHER_SAMPLE_EVENT',
      emails: [],
    },
    {
      fieldName: '大货样确认态',
      fieldValue: 'bigSample',
      event: 'BIG_SAMPLE_EVENT',
      emails: [],
    },
    {
      fieldName: 'AIDE/SGS测试状态',
      fieldValue: 'aitexSgsTest',
      event: 'AITEX_SGS_TEST_EVENT',
      emails: [],
    },
    {
      fieldName: '要求包材到货日期',
      fieldValue: 'barcodeArrival',
      event: 'BARCODE_ARRIVAL_EVENT',
      emails: [],
    },
    {
      fieldName: '最晚订舱日期',
      fieldValue: 'latestDc',
      event: 'LATEST_DC_EVENT',
      emails: [],
    },
    // {
    //   fieldName: '尾期验货日期',
    //   fieldValue: 'endCheckDate',
    //   event: 'END_CHECK_DATE_EVENT',
    //   emails: [],
    // },
    // {
    //   fieldName: '中期验货报告',
    //   fieldValue: 'midCheckReport',
    //   event: 'MID_CHECK_REPORT_EVENT',
    //   emails: [],
    // },
    // {
    //   fieldName: '尾期验货报告',
    //   fieldValue: 'endCheckReport',
    //   event: 'END_CHECK_REPORT_EVENT',
    //   emails: [],
    // },
  ];
  const schemas: FormSchema[] = [
    {
      field: 'typeValue',
      component: 'Select',
      label: '客户编码',
      componentProps: {
        options: customerCodeOptions,
      },
      colProps: {
        span: 23,
      },
      defaultValue: '',
      rules: [{ required: true }],
    },
    {
      field: 'configSample',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '确认样品确认状态(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'otherSample',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '其他需求样品发送时间(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'bigSample',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '大货样确认意见(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'aitexSgsTest',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: 'AITEX/SGS测试状态(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'barcodeArrival',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '要求包装到货日期(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'latestDc',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '最晚订舱时间(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'endCheckDate',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '尾期验货日期(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'midCheckReport',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '中期验货报告(填写邮箱)',
      rules: [{ required: true }],
    },
    {
      field: 'endCheckReport',
      component: 'InputTextArea',
      labelWidth: 250,
      colProps: {
        span: 23,
      },
      label: '尾期验货报告(填写邮箱)',
      rules: [{ required: true }],
    },
  ];
  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
    labelWidth: 120,
    schemas,
    layout: 'vertical',
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
    // 方式1
    resetFields();
    setDrawerProps({ confirmLoading: false });
  });

  interface ConfigInfo {
    fieldName: string; // 字段名称，必须
    fieldValue: string; // 字段值，必须
    event?: string; // 订单事件，非必须，可选字段
    emails: string[]; // 邮箱列表，必须
  }

  // 定义包含configInfos的更大对象
  interface ProductionDepartment {
    type: string; // 类型，必须
    typeValue: string; // 某个type中具体的值，必须
    configInfos: ConfigInfo[]; // 配置信息数组，必须
  }
  async function handleSubmit() {
    try {
      const values = await validate();
      //引入所有事件合集，给各个事件命名，用于匹配
      const configObject = configInfos.reduce((obj, item) => {
        obj[item.fieldValue] = item;
        return obj;
      }, {} as { [key: string]: ConfigInfo });
      const newValues = ref<ProductionDepartment>({
        type: '客户编码',
        typeValue: '',
        configInfos: [],
      });
      newValues.value.typeValue = values.typeValue;
      //添加邮件事件
      for (const value1 in values) {
        if (value1 != 'typeValue') {
          const arr: string[] = values[value1].split(/[,|，]/);
          configObject[value1].emails = arr;
          newValues.value.configInfos.push(configObject[value1]);
        }
      }
      emit('success2', {
        values: { ...newValues.value },
      });
      setDrawerProps({ confirmLoading: true });
      closeDrawer();
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>