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

<!-- 页面在客户列表上进行的二次修改，若后续有和客户列表相似的功能，请查看客户列表页面 -->
<template>
	<div class="customList_container" id="customList_container" ref="cusContainer">
		<div class="customList_bot">
      <div class="customList_bot_search">
        <div style="margin-bottom: 8px;" v-if="Role=='thisAdmin'">
          <el-select v-model="status" placeholder="请选择状态" @change="getTableData" style="width: 214px; margin-right: 20px;">
            <el-option :label="item.label" :value="item.value" v-for="(item,index) in statusList" :key="index" ></el-option>
          </el-select>
		  <el-cascader
			v-model="originalSales"
			placeholder="请选择原销售"
			style="width:240px;marginRight:10px;marginBottom:8px;"
			:options="originalSalesArr"
			:props="defaultSalesProps"
			:show-all-levels="false"
			collapse-tags
			clearable
			filterable
			@change="getTableData"
		  />
          <el-select v-model="sales" placeholder="请选择分配销售" style="width: 214px; margin-right: 20px;" 
          clearable filterable multiple collapse-tags @change="getTableData">
            <el-option :label="item.RealName" :value="item.AdminId" v-for="item in salesArr" :key="item.AdminId" ></el-option>
          </el-select>
        </div>
        <div v-else>
            <el-button type="primary" @click="$router.push('/customCityList')">查看同城客户</el-button>
			<el-cascader
				v-model="originalSales"
				placeholder="请选择原销售"
				style="width:200px;marginRight:10px;marginBottom:8px;"
				:options="originalSalesArr"
				:props="defaultSalesProps"
				:show-all-levels="false"
				collapse-tags
				clearable
				filterable
				@change="getTableData"
			/>
        </div> 
        <el-input 
          placeholder="客户名称/社会信用码/手机号码/邮箱"
          v-model="search_txt"
          style="max-width:531px;margin-bottom: 8px;"
          @input="getTableData"
          clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
      </div>
			<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"> 
							<span 
							v-if="scope.row.IsSuspend ===1 || scope.row.Status=='潜在'"
							@click="goDetail(scope.row)"
							class="mouse-enter"
              :class="{'color-red':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':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
					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="ShareSeller"
					label="分配销售"
					min-width="6.14%"
					align="center">
					</el-table-column>
					<el-table-column
					prop="Status"
					label="状态"
					min-width="7.14%"
					align="center">
					<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.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="'服务期限'"
					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">
                  {{scope.row.StartDate}}~{{scope.row.EndDate}}
								</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="'到期'"
					align="center"
					min-width="5.14%"
					sortable="custom">
						<template slot-scope="scope">
							<span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                {{scope.row.ExpireDay||'--'}}
							</span> 
						</template>
					</el-table-column>
					<el-table-column
					prop="createTime"
					:label="'创建时间'"
					sortable="custom"
					align="center" min-width="6.14%">
						<template slot-scope="scope">
							<span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                {{$moment(scope.row.CreatedTime).format('YYYY.MM.DD')}}
							</span> 
						</template>
					</el-table-column>
                    <el-table-column
                        prop="lastServiceTime"
                        :label="'最新服务时间'"
                        sortable="custom"
                        align="center" min-width="6.14%">
                        <template slot-scope="scope">
                            <span :style="scope.row.IsSuspend===1?'color:#bbb':''">
                                {{scope.row.LastServiceTime.substr(0,10).replaceAll('-','.')||'--'}}
                            </span> 
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="serviceTimes"
                        :label="'服务次数'"
                        sortable="custom"
                        align="center" min-width="6.14%">
                        <template slot-scope="scope">
                            <span :style="scope.row.ServiceTimes>0?'color:#409eff;cursor: pointer;':''" @click="handleShowShareRecode(scope.row,'list')">
                                {{scope.row.ServiceTimes}}
                            </span> 
                        </template>
                    </el-table-column>
					<el-table-column label="操作" align="center" min-width="7.14%">
						<template slot-scope="scope">
							<div class="tool" style="display: flex; align-items: center;justify-content: center;" v-if="scope.row.ApproveStatus!='待审批'">
								<!-- <span class="editsty" style="white-space: nowrap;" @click="itemclickHandle({type:'查看权限',data:scope.row})">
									查看权限
								</span>
								<span @click="itemclickHandle({type:'分配销售',data:scope.row})" v-if="Role=='thisAdmin'" class="editsty"
									style="white-space: nowrap;">
									{{scope.row.ShareSellerId?'修改销售':'分配销售'}}
								</span>
								<span class="editsty" @click="itemclickHandle({type:'服务记录',data:scope.row})">
									服务记录
								</span>
								<span class="editsty" @click="itemclickHandle({type:'备注',data:scope.row})">
									备注
								</span> -->
								<div class="font-tool" style="display:flex;flex-direction:column;">
									<span class="editsty" v-for="item in getToolBtnList(scope.row).slice(0,3)" :key="item.type" @click="itemclickHandle({type:item.type,data:scope.row})">
										{{item.type==='分配销售'?scope.row.ShareSellerId?'修改销售':'分配销售':item.type}}
									</span>
								</div>
								<el-dropdown size="medium" placement="bottom-start" @command="itemclickHandle" style="height: 16px;margin-left: 5px;" v-if="getToolBtnList(scope.row).length>3">
									<span class="el-dropdown-link">
										<i class="el-icon-more el-icon--right"></i>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item :command="{type:item.type,data:scope.row}" 
											v-for="item in getToolBtnList(scope.row).slice(3)" :key="item.type">
												<span>{{item.type}}</span>
											</el-dropdown-item>
										</el-dropdown-menu>
									</span>
								</el-dropdown>

							</div>
						</template>
					</el-table-column>
					<div slot="empty" style="line-height: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,total" 
					background
					:current-page="page_no"
					@current-change="handleCurrentChange"
					:page-size="pageSize" 
					:total="total"
					style="float:right;">
					</el-pagination>
				</div>
			</div>
		</div>
		
		<!-- 修改销售弹窗 -->
		<el-dialog
		v-dialogDrag
		:visible.sync="assignedSellerShow"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		:title="assignedSellerTitle"
		@close="cancelAssign"
		center
		width="444px">
			<el-form :model="assignform" :rules="rule" ref="assignform" label-width="110px">
				<el-form-item label="客户名称" prop="name">
					<span style="fontSize:16px;">{{assignform.CompanyName}}</span>
				</el-form-item>
				<el-form-item label="分配销售" prop="SellsId">
					<el-select
						v-model="assignform.SellsId"
						placeholder="请选择修改的销售"
						style="width: 240px"
						filterable>
						<el-option :label="item.RealName" :value="item.AdminId" v-for="item in salesArr" :key="item.AdminId"></el-option>
					</el-select>
				</el-form-item>
			</el-form>	
			<div style="display:flex;justify-content:center;margin:60px 0 35px;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveAssign">保存</el-button>
				<el-button  style="width:80px;" @click="cancelAssign">取消</el-button>
			</div>
		</el-dialog>
    <!-- 查看权限弹窗 -->
    <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" />
    <!-- 服务记录弹窗 -->
    <share-list-dialog 
        :isShareRecodeDialogShow.sync="isShareRecodeDialogShow"
        :customInfo="customInfo"
        :allowEdit="allowEdit"
        @close="()=>{isShareRecodeDialogShow&&getTableData();isShareRecodeDialogShow=false;}"/>
    <!-- 备注弹窗 -->
    <custom-remark-dialog 
        :isRemarkLook="isRemarkLook"
        :lookRemarkItem="customInfo"
        @close="isRemarkLook=false"
    />
	<!-- 补全客户信息弹窗 -->
	<CompleteInfo
		:form="completeForm"
		@cancel="cancelCompleteInfo($event)"
	></CompleteInfo>

	<!-- 合同  -->
	<el-dialog
		:visible.sync="contractModel.show"
		:modal-append-to-body='false'
		width="800px"
		class="self-dialog"
		v-dialogDrag
	>
		<div style="text-align:center;margin:30px 0 100px 0">
			<img width="191" src="../../../assets/img/cus_m/bzht.png" @click="handleContractModel('标准')" style="margin-right:80px;cursor: pointer;">
			<img width="191" src="../../../assets/img/cus_m/fbzht.png" @click="handleContractModel('非标准')" style="cursor: pointer;">
			<p style="font-size:15px;color:#333;text-align:left;padding-left:100px;margin-top:30px">
				注：<br>
				系统生成合同请选择标准合同入口<br>
				非系统生成合同请选择非标准合同入口(包含已走完邮件流程的标准合同)</p>
		</div>
	</el-dialog>
	<!-- 合同信息 -->
	<ContractInfo 
		:initData="contractDialog" 
		@contractInfoDialogClose="contractInfoDialogClose"
	></ContractInfo>

	<!-- 增开试用弹窗 -->
	<el-dialog
		:visible.sync="isAddTrial"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="isAddTrial=false"
		width="800px"
		v-dialogDrag
		center>
			<div slot="title" style="display:flex;alignItems:center;">
				<span style="fontSize:16px;">增开试用（默认两个月）</span>
			</div>
			<Cauthlist
				:autharr="authList"
				:id="addTryId"
				@addOver="addTryOver"
				@close="isAddTrial=false"/>
		</el-dialog>
	</div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import AccumulativeFrequencyDlg from '../compontents/accumulativeFrequencyDlg.vue'
import permissionView from './components/permissionView.vue'
import mixin from './mixins/customlistMixin';
import TotalDayDialog from '../compontents/TotalDayDialog.vue'
import ShareListDialog from './components/shareListDialog.vue';
import CustomRemarkDialog from './components/customRemarkDialog.vue';
import ContractInfo from '../compontents/ContractInfo.vue';
import CompleteInfo from '../compontents/CompleteInfo.vue';
import Cauthlist from '../compontents/CauthList.vue';
export default {
	name:'',
	mixins: [ mixin ],
	components: {TotalDayDialog,AccumulativeFrequencyDlg,permissionView, ShareListDialog,CustomRemarkDialog,ContractInfo,CompleteInfo,Cauthlist},
	computed:{
		isPWang(){
			return this.adminId == 66
		},
		isYDLou(){
			// 不同环境下 楼颖丹账号的adminId 不一样
			if(process.env.NODE_ENV == 'development'||process.env.NODE_ENV == 'test'){
				return this.adminId == 476
			}else if(process.env.NODE_ENV == 'production'){
				return this.adminId == 15
			}
		},
		Role() {
			let role = localStorage.getItem('Role') || '';
			if(role=='admin' || this.isPWang || this.isYDLou){
				// 只有王沛、楼颖丹和所有admin账号才有分配销售的权利
				return 'thisAdmin';
			}else{
				return 'thisSeller';
			}
		}
	},
	data () {

		this.statusList = [{label:'未共享',value:3},{label:'已分配',value:1},{label:'待分配',value:2}]
		return {
			adminId:localStorage.getItem('AdminId'),
			sales:[],
			salesArr:[],//销售
			tableData:[],
			isShowloadding:false,
			status:2,
			search_txt:'',
			total:0,
			page_no:1,
			pageSize:10,
			isLook:false,//权限弹窗
			lookTitle:'',//权限弹窗标题
			lookAuthList:[],//查看的权限
			lookAuthListEquity:[],//权益
			assignedSellerShow:false,//分配销售弹窗
			assignedSellerTitle:'分配销售',
			assignform:{
				CompanyId:'',
				CompanyName:'',
				SellsId:''//选择的销售
			},
			rule:{
				SellsId:[
					{ required: true, message: '销售不能为空', trigger: 'change' },
				]
			},
			sort_type:'',//自定义排序方式
			sort_param:'',//自定义排序方式的哪一个
			btnCommandList:{
				BtnView: '查看权限',
				BtnModifySeller: '分配销售',
				BtnUpdate: '续约申请',
				BtnAddAgreement: '补充协议',
				BtnTryOut: '增开试用',
				BtnServiceRecord:'服务记录',
				BtnRemarkView:'备注'
			},	// 按钮命令列表
			accumulativeFrequencyDlg:false,//路演业阅读的弹框
			accumulativeFrequencyItem:{},
			isRemarkLook:false,//备注的弹框
			contractDialog:{
				show:false,
				type:'',//类型 续约申请、补充协议
				cusdata:null,//客户信息（列表用户数据）
			},//续约申请、补充协议 合同信息弹窗
			contractModel:{
				show:false,
				data:null,//客户信息（列表用户数据）
				type:'',//类型 续约申请、补充协议
			},//续约申请、补充协议 选择合同类型弹窗 
			completeForm:{},
			isAddTrial:false,
			authList:[],

			originalSales:'',
			originalSalesArr:[],
			defaultSalesProps:{
				multiple: true,
				label:'RealName',
				children:'ChildrenList',
				value:'AdminId'
			},//销售级联配置
		};
	},
	methods: {
		/* 获取表格 */
		getTableData() {
			this.isShowloadding = true;
			// 处理销售筛选
			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,
				Keyword:this.search_txt,
				ListParam:this.Role=='thisSeller'?1:this.status, // 销售只能看分配给自己的共享客户，即状态需要是已分配
				SellerId:this.sales.join(','),
				OriginalSellerId:salesArr.join(','),
			}
			customInterence.getShareCustomList(params).then(res => {
				if(res.Ret === 200) {
					this.total = res.Data.Paging.Totals || 0;
					this.tableData = res.Data.List || [];
					this.isShowloadding = false;
				}
			})
		},
		/* 获取销售 */
		getSale() {
			customInterence.salesShareList().then(res => {
				console.log(res);
				if(res.Ret === 200) {
					this.salesArr = res.Data|| []
				}
			})
		},
		/* 前往详情页 */
		goDetail(item) {
			const { href } = this.$router.resolve({
				path:'/customDetail',
				query:{
					id:item.CompanyId,
				}});
			window.open(href, '_blank');
		},
		getToolBtnList(data){
			let toolList = []
			const {BtnItem} = data
			for(const i in this.btnCommandList){
				if(BtnItem[i]){
					toolList.push({type:this.btnCommandList[i]})
				}
			}
			return toolList
		},

		/* 操作-按钮 */
		async itemclickHandle(query) {
			if(query.type == '分配销售'||query.type=='修改销售') {
				this.assignedSellerFun(query.data)
			}else if(query.type=='查看权限'){
				this.lookHandle(query.data)
			}else if(query.type=='服务记录'){
				this.handleShowShareRecode(query.data)
			}else if(query.type=='备注'){
				this.handleShowRemark(query.data)
			}else if(["续约申请","补充协议"].includes(query.type)){
				this.handleOpenContractChoose(query.type,query.data)
			}else if("增开试用"){
				this.addTrialHandle(query.data)
			}
		},
		/* 查看权限 */
		lookHandle(item) {
			this.lookTitle = item.CompanyName;
			customInterence.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) //权益
				}
			})
		},
		assignedSellerFun(row){
			this.assignform = {
				CompanyName:row.CompanyName,
				CompanyId:row.CompanyId,
				SellsId:row.ShareSellerId==0?'':row.ShareSellerId+'',
			}
			this.assignedSellerShow = true;
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},	
		/* 关闭查看权限弹窗 */
		closeDia() {
			this.lookTitle = '';
			this.lookAuthList = [];
			this.lookAuthListEquity = []
			this.isLook = false;
		},
		/* 分配销售 */
		saveAssign() {
			this.$refs.assignform.validate((valid) => {
				if (valid) {
					let param={
						CompanyId:this.assignform.CompanyId,
						SellsId:+this.assignform.SellsId
					}
					customInterence.assignShareSeller(param).then(res=>{
						if(res.Ret == 200){
							this.$message.success(this.assignedSellerTitle+'成功');
							this.getTableData();
							this.assignedSellerShow = false;
						}
					})
				}
			})		
		},
		/* 取消移动客户 */
		cancelAssign() {
			this.assignform = {
				CompanyName:'',
				CompanyId:'',
				SellsId:'',
			}
			this.$refs.assignform.resetFields();
			this.assignedSellerShow = false;
		},
		/* 到期天数排序发生变化 全局排序 */
		sortChangeHandle(item) {
			this.sort_type = item.order === 'ascending' ? 'asc':item.order === 'descending' ? 'desc' : '';
			this.sort_param = item.prop;
			this.getTableData();
		},
		accumulativeFrequencyClick(item){
			this.accumulativeFrequencyDlg = true
			this.accumulativeFrequencyItem = item.row
		},
		handleShowRemark(item){
			this.customInfo = item
			this.isRemarkLook = true
		},
		//关闭合同信息弹窗
		contractInfoDialogClose(e){
			this.contractDialog={
				show:false,
				type:'',
				cusdata:null,
			}
			if(e==='updateList'){
				this.getTableData();
			}
		},
		//验证客户信息完整性
		async getCustomerDetail(id){
			let res=await customInterence.customDetail({
				CompanyId:id
			})
			if(res.Ret!=200) return

			let RoleType=localStorage.getItem('RoleType')
			let IndustryId='',Source=';'
			if(RoleType=='ficc'){
				IndustryId=res.Data.FiccItem.IndustryId
				Source=res.Data.FiccItem.Source
			}else if(RoleType=='权益'){
				IndustryId=res.Data.RaiItem.IndustryId
				Source=res.Data.RaiItem.Source
			}
			if((res.Data.Item.RegionType!='海外'&&!res.Data.Item.Province&&!res.Data.Item.City)||!res.Data.Item.CreditCode||!IndustryId||!Source){
				this.completeForm={
					nameDisable:res.Data.Item.CompanyName!='',
					CityDisable:res.Data.Item.City!='',
					CreditCodeDisable:res.Data.Item.CreditCode!='',
					IndustryIdDisable:IndustryId!=' ',
					SourceDisable:Source!='',		
					CompanyId:id,
					name:res.Data.Item.CompanyName,
					Province:res.Data.Item.Province,
					RegionType:res.Data.Item.RegionType,
					City:res.Data.Item.City,
					CreditCode:res.Data.Item.CreditCode,
					IndustryId:IndustryId?IndustryId:'',
					Source:Source,
					flag:false,//是否为跨部门
					show:true
				}
			}else{
				this.completeForm.show=false
			}
			return new Promise((resolve,reject)=>{
				resolve(this.completeForm.show)
			})
		},
		//关闭补全信息弹窗
		cancelCompleteInfo(refresh){
			// 刷新列表
			if(refresh){
				this.getTableData()
			}
			this.completeForm={
				show:false
			}
		},
		//打开合同选择弹窗
		async handleOpenContractChoose(type,data){
			
			let flag=await this.getCustomerDetail(data.CompanyId)
			if(flag) return
			this.contractModel = {
				type,data,show:true
			}
		},
		//选择标准/非标合同
		handleContractModel(model){
			if(model==='标准'){
				this.contractDialog.type = this.contractModel.type
				this.contractDialog.cusdata = this.contractModel.data
				this.contractDialog.show = true
			}else{
				sessionStorage.setItem('companyInfo',JSON.stringify(this.contractModel.data))
				const routeMap = {
					'续约申请':'/updateCustom',
					'补充协议':'/addAgreement'
				}
				const { href } = this.$router.resolve({path:routeMap[this.contractModel.type],})||{href:''}
				href&&window.open(href, '_blank');
			}
			this.contractModel={
				type:'',data:null,show:false
			}
		},
		//增加试用完成
		addTryOver(){
			this.isAddTrial = false;
			this.getTableData();
		},
		//增开试用
		addTrialHandle(item) {
			this.authList = [];
			customInterence.lookauth({
				CompanyId:item.CompanyId,
				LookType:1
			}).then(res => {
				if(res.Ret === 200) {
					let auth = [];
					// res.Data.List 有值为 ficc
					// res.Data.ListRai 有值为 权益
					res.Data.List ? res.Data.List.forEach(item=> {
						let obj = {
							checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
							isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
							defaultAuth:item.CheckList,
							customType:'ficc',
							...item,
						}
						auth.push(obj)
					}):
					// 权益 RaiMerge 0不管 1合并 2拆分 所传入的数据结构不一样
					res.Data.ListRai[0].RaiMerge==1?res.Data.ListRai.forEach(item=> { // 合并
						let obj = {
							checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
							isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
							defaultAuth:item.CheckList,
							...item,
						}
						auth.push(obj)
					}): res.Data.ListRai.forEach(item=> { // 拆分
						let obj = {
							defaultAuth:item.CheckList,
							customType:'权益',
							...item,
						}	
						// 组合所需的数据格式
						obj.dataList=[
							{
								PermissionTypeName:'',
								medicine:{
									value:'医药',
									isIndeterminate:item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[1].ChartPermissionId].includes(id)).length ==1,
									isCheckAll:item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[1].ChartPermissionId].includes(id)).length == 2,
									isDisabled:item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[1].ChartPermissionId].includes(id)).length ==2
								},
								consumption:{
									value:'消费',
									isIndeterminate:item.CheckList.filter(id => [obj.Items[2].ChartPermissionId,obj.Items[3].ChartPermissionId].includes(id)).length ==1,
									isCheckAll:item.CheckList.filter(id => [obj.Items[2].ChartPermissionId,obj.Items[3].ChartPermissionId].includes(id)).length == 2,
									isDisabled:item.CheckList.filter(id => [obj.Items[2].ChartPermissionId,obj.Items[3].ChartPermissionId].includes(id)).length ==2
								},
								technology:{
									value:'科技',
									isIndeterminate:item.CheckList.filter(id => [obj.Items[4].ChartPermissionId,obj.Items[5].ChartPermissionId].includes(id)).length ==1,
									isCheckAll:item.CheckList.filter(id => [obj.Items[4].ChartPermissionId,obj.Items[5].ChartPermissionId].includes(id)).length == 2,
									isDisabled:item.CheckList.filter(id => [obj.Items[4].ChartPermissionId,obj.Items[5].ChartPermissionId].includes(id)).length ==2
								},
								smart:{
									value:'智造',
									isIndeterminate:item.CheckList.filter(id => [obj.Items[6].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length ==1,
									isCheckAll:item.CheckList.filter(id => [obj.Items[6].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length == 2,
									isDisabled:item.CheckList.filter(id => [obj.Items[6].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length ==2
								},
								strategy:{
									value:'策略'
								},
								experts:{
									value:'专家'
								},
								roadshow:{
									value:'路演服务'
								},
								choose:{
									value:'买方研选'
								}
							},
							{
								PermissionTypeName:{
									value:'主观',
									isIndeterminate:[1,2,3].includes(item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[2].ChartPermissionId,
										obj.Items[4].ChartPermissionId,obj.Items[6].ChartPermissionId].includes(id)).length),
									isCheckAll:item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[2].ChartPermissionId,
										obj.Items[4].ChartPermissionId,obj.Items[6].ChartPermissionId].includes(id)).length == 4,
									isDisabled:item.CheckList.filter(id => [obj.Items[0].ChartPermissionId,obj.Items[2].ChartPermissionId,
										obj.Items[4].ChartPermissionId,obj.Items[6].ChartPermissionId].includes(id)).length ==4
								},
								medicine:{
									value:obj.Items[0].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[0].ChartPermissionId)
								},
								consumption:{
									value:obj.Items[2].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[2].ChartPermissionId)
								},
								technology:{
									value:obj.Items[4].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[4].ChartPermissionId)
								},
								smart:{
									value:obj.Items[6].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[6].ChartPermissionId)
								},
								strategy:{
									value:obj.Items[8].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[8].ChartPermissionId)
								},
								experts:{
									value:obj.Items[9].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[9].ChartPermissionId)
								},
								roadshow:{
									value:obj.Items[10].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[10].ChartPermissionId)
								},
								choose:{
									value:obj.Items[11].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[11].ChartPermissionId)
								}
							},
							{
								PermissionTypeName:{
									value:'客观',
									isIndeterminate:[1,2,3].includes(item.CheckList.filter(id => [obj.Items[1].ChartPermissionId,obj.Items[3].ChartPermissionId,
										obj.Items[5].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length),
									isCheckAll:item.CheckList.filter(id => [obj.Items[1].ChartPermissionId,obj.Items[3].ChartPermissionId,
										obj.Items[5].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length == 4,
									isDisabled:item.CheckList.filter(id => [obj.Items[1].ChartPermissionId,obj.Items[3].ChartPermissionId,
										obj.Items[5].ChartPermissionId,obj.Items[7].ChartPermissionId].includes(id)).length ==4
								},
								medicine:{
									value:obj.Items[1].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[1].ChartPermissionId)
								},
								consumption:{
									value:obj.Items[3].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[3].ChartPermissionId)
								},
								technology:{
									value:obj.Items[5].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[5].ChartPermissionId)
								},
								smart:{
									value:obj.Items[7].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[7].ChartPermissionId)
								},
								strategy:{
									value:obj.Items[8].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[8].ChartPermissionId)
								},
								experts:{
									value:obj.Items[9].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[9].ChartPermissionId)
								},
								roadshow:{
									value:obj.Items[10].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[10].ChartPermissionId)
								},
								choose:{
									value:obj.Items[11].ChartPermissionId,
									isDisabled:item.CheckList.includes(obj.Items[11].ChartPermissionId)
								}
							}
						]

						auth.push(obj)
					})
					this.authList = auth;
				}
			})
			this.addTryId = item.CompanyId;
			this.isAddTrial = true;
		},

		/* 获取销售 */
		getoriginalSale() {
			let status=0;
			customInterence.getSale({"Status":status}).then(res => {
				if(res.Ret === 200) {
					this.originalSalesArr = res.Data.List||[];
				}
			})
		},
	},
	created() {
		this.getSale()
		this.getoriginalSale()
		this.getTableData()
	}
}
</script>

<style lang='scss'>
	.self-dialog{
		.el-dialog__header{
			background-color: #fff !important;
			.el-dialog__close.el-icon.el-icon-close{
				color: #666;
			}
		}
	}
</style>
<style lang='scss' scoped>
	.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 {
	.customList_bot {
		min-height: calc(100vh - 324px);
		padding: 30px 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_bot_search{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
		.bot_cont{
			//padding-bottom: 20px;
			.fixedbar{
				position: fixed;
    			right: 45px;
    			bottom: 20px;
				background-color: transparent;
        z-index: 2;
			}
		}
	}
	.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>