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

<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';

defineOptions({
  name: 'DetailMailModal',
});
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: 'Textarea',
      fieldName: 'items',
      label: '邮件道具',
      componentProps: {
        placeholder: '{}',
        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: {
        componentProps(values) {
          if (values.send_type === 2) {
            return {
              disabled: false,
              rules: 'required',
            };
          }
          return {
            disabled: true,
          };
        },
        triggerFields: ['send_type'],
      },
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',
  showConfirmButton: false,
  onOpened: async () => {
    const modalData = modalApi.getData();
    FormApi.setValues({
      Title: modalData.title,
      Subtitle: modalData.subtitle,
      Content: modalData.content,
      TitleEN: modalData.title_en,
      SubtitleEN: modalData.subtitle_en,
      ContentEN: modalData.content_en,
      items: modalData.items,
      start_time: 0,
      register_time: modalData.register_time,
      mail_type: modalData.mail_type === 1 ? '普通邮件' : '节日邮件',
      send_type: modalData.send_type === 1 ? '全服邮件' : '个人邮件',
      ToUids: modalData.to_uids,
    });
    FormApi.updateSchema([
      {
        component: 'Input',
        disabled: true,
        fieldName: 'Title',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'Subtitle',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'Content',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'TitleEN',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'SubtitleEN',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'ContentEN',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'items',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'start_time',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'register_time',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'mail_type',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'ToUids',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'send_type',
      },
    ]);
  },
});
</script>
<template>
  <Modal :width="800" title="邮件详情">
    <Form />
  </Modal>
</template>