CRM系统前端
查看 | 历史 | 提交 | 提交对比
Sanakey
5 天以前 2af71bcf522c485ea005184c977986374a7dcc4a
提交 | 用户 | age
67287b 1 <template>
H 2   <div class="p-2" style="margin-left: 20px">
2c1249 3     <h2 class="title" style="font-size: 20px">常规</h2>
67287b 4
63d608 5     <a-form style="width: 60%" :labelCol="{ span: 2 }">
67287b 6       <div>
2c1249 7         <h2 class="title">账号</h2>
67287b 8         <a-form-item label="默认邮箱">
63d608 9           <a-select class='w-200'>
67287b 10             <a-select-option v-for="(item, index) in emailList" :key="index" :value="item.email">
H 11               {{ item.email }}
12             </a-select-option>
13           </a-select>
14           <span style="font-size: 12px">在绑定多个邮箱的情况下，发信时默认选择该邮箱。</span>
15         </a-form-item>
16       </div>
17
18       <div>
2c1249 19         <h2 class="title">签名</h2>
67287b 20         <a-form-item label="个性签名">
H 21           <div style="display: flex">
22             <a-select @change="fnSignatureChange" v-model:value="signature">
23               <a-select-option
24                 v-for="(item, index) in signatureList"
25                 :key="index"
26                 :value="item.signId"
27               >
28                 {{ item.signName }}
29               </a-select-option>
30             </a-select>
31             <PlusCircleOutlined style="margin-left: 20px" @click="showModal('add')" />
32           </div>
33         </a-form-item>
63d608 34         <a-form-item :labelCol="{ span: 2 }" label="内容">
67287b 35           <div style="height: 200px; overflow: hidden; border-bottom: 1px solid #d9d9d9">
2c1249 36             <TinymcePw v-model="signContent"></TinymcePw>
67287b 37           </div>
H 38           <div style="margin-top: 20px; text-align: right">
2c1249 39             <a-button type="primary" size="small" @click="showModal('update')">编辑</a-button>
67287b 40             <a-button size="small" style="margin-left: 20px">删除</a-button>
H 41           </div>
42         </a-form-item>
43       </div>
44     </a-form>
45     <a-modal :width="700" v-model:open="open" :title="`${title}个性签名`" @ok="handleOk">
46       <a-form ref="formRef" :model="form" style="margin-top: 20px">
47         <a-form-item
48           label="名称"
49           name="signName"
50           :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
51         >
52           <a-input v-model:value="form.signName" placeholder="请输入名称" />
53         </a-form-item>
54         <a-form-item label="内容">
2c1249 55           <Tinymce v-model="form.signContent" :isElse="false" :isText="false"></Tinymce>
67287b 56         </a-form-item>
H 57       </a-form>
58     </a-modal>
59   </div>
60 </template>
61
62 <script lang="ts" setup>
63   name: 'convention';
2c1249 64   import { nextTick, onMounted, ref } from 'vue';
67287b 65   import { getAccountListApi } from '@/api/email/userList';
H 66   import { PlusCircleOutlined } from '@ant-design/icons-vue';
2c1249 67   import { TinymcePw, Tinymce } from '@/components/Tinymce';
H 68   import { addSignatureApi, getSignatureApi, updateSignatureApi } from '@/api/email/userList';
67287b 69
H 70   interface EmailItem {
71     email: string;
72   }
73   const emailList = ref<EmailItem[]>([]);
74   const signatureList = ref<any[]>([]);
75   function getEmailSelect() {
76     getAccountListApi().then((res) => {
77       emailList.value = res.data;
78       console.log(res);
79     });
80
81     getSignatureApi({}).then((res) => {
82       signatureList.value = res.data;
83     });
84   }
85   onMounted(() => {
86     getEmailSelect();
87   });
88   const open = ref(false);
89   const signType = ref('add');
2c1249 90   const form = ref<Record<string, any>>({});
H 91   const title = ref('新建');
67287b 92   const showModal = (type) => {
H 93     signType.value = type;
94     open.value = true;
2c1249 95     if (type == 'add') {
H 96       form.value = {
97         signName: '',
98         signContent: '',
99       };
100     } else {
101       title.value = '编辑';
102       nextTick(() => {
103         formRef.value.resetFields();
104         getSign(signature.value);
105       });
106     }
67287b 107   };
2c1249 108   function getSign(id) {
H 109     const matchedItem = signatureList.value.find((item) => item.signId === id);
110     if (matchedItem) {
111       form.value = Object.assign(form.value, matchedItem);
112     }
113   }
67287b 114   import { useMessage } from '@/hooks/web/useMessage';
H 115   const { createMessage } = useMessage();
116   const formRef = ref();
2c1249 117   const signContent = ref();
67287b 118   function fnSignatureChange(e) {
H 119     const matchedItem = signatureList.value.find((item) => item.signId === e);
120     if (matchedItem) {
121       signContent.value = matchedItem.signContent;
122     } else {
123       signContent.value = '';
124     }
125   }
126   const signature = ref();
127   const handleOk = (e: MouseEvent) => {
128     formRef.value
129       .validate()
130       .then(() => {
131         const data = form.value;
2c1249 132         const api = signType.value == 'update' ? updateSignatureApi : addSignatureApi;
H 133         // const api = addSignatureApi;
67287b 134         api(data).then((res) => {
H 135           if (res.code === 0) {
136             createMessage.success(res.msg);
137             open.value = false;
138           }
139         });
140       })
141       .catch((e) => {
142         console.log(e);
143       });
144   };
145 </script>
146 <style scoped lang="less">
147   .title {
148     margin-bottom: 20px;
149     font-size: 16px;
150     font-weight: 600;
151   }
152 </style>