feat:合并分支

Sanakey

2024-09-04 8432b405b25ad58ae23d0b1a60c0b001236d4144

 src/views/email/components/Editor.vue

@@ -1,123 +1,426 @@
<template>
  <PageWrapper title="编辑邮件">
    <BasicForm ref="formRef" :labelWidth="100" :schemas="schemas" :actionColOptions="{ span: 24 }" :baseColProps="{ span: 24 }"
      @submit="handleSubmit">
      <template #checkboxGroup="{ model, field }">
        <div>
          <a-button shape="round" type="link" block size="small" @click="checkboxChange($event,field)" >{{model[field] == true?'抄送':'取消抄送'}}</a-button>
  <div>
    <div class="p-1">
      <a-form ref="formRef" :label-col="{ span: 2 }" :wrapper-col="{ span: 24 }" :model="modelRef">
        <a-form-item :wrapper-col="{ span: 10 }">
          <div style="display: flex; justify-content: space-evenly">
            <a-button type="primary" shape="round" @click="fnHandleSubmit(modelRef)">发送</a-button>
            <a-button shape="round">存草稿</a-button>
            <a-button shape="round">预览</a-button>
            <a-button shape="round">提交审批</a-button>
            <a-button shape="round">取消</a-button></div
          >
        </a-form-item>
        <a-form-item label="发件人" v-bind="validateInfos.sender" :wrapper-col="{ span: 12 }">
          <a-select
            v-model:value="modelRef.sender"
            placeholder="选择发件人"
            show-search
            :field-names="{ label: 'name', value: 'id' }"
            :options="state.data"
            :filter-option="fnFilterOption"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="收件人" v-bind="validateInfos.recipients" :wrapper-col="{ span: 18 }">
          <a-row>
            <a-col class="gutter-row" :span="16">
              <a-select
                mode="multiple"
                show-search
                placeholder="请选择收件人或者输入收件人邮箱"
                v-model:value="modelRef.recipients"
                :options="state.data"
                :field-names="{ label: 'name', value: 'id' }"
                :maxTagCount="4"
                :filter-option="fnFilterOption"
              />
            </a-col>
            <a-col
              class="gutter-row"
              :span="2"
              style="display: flex; align-items: center; justify-content: center"
            >
              <plus-circle-outlined
                style="color: rgb(0 0 0 / 45%)"
                @click="fnHandleSelect('recipients')"
              />
            </a-col>
            <a-col class="gutter-row" :span="1">
              <a-form-item-rest>
                <a-button
                  shape="round"
                  type="link"
                  block
                  size="small"
                  @click="ccCheckboxChange($event)"
                >
                  {{ !isSecretDeliveryPerson ? '抄送' : '取消抄送' }}
                </a-button>
              </a-form-item-rest>
            </a-col>
            <a-col class="gutter-row" :span="1">
              <a-form-item-rest>
                <a-button
                  shape="round"
                  type="link"
                  block
                  size="small"
                  @click="bccCheckboxChange($event)"
                >
                  {{ !isCRecipient ? '密送' : '取消密送' }}
                </a-button>
              </a-form-item-rest>
            </a-col>
          </a-row>
        </a-form-item>
        <span style="position: relative; top: -18px; left: 9%" v-if="modelRef.recipients.length">
          {{ userParticulars && `${userParticulars.name}<${userParticulars.email}` }}>
          <span v-if="!userParticulars.title" style="margin-right: 10px; margin-left: 5px">
            暂未查询到该客户的当地时间
            <a @click="fnHandleTimeZone(userParticulars, 'add')">补充时区</a>
          </span>
          <span v-else>
            {{ userParticulars.title }}
            <a @click="fnHandleTimeZone(userParticulars, 'update')">时区不对？</a>
          </span>

          <a v-if="modelRef.recipients.length > 2">查看全部</a>
        </span>

        <a-form-item
          label="抄送人"
          v-bind="validateInfos.ccRecipients"
          v-if="isSecretDeliveryPerson"
          :wrapper-col="{ span: 18 }"
        >
          <a-row>
            <a-col class="gutter-row" :span="16">
              <a-select
                mode="multiple"
                show-search
                placeholder="请选择抄送人或者输入抄送人邮箱"
                v-model:value="modelRef.ccRecipients"
                :options="state.data"
                :field-names="{ label: 'name', value: 'id' }"
                :maxTagCount="4"
                :filter-option="fnFilterOption"
              />
            </a-col>
            <a-col
              class="gutter-row"
              :span="2"
              style="display: flex; align-items: center; justify-content: center"
            >
              <plus-circle-outlined
                style="color: rgb(0 0 0 / 45%)"
                @click="fnHandleSelect('ccRecipients')"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          label="密送人"
          v-bind="validateInfos.bccRecipients"
          v-if="isCRecipient"
          :wrapper-col="{ span: 18 }"
        >
          <a-row>
            <a-col class="gutter-row" :span="16">
              <a-select
                mode="multiple"
                show-search
                placeholder="请选择抄送人或者输入抄送人邮箱"
                v-model:value="modelRef.bccRecipients"
                :options="state.data"
                :field-names="{ label: 'name', value: 'id' }"
                :maxTagCount="4"
                :filter-option="fnFilterOption"
              />
            </a-col>
            <a-col
              class="gutter-row"
              :span="2"
              style="display: flex; align-items: center; justify-content: center"
            >
              <plus-circle-outlined
                style="color: rgb(0 0 0 / 45%)"
                @click="fnHandleSelect('bccRecipients')"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <div
          style="position: relative; top: -20px; left: 9%; color: #909090; font-size: 12px"
          v-if="modelRef.recipients.length"
        >
          {{ `${userLength}/100 收件人、抄送人和密送的联系人总数不可超过100` }}
        </div>
      </template>
    </BasicForm>
  </PageWrapper>
        <a-form-item
          label="主题"
          v-bind="validateInfos.subject"
          :wrapper-col="{ span: 12 }"
          :label-col="{ span: 2 }"
        >
          <a-input placeholder="请输入邮件主题" v-model:value="modelRef.subject" />
        </a-form-item>
        <a-form-item
          v-bind="validateInfos.content"
          :wrapper-col="{ span: 24 }"
          :label-col="{ span: 2 }"
        >
          <Tinymce @change = "fnChangeContent"></Tinymce>
        </a-form-item>
      </a-form>
    </div>
    <SelectUser
      ref="selectUserRef"
      v-model="openSelectUser"
      :selectIds="selectIds"
      :idName="idName"
      :title="selectUserTitle"
      @updateData="fnSelectUser"
    />
    <a-modal
      v-model:open="openTimeZone"
      :title="`${titleTimeZone}时区`"
      :confirm-loading="confirmLoading"
      @ok="fnHandleTimeZoneOk"
    >
      <a-form
        ref="formTimeZoneRef"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 24 }"
        :model="modelRef"
      >
        <a-form-item label="国家地区：" :wrapper-col="{ span: 12 }">
          <a-select
            v-model:value="modelRef.sender"
            placeholder="选择国家地区"
            show-search
            :field-names="{ label: 'name', value: 'id' }"
            :options="state.data"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="时区：" :wrapper-col="{ span: 12 }">
          <a-select
            v-model:value="modelRef.sender"
            placeholder="选择时区"
            show-search
            :field-names="{ label: 'name', value: 'id' }"
            :options="state.data"
          >
          </a-select>
        </a-form-item>
        <a-form-item :label-col="{ span: 6 }">
          <a-row>
            <a-col span="6"> </a-col>
            <a-col span="18">
              <div style="color: #909090"
                >当地实时时间根据时区信息显示<br />
                国家地区/时区信息在客户资料-特征信息查看</div
              >
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { h,ref } from 'vue';
import  { CheckboxGroup } from 'ant-design-vue';

import { BasicForm, FormSchema } from '@/components/Form';
import { useMessage } from '@/hooks/web/useMessage';
import { Tinymce } from '@/components/Tinymce';
import { PageWrapper } from '@/components/Page';
const ACheckboxGroup = CheckboxGroup;

const optionsWithDisabled = [
  { label: 'Joe', value: 'Joe' },
  { label: 'Jim', value: 'Jim' }
]
const schemas: FormSchema[] = [
  {
    field: 'sender',
    component: 'Input',
    label: '发件人',
    defaultValue: '',
    rules: [{ required: true }],
  },
  {
    field: 'recipient',
    component: 'Select',
    label: '收件人',
    defaultValue: '',
    helpMessage: '收件人、抄送人和密送的联系人总数不可超过100',
    rules: [{ required: true }],
    colProps: {
      span: 20,
    },
    componentProps: {
      placeholder: '请选择收件人或输入收件人邮箱',
      onChange: (e) => {
        console.log(e);
  import { ref, reactive, computed } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { Tinymce } from '@/components/Tinymce';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import SelectUser from './SelectUser.vue';
  import { Form } from 'ant-design-vue';
  const modelRef = reactive({
    sender: '',
    recipients: [],
    ccRecipients: [],
    bccRecipients: [],
    fileUNID:[],
    subject: '',
    content: '',
  });
  const rulesRef = reactive({
    sender: [
      {
        required: true,
        message: '发件人不能为空',
      },
    },
  },
  {
    field: 'field5',
    label: '',
    slot: 'checkboxGroup',
    defaultValue: true,
    colProps: {
      span: 2,
    },
  },
  {
    field: 'field6',
    label: '',
    slot: 'checkboxGroup',
    colProps: {
      span: 4,
    },
  },
  {
    field: 'theme',
    component: 'Input',
    label: '抄送人',
    defaultValue: '',
    rules: [{ required: false }],
    show: (e) => {
      // debugger
      return !e.values.field5;
    ],
    recipients: [
      {
        required: true,
        message: '收件人不能为空',
      },
    ],
    subject: [
      {
        required: true,
        message: '主题不能为空',
      },
    ],
    content: [
      {
        required: true,
        message: '内容不能为空',
      },
    ],
  });
  const useForm = Form.useForm;
  const { validate, validateInfos } = useForm(modelRef, rulesRef);

  const formRef = ref();

  let isSecretDeliveryPerson = ref(false);

  let isCRecipient = ref(false);
  const handleCheckboxChange = (ref, e) => {
    ref.value = !ref.value;
  };

  const ccCheckboxChange = (e) => {
    handleCheckboxChange(isSecretDeliveryPerson, e);
  };
  const bccCheckboxChange = (e) => {
    handleCheckboxChange(isCRecipient, e);
  };

  const { createMessage } = useMessage();
  import { getUserListApi,sendingMailApi,receiveApi } from '@/api/email/userList';
  // 定义状态管理对象
  const state = reactive({
    data: [],
    fetching: false,
    error: null,
  });

  // 获取用户列表的函数
  const fnGetUserList = async (params) => {
    try {
      state.fetching = true;
      const res = await getUserListApi(params);
      const data = await receiveApi({mail:'574600396@qq.com'})
      console.log(data,'--------');
      

      if (res && res.items && Array.isArray(res.items)) {
        state.data = res.items;
      } else {
        console.error('Invalid response format:', res);
      }
    } catch (error) {
      console.error('Failed to fetch user list:', error);
    } finally {
      state.fetching = false;
    }
  },
  {
    field: 'theme',
    component: 'Input',
    label: '密送人',
    defaultValue: '',
    rules: [{ required: false }],
  },
  {
    field: 'theme',
    component: 'Input',
    label: '主题',
    defaultValue: '',
    rules: [{ required: true }],
  },
  {
    field: 'tinymce',
    component: 'Input',
    label: '',
    defaultValue: 'defaultValue',
    rules: [{ required: true }],
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
  };

  // 初始化用户数据
  const fetchData = async () => {
    await fnGetUserList({ page: 1, pageSize: 30 });
  };
  console.log(state.data, 'state.data');
  // 调用初始化函数
  fetchData();

  const fnFilterOption = (input: string, option: any) => {
    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const openSelectUser = ref(false);
  const selectUserTitle = ref('选择收件人');
  const selectIds = ref([]);
  const idName = ref('');
  const fnHandleSelect = (e) => {
    if (e === 'recipients') {
      selectUserTitle.value = '选择收件人';
      idName.value = e;
    }
    if (e === 'ccRecipients') {
      selectUserTitle.value = '选择抄送人';
      idName.value = e;
    }
    if (e === 'bccRecipients') {
      selectUserTitle.value = '选择密送人';
      idName.value = e;
    }
    selectIds.value = modelRef[e];
    openSelectUser.value = true;
  };

  function fnChangeContent(e) {
    modelRef.content = e.content;
    modelRef.fileUNID = e.fileUNID
  }
  function fnHandleSubmit(values: any) {
    validate()
      .then((res) => {

        sendingMailApi(modelRef).then((res=>{

        }))
        createMessage.success('发送成功');
      })
      .catch((error) => {
        createMessage.error('表单验证失败');
      });
    },
  },
];
  }
  const fnSelectUser = (e) => {
    modelRef[e.idName] = e.selectedRowKeys;
  };

const formRef = ref()
const checkboxChange = (e,id) => {
  console.log(`checked = ${e}`, id);
  formRef.value.setFieldsValue({field5: !formRef.value.getFieldsValue().field5})
  
}
  const userLength = computed(() => {
    return (
      modelRef.recipients.length + modelRef.ccRecipients.length + modelRef.bccRecipients.length
    );
  });

const { createMessage } = useMessage();
  interface Recipient {
    value: string;
    email: string;
    title: string;
  }

function handleSubmit(values: any) {
  createMessage.success('click search,values:' + JSON.stringify(values));
}
  const userParticulars = computed<Recipient | null>(() => {
    const recipientId = modelRef.recipients?.[0];
    if (!recipientId) {
      console.error('Recipient ID is not defined.');
      return { value: '', email: '', title: '' };
    }
    // 使用 find 方法查找匹配项
    const foundItem = state.data.find((item) => item.id === recipientId);

    // 返回找到的项，如果未找到则返回 null
    return foundItem || { value: '', email: '', title: '' };
  });
  const fnHandleTimeZone = (e, type) => {
    console.log('fnHandleTimeZone');
    if (type == 'add') {
      titleTimeZone.value = '添加';
      typeTimeZone.value = 1;
    } else {
      titleTimeZone.value = '修改';
      typeTimeZone.value = 2;
    }
    openTimeZone.value = true;
  };

  const openTimeZone = ref<boolean>(false);
  const confirmLoading = ref<boolean>(false);
  const titleTimeZone = ref<string>('添加');
  const typeTimeZone = ref<number>(1);

  const fnHandleTimeZoneOk = () => {
    confirmLoading.value = true;
    setTimeout(() => {
      openTimeZone.value = false;
      confirmLoading.value = false;
    }, 2000);
  };
</script>
<style scoped lang="less"></style>