hz_crm_web/src/views/custom_manage/customList/customAllList.vue

<template>
    <!-- 全量客户列表 是customList的阉割版 -->
    <div class="customList_container" ref="cusContainer">
        <div class="customList_bot_top">
            <div>
                <a :href="exportUrlDl" download>
                    <el-button type="primary" plain style="width:100px;marginRight:10px;">导出客户</el-button>
                </a>
                <a :href="exportUserDl" download>
                    <el-button type="primary" plain style="width:110px;">导出联系人</el-button>
                </a>
            </div>
            <el-input placeholder="客户名称/社会信用码/手机号码/邮箱" v-model="search_txt" style="max-width:520px"
                @input="searchHandle" clearable>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="customList_bot">
            <div class="customList_top">
                <el-row :span="24">
                    <el-select v-model="type" placeholder="请选择客户类型"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable
                        v-if="Role=='finance'||Role=='admin'" @change="changeType">
                        <el-option v-for="item in typeArr" :key="item" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <el-select v-model="trade" placeholder="请选择行业"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable @change="changeTrade">
                        <el-option v-for="item in tradeArr" :key="item.IndustryId" :label="item.IndustryName"
                            :value="item.IndustryId">
                        </el-option>
                    </el-select>
                    <el-cascader v-model="sales" placeholder="请选择销售"
                        style="width:200px;marginRight:10px;marginBottom:8px;" :options="salesArr"
                        :props="defaultSalesProps" :show-all-levels="false" collapse-tags clearable filterable
                        @change="changeSales">
                    </el-cascader>
                    <el-select v-model="setmealSelect" placeholder="请选择套餐类型"
                        style="width:200px;marginRight:10px;marginBottom:8px;" clearable @change="changeTrade">
                        <el-option v-for="item in setmealArr" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-cascader v-model="variety" placeholder="请选择已购品种"
                        style="width:200px;marginRight:10px;marginBottom:8px;" :options="varietyArr"
                        :props="defaultprops" :show-all-levels="false" collapse-tags clearable filterable
                        @change="changeVariety">
                    </el-cascader>
                    <el-cascader v-model="variety_red" placeholder="请选择阅读权限"
                        style="width:200px;marginRight:10px;marginBottom:8px;" :options="varietyArr"
                        :props="defaultprops" :show-all-levels="false" collapse-tags clearable filterable
                        @change="changeVariety">
                    </el-cascader>
                    <el-cascader v-model="valueLocation" collapse-tags :props="locationProps" clearable
                        :options="locationOptions" @change="handleChangeLocation" placeholder="请选择客户地址"
                        style="width:200px;marginRight:10px;marginBottom:8px;">
                    </el-cascader>
                    <date-picker v-model="date" type="date" range value-type="format" placeholder="服务日期"
                        @change="dateChange" style="width:200px;marginRight:10px;marginBottom:8px;">
                    </date-picker>
                    <date-picker v-model="createdate" type="date" range value-type="format" placeholder="创建时间"
                        @change="dateChange2" style="width:200px;marginRight:10px;marginBottom:8px;">
                    </date-picker>
                </el-row>
            </div>
            <ul class="tabs_cont">
                <li :class="['tab',{'act':act_status === item.Status}]" v-for="(item,index) in tabs" :key="index"
                    @click="changeStatus(item,index)">
                    {{item.Status+'('+item.Count+')'}}
                </li>
            </ul>
            <ul class="tabs_cont trial-ul" v-if="act_status === '试用'">
                <li :class="['trial-item',{'act':act_trialTag === item.TryStage}]" v-for="item in trialTagArr"
                    :key="item.TryStage" @click="changeTagStatus(item)">
                    {{item.TryStageStr+'('+item.Count+')'}}
                </li>
            </ul>
            <div class="bot_cont">
                <el-table ref="userTable" :data="tableData" v-loading="isShowloadding" element-loading-text="数据加载中..."
                    @sort-change="sortChangeHandle" border>
                    <el-table-column prop="CompanyName" label="客户名称" align="center" min-width="7.14%">
                        <template slot-scope="scope" :class="{'isShared':scope.row.IsShared}">
                            <span v-if="scope.row.IsSuspend ===1 || scope.row.Status=='潜在'" @click="goDetail(scope.row)"
                                class="mouse-enter"
                                :class="{'color-red':act_status==='正式'&&scope.row.Status.includes('正式')&&scope.row.WeekViewActive===0}"
                                :style="scope.row.Status=='潜在'?'':'color:#bbb;cursor:pointer'">
                                {{scope.row.CompanyName}}
                            </span>
                            <span v-else style="color:#409EFF;cursor:pointer;" @click="goDetail(scope.row)"
                                class="customName"
                                :class="{'isShared':scope.row.IsShared,'color-red':act_status==='正式'&&scope.row.Status.includes('正式')&&scope.row.WeekViewActive===0}">{{scope.row.CompanyName}}</span>
                            <img width="15" src="../../../assets/img/icons/remark.png" alt=""
                                v-if="scope.row.RenewalReason||(scope.row.Status==='冻结'&&scope.row.FreezeReason)">
                        </template>
                    </el-table-column>
                    <el-table-column label="DL" prop="deadline" align="center" min-width="5%" sortable="custom">
                        <template slot="header" slot-scope="{}">
                            <div class="todolabel" :class="{sort:sort_param==='deadline'}"
                                style="display:inline-block;">
                                <span>DL</span>
                                <el-tooltip effect="dark" placement="top-start" content="未完成To Do任务的截止日期-当前日期">
                                    <i class="el-icon-info" />
                                </el-tooltip>
                            </div>
                        </template>
                        <template slot-scope="{row}">
                            <span>{{row.Deadline||'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CompanyType" label="类型" align="center" min-width="4.14%">
                        <template slot-scope="{row}">
                            <template v-if="row.CompanyType.indexOf('/')!==-1">
                                <span
                                    :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType.split('/')[0]}}</span><br />
                                <span v-if="row.FiccPackageType"
                                    class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                                <br v-if="row.FiccPackageType" />
                                <span
                                    :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType.split('/')[1]}}</span>
                            </template>
                            <template v-else>
                                <span :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType}}</span>
                                <span v-if="row.FiccPackageType&&row.CompanyType.includes('ficc')"
                                    class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="IndustryName" label="所属行业" min-width="6.14%" align="center">
                        <template slot-scope="scope">
                            <div :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <p :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                    v-for="item in scope.row.IndustryName.split('/')" :key="item">{{item}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="City" label="客户地址" min-width="6.14%" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.Province && scope.row.City"
                                :style="scope.row.IsSuspend===1?'color:#bbb':''">{{scope.row.Province}}<br />{{scope.row.City}}</span>
                            <span v-else
                                :style="scope.row.IsSuspend===1?'color:#bbb':''">{{scope.row.RegionType}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="SellerName" label="销售" min-width="6.14%" align="center">
                        <template slot-scope="scope">
                            <p :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                v-for="item in scope.row.SellerName.split('/')" :key="item">{{item}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Status" label="状态" min-width="7.14%" align="center"
                        :sortable="act_status==='试用'&&act_trialTag===0?'custom':false" style="background:red">
                        <template slot="header" slot-scope="{}">
                            <div class="todolabel" :class="{sort:sort_param==='tryStage'}"
                                style="display:inline-block;">
                                <span>状态</span>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <p :style="scope.row.IsSuspend===1?'color:#bbb;margin:3px 0':'margin:3px 0'"
                                v-for="(item,index) in scope.row.Status.split('/')" :key="item">
                                {{ item }}
                                <template v-if="item === '试用' && scope.row.TryStageSlice">
                                    <el-select v-model="scope.row.TryStageSlice[index].TryStage"
                                        v-if="scope.row.Status === '试用/试用'"
                                        :disabled="!scope.row.TryStageSlice[index].HasPermission" size="mini"
                                        style="width: 50px" placeholder=""
                                        @change="changeTrialHandle(scope.row,scope.row.TryStageSlice[index])">
                                        <el-option v-for="item in trialTags" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="scope.row.TryStageSlice[0].TryStage"
                                        :disabled="!scope.row.TryStageSlice[0].HasPermission" v-else size="mini"
                                        style="width: 50px" placeholder=""
                                        @change="changeTrialHandle(scope.row,scope.row.TryStageSlice[0])">
                                        <el-option v-for="item in trialTags" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column label="累计试用天数" align="center" min-width="5.14%" prop="tryOutDay" sortable="custom">
                        <template slot-scope="{row}">
                            <el-tooltip :disabled="row.IsSuspend===1||(row.FiccTryOutDay+row.RaiTryOutDay===0)">
                                <div slot="content">
                                    <p v-if="row.FiccTryOutDay">FICC累计试用天数：{{row.FiccTryOutDay}}</p>
                                    <p v-if="row.RaiTryOutDay">权益累计试用天数：{{row.RaiTryOutDay}}</p>
                                </div>
                                <span :style="row.IsSuspend===1?'color:#bbb':'color:#409EFF;cursor:pointer;'"
                                    @click="handleTotalDayClick(row)">
                                    {{row.FiccTryOutDay+row.RaiTryOutDay}}
                                </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="阅读" align="center" min-width="5.14%" prop="viewTotal" sortable="custom">
                        <template slot-scope="{row}">
                            <el-tooltip :disabled="row.IsSuspend===1 || (row.FiccView+row.RaiView)===0">
                                <div slot="content">
                                    <p v-if="row.FiccView">FICC报告阅读次数：{{row.FiccView}}</p>
                                    <p v-if="row.RaiView">权益报告阅读次数：{{row.RaiView}}</p>
                                </div>
                                <span :style="row.IsSuspend===1?'color:#bbb':'color:#409EFF;cursor:pointer;'">
                                    <!-- {{row.FiccView+row.RaiView}} -->
                                    <!-- 阅读次数拆分 -->
                                    {{row.AllViewTotal}}
                                </span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="路演" align="center" min-width="5.14%" prop="roadShowTotal" sortable="custom">
                        <template slot-scope="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                @click="accumulativeFrequencyClick(scope)" class="editsty"
                                v-if="scope.row.RoadShowTotal > 0">{{scope.row.RoadShowTotal}}</span>
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''"
                                v-else>{{scope.row.RoadShowTotal}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最近阅读" min-width="8.14%" align="center" prop="viewTime" sortable="custom">
                        <template slot-scope="scope">
                            <p v-if="scope.row.FiccLastViewTime" :style="scope.row.IsSuspend===1?'color:#bbb':''">ficc：
                                {{$moment(scope.row.FiccLastViewTime).format('YYYY.MM.DD')}}</p>
                            <p v-else-if="scope.row.RaiLastViewTime" :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                权益： {{$moment(scope.row.RaiLastViewTime).format('YYYY.MM.DD')}}</p>
                            <p v-else :style="scope.row.IsSuspend===1?'color:#bbb':''">--</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="EndDate" :label="act_status=='冻结'?'冻结期限':'服务期限'" align="center"
                        min-width="6.14%">
                        <template slot-scope="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <!-- 正常的时间显示 -->
                                <template v-if="scope.row.StartDate.indexOf('/')==-1">
                                    <template v-if="act_status=='流失'">
                                        创建时间：{{scope.row.CreatedTime|formatTime}}
                                    </template>
                                    <template v-else-if="scope.row.Status == '永续'">
                                        永久
                                    </template>
                                    <template v-else-if="act_status == '冻结'">
                                        {{scope.row.FreezeStartDate}}~{{scope.row.FreezeEndDate}}
                                    </template>
                                    <template v-else>
                                        {{scope.row.StartDate}}~{{scope.row.EndDate}}
                                    </template>
                                </template>
                                <!-- 公用客户的时间显示 -->
                                <template v-else>
                                    {{scope.row.StartDate.substr(0,10)}}~{{scope.row.EndDate.substr(0,10)}}/{{scope.row.StartDate.substr(11)}}~{{scope.row.EndDate.substr(11)}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expireDay" :label="act_status=='冻结'?'解冻':'到期'" align="center"
                        min-width="5.14%" sortable="custom">
                        <template slot-scope="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <template v-if="act_status=='冻结'">
                                    {{scope.row.FreezeExpireDays||'--'}}
                                </template>
                                <template v-else>
                                    {{scope.row.ExpireDay||'--'}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime"
                        :label="act_status=='冻结'?'冻结时间':act_status=='正式'?'转正时间':act_status=='流失'?'流失时间':'创建时间'"
                        sortable="custom" align="center" min-width="6.14%">
                        <template slot-scope="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                <template v-if="act_status=='冻结'">
                                    {{$moment(scope.row.FreezeTime).format('YYYY.MM.DD')}}
                                </template>
                                <template v-else-if="act_status=='正式'">
                                    {{$moment(scope.row.FormalTime).format('YYYY.MM.DD')}}
                                </template>
                                <template v-else-if="act_status=='流失'">
                                    <!-- {{scope.row.LossTime?$moment(scope.row.LossTime.replaceAll('.','-')).format('YYYY.MM.DD'):''}} -->
                                    {{scope.row.LossTime
                                        ?(`${scope.row.LossTime.split('/')[0].substr(0,10)}`)
                                        :''}}
                                    {{scope.row.LossTime&&scope.row.IsShared&&scope.row.LossTime.split('/')[1]
                                        ? `/${scope.row.LossTime.split('/')[1].substr(0,10)}`
                                        :''}}
                                </template>
                                <template v-else>
                                    {{$moment(scope.row.CreatedTime).format('YYYY.MM.DD')}}
                                </template>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="7.14%">
                        <template slot-scope="scope" v-if="!scope.row.ApproveStatus">
                            <div class="tool" style="display: flex;flex-direction: column;">
                                <span class="editsty" style="white-space: nowrap;"
                                    @click="itemclickHandle({type:'查看权限',data:scope.row})">
                                    查看权限
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
                        <img src="~@/assets/img/cus_m/nodata.png" alt=""
                            style="display:block;width:160px;height:128px;margin: auto;">
                        <span>暂无信息</span>
                    </div>
                </el-table>
                <div class="toolbar fixedbar">
                    <el-pagination layout="prev,pager,next" background :current-page="page_no"
                        @current-change="handleCurrentChange" :page-size="pageSize" @size-change="handleSizeChange"
                        :total="total" style="float:right;">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 查看权限弹窗 -->
        <permissionView :isLook.sync="isLook" :lookTitle="lookTitle" :lookAuthList="lookAuthList"
            :lookAuthListEquity="lookAuthListEquity" @closeDia="closeDia"></permissionView>
        <!-- 累计试用天数弹窗 -->
        <total-day-dialog :isTotalDayDialogShow.sync="isTotalDayDialogShow" :customInfo.sync="customInfo" />
        <!-- 路演业阅读的弹框 -->
        <accumulative-frequency-dlg :accumulativeFrequencyDlg.sync="accumulativeFrequencyDlg"
            :accumulativeFrequencyItem.sync="accumulativeFrequencyItem" />
    </div>
</template>

<script>
    import {
        customInterence
    } from '@/api/api.js'
    import{customAllInterence} from '@/api/modules/crmApi.js'
    import {
        locationOptions
    } from "./location"
    import TotalDayDialog from '../compontents/TotalDayDialog.vue'
    import AccumulativeFrequencyDlg from '../compontents/accumulativeFrequencyDlg.vue'
    import permissionView from './components/permissionView.vue'
    import mixin from './mixins/customlistMixin';

    export default {
        name: '',
        mixins: [mixin],
        components: {
            AccumulativeFrequencyDlg,
            TotalDayDialog,
            permissionView,
        },
        computed: {
            Role() {
                let role = localStorage.getItem('Role') || '';
                return role;
            },
            RoleType() {
                let type = localStorage.getItem('RoleType') || '';
                return type;
            },
            SellerAdminId() {
                let type = localStorage.getItem('AdminId') || '';
                return type;
            },
            //管理权限
            ManageType() {
                return localStorage.getItem('ManageType') || '';
            },
            RoleIdentity() {
                let role = localStorage.getItem('RoleIdentity') || '';
                return role;
            },
            /* 导出客户地址 */
            exportUrlDl() {
                let url = this.exportUrl;
                /* 处理品种结构 */
                let param_arr = [];
                let param_arr_red = []
                //已购权限
                if (this.variety.length) {
                    param_arr = this.variety.map(item => {
                        return item[1];
                    })
                }
                //阅读权限
                if (this.variety_red.length) {
                    param_arr_red = this.variety_red.map(item => {
                        return item[1]
                    })
                }
                let param_token = localStorage.getItem('auth') || '';
                let param_variety = param_arr.join(',');
                let param_variety_red = param_arr_red.join(',')
                // let param_sale = this.sales.length?this.sales.join(','):'';
                let param_saleArr = this.sales.length ? this.sales.map(item => {
                    return item[item.length - 1]
                }) : [];
                let param_sale = param_saleArr.length ? param_saleArr.join(',') : ''
                let param_trade = this.trade ? Number(this.trade) : '';
                let param_package = this.setmealSelect ? Number(this.setmealSelect) : 0
                return `${url}?Status=${this.act_status}` +
                    `&IsFullCompany=1`+
                    `&CompanyType=${this.type}` +
                    `&PackageType=${param_package}` +
                    `&IndustryId=${param_trade}` +
                    `&AdminId=${param_sale}` +
                    `&Province=${this.provinceValue}` +
                    `&City=${this.cityValue}` +
                    `&ChartPermissionIds=${param_variety_red}` +
                    `&ContractPermissionIds=${param_variety}` +
                    `&StartDate=${this.start_date}` +
                    `&EndDate=${this.end_date}` +
                    `&CreateStartDate=${this.createdate.length ? this.createdate[0]:''}` +
                    `&CreateEndDate=${this.createdate.length ? this.createdate[1]:''}` +
                    `&KeyWord=${this.search_txt}&${param_token}`
            },
            /* 导出联系人地址 */
            exportUserDl() {
                let url = this.exportUser;
                /* 处理品种结构 */
                let param_arr = [];
                let param_arr_red = []
                //已购品种
                if (this.variety.length) {
                    param_arr = this.variety.map(item => {
                        return item[1];
                    })
                }
                //阅读权限
                if (this.variety_red.length) {
                    param_arr_red = this.variety_red.map(item => {
                        return item[1]
                    })
                }
                let param_token = localStorage.getItem('auth') || '';
                let param_variety = param_arr.join(',');
                let param_variety_red = param_arr_red.join(',')
                // let param_sale = this.sales.length?this.sales.join(','):'';
                let param_saleArr = this.sales.length ? this.sales.map(item => {
                    return item[item.length - 1]
                }) : [];
                let param_sale = param_saleArr.length ? param_saleArr.join(',') : ''
                let param_trade = this.trade ? Number(this.trade) : '';
                let param_package = this.setmealSelect ? Number(this.setmealSelect) : 0
                return `${url}?Status=${this.act_status}` +
                    `&IsFullCompany=1`+
                    `&CompanyType=${this.type}` +
                    `&Province=${this.provinceValue}` +
                    `&City=${this.cityValue}` +
                    `&PackageType=${param_package}` +
                    `&IndustryId=${param_trade}` +
                    `&AdminId=${param_sale}` +
                    `&ChartPermissionIds=${param_variety_red}` +
                    `&ContractPermissionIds=${param_variety}` +
                    `&StartDate=${this.start_date}` +
                    `&EndDate=${this.end_date}` +
                    `&CreateStartDate=${this.createdate.length ? this.createdate[0]:''}` +
                    `&CreateEndDate=${this.createdate.length ? this.createdate[1]:''}` +
                    `&KeyWord=${this.search_txt}&${param_token}`
            }
        },
        data() {
            return {
                exportUrl: process.env.API_ROOT + '/custom/full/export', //导出数据
                exportUser: process.env.API_ROOT + '/custom/full/user/export', //导出联系人
                defaultprops: {
                    multiple: true,
                    label: 'ClassifyName',
                    children: 'Items',
                    value: 'ChartPermissionId'
                }, //块级选择器配置
                tabs: [],
                act_status: '全部', //状态
                type: '', //类型
                typeArr: [{
                    name: 'ficc'
                }, {
                    name: '权益'
                }], //类型
                setmealArr: [{
                    name: '大套餐',
                    id: 1
                }, {
                    name: '小套餐',
                    id: 2
                }],
                setmealSelect: '', //套餐的选择
                trade: '',
                tradeArr: [], //行业
                sales: '',
                salesArr: [], //销售
                defaultSalesProps: {
                    multiple: true,
                    label: 'RealName',
                    children: 'ChildrenList',
                    value: 'AdminId'
                }, //销售级联配置
                variety: [], //已购品种
                variety_red: [], //阅读权限
                varietyArr: [],
                date: '',
                start_date: '', //开始日期
                end_date: '', //结束日期
                createdate: '', //创建日期
                tableData: [],
                isShowloadding: false,
                search_txt: '',
                total: 1,
                page_no: 1,
                pageSize: 10,
                isLook: false, //权限弹窗
                lookTitle: '', //权限弹窗标题
                lookAuthList: [], //查看的权限
                lookAuthListEquity: [], //权益
                authList: [], //现有权限列表
                citiesListEquity: [], //权益//现有权限列表
                citiesListpitchOn: [], //权益//现有权限列表
                citiesEquity: [], //权益//现有权限列表
                sort_type: '', //自定义排序方式
                sort_param: '', //自定义排序方式的哪一个
                locationOptions,
                valueLocation: [],
                provinceValue: '',
                cityValue: '',
                locationProps: {
                    multiple: true,
                    value: 'name',
                    children: 'city',
                    label: 'name'
                },
                lookRemarkTitle: '', //查看备注标题
                lookRemarkList: [], //查看备注列表
                lookRemarkTextarea: '', //备注的文本框
                isRemarkLook: false, ////查看备注弹窗
                lookRemarkItem: {}, ////查看备注的item项
                accumulativeFrequencyDlg: false, //路演业阅读的弹框
                accumulativeFrequencyItem: {}, ////
                SortByTodo: false,
                AddCompanyBtn: false, //控制新增客户按钮是否显示
            };
        },
        watch: {
            'type': {
                handler(newval) {
                    this.getIndustry();
                    this.getVariety();
                }
            },
        },
        methods: {
            handleChangeLocation() {
                // const arr =[]
                const provinceArr = []
                const cityArr = []
                this.valueLocation.forEach(item => {
                    // arr.push(item.join(''))
                    // 省
                    provinceArr.push(item[0])
                    // 市
                    cityArr.push(item[1])
                })
                //provinceArr需要去重
                this.provinceValue = [...new Set(provinceArr)].join(',')
                this.cityValue = cityArr.join(',')
                this.page_no = 1;
                this.getTableData();
            },
            /* 获取表格 */
            getTableData() {
                this.isShowloadding = true;
                /* 处理品种结构 和 阅读权限 */
                let param_arr = [];
                let variety_red_arr = []
                if (this.variety.length) {
                    param_arr = this.variety.map(item => {
                        return item[1];
                    })
                }
                if (this.variety_red.length) {
                    variety_red_arr = this.variety_red.map(item => {
                        return item[1];
                    })
                }
                // 处理销售筛选
                let salesArr = []
                if (this.sales.length) {
                    salesArr = this.sales.map(item => {
                        return item[item.length - 1]
                    })
                }

                let params = {
                    SortParam: this.sort_param, //自定义排序字段
                    SortType: this.sort_type, //排序方式
                    PageSize: this.pageSize,
                    CurrentIndex: this.page_no,
                    Status: this.act_status,
                    CompanyType: this.type,
                    IndustryId: this.trade ? Number(this.trade) : '',
                    AdminId: salesArr.join(','),
                    ChartPermissionIds: variety_red_arr.join(','), //阅读权限
                    ContractPermissionIds: param_arr.join(','), //已购权限
                    StartDate: this.start_date,
                    EndDate: this.end_date,
                    CreateStartDate: this.createdate[0] ? this.createdate[0] : '',
                    CreateEndDate: this.createdate[0] ? this.createdate[1] : '',
                    KeyWord: this.search_txt,
                    Province: this.provinceValue,
                    City: this.cityValue,
                    PackageType: this.setmealSelect ? Number(this.setmealSelect) : 0,
                    TodoStatus: this.todoType,
                    SortByTodo: this.SortByTodo,
                    TryStage: this.act_trialTag
                }
                customAllInterence.customList(params).then(res => {
                    if (res.Ret === 200) {

                        res.Data.List && res.Data.List.forEach(item => {
                            item.StartDate = item.StartDate.replace(/-/g, '.');
                            item.EndDate = item.EndDate.replace(/-/g, '.');
                            item.FreezeStartDate = item.FreezeStartDate ? item.FreezeStartDate.replace(
                                /-/g, '.') : '';
                            item.FreezeEndDate = item.FreezeEndDate ? item.FreezeEndDate.replace(/-/g,
                                '.') : '';
                            item.LossTime = item.LossTime ? item.LossTime.replace(/-/g, '.') : '';
                            item.ApproveStatus = item.ApproveStatus == '待审批' ? '待审批' : ''
                        })
                        this.tabs = res.Data.StatusCount;
                        console.log(this.tabs);
                        this.total = res.Data.Paging.Totals;

                        this.trialTagArr = res.Data.TryStageCount ? res.Data.TryStageCount.sort((x, y) => x
                            .TryStage - y.TryStage) : []
                        if (this.trialTagArr.length) {
                            const [x, y, ...res] = this.trialTagArr;
                            this.trialTagArr = [x, ...res, y];
                        }

                        this.tableData = res.Data.List || [];
                        this.AddCompanyBtn = res.Data.AddCompanyBtn
                        this.isShowloadding = false;
                    }
                })
            },
            /* 获取品种信息 */
            getVariety() {
                customInterence.getvariety({
                    CompanyType: this.type
                }).then(res => {

                    if (res.Ret === 200) {
                        this.varietyArr = res.Data.List;
                    }
                })
            },
            /* 根据类型获取行业 */
            getIndustry() {
                customInterence.getindustry({
                    Classify: this.type
                }).then(res => {
                    if (res.Ret === 200) {
                        this.tradeArr = res.Data.List || [];
                    }
                })
            },
            /* 获取销售 */
            getSale() {
                let status = 0;
                if (this.act_status == '流失') {
                    status = 1;
                }
                customInterence.getSale({
                    "Status": status
                }).then(res => {
                    if (res.Ret === 200) {
                        this.salesArr = res.Data.List;
                    }
                })
            },
            /* 前往详情页 */
            goDetail(item) {
                const {
                    href
                } = this.$router.resolve({
                    path: '/customDetail',
                    query: {
                        id: item.CompanyId,
                        IsFullCompany:1
                    }
                });
                window.open(href, '_blank');
            },
            /* 搜索客户 重置筛选条件 */
            searchHandle() {
                this.init();
                this.getTableData();
            },
            /* 重置 */
            init() {
                this.act_status = '全部';
                if (this.Role == 'admin' || this.Role == 'finance') {
                    this.type = '';
                }
                this.trade = '';
                this.sales = '';
                this.variety = '';
                this.date = '';
                this.valueLocation = []
                this.provinceValue = ''
                this.cityValue = ''
                this.start_date = ''; //开始日期
                this.end_date = ''; //结束日期
                this.page_no = 1;
            },
            /* 选择类型时 */
            changeType() {
                this.trade = '';
                //this.variety= this.type=='ficc'?[[100,1]]:[];
                this.variety = []
                this.page_no = 1;
                this.getTableData()
            },
            /* 选择行业 */
            changeTrade() {
                this.page_no = 1;
                this.getTableData();
            },
            /* 选择销售时 */
            changeSales() {
                this.page_no = 1;
                this.getTableData();
            },
            /* 选择品种 */
            changeVariety() {
                this.page_no = 1;
                this.getTableData();
            },
            /* 选择服务日期 */
            dateChange(e) {
                if (e[0]) {
                    this.start_date = e[0];
                    this.end_date = e[1];
                } else {
                    this.start_date = '';
                    this.end_date = '';
                }
                this.page_no = 1;
                this.getTableData();
            },
            /* 选择日期 */
            dateChange2(e) {
                // console.log(e[0]);
                if (!e[0]) {
                    this.createdate = []
                }
                this.page_no = 1;
                this.getTableData();
            },
            /* 切换状态 表格重置 */
            changeStatus(item, index) {
                this.act_status = item.Status;
                this.act_trialTag = 0;
                this.$refs.userTable.clearSort()
                this.sort_type = '';
                this.sort_param = '';
                this.SortByTodo = false
                this.page_no = 1;
                this.getTableData()
                /* this.sales=''; */
                //重新获取销售信息
                this.getSale();
            },

            /* 下拉菜单操作 */
            async itemclickHandle(query) {
                if (query.type == '查看权限') {
                    this.lookHandle(query.data)
                }

            },
            /* 查看权限 */
            lookHandle(item) {
                this.lookTitle = item.CompanyName;
                customAllInterence.lookauth({
                    CompanyId: item.CompanyId,
                }).then(res => {
                    if (res.Ret === 200) {
                        this.isLook = true;
                        let auth = [];
                        res.Data.List ? res.Data.List.forEach(item => {
                            auth.push(item.Items)
                        }) : ''
                        this.lookAuthList = auth.flat(Infinity);
                        let authEquity = [] //权益
                        res.Data.ListRai ? res.Data.ListRai.forEach(item => { //权益
                            // 过滤没有权限的套餐
                            authEquity.push(item.Items.filter(it => item.CheckList.includes(it
                                .ChartPermissionId)))
                        }) : ''
                        this.lookAuthListEquity = authEquity.flat(Infinity) //权益
                    }
                })
            },
            /* 页码改变 */
            handleCurrentChange(page) {
                this.page_no = page;
                this.getTableData();
            },
            /* 关闭查看权限弹窗 */
            closeDia() {
                this.lookTitle = '';
                this.resetEquity()
                this.isLook = false;
            },
            /* 关闭弹框后重置 */
            resetEquity() {
                this.lookAuthList = [];
                this.lookAuthListEquity = []
            },
            /* 到期天数排序发生变化 全局排序 */
            sortChangeHandle(item) {
                if (item.column.label === 'To-Do') {
                    this.SortByTodo = !this.SortByTodo
                    this.sort_type = ''
                    this.sort_param = ''
                } else if (item.prop === 'Status') {
                    this.SortByTodo = false
                    this.sort_type = 'asc'
                    this.sort_param = this.sort_param === 'tryStage' ? '' : 'tryStage'
                } else if (item.prop === 'deadline') {
                    this.SortByTodo = false
                    this.sort_type = 'asc'
                    this.sort_param = this.sort_param === 'deadline' ? '' : 'deadline'
                } else {
                    this.SortByTodo = false
                    this.sort_type = item.order === 'ascending' ? 'asc' : item.order === 'descending' ? 'desc' : '';
                    this.sort_param = item.column.label == '转正时间' ? 'formalTime' : item.column.label == '冻结时间' ?
                        'freezeTime' : item.column.label == '流失时间' ? 'lossTime' : item.prop;
                }
                this.page_no = 1;
                this.getTableData();
            },
            accumulativeFrequencyClick(item) {
                this.accumulativeFrequencyDlg = true
                this.accumulativeFrequencyItem = item.row
            },
            changeSort() {
                this.SortByTodo = !this.SortByTodo
                this.page_no = 1;
                //自定义排序规则互斥,把其他的排序设置成默认值
                this.sort_type = ''
                this.getTableData()
            },
        },
        created() {
            /* 除admin账号 客户类型默认 */
            if (!(this.Role == 'admin' || this.Role == 'finance')) {
                this.type = this.RoleType;
            }
            this.variety = this.type == 'ficc' ? [
                [100, 1]
            ] : []
        },
        mounted() {
            this.getSale();
            this.getTableData();
        },
    }
</script>

<style lang='scss'>
    .ficc-package {
        display: inline-block;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 5px;
        color: #3994fb;
        background-color: #dcecfc;
    }

    .color-red {
        color: red !important;
    }

    .isShared::after {
        content: '共享';
        font-size: 12px;
        // padding: 0px 0px 0px 2px;
        width: 30px;
        color: #3994fb;
        background-color: #dcecfc;
        position: absolute;
        left: 0;
        bottom: 0;
        border-top-right-radius: 5px;
    }

    .customList_container {
        .mx-datepicker {
            width: 200px !important;
        }

        .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
            background-color: #409EFF !important;
            border-color: #409EFF;
        }

        .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
            background-color: #409EFF !important;
            border-color: #409EFF;
        }

        .customList_bot_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding: 20px 30px;
            background: #fff;
            border: 1px solid #ECECEC;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        }

        .customList_bot {
            min-height: calc(100vh - 324px);
            padding: 20px 30px 80px;
            background: #fff;
            position: relative;
            border: 1px solid #ECECEC;
            border-radius: 4px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

            .customList_top {
                padding: 20px 0 30px;
                background: #fff;

                .el-cascader__search-input {
                    min-width: 30px;
                }
            }

            .tabs_cont {
                display: flex;
                align-items: center;
                color: #333;
                margin-bottom: 30px;

                &.trial-ul {
                    padding: 0 30px;
                }

                .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;
                    }
                }

                .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;
                        }
                    }
                }
            }

            .try_style {
                color: #BBBBBB;
            }

            .bot_cont {

                //padding-bottom: 20px;
                .fixedbar {
                    position: fixed;
                    right: 45px;
                    bottom: 20px;
                    background-color: transparent;
                    z-index: 2;
                }
            }
        }

        .menu_lists {
            padding: 40px 18px;
            border-radius: 4px;

            .menu_item {
                display: flex;
                // align-items: center;
                margin-bottom: 30px;

                &:last-child {
                    margin-bottom: 0;
                }

                .list_item {
                    margin-right: 20px;
                    margin-bottom: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }

        .mouse-enter {
            &:hover {
                text-decoration: underline;
            }
        }
    }
</style>

<style lang="scss">
    .customList_container {
        .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__suffix {
                right: -22px;
            }

            &.is-disabled {
                .el-input__inner {
                    border-color: #E4E7ED;
                }

                .el-input__suffix {
                    display: none;
                }
            }
        }
    }
</style>