|
|
@@ -0,0 +1,267 @@
|
|
|
+<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="pageChange(1)"
|
|
|
+ />
|
|
|
+ <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="pageChange(1)"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-model="status"
|
|
|
+ placeholder="请选择客户状态"
|
|
|
+ @change="pageChange(1)"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.val"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.val"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <date-picker
|
|
|
+ v-model="date"
|
|
|
+ type="date"
|
|
|
+ range
|
|
|
+ value-type="format"
|
|
|
+ placeholder="请选择路演日期"
|
|
|
+ @change="pageChange(1)"
|
|
|
+ style="width:200px;margin-right:10px;margin-bottom:8px;"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ placeholder="客户名称"
|
|
|
+ style="width:317px;" clearable
|
|
|
+ v-model="searchWord"
|
|
|
+ @input="pageChange(1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cont-wrapper">
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ :data="tableData"
|
|
|
+ :loading="tabeLoading"
|
|
|
+ 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>
|
|
|
+
|
|
|
+ <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 { overseasCustomInterence } from '@/api/modules/overseasCustom.js'
|
|
|
+import mPage from '@/components/mPage.vue'
|
|
|
+export default {
|
|
|
+ components: { mPage },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabeLoading: false,
|
|
|
+ tableData: [],
|
|
|
+ total: 0,
|
|
|
+ currentIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ columns: [
|
|
|
+ { label: "客户名称",key: 'CompanyName',minWidth:200 },
|
|
|
+ { label: "状态",key: 'CompanyStatus' },
|
|
|
+ { label: "路演日期",key: 'StartDate',sortable:true },
|
|
|
+ { label: "路演形式",key: 'RoadshowType' },
|
|
|
+ { label: "路演平台/路演城市",key: 'RoadshowPlatform' },
|
|
|
+ { label: "研究员",key: 'ResearcherName' },
|
|
|
+ { label: "对接销售",key: 'SellerName' },
|
|
|
+ ],
|
|
|
+
|
|
|
+ sales: [],
|
|
|
+ researchers: [],
|
|
|
+ date:[],
|
|
|
+ searchWord: '',
|
|
|
+ status:[],
|
|
|
+ sortParams: {
|
|
|
+ SortField: '',
|
|
|
+ SortDesc: 1,
|
|
|
+ },
|
|
|
+
|
|
|
+ salesOptions: [],
|
|
|
+ researchersOptions: [],
|
|
|
+ statusOptions: [
|
|
|
+ { label: '正式', val: '正式' },
|
|
|
+ { label: '试用', val: '试用' },
|
|
|
+ { label: '关闭', val: '关闭' },
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getSellerList()
|
|
|
+ this.getResearchersList()
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //获取销售列表
|
|
|
+ async getSellerList() {
|
|
|
+ const res = await overseasCustomInterence.getOverseasRoadShowUsers({AdminType:'seller'})
|
|
|
+
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.salesOptions = res.Data || [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取研究员列表
|
|
|
+ async getResearchersList() {
|
|
|
+ // 发送请求
|
|
|
+ const res = await overseasCustomInterence.getOverseasRoadShowUsers({AdminType:'researcher'});
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.researchersOptions = res.Data || [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async getTableData() {
|
|
|
+ this.tabeLoading = true;
|
|
|
+ let params = {
|
|
|
+ ResearcherId: this.researchers.join(','),
|
|
|
+ SellerId: this.sales.join(','),
|
|
|
+ StartDate: this.date[0]||'',
|
|
|
+ EndDate: this.date[1]||'',
|
|
|
+ CompanyStatus: this.status.join(','),
|
|
|
+ CurrentIndex: this.currentIndex,
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ Keyword: this.searchWord,
|
|
|
+ ...this.sortParams
|
|
|
+ }
|
|
|
+ const res = await overseasCustomInterence.getOverseasRoadShowList(params)
|
|
|
+
|
|
|
+ this.tabeLoading = false;
|
|
|
+
|
|
|
+ if(res.Ret!==200) return
|
|
|
+
|
|
|
+ this.tableData = res.Data.List || [];
|
|
|
+
|
|
|
+ this.total = res.Data.Paging.Totals;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSortChange({prop,order}) {
|
|
|
+ console.log(prop,order)
|
|
|
+ this.sortParams = {
|
|
|
+ SortField: order?prop:'',
|
|
|
+ SortDesc: order==='ascending'?2:1
|
|
|
+ }
|
|
|
+
|
|
|
+ this.pageChange(1)
|
|
|
+ },
|
|
|
+
|
|
|
+ pageChange(page) {
|
|
|
+ this.currentIndex = page;
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+
|
|
|
+ toCustomDetail(data) {
|
|
|
+ const path = data.Source===1?'/detailCustomEn':'/customDetail'
|
|
|
+ const query = {
|
|
|
+ ...data.Source===1?{
|
|
|
+ companyId:data.CompanyId - 10000000
|
|
|
+ }:{
|
|
|
+ id:data.CompanyId
|
|
|
+ },
|
|
|
+ from:'overseas'
|
|
|
+ }
|
|
|
+ const href = this.$router.resolve({path,query}).href
|
|
|
+ window.open(href,"_blank")
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 切换筛选 */
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .editor{
|
|
|
+ color:#409EFF;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover{
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>import { join } from 'lodash'
|
|
|
+import { join } from 'lodash'
|
|
|
+
|
bding