Browse Source

Merge branch 'crm15.0'

cxmo 1 năm trước cách đây
mục cha
commit
8a42d1328c

+ 4 - 0
src/api/modules/crmApi.js

@@ -665,6 +665,10 @@ const customInterence = {
   roadShowList: (params) => {
     return http.get("/custom/roadShowList", params);
   },
+  //中文客户累计点击量
+  getZNCustomClickList:(params)=>{
+    return http.get('/custom/user/listByReport',params)
+  },
   /**
    * 销售ToDo
    */

+ 99 - 0
src/api/modules/overseasCustom.js

@@ -0,0 +1,99 @@
+/**
+ * 海外客户管理
+ */
+import http from "@/api/http.js"
+
+export const overseasCustomInterence = {
+    /**
+     * 获取已保存的销售
+     * @param {*} params 
+     */
+    getSavedSalesList:(params)=>{
+        return http.get('/overseas_custom/sale/list',params)
+    },
+    /**
+     * 保存已选择的销售
+     * @param {Object} params 
+     * @param {Number[]} params.AddSellerIdArr 新增销售id
+     * @param {Number[]} params.DelSellerIdArr 删除销售id
+     * @returns 
+     */
+    saveSelectedSales:(params)=>{
+        return http.post('/overseas_custom/sale/save',params)
+    },
+    /**
+     * 获取海外客户统计数据
+     * @param {*} params 
+     * @returns 
+     */
+    getCustomStatus:(params)=>{
+        return http.get('/overseas_custom/custom/statistics',params)
+    },
+    /**
+     * 获取海外客户列表数据
+     * @param {Object} params 
+     * @param {String} params.CompanyStatus 客户状态:全部,正式,试用,关闭
+     * @param {String} params.SellerId 销售id ,拼接
+     * @param {Number} params.CustomType 客户类型:1 海外客户 2 隐藏的客户
+     * @param {String} params.SortField 排序字段:ViewTotal,RoadShowTotal,CreateTime
+     * @param {Number} params.SortDesc 排序类型:1 降序(默认) 2 升序
+     * @param {String} params.Keywords 
+     * @param {Number} params.CurrentIndex
+     * @param {Number} params.PageSize
+     * @returns 
+     */
+    getCustomList:(params)=>{
+        return http.get('/overseas_custom/custom/list',params)
+    },
+    /**
+     * 设置客户试用子标签
+     * @param {Object} params 
+     * @param {Number} params.CompanyId 客户id
+     * @param {Number} params.OverseasLabel 海外客户试用子标签:1未分类、2  推进、3 跟踪、4 预备
+     * @returns 
+     */
+    setCustomTryStatus:(params)=>{
+        return http.post('/overseas_custom/custom/overseas_label_set',params)
+    },
+    /**
+     * 设置客户隐藏/取消隐藏
+     * @param {Object} params 
+     * @param {Number} params.CompanyId
+     * @returns 
+     */
+    setCustomHide:(params)=>{
+        return http.post('/overseas_custom/custom/hide',params)
+    },
+    /**
+     * 设置客户状态为正式/重置
+     * @param {Object} params
+     * @param {Number} params.CompanyId
+     * @returns 
+     */
+    setCustomStatus:(params)=>{
+        return http.post('/overseas_custom/custom/status_set',params)
+    },
+    /**
+     * 获取客户统计信息
+     * @param {Object} params
+     * @param {String} params.Keywords
+     * @param {String} params.SellerId
+     * @param {Number} params.CustomType
+     * @returns 
+     */
+    getStatisticData:(params)=>{
+        return http.get('/overseas_custom/custom/statistics',params)
+    },
+    /**
+     * 获取客户试用统计信息
+     * @param {Object} params
+     * @param {String} params.Keywords
+     * @param {String} params.SellerId
+     * @param {Number} params.CustomType
+     * @returns 
+     */
+    overseasCustomInterence:(params)=>{
+        return http.get('/overseas_custom/custom/label/statistics',params)
+    }
+
+}

+ 6 - 0
src/routes/modules/customRoutes.js

@@ -55,6 +55,12 @@ export default [
         name: "英文客户列表",
         hidden: false,
       },
+      {
+        path: "overseasCustomList",
+        component: () => import("@/views/custom_manage/overseasList/overseasCustomList.vue"),
+        name: "海外客户列表",
+        hidden: false,
+      },
       {
         path: "trialContactListEn",
         component: () => import("@/views/custom_manage/customList/limitContactListEn.vue"),

+ 18 - 12
src/views/custom_manage/customList/addCustom.vue

@@ -61,20 +61,23 @@
 				disabled
 				clearable></el-input>
 			</el-form-item>
-			<el-form-item label="客户地址" prop="city"  :rules="[{
+			<el-form-item v-if="dataForm.area==='海外'" label="所属国家" prop="Nation"
+				:rules="[{required:true,message: '所属国家不能为空', trigger: 'change' }]">
+				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
+				<el-select v-model="dataForm.Nation" placeholder="请选择" filterable style="width: 400px;">
+					<el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
+					<div style="display: flex;justify-content: space-between;">
+						<span>{{ item.cnName }}</span>
+						<span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+					</div>
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-else label="客户地址" prop="city"  :rules="[{
 					required:true,
 					message: '客户地址不能为空', 
-					trigger: 'change' 
-        }]">
+					trigger: 'change' }]">
 				<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
-				<!-- <v-distpicker :province-source="province_sorce"
-                :city-source="city_sorce"  
-				:province="dataForm.province"
-				:city="dataForm.city"
-				hide-area 
-				@selected="selectRegion"
-				@province="provinceChange"
-				></v-distpicker> -->
 				<search-dist-picker @selected="selectRegion"/>
 			</el-form-item>
 			<el-form-item label="客户状态" prop="cuStatus" style="marginRight:120px;">
@@ -222,6 +225,7 @@
 
 <script>
 import { customInterence } from '@/api/api.js'
+import country from "@/utils/countryData"
 //import{province_sorce,city_sorce} from '@/utils/distpicker';
 import Contactdia from '../compontents/Contactdialog'
 // import JurisdictionCheck from '../compontents/jurisdictionCheck.vue';
@@ -251,6 +255,7 @@ export default {
 	data () {
 /*     this.province_sorce=province_sorce
     this.city_sorce=city_sorce */
+		this.countryData = country
 		return {
 			codeDisable:false,//是否可编辑社会信用码国内可
 			companyList:[],
@@ -589,7 +594,8 @@ export default {
 					Reasons:this.dataForm.addreason,
 					PermissionIds,
 					Scale:this.dataForm.money,
-					UserId:Number(id)
+					UserId:Number(id),
+					Nation:this.dataForm.area==='海外'?this.dataForm.Nation:''
 				}
 				customInterence.customAdd(params).then(res => {
 					if(res.Ret === 200) {

+ 5 - 1
src/views/custom_manage/customList/customDetail.vue

@@ -20,7 +20,11 @@
 							<label class="label">所属区域</label>
 							<span class="con">{{basicform.RegionType}}</span>
 						</li>
-						<li >
+						<li v-if="basicform.RegionType==='海外'">
+							<label class="label">所属国家</label>
+							<span class="con">{{basicform.Nation}}</span>
+						</li>
+						<li v-else>
 							<label class="label">客户地址</label>
 							<span class="con">{{basicform.Province}}<span v-if="basicform.Province">/</span>{{basicform.City}}</span>
 						</li>

+ 16 - 11
src/views/custom_manage/customList/editCustom.vue

@@ -45,16 +45,18 @@
 						<el-form-item label="所属区域" prop="RegionType" style="width:26%">
 							<span style="color:#333;font-size: 15px;">{{basicform.RegionType}}</span>
 						</el-form-item>
-						<el-form-item label="客户地址" prop="City" style="width:33%">
-							<!-- <v-distpicker :province-source="province_sorce"
-                :city-source="city_sorce" 
-								:province="basicform.Province"
-								:city="basicform.City"
-								hide-area
-								@selected="selectRegion"
-								@province="provinceChange"
-								:disabled="!canEidtBtns.BaseInfoEdit">
-							</v-distpicker> -->
+						<el-form-item v-if="basicform.RegionType==='海外'" label="所属国家" prop="Nation" style="width:33%"
+							:rules="[{required:true,message: '所属国家不能为空', trigger: 'change' }]">
+							<el-select v-model="basicform.Nation" placeholder="请选择" filterable style="width:80%;">
+								<el-option :label="item.cnName" :value="item.code" v-for="item in countryData" :key="item.code" >
+									<div style="display: flex;justify-content: space-between;">
+										<span>{{ item.cnName }}</span>
+										<span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+									</div>
+								</el-option>
+							</el-select>
+						</el-form-item>
+						<el-form-item v-else label="客户地址" prop="City" style="width:33%">
 							<search-dist-picker 
 								:provinceInfo="basicform.Province"
 								:cityInfo="basicform.City"
@@ -467,6 +469,7 @@ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 // import CpessionTableEquity from '../compontents/CpessionTableEquity.vue'
 import autocomplete from "@/components/autocomplete.vue";
 import searchDistPicker from '@/components/searchDistPicker.vue';
+import country from "@/utils/countryData"
 
 export default {
 	name:'',
@@ -503,6 +506,7 @@ export default {
 	data () {
 /*     this.province_sorce=province_sorce
     this.city_sorce=city_sorce */
+		this.countryData = country
 		return {
 			isCheck: false,
 			canEidtBtns:{},
@@ -1076,7 +1080,8 @@ export default {
 				Province:this.basicform.Province,
 				CompanyName:this.basicform.CompanyName,
 				CreditCode:this.basicform.CreditCode,
-				Products:params_arr
+				Products:params_arr,
+				Nation:this.basicform.RegionType==='海外'?this.basicform.Nation:''
 			}
 			
 			customInterence.customEdit(params).then(res => {

+ 5 - 1
src/views/custom_manage/customList/editCustomEn.vue

@@ -280,7 +280,11 @@ import reportVarietyEnSet from '@/components/reportVarietyEnSet.vue'
       editSubmit(){
         this.$refs.editForm.validate(valid=>{
           if(valid){
-            customInterence.addCustomEn({...this.editForm,EnPermissions:this.$refs.varietyIns.checkedItems||[]}).then(res=>{
+            customInterence.addCustomEn({
+                ...this.editForm,
+                EnPermissions:this.$refs.varietyIns.checkedItems||[],
+                Nation:this.editForm.Country
+            }).then(res=>{
               if(res.Ret == 200){
                 let messageEle=this.$message.success(this.$route.path == '/addCustomEn'?'添加客户成功':'编辑客户成功')
                 setTimeout(()=>{

+ 90 - 0
src/views/custom_manage/overseasList/components/roadShowsDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <el-dialog custom-class="total-click-dialog"
+        :title="`${customData.CompanyName}-路演详情`"
+        :visible.sync="isRoadDetailShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        @close="$emit('close')"
+        width="842px"
+        v-dialogDrag
+        center
+    >
+        <div class="table-wrap" v-loading="tableLoading">
+            <p>累计路演次数:{{dataList.length}}</p>
+            <el-table :data="dataList"  height="300" border @sort-change="clickNumSortChange" v-loading="showLoading" element-loading-text="加载中">
+                <el-table-column  v-for="column in columns" :key="column.key" :label="column.label" align="center" :prop="column.key">
+                    <template slot-scope="{row}">
+                    {{row[column.key]}}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import { customInterence } from "@/api/api.js";
+export default {
+    props:{
+        isRoadDetailShow:{
+            type:Boolean,
+            default:false
+        },
+        customData:{
+            type:Object,
+            default:{}
+        },
+    },
+    data() {
+        return {
+            columns:[{
+                label:"路演日期",
+                key:'RoadShowTime'
+            },{
+                label:"路演形式",
+                key:'RoadshowType'
+            },{
+                label:"路演平台/路演城市",
+                key:'RoadshowPlatform'
+            },{
+                label:"研究员",
+                key:'Researchers'
+            },{
+                label:"对接销售",
+                key:'SysUserRealName'
+            }],
+            dataList:[],
+            tableLoading:false,
+        };
+    },
+    watch:{
+        isRoadDetailShow(newVal){
+            if(newVal){
+                this.getTableData()
+            }else{
+                this.dataList=[]
+            }
+        }
+    },
+    methods: {
+        getTableData(){
+            this.tableLoading = true
+            customInterence.roadShowList({
+                CompanyId:this.customData.CompanyId
+            }).then(res=>{
+                this.tableLoading = false
+                if(res.Ret!==200) return 
+                this.dataList = res.Data||[]
+            })
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.table-wrap{
+    .el-table{
+        margin:20px 0 30px 0;
+    }
+}
+</style>

+ 173 - 0
src/views/custom_manage/overseasList/components/selectSaleDialog.vue

@@ -0,0 +1,173 @@
+<template>
+    <el-dialog custom-class="select-sale-dialog"
+        title="选择销售"
+        :visible.sync="isSelectSaleShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        @close="$emit('close')"
+        width="692px"
+        v-dialogDrag
+        center
+    >
+        <div class="dialog-content-wrap" v-loading="dialogLoading" :element-loading-text="loadingText">
+            <el-cascader v-model="sales" 
+                ref="saleCascader"
+                placeholder="请选择销售"
+                :key="saleCascaderKey"
+                :options="AllSalesArr" 
+                :props="{
+                    value: 'AdminId',
+                    label: 'RealName',
+                    children: 'ChildrenList',
+                    multiple: true,
+                    emitPath:false,
+                }"
+                collapse-tags :show-all-levels="false"
+                clearable filterable
+                @change="changeSelect"
+                ></el-cascader>
+            <p style="margin-top:20px;">已选用户</p>
+            <div class="selected-wrap">
+                <div class="select-item" v-for="item in selectList" :key="item.value">
+                    <span>{{ item.label }}</span>
+                    <i class="el-icon-error" @click="cancelSelect(item)"></i>
+                </div>
+            </div>
+        </div>
+        <div class="btn-wrap">
+            <el-button type="primary" plain @click="$emit('close')">取消</el-button>
+            <el-button type="primary" @click="choosedSales" :disabled="dialogLoading">确认</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+
+import {dataAuthInterface , customInterence } from '@/api/api.js'
+export default {
+    props:{
+        isSelectSaleShow:{
+            type:Boolean,
+            default:false
+        },
+        selectedSalesArr:{
+            type:Array,
+            default:[]
+        }
+    },
+    data() {
+        return {
+            sales:[],
+            selectList:[],
+            saleCascaderKey:0,
+            AllSalesArr:[],
+            dialogLoading:false,
+            loadingText:''
+        };
+    },
+    watch:{
+        isSelectSaleShow(newval){
+            if(newval){
+                this.getSalesList()
+            }else{
+                this.loadingText = ''
+            }
+        }
+    },
+    methods: {
+        //获取销售列表
+        //由于中英文客户的销售列表不一致,获取系统全部人员列表作为销售列表
+        getSalesList(){
+            this.dialogLoading = true
+            customInterence.getSale({Status:0}).then(res=>{
+                this.dialogLoading = false
+                if(res.Ret!==200) {
+                    this.AllSalesArr = []
+                    this.sales=[]
+                    this.selectList=[]
+                    return 
+                }
+                this.AllSalesArr = res.Data?(res.Data.List||[]):[]
+                //有选择的指标,回显
+                if(this.selectedSalesArr.length){
+                    this.sales = this.selectedSalesArr.map(i=>(i.SellerId))
+                    this.$nextTick(()=>{
+                        this.changeSelect()
+                    })
+                }
+            })
+        },
+        changeSelect(){
+            const nodes = this.$refs.saleCascader.getCheckedNodes()
+            this.selectList = nodes.filter(i=>{
+                /* if(i.value<10000&&!i.children.length){
+                    return i
+                } */
+                if(!Number.isNaN(Number(i.value))&&!i.children.length){
+                    return i
+                }
+            })
+        },
+        cancelSelect(item){
+            const index = this.selectList.findIndex(i=>i.value==item.value)
+            index!==-1&&this.selectList.splice(index,1)
+            const saleIndex = this.sales.findIndex(i=>i==item.value)
+            saleIndex!==-1&&this.sales.splice(saleIndex,1)
+            this.saleCascaderKey++
+        },
+        //对比上次选择的销售,保存
+        choosedSales(){
+            let AddSellerIdArr = []
+            let DelSellerIdArr = []
+            const oldSales = this.selectedSalesArr.map(i=>(Number(i.SellerId)))
+            const tempSales = this.sales.map(i=>(Number(i)))
+            oldSales.forEach(i=>{
+                if(tempSales.includes(i)){
+                    AddSellerIdArr.push(i)
+                }else{
+                    DelSellerIdArr.push(i)
+                }
+            })
+            AddSellerIdArr = Array.from(new Set([...AddSellerIdArr,...tempSales]))
+            this.loadingText = '保存销售中,请勿关闭弹窗...'
+            this.dialogLoading = true
+            this.$emit('saveSales',{AddSellerIdArr,DelSellerIdArr,sales:this.selectList})
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+.select-sale-dialog{
+    .el-cascader{
+        width:100%;
+        .el-input{
+            width:100% !important;
+        }
+    }
+    .selected-wrap{
+        margin:20px 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap:10px;
+        .select-item{
+            cursor: pointer;
+            padding: 5px 10px;
+            background-color: #f0f2f5;
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            i{
+                margin-left: 5px;
+                color: #909399;
+                font-size: 14px;
+            }
+        }
+    }
+    .btn-wrap{
+        text-align: center;
+        padding-bottom: 20px;
+    }
+}
+</style>

+ 147 - 0
src/views/custom_manage/overseasList/components/totalClicksDialog.vue

@@ -0,0 +1,147 @@
+<template>
+    <el-dialog custom-class="total-click-dialog"
+        :title="`${customData.CompanyName}-点击量详情`"
+        :visible.sync="isTotalClickShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        @close="$emit('close')"
+        width="842px"
+        v-dialogDrag
+        center
+    >
+        <div class="table-wrap" v-loading="tableLoading">
+            <el-table :data="dataList" border @sort-change="clickNumSortChange" v-loading="showLoading" element-loading-text="加载中">
+                <el-table-column  v-for="column in columns" :key="column.key" 
+                    :label="column.label" align="center" :prop="column.key"
+                    :sortable="column.sortable?'custom':false">
+                    <template slot-scope="{row}">
+                    {{row[column.key]}}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination 
+                layout="total,prev,pager,next,jumper" 
+                background 
+                :current-page="tableParams.CurrentIndex"
+                @current-change="handlePageChange"
+                :page-size="tableParams.PageSize"
+                :total="total"
+                style="text-align: right;margin-top:20px;margin-bottom:20px;"/>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import { customInterence } from '@/api/api.js'
+export default {
+    props:{
+        customData:{
+            type:Object,
+            default:{}
+        },
+        isTotalClickShow:{
+            type:Boolean,
+            default:false
+        }
+    },
+    watch:{
+        isTotalClickShow(newVal){
+            if(newVal){
+                this.tableParams = {
+                    CurrentIndex:1,
+                    PageSize:5,
+                    SortParam:'',
+                    SortType:'',
+                }
+                this.getTableData()
+            }else{
+                this.dataList = []
+            }
+        }
+    },
+    data() {
+        return {
+            dataList:[],
+            columns:[{
+                label:"联系人姓名",
+                key:"UserName"
+            },{
+                label:"手机号/邮箱",
+                key:"Email"
+            },{
+                label:"点击次数",
+                key:"ViewTotal",
+                sortable:true
+            },{
+                label:"最近点击时间",
+                key:"LastViewTime",
+                sortable:true
+            }],
+            tableParams:{
+                CurrentIndex:1,
+                PageSize:5,
+                SortParam:'',
+                SortType:'',
+            },
+            total:0,
+            tableLoading:false,
+        };
+    },
+    methods: {
+        getTableData(){
+            this.tableLoading = true
+            if(this.customData.Source===1){
+                customInterence.customEnHitNumber({
+                    ...this.tableParams,
+                    CompanyId:this.customData.CompanyId - 10000000,
+                    EmailId:this.customData.CompanyId - 10000000,
+                }).then(res=>{
+                    this.tableLoading = false
+                    if(res.Ret!==200) return 
+                    this.dataList = res.Data.List || []
+                    this.total = res.Data.Paging.Totals
+                    this.dataList = this.dataList.map(i=>{
+                        return {
+                            ...i,
+                            Email:(i.Mobile?i.Mobile:i.Email)||''
+                        }
+                    })
+                })
+            }else{
+                customInterence.getZNCustomClickList({
+                    ...this.tableParams,
+                    CompanyId:this.customData.CompanyId
+                }).then(res=>{
+                    this.tableLoading = false
+                    if(res.Ret!==200) return 
+                    this.dataList = res.Data.List||[]
+                    this.total = res.Data.Paging.Totals
+                    this.dataList = this.dataList.map(i=>{
+                        return {
+                            ...i,
+                            Email:(i.Mobile?i.Mobile:i.Email)||''
+                        }
+                    })
+                })
+            }
+        },
+        handlePageChange(page){
+            this.tableParams.CurrentIndex = page
+            this.getTableData()
+        },
+        clickNumSortChange({prop,order}){
+            const map = {
+                'ViewTotal':1,
+                'LastViewTime':2
+            }
+            this.tableParams.SortParam = order?map[prop]:''
+            this.tableParams.SortType = order=="ascending"?2:1
+            this.handlePageChange(1)
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

+ 582 - 0
src/views/custom_manage/overseasList/overseasCustomList.vue

@@ -0,0 +1,582 @@
+<template>
+    <div class="overseas-custom-list-wrap">
+        <div class="top-box" v-show="isDataSelectBtnShow">
+            <div class="switch-box">
+                <el-radio-group v-model="pageSelect" >
+                    <el-radio-button :label="1">海外客户</el-radio-button>
+                    <el-radio-button :label="2">已隐藏客户</el-radio-button>
+                </el-radio-group>
+            </div>
+            <div class="select-box">
+                <el-select placeholder="请选择销售" v-if="pageSelect===1"
+                    v-model="tableParams.SellerId" 
+                    @change="handlePageChange(1)"
+                    multiple collapse-tags clearable>
+                    <el-option
+                        v-for="item in salesArr"
+                        :key="item.SellerId"
+                        :label="item.RealName"
+                        :value="item.SellerId"
+                    />
+                </el-select>
+                <el-input 
+                    prefix-icon="el-icon-search" 
+                    placeholder="客户名称/社会信用码/手机号码/邮箱" 
+                    style="width:317px;" clearable
+                    v-model="tableParams.Keywords"
+                    @input="handlePageChange(1)"
+                />
+            </div>
+        </div>
+        <div class="data-box" v-loading="tableLoading">
+            <div class="data-select-box">
+                <div class="table-select-box">
+                    <ul class="status-box">
+                        <li v-for="item in tableTabs" :key="item.Status"
+                            :class="['tab',{'act':tableParams.CompanyStatus === item.CompanyStatus}]"
+                            @click="changeStatus(item)"
+                        >
+                            {{`${item.CompanyStatus}(${item.Total})`}}
+                        </li>
+                    </ul>
+                    <!-- 试用小分类 -->
+                    <ul class="try-status-box" v-if="tableParams.CompanyStatus==='试用'">
+                        <li v-for="item in tryTabs" :key="item.TryStatus"
+                            :class="['trial-item',{'act':tableParams.tagStatusSelect === item.TryStatus}]" 
+                            @click="changeTagStatus(item)"
+                        >
+                            {{item.TryStatus+'('+item.Total+')'}}
+                        </li>
+                    </ul>
+                </div>
+                <!-- 管理员-选择销售 -->
+                <div class="data-select" v-if="isDataSelectBtnShow&&this.salesArr.length">
+                    <el-button v-if="pageSelect===1" type="text" @click="isSelectSaleShow=true"><i class="el-icon-plus"  style="font-weight: bold;margin-right: 5px;"/>选择销售</el-button>
+                </div>
+                <!--非管理员 筛选-->
+                <div class="data-select" v-if="!isDataSelectBtnShow" style="flex:1;">
+                    <div class="select-box" style="display: flex;justify-content: flex-end;gap: 30px;">
+                        <el-select placeholder="请选择销售" v-if="pageSelect===1"
+                            v-model="tableParams.SellerId" 
+                            @change="handlePageChange(1)"
+                            multiple collapse-tags clearable>
+                            <el-option
+                                v-for="item in salesArr"
+                                :key="item.SellerId"
+                                :label="item.RealName"
+                                :value="item.SellerId"
+                            />
+                        </el-select>
+                        <el-input 
+                            prefix-icon="el-icon-search" 
+                            placeholder="客户名称/社会信用码/手机号码/邮箱" 
+                            style="width:317px;" clearable
+                            v-model="tableParams.Keywords"
+                            @input="handlePageChange(1)"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="table-box">
+                <el-table
+                    ref="overseasTable"
+                    :data="tableData"
+                    border
+                    @sort-change="handleSortChange"
+                >
+                    <el-table-column 
+                        align="center"
+                        v-for="item in columns" :key="item.key"
+                        :prop="item.key" :label="item.label"
+                        :min-width="item.minWidth"
+                        :sortable="item.sortable?'custom':false"
+                    >
+                        <template slot-scope="{row}">
+                            <!-- 客户名称 -->
+                            <div v-if="item.key==='CompanyName'" class="editor" @click="toCustomDetail(row)">{{row[item.key]}}</div>
+                            <!-- 状态 -->
+                            <div  v-else-if="item.key==='OverseasStatus'" class="status-box">
+                                    <span>{{row[item.key]}}</span>
+                                    <div class="select" v-if="row[item.key]==='试用'">
+                                        <el-select 
+                                            v-model="row.OverseasLabel"
+                                            size="mini" 
+                                            style="width: 50px" 
+                                            placeholder=""
+                                            @change="handleChangeTryStatus(row)"
+                                        >
+                                            <el-option
+                                                v-for="item in trialTags"
+                                                :key="item.value"
+                                                :label="item.label"
+                                                :value="item.value">
+                                            </el-option>
+                                        </el-select>
+                                    </div>
+                            </div>
+                            <span v-else-if="item.key==='ViewTotal'" :class="{'editor':row[item.key]>0}" @click="handleDialogShow('click',row)">{{row[item.key]}}</span>
+                            <span v-else-if="item.key==='RoadShowTotal'" :class="{'editor':row[item.key]>0}" @click="handleDialogShow('road',row)">{{row[item.key]}}</span>
+                            <span v-else-if="['LastViewTime','CreateTime'].includes(item.key)">
+                                {{
+                                    row[item.key].slice(0,10)==='0000-00-00'?'':row[item.key].slice(0,10)
+                                }}
+                            </span>
+                            <span v-else>{{row[item.key]}}</span>
+                        </template>
+                    </el-table-column>
+                    <!-- 管理员展示操作列 -->
+                    <el-table-column label="操作" align="center" v-if="isDataSelectBtnShow">
+                        <template slot-scope="{row}">
+                            <el-button type="text" v-if="pageSelect===1&&row.IsHide===0" @click="handleSetCustomHide(row)">隐藏</el-button>
+                            <el-button type="text" v-if="pageSelect===2&&row.IsHide===1" @click="handleSetCustomHide(row)">取消隐藏</el-button>
+                            <!--英文客户且状态为试用且可以转正式-->
+                            <el-button type="text" v-if="pageSelect===1&&row.Source===1&&row.OverseasStatus==='试用'&&row.ResetBtn===1" @click="handleSetCustomStatus(row,'change')">转正式</el-button>
+                            <!--英文客户且状态为正式且可以重置-->
+                            <el-button type="text" v-if="pageSelect===1&&row.Source===1&&row.OverseasStatus==='正式'&&row.ResetBtn===2" @click="handleSetCustomStatus(row,'reset')">重置</el-button>
+                        </template>
+                    </el-table-column>
+                    <template slot="empty">
+                        <!-- 管理员展示按钮 -->
+                        <div class="data-select" v-if="isDataSelectBtnShow&&!salesArr.length">
+                            <el-button type="text" @click="isSelectSaleShow=true"><i class="el-icon-plus"  style="font-weight: bold;margin-right: 5px;" />选择销售</el-button>
+                        </div>
+                        <!-- 非管理员显示暂无数据 -->
+                        <div v-else>暂无数据</div>
+                    </template>
+                    
+                </el-table>
+                <el-pagination 
+                    layout="total,prev,pager,next,jumper" 
+                    background 
+                    :current-page="currentPage"
+                    @current-change="(page)=>handlePageChange(page,'sort')"
+                    :page-size="pageSize"
+                    :total="total"
+                    style="text-align: right;margin-top:20px"/>
+            </div>
+        </div>
+        <!-- 选择销售弹窗 -->
+        <SelectSaleDialog 
+            ref="selectDialog"
+            :isSelectSaleShow="isSelectSaleShow"
+            :selectedSalesArr="salesArr"
+            @close="isSelectSaleShow=false"
+            @saveSales="saveSales"
+        />
+        <!-- 累计点击量弹窗 -->
+        <TotalClicksDialog 
+            :isTotalClickShow="isTotalClickShow"
+            :customData="customData"
+            @close="isTotalClickShow = false"
+        />
+        <!-- 路演数量弹窗 -->
+        <RoadShowsDialog 
+            :isRoadDetailShow="isRoadDetailShow"
+            :customData="customData"
+            @close="isRoadDetailShow = false"
+        />
+    </div>
+</template>
+
+<script>
+import { overseasCustomInterence} from '@/api/modules/overseasCustom.js'
+import {customInterence } from '@/api/api.js'
+import SelectSaleDialog from './components/selectSaleDialog';
+import TotalClicksDialog from './components/totalClicksDialog';
+import RoadShowsDialog from './components/roadShowsDialog';
+const tryArr = ['','未分类','推进','跟踪','预备']
+export default {
+    components: { SelectSaleDialog, TotalClicksDialog, RoadShowsDialog },
+    data() {
+        return {
+            pageSelect: 1,
+            salesArr: [],
+            tableTabs: [],
+            tryTabs: [],
+            trialTags: [{ label: '推进', value: 2 },
+                { label: '跟踪', value: 3 },
+                { label: '预备', value: 4 },
+                { label: '未分类', value: 1 },
+            ],
+            columns: [{
+                    label: "客户名称",
+                    key: 'CompanyName'
+                }, {
+                    label: "国家",
+                    key: 'Nation'
+                }, {
+                    label: "销售",
+                    key: 'SellerName'
+                }, {
+                    label: "状态",
+                    key: 'OverseasStatus'
+                }, {
+                    label: "累计点击量",
+                    key: 'ViewTotal',
+                    sortable: true
+                }, {
+                    label: "路演数量",
+                    key: 'RoadShowTotal',
+                    sortable: true
+                }, {
+                    label: "最近阅读时间",
+                    key: 'LastViewTime',
+                    sortable: true
+                }, {
+                    label: "创建时间",
+                    key: 'CreateTime',
+                    sortable: true
+                }],
+            tableParams:{
+                Keywords:'',
+                SortField:'ViewTotal',//排序字段
+                SortDesc:1,//排序方式
+                SellerId:'',//选择的销售
+                CompanyStatus:'全部',//客户状态
+                tagStatusSelect:'全部',//客户的试用状态
+                tryStatusSelect:0,//客户试用状态对应的OverseasLabel
+            },
+            tableData: [],
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            isSelectSaleShow: false, //选择销售弹窗
+            isTotalClickShow:false, //累计点击量弹窗
+            isRoadDetailShow:false, //路演详情弹窗
+            customData:{},//选择的客户信息
+
+            tableLoading:false,
+
+        };
+    },
+    computed: {
+        Role() {
+            return localStorage.Role || '';
+        },
+        isDataSelectBtnShow() {
+            return (this.Role === 'admin' || this.Role === 'ficc_admin');
+        }
+    },
+    watch:{
+        pageSelect(newval){
+            //清空筛选项
+            this.tableParams={
+                Keywords:'',
+                SortField:'ViewTotal',
+                SortDesc:1,
+                SellerId:'',
+                CompanyStatus:'全部',
+                tagStatusSelect:'全部',
+                tryStatusSelect:0,
+            }
+            this.$refs.overseasTable&&this.$refs.overseasTable.clearSort()
+            this.handlePageChange(1,'static')
+        }
+    },
+    methods: {
+        //获取已保存选择的销售
+        getSavedSales(){
+            overseasCustomInterence.getSavedSalesList().then(res=>{
+                if(res.Ret!==200) return 
+                this.salesArr = res.Data||[]
+            })
+        },
+        //保存选择的销售
+        saveSales({AddSellerIdArr,DelSellerIdArr,sales}){
+            overseasCustomInterence.saveSelectedSales({
+                AddSellerIdArr,DelSellerIdArr
+            }).then(res=>{
+                this.$refs.selectDialog&&(this.$refs.selectDialog.dialogLoading = false)
+                if(res.Ret!==200) return
+                this.$message.success("选择销售成功")
+                this.tableParams = {
+                    Keywords:'',
+                    SortField:'ViewTotal',
+                    SortDesc:1,
+                    SellerId:'',
+                    CompanyStatus:'全部',
+                    tagStatusSelect:'全部',
+                    tryStatusSelect:0,
+                }
+                this.salesArr = sales.map(i=>({SellerId:i.value,RealName:i.label}))
+                this.handlePageChange(1)
+                this.isSelectSaleShow = false
+            })
+        },
+        //客户列表
+        async getTableData(type) {
+            this.tableLoading = true
+            const {Keywords,SortField,SortDesc,SellerId,CompanyStatus,tryStatusSelect} = this.tableParams
+            //重新请求统计数据
+            if(type!=='sort'){
+                await this.getStatisticData()
+                if(CompanyStatus==='试用'){
+                    await this.getTryStatisticData()
+                }
+            }
+            overseasCustomInterence.getCustomList({
+                PageSize: this.pageSize,
+                CurrentIndex: this.currentPage,
+                Keywords,CompanyStatus,
+                SellerId:(Array.isArray(SellerId)?SellerId.join(','):'')+'',
+                OverseasLabel:tryStatusSelect,
+                CustomType:this.pageSelect,
+                SortField,SortDesc,
+            }).then(res=>{
+                this.tableLoading = false
+                if(res.Ret!==200) return 
+                if(!res.Data) return 
+                /* //客户状态
+                this.tableTabs = res.Data.StatisticsData||[]
+                //手动添加一个全部
+                let total = this.tableTabs.map(i=>(i.Total)).reduce((acc,curr)=>acc+curr,0)
+                this.tableTabs.unshift({CompanyStatus:'全部',Total:total})
+                //客户试用状态
+                this.tryTabs = res.Data.OverseasLabelData||[]
+                this.tryTabs = this.tryTabs.map(tab=>({
+                    TryStatus:tryArr[tab.OverseasLabel],
+                    Total:tab.Total,
+                    OverseasLabel:tab.OverseasLabel}))
+                //手动添加一个全部
+                let tryTotal = this.tryTabs.map(i=>(i.Total)).reduce((acc,curr)=>acc+curr,0)
+                this.tryTabs.unshift({TryStatus:'全部',Total:tryTotal,OverseasLabel:0}) */
+                //客户列表
+                this.tableData = res.Data.List||[]
+                this.total = res.Data.Paging.Totals||0
+            })
+        },
+        //获取客户统计数据
+        async getStatisticData(){
+            const {Keywords,SellerId,CompanyStatus} = this.tableParams
+            const statisticRes = await overseasCustomInterence.getStatisticData({
+                CustomType:this.pageSelect,
+                SellerId:(Array.isArray(SellerId)?SellerId.join(','):'')+'',
+                Keywords
+            })
+            if(statisticRes.Ret!==200) return 
+            //客户状态
+            this.tableTabs = statisticRes.Data||[]
+            //手动添加一个全部
+            let total = this.tableTabs.map(i=>(i.Total)).reduce((acc,curr)=>acc+curr,0)
+            this.tableTabs.unshift({CompanyStatus:'全部',Total:total})
+        },
+        //客户试用状态统计数据
+        async getTryStatisticData(){
+            const {Keywords,SellerId} = this.tableParams
+            const statisticTryRes = await overseasCustomInterence.overseasCustomInterence({
+                CustomType:this.pageSelect,
+                SellerId:(Array.isArray(SellerId)?SellerId.join(','):'')+'',
+                Keywords
+            })
+            if(statisticTryRes.Ret!==200) return 
+            //客户试用状态
+            this.tryTabs = statisticTryRes.Data||[]
+            this.tryTabs = this.tryTabs.map(tab=>({
+                TryStatus:tryArr[tab.OverseasLabel],
+                Total:tab.Total,
+                OverseasLabel:tab.OverseasLabel}))
+            //手动添加一个全部
+            let tryTotal = this.tryTabs.map(i=>(i.Total)).reduce((acc,curr)=>acc+curr,0)
+            this.tryTabs.unshift({TryStatus:'全部',Total:tryTotal,OverseasLabel:0})
+        },
+        //切换客户状态
+        changeStatus(item) {
+            this.tableParams.CompanyStatus = item.CompanyStatus;
+            if(item.CompanyStatus!=='试用'){
+                this.tableParams.tagStatusSelect = '全部';
+                this.tableParams.tryStatusSelect = 0
+            }
+            this.handlePageChange(1);
+        },
+        //切换客户试用状态
+        changeTagStatus(item) {
+            this.tableParams.tagStatusSelect = item.TryStatus;
+            this.tableParams.tryStatusSelect = item.OverseasLabel
+            this.handlePageChange(1);
+        },
+        //列表排序
+        handleSortChange({prop,order}) {
+            this.tableParams.SortDesc = order==='ascending'?2:1
+            this.tableParams.SortField = order?prop:'ViewTotal'
+            this.handlePageChange(1,'sort')
+         },
+        //切换页码
+        handlePageChange(page,type) {
+            this.currentPage = page;
+            this.getTableData(type);
+        },
+        //跳转至客户详情
+        toCustomDetail(data) { 
+            const path = data.Source===1?'/detailCustomEn':'/customDetail'
+            const query = {
+                ...data.Source===1?{
+                    companyId:data.CompanyId - 10000000
+                }:{
+                    id:data.CompanyId
+                },
+                from:'overseas'
+            }
+            const href = this.$router.resolve({path,query}).href
+            window.open(href,"_blank")
+        },
+        //设置客户的试用状态
+        handleChangeTryStatus(data) {
+            const { OverseasLabel, CompanyId } = data;
+            overseasCustomInterence.setCustomTryStatus({
+                CompanyId,OverseasLabel
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                this.$message.success("设置成功")
+                this.getTableData()
+            })
+        },
+        //打开累计点击量/路演数量弹窗
+        handleDialogShow(type,data){
+            this.customData = data
+            if(type==='click'){
+                if(!data.ViewTotal>0) return
+                this.isTotalClickShow = true
+            }else{
+                if(!data.RoadShowTotal>0) return
+                this.isRoadDetailShow = true
+            }
+        },
+        //设置客户隐藏/取消隐藏
+        handleSetCustomHide({CompanyId}){
+            overseasCustomInterence.setCustomHide({CompanyId}).then(res=>{
+                if(res.Ret!==200) return 
+                this.$message.success(`设置${this.pageSelect===1?'隐藏':'取消隐藏'}成功`)
+                this.handlePageChange(1)
+            })
+        },
+        handleSetCustomStatus({CompanyId},type){
+            overseasCustomInterence.setCustomStatus({CompanyId}).then(res=>{
+                if(res.Ret!==200) return 
+                this.$message.success(`${type==='reset'?'重置':'转正式'}成功`)
+                this.handlePageChange(1)
+            })
+        },
+    },
+    mounted() {
+        this.getSavedSales()
+        this.getTableData('static');
+    },
+};
+</script>
+
+<style lang="scss">
+.overseas-custom-list-wrap{
+    .el-input--mini {
+        .el-input__inner{
+            padding: 0 6px !important;
+            height: 24px;
+            line-height: 24px;
+            color: #409EFF;
+            background: #ECF5FF;
+            border-color: #409EFF;
+            text-align: center;
+        }
+        .el-input__inner {
+            border-color: #E4E7ED;
+        }
+        .el-input__suffix {
+            display: none;
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+.overseas-custom-list-wrap{
+    box-sizing: border-box;
+    .top-box,.data-box{
+        box-sizing: border-box;
+        padding:30px;
+        background-color: #fff;
+    }
+    .top-box{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .data-box{
+        .data-select-box{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            ul{
+                display: flex;
+                align-items: center;
+            }
+            .status-box{
+                .tab {
+                    width: 129px;
+                    height: 22px;
+                    line-height: 22px;
+                    text-align: center;
+                    font-size: 14px;
+                    border-right:1px solid #707070;
+                    cursor: pointer;
+                    transition-delay: 0.05s;
+                    &:hover {
+                        color: #409EFF;
+                    }
+                    &.act {
+                        // padding: 9px 24px;
+                        height: 40px;
+                        line-height: 40px;
+                        background: #409EFF;
+                        border-radius: 4px;
+                        color: #fff;
+                        border-color: #409EFF;
+                        transform: scale(1.014);
+                    }
+                    &:last-child {
+                        border: none;
+                    }
+                }
+            }
+            .try-status-box{
+                padding: 20px 0 0 30px;
+                .trial-item {
+                    cursor: pointer;
+                    margin-right: 30px;
+                    &:hover {
+                        color: #409EFF;
+                    }
+                    &.act {
+                        color: #409EFF;
+                        position: relative;
+                        &::after {
+                            content: "";
+                            width: 100%;
+                            height: 2px;
+                            position: absolute;
+                            bottom: -10px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            background: #409EFF;
+                        }
+                    }
+                }
+            }
+        }
+        .table-box{
+            margin-top:20px;
+            .status-box{
+                display: flex;
+                justify-content: center;
+                .el-select{
+                    margin-left: 10px;
+                }
+            }
+            .editor{
+                color:#409EFF;
+                cursor: pointer;
+                &:hover{
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}
+</style>