admin_web/apps/web-antd/src/views/operation/mail/mail-info.vue

<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import dayjs from 'dayjs';
import { addMailApi } from '#/api/core/mail';
import type { MailData } from '#/api/core/mail';

const [Form, FormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full h-full',
    },
  },
  // 使用 tailwindcss grid布局
  // 提交函数
  // 垂直布局，label和input在不同行，值为vertical
  layout: 'horizontal',
  showDefaultActions: false,
  // 水平布局，label和input在同一行
  schema: [
    {
      component: 'Input',
      fieldName: 'Title',
      label: '邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'Subtitle',
      label: '邮件副标题',
    },
    {
      component: 'Textarea',
      fieldName: 'Content',
      label: '邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitleEN',
      label: '英文邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'SubtitleEN',
      label: '英文邮件副标题',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentEN',
      label: '英文邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitlePTBR',
      label: '葡萄牙（巴西）邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'SubtitlePTBR',
      label: '葡萄牙（巴西）邮件副标题',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentPTBR',
      label: '葡萄牙（巴西）邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitleESLatam',
      label: '西班牙（拉美）邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'SubtitleESLatam',
      label: '西班牙（拉美）邮件副标题',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentESLatam',
      label: '西班牙（拉美）邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'Items',
      label: '邮件道具',
      componentProps: {
        placeholder: '[{"Id":1,"Num":1},{"Id":2,"Num":2}]',
        type: 'textarea',
        rows: 3,
      },
    },
    {
      component: 'RangePicker',
      fieldName: 'start_time',
      label: '时间区间',
    },
    {
      component: 'DatePicker',
      fieldName: 'register_time',
      label: '注册时间',
    },
    {
      component: 'Select',
      fieldName: 'mail_type',
      defaultValue: 1,
      label: '邮件类型',
      componentProps: {
        options: [
          {
            label: '节日邮件',
            value: 2,
          },
          {
            label: '普通邮件',
            value: 1,
          },
        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'send_type',
      defaultValue: 1,
      label: '邮件发送类型',
      componentProps: {
        options: [
          {
            label: '个人邮件',
            value: 2,
          },
          {
            label: '全服邮件',
            value: 1,
          },
        ],
      },
    },
    {
      component: 'Textarea',
      fieldName: 'ToUids',
      label: '玩家uids',
      componentProps: {
        disabled: true,
        placeholder: 'uid,uid ... 以‘，’分割',
        type: 'textarea',
        rows: 4,
      },
      dependencies: {
        triggerFields: ['send_type'],
        componentProps(values) {
          console.log('value' + values.send_type);
          if (values.send_type === 2) {
            return {
              disabled: false,
              rules: 'required',
            };
          }
          return {
            disabled: true,
          };
        },
      },
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',

  onConfirm: async () => {
    // 提交表单
    const values = await FormApi.getValues();
    const start_time =
      values.start_time && values.start_time.length > 0
        ? dayjs(values.start_time[0]).unix()
        : 0;
    const end_time =
      values.start_time && values.start_time.length > 0
        ? dayjs(values.start_time[1]).unix()
        : 0;
    const register_time = values.register_time
      ? dayjs(values.register_time).unix()
      : 0;
    const mail_type = values.mail_type;
    const send_type = values.send_type;
    const Title = values.Title;
    const Subtitle = values.Subtitle;
    const Content = values.Content;
    const TitleEN = values.TitleEN;
    const SubtitleEN = values.SubtitleEN;
    const ContentEN = values.ContentEN;
    const Items = values.Items;
    const ToUids = values.ToUids;
    const modalData = modalApi.getData();
    const param: MailData = {
      AppId: modalData.AppId,
      ServerId: modalData.ServerId,
      title: Title,
      subtitle: Subtitle,
      content: Content,
      title_en: TitleEN,
      subtitle_en: SubtitleEN,
      content_en: ContentEN,
      title_ptbr: values.TitlePTBR,
      subTitle_ptbr: values.SubtitlePTBR,
      content_ptbr: values.ContentPTBR,
      title_es_latam: values.TitleESLatam,
      subTitle_es_latam: values.SubtitleESLatam,
      content_es_latam: values.ContentESLatam,
      items: Items,
      to_uids: ToUids,
      start_time: start_time,
      end_time: end_time,
      register_time: register_time,
      mail_type: mail_type,
      send_type: send_type,
    };
    await addMailApi(param);
    modalApi.close();
  },
});

defineOptions({
  name: 'AddMailModal',
});
</script>
<template>
  <Modal :width="800" title="添加邮件">
    <Form />
  </Modal>
</template>