|
|
@@ -0,0 +1,826 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" customer-page-box>
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <!-- <el-form-item label="客户名称" prop="companyName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.companyName"
|
|
|
+ placeholder="请输入客户名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="线索来源" prop="source">
|
|
|
+ <el-select v-model="queryParams.source" placeholder="请选择线索来源" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in clueSourceOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="客户经理" prop="manager">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.manager"
|
|
|
+ placeholder="请输入客户经理"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="公司名称" prop="companyName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.companyName"
|
|
|
+ placeholder="请输入公司名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电话号码" prop="mobile">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.mobile"
|
|
|
+ placeholder="请输入电话号码"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="接口人角色" prop="contactRole">
|
|
|
+ <el-select v-model="queryParams.contactRole" placeholder="请选择" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in contactRoleOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="业务场景" prop="businessScenario">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.businessScenario"
|
|
|
+ placeholder="请输入业务场景"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="方案涉及的产品" prop="product">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.product"
|
|
|
+ placeholder="请输入方案涉及的产品"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="采购周期(单位:天)" prop="purchaseCycle">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.purchaseCycle"
|
|
|
+ placeholder="请输入采购周期(单位:天)"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="跟进状态" prop="businessStatus">
|
|
|
+ <el-select v-model="queryParams.businessStatus" placeholder="请选择跟进状态" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in businessStatusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目阶段" prop="projectPhase">
|
|
|
+ <el-select v-model="queryParams.projectPhase" placeholder="请选择" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectPhaseOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="意向等级" prop="level">
|
|
|
+ <el-select v-model="queryParams.level" placeholder="请选择" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="是否绑定BP账号" prop="isBp">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.isBp"
|
|
|
+ placeholder="请输入是否绑定BP账号"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="BP账户" prop="bpAccount">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.bpAccount"
|
|
|
+ placeholder="请输入BP账户"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="预计成单时间" prop="preTime">
|
|
|
+ <el-date-picker clearable size="small" style="width: 200px"
|
|
|
+ v-model="queryParams.preTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择预计成单时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="预计付费(元)" prop="preMoney">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.preMoney"
|
|
|
+ placeholder="请输入预计付费(元)"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="挖掘时间" prop="createTime">
|
|
|
+ <el-date-picker clearable size="small" style="width: 200px"
|
|
|
+ v-model="queryParams.createTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择挖掘时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="挖掘时间" prop="createTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:205.4px"
|
|
|
+ clearable size="small"
|
|
|
+ v-model="createTimeRange"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="下次跟进时间" prop="nextTime">
|
|
|
+ <el-date-picker clearable size="small" style="width: 200px"
|
|
|
+ v-model="queryParams.nextTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择下次跟进时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="下次跟进时间" prop="nextTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:205.4px"
|
|
|
+ clearable size="small"
|
|
|
+ v-model="nextTimeRange"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="回收时间" prop="recoveryTime">
|
|
|
+ <el-date-picker clearable size="small" style="width: 200px"
|
|
|
+ v-model="queryParams.recoveryTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择回收时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="回收时间" prop="recoveryRange">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:205.4px"
|
|
|
+ clearable size="small"
|
|
|
+ v-model="recoveryRange"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['crm:business:export']"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button size="mini" icon="el-icon-s-operation" @click="handleSetColumn()" >设置列表</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <!-- <el-table v-loading="loading" :data="businessList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="商机ID" align="center" prop="businessId" />
|
|
|
+
|
|
|
+ <el-table-column label="线索来源" align="center" prop="source">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="source" v-for="(item, index) in clueSourceOptions" v-if="scope.row.source==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户经理" align="center" prop="manager" />
|
|
|
+ <el-table-column label="公司名称" align="center" prop="companyName" />
|
|
|
+ <el-table-column label="电话号码" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.mobileList">
|
|
|
+ <el-tag v-for="(phone, index) in scope.row.mobileList" :key="index">
|
|
|
+ {{ phone.mobile }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="接口人角色" align="center" prop="contactRole" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="contactRole" v-for="(item, index) in contactRoleOptions" v-if="scope.row.contactRole==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="业务场景" align="center" prop="businessScenario">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="businessScenario" v-for="(item, index) in businessScenarioOptions" v-if="scope.row.businessScenario==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="方案涉及产品" align="center" prop="product" width="100"/>
|
|
|
+ <el-table-column label="采购周期" align="center" prop="purchaseCycle">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.purchaseCycle}}天</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="跟进状态" align="center" prop="businessStatus">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="businessStatus" v-for="(item, index) in businessStatusOptions" v-if="scope.row.businessStatus==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="项目阶段" align="center" prop="projectPhase" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="projectPhase" v-for="(item, index) in projectPhaseOptions" v-if="scope.row.projectPhase==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="意向等级" align="center" prop="level" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="level" v-for="(item, index) in levelOptions" v-if="scope.row.level==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否绑定BP账号" align="center" prop="isBp" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span prop="isBp" v-for="(item, index) in isBpOptions" v-if="scope.row.isBp==item.dictValue">{{item.dictLabel}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="BP账户" align="center" prop="bpAccount" />
|
|
|
+ <el-table-column label="预计成单时间" align="center" prop="preTime" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.preTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="预计付费" align="center" prop="preMoney">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.preMoney}}元</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="挖掘时间" align="center" prop="createTime" width="180"/>
|
|
|
+ <el-table-column label="下次跟进时间" align="center" prop="nextTime" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.nextTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['crm:business:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['crm:business:remove']"
|
|
|
+ >退回公海</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table> -->
|
|
|
+
|
|
|
+ <!-- 动态表格 -->
|
|
|
+ <el-table height="500" border v-loading="loading" :data="businessList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <!-- 动态渲染列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="col in visibleColumns"
|
|
|
+ :key="col.prop"
|
|
|
+ :label="col.label"
|
|
|
+ :width="col.width"
|
|
|
+ align="center"
|
|
|
+ :prop="col.prop">
|
|
|
+
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 如果是线索来源字段 -->
|
|
|
+ <template v-if="col.prop === 'source'">
|
|
|
+ <el-tag v-for="item in clueSourceOptions" :key="item.dictValue" v-show="scope.row.source == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 如果是电话号码字段 -->
|
|
|
+ <template v-else-if="col.prop === 'mobileList'">
|
|
|
+ <el-tag v-for="(phone, index) in scope.row.mobileList" :key="index" v-show="scope.row.mobileList">
|
|
|
+ {{ phone.mobile }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是接口人角色字段 -->
|
|
|
+ <template v-else-if="col.prop === 'contactRole'">
|
|
|
+ <span v-for="item in contactRoleOptions" :key="item.dictValue" v-show="scope.row.contactRole == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是业务场景字段 -->
|
|
|
+ <template v-else-if="col.prop === 'businessScenario'">
|
|
|
+ <span v-for="(item, index) in businessScenarioOptions" :key="item.dictValue" v-show="scope.row.businessScenario == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是采购周期字段 -->
|
|
|
+ <template v-else-if="col.prop === 'purchaseCycle'">
|
|
|
+ <span>{{scope.row.purchaseCycle||'--'}}天</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 如果是跟进状态字段 -->
|
|
|
+ <template v-else-if="col.prop === 'businessStatus'">
|
|
|
+ <span v-for="item in businessStatusOptions" :key="item.dictValue" v-show="scope.row.businessStatus == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是项目阶段字段 -->
|
|
|
+ <template v-else-if="col.prop === 'projectPhase'">
|
|
|
+ <span v-for="(item, index) in projectPhaseOptions" :key="item.dictValue" v-show="scope.row.projectPhase == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是意向等级字段 -->
|
|
|
+ <template v-else-if="col.prop === 'level'">
|
|
|
+ <span v-for="(item, index) in levelOptions" :key="item.dictValue" v-show="scope.row.level == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是预计成单时间字段 -->
|
|
|
+ <template v-else-if="col.prop === 'preTime'">
|
|
|
+ <span>{{ parseTime(scope.row.preTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是是否绑定BP账号字段 -->
|
|
|
+ <template v-else-if="col.prop === 'isBp'">
|
|
|
+ <span v-for="(item, index) in isBpOptions" :key="item.dictValue" v-show="scope.row.isBp == item.dictValue">
|
|
|
+ {{ item.dictLabel }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是预计付费字段 -->
|
|
|
+ <template v-else-if="col.prop === 'preMoney'">
|
|
|
+ <span>{{scope.row.preMoney||'--'}}元</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 如果是下次跟进时间字段 -->
|
|
|
+ <template v-else-if="col.prop === 'nextTime'">
|
|
|
+ <span>{{ parseTime(scope.row.nextTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 其他普通字段 -->
|
|
|
+ <span v-else>{{ scope.row[col.prop] }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 操作列,始终显示 -->
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope" v-if="scope.row.customerId !== ''">
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleShow(scope.row)" v-hasPermi="['crm:customer:query']" >查看相关客户</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
|
|
+ <add-business @closeBusiness="closeBusiness" ref="addBusiness" />
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 显示 allColumns 数据的对话框 -->
|
|
|
+ <el-dialog :visible.sync="columns.open" :title="columns.title">
|
|
|
+ <set-column ref="setColumn" @close="closeSetColumn"/>
|
|
|
+ </el-dialog>
|
|
|
+ <el-drawer
|
|
|
+ size="75%"
|
|
|
+ :title="show.title" :visible.sync="show.open">
|
|
|
+ <customer-details ref="customerDetails" />
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listBusiness, getBusiness, exportBusiness,setBusinessPool } from "@/api/crm/business";
|
|
|
+import addBusiness from '../components/addBusiness.vue';
|
|
|
+import setColumn from '../components/setColumn.vue';
|
|
|
+import {getShow} from "@/api/system/show";
|
|
|
+import customerDetails from '../components/customerDetails.vue';
|
|
|
+export default {
|
|
|
+ name: "Business",
|
|
|
+ components: {addBusiness,setColumn,customerDetails},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show:{
|
|
|
+ title:"客户详情",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ columns:{
|
|
|
+ title:"设置列表",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ columnType:'business',
|
|
|
+ visibleColumns: [],
|
|
|
+ // 可选字段
|
|
|
+ allColumns: [
|
|
|
+ { prop: "businessId", label: "商机ID" },
|
|
|
+ // { prop: "companyName", label: "客户名称" },
|
|
|
+ { prop: "customerId", label: "客户ID" },
|
|
|
+ { prop: "source", label: "线索来源" },
|
|
|
+ { prop: "manager", label: "客户经理" },
|
|
|
+ { prop: "companyName", label: "公司名称" },
|
|
|
+ { prop: "mobileList", label: "电话号码" },
|
|
|
+ { prop: "contactRole", label: "接口人角色" },
|
|
|
+ { prop: "businessScenario", label: "业务场景" },
|
|
|
+ { prop: "product", label: "方案涉及产品" },
|
|
|
+ { prop: "purchaseCycle", label: "采购周期" },
|
|
|
+ { prop: "businessStatus", label: "跟进状态" },
|
|
|
+ { prop: "projectPhase", label: "项目阶段" },
|
|
|
+ { prop: "level", label: "意向等级" },
|
|
|
+ { prop: "isBp", label: "是否绑定BP账号" },
|
|
|
+ { prop: "bpAccount", label: "BP账户" },
|
|
|
+ { prop: "preTime", label: "预计成单时间", width: 105 },
|
|
|
+ { prop: "preMoney", label: "预计付费" },
|
|
|
+ { prop: "createTime", label: "挖掘时间", width: 105 },
|
|
|
+ { prop: "nextTime", label: "下次跟进时间", width: 105 }
|
|
|
+
|
|
|
+ ],
|
|
|
+ // 选中的字段(默认显示所有字段)
|
|
|
+ selectedKeys: [
|
|
|
+ "businessId",
|
|
|
+ "customerId",
|
|
|
+ "source",
|
|
|
+ "manager",
|
|
|
+ "companyName",
|
|
|
+ "mobileList",
|
|
|
+ "contactRole",
|
|
|
+ "businessScenario",
|
|
|
+ "product",
|
|
|
+ "purchaseCycle",
|
|
|
+ "businessStatus",
|
|
|
+ "projectPhase",
|
|
|
+ "level",
|
|
|
+ "isBp",
|
|
|
+ "bpAccount",
|
|
|
+ "preTime",
|
|
|
+ "preMoney",
|
|
|
+ "createTime",
|
|
|
+ "nextTime"
|
|
|
+ ],
|
|
|
+ createTimeRange:[],
|
|
|
+ nextTimeRange:[],
|
|
|
+ recoveryRange:[],
|
|
|
+ statusOptions:[
|
|
|
+ {
|
|
|
+ dictValue:1,
|
|
|
+ dictLabel:"已分配"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictValue:2,
|
|
|
+ dictLabel:"进行中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictValue:3,
|
|
|
+ dictLabel:"回收"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ clueSourceOptions:[],
|
|
|
+ contactRoleOptions:[],
|
|
|
+ projectPhaseOptions:[],
|
|
|
+ businessScenarioOptions:[],
|
|
|
+ levelOptions:[],
|
|
|
+ businessStatusOptions:[],
|
|
|
+ isBpOptions:[
|
|
|
+ {
|
|
|
+ dictValue:0,
|
|
|
+ dictLabel:"未注册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictValue:1,
|
|
|
+ dictLabel:"已注册未绑定"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictValue:2,
|
|
|
+ dictLabel:"不明确"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dictValue:3,
|
|
|
+ dictLabel:"已绑定"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 商机表格数据
|
|
|
+ businessList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ // customerId: null,
|
|
|
+ source: null,
|
|
|
+ manager: null,
|
|
|
+ companyName: null,
|
|
|
+ mobile: null,
|
|
|
+ contactRole: null,
|
|
|
+ businessScenario: null,
|
|
|
+ product: null,
|
|
|
+ purchaseCycle: null,
|
|
|
+ businessStatus: null,
|
|
|
+ projectPhase: null,
|
|
|
+ level: null,
|
|
|
+ isBp: null,
|
|
|
+ bpAccount: null,
|
|
|
+ preTime: null,
|
|
|
+ preMoney: null,
|
|
|
+ nextTime: null,
|
|
|
+ recoveryTime: null,
|
|
|
+ status: null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ customerId: [
|
|
|
+ { required: true, message: "客户id不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("business_scenario_type").then((response) => {
|
|
|
+ this.businessScenarioOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_customer_source").then((response) => {
|
|
|
+ this.clueSourceOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_contact_role").then((response) => {
|
|
|
+ this.contactRoleOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_project_phase").then((response) => {
|
|
|
+ this.projectPhaseOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_level").then((response) => {
|
|
|
+ this.levelOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("crm_business_status").then((response) => {
|
|
|
+ this.businessStatusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleShow(row){
|
|
|
+ var that=this;
|
|
|
+ that.show.open=true;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.customerDetails.getDetails(row.customerId);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ handleSetColumn(){
|
|
|
+ this.columns.open=true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.setColumn.reset(that.allColumns,that.selectedKeys,that.columnType);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ closeSetColumn(){
|
|
|
+ this.columns.open=false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleBusiness(row){
|
|
|
+ this.business.open=true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.addBusiness.reset(row);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ closeBusiness(){
|
|
|
+ this.business.open=false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ //查询显示字段
|
|
|
+ async getColumn(){
|
|
|
+ const response = await getShow(this.columnType);
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ this.selectedKeys = response.data.columns.split(",");
|
|
|
+ this.$set(this, "visibleColumns", this.allColumns.filter(col => this.selectedKeys.includes(col.prop)));
|
|
|
+
|
|
|
+ } else{
|
|
|
+ this.$set(this, "visibleColumns", this.allColumns);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 查询客户列表 */
|
|
|
+ async getList() {
|
|
|
+ this.loading = true;
|
|
|
+ await this.getColumn(); // 确保 visibleColumns 先获取到
|
|
|
+
|
|
|
+ if(this.createTimeRange!=null&&this.createTimeRange.length==2){
|
|
|
+ this.queryParams.createTimeRange=this.createTimeRange[0]+"--"+this.createTimeRange[1]
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.queryParams.createTimeRange=null;
|
|
|
+ }
|
|
|
+ if(this.nextTimeRange!=null&&this.nextTimeRange.length==2){
|
|
|
+ this.queryParams.nextTimeRange=this.nextTimeRange[0]+"--"+this.nextTimeRange[1]
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.queryParams.nextTimeRange=null;
|
|
|
+ }
|
|
|
+ if(this.recoveryRange!=null&&this.recoveryRange.length==2){
|
|
|
+ this.queryParams.recoveryRange=this.recoveryRange[0]+"--"+this.recoveryRange[1]
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.queryParams.recoveryRange=null;
|
|
|
+ }
|
|
|
+ const response = await listBusiness(this.addDateRange(this.queryParams, this.dateRange));
|
|
|
+
|
|
|
+ // this.customerList = response.rows;
|
|
|
+ // 处理 customerList 数据,确保不会有 undefined 或 null
|
|
|
+ this.businessList = response.rows.map(row => {
|
|
|
+ let newRow = {};
|
|
|
+ this.visibleColumns.forEach(col => {
|
|
|
+ newRow[col.prop] = row[col.prop] != null ? row[col.prop] : ""; // 如果是 null 或 undefined,就填 "-"
|
|
|
+ });
|
|
|
+ return newRow;
|
|
|
+ });
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ // /** 查询商机列表 */
|
|
|
+ // getList() {
|
|
|
+ // this.loading = true;
|
|
|
+ // if(this.createTimeRange!=null&&this.createTimeRange.length==2){
|
|
|
+ // this.queryParams.createTimeRange=this.createTimeRange[0]+"--"+this.createTimeRange[1]
|
|
|
+ // }
|
|
|
+ // else{
|
|
|
+ // this.queryParams.createTimeRange=null;
|
|
|
+ // }
|
|
|
+ // if(this.nextTimeRange!=null&&this.nextTimeRange.length==2){
|
|
|
+ // this.queryParams.nextTimeRange=this.nextTimeRange[0]+"--"+this.nextTimeRange[1]
|
|
|
+ // }
|
|
|
+ // else{
|
|
|
+ // this.queryParams.nextTimeRange=null;
|
|
|
+ // }
|
|
|
+ // if(this.recoveryRange!=null&&this.recoveryRange.length==2){
|
|
|
+ // this.queryParams.recoveryRange=this.recoveryRange[0]+"--"+this.recoveryRange[1]
|
|
|
+ // }
|
|
|
+ // else{
|
|
|
+ // this.queryParams.recoveryRange=null;
|
|
|
+ // }
|
|
|
+ // listBusiness(this.queryParams).then(response => {
|
|
|
+ // this.businessList = response.rows;
|
|
|
+ // this.total = response.total;
|
|
|
+ // this.loading = false;
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ businessId: null,
|
|
|
+ customerId: null,
|
|
|
+ source: null,
|
|
|
+ manager: null,
|
|
|
+ companyName: null,
|
|
|
+ mobile: null,
|
|
|
+ contactRole: null,
|
|
|
+ businessScenario: null,
|
|
|
+ product: null,
|
|
|
+ purchaseCycle: null,
|
|
|
+ businessStatus: 0,
|
|
|
+ remark: null,
|
|
|
+ projectPhase: null,
|
|
|
+ level: null,
|
|
|
+ isBp: null,
|
|
|
+ bpAccount: null,
|
|
|
+ preTime: null,
|
|
|
+ preMoney: null,
|
|
|
+ nextTime: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ createBy: null,
|
|
|
+ recoveryTime: null,
|
|
|
+ status: 0,
|
|
|
+ // createTimeRange:null,
|
|
|
+ // nextTimeRange:null,
|
|
|
+ // recoveryRange:null
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.businessId)
|
|
|
+ this.single = selection.length!==1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有商机数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return exportBusiness(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(function() {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|