|
|
@@ -18,6 +18,7 @@ const emits=defineEmits(['close'])
|
|
|
|
|
|
|
|
|
const emailOpt=ref([])
|
|
|
+const allEmailOpt = ref([])
|
|
|
// 获取用户邮箱数据
|
|
|
const showAllUser=ref(false)
|
|
|
function getEmailList(){
|
|
|
@@ -30,6 +31,7 @@ function getEmailList(){
|
|
|
}).then(res=>{
|
|
|
if(res.Ret===200){
|
|
|
emailOpt.value=res.Data?.List||[]
|
|
|
+ allEmailOpt.value = res.Data?.List||[]
|
|
|
// handleCheckAllChange()
|
|
|
}
|
|
|
})
|
|
|
@@ -39,6 +41,7 @@ getEmailList()
|
|
|
//获取报告对应的品种数据
|
|
|
const showSelectVariety=ref(false)
|
|
|
const varietyOpts=ref([])
|
|
|
+const isSlideCancelSend = ref(false);
|
|
|
function getVarietyList(){
|
|
|
apiReportVarietyEn.varietyList({
|
|
|
ReportId:props.reportId
|
|
|
@@ -58,6 +61,16 @@ function getVarietyList(){
|
|
|
}
|
|
|
getVarietyList()
|
|
|
|
|
|
+function clearVariety(item) {
|
|
|
+ item.select=false
|
|
|
+
|
|
|
+ if(!selectVariety.value.length) {
|
|
|
+ isSlideCancelSend.value = false
|
|
|
+ searchCustomVal.value=''
|
|
|
+ checkedCustom.value=[]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
//选中的品种
|
|
|
const selectVariety=computed(()=>{
|
|
|
return varietyOpts.value.filter(e=>e.select)
|
|
|
@@ -78,7 +91,12 @@ const disabledNum=computed(()=>{
|
|
|
})
|
|
|
const checked=ref([])//选择的用户
|
|
|
const checkedAll=ref(false)
|
|
|
-
|
|
|
+const checkedSendOtherList = ref([]);
|
|
|
+const searchVal=ref('')
|
|
|
+function handleSearchFilter(){
|
|
|
+ checked.value=[]
|
|
|
+ emailOpt.value=allEmailOpt.value.filter(item=>item.Name.indexOf(searchVal.value)>-1)
|
|
|
+}
|
|
|
function handleCheckAllChange(){
|
|
|
if(checkedAll.value){
|
|
|
checked.value=[]
|
|
|
@@ -90,33 +108,51 @@ function handleCheckAllChange(){
|
|
|
watch(
|
|
|
()=>checked.value,
|
|
|
(n)=>{
|
|
|
- if(n.length===(emailOpt.value.length-disabledNum.value)){
|
|
|
+ if(n.length&&n.length===(emailOpt.value.length-disabledNum.value)){
|
|
|
checkedAll.value=true
|
|
|
}else{
|
|
|
checkedAll.value=false
|
|
|
}
|
|
|
+ checkedSendOtherList.value = emailOpt.value.filter(_ => n.includes(_.Id))
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+watch(
|
|
|
+ ()=>selectVariety.value,
|
|
|
+ (n)=>{
|
|
|
+ n.length&&getCustomListEnFun()
|
|
|
}
|
|
|
)
|
|
|
|
|
|
|
|
|
-const showSearch=ref(false)
|
|
|
-const searchVal=ref('')
|
|
|
-const searchFilterOpt=ref([])
|
|
|
-const checkedFilter=ref([])
|
|
|
-function handleShowSearch(){
|
|
|
- checkedFilter.value=checked.value
|
|
|
- searchVal.value=''
|
|
|
- searchFilterOpt.value=[]
|
|
|
- showSearch.value=true
|
|
|
-}
|
|
|
-function handleSearchFilter(){
|
|
|
- searchFilterOpt.value=emailOpt.value.filter(item=>item.Name.indexOf(searchVal.value)>-1)
|
|
|
+const showCustomPop=ref(false)
|
|
|
+const searchCustomVal=ref('')
|
|
|
+const checkedCustom=ref([])
|
|
|
+const allCustomOptions=ref([])
|
|
|
+const customOptions = ref([])
|
|
|
+/* 品种关联的客户 */
|
|
|
+async function getCustomListEnFun(){
|
|
|
+ if(!selectVariety.value.length) return
|
|
|
+
|
|
|
+ const res = await apiReportEn.getCustomListEn({
|
|
|
+ PageSize:100000,
|
|
|
+ CurrentIndex:1,
|
|
|
+ EnPermissionIds:selectVariety.value.map(_ =>_.EnPermissionId).join(',')
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ customOptions.value = res.Data.List || []
|
|
|
+ allCustomOptions.value = res.Data.List || []
|
|
|
}
|
|
|
-function handleConfirmSearch(){
|
|
|
- checked.value=checkedFilter.value
|
|
|
- showSearch.value=false
|
|
|
+
|
|
|
+function handleSearchFilterCustom() {
|
|
|
+ checkedCustom.value=[]
|
|
|
+ customOptions.value=allCustomOptions.value.filter(item=>item.CompanyName.indexOf(searchCustomVal.value)>-1)
|
|
|
}
|
|
|
|
|
|
+const checkedCustomList = computed(() => {
|
|
|
+ return customOptions.value.filter(_ => checkedCustom.value.includes(_.CompanyId))
|
|
|
+})
|
|
|
+
|
|
|
|
|
|
|
|
|
// 发送邮件
|
|
|
@@ -129,6 +165,10 @@ function handleConfirmSendEmail(){
|
|
|
showToast('邮件主题请控制在100个字符以内')
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+ if(!selectVariety.value.length && !checked.value.length) return showToast('收件人、抄送至少填写一个')
|
|
|
+
|
|
|
+
|
|
|
const varietyIds=[]
|
|
|
selectVariety.value.forEach(item=>{
|
|
|
varietyIds.push(item.EnPermissionId)
|
|
|
@@ -137,7 +177,8 @@ function handleConfirmSendEmail(){
|
|
|
ReportId:props.reportId,
|
|
|
EmailIds:checked.value.join(','),
|
|
|
Theme:themeVal.value,
|
|
|
- EnPermissions:varietyIds
|
|
|
+ EnPermissions:varietyIds,
|
|
|
+ NoCompanyIds:checkedCustom.value,
|
|
|
}).then(res=>{
|
|
|
if(res.Ret===200){
|
|
|
showToast('发送成功')
|
|
|
@@ -152,15 +193,37 @@ function handleConfirmSendEmail(){
|
|
|
<template>
|
|
|
<div class="send-email-wrap">
|
|
|
<div class="top-box">
|
|
|
+ <label class="form-label">收件人</label>
|
|
|
<ul class="left-variety-box">
|
|
|
<li v-for="item in selectVariety" :key="item.EnPermissionId">
|
|
|
<span>{{item.EnPermissionName}}</span>
|
|
|
- <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="item.select=false">
|
|
|
+ <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="clearVariety(item)">
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <van-search readonly placeholder="搜索" @click="handleShowSearch" />
|
|
|
+ <!-- <van-search readonly placeholder="搜索" @click="handleShowSearch" /> -->
|
|
|
<img class="add-icon" src="@/assets/imgs/report/icon_add.png" alt="" @click="showSelectVariety=true">
|
|
|
- <img class="add-icon" src="@/assets/imgs/icon_user2.png" alt="" @click="showAllUser=true">
|
|
|
+
|
|
|
+ <van-icon :name="isSlideCancelSend?'arrow-up':'arrow-down'" style="margin-left:10px;font-size:24px" v-if="selectVariety.length" @click="isSlideCancelSend=!isSlideCancelSend"/>
|
|
|
+ </div>
|
|
|
+ <div class="top-box" v-if="isSlideCancelSend">
|
|
|
+ <label class="form-label">取消发送</label>
|
|
|
+ <ul class="left-variety-box">
|
|
|
+ <li v-for="(item,index) in checkedCustomList" :key="item.CompanyId">
|
|
|
+ <span>{{item.CompanyName}}</span>
|
|
|
+ <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="checkedCustom.splice(index,1)">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <img class="add-icon" src="@/assets/imgs/icon_user2.png" alt="" @click="showCustomPop=true;">
|
|
|
+ </div>
|
|
|
+ <div class="top-box">
|
|
|
+ <label class="form-label">抄送</label>
|
|
|
+ <ul class="left-variety-box">
|
|
|
+ <li v-for="(item,index) in checkedSendOtherList" :key="item.Id">
|
|
|
+ <span>{{item.Name}}</span>
|
|
|
+ <img class="icon" src="@/assets/imgs/icon_close.png" alt="" @click="checkedSendOtherList.splice(index,1)">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <img class="add-icon" src="@/assets/imgs/icon_user2.png" alt="" @click="showAllUser=true;checked=checkedSendOtherList.map(_ =>_.Id)">
|
|
|
</div>
|
|
|
<div class="theme-text-box">
|
|
|
<van-field
|
|
|
@@ -214,7 +277,7 @@ function handleConfirmSendEmail(){
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
- <!-- 所有客户 -->
|
|
|
+ <!-- 所有邮箱 -->
|
|
|
<van-popup
|
|
|
v-model:show="showAllUser"
|
|
|
position="bottom"
|
|
|
@@ -223,6 +286,9 @@ function handleConfirmSendEmail(){
|
|
|
>
|
|
|
<div class="send-email-wrap search-wrap">
|
|
|
<div class="head-box">选择联系人</div>
|
|
|
+ <div class="search-box">
|
|
|
+ <van-search v-model="searchVal" placeholder="搜索" @search="handleSearchFilter" @clear="handleSearchFilter"/>
|
|
|
+ </div>
|
|
|
<div class="list-wrap">
|
|
|
<div class="check-all-btn">
|
|
|
<van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
|
|
|
@@ -238,32 +304,29 @@ function handleConfirmSendEmail(){
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
- <!-- 搜索客户 -->
|
|
|
+
|
|
|
+ <!-- 英文客户列表 -->
|
|
|
<van-popup
|
|
|
- v-model:show="showSearch"
|
|
|
+ v-model:show="showCustomPop"
|
|
|
position="bottom"
|
|
|
round
|
|
|
+ closeable
|
|
|
>
|
|
|
<div class="send-email-wrap search-wrap">
|
|
|
- <div class="top-box">
|
|
|
- <van-search v-model="searchVal" placeholder="搜索" @search="handleSearchFilter" />
|
|
|
+ <div class="head-box">选择客户</div>
|
|
|
+ <div class="search-box">
|
|
|
+ <van-search v-model="searchCustomVal" placeholder="请输入客户名称" @search="handleSearchFilterCustom" @clear="handleSearchFilterCustom"/>
|
|
|
</div>
|
|
|
<div class="list-wrap">
|
|
|
- <van-checkbox-group v-model="checkedFilter">
|
|
|
+ <van-checkbox-group v-model="checkedCustom">
|
|
|
<van-checkbox
|
|
|
- v-for="item in searchFilterOpt"
|
|
|
- :key="item.Id"
|
|
|
- :name="item.Id"
|
|
|
+ v-for="item in customOptions"
|
|
|
+ :key="item.CompanyId"
|
|
|
+ :name="item.CompanyId"
|
|
|
:disabled="item.Enabled===0"
|
|
|
- >{{item.Name}}<{{item.Email}}></van-checkbox>
|
|
|
+ >{{item.CompanyName}}</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</div>
|
|
|
- <van-button
|
|
|
- class="submit-btn"
|
|
|
- block
|
|
|
- type="primary"
|
|
|
- @click="handleConfirmSearch"
|
|
|
- >完成</van-button>
|
|
|
</div>
|
|
|
</van-popup>
|
|
|
</template>
|
|
|
@@ -275,11 +338,12 @@ function handleConfirmSendEmail(){
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.top-box{
|
|
|
- padding: 0 30px;
|
|
|
- min-height: 128px;
|
|
|
+ padding: 20px 30px;
|
|
|
+ min-height: 100px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid $border-color;
|
|
|
+ .form-label { margin-right: 10px;}
|
|
|
.left-variety-box{
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -288,7 +352,7 @@ function handleConfirmSendEmail(){
|
|
|
position: relative;
|
|
|
padding-right: 10px;
|
|
|
margin-right: 10px;
|
|
|
- &::after{
|
|
|
+ /* &::after{
|
|
|
content:'';
|
|
|
display: block;
|
|
|
width: 4px;
|
|
|
@@ -298,7 +362,7 @@ function handleConfirmSendEmail(){
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
right: 0;
|
|
|
- }
|
|
|
+ } */
|
|
|
li{
|
|
|
padding: 8px 20px;
|
|
|
border-radius: 80px;
|
|
|
@@ -354,6 +418,7 @@ function handleConfirmSendEmail(){
|
|
|
.search-wrap{
|
|
|
padding-top: 0;
|
|
|
.head-box{
|
|
|
+ position: relative;
|
|
|
text-align: center;
|
|
|
line-height: 100px;
|
|
|
border-bottom: 1px solid $border-color;
|
|
|
@@ -370,13 +435,14 @@ function handleConfirmSendEmail(){
|
|
|
.top-box{
|
|
|
padding: 0 15px;
|
|
|
min-height: 64px;
|
|
|
+ .form-label { margin-right: 10px;}
|
|
|
.left-variety-box{
|
|
|
padding-right: 5px;
|
|
|
margin-right: 5px;
|
|
|
- &::after{
|
|
|
+ /* &::after{
|
|
|
width: 2px;
|
|
|
height: 20px;
|
|
|
- }
|
|
|
+ } */
|
|
|
li{
|
|
|
padding: 4px 10px;
|
|
|
border-radius: 40px;
|
