|
@@ -37,7 +37,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-tab-pane>
|
|
|
- <!-- <el-tab-pane label="联系人" name="second">
|
|
|
+ <el-tab-pane label="联系人" name="second">
|
|
|
<template #label>
|
|
|
<div>
|
|
|
<i
|
|
@@ -55,7 +55,7 @@
|
|
|
<span>客户</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- </el-tab-pane> -->
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div>
|
|
|
<el-button
|
|
@@ -273,8 +273,99 @@
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName === 'second'">暂未开放</div>
|
|
|
- <div v-if="activeName === 'third'">暂未开放</div>
|
|
|
+ <div v-if="activeName === 'second'">
|
|
|
+ <div
|
|
|
+ class="tree"
|
|
|
+ v-if="contactsTreeData && contactsTreeData.length > 0"
|
|
|
+ style="border-top: none; margin-top: 0px"
|
|
|
+ >
|
|
|
+ <el-tree
|
|
|
+ :data="contactsTreeData"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="
|
|
|
+ (data, node) => handleCustomerTreeClick(data, node, 'contacts')
|
|
|
+ "
|
|
|
+ v-loading="contactsTreeLoading"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="tree-content">
|
|
|
+ <span>{{ data.name }}</span>
|
|
|
+ <el-popover
|
|
|
+ placement="bottom-start"
|
|
|
+ title=""
|
|
|
+ :width="150"
|
|
|
+ trigger="click"
|
|
|
+ v-if="data.parentId === '0'"
|
|
|
+ >
|
|
|
+ <div default style="display: flex">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click.stop="handleEditContacts(data)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click.stop="handleDelContacts(data)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <template #reference>
|
|
|
+ <span
|
|
|
+ class="iconfont icon_more iconColor"
|
|
|
+ style="padding-bottom: 5px; margin-left: auto"
|
|
|
+ >...</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 0 10px; margin-top: 15px">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ :icon="Plus"
|
|
|
+ style="width: 100%; font-size: 12px"
|
|
|
+ @click="handleAddContact"
|
|
|
+ >添加联系人</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="activeName === 'third'">
|
|
|
+ <div
|
|
|
+ class="tree"
|
|
|
+ v-if="customerList && customerList.length > 0"
|
|
|
+ style="border-top: none; margin-top: 0px"
|
|
|
+ >
|
|
|
+ <el-tree
|
|
|
+ :data="customerList"
|
|
|
+ node-key="id"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ default-expand-all
|
|
|
+ @node-click="
|
|
|
+ (data, node) => handleCustomerTreeClick(data, node, 'customer')
|
|
|
+ "
|
|
|
+ v-loading="customerLoading"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="tree-content">
|
|
|
+ <span v-if="data.parentId === '0'"
|
|
|
+ >{{ data.name }}
|
|
|
+ <span
|
|
|
+ v-if="data.parentId === '0' && data.children.length === 0"
|
|
|
+ >
|
|
|
+ (点击获取客户邮箱)</span
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span v-else> {{ data.name }} {{ data.email }} </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
:title="editType === 'add' ? '添加文件夹' : '编辑文件夹'"
|
|
@@ -333,10 +424,82 @@
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ :title="editType === 'add' ? '添加联系人' : '编辑联系人'"
|
|
|
+ v-model="contactsDialog"
|
|
|
+ width="400px"
|
|
|
+ destroy-on-close
|
|
|
+ v-loading="submitLoading"
|
|
|
+ >
|
|
|
+ <byForm
|
|
|
+ :formConfig="contactsFormConfig"
|
|
|
+ :formOption="formOption"
|
|
|
+ v-model="formData.contactsData"
|
|
|
+ :rules="contactsRules"
|
|
|
+ ref="contactsForm"
|
|
|
+ >
|
|
|
+ <template #mailSet>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button type="primary" @click="clickAddRow">添 加</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="formData.contactsData.mailSet"
|
|
|
+ style="width: 100%; margin-top: 16px"
|
|
|
+ >
|
|
|
+ <el-table-column label="电子邮箱">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-form-item
|
|
|
+ :prop="'mailSet.' + $index + '.email'"
|
|
|
+ :rules="contactsRules.email"
|
|
|
+ :inline-message="true"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="row.email"
|
|
|
+ placeholder="请输入电子邮箱"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="操作"
|
|
|
+ width="80"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ link
|
|
|
+ @click="handleRemoveRow($index)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byForm>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="contactsDialog = false" size="large"
|
|
|
+ >取 消</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitContactsForm()"
|
|
|
+ size="large"
|
|
|
+ :loading="submitLoading"
|
|
|
+ >
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { Plus } from "@element-plus/icons-vue";
|
|
|
import useMailStore from "@/store/modules/mail";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
import byForm from "@/components/byForm/index";
|
|
@@ -380,6 +543,7 @@ const myFolderFormConfig = computed(() => [
|
|
|
const formData = reactive({
|
|
|
myFolderData: {},
|
|
|
tagData: {},
|
|
|
+ contactsData: {},
|
|
|
});
|
|
|
const rules = ref({
|
|
|
name: [{ required: true, message: "请输入文件夹名称", trigger: "blur" }],
|
|
@@ -401,6 +565,134 @@ const tagRules = ref({
|
|
|
name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
|
|
|
});
|
|
|
|
|
|
+const customerList = ref([]);
|
|
|
+const customerLoading = ref([]);
|
|
|
+
|
|
|
+const getCustomerList = () => {
|
|
|
+ customerLoading.value = true;
|
|
|
+ proxy.post("/myCustomer/list").then((res) => {
|
|
|
+ customerList.value = res.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ parentId: "0",
|
|
|
+ children: [],
|
|
|
+ }));
|
|
|
+ customerLoading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const contactsTreeData = ref([]);
|
|
|
+const contactsTreeLoading = ref([]);
|
|
|
+const contactsForm = ref(null);
|
|
|
+const contactsDialog = ref(false);
|
|
|
+const contactsFormConfig = computed(() => [
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "name",
|
|
|
+ label: "联系人名称",
|
|
|
+ disabled: false,
|
|
|
+ itemWidth: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ prop: "mailSet",
|
|
|
+ slotName: "mailSet",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const contactsRules = ref({
|
|
|
+ name: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
|
|
|
+ email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
|
|
|
+});
|
|
|
+
|
|
|
+const submitContactsForm = () => {
|
|
|
+ contactsForm.value.handleSubmit(() => {
|
|
|
+ if (formData.contactsData.mailSet.length > 0) {
|
|
|
+ submitLoading.value = true;
|
|
|
+ formData.contactsData.mailSet = formData.contactsData.mailSet
|
|
|
+ .map((x) => x.email)
|
|
|
+ .join();
|
|
|
+ proxy
|
|
|
+ .post("/myContactPerson/" + editType.value, formData.contactsData)
|
|
|
+ .then(
|
|
|
+ (res) => {
|
|
|
+ ElMessage({
|
|
|
+ message: `操作成功!`,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ contactsDialog.value = false;
|
|
|
+ submitLoading.value = false;
|
|
|
+ getContactsTreeData();
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ submitLoading.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ message: "请添加邮箱",
|
|
|
+ type: "info",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const clickAddRow = () => {
|
|
|
+ formData.contactsData.mailSet.push({
|
|
|
+ email: "",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleRemoveRow = (index) => {
|
|
|
+ formData.contactsData.mailSet.splice(index, 1);
|
|
|
+};
|
|
|
+
|
|
|
+const getContactsTreeData = () => {
|
|
|
+ contactsTreeLoading.value = true;
|
|
|
+ proxy.post("/myContactPerson/page").then((res) => {
|
|
|
+ contactsTreeData.value = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ parentId: "0",
|
|
|
+ children: x.mailSet.split(",").map((y) => ({ name: y })),
|
|
|
+ }));
|
|
|
+ contactsTreeLoading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleAddContact = () => {
|
|
|
+ formData.contactsData = {
|
|
|
+ name: "",
|
|
|
+ mailSet: [],
|
|
|
+ };
|
|
|
+ editType.value = "add";
|
|
|
+ contactsDialog.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleEditContacts = (data) => {
|
|
|
+ editType.value = "edit";
|
|
|
+ proxy.post("/myContactPerson/detail", { id: data.id }).then((res) => {
|
|
|
+ res.mailSet = res.mailSet.split(",").map((x) => ({ email: x }));
|
|
|
+ formData.contactsData = res;
|
|
|
+ contactsDialog.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleDelContacts = (data) => {
|
|
|
+ ElMessageBox.confirm(`此操作将删除该联系人, 是否继续?`, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ // 删除
|
|
|
+ proxy.post("/myContactPerson/delete", { id: data.id }).then((res) => {
|
|
|
+ ElMessage({
|
|
|
+ message: `操作成功!`,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ getContactsTreeData();
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
const getTagsList = () => {
|
|
|
proxy
|
|
|
.post("/myTag/page", {
|
|
@@ -664,7 +956,7 @@ const handleOpenMenu = (item, listPageType = "10") => {
|
|
|
mailStore.currentId = menu.id;
|
|
|
};
|
|
|
|
|
|
-const handleGoWrite = (mail = "", pageType = "0") => {
|
|
|
+const handleGoWrite = (mail = {}, pageType = "0") => {
|
|
|
const menu = {
|
|
|
title: "写信",
|
|
|
type: selectMail.value.type,
|
|
@@ -764,9 +1056,36 @@ const handleTreeNodeNewClick = (data, node) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handleCustomerTreeClick = (data, node, type) => {
|
|
|
+ if (type === "customer") {
|
|
|
+ if (data.parentId === "0") {
|
|
|
+ const index = customerList.value.findIndex((x) => x.id === data.id);
|
|
|
+ if (index !== -1 && customerList.value[index].children.length === 0) {
|
|
|
+ customerLoading.value = true;
|
|
|
+ proxy.post("/customer/detail", { id: data.id }).then((res) => {
|
|
|
+ if (res.customerUserList && res.customerUserList.length > 0) {
|
|
|
+ customerList.value[index].children = res.customerUserList;
|
|
|
+ }
|
|
|
+ customerLoading.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ handleGoWrite({ email: data.email, personal: data.name }, "0");
|
|
|
+ }
|
|
|
+ } else if (type === "contacts") {
|
|
|
+ if (data.parentId === "0") {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ handleGoWrite({ email: data.name, personal: node.parent.data.name }, "0");
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getMialList();
|
|
|
+ getCustomerList();
|
|
|
getTagsList();
|
|
|
+ getContactsTreeData();
|
|
|
});
|
|
|
|
|
|
defineExpose({
|
|
@@ -867,6 +1186,9 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
.top {
|
|
|
+ .el-badge__content.is-fixed {
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
.el-tabs__item {
|
|
|
color: #616161;
|
|
|
font-size: 12px;
|