|
|
@@ -0,0 +1,211 @@
|
|
|
+<template>
|
|
|
+ <div class="overseas-custom-roadshow-box">
|
|
|
+ <div class="top-wrapper">
|
|
|
+ <div class="left-select">
|
|
|
+ <el-cascader
|
|
|
+ v-model="sales"
|
|
|
+ :options="salesOptions"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="{
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ children: 'ChildrenList',
|
|
|
+ emitPath: false,
|
|
|
+ label:'RealName',
|
|
|
+ value:'AdminId',
|
|
|
+ multiple:true
|
|
|
+ }"
|
|
|
+ collapse-tags
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择销售"
|
|
|
+ @change="changeSelectOpts('sales')"
|
|
|
+ />
|
|
|
+ <el-cascader
|
|
|
+ v-model="researchers"
|
|
|
+ :options="researchersOptions"
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="{
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ children: 'ResearcherList',
|
|
|
+ emitPath: false,
|
|
|
+ label:'RealName',
|
|
|
+ value:'AdminId',
|
|
|
+ multiple:true
|
|
|
+ }"
|
|
|
+ collapse-tags
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择研究员"
|
|
|
+ @change="changeSelectOps('researchers')"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- <el-select
|
|
|
+ v-model="tableParams.SellerId"
|
|
|
+ placeholder="请选择客户状态"
|
|
|
+ @change="changeSelectOpts('status')"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in salesArr"
|
|
|
+ :key="item.SellerId"
|
|
|
+ :label="item.RealName"
|
|
|
+ :value="item.SellerId"
|
|
|
+ />
|
|
|
+ </el-select> -->
|
|
|
+
|
|
|
+ <date-picker
|
|
|
+ v-model="date"
|
|
|
+ type="date"
|
|
|
+ range
|
|
|
+ value-type="format"
|
|
|
+ placeholder="请选择路演日期"
|
|
|
+ @change="dateChange"
|
|
|
+ style="width:200px;marginRight:10px;marginBottom:8px;"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ placeholder="客户名称/社会信用码/手机号码/邮箱"
|
|
|
+ style="width:317px;" clearable
|
|
|
+ v-model="searchWord"
|
|
|
+ @input="handlePageChange(1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cont-wrapper">
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ @sort-change="handleSortChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ v-for="item in columns" :key="item.key"
|
|
|
+ :prop="item.key" :label="item.label"
|
|
|
+ :min-width="item.minWidth"
|
|
|
+ :sortable="item.sortable?'custom':false"
|
|
|
+ >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <!-- 客户名称 -->
|
|
|
+ <div v-if="item.key==='CompanyName'" class="editor" @click="toCustomDetail(row)">{{row[item.key]}}</div>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <div v-else-if="item.key==='OverseasStatus'" class="status-box">
|
|
|
+ <span>{{row[item.key]}}</span>
|
|
|
+ <div class="select" v-if="row[item.key]==='试用'">
|
|
|
+ <el-select
|
|
|
+ v-model="row.OverseasLabel"
|
|
|
+ size="mini"
|
|
|
+ style="width: 50px"
|
|
|
+ placeholder=""
|
|
|
+ @change="handleChangeTryStatus(row)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in trialTags"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span v-else>{{row[item.key]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 页数选择器 -->
|
|
|
+ <m-page
|
|
|
+ :page_no="currentIndex"
|
|
|
+ :pageSize="pageSize"
|
|
|
+ :total="total"
|
|
|
+ style="position: absolute;right: 50px;bottom: 50px;"
|
|
|
+ @handleCurrentChange="pageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { customInterence,roadshowInterence } from '@/api/api.js'
|
|
|
+import mPage from '@/components/mPage.vue'
|
|
|
+export default {
|
|
|
+ components: { mPage },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ total: 0,
|
|
|
+ currentIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ columns: [
|
|
|
+ { label: "客户名称",key: 'CompanyName' },
|
|
|
+ { label: "状态",key: 'OverseasStatus' },
|
|
|
+ { label: "路演日期",key: 'CompanyName',sortable:true },
|
|
|
+ { label: "路演形式",key: 'CompanyName' },
|
|
|
+ { label: "路演平台/路演城市",key: 'CompanyName' },
|
|
|
+ { label: "研究员",key: 'CompanyName' },
|
|
|
+ { label: "对接销售",key: 'SellerName' },
|
|
|
+ ],
|
|
|
+
|
|
|
+ sales: [],
|
|
|
+ researchers: [],
|
|
|
+ date:[],
|
|
|
+ searchWord: '',
|
|
|
+
|
|
|
+ salesOptions: [],
|
|
|
+ researchersOptions: []
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getSellerList()
|
|
|
+ this.getResearchersList()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //获取销售列表
|
|
|
+ async getSellerList() {
|
|
|
+ const res = await customInterence.getSale({Status:0})
|
|
|
+
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.salesOptions = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取研究员列表
|
|
|
+ async getResearchersList() {
|
|
|
+ // 发送请求
|
|
|
+ const res = await roadshowInterence.getResearcherList();
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.researchersOptions = res.Data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 切换筛选 */
|
|
|
+ changeSelectOpts() {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.overseas-custom-roadshow-box {
|
|
|
+ height: calc(100vh - 110px);
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ border-radius: 2px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 30px 30px 30px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .top-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .cont-wrapper {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
