Merge branch 'crm_13.4'

src/api/reportEn.js

@@ -68,6 +68,7 @@ export default {
      * @param ReportId
      * @param EmailIds
      * @param Theme
+     * @param EnPermissions 选择的报告所关联的品种
      */
     sendEmail:params=>{
         return post('/english_report/email/send',params)

src/api/reportVarietyEn.js

@@ -0,0 +1,17 @@
+/**
+ * 英文报告品种接口模块
+ */
+
+import {get,post} from './index'
+
+export default{
+    /**
+     * 品种数据
+     * @param ReportId 报告id
+     * @param VideoId 视频id
+     * @param Keyword
+     */
+    varietyList(params){
+        return get('/en_permission/list',params)
+    }
+}

src/views/reportEn/components/SendEmail.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {computed, ref, watch} from 'vue'
 import apiReportEn from '@/api/reportEn'
+import apiReportVarietyEn from '@/api/reportVarietyEn'
 import { showToast } from 'vant'
 
 const props=defineProps({
@@ -18,39 +19,64 @@ const emits=defineEmits(['close'])
 
 const emailOpt=ref([])
 // 获取用户邮箱数据
+const showAllUser=ref(false)
 function getEmailList(){
     apiReportEn.getCustomEmailList({
         CurrentIndex:1,
         PageSize:10000,
-        ListParam:4
+        ListParam:4,
+        SortType:1,
+        SortParam:3
     }).then(res=>{
         if(res.Ret===200){
             emailOpt.value=res.Data?.List||[]
-            handleCheckAllChange()
+            // handleCheckAllChange()
         }
     })
 }
 getEmailList()
 
-const btnDisabled=computed(()=>{
-    if(themeVal.value&&checked.value.length>0) return false
-    return true
-})
+//获取报告对应的品种数据
+const showSelectVariety=ref(false)
+const varietyOpts=ref([])
+function getVarietyList(){
+    apiReportVarietyEn.varietyList({
+         ReportId:props.reportId
+    }).then(res=>{
+       if(res.Ret===200){
+           res.Data&&res.Data.forEach(item=>{
+               item.Child&&item.Child.forEach(_item=>{
+                   varietyOpts.value.push({
+                       EnPermissionId:_item.EnPermissionId,
+                       EnPermissionName:_item.EnPermissionName,
+                       select:true
+                   })
+               })
+           })
+       }
+    })
+}
+getVarietyList()
 
-// 前五名
-const topList=computed(()=>{
-    const arr=checked.value.slice(0,5)
-    return emailOpt.value.filter(item=>arr.includes(item.Id))
+//选中的品种
+const selectVariety=computed(()=>{
+    return varietyOpts.value.filter(e=>e.select)
 })
 
+//发送邮件按钮是否禁用
+const sendBtnDisabled=computed(()=>{
+    if(!themeVal.value||(checked.value.length===0&&selectVariety.value.length===0)) return true
+    return false
+})
 
-
+//邮件主题
 const themeVal=ref(props.defaultThemeVal||'')
 
+// 有多少用户是禁用状态
 const disabledNum=computed(()=>{
     return emailOpt.value.filter(item=>item.Enabled===0).length
 })
-const checked=ref([])
+const checked=ref([])//选择的用户
 const checkedAll=ref(false)
 
 function handleCheckAllChange(){
@@ -95,10 +121,6 @@ function handleConfirmSearch(){
 
 // 发送邮件
 function handleConfirmSendEmail(){
-    let ids=[]
-    if(!checkedAll.value){
-        ids=checked.value
-    }
     if(!themeVal.value){
         showToast('请填写邮件主题')
         return
@@ -107,10 +129,15 @@ function handleConfirmSendEmail(){
         showToast('邮件主题请控制在100个字符以内')
         return
     }
+    const varietyIds=[]
+    selectVariety.value.forEach(item=>{
+        varietyIds.push(item.EnPermissionId)
+    })
     apiReportEn.sendEmail({
         ReportId:props.reportId,
-        EmailIds:ids.join(','),
-        Theme:themeVal.value
+        EmailIds:checked.value.join(','),
+        Theme:themeVal.value,
+        EnPermissions:varietyIds
     }).then(res=>{
         if(res.Ret===200){
             showToast('发送成功')
@@ -125,11 +152,15 @@ function handleConfirmSendEmail(){
 <template>
     <div class="send-email-wrap">
         <div class="top-box">
-            <ul class="left-user-box">
-                <li v-for="item in topList" :key="item.Id">{{item.Name.charAt(0)}}</li>
-                <li class="num" v-if="checked.length>5">+{{checked.length-5}}</li>
+            <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">
+                </li>
             </ul>
             <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">
         </div>
         <div class="theme-text-box">
             <van-field 
@@ -145,7 +176,7 @@ function handleConfirmSendEmail(){
         </div>
 
         <div class="list-wrap">
-            <div class="check-all-btn">
+            <!-- <div class="check-all-btn">
                 <van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
             </div>
             <van-checkbox-group v-model="checked">
@@ -155,19 +186,63 @@ function handleConfirmSendEmail(){
                     :name="item.Id" 
                     :disabled="item.Enabled===0"
                 >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
-            </van-checkbox-group>
+            </van-checkbox-group> -->
         </div>
         <van-button 
             class="submit-btn" 
             block 
             type="primary"
-            :disabled="btnDisabled"
+            :disabled="sendBtnDisabled"
             @click="handleConfirmSendEmail"
         >发送</van-button>
     </div>
+    <!-- 选择品种 -->
+    <van-popup 
+        v-model:show="showSelectVariety"
+        position="bottom"
+        round
+        closeable
+    >
+        <div class="send-email-wrap search-wrap">
+            <div class="head-box">选择品种</div>
+            <div class="list-wrap">
+                <van-checkbox
+                    v-for="item in varietyOpts"
+                    :key="item.EnPermissionId"
+                    v-model="item.select"
+                >{{item.EnPermissionName}}</van-checkbox>
+            </div>
+        </div>
+    </van-popup>
+    <!-- 所有客户 -->
+    <van-popup 
+        v-model:show="showAllUser"
+        position="bottom"
+        round
+        closeable
+    >
+        <div class="send-email-wrap search-wrap">
+            <div class="head-box">选择联系人</div>
+            <div class="list-wrap">
+                <div class="check-all-btn">
+                    <van-checkbox :modelValue="checkedAll" @click="handleCheckAllChange">全选</van-checkbox>
+                </div>
+                <van-checkbox-group v-model="checked">
+                    <van-checkbox
+                        v-for="item in emailOpt" 
+                        :key="item.Id"
+                        :name="item.Id" 
+                        :disabled="item.Enabled===0"
+                    >{{item.Name}}&lt;{{item.Email}}&gt;</van-checkbox>
+                </van-checkbox-group>
+            </div>
+        </div>
+    </van-popup>
+    <!-- 搜索客户 -->
     <van-popup 
         v-model:show="showSearch"
         position="bottom"
+        round
     >
         <div class="send-email-wrap search-wrap">
             <div class="top-box">
@@ -195,60 +270,50 @@ function handleConfirmSendEmail(){
 
 <style lang="scss" scoped>
 .send-email-wrap{
-    padding-top: 30px;
+    padding-top: 50px;
     height: 100%;
     display: flex;
     flex-direction: column;
     .top-box{
         padding: 0 30px;
-        height: 128px;
+        min-height: 128px;
         display: flex;
         align-items: center;
         border-bottom: 1px solid $border-color;
-        .left-user-box{
+        .left-variety-box{
+            flex: 1;
             display: flex;
+            flex-wrap: wrap;
             align-items: center;
-            li{
-                width: 80px;
-                height: 80px;
-                border-radius: 50%;
-                overflow: hidden;
-                text-align: center;
-                line-height: 80px;
-                color: #fff;
-                border: 2px solid #fff;
-                position: relative;
-            }
-            li:first-child{
-                background-color: #0052D9;
-                z-index: 6;
+            position: relative;
+            padding-right: 10px;
+            margin-right: 10px;
+            &::after{
+                content:'';
+                display: block;
+                width: 4px;
+                height: 40px;
+                background-color: $theme-color;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 0;
             }
-            li:nth-child(2){
-                background-color: #2BA471;
-                margin-left: -20px;
-                z-index: 5;
-            }
-            li:nth-child(3){
-                background-color: #0052D9;
-                margin-left: -20px;
-                z-index: 4;
-            }
-            li:nth-child(4){
-                background-color: #D54941;
-                margin-left: -20px;
-                z-index: 3;
-            }
-            li:nth-child(5){
-                background-color: #E37318;
-                margin-left: -20px;
-                z-index: 2;
-            }
-            .num{
-                background-color: #D9E1FF !important;
-                margin-left: -20px;
-                z-index: 1 !important;
-                color: $theme-color;
+            li{
+                padding: 8px 20px;
+                border-radius: 80px;
+                background-color: #F2F6FA;
+                display: flex;
+                align-items: center;
+                line-height: 1;
+                margin-bottom: 20px;
+                .icon{
+                    width: 36px;
+                    height: 36px;
+                    margin-left: 5px;
+                }
             }
+            
         }
         :deep(.van-search__content){
             border: none;
@@ -256,7 +321,12 @@ function handleConfirmSendEmail(){
         }
         .van-search{
             padding: 0;
-            flex: 1;
+            width: 150px;
+        }
+        .add-icon{
+            width: 70px;
+            height: 70px;
+            margin-left: 20px;
         }
     }
     .theme-text-box{
@@ -282,6 +352,13 @@ function handleConfirmSendEmail(){
     }
 }
 .search-wrap{
+    padding-top: 0;
+    .head-box{
+        text-align: center;
+        line-height: 100px;
+        border-bottom: 1px solid $border-color;
+        font-size: 32px;
+    }
     .list-wrap{
         height: 50vh;
         flex: none;
@@ -292,29 +369,33 @@ function handleConfirmSendEmail(){
         padding-top: 30px;
         .top-box{
             padding: 0 15px;
-            height: 64px;
-            .left-user-box{
-                li{
-                    width: 40px;
-                    height: 40px;
-                    line-height: 40px;
-                    border-width: 2px;
-                }
-                li:nth-child(2){
-                    margin-left: -10px;
-                }
-                li:nth-child(3){
-                    margin-left: -10px;
-                }
-                li:nth-child(4){
-                    margin-left: -10px;
+            min-height: 64px;
+            .left-variety-box{
+                padding-right: 5px;
+                margin-right: 5px;
+                &::after{
+                    width: 2px;
+                    height: 20px;
                 }
-                li:nth-child(5){
-                    margin-left: -10px;
-                }
-                .num{
-                    margin-left: -10px;
+                li{
+                    padding: 4px 10px;
+                    border-radius: 40px;
+                    margin-bottom: 10px;
+                    .icon{
+                        width: 18px;
+                        height: 18px;
+                        margin-left: 3px;
+                    }
                 }
+                
+            }
+            .van-search{
+                width: 200px;
+            }
+            .add-icon{
+                width: 35px;
+                height: 35px;
+                margin-left: 10px;
             }
         }
         .list-wrap{
@@ -327,5 +408,11 @@ function handleConfirmSendEmail(){
             margin: 10px auto;
         }
     }
+    .search-wrap{
+        .head-box{
+            line-height: 50px;
+            font-size: 18px;
+        }
+    }
 }
 </style>