hz_crm_web/src/views/roadshow_manage/roadshowQuestion.vue

<template>
  <div class="roadshow-question-page">
    <div class="filter-wrap">
      <date-picker
        v-model="filterData.time" 
        type="date" 
        range
        value-type="format"
        clearable
        @change="handleCurrentChange(1)"
        placeholder="请选择路演时间"
      />
      <el-cascader
        v-model="filterData.researcher"
        placeholder="请选择研究员"
        style="width: 230px"
        :options="researcherList"
        :props="defaultSalesProps"
        :show-all-levels="false"
        collapse-tags
        clearable
        filterable
        :key="cascaderIdx"
        @change="handleCurrentChange(1)"
        @remove-tag="handleRemoveResearcherTag"
      ></el-cascader>
      <el-select 
        v-model="filterData.industry" 
        placeholder="请选择客户行业" 
        clearable
        @change="handleCurrentChange(1)"
      >
        <el-option 
          v-for="item in industryOpts" 
          :key="item.value" 
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select 
        v-model="filterData.type" 
        placeholder="请选择客户分类" 
        clearable
        @change="handleCurrentChange(1)"
      >
        <el-option 
          v-for="item in customTypeOpts" 
          :key="item.value" 
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <a :href="exportExcel" download>
        <el-button type="primary">导出EXCEL</el-button>
      </a>
      <el-input
        placeholder="客户名称"
        prefix-icon="el-icon-search"
        v-model="filterData.keyword"
        style="display:inline-block;width:300px;margin-left: auto;"
        clearable
        @change="handleCurrentChange(1)"
      />
    </div>

    <el-table
      :data="tableData"
      v-loading="tableLoading"
      element-loading-text="数据加载中..." 
      style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top:20px;"
      border
    >
      <el-table-column
        v-for="item in tableColums"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        align="center"
      >
        <template slot-scope="{row}">

          <!-- 时间处理 -->
          <span v-if="item.key === 'time'">
            {{
              row.StartDate === row.EndDate
              ? ($moment(row.StartDate + " " + row.StartTime).format(
                "MM.DD(ddd) HH:mm") + '~' +  $moment(row.EndDate + " " + row.EndTime).format("HH:mm"))
              : (
                $moment(row.StartDate + " " + row.StartTime).format(
                "MM.DD(ddd) HH:mm") + '~' + $moment(row.EndDate + " " + row.EndTime).format("MM.DD(ddd) HH:mm")
              )
            }}
          </span>
          <!-- 活动形式 -->
          <span v-else-if="item.key === 'RoadshowType'">
            {{row.RoadshowType}} {{ row.RoadshowType === '线上' ? `(${row.RoadshowPlatform}  )` : `(${row.Province}${row.City}${row.District})`}}
          </span>
          <!-- 客户拼接 -->
          <span v-else-if="item.key === 'company'">
            {{ row.CooperationName || row.CompanyName || '——'}}

            <el-tooltip effect="dark" placement="top-start" v-if="row.CompanyId"  @mouseenter.native="getCompanyInfo(row)" popper-class="company-tip-poper">
              <i class="el-icon-info"/>
              <div slot="content" v-if="companyInfo">
                <!-- 权益客户 -->
                <template v-if="Role.includes('rai')">
                    <p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
                    <p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
                    <p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">行业权限：{{companyInfo.PermissionName}}</p>
                    <p style="margin: 6px 0;">累计互动次数：{{companyInfo.ReportReadTotal}}</p>
                </template>
                <!-- ficc客户分国内海外 -->
                <template v-else>
                    <template v-if="companyInfo.EnglishCompany===1">
                        <p style="margin: 6px 0;">所属国家：{{companyInfo.EnglishCountry}}</p>
                        <p style="margin: 6px 0;">累计点击量：{{companyInfo.EnglishViewTotal}}</p>
                    </template>
                    <template v-else>
                        <p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
                        <p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
                        <p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">开通品种：{{companyInfo.PermissionName}}</p>
                        <p style="margin: 6px 0;">累计报告阅读次数：{{companyInfo.ReportReadTotal}}</p>
                    </template>
                </template>
              </div>
            </el-tooltip>
          </span>
          <el-button type="text" v-else-if="item.key === 'question_btn'"  @click="handleShowQuestionDetail(row)">问答详情</el-button>
          <span v-else>{{ row[item.key] || '——' }}</span>
        </template>
      </el-table-column>
      <div slot="empty" style="padding: 20px 0;">
        <img src="~@/assets/img/data_m/table_no.png" alt="" style="display:block;width:135px;height:90px;margin: 0 auto;">
        <span>暂无数据</span>
      </div>
    </el-table>
    <div style="height:60px;padding-top: 20px;">
      <m-page
        :total="total"
        :page_no="page_no"
        :pageSize="pageSize"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>

    <!-- 查看问答 -->
    <viewAnswer 
      :isShow.sync="isShowViewAnswer"
      :roadAnswerData="currentAddAnswerData"
      :RsCalendarResearcherId="currentAddAnswerData.RsCalendarResearcherId"
      :RsCalendarId="currentAddAnswerData.RsCalendarId"
      :ResearcherId="currentAddAnswerData.ResearcherId"
    />
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import viewAnswer from './compononts/viewAnswer.vue'
export default {
  name:'RoadShowQuestion',
  components:{mPage,viewAnswer},
  computed: {
    Role() {
      return localStorage.getItem("Role");
    },
    exportExcel(){
			let baseUrl = process.env.API_ROOT + "/roadshow/question/summary/export";
			let token = localStorage.getItem("auth") || "";
			let paramStr = "";
			let obj = {
				StartDate:this.filterData.time?this.filterData.time[0]:'',
        EndDate:this.filterData.time?this.filterData.time[1]:'',
        ResearcherId:this.filterData.researcher?this.filterData.researcher.join(','):'',
        Keyword:this.filterData.keyword,
        CompanyIndustry:this.filterData.industry,
        CompanyClassify:this.filterData.type
			};
			for (let key in obj) {
				paramStr = `${paramStr}&${key}=${obj[key]}`;
			}
			return `${baseUrl}?${token}${paramStr}`;
		}
  },
  data () {
    return {
      industryOpts:[
        {
          label:'黑色',
          value:'黑色'
        },
        {
          label:'有色',
          value:'有色'
        },
        {
          label:'能化',
          value:'能化'
        },
        {
          label:'综合',
          value:'综合'
        },
        {
          label:'金融',
          value:'金融'
        },
        {
          label:'农产品',
          value:'农产品'
        }
      ],
      customTypeOpts:[ 
        {
          label:'上游',
          value:'上游'
        },
        {
          label:'中游',
          value:'中游',
        },
        {
          label:'下游',
          value:'下游',
        },
        {
          label:'投资',
          value:'投资',
        }
      ],
      researcherList: [], // 研究员列表
      defaultSalesProps: {
        multiple: true,
        children: "ResearcherList",
        value: "AdminId",
        emitPath: false,
      }, //研究员配置
      cascaderIdx:1,

      filterData:{
        time:'',
        keyword:'',
        researcher:'',
        industry:'',
        type:''
      },

      companyInfo:{},

      tableColums:[
        {
          label: '路演时间',
          key: 'time',
        },
        {
          label: '客户名称',
          key: 'company',
        },
        {
          label: '路演形式',
          key: 'RoadshowType',
        },
        {
          label: '发起人',
          key: 'SysUserRealName',
        },
        {
          label: '研究员',
          key: 'ResearcherName',
        },
        {
          label: '客户问答',
          key: 'question_btn',
        },
      ],
      tableLoading:false,
      tableData:[],
      total:0,
      page_no:1,
      pageSize:10,

      isShowViewAnswer:false,
      currentAddAnswerData:{}
    }
  },
  created() {
    this.getResearcherList()
    this.getRoadShowQuestionList()
  },
  methods: {
    handleShowQuestionDetail(e){
      this.currentAddAnswerData=e
      this.isShowViewAnswer=true
    },

    async getRoadShowQuestionList(){
      this.tableLoading=true
      const res=await roadshowInterence.roadShowQuestionSummary({
        PageSize:this.pageSize,
        CurrentIndex:this.page_no,
        StartDate:this.filterData.time?this.filterData.time[0]:'',
        EndDate:this.filterData.time?this.filterData.time[1]:'',
        ResearcherId:this.filterData.researcher?this.filterData.researcher.join(','):'',
        Keyword:this.filterData.keyword,
        CompanyIndustry:this.filterData.industry,
        CompanyClassify:this.filterData.type
      })
      this.tableLoading=false

      if(res.Ret===200){
        this.tableData=res.Data.List||[]
        this.total=res.Data.Paging.Totals 
      }

    },

    handleCurrentChange(page){
      this.page_no=page
      this.getRoadShowQuestionList()
    },

    handleRemoveResearcherTag(e){
      console.log(e);
      this.filterData.researcher=this.filterData.researcher.filter(i=>i!==e)
      this.cascaderIdx++
    },

    /* 获取客户信息 */
    async getCompanyInfo({CompanyId,EnglishCompany,ActivityType,ResearcherId}) {
      const { Data }  = await roadshowInterence.componyDetail({ CompanyId,EnglishCompany });
      this.companyInfo = Data;
    },

    // 获取研究员列表
    async getResearcherList() {
      // 发送请求
      const res = await roadshowInterence.getResearcherList();
      if (res.Ret === 200) {
        const ficcList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
        const raiList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
        this.researcherList = [{
            label:'ficc',
            ResearcherList:ficcList
        },{
            label:'权益',
            ResearcherList:raiList
        }]
      }
    },
    // 对获取到的研究员列表做处理
    formatResearcherList(list) {
      list.forEach((group) => {
        // 对组做处理
        group.label = group.GroupName;
        // 如果有列表
        group.ResearcherList &&
          group.ResearcherList.forEach((item) => {
            // 对研究员做处理
            item.label = item.RealName;
            item.value = {
              ResearcherId: item.AdminId,
              ResearcherName: item.RealName,
            };
          });
      });
      // 去掉ficc全体选项
      return list.filter((group) => group.GroupName !== "ficc全体");
    },

  },
} 
</script>

<style lang="scss" scoped>
.roadshow-question-page{
  background-color: #fff;
  padding: 20px;
}
.page-type-box{
  display: flex;
  align-content: center;
  gap: 0 30px;
  font-size: 16px;
  line-height: 2;
  margin-bottom: 20px;
  div{
    cursor: pointer;
  }
  .item_active{
    color: #409EFF;
    border-bottom: 1px solid #409EFF;
  }
}
.filter-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;

}
</style>