<template>
|
<div class="p-2" style="margin-left: 20px">
|
<h2 class="title" style="font-size: 20px">常规</h2>
|
|
<a-form style="width: 60%" :labelCol="{ span: 2 }">
|
<div>
|
<h2 class="title">账号</h2>
|
<a-form-item label="默认邮箱">
|
<a-select class='w-200'>
|
<a-select-option v-for="(item, index) in emailList" :key="index" :value="item.email">
|
{{ item.email }}
|
</a-select-option>
|
</a-select>
|
<span style="font-size: 12px">在绑定多个邮箱的情况下，发信时默认选择该邮箱。</span>
|
</a-form-item>
|
</div>
|
|
<div>
|
<h2 class="title">签名</h2>
|
<a-form-item label="个性签名">
|
<div style="display: flex">
|
<a-select @change="fnSignatureChange" v-model:value="signature">
|
<a-select-option
|
v-for="(item, index) in signatureList"
|
:key="index"
|
:value="item.signId"
|
>
|
{{ item.signName }}
|
</a-select-option>
|
</a-select>
|
<PlusCircleOutlined style="margin-left: 20px" @click="showModal('add')" />
|
</div>
|
</a-form-item>
|
<a-form-item :labelCol="{ span: 2 }" label="内容">
|
<div style="height: 200px; overflow: hidden; border-bottom: 1px solid #d9d9d9">
|
<TinymcePw v-model="signContent"></TinymcePw>
|
</div>
|
<div style="margin-top: 20px; text-align: right">
|
<a-button type="primary" size="small" @click="showModal('update')">编辑</a-button>
|
<a-button size="small" style="margin-left: 20px">删除</a-button>
|
</div>
|
</a-form-item>
|
</div>
|
</a-form>
|
<a-modal :width="700" v-model:open="open" :title="`${title}个性签名`" @ok="handleOk">
|
<a-form ref="formRef" :model="form" style="margin-top: 20px">
|
<a-form-item
|
label="名称"
|
name="signName"
|
:rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
|
>
|
<a-input v-model:value="form.signName" placeholder="请输入名称" />
|
</a-form-item>
|
<a-form-item label="内容">
|
<Tinymce v-model="form.signContent" :isElse="false" :isText="false"></Tinymce>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
name: 'convention';
|
import { nextTick, onMounted, ref } from 'vue';
|
import { getAccountListApi } from '@/api/email/userList';
|
import { PlusCircleOutlined } from '@ant-design/icons-vue';
|
import { TinymcePw, Tinymce } from '@/components/Tinymce';
|
import { addSignatureApi, getSignatureApi, updateSignatureApi } from '@/api/email/userList';
|
|
interface EmailItem {
|
email: string;
|
}
|
const emailList = ref<EmailItem[]>([]);
|
const signatureList = ref<any[]>([]);
|
function getEmailSelect() {
|
getAccountListApi().then((res) => {
|
emailList.value = res.data;
|
console.log(res);
|
});
|
|
getSignatureApi({}).then((res) => {
|
signatureList.value = res.data;
|
});
|
}
|
onMounted(() => {
|
getEmailSelect();
|
});
|
const open = ref(false);
|
const signType = ref('add');
|
const form = ref<Record<string, any>>({});
|
const title = ref('新建');
|
const showModal = (type) => {
|
signType.value = type;
|
open.value = true;
|
if (type == 'add') {
|
form.value = {
|
signName: '',
|
signContent: '',
|
};
|
} else {
|
title.value = '编辑';
|
nextTick(() => {
|
formRef.value.resetFields();
|
getSign(signature.value);
|
});
|
}
|
};
|
function getSign(id) {
|
const matchedItem = signatureList.value.find((item) => item.signId === id);
|
if (matchedItem) {
|
form.value = Object.assign(form.value, matchedItem);
|
}
|
}
|
import { useMessage } from '@/hooks/web/useMessage';
|
const { createMessage } = useMessage();
|
const formRef = ref();
|
const signContent = ref();
|
function fnSignatureChange(e) {
|
const matchedItem = signatureList.value.find((item) => item.signId === e);
|
if (matchedItem) {
|
signContent.value = matchedItem.signContent;
|
} else {
|
signContent.value = '';
|
}
|
}
|
const signature = ref();
|
const handleOk = (e: MouseEvent) => {
|
formRef.value
|
.validate()
|
.then(() => {
|
const data = form.value;
|
const api = signType.value == 'update' ? updateSignatureApi : addSignatureApi;
|
// const api = addSignatureApi;
|
api(data).then((res) => {
|
if (res.code === 0) {
|
createMessage.success(res.msg);
|
open.value = false;
|
}
|
});
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
};
|
</script>
|
<style scoped lang="less">
|
.title {
|
margin-bottom: 20px;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
</style>
|
